/* Qlynic Booking UI — 2026 Ultra (Aurora Ultra Edition)
   IMPORTANT:
   - Keep the 6 theme tokens (set by Branding.aspx -> ClinicThemes -> Book.aspx setThemeVars()).
   - Everything else is derived from those tokens.
   - Do NOT hardcode colors in UI (except small “fixed” semantic colors like --c-danger).
*/

:root, .theme-light {
    /* Editable tokens (DO NOT rename) */
    --c-bg: #0b1021; /* page background */
    --c-panel: #10162c; /* cards/panels */
    --c-header: rgba(16,22,44,0.94); /* header */
    --c-footer: rgba(16,22,44,0.94); /* footer */
    --c-text: #f6f8ff; /* primary text & primary buttons */
    --c-muted: #c3cee8; /* secondary text */
    /* Ultra derived tokens (safe to change) */
    --c-border: color-mix(in srgb, var(--c-panel) 72%, rgba(255,255,255,.28) 28%);
    --c-border-strong: color-mix(in srgb, var(--c-panel) 56%, rgba(255,255,255,.44) 44%);
    --c-border-soft: color-mix(in srgb, var(--c-panel) 84%, rgba(255,255,255,.18) 18%);
    --c-dash: color-mix(in srgb, var(--c-panel) 78%, rgba(255,255,255,.18) 22%);
    --c-primary: color-mix(in srgb, var(--c-text) 62%, #68b7ff 38%);
    --c-primary-strong: color-mix(in srgb, var(--c-text) 78%, #42a5ff 22%);
    --c-accent: color-mix(in srgb, var(--c-primary) 58%, #7df1c6 42%);
    --c-accent-strong: color-mix(in srgb, var(--c-primary) 48%, #62eab2 52%);
    --c-ring: color-mix(in srgb, var(--c-primary) 45%, #8aa9ff 55%);
    --c-shadow: 0 18px 54px rgba(0,0,0,.30);
    --c-shadow-strong: 0 26px 78px rgba(0,0,0,.42);
    --c-shadow-soft: 0 12px 30px rgba(0,0,0,.22);
    --c-warn: #f59e0b;
    --c-info: #38bdf8;
    --c-success: #22c55e;
    --c-danger: #ef4444;
    --glass-bg: linear-gradient( 180deg, color-mix(in srgb, var(--c-header) 78%, transparent 22%) 0%, color-mix(in srgb, var(--c-header) 56%, transparent 44%) 100% );
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --pad: 22px;
    --pad-mobile: 16px;
    --foot-h: 80px;
    --foot-h-mobile: 86px;
    --seed-size: 14px;
    --seed-gap: 4px;
    /* Motion */
    --ease-out: cubic-bezier(.16,.84,.2,1);
    --ease-soft: cubic-bezier(.22,.78,.26,1);
    --ease-snap: cubic-bezier(.2,1,.25,1);
    /* Focus */
    --focus: 0 0 0 3px var(--c-ring);
    /* Layout widths */
    --max-w: 1040px;
}

/* ---------- Base reset / ergonomics ---------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: var(--c-text);
    font: 15px/1.6 "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    overflow-x: hidden;
    /* Ultra background (derived from theme tokens only) */
    background: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--c-primary) 26%, transparent 74%) 0%, transparent 38%), radial-gradient(circle at 78% 6%, color-mix(in srgb, var(--c-accent) 22%, transparent 78%) 0%, transparent 34%), radial-gradient(circle at 45% 86%, color-mix(in srgb, var(--c-primary) 18%, transparent 82%) 0%, transparent 40%), linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 92%, #000 8%) 0%, var(--c-bg) 40%, color-mix(in srgb, var(--c-bg) 88%, #000 12%) 100% );
}

a, button {
    -webkit-tap-highlight-color: transparent;
    outline-color: var(--c-primary);
}

button {
    touch-action: manipulation;
}

.d-none {
    display: none !important;
}

:focus-visible {
    box-shadow: var(--focus);
    border-radius: 12px;
}

::selection {
    background: color-mix(in srgb, var(--c-primary) 30%, transparent 70%);
    color: var(--c-text);
}

/* ---------- Ambient aurora (kept) ---------- */
.aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

    .aurora .blob {
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        filter: blur(130px);
        opacity: .24;
        mix-blend-mode: screen;
        animation: floaty 18s var(--ease-soft) infinite;
        will-change: transform;
    }

    .aurora .b1 {
        background: color-mix(in srgb, var(--c-primary) 88%, #6ab8ff 12%);
        top: -140px;
        left: -90px;
        animation-duration: 21s;
    }

    .aurora .b2 {
        background: color-mix(in srgb, var(--c-accent) 86%, #7df1c6 14%);
        bottom: -180px;
        right: -70px;
        animation-duration: 24s;
    }

    .aurora .b3 {
        background: color-mix(in srgb, var(--c-primary) 60%, #9f7afd 40%);
        top: 52%;
        left: 62%;
        animation-duration: 28s;
    }

@keyframes floaty {
    0% {
        transform: translate(0,0) scale(1);
    }

    35% {
        transform: translate(-34px, 22px) scale(1.06);
    }

    70% {
        transform: translate(26px, -34px) scale(0.96);
    }

    100% {
        transform: translate(0,0) scale(1);
    }
}

/* ---------- Layout ---------- */
.shell {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 22px;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-card {
    width: 100%;
    max-width: var(--max-w);
    background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.06), transparent 42%), radial-gradient(circle at 82% 0%, rgba(255,255,255,.04), transparent 42%), color-mix(in srgb, var(--c-panel) 92%, rgba(255,255,255,.05) 8%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--c-shadow);
    backdrop-filter: blur(14px) saturate(150%);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    transform: translateY(12px);
    animation: cardDrop .9s var(--ease-out) forwards;
    will-change: transform;
}

    .app-card.is-ready {
        /* subtle highlight ring when ready */
        box-shadow: var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-primary) 18%, transparent 82%);
    }

@keyframes cardDrop {
    to {
        transform: translateY(0);
    }
}

/* ---------- Header ---------- */
.app-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--c-border-strong);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    object-fit: contain;
    box-shadow: 0 14px 26px rgba(0,0,0,.28);
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent 45%);
}

.brand-badge {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-weight: 950;
    letter-spacing: .03em;
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    box-shadow: 0 14px 30px rgba(0,0,0,.30);
    flex: 0 0 auto;
}

.brand-titles {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.brand-title {
    font-weight: 950;
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-sub {
    color: var(--c-muted);
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
}

/* Progress */
.progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

    .progress .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--c-border-strong) 60%, transparent 40%);
        position: relative;
        transition: background .2s var(--ease-out), transform .2s var(--ease-out);
    }

        .progress .dot.active {
            background: var(--c-primary);
            transform: scale(1.08);
        }

            .progress .dot.active::after {
                content: "";
                position: absolute;
                inset: -7px;
                border-radius: 50%;
                border: 2px solid color-mix(in srgb, var(--c-primary) 38%, transparent 62%);
                animation: ringPulse 1.5s var(--ease-soft) infinite;
            }

@keyframes ringPulse {
    0% {
        transform: scale(.92);
        opacity: .65;
    }

    60% {
        transform: scale(1.22);
        opacity: .28;
    }

    100% {
        transform: scale(.92);
        opacity: .65;
    }
}

/* ---------- Body & footer ---------- */
.app-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--pad);
    padding-bottom: calc(var(--foot-h) + 22px);
    scroll-behavior: smooth;
}

.app-foot {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--c-border-strong);
    background: var(--c-footer);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 -18px 40px rgba(0,0,0,.40);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--c-border-strong);
    border-radius: 15px;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out), filter .14s var(--ease-out);
    background: color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.10) 12%);
    color: var(--c-text);
    user-select: none;
    min-height: 46px;
}

    .btn i {
        font-size: 14px;
    }

    .btn.primary {
        background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong));
        border-color: transparent;
        color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
        box-shadow: 0 18px 32px rgba(0,0,0,.34);
    }

        .btn.primary:hover {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 0 22px 40px rgba(0,0,0,.40);
        }

        .btn.primary:active {
            transform: translateY(0) scale(.995);
            filter: brightness(.98);
        }

    .btn.ghost {
        background: color-mix(in srgb, var(--c-panel) 82%, rgba(255,255,255,.10) 18%);
    }

        .btn.ghost:hover {
            background: color-mix(in srgb, var(--c-panel) 70%, rgba(255,255,255,.16) 30%);
            transform: translateY(-1px);
            box-shadow: var(--c-shadow-soft);
        }

    .btn[disabled], .btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--c-primary) 30%, transparent 70%);
    border-top-color: var(--c-primary);
    display: inline-block;
    animation: spin .9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Typography ---------- */
.section-head {
    margin-bottom: 14px;
}

.section-title {
    margin: 0;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

    .section-title i {
        opacity: .95;
    }

.section-hint {
    font-size: 13px;
    color: var(--c-muted);
}

.muted {
    color: var(--c-muted);
}

.small {
    font-size: 12px;
}

.tiny {
    font-size: 11px;
}

.strong {
    font-weight: 950;
}

/* ---------- Loader ---------- */
.global-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--c-primary) 14%, transparent 86%) 0%, transparent 38%), radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--c-accent) 12%, transparent 88%) 0%, transparent 35%), linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 92%, rgba(255,255,255,.05) 8%) 0%, color-mix(in srgb, var(--c-bg) 78%, rgba(255,255,255,.07) 22%) 100% );
    z-index: 20;
}

.loader-wrap {
    text-align: center;
    padding: 10px;
}

.logo-skeleton {
    display: inline-flex;
    gap: 10px;
    margin-bottom: 14px;
}

    .logo-skeleton .sk {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-primary) 28%, transparent 72%);
        animation: pop .9s var(--ease-soft) infinite;
    }

    .logo-skeleton .sk2 {
        animation-delay: .12s;
    }

    .logo-skeleton .sk3 {
        animation-delay: .24s;
    }

@keyframes pop {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.08);
    }
}

.loader-dots {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin: 10px 0 10px;
}

    .loader-dots .ld {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c-primary);
        animation: dots 1.1s var(--ease-soft) infinite;
    }

    .loader-dots .d2 {
        animation-delay: .18s;
    }

    .loader-dots .d3 {
        animation-delay: .36s;
    }

@keyframes dots {
    0%,100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.75);
        opacity: .42;
    }
}

.loader-label {
    font-weight: 900;
    color: var(--c-text);
    letter-spacing: .01em;
}

.fade-out {
    animation: fadeOut .26s var(--ease-out) forwards;
}

.fade-in {
    animation: fadeIn .26s var(--ease-out) forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Overlay ---------- */
.overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(8px);
    z-index: 30;
}

    .overlay.on {
        display: flex;
    }

.overlay-card {
    background: color-mix(in srgb, var(--c-panel) 92%, rgba(255,255,255,.06) 8%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--c-shadow-strong);
    padding: 18px 20px;
    text-align: center;
    min-width: 260px;
}

.overlay-title {
    font-weight: 950;
    margin-top: 10px;
}

.overlay-sub {
    margin-top: 4px;
}

/* ---------- Inputs ---------- */
.control {
    width: 100%;
    border: 1px solid var(--c-border-soft);
    border-radius: 15px;
    padding: 11px 12px;
    font: inherit;
    background: color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.06) 12%);
    color: var(--c-text);
    transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out), background .12s var(--ease-out);
}

    .control.big {
        padding: 13px 14px;
        font-size: 15px;
    }

    .control.textarea {
        min-height: 124px;
        resize: vertical;
    }

    .control:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--c-primary) 72%, var(--c-border) 28%);
        box-shadow: var(--focus);
    }

/* ---------- Steps ---------- */
.steps {
    position: relative;
}

.step {
    display: none;
}

    .step.active {
        display: block;
        animation: appear .28s var(--ease-out) forwards;
    }

@keyframes appear {
    from {
        opacity: 0;
        transform: translateX(12px);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.exit-left {
    animation: slideLeft .26s var(--ease-out) forwards;
}

.exit-right {
    animation: slideRight .26s var(--ease-out) forwards;
}

@keyframes slideLeft {
    to {
        opacity: 0;
        transform: translateX(-12px);
        filter: blur(1px);
    }
}

@keyframes slideRight {
    to {
        opacity: 0;
        transform: translateX( 12px);
        filter: blur(1px);
    }
}

/* ---------- Hero / clinic info ---------- */
.hero {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 16px 16px;
    background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.06), transparent 44%), linear-gradient(135deg, color-mix(in srgb, var(--c-panel) 90%, rgba(255,255,255,.06) 10%), color-mix(in srgb, var(--c-panel) 80%, rgba(255,255,255,.14) 20%) );
    box-shadow: var(--c-shadow-soft);
    display: grid;
    gap: 10px;
}

.clinic-info {
    border: 1px dashed var(--c-dash);
    background: color-mix(in srgb, var(--c-panel) 86%, rgba(255,255,255,.10) 14%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 12px 0 14px;
}

.clinic-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-text);
    font-weight: 800;
    line-height: 1.35;
}

    .clinic-info-row + .clinic-info-row {
        margin-top: 8px;
    }

    .clinic-info-row i {
        width: 18px;
        text-align: center;
        color: var(--c-primary);
        opacity: .95;
    }

#clinicAddressText {
    color: var(--c-text);
    font-weight: 900;
}

.clinic-link {
    color: var(--c-primary);
    text-decoration: none;
    font-weight: 950;
}

    .clinic-link:hover {
        text-decoration: underline;
    }

.sep-dot {
    color: var(--c-muted);
    font-weight: 950;
    margin: 0 2px;
}

/* ---------- Doctors (fix padding/spacing + better motion) ---------- */
.doc-grid {
    margin-top: 14px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: stretch;
}

.doc-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 22% 10%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.10) 12%);
    box-shadow: var(--c-shadow-soft);
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
    position: relative;
}

    .doc-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--c-primary) 16%, transparent 84%) 0%, transparent 42%);
        opacity: 0;
        transition: opacity .18s var(--ease-out);
        pointer-events: none;
    }

    .doc-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--c-shadow-strong);
        border-color: color-mix(in srgb, var(--c-primary) 60%, var(--c-border) 40%);
    }

        .doc-card:hover::before {
            opacity: 1;
        }

    .doc-card:active {
        transform: translateY(-1px) scale(.995);
    }

.doc-top {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: start;
    gap: 12px;
    padding: 16px 16px 12px;
}

.doc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 950;
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
    background: linear-gradient(145deg, var(--c-primary), var(--c-accent));
    box-shadow: 0 16px 30px rgba(0,0,0,.30);
    border: 1px solid color-mix(in srgb, rgba(255,255,255,.22) 45%, transparent 55%);
}

.doc-meta {
    min-width: 0;
}

.doc-name {
    margin: 0;
    font-size: 16px;
    font-weight: 970;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-title {
    font-size: 12px;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Rating */
.doc-rating {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
    color: var(--c-muted);
    line-height: 1;
}

.seed-row {
    display: inline-flex;
    align-items: center;
    gap: var(--seed-gap);
    flex: 0 0 auto;
}

.seed {
    width: var(--seed-size);
    height: var(--seed-size);
    display: inline-block;
    background: radial-gradient(circle, var(--c-primary) 0%, var(--c-accent) 80%);
    mask: url("../Images/pomo_seed.svg") center/contain no-repeat;
}

    .seed.empty {
        opacity: .24;
        filter: grayscale(1);
    }

.rating-num {
    font-weight: 970;
    font-size: 12px;
    color: var(--c-text);
}

.rating-count {
    font-weight: 950;
    font-size: 12px;
    color: var(--c-muted);
}

.doc-rating--new .doc-rating-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 950;
    font-size: 12px;
    color: var(--c-muted);
    white-space: nowrap;
}

.doc-rating--new .new-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 26%, transparent 74%);
}

/* Bottom area */
.doc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px dashed var(--c-dash);
    flex-wrap: wrap;
}

.doc-duration {
    font-size: 12px;
    color: var(--c-muted);
    white-space: nowrap;
    font-weight: 850;
}

    .doc-duration .dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c-accent);
        margin-right: 7px;
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 20%, transparent 80%);
    }

.doc-actions {
    margin-left: auto;
}

    .doc-actions .btn {
        min-width: 140px;
    }

/* Fly animation (used by JS class "fly") */
.fly {
    animation: flyIn .55s var(--ease-snap) both;
}

@keyframes flyIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Step 2 — Date & Horizon ---------- */
.date-row {
    overflow-x: hidden;
}

.date-input-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-top: 10px;
}

    .date-input-wrap > input,
    .date-input-wrap .flatpickr-input {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        height: 50px;
        line-height: 50px;
        padding-left: 46px !important;
        padding-right: 12px !important;
    }

.input-ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted);
    pointer-events: none;
    z-index: 2;
}

/* Flatpickr (theme-friendly) */
.flatpickr-calendar.fp-white {
    --fp-bg: color-mix(in srgb, var(--c-panel) 94%, rgba(255,255,255,.06) 6%) !important;
    --fp-text: var(--c-text) !important;
    --fp-line: var(--c-border) !important;
    --fp-accent: var(--c-primary) !important;
    --fp-accent2: var(--c-accent) !important;
    background: var(--fp-bg) !important;
    color: var(--fp-text) !important;
    border: 1px solid var(--fp-line) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.44) !important;
    color-scheme: dark !important;
    border-radius: 18px !important;
    overflow: hidden;
}

.flatpickr-input[readonly] {
    background: color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.06) 12%) !important;
    color: var(--c-text) !important;
    cursor: pointer;
    border: 1px solid var(--c-border-soft) !important;
    border-radius: 15px !important;
}

.flatpickr-calendar.fp-white .flatpickr-months,
.flatpickr-calendar.fp-white .flatpickr-month,
.flatpickr-calendar.fp-white .flatpickr-current-month {
    background: var(--fp-bg) !important;
    color: var(--fp-text) !important;
}

.flatpickr-calendar.fp-white .flatpickr-prev-month,
.flatpickr-calendar.fp-white .flatpickr-next-month {
    color: var(--fp-text) !important;
    fill: var(--fp-text) !important;
}

.flatpickr-calendar.fp-white .flatpickr-weekday {
    color: var(--c-muted) !important;
}

.flatpickr-calendar.fp-white .flatpickr-day {
    color: var(--fp-text) !important;
}

    .flatpickr-calendar.fp-white .flatpickr-day:hover {
        background: color-mix(in srgb, var(--c-primary) 22%, transparent 78%) !important;
    }

    .flatpickr-calendar.fp-white .flatpickr-day.selected,
    .flatpickr-calendar.fp-white .flatpickr-day.startRange,
    .flatpickr-calendar.fp-white .flatpickr-day.endRange {
        background: linear-gradient(135deg, var(--c-primary), var(--c-accent)) !important;
        color: color-mix(in srgb, var(--c-bg) 88%, #000 12%) !important;
        border-color: transparent !important;
    }

/* Horizon strip */
.horizon {
    position: relative;
    margin-top: 14px;
    max-width: 100%;
}

    .horizon .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--c-border-strong);
        background: color-mix(in srgb, var(--c-panel) 78%, rgba(255,255,255,.12) 22%);
        color: var(--c-text);
        display: grid;
        place-items: center;
        box-shadow: var(--c-shadow-soft);
        z-index: 3;
        transition: transform .14s var(--ease-out), opacity .14s var(--ease-out);
    }

        .horizon .nav:hover {
            transform: translateY(-50%) scale(1.03);
        }

        .horizon .nav.left {
            left: 8px;
        }

        .horizon .nav.right {
            right: 8px;
        }

        .horizon .nav.off {
            opacity: .35;
            pointer-events: none;
        }

.day-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 54px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) color-mix(in srgb, var(--c-panel) 80%, rgba(255,255,255,.10) 20%);
    max-width: 100%;
}

    .day-strip.loading .chip {
        opacity: .62;
        filter: grayscale(1);
    }

    .day-strip::-webkit-scrollbar {
        height: 10px;
    }

    .day-strip::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--c-panel) 80%, rgba(255,255,255,.12) 20%);
        border-radius: 999px;
    }

    .day-strip::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
        border-radius: 999px;
        box-shadow: 0 0 10px rgba(0,0,0,.25);
    }

        .day-strip::-webkit-scrollbar-thumb:hover {
            box-shadow: 0 0 12px rgba(0,0,0,.30);
        }

.chip {
    flex: 0 0 auto;
    min-width: 120px;
    scroll-snap-align: start;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 12px 14px;
    background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 86%, rgba(255,255,255,.12) 14%);
    color: var(--c-text);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), border-color .14s var(--ease-out), background .14s var(--ease-out);
}

    .chip:hover {
        transform: translateY(-1px);
        box-shadow: var(--c-shadow-soft);
        border-color: var(--c-border-strong);
    }

    .chip .chip-label {
        font-weight: 950;
    }

    .chip .chip-count {
        font-weight: 980;
        font-size: 12px;
        color: var(--c-primary);
        background: color-mix(in srgb, var(--c-primary) 18%, transparent 82%);
        border-radius: 999px;
        padding: 4px 10px;
        border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent 82%);
    }

        .chip .chip-count.empty {
            color: var(--c-muted);
            background: color-mix(in srgb, var(--c-panel) 90%, rgba(255,255,255,.08) 10%);
            border-color: color-mix(in srgb, var(--c-border) 60%, transparent 40%);
        }

    .chip.selected {
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px var(--c-ring);
    }

.horizon .fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    pointer-events: none;
    background: linear-gradient(to right, color-mix(in srgb, var(--c-panel) 94%, transparent 6%) 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
}

    .horizon .fade.right {
        right: 0;
        transform: scaleX(-1);
    }

    .horizon .fade.left {
        left: 0;
    }

        .horizon .fade.left.hide, .horizon .fade.right.hide {
            display: none;
        }

/* ---------- Slots (fix padding + better card layout) ---------- */
.slot-wrap {
    margin-top: 16px;
}

.slots-loader .pulse {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border: 1px dashed var(--c-dash);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-panel) 86%, rgba(255,255,255,.10) 14%);
}

.slots-loader .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    animation: dots 1.2s var(--ease-soft) infinite;
}

    .slots-loader .dot.d2 {
        animation-delay: .2s;
    }

    .slots-loader .dot.d3 {
        animation-delay: .4s;
    }

.pulse-text {
    font-weight: 900;
    color: var(--c-text);
}

.no-slots {
    border: 1px dashed var(--c-dash);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    color: var(--c-muted);
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    background: radial-gradient(circle at 20% 12%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 86%, rgba(255,255,255,.12) 14%);
}

    .no-slots i {
        color: var(--c-muted);
        font-size: 18px;
    }

.slots-grid {
    margin-top: 6px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.slot-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.12) 12%);
    box-shadow: var(--c-shadow-soft);
    padding: 14px;
    transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .slot-card::after {
        content: "";
        position: absolute;
        inset: -40% -20% auto -20%;
        height: 120px;
        background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--c-accent) 22%, transparent 78%) 0%, transparent 55%);
        opacity: .7;
        pointer-events: none;
    }

    .slot-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--c-shadow-strong);
        border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border) 45%);
    }

    .slot-card.selected {
        border-color: var(--c-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, transparent 72%), var(--c-shadow);
    }

.slot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

    .slot-top .carrier {
        font-weight: 980;
        color: var(--c-text);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .slot-top .status {
        font-size: 12px;
        color: var(--c-accent);
        font-weight: 980;
        white-space: nowrap;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent 70%);
        background: color-mix(in srgb, var(--c-accent) 14%, transparent 86%);
    }

.slot-mid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 0 6px;
}

    .slot-mid .t .label {
        font-size: 11px;
        color: var(--c-muted);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 950;
    }

    .slot-mid .t .time {
        font-weight: 980;
        font-size: 18px;
        letter-spacing: .02em;
    }

    .slot-mid .line {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .slot-mid .line .dot {
            width: 8px;
            height: 8px;
            background: var(--c-primary);
            border-radius: 50%;
            box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-primary) 18%, transparent 82%);
        }

        .slot-mid .line .bar {
            width: 52px;
            height: 2px;
            background: color-mix(in srgb, var(--c-border-strong) 70%, transparent 30%);
            border-radius: 2px;
        }

.slot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-dash);
}

    .slot-foot .iso {
        font-size: 11px;
        color: var(--c-muted);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .slot-foot .btn {
        min-height: 38px;
        padding: 9px 12px;
        border-radius: 13px;
    }

/* ---------- Step 3 ---------- */
.summary-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 13px;
    background: radial-gradient(circle at 18% 14%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 84%, rgba(255,255,255,.14) 16%);
    box-shadow: var(--c-shadow-soft);
    margin-bottom: 12px;
}

.summary-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong));
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
    box-shadow: 0 14px 28px rgba(0,0,0,.30);
}

.summary-title {
    font-weight: 980;
}

.summary-text {
    color: var(--c-text);
}

.details .details-head {
    margin: 10px 2px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.details .subtitle {
    font-size: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-success), var(--c-accent-strong));
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
    font-weight: 980;
    font-size: 12px;
    box-shadow: 0 14px 26px rgba(0,0,0,.28);
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent 70%);
}

.ticket-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(12,1fr);
}

.ticket {
    grid-column: span 6;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 84%, rgba(255,255,255,.12) 16%);
    box-shadow: var(--c-shadow-soft);
    overflow: hidden;
}

    .ticket.wide {
        grid-column: 1 / -1;
    }

.ticket-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 980;
    letter-spacing: .02em;
    background: color-mix(in srgb, var(--c-header) 80%, rgba(255,255,255,.04) 20%);
    border-bottom: 1px dashed var(--c-dash);
}

.ticket-body {
    padding: 14px;
    display: grid;
    gap: 10px;
}

.mini-label {
    font-size: 12px;
    color: var(--c-muted);
    font-weight: 950;
}

.phone-pack {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr) 22px;
    gap: 10px;
    align-items: center;
}

.dial-prefix {
    text-align: center;
    background: color-mix(in srgb, var(--c-panel) 88%, rgba(255,255,255,.08) 12%);
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    border: 1px solid var(--c-border-soft);
    border-radius: 15px;
    height: 48px;
    line-height: 20px;
    font-weight: 950;
}

.phone-input {
    min-width: 0 !important;
}

#phoneValidIcon.phone-status-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-panel) 84%, rgba(255,255,255,.10) 16%);
    border: 1px solid var(--c-border-soft);
    font-weight: 950;
}

.phone-status-msg {
    font-size: 12px;
    min-height: 16px;
}

/* Reason helper */
.why-ask {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px dashed var(--c-dash);
    background: color-mix(in srgb, var(--c-panel) 86%, rgba(255,255,255,.10) 14%);
    border-radius: 14px;
    line-height: 1.35;
}

/* ---------- Step 4 ---------- */
.card-lite {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--c-panel) 84%, rgba(255,255,255,.12) 16%);
    box-shadow: var(--c-shadow-soft);
    padding: 12px;
}

.checkout {
    border-radius: var(--radius-xl);
    padding: 0;
    overflow: hidden;
}

.checkout-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px dashed var(--c-dash);
    background: color-mix(in srgb, var(--c-header) 78%, rgba(255,255,255,.05) 22%);
}

.checkout .brand-mini {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong));
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
}

.ch-title {
    font-weight: 980;
}

.checkout-lines {
    padding: 14px 16px 16px;
    display: grid;
    gap: 10px;
}

.checkout .line {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c-panel) 90%, rgba(255,255,255,.06) 10%);
    border: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent 45%);
}

.checkout .k {
    font-size: 12px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 950;
}

.checkout .v {
    font-weight: 950;
}

/* Payment panel */
.pay-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.06), transparent 45%), color-mix(in srgb, var(--c-panel) 82%, rgba(255,255,255,.16) 18%);
    box-shadow: var(--c-shadow-soft);
    padding: 15px;
    margin-top: 12px;
}

.pay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pay-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pay-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong));
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
}

.pay-h {
    font-weight: 980;
}

.pay-sub {
    font-size: 12px;
    color: var(--c-muted);
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    min-height: 30px;
    line-height: 1;
    border-radius: 999px;
    font-weight: 980;
    font-size: 12px;
    background: color-mix(in srgb, var(--c-primary) 18%, transparent 82%);
    color: var(--c-primary);
    border: 1px solid var(--c-border-soft);
    white-space: nowrap;
}

    .pay-badge.req {
        background: color-mix(in srgb, var(--c-primary) 30%, transparent 70%);
        color: var(--c-text);
        border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border) 45%);
    }

    .pay-badge.opt {
        background: color-mix(in srgb, var(--c-accent) 26%, transparent 74%);
        color: var(--c-text);
        border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border) 45%);
    }

    .pay-badge.warn {
        background: color-mix(in srgb, var(--c-danger) 32%, transparent 68%);
        color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
        border-color: var(--c-danger);
    }

.pay-lines {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.pay-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c-panel) 90%, rgba(255,255,255,.06) 10%);
    border: 1px solid color-mix(in srgb, var(--c-border) 55%, transparent 45%);
}

    .pay-line .lbl {
        font-size: 12px;
        color: var(--c-muted);
    }

    .pay-line .amt {
        font-weight: 980;
    }

.pay-policy {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--c-dash);
    border-radius: 14px;
    background: color-mix(in srgb, var(--c-panel) 82%, rgba(255,255,255,.14) 18%);
    color: var(--c-text);
}

.pay-foot {
    margin-top: 8px;
}

/* ---------- Step 5 ---------- */
.success {
    text-align: center;
}

    .success .tool-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 12px;
    }

    .success .sep {
        height: 1px;
        background: var(--c-border-strong);
        margin: 18px auto;
        width: 160px;
    }

.hero .mark {
    width: 78px;
    height: 78px;
    margin: 0 auto 10px;
    position: relative;
}

.hero .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 54%, transparent 46%) 0%, transparent 62%);
    animation: pulseRing 1.9s var(--ease-soft) infinite;
}

.hero .check {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
    color: color-mix(in srgb, var(--c-bg) 88%, #000 12%);
    display: grid;
    place-items: center;
    box-shadow: 0 18px 36px rgba(0,0,0,.34);
}

@keyframes pulseRing {
    0% {
        transform: scale(.90);
        opacity: .55;
    }

    60% {
        transform: scale(1.10);
        opacity: .24;
    }

    100% {
        transform: scale(.90);
        opacity: .55;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .ticket {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    :root {
        --pad: var(--pad-mobile);
        --seed-size: 13px;
    }

    .shell {
        padding: 14px;
    }

    .app-card {
        border-radius: var(--radius-xl);
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
    }

    .app-foot {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: env(safe-area-inset-bottom);
        width: calc(100% - 26px);
        max-width: var(--max-w);
        border-radius: var(--radius-xl);
        z-index: 50;
    }

    .app-body {
        padding-bottom: calc(var(--foot-h-mobile) + 30px + env(safe-area-inset-bottom));
    }

    .app-head {
        padding: 14px 15px;
        align-items: flex-start;
    }

    .brand-title {
        font-size: 16px;
    }

    .progress {
        margin-top: 2px;
    }

    .doc-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .doc-actions {
        width: 100%;
        margin-left: 0;
    }

        .doc-actions .btn {
            width: 100%;
            min-width: 0;
        }

    .day-strip {
        padding: 10px 46px;
    }

    .slots-grid {
        grid-template-columns: 1fr;
    }

    .checkout .line {
        grid-template-columns: 130px 1fr;
    }
}

@media (max-width: 520px) {
    :root {
        --seed-size: 12px;
    }

    .progress .dot {
        width: 8px;
        height: 8px;
    }

    .slot-mid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .slot-mid .line {
            display: none;
        }

    .phone-pack {
        grid-template-columns: 78px minmax(0,1fr) 22px;
    }
}

/* iOS Safari tweak */
@supports (-webkit-touch-callout:none) {
    @media (max-width:760px) {
        #dateInputWrap > input,
        #dateInputWrap .flatpickr-input {
            line-height: 50px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}