/* =============================================
   MODERN AUTHENTICATION PAGES
   Light Theme — Tailwind-compatible
   ============================================= */

.auth-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.auth-card {
    max-width: 480px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.auth-card-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(124, 58, 237, 0.03) 100%);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

.auth-card-header h1 {
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    font-family: 'Inter', sans-serif;
}

.auth-card-header p {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

.auth-card-body {
    padding: 2.5rem 2rem;
}

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

.auth-form-group label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #f8fafc;
    color: #0f172a;
    box-sizing: border-box;
}

.auth-form-control:focus {
    outline: none;
    border-color: #dc2626;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.auth-form-control::placeholder {
    color: #94a3b8;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #dc2626;
}

.auth-checkbox label {
    margin: 0;
    font-weight: 400;
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.auth-btn {
    width: 100%;
    padding: 0.875rem;
    background: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.auth-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.auth-btn:active {
    transform: translateY(0);
}

.auth-card-footer {
    padding: 1.5rem 2rem;
    background: #fafafa;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-footer-link {
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

.auth-footer-link a {
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-footer-link a:hover {
    color: #b91c1c;
    text-decoration: underline;
}

.auth-divider {
    text-align: center;
    margin: 0.5rem 0;
    position: relative;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
}

.auth-divider span {
    background: #fafafa;
    padding: 0 1rem;
    color: #94a3b8;
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

.auth-validation-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.auth-validation-summary ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #dc2626;
    font-size: 0.875rem;
}

.auth-validation-summary li {
    margin-bottom: 0.25rem;
}

.auth-recaptcha {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.auth-recaptcha > div {
    transform: scale(0.95);
    transform-origin: center;
}

.auth-logo {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-trust {
    text-align: center;
    padding: 1rem;
    color: #94a3b8;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.auth-trust i {
    color: #dc2626;
}

/* Logo in auth */
.auth-card-header .logo-cor,
.auth-card-header .logo-or {
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
}
.auth-card-header .logo-x {
    color: #dc2626;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 2rem;
}

/* Status Pages */
.auth-status-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.auth-status-card {
    max-width: 520px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    padding: 3rem 2rem;
    text-align: center;
}

.auth-breadcrumb {
    background: transparent;
    padding: 1rem 0;
    margin-bottom: 0;
}

.auth-breadcrumb .breadcrumb {
    background: none;
    margin-bottom: 0;
    padding: 0;
    font-size: 0.875rem;
}

.auth-breadcrumb .breadcrumb-item {
    color: #94a3b8;
}

.auth-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #cbd5e1;
    padding: 0 0.5rem;
}

.auth-breadcrumb .breadcrumb-item a {
    color: #64748b;
    text-decoration: none;
}

.auth-breadcrumb .breadcrumb-item a:hover {
    color: #dc2626;
}

.auth-breadcrumb .breadcrumb-item.active {
    color: #334155;
    font-weight: 600;
}

@media (max-width: 576px) {
    .auth-container {
        padding: 2rem 1rem;
    }
    .auth-card-header {
        padding: 1.5rem;
    }
    .auth-card-header h1 {
        font-size: 1.5rem;
    }
    .auth-card-body {
        padding: 2rem 1.5rem;
    }
    .auth-card-footer {
        padding: 1.25rem 1.5rem;
    }
    .auth-recaptcha > div {
        transform: scale(0.85);
    }
}

/* ════════════════════════════════════════════════════════════════
   Social Login (Google + Apple)
   ──────────────────────────────────────────────────────────────
   Premium, brand-compliant buttons. Apple's HIG requires their
   button to be either pure black-on-white or white-on-black, with
   the official Apple mark + standardised wording. Google's brand
   rules require a clean white surface, their full-colour "G" mark,
   and adequate clear-space around the glyph.
   ════════════════════════════════════════════════════════════════ */
.auth-social {
    margin-top: 1.25rem;
}

.auth-social__buttons {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

.auth-social__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    font: 500 15px/1 -apple-system, BlinkMacSystemFont, "Inter",
        "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.005em;
    border-radius: 10px;
    text-decoration: none;
    transition:
        transform .15s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
    cursor: pointer;
    user-select: none;
}

.auth-social__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.auth-social__btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.auth-social__btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

.auth-social__logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Google — white surface, full-colour "G" mark.
   Border in a neutral grey, hover deepens it to match Google's
   own Material guidance for the unbranded white variant. */
.auth-social__btn--google {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.auth-social__btn--google:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
}

/* Apple — pure black-on-white per HIG. The mark is rendered as
   currentColor on the SVG so a single CSS rule sets both text
   AND glyph colour. */
.auth-social__btn--apple {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.auth-social__btn--apple:hover {
    background: #1c1c1e;
    border-color: #1c1c1e;
    color: #ffffff;
}

/* Side-by-side layout from sm-up — keeps the auth card compact
   on desktop while staying stacked on phones. */
@media (min-width: 480px) {
    .auth-social__buttons {
        grid-template-columns: 1fr 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════
   Mobile App Discovery — Google Play + App Store badges
   ──────────────────────────────────────────────────────────────
   Sits below the social-login row on Login + Register. Shows the
   visitor that QuickSecure also ships native mobile clients.
   App Store badge is rendered with a "Coming soon" pill until
   Apple approves the listing — the partial flips automatically
   when iosLive is set to true.
   ════════════════════════════════════════════════════════════════ */
.auth-mobile {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.auth-mobile__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.auth-mobile__title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.005em;
}

.auth-mobile__subtitle {
    font-size: 12px;
    color: #94a3b8;
    letter-spacing: -0.003em;
}

.auth-mobile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.auth-mobile__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease, opacity .2s ease;
    position: relative;
}

.auth-mobile__badge:hover {
    transform: translateY(-2px);
}

.auth-mobile__badge:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 8px;
}

.auth-mobile__badge img {
    height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 6px;
}

/* "Coming soon" treatment — apply to the App Store slot until
   Apple approves the iOS listing. The badge stays visible so
   visitors know an iOS app is on the way, but it doesn't
   pretend to link to a working page. */
.auth-mobile__badge--coming {
    cursor: default;
    opacity: 0.55;
    filter: grayscale(35%);
}

.auth-mobile__badge--coming:hover {
    transform: none;
}

.auth-mobile__pill {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.30);
    white-space: nowrap;
    pointer-events: none;
}