/* Moi Travel - Authentication Pages */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background-color: var(--bg-primary);
    min-height: calc(100vh - 80px);
}

.auth-card {
    background: var(--bg-surface);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

.signup-card {
    max-width: 550px;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
    text-align: center;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

.auth-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.auth-alert.error {
    background-color: #FCE8E8;
    color: #C0392B;
    border: 1px solid #F5C6C6;
}

.auth-alert.success {
    background-color: #E8FCEF;
    color: #27AE60;
    border: 1px solid #C6F5D6;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-group.half {
    flex: 1;
}

/* Phones: let the card shrink to the screen. The side-by-side name row otherwise keeps the
   signup card ~550px wide (its min-content), forcing a horizontal scroll — stack it instead. */
@media (max-width: 600px) {
    .auth-page { padding: 32px 14px; min-height: calc(100vh - 64px); }
    .auth-card, .signup-card { max-width: 100%; padding: 26px 20px; }
    .form-row { flex-direction: column; gap: 0; }
    .auth-title { font-size: 24px; }
    .auth-subtitle { margin-bottom: 22px; }
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.form-group label small {
    color: var(--text-secondary);
    font-weight: 400;
}

.form-group input {
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    transition: border-color var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.auth-submit {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
}

.auth-hint {
    margin: 10px 2px 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-secondary, #6b6b73);
    text-align: center;
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent);
    font-weight: 600;
}

/* Continue with Google (social login) */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--text-secondary, #717171); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border-light, #E2E2E2); }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 16px; border: 1px solid var(--border-light, #dadce0);
    border-radius: 10px; background: #fff; color: #3c4043; font-weight: 600; font-size: 14.5px;
    text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s;
}
.btn-google:hover { background: #f7f8fa; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-color: #c9ccd1; }
.btn-google svg { flex: 0 0 auto; }

/* Email verification (6-digit code) step */
.verify-card .auth-subtitle strong { color: var(--accent, #8E1F2C); }
.verify-code { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; margin: 6px 0 22px; }
.verify-digit {
    width: 48px; height: 58px; text-align: center; box-sizing: border-box; padding: 0; margin: 0;
    font-size: 24px; font-weight: 700; font-family: inherit; line-height: normal; color: var(--text-primary, #1A1A1A);
    border: 1.5px solid var(--border-light, #E2E2E2); border-radius: 12px; background: #fff;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.verify-digit:focus { outline: none; border-color: var(--accent, #8E1F2C); box-shadow: 0 0 0 4px rgba(142,31,44,.12); }
.verify-timer { color: var(--text-secondary, #717171); font-weight: 500; }
#verifyResend.is-disabled { color: var(--text-secondary, #9aa0a6); pointer-events: none; cursor: default; text-decoration: none; }
#verifyAlert { background-color: #FCE8E8; color: #C0392B; border: 1px solid #F5C6C6; }
@media (max-width: 420px) { .verify-digit { width: 40px; height: 50px; font-size: 20px; } .verify-code { gap: 7px; } }

.auth-footer a:hover {
    text-decoration: underline;
}
/* One-click verify ("magic link") result page */
.verify-result { text-align: center; }
.verify-result-icon { width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.verify-result-icon svg { width: 34px; height: 34px; }
.verify-result-icon.ok { background: #EDF7ED; color: #1E7B34; }
.verify-result-icon.err { background: #FDECEC; color: #B3261E; }
.verify-result-btn { display: inline-block; text-decoration: none; margin-top: 4px; }

/* "Forgot password?" link under the password field */
.auth-forgot { margin: -6px 2px 16px; text-align: right; font-size: 13px; }
.auth-forgot a { color: var(--accent, #8E1F2C); font-weight: 600; text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }
/* Dev-only hint shown on the reset page when email can't be delivered locally */
.auth-dev-hint { color: var(--text-secondary, #888); }