/* SaraHome — auth pages (login / register / forgot / reset / verify) shared styles
   §R-N+4xxx+9 (2026-09-04, CEO verdict 「登入頁面做美觀一點」)
   對位 §R-N+62 KISS: 6 個 auth template 共享 1 CSS file, 唔好每個 template 各自加 style.
   對位 about-hero (about.css) 嘅 gradient + badge 設計語言。
   對位 contact-success-card (contact-success.css) 嘅 card pattern。
   對位 §R-N+288 brand refresh (暖橙 #FF8C42 砍藍), accent / cta token 沿用。
   對位 §R-N+264 a11y: title `h1`, ARIA label, focus-visible 全 keyboard navigable. */

/* === Page wrapper === */
.auth-page {
    max-width: 460px;
    margin: 2rem auto 4rem;
    padding: 0 1.25rem;
}

@media (max-width: 768px) {
    .auth-page {
        margin: 1rem auto 2rem;
        padding: 0 1rem;
    }
}

/* === Card === */
.auth-card {
    background: var(--sarahome-v3-surface-card, #FFFFFF);
    border: 1px solid var(--sarahome-v3-border, #E5E7EB);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* 對位 about-hero 嘅 ::after decorative blob (品牌一致) */
.auth-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 140, 66, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .auth-card {
        padding: 2rem 1.5rem;
    }
}

/* === Icon badge (circular icon at top of card) === */
.auth-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--sarahome-v3-color-accent, #FF8C42) 0%, var(--sarahome-v3-color-cta, #FF6B35) 100%);
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
    position: relative;
    z-index: 1;
}

.auth-icon-badge svg {
    color: #FFFFFF;
}

/* === Title + subtitle === */
.auth-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-fg, #111827);
    text-align: center;
    margin: 0 0 0.5rem;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.auth-page-subtitle {
    font-size: 0.9375rem;
    color: var(--sarahome-v3-color-text-secondary, #4B5563);
    text-align: center;
    margin: 0 0 1.75rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* === Form (overrides existing .auth-form min-width to fit in card) === */
.auth-form {
    position: relative;
    z-index: 1;
}

.auth-form .form-group {
    margin-bottom: 1.125rem;
}

.auth-form .form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-fg, #111827);
    margin-bottom: 0.375rem;
}

.auth-form .form-group input {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border: 1px solid var(--sarahome-v3-border, #E5E7EB);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form .form-group input:focus {
    border-color: var(--sarahome-v3-color-accent, #FF8C42);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.12);
    outline: none;
}

/* === Submit button (full-width inside card) === */
.auth-form-actions {
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.auth-submit-btn,
a.auth-submit-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--sarahome-v3-color-cta-aa, #C2410C);
    color: #FFFFFF;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

a.auth-submit-btn:hover {
    color: #FFFFFF;
    text-decoration: none;
    background: var(--sarahome-v3-color-cta, #FF6B35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.25);
}

a.auth-submit-btn:focus-visible, button.auth-submit-btn:focus-visible {
    outline: 2px solid var(--sarahome-v3-color-accent, #FF8C42);
    outline-offset: 2px;
}

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* === Divider (decorative) === */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0 1.25rem;
    color: var(--sarahome-v3-color-text-secondary, #4B5563);
    font-size: 0.8125rem;
    position: relative;
    z-index: 1;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sarahome-v3-border, #E5E7EB);
}

.auth-divider-text {
    padding: 0 0.75rem;
}

/* === Footer links === */
.auth-footer {
    text-align: center;
    margin: 0;
    color: var(--sarahome-v3-color-text-secondary, #4B5563);
    font-size: 0.9375rem;
    position: relative;
    z-index: 1;
}

.auth-footer a {
    color: var(--sarahome-v3-color-accent-aa, #C2410C);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.auth-footer a:hover {
    color: var(--sarahome-v3-color-cta, #FF6B35);
    text-decoration: underline;
}

.auth-footer-link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}

/* === Required marker (對位 register.html) === */
.auth-form .required-mark {
    color: var(--sarahome-v3-color-error, #DC2626);
    margin-left: 0.125rem;
}

/* === Error message banner (for invalid creds etc.) === */
.auth-error-banner {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.auth-error-banner svg {
    flex-shrink: 0;
    color: var(--sarahome-v3-color-error, #DC2626);
    margin-top: 0.125rem;
}

/* === Wide card variant (TOTP setup needs extra room for QR + secret) === */
.auth-card--wide {
    max-width: 540px;
}

/* === Info banner (used in TOTP setup when already enabled) === */
.auth-info-banner {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E3A8A;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.auth-info-banner svg {
    flex-shrink: 0;
    color: #2563EB;
    margin-top: 0.125rem;
}

/* === Dev OTP banner (verify_phone.html — development mode) === */
.auth-dev-otp-banner {
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: monospace;
}

.auth-dev-otp-banner svg {
    flex-shrink: 0;
    color: #B45309;
    margin-top: 0.125rem;
}

.auth-dev-otp-banner strong {
    color: #7C2D12;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.auth-dev-otp-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #B45309;
    font-family: var(--sarahome-v3-font, sans-serif);
}

/* === Footer danger variant (TOTP setup — logout is destructive) === */
.auth-footer--danger {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sarahome-v3-border, #E5E7EB);
}

.auth-footer--danger .link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--sarahome-v3-color-error, #DC2626);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.875rem;
}

.auth-footer--danger .link-button:hover {
    color: #B91C1C;
}

/* === Mobile tweaks === */
@media (max-width: 480px) {
    .auth-page-title {
        font-size: 1.375rem;
    }

    .auth-icon-badge {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    .auth-icon-badge svg {
        width: 24px;
        height: 24px;
    }
}