/* 
   Auth 2026 — Aurora Dark Design System
   Consolidated styles for Sign module (Login, Register, Verify, Password Reset)
*/

:root {
    --bg-0: #070b14;
    --card: #0b1220;
    --card-2: #0a1020;
    --stroke: rgba(120, 150, 220, .18);
    --stroke-2: rgba(120, 150, 220, .28);
    --text: #eef3ff;
    --muted: rgba(238,243,255,.62);
    --field: rgba(11, 18, 32, .9);
    --field-2: rgba(11, 18, 32, 1);
    --accent: #4f7cff;
    --accent-2: #2f5bff;
    --glow: rgba(79,124,255,.20);
    --glow-2: rgba(79,124,255,.10);
    --danger: #ff5a6a;
    --warn: #f6c453;
    --success: #37d996;
    --info: #39a7ff;
}

/* Ensure auth pages use the project's sans-serif/ui fonts (override any serif fallback) */
.auth-page-wrapper,
.auth-card,
.auth-page-content,
.auth-one-bg,
body {
    font-family: var(--vz-font-family-primary, "hkgrotesk", "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif) !important;
}

/* --- Animations --- */
@keyframes shake-x {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.shake-x { animation: shake-x .65s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes otpPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(.93); }
    100% { transform: scale(1); }
}

/* --- Base Card & Layout --- */
.auth-card, #regCard, #verifyCard, #pwCard {
    background: radial-gradient(1200px 600px at 20% 0%, rgba(79,124,255,.10) 0%, rgba(79,124,255,0) 55%),
                radial-gradient(900px 500px at 85% 30%, rgba(64,188,255,.08) 0%, rgba(64,188,255,0) 55%),
                linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 60%),
                var(--card);
    border: 1px solid var(--stroke);
    box-shadow: 0 18px 55px rgba(0,0,0,.55), 
                0 1px 0 rgba(255, 255, 255, .06) inset, 
                0 0 0 1px rgba(79,124,255,.06) inset, 
                0 0 28px var(--glow-2);
    border-radius: 20px;
    overflow: hidden;
    background-attachment: fixed;
}
.auth-card .card-body { padding: 2rem 2rem; }

/* Zakázat označování textu na auth stránkách – inputy zůstávají selektovatelné */
.auth-page-wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.auth-page-wrapper input,
.auth-page-wrapper textarea,
.auth-page-wrapper .otp-box {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.auth-logo-wrap { margin-bottom: 1.5rem; }
.auth-title { color: var(--text); font-weight: 700; font-size: 1.4rem; }
.auth-subtitle { color: var(--muted); font-size: .875rem; }

/* --- Forms & Inputs --- */
.auth-card .form-label {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.auth-card .form-control,
.auth-card .form-select,
.phone-input,
.phone-select-button {
    background: var(--field) !important;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    color: var(--text);
    font-size: 16px;
    padding: 13px 16px;
    width: 100%;
    transition: all 0.2s ease;
}

/* CHYBOVÝ STAV – červený border u všech inputů s is-invalid */
.auth-card .form-control.is-invalid,
.auth-card .form-select.is-invalid,
.phone-input.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(255,90,106,.25) !important;
}

.auth-card .form-control.is-invalid:focus,
.auth-card .form-select.is-invalid:focus,
.phone-input.is-invalid:focus {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(255,90,106,.35) !important;
    outline: none;
}

.auth-card .form-control::placeholder,
.auth-card .form-select::placeholder,
.phone-input::placeholder {
    color: rgba(238,243,255,.35);
}

.auth-card .form-control:focus,
.auth-card .form-select:focus,
.phone-input:focus,
.phone-select-button:focus {
    background: var(--field-2) !important;
    border-color: rgba(79,124,255,.65) !important;
    box-shadow: 0 0 0 3px var(--glow);
    color: #fff;
    outline: none;
}

/* Nativní ikona kalendáře / date pickeru – viditelná na tmavém pozadí */
.auth-card input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) brightness(1.5);
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}
.auth-card input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* --- Air Datepicker v3 dark theme --- */
.air-datepicker {
    --adp-font-family: inherit;
    --adp-font-size: .84rem;
    --adp-width: 272px;

    /* Barvy — pevné hodnoty, ne CSS var() */
    --adp-color: #eef3ff;
    --adp-color-secondary: rgba(238,243,255,.55);
    --adp-accent-color: #4f7cff;
    --adp-color-current-date: #4f7cff;
    --adp-color-other-month: rgba(238,243,255,.18);
    --adp-color-disabled: rgba(238,243,255,.13);
    --adp-color-selected: #fff;

    --adp-background-color: #0b1220;
    --adp-background-color-hover: rgba(255,255,255,.07);
    --adp-background-color-active: rgba(79,124,255,.18);
    --adp-background-color-selected: #4f7cff;
    --adp-background-color-in-range: rgba(79,124,255,.12);
    --adp-background-color-other-month: transparent;
    --adp-background-color-other-month-hover: rgba(255,255,255,.04);

    --adp-border-color: rgba(120,150,220,.18);
    --adp-border-color-inner: rgba(120,150,220,.1);
    --adp-border-radius: 16px;
    --adp-border-radius-inner: 8px;
    --adp-box-shadow: 0 18px 52px rgba(0,0,0,.6), 0 0 0 1px rgba(79,124,255,.12);

    --adp-nav-height: 40px;
    --adp-nav-arrow-color: rgba(238,243,255,.45);
    --adp-nav-action-size: 28px;
    --adp-nav-color-secondary: rgba(238,243,255,.45);

    --adp-day-name-color: rgba(238,243,255,.32);
    --adp-day-name-color-hover: #4f7cff;

    --adp-cell-size: 36px;
    --adp-cell-border-radius: 8px;
    --adp-cell-background-color-selected: #4f7cff;
    --adp-cell-background-color-between: rgba(79,124,255,.1);

    background: #0b1220 !important;
    color: #eef3ff !important;
    border: 1px solid rgba(120,150,220,.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.6), 0 0 0 1px rgba(79,124,255,.12) !important;
    font-family: inherit !important;
}
.air-datepicker-global-container {
    z-index: 9999;
}
/* Nav header – šipky + titulek (měsíc/rok) */
.air-datepicker-nav {
    border-bottom: 1px solid rgba(120,150,220,.1) !important;
    background: rgba(255,255,255,.03) !important;
    border-radius: 16px 16px 0 0 !important;
}
.air-datepicker-nav--title {
    font-weight: 700 !important;
    font-size: .88rem !important;
    color: #eef3ff !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}
.air-datepicker-nav--title:hover,
.air-datepicker-nav--title:focus {
    background: rgba(255,255,255,.12) !important;
    color: #eef3ff !important;
}
.air-datepicker-nav--action {
    border-radius: 8px !important;
    color: #eef3ff !important;
}
.air-datepicker-nav--action:hover,
.air-datepicker-nav--action:focus,
.air-datepicker-nav--action:active {
    background: rgba(255,255,255,.12) !important;
}
.air-datepicker-nav--action svg path {
    stroke: rgba(238,243,255,.5) !important;
}
.air-datepicker-nav--action:hover svg path,
.air-datepicker-nav--action:focus svg path,
.air-datepicker-nav--action:active svg path {
    stroke: #4f7cff !important;
}
/* Názvy dnů */
.air-datepicker--day-name {
    color: rgba(238,243,255,.3) !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    text-transform: uppercase;
}
/* Dny */
.air-datepicker-cell.-day- {
    color: #eef3ff !important;
    border-radius: 8px !important;
}
.air-datepicker-cell.-day-:hover {
    background: rgba(255,255,255,.08) !important;
}
.air-datepicker-cell.-day-.-other-month- {
    color: rgba(238,243,255,.2) !important;
}
.air-datepicker-cell.-day-.-current- {
    color: #4f7cff !important;
    border: 1px solid rgba(79,124,255,.4) !important;
}
.air-datepicker-cell.-day-.-selected- {
    background: #4f7cff !important;
    color: #fff !important;
}
/* Month/year buňky – kontrast: tmavší pozadí při hover, vždy viditelný text */
.air-datepicker-cell.-month-,
.air-datepicker-cell.-year- {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    color: #eef3ff !important;
    background: transparent !important;
}
.air-datepicker-cell.-month-:hover,
.air-datepicker-cell.-year-:hover,
.air-datepicker-cell.-month-.-focus-,
.air-datepicker-cell.-year-.-focus- {
    background: rgba(255,255,255,.12) !important;
    color: #eef3ff !important;
}
.air-datepicker-cell.-month-.-selected-,
.air-datepicker-cell.-year-.-selected- {
    background: #4f7cff !important;
    color: #fff !important;
}
.air-datepicker-cell.-month-.-selected-:hover,
.air-datepicker-cell.-year-.-selected-:hover {
    background: #5f8cff !important;
    color: #fff !important;
}
.air-datepicker-cell.-month-.-current-,
.air-datepicker-cell.-year-.-current- {
    color: #4f7cff !important;
}
/* Celý grid měsíců/roků – přepsat případné bílé pozadí z výchozího CSS */
.air-datepicker--content {
    background: #0b1220 !important;
}
.air-datepicker-body--cells.-months-,
.air-datepicker-body--cells.-years- {
    background: transparent !important;
}
.air-datepicker-body--cells.-months- .air-datepicker-cell,
.air-datepicker-body--cells.-years- .air-datepicker-cell {
    color: #eef3ff !important;
}

/* Password Toggle */
.auth-pw-wrap { position: relative; }

/* Skrytí nativního password toggle od prohlížeče (Edge, Chrome, Safari) */
.auth-card input[type="password"]::-ms-reveal,
.auth-card input[type="password"]::-ms-clear,
.auth-card input[type="text"]::-ms-reveal,
.auth-card input[type="text"]::-ms-clear {
    display: none !important;
}
.auth-card input::-webkit-credentials-auto-fill-button,
.auth-card input::-webkit-textfield-decoration-container > *:last-child {
    visibility: hidden !important;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
}
input[type="password"]::-ms-reveal { display: none !important; }

/* Potlačení autofill pozadí od prohlížeče (žluté/modré) */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active,
.auth-card select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: var(--text) !important;
}

.auth-pw-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    color: var(--muted) !important;
    cursor: pointer;
    padding: 4px !important;
    z-index: 10;
}
.auth-pw-toggle:hover { color: #fff !important; }
.auth-pw-wrap .form-control { padding-right: 46px !important; }

/* --- Buttons --- */
.auth-card .btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border: 1px solid rgba(79,124,255,.35);
    border-radius: 12px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    width: 100%;
    box-shadow: 0 10px 26px rgba(47,91,255,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
    transition: all 0.2s ease;
}
.auth-card .btn-primary:hover {
    box-shadow: 0 14px 34px rgba(47,91,255,.34), 0 0 0 1px rgba(255,255,255,.08) inset;
    transform: translateY(-1px);
}
.auth-card .btn-primary:active { transform: translateY(1px); }
.auth-card .btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.auth-btn-ghost {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    color: var(--muted);
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s;
    text-align: center;
}
.auth-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* --- Phone & Gender Special Fields --- */
.phone-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--field) !important;
    overflow: visible;
}
.phone-input-group:focus-within {
    border-color: rgba(79,124,255,.65) !important;
    box-shadow: 0 0 0 3px var(--glow);
}

/* CHYBOVÝ STAV – celé skupiny (telefon, gender) */
.is-invalid-group {
    border-color: var(--danger) !important;
}

/* Specificky pro pohlaví: rámeček kolem celé skupiny bez shadow */
.auth-gender-group.is-invalid-group {
    border: 1px solid var(--danger) !important;
    border-radius: 12px;
    padding: 4px 6px;
}

/* trochu zmenšit gap, aby to v rámečku dobře sedělo */
.auth-gender-group.is-invalid-group .btn-check + label {
    margin: 0;
}

.phone-select-wrapper { position: relative; border-right: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.phone-select-button { border: none !important; border-radius: 12px 0 0 12px !important; width: auto !important; display: flex; align-items: center; gap: 8px; }
.phone-select-dropdown { position: absolute; top: calc(100% + 6px); left: 0; background: rgba(11,18,32,.96); backdrop-filter: blur(12px); border: 1px solid rgba(79,124,255,.28); border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,.45); z-index: 1000; min-width: 180px; }
.phone-select-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: transparent !important; border: none; color: var(--muted); font-size: 13px; cursor: pointer; width: 100%; }
.phone-select-item:hover { background: rgba(79,124,255,.16); color: #fff; }

.auth-gender-group { display: flex; gap: 10px; }
.auth-gender-group .btn-check + label {
    flex: 1;
    border-radius: 12px !important;
    background: var(--field) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--muted) !important;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
}
/* Focus (keyboard / mouse focus) - force orange, keep background dark */
.auth-gender-group .btn-check:focus-visible + label,
.auth-gender-group .btn-check:focus + label {
    color: #FFA500 !important;
    background: var(--field) !important;
    border-color: rgba(255,165,0,0.55) !important;
    box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
}
/* Checked state should be orange */
.auth-gender-group .btn-check:checked + label {
    background: rgba(255,165,0,0.12) !important;
    border-color: #FFA500 !important;
    color: #FFA500 !important;
    box-shadow: 0 0 0 3px rgba(255,165,0,0.18);
}

/* --- Validation & Feedback --- */
.auth-card .auth-flash { border-radius: 12px; border: 1px solid rgba(255,255,255,.06); padding: 12px; margin-bottom: 1rem; }
.auth-card .auth-flash.flash-warning { background: rgba(246,196,83,.10); border-color: var(--warn); color: var(--warn); }
.auth-card .auth-flash.flash-danger { background: rgba(255,90,106,.10); border-color: var(--danger); color: var(--danger); }
.auth-card .auth-flash.flash-success { background: rgba(55,217,150,.10); border-color: var(--success); color: var(--success); }

.is-invalid-group { border-color: var(--danger) !important; }
.invalid-feedback { color: var(--danger); font-size: .875rem; margin-top: .25rem; display: block; }

/* --- Strength Meter --- */
.pw-strength-wrap { margin-top: -6px; margin-bottom: 12px; }
.pw-strength-bar-bg { height: 4px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.pw-strength-bar { height: 100%; border-radius: 4px; width: 0; transition: width .4s ease, background .3s; }
.pw-strength-label { font-size: .72rem; margin-top: 3px; text-align: right; }

/* --- OTP Timer --- */
.otp-timer-wrap { text-align: center; }
.otp-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,90,106,.10);
    border: 1px solid rgba(255,90,106,.25);
    color: var(--danger);
    font-size: .78rem;
    font-weight: 600;
    padding: 3px 14px;
    border-radius: 12px;
    letter-spacing: .02em;
}
.otp-timer-badge i { font-size: .9rem; }
.otp-timer-badge strong { font-variant-numeric: tabular-nums; }
.otp-timer-badge.urgent {
    animation: timerPulse 1s ease-in-out infinite;
    border-color: var(--danger);
    background: rgba(255,90,106,.18);
}
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* --- OTP Inputs --- */
.otp-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 1.25rem 0 1.25rem;
    padding: 0 12px;
}
.otp-box {
    flex: 1 1 0;
    max-width: 46px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: var(--field);
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding: 0;
    transition: all 0.2s;
}


/* --- Footer & Links --- */
.auth-footer-text { color: var(--muted); font-size: .875rem; }
.auth-footer-link { color: var(--accent); font-weight: 600; text-decoration: none; transition: color 0.2s; }
.auth-footer-link:hover { color: #fff; text-decoration: underline; }

.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--stroke); }
.auth-divider span { color: rgba(255,255,255,.2); font-size: .78rem; text-transform: uppercase; }

.auth-icon-circle {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem; font-size: 1.8rem; color: var(--accent);
}

.auth-success-circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(55,217,150,.1); border: 1px solid rgba(55,217,150,.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem; font-size: 2rem; color: var(--success);
}

/* Mobile-friendly phone select dropdown */
@media (max-width: 480px) {
    .phone-select-button { min-width: 72px !important; padding: 10px 12px; }
    .phone-select-dropdown {
        /* Přepni na fixed overlay na malých obrazovkách, aby položky nikdy nebyly mimo viewport */
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 12px !important;
        top: auto !important;
        min-width: unset !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        z-index: 2000 !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.6);
    }
    .phone-select-item { padding: 14px 12px; font-size: 15px; }
}

/* Ensure dropdown has sensible max height on desktop too */
.phone-select-dropdown { max-height: 56vh; overflow-y: auto; }

/* --- Auth Spinner Overlay --- */
.auth-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 20, .75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
}
.auth-spinner-overlay.visible {
    display: flex;
}
.auth-spinner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.auth-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(79, 124, 255, .2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: authSpin .7s linear infinite;
}
.auth-spinner-img {
    width: 48px;
    height: 48px;
    animation: authSpin 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(79, 124, 255, .35));
}
@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* Pozadí přímo na body — pokryje vždy celou stránku i při scrollování */
html, body {
    background: linear-gradient(180deg, #070b14 0%, #0b1220 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Auth page wrapper — flex layout, footer vždy dole */
.auth-page-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    padding-bottom: 0 !important;
}

.auth-page-wrapper .auth-page-content {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.auth-page-wrapper .auth-page-content > .container {
    width: 100%;
}

.auth-page-wrapper .footer {
    flex-shrink: 0 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    width: 100% !important;
    display: block !important;
}

/* Původní třídy ponechány prázdné pro zpětnou kompatibilitu */
.auth-one-bg {
    display: none;
}

.auth-one-bg-position {
    display: none;
}

/* If you want the image option later, keep this class as fallback but commented:
.auth-one-bg{ background-image:url(../images/auth-one-bg.jpg); background-position:center; background-size:cover }
*/

/* Make reg-hint clearly visible on dark backgrounds */
.reg-hint {
    color: rgba(115, 184, 165, 0.65);
    font-size: .82rem;
    margin-top: .35rem;
}