* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
   
    height: 100%;
    overflow: hidden;
    font-family: 'Vazirmatn',system-ui,sans-serif;
    direction: rtl;
}

/* ── BG ── */
body {
    background: radial-gradient(ellipse 80vw 60vh at 70% 20%, rgba(78,205,196,.18) 0%, transparent 60%), radial-gradient(ellipse 60vw 60vh at 10% 85%, rgba(155,143,247,.16) 0%, transparent 60%), #080d18;
    color: #eef2ff;
    position: relative;
}


    body::after {
        content: "";
        position: fixed;
        width: 500px;
        height: 500px;
        top: -150px;
        right: -150px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(78,205,196,.18), transparent 70% );
        filter: blur(40px);
        animation: floatGlow 12s ease-in-out infinite;
        pointer-events: none;
    }

    /* ── AMBIENT PARTICLES ── */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: radial-gradient(1.5px 1.5px at 15% 22%, rgba(78,205,196,.55) 0%, transparent 100%), radial-gradient(1px 1px at 45% 68%, rgba(155,143,247,.5) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 78% 35%, rgba(78,205,196,.4) 0%, transparent 100%), radial-gradient(1px 1px at 92% 75%, rgba(247,183,49,.45) 0%, transparent 100%), radial-gradient(1px 1px at 5% 55%, rgba(155,143,247,.4) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 60% 12%, rgba(78,205,196,.35) 0%, transparent 100%), radial-gradient(1px 1px at 30% 90%, rgba(247,183,49,.35) 0%, transparent 100%), radial-gradient(1px 1px at 85% 50%, rgba(78,205,196,.3) 0%, transparent 100%);
    }

@keyframes floatGlow {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(40px);
    }
}
/* ── MAIN CONTENT AREA ── */
.stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0 140px 0;
    z-index: 1;
}

body {
    position: relative;
    min-height: 100vh;
}

.dock-wrap {
    z-index: 1000;
}

.fab {
    z-index: 1100;
}

.overlay {
    z-index: 2000;
}


/* ── HERO (default visible content) ── */
.hero {
    text-align: center;
    padding: 0 24px;
    animation: heroIn .9s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

.hero-logo {
    width: clamp(72px,10vw,96px);
    height: clamp(72px,10vw,96px);
    border-radius: 22px;
    background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem,3vw,1.7rem);
    font-weight: 900;
    color: #060910;
    line-height: 1.1;
    text-align: center;
    word-break: keep-all;
    padding: 6px;
    margin: 0 auto 24px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 44px rgba(78,205,196,.35);
    position: relative;
    overflow: hidden;
    transition: transform .3s;
}

    .hero-logo:hover {
        transform: scale(1.06);
    }

    .hero-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 16px;
        position: absolute;
        inset: 0;
    }

    .hero-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
        transform: translateX(-130%);
        animation: logoShine 4s ease-in-out 1.5s infinite;
    }

@keyframes logoShine {
    0%,60% {
        transform: translateX(-130%);
    }

    80% {
        transform: translateX(130%);
    }

    100% {
        transform: translateX(130%);
    }
}

.hero h1 {
    font-size: clamp(2rem,5vw,3.2rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.2;
    margin-bottom: 14px;
}

    .hero h1 span {
        background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero p {
    font-size: clamp(.9rem,2vw,1.05rem);
    color: rgba(200,210,240,.75);
    line-height: 1.9;
    max-width: 480px;
    margin: 0 auto 28px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: #4ecdc4;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ecdc4;
    box-shadow: 0 0 0 0 rgba(78,205,196,.7);
    animation: pdot 2s ease-in-out infinite;
}

@keyframes pdot {
    0% {
        box-shadow: 0 0 0 0 rgba(78,205,196,.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(78,205,196,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(78,205,196,0);
    }
}

/* ── GLASS PANEL (Overlay) ── */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 130px;
    opacity: 0;
    pointer-events: none;
    background: rgba(8,13,24,.6);
    backdrop-filter: blur(0px);
    transition: opacity .4s ease,backdrop-filter .4s ease;
}

    .overlay.open {
        opacity: 1;
        pointer-events: all;
        backdrop-filter: blur(14px);
    }

.panel {
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 200px);
    background: linear-gradient(145deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 24px 80px rgba(0,0,0,.55), 0 4px 16px rgba(78,205,196,.08);
    overflow: hidden;
    transform: scale(.92) translateY(18px);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    display: flex;
    flex-direction: column;
}

.overlay.open .panel {
    transform: scale(1) translateY(0);
}

/* Panel titlebar */
.ptitle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.pdots {
    display: flex;
    gap: 7px;
}

    .pdots span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

        .pdots span:nth-child(1) {
            background: #ff5f57;
        }

        .pdots span:nth-child(2) {
            background: #febc2e;
        }

        .pdots span:nth-child(3) {
            background: #28c840;
        }

.ptitle-txt {
    margin-right: auto;
    font-size: .8rem;
    color: rgba(200,215,255,.5);
    letter-spacing: .5px;
}

.pclose {
    background: none;
    border: none;
    color: rgba(200,215,255,.45);
    font-size: 1.15rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
}

    .pclose:hover {
        background: rgba(255,80,80,.18);
        color: #ff5f57;
    }

/* Panel body scrollable */
.pbody {
    padding: 28px 30px;
    overflow-y: auto;
    flex: 1;
}

    .pbody::-webkit-scrollbar {
        width: 4px;
    }

    .pbody::-webkit-scrollbar-track {
        background: transparent;
    }

    .pbody::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.15);
        border-radius: 2px;
    }

/* ── PANEL CONTENT TYPES ── */
.ptag {
    display: inline-block;
    color: #4ecdc4;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ph2 {
    font-size: clamp(1.45rem,3vw,1.9rem);
    font-weight: 800;
    letter-spacing: -.6px;
    margin-bottom: 12px;
    line-height: 1.3;
}

    .ph2 span {
        background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.plead {
    font-size: .93rem;
    color: rgba(200,215,255,.7);
    line-height: 2;
    margin-bottom: 24px;
}

/* Cards grid inside panel */
.pcards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.pcard {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 18px 16px;
    transition: background .3s,transform .3s;
}

    .pcard:hover {
        background: rgba(255,255,255,.09);
        transform: translateY(-3px);
    }

.pcard-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78,205,196,.12);
    font-size: 1.15rem;
    color: #4ecdc4;
    margin-bottom: 12px;
}

.pcard h4 {
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.pcard p {
    font-size: .78rem;
    color: rgba(200,215,255,.6);
    line-height: 1.8;
}

/* Points list */
.pts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.pt {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: .88rem;
    font-weight: 600;
}

    .pt i {
        color: #4ecdc4;
        font-size: 1rem;
        flex-shrink: 0;
    }

/* Stats row */
.stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.stat {
    flex: 1;
    min-width: 100px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
}

    .stat b {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .stat span {
        font-size: .72rem;
        color: rgba(200,215,255,.55);
        margin-top: 4px;
        display: block;
    }

/* Contact rows */
.crows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.crow {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 14px 16px;
}

.crow-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(78,205,196,.1);
    color: #4ecdc4;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crow-t {
    display: flex;
    flex-direction: column;
}

    .crow-t b {
        font-size: .85rem;
        font-weight: 800;
        margin-bottom: 3px;
    }

    .crow-t span {
        font-size: .78rem;
        color: rgba(200,215,255,.55);
    }

/* Map placeholder */
.mapbox {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
    height: 180px;
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200,215,255,.3);
    font-size: .85rem;
    gap: 8px;
}

    .mapbox img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mappin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-120%);
    font-size: 2rem;
    color: #4ecdc4;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
    animation: pinb 2.2s ease-in-out infinite;
}

@keyframes pinb {
    0%,100% {
        transform: translate(-50%,-120%) scale(1);
    }

    50% {
        transform: translate(-50%,-135%) scale(1.1);
    }
}

.mapover {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(8,13,24,.75));
    display: flex;
    align-items: flex-end;
    padding: 12px 14px;
}

    .mapover span {
        font-size: .78rem;
        font-weight: 700;
    }

/* CTA button */
.pbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
    color: #060910;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: .9rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(78,205,196,.3);
    transition: transform .25s,box-shadow .25s;
    text-decoration: none;
}

    .pbtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(78,205,196,.4);
    }

/* ── APPLE DOCK ── */
.dock-wrap {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.dock {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 26px;
    padding: 10px 16px;
    box-shadow: 0 12px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
}

.di {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: pointer;
    position: relative;
}

.di-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;
    background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    color: #eef2ff;
    position: relative;
    overflow: hidden;
}

    .di-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 50%);
        pointer-events: none;
    }

.di:hover .di-icon {
    transform: translateY(-12px) scale(1.18);
    box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

.di.active .di-icon {
    background: linear-gradient(135deg,rgba(78,205,196,.35),rgba(155,143,247,.25));
    border-color: rgba(78,205,196,.4);
    box-shadow: 0 0 0 2px rgba(78,205,196,.3);
}

.di-label {
    font-size: .62rem;
    font-weight: 700;
    color: rgba(200,215,255,.55);
    margin-top: 6px;
    text-align: center;
    letter-spacing: .3px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s,transform .2s;
    pointer-events: none;
    position: absolute;
    bottom: -18px;
    white-space: nowrap;
}

.di:hover .di-label {
    opacity: 1;
    transform: translateY(0);
}

/* specific icon accent colors */
.di[data-panel="about"] .di-icon {
    background: linear-gradient(135deg,rgba(155,143,247,.3),rgba(78,205,196,.15));
}

.di[data-panel="contact"] .di-icon {
    background: linear-gradient(135deg,rgba(247,183,49,.25),rgba(78,205,196,.15));
}

.di[data-href] .di-icon {
    background: linear-gradient(135deg,rgba(78,205,196,.3),rgba(155,143,247,.2));
}

/* dock separator */
.dsep {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.15);
    margin: 0 4px;
    align-self: center;
}

/* active dot */
.di-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ecdc4;
    position: absolute;
    bottom: -8px;
    opacity: 0;
    transition: opacity .2s;
}

.di.active .di-dot {
    opacity: 1;
}

/* ── RESPONSIVE ── */
@media(max-width:600px) {
    .pbody {
        padding: 20px 18px;
    }

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

    .stats {
        flex-direction: column;
    }

    .di-icon {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
        border-radius: 14px;
    }

    .dock {
        gap: 8px;
        padding: 10px 12px;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .panel {
        border-radius: 20px;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


.hero-brand {
    position: relative;
    max-width: 650px;
    margin: 0 auto 35px;
    padding: 30px;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 80px rgba(0,0,0,.35);
}

    .hero-brand::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: linear-gradient( 135deg, rgba(78,205,196,.35), rgba(155,143,247,.25) );
        border-radius: inherit;
        z-index: -1;
        filter: blur(35px);
    }

.hero-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(78,205,196,.12);
    border: 1px solid rgba(78,205,196,.25);
    color: #4ecdc4;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.hero-brand-title {
    font-size: clamp(2.5rem,8vw,5rem);
    font-weight: 900;
    margin-bottom: 12px;
    line-height: 1;
}

    .hero-brand-title span {
        background: linear-gradient( 135deg, #4ecdc4, #9b8ff7 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero-brand-sub {
    color: rgba(220,225,255,.75);
    font-size: 1rem;
    line-height: 2;
    max-width: 500px;
    margin: auto;
}



/* ===== LOADER ===== */

.ldr {
    position: fixed;
    inset: 0;
    background: rgba(8,13,24,.82);
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

    .ldr.show {
        opacity: 1;
        visibility: visible;
    }

.ldr-ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.08);
    border-top-color: #4ecdc4;
    animation: spin .9s linear infinite;
}

.ldr-dots {
    display: flex;
    gap: 10px;
}

    .ldr-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #4ecdc4;
        animation: dotPulse 1.2s infinite;
    }

        .ldr-dots span:nth-child(2) {
            animation-delay: .2s;
        }

        .ldr-dots span:nth-child(3) {
            animation-delay: .4s;
        }

.ldr-txt {
    color: #eef2ff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .5px;
}

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

@keyframes dotPulse {
    0%,100% {
        transform: scale(.6);
        opacity: .4;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* پایان کدهای استایل اصلی صفحه
    و شروع کدها مربوط به دکمه رزرو
*/
/* FAB Button */
.fab {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background: linear-gradient(135deg,#ff4d6d,#7c4dff,#4ecdc4);
    background-size: 200% 200%;
    animation: fabGlow 6s ease infinite;
    color: #fff;
    padding: 14px 18px;
    border-radius: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 35px rgba(255,77,109,.25);
    transition: .25s;
    z-index: 200;
}

    .fab:hover {
        transform: scale(1.08);
        box-shadow: 0 18px 50px rgba(124,77,255,.35);
    }

@keyframes fabGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

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

    .appt-overlay.show {
        display: flex;
    }

.appt-box {
    width: 92%;
    max-width: 440px;
    border-radius: 26px;
    padding: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 30px 90px rgba(0,0,0,.3);
    overflow: hidden;
    animation: pop .25s ease;
}

.appt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg,#fafafa,#f1f1f1);
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}

    .appt-header button {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }




.appt-warning {
    background: linear-gradient(135deg, rgba(255,80,80,.15), rgba(255,193,7,.10));
    border: 1px solid rgba(255,80,80,.35);
    color: #ffb4b4;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.6;
}


.swal2-container {
    z-index: 999999 !important;
}

.form-error {
    display: none;
    background: #ffe5e5;
    color: #c62828;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}

.form-success {
    display: none;
    background: #e6ffed;
    color: #1b5e20;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}



.glass-select {
    width: 100% !important;
}


/* ===== time slots ===== */
.appt-box {
    width: 92%;
    max-width: 440px;
    border-radius: 26px;
    padding: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 30px 90px rgba(0,0,0,.3);
    overflow: hidden;
    animation: pop .25s ease;
}

.appt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(180deg,#fafafa,#f1f1f1);
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}

.appt-traffic {
    display: flex;
    gap: 6px;
}

    .appt-traffic .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .appt-traffic .red {
        background: #ff5f57;
    }

    .appt-traffic .yellow {
        background: #ffbd2e;
    }

    .appt-traffic .green {
        background: #28c840;
    }

.appt-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 14px;
    color: #1f2937;
}

.appt-close-btn {
    margin-right: auto;
    border: none;
    background: rgba(0,0,0,.05);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

    .appt-close-btn:hover {
        background: rgba(255,80,80,.15);
        color: #ff5f57;
    }

.appt-body {
    padding: 20px;
}

    .appt-body input {
        width: 100%;
        margin-bottom: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        color: #1f2937;
        font-family: inherit;
        outline: none;
        transition: .2s;
    }

        .appt-body input:focus {
            border-color: #4ecdc4;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(78,205,196,.15);
        }

        .appt-body input::placeholder {
            color: #94a3b8;
        }

.appt-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
    color: #06262a;
    font-family: inherit;
    font-size: 14px;
    transition: .2s;
}

    .appt-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(78,205,196,.3);
    }

    .appt-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

.appt-warning {
    background: linear-gradient(135deg, rgba(255,193,7,.12), rgba(255,138,101,.10));
    border: 1px solid rgba(245,158,11,.3);
    color: #b45309;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.6;
}

.time-slots-label {
    font-size: .8rem;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 700;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.time-slot {
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 9px 6px;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: .2s;
}

    .time-slot:hover {
        border-color: rgba(78,205,196,.5);
        background: #ecfdfb;
    }

    .time-slot.selected {
        background: linear-gradient(135deg,#4ecdc4,#9b8ff7);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(78,205,196,.3);
    }

.slots-loading, .slots-empty {
    grid-column: 1/-1;
    text-align: center;
    font-size: .8rem;
    color: #94a3b8;
    padding: 14px 0;
}

.appt-body .select2-container--default .select2-selection--single {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    height: 47px;
    padding: 12px 14px;
}

.appt-body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78,205,196,.15);
}

.appt-body .select2-selection__rendered {
    color: #1f2937 !important;
    line-height: 22px !important;
    padding: 0 !important;
}

.appt-body .select2-selection__placeholder {
    color: #94a3b8 !important;
}

.appt-body .select2-selection__arrow {
    height: 45px !important;
    left: 10px !important;
    right: auto !important;
}

.select2-dropdown {
    background: #fff;
    border: 1px solid rgba(78,205,196,.3);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.select2-search__field {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    color: #1f2937 !important;
    padding: 8px 10px !important;
}

.select2-results__option {
    color: #1f2937;
    padding: 10px 14px;
    font-size: .88rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg,#4ecdc4,#9b8ff7) !important;
    color: #fff !important;
}