/*==================================================
=          01. Appointment Section
==================================================*/

.appointment-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

.appointment-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(216,168,91,.08),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(45,140,255,.05),
    transparent 45%);

    pointer-events:none;

}

.appointment-section .container{

    position:relative;

    z-index:2;

}


/*==================================================
=          02. Wrapper
==================================================*/

.appointment-wrapper{

    display:grid;

    grid-template-columns:480px 1fr;

    gap:60px;

    padding:35px;

    border-radius:30px;

    overflow:hidden;

}


/*==================================================
=          03. Left Image
==================================================*/

.appointment-image{

    position:relative;

    border-radius:24px;

    overflow:hidden;

}

.appointment-image img{

    width:100%;

    height:100%;

    min-height:640px;

    object-fit:cover;

    display:block;

}

.appointment-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.45),

        transparent

    );

}


/*==================================================
=          04. Right Form
==================================================*/

.appointment-form{

    display:flex;

    align-items:center;

}

.appointment-form form{

    width:100%;

}


/*==================================================
=          05. Grid
==================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}


/*==================================================
=          06. Form Group
==================================================*/

.form-group{

    margin-bottom:24px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#cbd5e1;

}


/*==================================================
=          07. Inputs
==================================================*/

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    border:none;

    outline:none;

    border-radius:18px;

    padding:16px 20px;

    font-size:15px;

    font-family:inherit;

    color:#fff;

    background:

    rgba(255,255,255,.05);

    border:1px solid

    rgba(255,255,255,.08);

    transition:.35s;

}


/*==================================================
=          08. Textarea
==================================================*/

.form-group textarea{

    resize:vertical;

    min-height:170px;

}


/*==================================================
=          09. Placeholder
==================================================*/

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#94a3b8;

}


/*==================================================
=          10. Focus
==================================================*/

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:#d8a85b;

    background:

    rgba(255,255,255,.08);

    box-shadow:

    0 0 0 4px

    rgba(216,168,91,.12);

}
/*==================================================
=          11. Submit Button
==================================================*/

.appointment-submit{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    font-family:inherit;

    color:#fff;

    background:linear-gradient(
        135deg,
        #d8a85b,
        #c89338
    );

    box-shadow:
        0 15px 35px rgba(216,168,91,.25);

    transition:.35s;

}


/*==================================================
=          12. Submit Hover
==================================================*/

.appointment-submit:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(216,168,91,.35);

}


.appointment-submit:active{

    transform:scale(.98);

}


/*==================================================
=          13. Disabled
==================================================*/

.appointment-submit:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

}


/*==================================================
=          14. Loading State
==================================================*/

.appointment-submit.loading{

    position:relative;

    color:transparent;

}


.appointment-submit.loading::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:22px;

    height:22px;

    margin-left:-11px;

    margin-top:-11px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    animation:appointmentSpin .7s linear infinite;

}


/*==================================================
=          15. Result Message
==================================================*/

.appointment-result{

    display:none;

    margin-top:25px;

    padding:16px 20px;

    border-radius:16px;

    font-size:14px;

    line-height:1.9;

}


/*==================================================
=          16. Success
==================================================*/

.appointment-result.success{

    display:block;

    background:

    rgba(34,197,94,.08);

    border:1px solid

    rgba(34,197,94,.18);

    color:#4ade80;

}


/*==================================================
=          17. Error
==================================================*/

.appointment-result.error{

    display:block;

    background:

    rgba(239,68,68,.08);

    border:1px solid

    rgba(239,68,68,.18);

    color:#f87171;

}


/*==================================================
=          18. Glass Card
==================================================*/

.appointment-wrapper.glass-card{

    background:

    rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid

    rgba(255,255,255,.08);

}


/*==================================================
=          19. Select Style
==================================================*/

.form-group select{

    appearance:none;

    -webkit-appearance:none;

    background-image:

    linear-gradient(45deg,transparent 50%,#d8a85b 50%),

    linear-gradient(135deg,#d8a85b 50%,transparent 50%);

    background-position:

    calc(100% - 24px) calc(50% - 3px),

    calc(100% - 18px) calc(50% - 3px);

    background-size:

    6px 6px,

    6px 6px;

    background-repeat:no-repeat;

}


/*==================================================
=          20. Invalid Fields
==================================================*/

.form-group input:invalid,

.form-group textarea:invalid{

    box-shadow:none;

}


/*==================================================
=          21. Hover Inputs
==================================================*/

.form-group input:hover,

.form-group textarea:hover,

.form-group select:hover{

    border-color:

    rgba(216,168,91,.35);

}


/*==================================================
=          22. Animation
==================================================*/

@keyframes appointmentSpin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
=          23. Fade Up
==================================================*/

.appointment-wrapper{

    animation:appointmentFade .7s ease;

}


@keyframes appointmentFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}
/*==================================================
=          24. Responsive - Large Desktop
==================================================*/

@media (max-width:1400px){

    .appointment-wrapper{

        grid-template-columns:420px 1fr;

        gap:45px;

    }

}


/*==================================================
=          25. Responsive - Laptop
==================================================*/

@media (max-width:1200px){

    .appointment-wrapper{

        grid-template-columns:380px 1fr;

        gap:35px;

        padding:30px;

    }

    .appointment-image img{

        min-height:560px;

    }

}


/*==================================================
=          26. Responsive - Tablet
==================================================*/

@media (max-width:992px){

    .appointment-wrapper{

        grid-template-columns:1fr;

    }

    .appointment-image{

        height:420px;

    }

    .appointment-image img{

        min-height:100%;

        height:100%;

    }

    .appointment-form{

        margin-top:15px;

    }

}


/*==================================================
=          27. Responsive - Small Tablet
==================================================*/

@media (max-width:768px){

    .appointment-section{

        padding:90px 0;

    }

    .appointment-wrapper{

        padding:22px;

        gap:28px;

        border-radius:24px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:0;

    }

    .appointment-image{

        height:320px;

        border-radius:18px;

    }

    .appointment-image img{

        height:100%;

    }

    .form-group{

        margin-bottom:18px;

    }

    .form-group input,

    .form-group textarea,

    .form-group select{

        padding:15px 16px;

        font-size:14px;

        border-radius:14px;

    }

    .appointment-submit{

        height:56px;

        font-size:15px;

        border-radius:14px;

    }

}


/*==================================================
=          28. Responsive - Mobile
==================================================*/

@media (max-width:576px){

    .appointment-section{

        padding:70px 0;

    }

    .appointment-wrapper{

        padding:16px;

    }

    .appointment-image{

        height:240px;

    }

    .appointment-image img{

        height:100%;

    }

    .section-header h2{

        font-size:28px;

    }

    .section-header p{

        font-size:14px;

    }

    .form-group label{

        font-size:13px;

    }

    .form-group textarea{

        min-height:140px;

    }

    .appointment-submit{

        height:52px;

        font-size:14px;

    }

    .appointment-result{

        font-size:13px;

    }

}


/*==================================================
=          29. Dark Inputs Autofill
==================================================*/

input:-webkit-autofill,

textarea:-webkit-autofill,

select:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.05) inset;

    -webkit-text-fill-color:#fff;

    transition:background-color 9999s;

}


/*==================================================
=          30. Smooth Transition
==================================================*/

.appointment-wrapper,

.form-group input,

.form-group textarea,

.form-group select,

.appointment-submit{

    transition:all .3s ease;

}
/* =========================================================
   APPOINTMENT — COMPACT / LIGHT-DARK SAFE / PERSIAN PICKER
========================================================= */
.appointment-section{padding:82px 0;}
.appointment-wrapper{grid-template-columns:340px 1fr;gap:34px;padding:24px;border-radius:26px;}
.appointment-image img{min-height:560px;}
.form-grid{gap:16px;}
.form-group{margin-bottom:16px;}
.form-group label{margin-bottom:7px;font-size:13px;}
.form-group input,.form-group select,.form-group textarea{border-radius:13px;padding:12px 14px;font-size:14px;min-height:46px;background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.12);}
.form-group select option{background:#13263a;color:#fff;}
.form-group textarea{min-height:90px;height:90px;resize:vertical;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:rgba(255,255,255,.10);}
.appointment-submit{height:50px;border-radius:13px;font-size:14px;}
.appointment-field-hint{font-size:10px;margin-top:5px;display:block;opacity:.62;}
body.light-mode .appointment-wrapper.glass-card{background:rgba(255,255,255,.84);border-color:rgba(18,39,63,.10);}
body.light-mode .form-group label{color:#43576d;}
body.light-mode .form-group input,body.light-mode .form-group select,body.light-mode .form-group textarea{color:#172033;background:#fff;border-color:rgba(18,39,63,.12);}
body.light-mode .form-group select option{background:#fff;color:#172033;}

/* Native-looking compact Persian calendar */
.jalali-picker{display:none;position:absolute;z-index:10020;width:min(330px,calc(100vw - 32px));padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(12,28,44,.98);box-shadow:0 22px 55px rgba(0,0,0,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.jalali-picker.is-open{display:block;}
.jalali-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.jalali-picker-head button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:16px;}
.jalali-picker-title{font-size:13px;font-weight:800;}
.jalali-picker-week,.jalali-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.jalali-picker-week span{text-align:center;font-size:10px;opacity:.55;padding:4px 0;}
.jalali-day{height:34px;border:0;border-radius:9px;background:transparent;color:#fff;font:600 12px Vazirmatn,sans-serif;cursor:pointer;}
.jalali-day:hover:not(:disabled){background:rgba(216,168,91,.16);}.jalali-day.is-today{box-shadow:inset 0 0 0 1px rgba(216,168,91,.7)}.jalali-day:disabled{opacity:.20;cursor:not-allowed}.jalali-day.is-selected{background:#d8a85b;color:#162231;font-weight:900;}
.jalali-picker-note{font-size:9px;opacity:.5;text-align:center;margin-top:8px;}
body.light-mode .jalali-picker{background:rgba(255,255,255,.98);border-color:rgba(18,39,63,.10);box-shadow:0 22px 55px rgba(30,55,78,.18);color:#172033;}
body.light-mode .jalali-picker-head button{background:rgba(20,60,90,.06);color:#172033;}.light-mode .jalali-day{color:#172033;}
@media(max-width:992px){
 .appointment-section{padding:62px 0}.appointment-wrapper{grid-template-columns:1fr;gap:18px;padding:16px}.appointment-image{display:none}.form-grid{grid-template-columns:1fr;gap:0}.form-group{margin-bottom:12px}.form-group input,.form-group select,.form-group textarea{min-height:44px;padding:10px 12px}.form-group textarea{height:76px;min-height:76px}.appointment-submit{height:48px}.jalali-picker{position:fixed;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);max-height:80vh;overflow:auto;}
}

/* =========================================================
   FINAL DATE PICKER + COMPACT APPOINTMENT CONTROLS
========================================================= */
.appointment-date-control{position:relative;display:flex;align-items:center}
.appointment-date-control #appointmentDate{width:100%;padding-inline-end:46px;cursor:pointer}
.appointment-date-button{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:9px;background:rgba(216,168,91,.13);color:#d8a85b;display:grid;place-items:center;cursor:pointer;z-index:2;font-size:15px}
.appointment-date-button:hover{background:rgba(216,168,91,.22)}
.jalali-picker{position:fixed!important;left:50%!important;right:auto!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:2147483000!important;width:min(350px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;}
.jalali-picker.is-open{display:block!important}
body.jalali-picker-open{overflow:hidden}
.form-group select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:36px!important}
.form-group select option{background:#102133;color:#fff}
body.light-mode .form-group select option{background:#fff;color:#172033}
@media(max-width:992px){
 .appointment-section{padding:48px 0}
 .appointment-wrapper{padding:14px;border-radius:22px}
 .appointment-form form{gap:0}
 .form-group{margin-bottom:10px}
 .form-group label{font-size:11px;margin-bottom:5px}
 .form-group input,.form-group select{min-height:42px;padding:9px 11px;font-size:12px}
 .form-group textarea{height:68px;min-height:68px;padding:9px 11px;font-size:12px}
 .appointment-submit{height:46px;font-size:13px}
}

/* =========================================================
   LUXURY APPOINTMENT REDESIGN — v1.2.2
========================================================= */
.appointment-section{
    padding:88px 0 96px;
}
.appointment-section::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-260px;
    bottom:-260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(216,168,91,.07),transparent 68%);
    pointer-events:none;
}
.appointment-section-header{
    max-width:760px;
    margin-inline:auto;
    margin-bottom:30px;
}
.appointment-section-header h2{
    margin-bottom:9px;
}
.appointment-section-header p{
    max-width:620px;
    margin-inline:auto;
}
.appointment-wrapper.glass-card{
    position:relative;
    display:grid;
    grid-template-columns:minmax(315px,360px) minmax(0,1fr);
    direction:ltr;
    gap:34px;
    padding:18px;
    border-radius:32px;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 28px 80px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
.appointment-visual,
.appointment-form{
    direction:rtl;
}
.appointment-visual{
    position:relative;
    min-height:570px;
    overflow:hidden;
    border-radius:25px;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    isolation:isolate;
    background:
        radial-gradient(circle at 75% 20%,rgba(216,168,91,.16),transparent 34%),
        linear-gradient(150deg,#102334 0%,#0b1826 58%,#08131f 100%);
    border:1px solid rgba(216,168,91,.16);
}
.appointment-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 35%,rgba(216,168,91,.04));
    pointer-events:none;
    z-index:-1;
}
.appointment-visual::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.045);
    pointer-events:none;
}
.appointment-visual-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(4px);
    pointer-events:none;
    z-index:-1;
}
.appointment-visual-glow-one{
    width:220px;height:220px;top:-95px;right:-70px;
    background:rgba(216,168,91,.13);
}
.appointment-visual-glow-two{
    width:190px;height:190px;bottom:-90px;left:-75px;
    background:rgba(45,140,255,.08);
}
.appointment-visual-top{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:800;
}
.appointment-visual-icon{
    width:39px;height:39px;border-radius:13px;
    display:grid;place-items:center;
    color:#e7bd79;
    background:rgba(216,168,91,.11);
    border:1px solid rgba(216,168,91,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.appointment-visual-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.appointment-visual-art{
    position:absolute;
    inset:72px 5px 105px;
    display:grid;
    place-items:center;
    opacity:.94;
}
.appointment-visual-art svg{width:min(100%,360px);height:auto;filter:drop-shadow(0 18px 35px rgba(216,168,91,.08))}
.appointment-visual-copy{position:relative;z-index:2;margin-top:auto;max-width:290px}
.appointment-visual-copy strong{display:block;color:#fff;font-size:18px;line-height:1.8;margin-bottom:5px}
.appointment-visual-copy p{margin:0;color:rgba(225,235,244,.62);font-size:11px;line-height:2.05}
.appointment-visual-meta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.appointment-visual-meta span{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 10px;border-radius:999px;
    color:rgba(255,255,255,.68);font-size:9px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
}
.appointment-visual-meta i{width:5px;height:5px;border-radius:50%;background:#d8a85b;box-shadow:0 0 10px rgba(216,168,91,.7)}
.appointment-form{
    display:flex;
    align-items:center;
    padding:14px 22px 12px 20px;
}
.appointment-form form{width:100%}
.appointment-form-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.appointment-form-heading span{font-size:18px;font-weight:900;color:var(--text-color,#fff)}
.appointment-form-heading small{font-size:10px;color:rgba(148,163,184,.78)}
.form-grid{gap:16px 18px}
.form-group{margin-bottom:0}
.form-group label{font-size:11px;margin-bottom:7px;color:#aebdce;font-weight:800}
.form-group input,.form-group select,.form-group textarea{
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
    font-size:13px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.form-group textarea{height:82px;min-height:82px;resize:none;line-height:1.8}
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:rgba(216,168,91,.30)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:rgba(216,168,91,.62);
    background:rgba(255,255,255,.065);
    box-shadow:0 0 0 3px rgba(216,168,91,.09),inset 0 1px 0 rgba(255,255,255,.04);
}
.form-group-message{grid-column:span 1}
.appointment-field-hint{font-size:9px;margin-top:4px;color:rgba(148,163,184,.62)}
.appointment-date-button{width:32px;height:32px;border-radius:9px;background:rgba(216,168,91,.10);color:#e0b46c}
.appointment-submit{
    position:relative;
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;height:52px;margin-top:18px;
    border-radius:15px;
    background:linear-gradient(135deg,#e0b261 0%,#c58c32 100%);
    box-shadow:0 14px 32px rgba(197,140,50,.20),inset 0 1px 0 rgba(255,255,255,.25);
    font-size:13px;
}
.appointment-submit svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .25s ease}
.appointment-submit:hover svg{transform:rotate(180deg) translateX(-3px)}
.appointment-result{margin-top:12px}
body.light-mode .appointment-wrapper.glass-card{
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,248,251,.82));
    border-color:rgba(18,39,63,.10);
    box-shadow:0 26px 70px rgba(31,58,85,.10),inset 0 1px 0 rgba(255,255,255,.92);
}
body.light-mode .appointment-form-heading span{color:#172033}
body.light-mode .appointment-form-heading small{color:#718096}
body.light-mode .form-group label{color:#52677e}
body.light-mode .form-group input,body.light-mode .form-group select,body.light-mode .form-group textarea{background:rgba(255,255,255,.88);border-color:rgba(18,39,63,.11);color:#172033}
body.light-mode .form-group input:focus,body.light-mode .form-group select:focus,body.light-mode .form-group textarea:focus{background:#fff}
body.light-mode .appointment-visual{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 35px rgba(18,39,63,.14)}
@media(max-width:1200px){
    .appointment-wrapper.glass-card{grid-template-columns:310px minmax(0,1fr);gap:24px}
    .appointment-visual{min-height:550px;padding:21px}
    .appointment-form{padding-inline:10px}
}
@media(max-width:992px){
    .appointment-section{padding:64px 0}
    .appointment-wrapper.glass-card{grid-template-columns:1fr;gap:0;padding:15px}
    .appointment-visual{display:none}
    .appointment-form{padding:10px 6px 8px}
    .appointment-form-heading{margin-bottom:16px}
    .form-grid{grid-template-columns:1fr;gap:0}
    .form-group{margin-bottom:11px}
    .form-group-message{grid-column:auto}
}
@media(min-width:993px) and (max-width:1150px){
    .appointment-form-heading small{display:none}
}
@media(max-width:576px){
    .appointment-section{padding:52px 0}
    .appointment-section-header{margin-bottom:20px}
    .appointment-wrapper.glass-card{padding:12px;border-radius:23px}
    .appointment-form{padding:8px 4px 5px}
    .appointment-form-heading span{font-size:16px}
    .appointment-form-heading small{font-size:9px}
    .form-group input,.form-group select,.form-group textarea{min-height:44px;padding:10px 11px;border-radius:12px;font-size:12px}
    .form-group textarea{height:72px;min-height:72px}
    .appointment-submit{height:48px;border-radius:13px;margin-top:13px}
}

/* =========================================================
   GLASS / PREMIUM BOOKING EXPERIENCE — v1.2.3
   Inspired by layered glass UI: soft blur, luminous borders,
   floating cards and restrained medical-gold accents.
========================================================= */
.appointment-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 12% 45%,rgba(64,145,255,.055),transparent 28%),
        radial-gradient(circle at 86% 38%,rgba(216,168,91,.08),transparent 30%);
}
.appointment-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.32;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
}
.appointment-section-header .premium-badge{
    background:rgba(216,168,91,.08);
    border-color:rgba(216,168,91,.20);
    box-shadow:0 0 28px rgba(216,168,91,.07),inset 0 1px 0 rgba(255,255,255,.08);
}
.appointment-wrapper.glass-card{
    direction:rtl;
    grid-template-columns:minmax(0,1fr) minmax(320px,390px);
    gap:14px;
    padding:14px;
    border-radius:34px;
    background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 36px 100px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
}
.appointment-form{order:1;min-width:0;padding:20px 26px 18px 22px}
.appointment-visual{order:2;min-height:555px;border-radius:28px;padding:23px 22px 20px;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,rgba(19,38,52,.92),rgba(8,20,31,.94));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 55px rgba(0,0,0,.16)}
.appointment-visual::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 18% 18%,rgba(91,174,255,.13),transparent 31%),radial-gradient(circle at 82% 28%,rgba(216,168,91,.18),transparent 34%),radial-gradient(circle at 55% 100%,rgba(216,168,91,.07),transparent 38%)}
.appointment-visual::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.055),transparent 28%,rgba(255,255,255,.018) 70%,rgba(216,168,91,.025));border:1px solid rgba(255,255,255,.035)}
.appointment-visual-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:-2}
.appointment-visual-orb-one{width:240px;height:240px;right:-105px;top:-100px;background:rgba(216,168,91,.18);box-shadow:0 0 100px rgba(216,168,91,.18)}
.appointment-visual-orb-two{width:180px;height:180px;left:-95px;bottom:-85px;background:rgba(44,137,255,.10);box-shadow:0 0 90px rgba(44,137,255,.13)}
.appointment-visual-grid{position:absolute;inset:0;z-index:-1;opacity:.20;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at 50% 48%,#000 0,transparent 76%)}
.appointment-visual-top{position:relative;z-index:5;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:11px;font-weight:900}
.appointment-visual-icon{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 25px rgba(0,0,0,.12);color:#e4ba76}
.appointment-live-dot{width:7px;height:7px;border-radius:50%;margin-inline-start:auto;background:#71d59a;box-shadow:0 0 0 5px rgba(113,213,154,.07),0 0 16px rgba(113,213,154,.65)}
.appointment-visual-content{position:relative;z-index:3;padding-top:28px}
.appointment-visual-eyebrow{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:rgba(226,191,132,.82);font-size:7px;letter-spacing:1.4px;direction:ltr}
.appointment-visual-content h3{margin:14px 0 8px;color:#f8fafc;font-size:24px;line-height:1.65;font-weight:500;letter-spacing:-.4px}
.appointment-visual-content h3 strong{font-weight:950;background:linear-gradient(90deg,#fff,#e3b86f);-webkit-background-clip:text;background-clip:text;color:transparent}
.appointment-visual-content>p{margin:0;max-width:295px;color:rgba(222,232,241,.60);font-size:10px;line-height:2.05}
.appointment-mini-card{position:relative;margin:24px 0 0;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));border-radius:21px;padding:14px;box-shadow:0 24px 45px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.appointment-mini-card-head{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.075)}
.appointment-mini-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,rgba(216,168,91,.28),rgba(216,168,91,.08));border:1px solid rgba(216,168,91,.22);color:#f1cc91;font-size:10px;font-weight:900}
.appointment-mini-card-head span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
.appointment-mini-card-head b{font-size:10px;color:#f7fafc;font-weight:900}
.appointment-mini-card-head small{font-size:7px;color:rgba(216,225,234,.55)}
.appointment-mini-card-head i{font-style:normal;margin-inline-start:auto;color:rgba(255,255,255,.38);letter-spacing:2px;font-size:10px}
.appointment-mini-calendar{padding:12px 0 8px}
.appointment-mini-calendar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:8px}
.appointment-mini-calendar-top b{color:rgba(255,255,255,.84)}
.appointment-mini-calendar-top span{color:#d9ad65}
.appointment-mini-days,.appointment-mini-dates{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.appointment-mini-days span{color:rgba(216,225,234,.38);font-size:6px}
.appointment-mini-dates span{display:grid;place-items:center;height:26px;border-radius:8px;color:rgba(235,241,247,.65);font-size:7px;background:rgba(255,255,255,.025)}
.appointment-mini-dates span.active{color:#111a24;background:linear-gradient(145deg,#f1cc8a,#c9923d);box-shadow:0 8px 18px rgba(216,168,91,.20);font-weight:950}
.appointment-mini-time{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:11px;border-top:1px solid rgba(255,255,255,.075);font-size:8px;color:rgba(216,225,234,.50)}
.appointment-mini-time strong{color:#f2cb8b;font-size:11px}
.appointment-mini-float{position:absolute;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(18,32,43,.62);border-radius:14px;box-shadow:0 15px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.appointment-mini-float-one{left:-7px;bottom:70px}
.appointment-mini-float-two{right:-7px;bottom:105px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 11px}
.appointment-check{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(113,213,154,.12);color:#7fe0a6;font-size:11px;font-weight:900}
.appointment-mini-float b{display:block;color:#f4f7fa;font-size:7px}.appointment-mini-float small{display:block;color:rgba(214,224,234,.48);font-size:6px}.appointment-mini-float-two>span{color:#e3b86f;font-size:10px;font-weight:950}.appointment-mini-float-two>small{font-size:6px}
.appointment-visual-bottom{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.appointment-visual-bottom span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;color:rgba(224,233,241,.52);font-size:7px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.appointment-visual-bottom i{width:4px;height:4px;border-radius:50%;background:#d8a85b;box-shadow:0 0 9px rgba(216,168,91,.8)}
.appointment-form-heading{margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.065)}
.appointment-form-heading span{font-size:17px;letter-spacing:-.2px}
.appointment-form-heading small{font-size:9px}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form-group-message{grid-column:span 1}
.form-group label{font-size:10px;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{min-height:46px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.085);font-size:12px}
.form-group textarea{height:76px;min-height:76px}
.appointment-field-hint{font-size:8px;margin-top:3px}
.appointment-submit{height:50px;margin-top:16px;border-radius:14px;font-size:12px;box-shadow:0 16px 34px rgba(197,140,50,.18),inset 0 1px 0 rgba(255,255,255,.28)}
body.light-mode .appointment-wrapper.glass-card{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(241,246,251,.66));border-color:rgba(20,44,70,.10);box-shadow:0 36px 90px rgba(45,71,96,.12),inset 0 1px 0 rgba(255,255,255,.95)}
body.light-mode .appointment-section{background:radial-gradient(circle at 12% 45%,rgba(55,137,235,.07),transparent 28%),radial-gradient(circle at 86% 38%,rgba(216,168,91,.10),transparent 30%)}
body.light-mode .appointment-form-heading{border-bottom-color:rgba(20,44,70,.08)}
body.light-mode .appointment-visual{background:linear-gradient(145deg,#193447,#0e2434);border-color:rgba(20,44,70,.10)}
body.light-mode .form-group input,body.light-mode .form-group select,body.light-mode .form-group textarea{background:rgba(255,255,255,.74);border-color:rgba(20,44,70,.10)}
body.light-mode .form-group input:focus,body.light-mode .form-group select:focus,body.light-mode .form-group textarea:focus{background:#fff}
@media(max-width:1200px){
    .appointment-wrapper.glass-card{grid-template-columns:minmax(0,1fr) 320px}
    .appointment-visual{min-height:545px}
    .appointment-form{padding-inline:18px}
}
@media(max-width:992px){
    .appointment-wrapper.glass-card{grid-template-columns:1fr;padding:13px;border-radius:27px}
    .appointment-visual{display:none}
    .appointment-form{padding:11px 8px 7px}
    .form-grid{grid-template-columns:1fr;gap:0}
    .form-group{margin-bottom:11px}
    .form-group-message{grid-column:auto}
}
@media(max-width:576px){
    .appointment-wrapper.glass-card{padding:10px;border-radius:23px}
    .appointment-form{padding:8px 4px 5px}
    .appointment-form-heading{margin-bottom:17px}
    .form-group input,.form-group select,.form-group textarea{min-height:44px;padding:10px 11px;border-radius:12px;font-size:12px}
    .form-group textarea{height:70px;min-height:70px}
}


/* =========================================================
   v1.2.4 — TRUE GLASS FORM / COMPACT MOBILE
   The booking form itself is now a frosted glass panel;
   the old internal "فرم درخواست" heading is intentionally removed.
========================================================= */
.appointment-wrapper.glass-card{
    gap:12px;
    padding:12px;
    border-radius:34px;
    background:
        linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
        radial-gradient(circle at 82% 18%,rgba(216,168,91,.055),transparent 34%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 38px 100px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(28px) saturate(145%);
    -webkit-backdrop-filter:blur(28px) saturate(145%);
}

.appointment-form{
    position:relative;
    order:1;
    min-width:0;
    align-self:stretch;
    padding:24px 26px 22px;
    border-radius:28px;
    overflow:hidden;
    background:
        linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 52%,rgba(255,255,255,.012)),
        radial-gradient(circle at 92% 0%,rgba(216,168,91,.075),transparent 28%);
    border:1px solid rgba(255,255,255,.115);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,255,255,.018),
        0 18px 45px rgba(0,0,0,.08);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
}

.appointment-form::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 8%,rgba(255,255,255,.075),transparent 24%),
        linear-gradient(110deg,transparent 0 58%,rgba(255,255,255,.018) 72%,transparent 100%);
}

.appointment-form::after{
    content:"";
    position:absolute;
    top:0;
    left:9%;
    right:9%;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}

.appointment-form form{
    position:relative;
    z-index:1;
}

/* Keep the form compact: no redundant second heading. */
.appointment-form-heading{display:none!important}

.form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 16px;
}

.form-group{
    position:relative;
    margin-bottom:0;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    padding-inline:4px;
    color:rgba(224,234,243,.72);
    font-size:10px;
    font-weight:850;
}

.form-group input,
.form-group select,
.form-group textarea{
    color:#f4f8fb;
    background:
        linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.115);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 8px 24px rgba(0,0,0,.055);
    backdrop-filter:blur(16px) saturate(130%);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{
    border-color:rgba(216,168,91,.30);
    background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:rgba(216,168,91,.58);
    background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
    box-shadow:
        0 0 0 3px rgba(216,168,91,.075),
        inset 0 1px 0 rgba(255,255,255,.09),
        0 10px 28px rgba(0,0,0,.08);
}

.form-group-message{grid-column:span 1}
.form-group textarea{height:76px;min-height:76px}

.appointment-submit{
    height:52px;
    margin-top:16px;
    border:1px solid rgba(244,209,145,.34);
    border-radius:15px;
    color:#fff9ef;
    background:
        linear-gradient(135deg,rgba(224,178,97,.74),rgba(184,126,38,.58)),
        rgba(216,168,91,.16);
    box-shadow:
        0 18px 38px rgba(197,140,50,.16),
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(90,54,11,.12);
    backdrop-filter:blur(14px) saturate(135%);
    -webkit-backdrop-filter:blur(14px) saturate(135%);
}

.appointment-submit:hover{
    background:
        linear-gradient(135deg,rgba(231,190,111,.84),rgba(194,138,49,.66)),
        rgba(216,168,91,.18);
}

body.light-mode .appointment-wrapper.glass-card{
    background:
        linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.24)),
        radial-gradient(circle at 85% 15%,rgba(216,168,91,.09),transparent 32%);
    border-color:rgba(28,57,83,.10);
    box-shadow:
        0 38px 90px rgba(35,65,92,.12),
        inset 0 1px 0 rgba(255,255,255,.88);
}

body.light-mode .appointment-form{
    background:
        linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.25)),
        radial-gradient(circle at 92% 0%,rgba(216,168,91,.07),transparent 28%);
    border-color:rgba(28,57,83,.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 18px 45px rgba(35,65,92,.07);
}

body.light-mode .form-group label{color:#52677e}
body.light-mode .form-group input,
body.light-mode .form-group select,
body.light-mode .form-group textarea{
    color:#172033;
    background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(244,248,252,.34));
    border-color:rgba(28,57,83,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 22px rgba(35,65,92,.045);
}
body.light-mode .form-group input:hover,
body.light-mode .form-group select:hover,
body.light-mode .form-group textarea:hover{
    background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(244,248,252,.42));
}

@media(max-width:1200px){
    .appointment-wrapper.glass-card{grid-template-columns:minmax(0,1fr) 320px}
    .appointment-form{padding:22px 18px 20px}
}

@media(max-width:992px){
    .appointment-wrapper.glass-card{
        grid-template-columns:1fr;
        gap:0;
        padding:10px;
        border-radius:27px;
    }
    .appointment-visual{display:none}
    .appointment-form{
        display:block;
        width:100%;
        box-sizing:border-box;
        padding:18px 14px 16px;
        border-radius:22px;
    }
    .form-grid{
        grid-template-columns:1fr;
        gap:0;
    }
    .form-group{
        margin-bottom:10px;
    }
    .form-group-message{grid-column:auto}
    .appointment-submit{margin-top:6px}
}

@media(max-width:576px){
    .appointment-section{padding:50px 0}
    .appointment-wrapper.glass-card{padding:8px;border-radius:24px}
    .appointment-form{padding:15px 10px 13px;border-radius:19px}
    .form-group{margin-bottom:9px}
    .form-group label{font-size:10px;margin-bottom:5px}
    .form-group input,
    .form-group select,
    .form-group textarea{min-height:44px;padding:10px 11px;border-radius:12px;font-size:12px}
    .form-group textarea{height:68px;min-height:68px}
    .appointment-submit{height:47px;margin-top:5px;border-radius:13px}
}

/* v1.2.8 — compact appointment time grid + confirmation card */
.appointment-time-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-height:48px}
.appointment-time-slot{min-height:44px;padding:8px 5px;border:1px solid rgba(148,163,184,.28);border-radius:12px;background:rgba(255,255,255,.58);color:#172033;font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.appointment-time-slot:hover{transform:translateY(-1px);border-color:rgba(216,168,91,.65);background:rgba(216,168,91,.10);box-shadow:0 8px 20px rgba(15,23,42,.08)}
.appointment-time-slot.is-selected{border-color:#d8a85b;background:linear-gradient(135deg,rgba(216,168,91,.22),rgba(216,168,91,.08));box-shadow:0 8px 22px rgba(216,168,91,.16);color:#8b641e}
.appointment-time-placeholder{grid-column:1/-1;min-height:48px;display:flex;align-items:center;justify-content:center;padding:10px 12px;border:1px dashed rgba(148,163,184,.32);border-radius:12px;color:#8492a8;font-size:12px;text-align:center;background:rgba(255,255,255,.26)}
body:not(.light-mode) .appointment-time-slot{background:rgba(255,255,255,.045);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.13)}
body:not(.light-mode) .appointment-time-slot:hover{background:rgba(216,168,91,.12);border-color:rgba(216,168,91,.55)}
body:not(.light-mode) .appointment-time-slot.is-selected{color:#f5d38e;background:rgba(216,168,91,.14);border-color:rgba(216,168,91,.72)}
body:not(.light-mode) .appointment-time-placeholder{background:rgba(255,255,255,.025);color:rgba(255,255,255,.52);border-color:rgba(255,255,255,.13)}
.appointment-result.success{padding:18px;border-radius:18px;background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.22);backdrop-filter:blur(16px)}
.appointment-success-title{font-size:16px;font-weight:900;margin-bottom:12px;color:#176b3b}
.appointment-confirmation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.appointment-confirmation>div{padding:10px 12px;border:1px solid rgba(148,163,184,.20);border-radius:12px;background:rgba(255,255,255,.46)}
.appointment-confirmation span{display:block;font-size:10px;color:#718096;margin-bottom:4px}.appointment-confirmation strong{display:block;font-size:13px;color:#172033}
.appointment-confirmation-address{grid-column:1/-1}.appointment-navigation{margin-top:12px}.appointment-navigation>span{display:block;font-size:11px;font-weight:800;color:#667085;margin-bottom:7px}.appointment-navigation-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.appointment-navigation-links a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:11px;border:1px solid rgba(216,168,91,.28);background:rgba(216,168,91,.09);color:#7b5a1c;text-decoration:none;font-size:11px;font-weight:900}.appointment-navigation-links a:hover{background:rgba(216,168,91,.17)}
.appointment-success-note{margin:11px 0 0;font-size:11px;line-height:1.9;color:#607084}
body:not(.light-mode) .appointment-result.success{background:rgba(54,211,153,.08);border-color:rgba(54,211,153,.22)}
body:not(.light-mode) .appointment-success-title{color:#8ce4b9} body:not(.light-mode) .appointment-confirmation>div{background:rgba(255,255,255,.035)}
body:not(.light-mode) .appointment-confirmation>div{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10)}body:not(.light-mode) .appointment-confirmation strong{color:rgba(255,255,255,.9)}body:not(.light-mode) .appointment-confirmation span,body:not(.light-mode) .appointment-navigation>span,body:not(.light-mode) .appointment-success-note{color:rgba(255,255,255,.56)}body:not(.light-mode) .appointment-navigation-links a{color:#f0cb84;background:rgba(216,168,91,.10);border-color:rgba(216,168,91,.25)}
.jalali-picker-head button:disabled{opacity:.3;cursor:not-allowed}.jalali-picker-empty{grid-column:1/-1;padding:18px;text-align:center;color:#8b96a8;font-size:12px}
@media(max-width:992px){.appointment-time-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.appointment-confirmation{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.appointment-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.appointment-time-slot{min-height:42px;font-size:12px}.appointment-confirmation{grid-template-columns:1fr}.appointment-navigation-links{grid-template-columns:1fr 1fr 1fr}.appointment-confirmation-address{grid-column:auto}}

/* v1.2.11 — premium appointment service cards / selected time / confirmation */
.appointment-form-fields{display:block}
.appointment-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.appointment-service-card{position:relative;min-height:72px;padding:13px 14px;border:1px solid rgba(148,163,184,.22);border-radius:15px;background:rgba(255,255,255,.34);color:inherit;text-align:right;cursor:pointer;display:flex;align-items:center;gap:10px;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 8px 22px rgba(15,23,42,.035)}
.appointment-service-card:hover{transform:translateY(-2px);border-color:rgba(216,168,91,.55);background:rgba(216,168,91,.08)}
.appointment-service-card strong{font-size:12px;line-height:1.7}.appointment-service-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(216,168,91,.12);color:#a97826;font-size:13px;flex:0 0 30px}.appointment-service-check{margin-inline-start:auto;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(148,163,184,.3);font-size:11px;opacity:0;transform:scale(.7);transition:.2s}
.appointment-service-card.is-selected{border-color:rgba(216,168,91,.82);background:linear-gradient(135deg,rgba(216,168,91,.18),rgba(216,168,91,.055));box-shadow:0 12px 28px rgba(216,168,91,.12)}.appointment-service-card.is-selected .appointment-service-check{opacity:1;transform:scale(1);background:#d8a85b;color:#fff;border-color:#d8a85b}
.appointment-time-slot.is-hidden{display:none}.appointment-time-grid.has-selection{grid-template-columns:minmax(140px,1fr)}.appointment-time-change{grid-column:1/-1;min-height:34px;border:0;background:transparent;color:#9a7026;font-size:11px;font-weight:800;cursor:pointer}.appointment-new-booking{margin:14px auto 0;display:block;min-height:44px;padding:0 22px;border:1px solid rgba(216,168,91,.35);border-radius:12px;background:rgba(216,168,91,.10);color:#8b641e;font-weight:900;cursor:pointer}.appointment-result.success{margin-top:4px}
body:not(.light-mode) .appointment-service-card{background:rgba(255,255,255,.035);color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.11)}body:not(.light-mode) .appointment-service-card:hover{background:rgba(216,168,91,.10)}body:not(.light-mode) .appointment-service-card.is-selected{background:rgba(216,168,91,.13);border-color:rgba(216,168,91,.72)}body:not(.light-mode) .appointment-service-icon{color:#f0cb84;background:rgba(216,168,91,.11)}body:not(.light-mode) .appointment-time-change,body:not(.light-mode) .appointment-new-booking{color:#f0cb84}.appointment-form .appointment-form-fields[hidden],.appointment-form .appointment-submit[hidden]{display:none!important}
@media(max-width:992px){.appointment-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.appointment-service-grid{grid-template-columns:1fr}.appointment-service-card{min-height:60px}.appointment-time-grid.has-selection{grid-template-columns:1fr}}

/* v1.2.12 service selector */
.appointment-service-picker{position:relative;margin-top:8px}.appointment-service-trigger{width:100%;min-height:56px;padding:10px 13px;border:1px solid rgba(148,163,184,.24);border-radius:15px;background:rgba(255,255,255,.34);color:inherit;display:flex;align-items:center;gap:10px;font:inherit;font-size:12px;font-weight:800;text-align:right;cursor:pointer;transition:.2s}.appointment-service-trigger:hover,.appointment-service-picker.is-open .appointment-service-trigger{border-color:rgba(216,168,91,.68);background:rgba(216,168,91,.08)}.appointment-service-trigger-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(216,168,91,.12);color:#a97826;flex:0 0 30px}.appointment-service-trigger-text{flex:1}.appointment-service-trigger-arrow{font-size:18px;color:#a97826;transition:.2s}.appointment-service-picker.is-open .appointment-service-trigger-arrow{transform:rotate(180deg)}.appointment-service-grid[hidden]{display:none}.appointment-service-grid{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);padding:9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid rgba(148,163,184,.2);border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 22px 55px rgba(15,23,42,.16);backdrop-filter:blur(22px)}body:not(.light-mode) .appointment-service-trigger{background:rgba(255,255,255,.035);color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.12)}body:not(.light-mode) .appointment-service-grid{background:rgba(15,27,39,.97);border-color:rgba(255,255,255,.11)}@media(max-width:520px){.appointment-service-grid{grid-template-columns:1fr}}

/* v1.2.13 — service selector / light mode polish */
.appointment-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.appointment-service-card{min-height:66px!important;font-family:Vazirmatn,inherit!important;}
.appointment-service-card strong{font-size:13px!important;font-weight:800!important;color:inherit!important;}
.appointment-service-trigger,.appointment-service-card{font-family:Vazirmatn,inherit!important;}
body.light-mode .appointment-service-trigger{background:#fff!important;color:#172033!important;border-color:#d7e0e8!important;box-shadow:0 8px 24px rgba(15,31,46,.06)}
body.light-mode .appointment-service-grid{background:rgba(255,255,255,.98)!important;border-color:#d7e0e8!important;box-shadow:0 22px 55px rgba(15,31,46,.14)!important}
body.light-mode .appointment-service-card{background:#f8fafc!important;color:#172033!important;border-color:#dbe3e9!important}
body.light-mode .appointment-service-card strong{color:#172033!important}
body.light-mode .appointment-service-card:hover,body.light-mode .appointment-service-card.is-selected{background:linear-gradient(135deg,#fff8eb,#fff)!important;border-color:#d8a85b!important;color:#172033!important}
body.light-mode .appointment-service-icon{background:rgba(216,168,91,.13)!important;color:#9a6a1d!important}
@media(max-width:520px){.appointment-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.appointment-service-card{min-height:58px!important;padding:10px!important}.appointment-service-card strong{font-size:12px!important}}