* {
            box-sizing: border-box;
        }


        body {
            margin: 0;
            font-family:
                Tahoma,
                Arial,
                sans-serif;
            background: #f5f5f5;
            color: #222;
        }


        .container {
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
        }


        .header {
            margin-bottom: 25px;
        }


        .header h1 {
            margin: 0 0 10px;
            font-size: 24px;
        }


        .service-name {
            color: #666;
            font-size: 15px;
        }


        /* =========================
           INLINE BOOKING PANEL
        ========================= */

        .booking-panel {
            display: none;
            width: 100%;
            margin-top: 24px;
            background: white;
            border-radius: 20px;
            padding: 22px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
            scroll-margin-top: 18px;
        }


        .booking-panel.active {
            display: block;
            animation: bookingPanelShow 0.22s ease;
        }


        @keyframes bookingPanelShow {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        .booking-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 18px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }


        .booking-panel-title {
            margin: 0;
            font-size: 20px;
        }


        .booking-panel-close {
            width: 38px;
            height: 38px;
            border: none;
            border-radius: 50%;
            background: #f2f2f2;
            color: #333;
            font-size: 22px;
            cursor: pointer;
            flex-shrink: 0;
        }


        .booking-panel-close:hover {
            background: #e7e7e7;
        }


        /* =========================
           DATE SECTION
        ========================= */

        .date-section {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }


        .date-row {
            width: 100%;
            display: flex;
            direction: rtl;
            justify-content: center;
            gap: 10px;
        }

        .additional-dates-section {
            width: 100%;
            margin-top: 18px;
        }

        .additional-dates-title {
            margin: 0 0 12px;
            color: #666;
            font-size: 14px;
        }

        .additional-dates-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
        }


        .date-row .date-item {
            direction: rtl;
        }


        .today-row {
            position: relative;
            padding-top: 25px;
        }


        .today-row::before {
            content: "امروز";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            color: #777;
            font-weight: bold;
        }


        .today-row .date-item {
            width: 150px;
        }


        .three-dates-row .date-item {
            flex: 1;
            min-width: 0;
        }


        .date-item {
            min-height: 105px;
            border: none;
            border-radius: 14px;
            padding: 15px 10px;
            text-align: center;
            font-family: inherit;
            font-size: 15px;
        }


        .date-item.available {
            background: white;
            color: #222;
            cursor: pointer;
            box-shadow:
                0 2px 8px
                rgba(0, 0, 0, 0.06);
            transition: 0.2s;
        }


        .date-item.available:hover {
            transform: translateY(-2px);
            box-shadow:
                0 5px 15px
                rgba(0, 0, 0, 0.1);
        }


        .date-item.unavailable {
            background: #e9e9e9;
            color: #999;
            cursor: not-allowed;
        }


        .date-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }


        .date-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }


        .weekday {
            font-size: 13px;
            color: #777;
        }


        .date-number {
            font-size: 17px;
            font-weight: bold;
        }


        .status {
            font-size: 12px;
        }


        .available .status {
            color: #16803c;
        }


        .unavailable .status {
            color: #999;
        }


        /* =========================
           LOADING
        ========================= */

        .loading {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 35px 10px;
            color: #777;
            font-size: 14px;
        }


        .spinner {
            width: 34px;
            height: 34px;
            border:
                4px solid #e5e5e5;
            border-top-color: #222;
            border-radius: 50%;
            animation:
                spin
                0.8s
                linear
                infinite;
            margin-bottom: 14px;
        }


        @keyframes spin {

            to {
                transform: rotate(360deg);
            }

        }


        /* =========================
           CLOCK SECTION
        ========================= */

        .clock-section {
            display: none;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }


        .clock-title {
            margin: 0 0 15px;
            font-size: 15px;
            color: #666;
            text-align: center;
        }


        /* =========================
           TIMELINE
        ========================= */

        .timeline-wrapper {
            width: 100%;
            margin-bottom: 22px;
        }


        .timeline-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            padding:
                38px
                5px
                40px;
            direction: ltr;
            scrollbar-width: thin;
        }


        .timeline-inner {
            position: relative;
            width: 100%;
            min-width: 720px;
            height: 118px;
            direction: ltr;
        }


        /*
         * کل نوار ساعات کاری
         */

        .timeline-track {
            position: absolute;
            left: 0;
            right: 0;
            top: 38px;
            height: 44px;
            border-radius: 10px;
            background: #eaf8ef;
            overflow: hidden;
            border:
                1px solid #cce8d5;
        }


        /*
         * خطوط ساعت
         */

        .timeline-grid-line {
            position: absolute;
            top: 0;
            height: 44px;
            width: 1px;
            background:
                rgba(0, 0, 0, 0.09);
            pointer-events: none;
            z-index: 1;
        }


        /*
         * خطوط نیم‌ساعت
         */

        .timeline-half-line {
            position: absolute;
            top: 0;
            height: 44px;
            width: 1px;
            background:
                rgba(0, 0, 0, 0.045);
            pointer-events: none;
            z-index: 1;
        }


        /*
         * اسلات‌های قابل انتخاب
         *
         * فقط لایه کلیک هستند.
         * رنگ را تعیین نمی‌کنند.
         */

        .timeline-slot {
            position: absolute;
            top: 0;
            height: 44px;
            border: none;
            padding: 0;
            margin: 0;
            background: transparent;
            cursor: pointer;
            z-index: 3;
        }


        .timeline-slot:hover {
            background:
                rgba(22, 128, 60, 0.12);
        }


        .timeline-slot.disabled {
            cursor: not-allowed;
        }


        .timeline-slot.disabled:hover {
            background: transparent;
        }


        /*
         * رزرو واقعی
         */

        .timeline-booked {
            position: absolute;
            top: 0;
            height: 44px;
            background: #e5484d;
            border-radius: 8px;
            z-index: 5;
            pointer-events: none;
            box-shadow:
                inset 0 0 0 1px
                rgba(0, 0, 0, 0.08);
        }


        .timeline-booked-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform:
                translate(-50%, -50%);
            color: white;
            font-size: 10px;
            font-weight: bold;
            white-space: nowrap;
            pointer-events: none;
        }


        /*
         * انتخاب کاربر
         */

        .timeline-selected {
            position: absolute;
            top: 33px;
            height: 54px;
            background:
                rgba(22, 128, 60, 0.30);
            border:
                3px solid #16803c;
            border-radius: 9px;
            z-index: 7;
            pointer-events: none;
            display: none;
        }


        .timeline-selected-label {
            position: absolute;
            top: -29px;
            left: 50%;
            transform:
                translateX(-50%);
            white-space: nowrap;
            color: #16803c;
            font-size: 10px;
            font-weight: bold;
            background: white;
            padding: 2px 6px;
            border-radius: 5px;
        }


        /*
         * برچسب زمان
         */

        .timeline-label {
            position: absolute;
            top: 88px;
            transform:
                translateX(-50%);
            font-size: 11px;
            color: #777;
            white-space: nowrap;
            z-index: 8;
        }


        .timeline-label::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 19px;
            transform:
                translateX(-50%);
            width: 1px;
            height: 8px;
            background: #aaa;
        }


        .timeline-start-label {
            transform:
                translateX(0);
        }


        .timeline-start-label::before {
            left: 0;
            transform: none;
        }


        .timeline-end-label {
            transform:
                translateX(-100%);
        }


        .timeline-end-label::before {
            left: 100%;
            transform:
                translateX(-100%);
        }


        /* =========================
           LEGEND
        ========================= */

        .timeline-legend {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 5px;
            font-size: 12px;
            color: #666;
        }


        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }


        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 4px;
            display: inline-block;
        }


        .legend-available {
            background: #eaf8ef;
            border:
                1px solid #b8dfc4;
        }


        .legend-booked {
            background: #e5484d;
        }


        .legend-selected {
            background: #16803c;
        }


        /* =========================
           CLOCK NUMBERS
        ========================= */

        .clock {
            display: flex;
            align-items: center;
            justify-content: center;
            direction: ltr;
            margin-bottom: 22px;
        }


        .time-number {
            width: 95px;
            text-align: center;
            font-size: 48px;
            font-weight: bold;
            line-height: 1;
        }


        .time-separator {
            font-size: 42px;
            font-weight: bold;
            margin: 0 5px;
        }


        .time-controls {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 20px;
            direction: ltr;
            width: 100%;
            margin-bottom: 22px;
        }


        .control-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 115px;
        }


        .control-label {
            font-size: 13px;
            color: #777;
            margin-bottom: 2px;
        }


        .control-buttons {
            display: flex;
            gap: 8px;
            direction: ltr;
        }


        .control-button {
            width: 48px;
            height: 42px;
            border: none;
            border-radius: 10px;
            background: #f0f0f0;
            font-size: 23px;
            cursor: pointer;
            transition: 0.15s;
        }


        .control-button:hover {
            background: #e3e3e3;
        }


        .control-button:active {
            transform: scale(0.95);
        }


        /* =========================
           AVAILABILITY
        ========================= */

        .availability {
            width: 100%;
            text-align: center;
            border-radius: 12px;
            padding: 13px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.6;
        }


        .availability.available {
            background: #ecfdf3;
            color: #067647;
        }


        .availability.unavailable {
            background: #fff1f0;
            color: #b42318;
        }


        .availability.loading {
            background: #f7f7f7;
            color: #777;
        }


        /* =========================
           BUTTONS
        ========================= */

        .confirm-button,
        .submit-booking-button {
            width: 100%;
            border: none;
            border-radius: 13px;
            padding: 15px;
            background: #222;
            color: white;
            font-family: inherit;
            font-size: 16px;
            cursor: pointer;
            transition: 0.2s;
        }


        .confirm-button:hover,
        .submit-booking-button:hover {
            background: #000;
        }


        .confirm-button:disabled,
        .submit-booking-button:disabled {
            background: #ccc;
            color: #888;
            cursor: not-allowed;
        }


        /* =========================
           CUSTOMER FORM
        ========================= */

        .customer-section {
            display: none;
        }


        .customer-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }


        .customer-description {
            color: #777;
            font-size: 13px;
            line-height: 1.7;
            margin-bottom: 22px;
        }


        .form-group {
            margin-bottom: 17px;
        }


        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: bold;
        }


        .form-input {
            width: 100%;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 12px;
            padding: 0 14px;
            font-family: inherit;
            font-size: 15px;
            outline: none;
            direction: rtl;
            transition: 0.2s;
        }


        .form-input:focus {
            border-color: #888;
            box-shadow:
                0 0 0 3px
                rgba(0, 0, 0, 0.05);
        }


        .phone-input {
            direction: ltr;
            text-align: left;
        }


        .customer-lookup-status {
            display: none;
            margin-top: 7px;
            font-size: 12px;
            line-height: 1.6;
        }


        .customer-lookup-status.loading {
            display: block;
            color: #777;
        }


        .customer-lookup-status.success {
            display: block;
            color: #067647;
        }


        .customer-lookup-status.new {
            display: block;
            color: #666;
        }


        .customer-lookup-status.error {
            display: block;
            color: #b42318;
        }


        .selected-booking {
            background: #f7f7f7;
            border-radius: 14px;
            padding: 15px;
            margin-bottom: 22px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 14px;
        }


        .selected-booking-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }


        .selected-booking-label {
            color: #777;
        }


        .selected-booking-value {
            font-weight: bold;
        }


        .form-error {
            display: none;
            background: #fff1f0;
            color: #b42318;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 13px;
            line-height: 1.6;
        }


        /* =========================
           SUCCESS
        ========================= */

        .success-section {
            display: none;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }


        .success-icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #ecfdf3;
            color: #067647;
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 18px;
        }


        .success-title {
            margin: 0 0 8px;
            font-size: 20px;
        }


        .success-message {
            color: #666;
            font-size: 14px;
            margin-bottom: 22px;
        }


        .success-info {
            width: 100%;
            background: #f7f7f7;
            border-radius: 14px;
            padding: 6px 15px;
            margin-bottom: 20px;
        }


        .success-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            padding: 13px 0;
            border-bottom:
                1px solid #e5e5e5;
            font-size: 14px;
        }


        .success-row:last-child {
            border-bottom: none;
        }


        .success-row span {
            color: #777;
        }


        .success-row strong {
            color: #222;
            text-align: left;
            word-break: break-word;
        }


        /* =========================
           ERROR
        ========================= */

        .error-message {
            display: none;
            background: #fff1f0;
            color: #b42318;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 20px;
        }


        /* =========================
           MOBILE
        ========================= */

        @media (max-width: 600px) {

            .container {
                padding: 15px;
            }


            .header h1 {
                font-size: 21px;
            }


            .date-row {
                gap: 7px;
            }


            .today-row .date-item {
                width: 125px;
            }


            .date-item {
                min-height: 95px;
                padding: 12px 6px;
            }


            .weekday {
                font-size: 11px;
            }


            .date-number {
                font-size: 14px;
            }


            .status {
                font-size: 10px;
            }


            .booking-panel {
                padding: 18px;
                border-radius: 18px;
            }


            .booking-panel-title {
                font-size: 18px;
            }


            .timeline-inner {
                min-width: 720px;
            }


            .time-number {
                width: 82px;
                font-size: 42px;
            }


            .time-separator {
                font-size: 36px;
            }


            .control-group {
                width: 105px;
            }


            .control-button {
                width: 45px;
                height: 40px;
            }

        }


        @media (max-width: 360px) {

            .date-row {
                gap: 5px;
            }


            .today-row .date-item {
                width: 115px;
            }


            .date-item {
                min-height: 90px;
                padding: 10px 4px;
            }


            .date-number {
                font-size: 13px;
            }


            .time-controls {
                gap: 10px;
            }


            .time-number {
                width: 72px;
                font-size: 38px;
            }


            .control-group {
                width: 95px;
            }


            .control-button {
                width: 42px;
            }

        }


        .otp-button {
            width: 100%;
            margin-top: 10px;
            padding: 12px 14px;
            border: 0;
            border-radius: 10px;
            background: #222;
            color: #fff;
            font-family: inherit;
            font-size: 14px;
            cursor: pointer;
        }

        .otp-button:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

    

        /* Booking flow visual prototype — Navy Premium */
        @font-face {
            font-family: "Estedad";
            src: local("Estedad");
            font-display: swap;
        }
        :root {
            --booking-navy: #142b4a;
            --booking-navy-deep: #0d1f38;
            --booking-blue: #315b91;
            --booking-ink: #17263b;
            --booking-muted: #738198;
            --booking-line: #e2e8f0;
            --booking-surface: #ffffff;
            --booking-canvas: #f3f6fb;
            --booking-soft: #edf3fa;
            --booking-green: #16845b;
            --booking-red: #d94b58;
            --booking-radius: 22px;
        }
        html { scroll-behavior: smooth; }
        body {
            min-height: 100vh;
            padding: 34px 18px 64px;
            background:
                radial-gradient(ellipse at 85% 0%, rgba(49,91,145,.10), transparent 34rem),
                var(--booking-canvas);
            color: var(--booking-ink);
            font-family: "Estedad", Tahoma, Arial, sans-serif;
            line-height: 1.8;
        }
        .container {
            max-width: 760px;
            padding: 0;
        }
        .header {
            position: relative;
            overflow: hidden;
            margin: 0 0 22px;
            padding: 28px 30px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: var(--booking-radius);
            background: linear-gradient(130deg, var(--booking-navy-deep), var(--booking-navy) 65%, #294d79);
            color: #fff;
            box-shadow: 0 18px 42px rgba(17,39,68,.16);
        }
        .header::after {
            content: "";
            position: absolute;
            width: 220px; height: 220px;
            left: -72px; top: -112px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025);
            pointer-events: none;
        }
        .header h1 {
            position: relative;
            z-index: 1;
            margin: 0 0 8px;
            color: #fff;
            font-size: clamp(23px, 4vw, 30px);
            font-weight: 800;
            letter-spacing: -.4px;
        }
        .service-name {
            position: relative;
            z-index: 1;
            color: rgba(255,255,255,.78);
            font-size: 13px;
            line-height: 2;
        }
        .date-section {
            gap: 18px;
            padding: 24px;
            border: 1px solid var(--booking-line);
            border-radius: var(--booking-radius);
            background: var(--booking-surface);
            box-shadow: 0 12px 32px rgba(24,45,74,.06);
        }
        .date-section::before {
            content: "روز موردنظرت رو انتخاب کن";
            display: block;
            margin: 0 0 2px;
            color: var(--booking-ink);
            font-size: 17px;
            font-weight: 800;
        }
        .date-row { gap: 12px; }
        .today-row { padding-top: 26px; }
        .today-row::before {
            color: var(--booking-blue);
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
        }
        .date-item {
            min-height: 104px;
            padding: 13px 8px;
            border: 1px solid var(--booking-line);
            border-radius: 16px;
            font-family: inherit;
            transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .date-item.available {
            color: var(--booking-ink);
            background: #fff;
            box-shadow: 0 3px 10px rgba(20,43,74,.035);
        }
        .date-item.available:hover {
            transform: translateY(-3px);
            border-color: #8ca8c9;
            background: #f8fbff;
            box-shadow: 0 9px 20px rgba(20,43,74,.10);
        }
        .date-item.available:focus-visible {
            outline: 3px solid rgba(49,91,145,.25);
            outline-offset: 2px;
        }
        .date-item.unavailable {
            border: 1px dashed #dce2ea;
            background: #f5f7fa;
            color: #a4adba;
        }
        .weekday { color: var(--booking-muted); font-size: 12px; }
        .date-number { color: var(--booking-navy); font-size: 17px; font-weight: 800; }
        .status { font-size: 11px; font-weight: 700; }
        .available .status { color: var(--booking-green); }
        .unavailable .status { color: #9aa4b2; }
        .additional-dates-section { margin-top: 8px; }
        .additional-dates-title {
            margin-bottom: 12px;
            color: var(--booking-muted);
            font-size: 13px;
            font-weight: 700;
        }
        .additional-dates-grid { gap: 12px; }
        .booking-panel {
            max-width: 760px;
            margin: 22px auto 0;
            padding: 26px;
            border: 1px solid var(--booking-line);
            border-radius: var(--booking-radius);
            background: var(--booking-surface);
            box-shadow: 0 16px 38px rgba(24,45,74,.08);
            scroll-margin-top: 22px;
        }
        .booking-panel.active { animation: bookingPanelShow .28s cubic-bezier(.2,.75,.25,1); }
        .booking-panel-header {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--booking-line);
        }
        .booking-panel-title { color: var(--booking-navy); font-size: 20px; font-weight: 800; }
        .booking-panel-close {
            border: 1px solid var(--booking-line);
            background: var(--booking-soft);
            color: var(--booking-navy);
            font-family: inherit;
        }
        .booking-panel-close:hover { background: #e1eaf5; }
        .timeline-track { background: #e8f3ee; border-color: #cce5d8; }
        .timeline-booked { background: var(--booking-red); }
        .timeline-selected { background: rgba(22,132,91,.22); border-color: var(--booking-green); }
        .timeline-selected-label { color: var(--booking-green); font-family: inherit; }
        .timeline-legend { font-family: inherit; }
        .availability { border: 1px solid transparent; font-family: inherit; }
        .availability.available { background: #eaf7f1; color: #116b4a; }
        .availability.unavailable { background: #fff1f2; color: #a83240; }
        .confirm-button, .submit-booking-button, .otp-button {
            border-radius: 13px;
            background: linear-gradient(135deg, var(--booking-navy), #244a78);
            box-shadow: 0 7px 16px rgba(20,43,74,.16);
            font-family: inherit;
            font-weight: 700;
            transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
        }
        .confirm-button:hover, .submit-booking-button:hover, .otp-button:hover {
            background: linear-gradient(135deg, var(--booking-navy-deep), var(--booking-blue));
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(20,43,74,.20);
        }
        .confirm-button:disabled, .submit-booking-button:disabled {
            background: #d8dee7;
            color: #8792a2;
            box-shadow: none;
            transform: none;
        }
        .form-input {
            border-color: #dce3ec;
            border-radius: 12px;
            background: #fbfcfe;
            font-family: inherit;
        }
        .form-input:focus {
            border-color: #6f91ba;
            box-shadow: 0 0 0 4px rgba(49,91,145,.10);
        }
        .selected-booking, .success-info {
            border: 1px solid var(--booking-line);
            background: #f5f8fc;
        }
        .customer-title, .success-title { color: var(--booking-navy); font-weight: 800; }
        .success-icon { background: #e8f6ef; color: var(--booking-green); }
        .success-row strong { color: var(--booking-navy); }
        .error-message, .form-error { border: 1px solid #f2c9ce; }
        @media (max-width: 600px) {
            body { padding: 16px 12px 42px; }
            .header { padding: 22px 20px; border-radius: 19px; }
            .date-section { padding: 16px 12px; border-radius: 19px; }
            .date-row { gap: 7px; }
            .date-item { min-height: 94px; border-radius: 13px; }
            .date-number { font-size: 15px; }
            .booking-panel { margin-top: 16px; padding: 18px 14px; border-radius: 19px; }
            .booking-panel-title { font-size: 17px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
        }


        /* Date and time picker redesign — interaction-focused */
        .date-section { gap: 20px; padding: 26px; }
        .date-section::before { content: "چه روزی برات مناسب‌تره؟"; margin-bottom: 0; font-size: 19px; letter-spacing: -.2px; }
        .date-row { align-items: stretch; gap: 12px; }
        .date-row .date-item, .additional-dates-grid .date-item {
            position: relative; min-height: 116px; padding: 16px 10px 13px;
            border: 1px solid var(--booking-line); border-radius: 18px;
            background: #fff; box-shadow: 0 5px 14px rgba(20,43,74,.045);
        }
        .today-row .date-item { min-height: 116px; width: 168px; }
        .date-item.available { border-color: #d7e1ed; background: linear-gradient(155deg,#fff 45%,#f5f8fc); }
        .date-item.available::after {
            content: ""; position: absolute; inset: auto 15px 0; height: 3px;
            border-radius: 3px 3px 0 0; background: transparent; transition: background .18s ease;
        }
        .date-item.available:hover::after, .date-item.available:focus-visible::after { background: var(--booking-blue); }
        .date-item.available:focus-visible { outline: 3px solid rgba(49,91,145,.2); outline-offset: 2px; }
        .date-item.unavailable { border: 1px dashed #dce2ea; background: #f5f7fa; color: #a4adba; }
        .date-content { gap: 13px; }
        .date-main { gap: 7px; }
        .weekday { font-size: 12px; font-weight: 600; }
        .date-number { font-size: 18px; line-height: 1.5; }
        .status { padding: 4px 10px; border-radius: 999px; background: #eaf6f0; color: #14734f; font-size: 11px; }
        .unavailable .status { background: #f0f2f5; color: #8993a1; }
        .today-row::before { padding: 2px 12px; border-radius: 999px; background: #eaf0f8; color: var(--booking-blue); }
        .additional-dates-section { margin-top: 8px; }
        .additional-dates-title { padding-top: 8px; font-size: 14px; }
        .additional-dates-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
        .booking-panel { padding: 28px; border-radius: 24px; }
        .booking-panel-header { margin-bottom: 22px; }
        .booking-panel-title { font-size: 21px; }
        .modal-info {
            display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 20px;
            padding: 13px 16px; border: 1px solid #e4eaf2; border-radius: 14px;
            background: #f6f8fb; color: var(--booking-muted); font-size: 13px;
        }
        .modal-info strong { color: var(--booking-ink); }
        .clock-section { align-items: stretch; gap: 0; }
        .clock-title { margin: 0 0 16px; color: var(--booking-ink); font-size: 16px; font-weight: 800; text-align: right; }
        .timeline-wrapper { margin: 0 0 18px; padding: 15px 15px 10px; border: 1px solid #e3eaf2; border-radius: 17px; background: #f8fafd; }
        .timeline-scroll { padding: 30px 5px 35px; scrollbar-color: #b8c7d9 #edf1f6; scrollbar-width: thin; }
        .timeline-inner { min-width: 680px; height: 112px; }
        .timeline-track { top: 34px; height: 48px; border-radius: 12px; background: #e7f2ed; border: 1px solid #c9e2d5; }
        .timeline-grid-line, .timeline-half-line, .timeline-slot { height: 48px; }
        .timeline-booked { height: 48px; border-radius: 7px; }
        .timeline-selected { top: 29px; height: 58px; border-radius: 11px; box-shadow: 0 3px 10px rgba(22,132,91,.14); }
        .timeline-selected-label { top: -31px; padding: 3px 9px; border: 1px solid #d6eadf; background: #f2faf6; font-size: 11px; }
        .timeline-label { top: 89px; color: #68778b; font-size: 11px; font-weight: 600; }
        .timeline-legend { justify-content: flex-start; gap: 18px; margin: 2px 4px 0; color: #637187; font-size: 12px; }
        .legend-color { width: 10px; height: 10px; border-radius: 3px; }
        .clock {
            width: fit-content; margin: 0 auto 18px; padding: 13px 22px;
            border: 1px solid #e0e8f1; border-radius: 18px;
            background: linear-gradient(145deg,#fff,#f4f7fb); box-shadow: 0 7px 18px rgba(20,43,74,.06);
        }
        .time-number { width: 74px; color: var(--booking-navy); font-size: 43px; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
        .time-separator { color: #8a9bb0; font-size: 36px; }
        .time-controls { gap: 14px; margin-bottom: 18px; }
        .control-group { width: min(190px,46%); gap: 9px; padding: 12px; border: 1px solid #e5ebf2; border-radius: 15px; background: #fbfcfe; }
        .control-label { color: #637187; font-weight: 700; }
        .control-buttons { gap: 10px; }
        .control-button { width: 48px; height: 44px; border: 1px solid #dce5ef; border-radius: 12px; background: #edf2f8; color: var(--booking-navy); font-size: 23px; font-weight: 700; }
        .control-button:hover { border-color: #a9bdd5; background: #e1eaf5; }
        .availability { margin: 0 0 16px; padding: 12px 15px; border-radius: 13px; font-weight: 700; }
        .confirm-button { min-height: 52px; font-size: 15px; }
        @media (max-width: 600px) {
            .date-section { gap: 16px; padding: 18px 12px; }
            .date-section::before { font-size: 17px; }
            .date-row { gap: 7px; }
            .date-row .date-item, .additional-dates-grid .date-item { min-height: 103px; padding: 12px 5px; }
            .today-row .date-item { width: 145px; }
            .date-number { font-size: 15px; }
            .status { padding: 3px 7px; font-size: 10px; }
            .additional-dates-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
            .booking-panel { padding: 20px 13px; }
            .modal-info { gap: 8px 14px; padding: 11px 12px; }
            .timeline-wrapper { padding: 12px 8px 9px; }
            .timeline-scroll { padding-right: 2px; padding-left: 2px; }
            .timeline-legend { justify-content: center; gap: 12px; font-size: 11px; }
            .clock { padding: 11px 17px; }
            .time-number { width: 65px; font-size: 39px; }
            .control-group { padding: 10px 6px; }
            .control-button { width: 42px; height: 40px; }
        }

    
        /* Full-width date and time selection redesign */
        .container { max-width: 1240px; width: 100%; padding: 0; }
        .date-section {
            display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
            align-items: stretch; gap: 12px; padding: 26px;
        }
        .date-section::before { grid-column: 1 / -1; }
        .date-row, .additional-dates-section, .additional-dates-grid { display: contents; }
        .date-row .date-item, .additional-dates-grid .date-item,
        .today-row .date-item {
            width: 100%; min-width: 0; min-height: 112px;
        }
        .today-row { padding-top: 0; }
        .today-row::before { display: none; }
        .date-item { border: 1px solid var(--booking-line); }
        .date-item.available { cursor: pointer; }
        .date-item.unavailable { opacity: .72; }
        .additional-dates-title { display: none; }
        .booking-panel { width: 100%; max-width: none; margin: 24px 0 0; }
        .clock, .time-controls, .timeline-wrapper { display: none !important; }
        .clock-section { align-items: stretch; }
        .time-slots-heading {
            margin: 4px 0 14px; color: var(--booking-ink);
            font-size: 16px; font-weight: 800;
        }
        .time-slots-grid {
            display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 12px; margin-bottom: 18px;
        }
        .time-slot-button {
            min-height: 54px; border: 1px solid #dbe5f0; border-radius: 13px;
            background: #fff; color: var(--booking-navy); font: inherit;
            font-size: 15px; font-weight: 750; direction: ltr; cursor: pointer;
            transition: .16s ease;
        }
        .time-slot-button:hover { border-color: #7897bd; background: #f4f8fd; transform: translateY(-1px); }
        .time-slot-button.selected {
            border-color: var(--booking-navy); background: var(--booking-navy);
            color: #fff; box-shadow: 0 5px 14px rgba(20,43,74,.16);
        }
        .time-slot-button:focus-visible { outline: 3px solid rgba(49,91,145,.25); outline-offset: 2px; }
        .time-slots-empty {
            grid-column: 1 / -1; padding: 24px; border: 1px dashed #d5deea;
            border-radius: 14px; color: var(--booking-muted); text-align: center;
            background: #f8fafd;
        }
        @media (max-width: 900px) {
            .date-section { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .time-slots-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        @media (max-width: 600px) {
            body { padding: 16px 12px 42px; }
            .container { max-width: none; }
            .date-section { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 12px; gap: 8px; }
            .date-row .date-item, .additional-dates-grid .date-item, .today-row .date-item {
                min-height: 96px; padding: 10px 5px;
            }
            .time-slots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
            .time-slot-button { min-height: 50px; }
            .booking-panel { padding: 20px 14px; }
        }
        @media (max-width: 360px) {
            .date-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .time-slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

    
        /* Appointment picker: calendar + availability side by side */
        body { background: var(--surface, #f4f6fa); color: var(--text-primary, #172b4d); }
        .container { max-width: 1440px; width: min(100% - 48px, 1440px); padding: 34px 0 56px; }
        .header { margin-bottom: 26px; padding: 22px 26px; border: 1px solid var(--border, #e3e8f0); border-radius: 20px; background: var(--surface-card, #fff); }
        .header h1 { font-size: 25px; font-weight: 800; color: var(--text-primary, #172b4d); }
        .service-name { color: var(--text-secondary, #66758b); line-height: 1.9; }
        .booking-layout {
            display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
            gap: 22px; align-items: stretch; direction: rtl;
        }
        .calendar-column, .times-column {
            min-width: 0; padding: 24px; border: 1px solid var(--border, #e3e8f0);
            border-radius: 22px; background: var(--surface-card, #fff);
            box-shadow: 0 8px 28px rgba(20, 43, 74, .055);
        }
        .selection-heading { margin-bottom: 22px; }
        .selection-kicker { display: inline-block; margin-bottom: 8px; color: var(--accent, #55749d); font-size: 12px; font-weight: 800; }
        .selection-heading h2 { margin: 0 0 7px; font-size: 19px; font-weight: 800; color: var(--text-primary, #172b4d); }
        .selection-heading p { margin: 0; color: var(--text-secondary, #718096); font-size: 13px; line-height: 1.9; }
        .calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; color: var(--text-secondary,#77859a); text-align: center; font-size: 12px; font-weight: 700; }
        .date-section { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; }
        .date-row, .additional-dates-section, .additional-dates-grid { display: contents; }
        .today-row { padding: 0; }
        .today-row::before, .additional-dates-title { display: none; }
        .date-item, .today-row .date-item, .date-row .date-item, .date-row .date-item, .additional-dates-grid .date-item {
            width: 100%; min-width: 0; min-height: 88px; padding: 10px 5px;
            border: 1px solid var(--border,#e3e8f0); border-radius: 13px;
            box-shadow: none; background: var(--surface-subtle,#f8fafd);
        }
        .date-item.available { background: #fff; color: var(--text-primary,#172b4d); cursor: pointer; }
        .date-item.available:hover { transform: translateY(-2px); border-color: var(--accent,#55749d); box-shadow: 0 5px 16px rgba(20,43,74,.09); }
        .date-item.available.is-selected { border: 2px solid var(--primary,#203b60); background: #edf3fa; box-shadow: 0 0 0 3px rgba(32,59,96,.08); }
        .date-item.unavailable { background: #f2f4f7; color: #a1aab7; opacity: .8; }
        .date-content { gap: 8px; }
        .weekday { font-size: 11px; color: var(--text-secondary,#718096); }
        .date-number { font-size: 15px; font-weight: 800; line-height: 1.6; }
        .status { font-size: 10px; line-height: 1.5; }
        .available .status { color: #25805b; }
        .unavailable .status { color: #929baa; }
        .times-column { display: flex; flex-direction: column; }
        .booking-panel { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
        .booking-panel-header { display: none !important; }
        .no-date-selected { display: flex; min-height: 290px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; border: 1px dashed var(--border,#dce3ed); border-radius: 18px; background: var(--surface-subtle,#f8fafd); text-align: center; color: var(--text-secondary,#718096); }
        .no-date-selected strong { color: var(--text-primary,#203b60); font-size: 15px; }
        .no-date-selected span { max-width: 280px; font-size: 13px; line-height: 1.9; }
        .empty-calendar-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #eaf0f7; color: var(--primary,#203b60); font-size: 28px; }
        .clock-section { display: none; align-items: stretch; }
        .clock-title, .clock, .time-controls, .timeline-wrapper { display: none !important; }
        .time-slots-heading { margin: 0 0 14px; color: var(--text-primary,#203b60); font-size: 14px; font-weight: 800; }
        .time-slots-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
        .time-period { padding-bottom: 15px; border-bottom: 1px solid var(--border,#e7ebf1); }
        .time-period:last-child { border-bottom: 0; padding-bottom: 0; }
        .time-period-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .time-period-heading > span:last-child { display: flex; flex-direction: column; gap: 2px; }
        .time-period-heading strong { color: var(--text-primary,#203b60); font-size: 13px; }
        .time-period-heading small { color: var(--text-secondary,#8994a4); font-size: 11px; }
        .time-period-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #edf2f8; color: var(--primary,#203b60); }
        .time-period-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
        .time-slot-button { min-height: 46px; padding: 8px 4px; border: 1px solid var(--border,#dfe6ef); border-radius: 11px; background: #fff; color: var(--text-primary,#203b60); font: inherit; font-size: 13px; font-weight: 750; direction: ltr; cursor: pointer; transition: .16s ease; }
        .time-slot-button:hover { border-color: var(--primary,#203b60); background: #f2f6fb; }
        .time-slot-button.selected { border-color: var(--primary,#203b60); background: var(--primary,#203b60); color: #fff; box-shadow: 0 4px 12px rgba(32,59,96,.17); }
        .time-slots-empty { padding: 22px; border: 1px dashed var(--border,#dfe6ef); border-radius: 14px; color: var(--text-secondary,#718096); text-align: center; }
        .loading { color: var(--text-secondary,#718096); }
        .confirm-button, .submit-booking-button { background: var(--primary,#203b60); }
        .confirm-button:hover, .submit-booking-button:hover { background: #152b49; }
        @media (max-width: 900px) {
            .container { width: min(100% - 32px, 760px); padding-top: 18px; }
            .booking-layout { grid-template-columns: 1fr; }
            .date-section { grid-template-columns: repeat(7,minmax(0,1fr)); }
            .calendar-column, .times-column { padding: 20px; }
        }
        @media (max-width: 560px) {
            .container { width: calc(100% - 24px); padding: 12px 0 32px; }
            .header { padding: 18px 16px; }
            .date-section { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
            .calendar-weekdays { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
            .calendar-weekdays span:nth-child(n+5) { display: none; }
            .date-item, .today-row .date-item, .date-row .date-item, .additional-dates-grid .date-item { min-height: 78px; }
            .time-period-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
        }
        @media (max-width: 360px) {
            .date-section { grid-template-columns: repeat(3,minmax(0,1fr)); }
            .calendar-weekdays { grid-template-columns: repeat(3,minmax(0,1fr)); }
            .calendar-weekdays span:nth-child(n+4) { display: none; }
        }


        /* Customer-first booking experience refinement */
        .booking-context-card { display:grid; grid-template-columns:minmax(210px,.85fr) 1px minmax(0,1.5fr) auto; align-items:center; gap:22px; margin:0 0 22px; padding:20px 24px; border:1px solid var(--border,#e3e8f0); border-radius:20px; background:var(--surface-card,#fff); box-shadow:0 8px 28px rgba(20,43,74,.045); }
        .booking-context-business { display:flex; align-items:center; gap:13px; min-width:0; }
        .context-mark { display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:15px; background:linear-gradient(145deg,#203b60,#365b87); color:#fff; font-size:20px; font-weight:800; }
        .booking-context-business > div,.context-service-heading { display:flex; flex-direction:column; gap:4px; min-width:0; }
        .booking-context-card strong { color:var(--text-primary,#172b4d); font-size:15px; }
        .context-eyebrow { color:var(--text-secondary,#8491a3); font-size:11px; font-weight:700; }
        .booking-context-business a { color:var(--accent,#55749d); font-size:11px; text-decoration:none; }
        .booking-context-divider { width:1px; height:48px; background:var(--border,#e3e8f0); }
        .context-service-facts { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; color:var(--text-secondary,#66758b); font-size:12px; }
        .context-change-link { white-space:nowrap; color:var(--primary,#203b60); font-size:12px; font-weight:800; text-decoration:none; padding:10px 13px; border:1px solid var(--border,#dfe6ef); border-radius:11px; }
        .context-change-link:hover { background:var(--surface-subtle,#f7f9fc); }
        .time-period-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
        .time-slot-button { min-height:42px; border-radius:10px; font-size:12px; }
        .time-slot-extra { display:none; }
        .time-period.is-expanded .time-slot-extra { display:block; }
        .time-period-more { margin-top:9px; padding:5px 0; border:0; background:transparent; color:var(--accent,#55749d); font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
        .no-date-selected { min-height:330px; }
        @media(max-width:900px) { .booking-context-card { grid-template-columns:minmax(0,1fr) auto; gap:14px; } .booking-context-divider { display:none; } .booking-context-service { grid-column:1; } .context-change-link { grid-column:2; grid-row:1 / span 2; } }
        @media(max-width:560px) { .booking-context-card { grid-template-columns:1fr; padding:16px; gap:13px; } .booking-context-service,.context-change-link { grid-column:auto; grid-row:auto; } .context-change-link { justify-self:start; } .time-period-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }


        .time-slot-extra,.time-period-more { display:none !important; }
        .time-period-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
        .success-section { width:min(100%,760px); max-height:82vh; overflow-y:auto; }
        .success-receipt { width:100%; margin:16px 0; border:1px solid var(--border,#e1e7ef); border-radius:18px; background:#fff; color:#172b4d; text-align:right; overflow:hidden; }
        .receipt-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:#f2f5f9; color:#203b60; font-size:13px; font-weight:800; }
        .receipt-heading strong { font-size:11px; color:#68788d; direction:ltr; }
        .receipt-appointment { padding:18px; }
        .receipt-date-time { padding:14px; border-radius:13px; background:#edf3f9; }
        .receipt-date-time > span,.receipt-facts span,.receipt-eyebrow { display:block; color:#718096; font-size:11px; margin-bottom:6px; }
        .receipt-date-time strong { display:flex; flex-wrap:wrap; gap:12px; color:#203b60; font-size:16px; }
        .receipt-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin-top:18px; }
        .receipt-facts strong { display:block; color:#203047; font-size:13px; overflow-wrap:anywhere; }
        .receipt-business { padding:17px 18px 19px; border-top:1px solid #e6ebf1; background:#fbfcfe; }
        .receipt-business h4 { margin:0 0 10px; color:#172b4d; font-size:16px; }
        .receipt-business p { margin:10px 0; color:#56657a; font-size:12px; line-height:1.9; }
        .receipt-contact-link,.receipt-map-link { display:inline-flex; align-items:center; margin:4px 0; padding:9px 12px; border:1px solid #dce4ee; border-radius:10px; color:#203b60; text-decoration:none; font-size:12px; font-weight:750; }
        .receipt-map-link { margin-right:7px; background:#203b60; color:#fff; border-color:#203b60; }
        @media(max-width:560px) { .success-section { max-height:86vh; padding:16px; } .receipt-facts { grid-template-columns:1fr 1fr; gap:12px; } .receipt-date-time strong { font-size:14px; } }
        @media print { .success-section { max-height:none; overflow:visible; } .confirm-button { display:none !important; } }


        /* Final date/time picker: visible occupancy and high-contrast selection */
        .time-slots-heading { display: none; }
        .time-slots-grid { display:flex; flex-direction:column; gap:17px; }
        .time-period { padding:0 0 16px; margin:0; border-bottom:1px solid #e5e9ef; }
        .time-period:last-child { border-bottom:0; padding-bottom:0; }
        .time-period-heading { display:flex; justify-content:space-between; gap:10px; margin:0 0 10px; }
        .time-period-heading .time-period-icon { display:none; }
        .time-period-heading > span:last-child { display:block; }
        .time-period-heading strong { font-size:13px; color:#536276; }
        .time-period-heading small { display:none; }
        .time-period-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
        .time-slot-button {
            min-height:56px; padding:8px 5px; border:1px solid #dce8e2;
            border-radius:14px; background:#fff; color:#16845b;
            font-family:inherit; font-size:14px; font-weight:800;
            direction:ltr; font-variant-numeric:tabular-nums;
        }
        .time-slot-button:hover:not(:disabled) { border-color:#16845b; background:#f0f8f4; }
        .time-slot-button.selected,
        .time-slot-button.selected:focus,
        .time-slot-button.selected:hover {
            border:1px solid #16845b !important; background:#16845b !important;
            color:#fff !important; -webkit-text-fill-color:#fff !important;
            opacity:1 !important; text-shadow:none !important;
            box-shadow:0 4px 12px rgba(22,132,91,.2);
        }
        .time-slot-button.booked {
            background:#f0f2f5; border-color:#e6e9ed; color:#9aa4b1;
            text-decoration:line-through; cursor:not-allowed; opacity:1;
        }
        .time-slot-button.past {
            background:#fafafa; border-color:#eef0f3; color:#c0c7d0;
            cursor:not-allowed; opacity:1;
        }
        .time-slot-button.unavailable {
            background:#f5f6f8; border-color:#eceff2; color:#aab2bd;
            cursor:not-allowed; opacity:1;
        }
        .time-slot-button:disabled { pointer-events:none; }
        .timeline-wrapper,.clock,.time-controls { display:none !important; }
        .clock-section { align-items:stretch; }
        .confirm-button { margin-top:4px; }
        @media(max-width:900px) {
            .booking-layout { grid-template-columns:1fr; }
        }
        @media(max-width:560px) {
            .time-period-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
            .time-slot-button { min-height:58px; border-radius:14px; font-size:14px; }
        }

    
        /* Desktop: balanced two-column layout with an independently scrollable slot list */
        @media (min-width: 901px) {
            .booking-layout { align-items: stretch; }
            .calendar-column,
            .times-column {
                height: clamp(440px, calc(100vh - 420px), 560px);
                min-height: 440px;
            }
            .times-column { min-height: 0; overflow: hidden; }
            .times-column > .selection-heading { flex: 0 0 auto; margin-bottom: 14px; }
            .times-column > #bookingPanel { flex: 1 1 auto; min-height: 0; overflow: hidden; }
            #bookingPanel > #clockSection {
                display: none;
                flex-direction: column;
                align-items: stretch;
                height: 100%;
                min-height: 0;
                overflow: hidden;
            }
            #clockSection > #timeSlotsGrid {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                overscroll-behavior: contain;
                scrollbar-width: thin;
                scrollbar-color: #c5d0dc #f1f4f7;
                padding: 2px 5px 12px 2px;
                margin: 0 0 10px;
            }
            #clockSection > #availabilityStatus,
            #clockSection > #confirmButton {
                flex: 0 0 auto;
            }
            #clockSection > #availabilityStatus {
                margin: 0 0 10px;
                padding: 10px 12px;
                text-align: center;
                font-size: 12px;
            }
            #clockSection > #confirmButton {
                position: sticky;
                bottom: 0;
                width: 100%;
                z-index: 2;
                margin-top: 0;
                box-shadow: 0 -5px 14px rgba(255,255,255,.9);
            }
            .time-period-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
            .time-slot-button { min-height: 44px; }
            /* Once the customer details step opens, let its form use the page height. */
            .times-column:has(#customerSection[style*="display: block"]) {
                height: auto;
                min-height: 560px;
                overflow: visible;
            }
            .times-column:has(#customerSection[style*="display: block"]) > #bookingPanel {
                overflow: visible;
            }
        }

        /* Tablet and phone: calendar first, then all times in normal page flow.
           No nested scroll area on small screens; keep exactly three columns. */
        @media (max-width: 900px) {
            .booking-layout { grid-template-columns: minmax(0,1fr); align-items: start; }
            .calendar-column,
            .times-column {
                height: auto;
                min-height: 0;
                overflow: visible;
            }
            .times-column > #bookingPanel,
            #bookingPanel > #clockSection {
                height: auto;
                min-height: 0;
                overflow: visible;
            }
            #clockSection > #timeSlotsGrid {
                display: flex;
                flex: initial;
                min-height: 0;
                max-height: none;
                overflow: visible;
                padding: 0;
                margin-bottom: 18px;
            }
            #clockSection > #availabilityStatus,
            #clockSection > #confirmButton { position: static; }
            .time-period-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
        }

    
        /* Make the selected service details easier to notice at a glance */
        .booking-context-card {
            grid-template-columns:minmax(210px,.78fr) 1px minmax(0,1.8fr) auto;
            gap:24px;
            padding:23px 26px;
        }
        .booking-context-service {
            min-width:0;
            padding:13px 18px;
            border-radius:14px;
            background:var(--surface-subtle,#f6f8fb);
        }
        .context-service-heading { gap:6px; }
        .booking-context-service .context-eyebrow { font-size:12px; }
        .booking-context-service .context-service-heading strong {
            font-size:19px;
            line-height:1.6;
            font-weight:800;
        }
        .booking-context-service .context-service-facts {
            gap:9px 22px;
            margin-top:10px;
            font-size:13px;
            line-height:1.7;
        }
        .booking-context-divider { height:66px; }
        @media(max-width:900px) {
            .booking-context-card {
                grid-template-columns:minmax(0,1fr) auto;
                gap:12px 16px;
            }
            .booking-context-service { padding:12px 14px; }
            .booking-context-service .context-service-heading strong { font-size:17px; }
            .booking-context-service .context-service-facts { font-size:12px; }
        }
        @media(max-width:560px) {
            .booking-context-card { padding:16px; }
            .booking-context-service { padding:12px; }
            .booking-context-service .context-service-heading strong { font-size:17px; }
            .booking-context-service .context-service-facts { font-size:12px; gap:7px 14px; }
        }

    
        /* Real Jalali month calendar */
        .calendar-month-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:4px 0 18px; }
        .calendar-month-title { color:var(--text-primary,#172b4d); font-size:18px; font-weight:850; text-align:center; }
        .calendar-month-nav { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--border,#e3e8f0); border-radius:12px; background:#fff; color:var(--primary,#203b60); font:inherit; font-size:23px; cursor:pointer; }
        .calendar-month-nav:disabled { opacity:.3; cursor:not-allowed; }
        .calendar-weekdays { grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
        .jalali-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; direction:rtl; }
        .calendar-day-spacer { min-width:0; min-height:82px; }
        .calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:82px; padding:8px 3px; border:1px solid var(--border,#e3e8f0); border-radius:13px; background:#f3f5f8; color:#a0a9b7; font:inherit; }
        button.calendar-day.available { border-color:#dce9e3; background:#fff; color:var(--text-primary,#172b4d); cursor:pointer; }
        button.calendar-day.available:hover { border-color:#19845f; background:#f0f8f4; }
        button.calendar-day.available.is-selected { border:2px solid var(--primary,#203b60); background:#203b60; color:#fff; box-shadow:0 4px 12px rgba(32,59,96,.16); }
        .calendar-day.is-today:not(.is-selected) { outline:2px solid #dce6f2; outline-offset:-3px; }
        .calendar-day-number { font-size:17px; line-height:1.2; font-weight:850; }
        .calendar-day-status { min-height:17px; font-size:10px; line-height:1.5; white-space:nowrap; }
        .calendar-day.available .calendar-day-status { color:#23815c; }
        .calendar-day.available.is-selected .calendar-day-status { color:#e7f5ee; }
        .calendar-day.unavailable .calendar-day-status { color:#9aa4b2; }
        .calendar-legend { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:17px; color:var(--text-secondary,#718096); font-size:11px; }
        .calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
        .legend-dot { width:9px; height:9px; border-radius:50%; background:#e7ebf0; }
        .legend-available { background:#23815c; }
        .legend-selected { background:#203b60; }
        .legend-disabled { background:#d8dee7; }
        @media(max-width:560px) {
            .calendar-weekdays,.jalali-calendar-grid { gap:5px; }
            .calendar-day,.calendar-day-spacer { min-height:67px; }
            .calendar-day-number { font-size:15px; }
            .calendar-day-status { font-size:9px; }
            .calendar-month-title { font-size:16px; }
        }

    
        /* Compact monthly calendar: keep the complete month visible without page scrolling */
        .booking-layout {
            grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
            gap:18px;
        }
        .calendar-column { padding:18px; }
        .calendar-column > .selection-heading { margin-bottom:12px; }
        .calendar-column > .selection-heading .selection-kicker { margin-bottom:4px; }
        .calendar-column > .selection-heading h2 { font-size:17px; margin-bottom:4px; }
        .calendar-column > .selection-heading p { font-size:11px; line-height:1.6; }
        .calendar-month-toolbar { margin:0 0 10px; }
        .calendar-month-title { font-size:16px; }
        .calendar-month-nav { width:32px; height:32px; border-radius:10px; font-size:20px; }
        .calendar-weekdays { gap:5px; margin-bottom:6px; font-size:10px; }
        .jalali-calendar-grid { gap:5px; }
        .calendar-day,.calendar-day-spacer {
            min-height:54px;
            height:54px;
            border-radius:10px;
            gap:3px;
            padding:4px 2px;
        }
        .calendar-day-number { font-size:14px; }
        .calendar-day-status { font-size:9px; min-height:13px; }
        .calendar-legend { gap:8px 12px; margin-top:10px; font-size:10px; }
        @media(min-width:901px) {
            .calendar-column { height:auto; min-height:0; }
            .booking-layout { align-items:stretch; }
        }
        @media(max-width:900px) {
            .booking-layout { grid-template-columns:minmax(0,1fr); }
            .calendar-column { padding:18px; }
            .calendar-day,.calendar-day-spacer { min-height:58px; height:58px; }
        }
        @media(max-width:560px) {
            .calendar-column { padding:14px; }
            .calendar-day,.calendar-day-spacer { min-height:48px; height:48px; }
            .calendar-day-number { font-size:13px; }
            .calendar-day-status { font-size:8px; }
        }

    
        /* Desktop: both booking steps share one height; keep the action reachable */
        @media (min-width: 901px) {
            .booking-layout {
                grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
                align-items:stretch;
            }
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                box-sizing:border-box;
                height:clamp(560px, calc(100vh - 300px), 680px);
                min-height:560px;
                max-height:680px;
            }
            .booking-layout > .calendar-column {
                display:flex;
                flex-direction:column;
                overflow:visible;
            }
            .booking-layout > .times-column {
                display:flex;
                flex-direction:column;
                min-height:0;
                overflow:hidden;
            }
            .times-column > #bookingPanel {
                display:flex;
                flex:1 1 auto;
                flex-direction:column;
                min-height:0;
                overflow:hidden;
            }
            #bookingPanel > #clockSection {
                display:none;
                flex:1 1 auto;
                flex-direction:column;
                align-items:stretch;
                min-height:0;
                height:auto;
                overflow:hidden;
            }
            #clockSection > #timeSlotsGrid {
                flex:1 1 auto;
                min-height:0;
                max-height:none;
                overflow-y:auto;
                overscroll-behavior:contain;
                margin:0 0 12px;
                padding:2px 5px 8px 2px;
            }
            #clockSection > #availabilityStatus {
                flex:0 0 auto;
                margin:0 0 10px;
            }
            #clockSection > #confirmButton {
                display:block !important;
                position:relative;
                flex:0 0 auto;
                width:100%;
                min-height:48px;
                margin:0;
                z-index:3;
                visibility:visible;
                opacity:1;
            }
            .times-column:has(#customerSection[style*="display: block"]) {
                height:auto;
                min-height:560px;
                max-height:none;
                overflow:visible;
            }
            .times-column:has(#customerSection[style*="display: block"]) > #bookingPanel {
                overflow:visible;
            }
        }
        @media (max-width:900px) {
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                height:auto;
                max-height:none;
                min-height:0;
            }
        }

    
        /* Desktop: keep the date and time panels equal-height.
           Only the slot list scrolls; the selection message and action stay outside it. */
        @media (min-width: 901px) {
            .booking-layout {
                grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
                align-items:stretch;
            }
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                box-sizing:border-box;
                height:clamp(560px, calc(100vh - 300px), 680px);
                min-height:560px;
                max-height:680px;
            }
            .booking-layout > .calendar-column {
                display:flex;
                flex-direction:column;
            }
            .booking-layout > .times-column {
                display:flex;
                flex-direction:column;
                min-height:0;
                overflow:hidden;
            }
            .times-column > #bookingPanel {
                display:flex;
                flex:1 1 auto;
                flex-direction:column;
                min-height:0;
                overflow:hidden;
            }
            #bookingPanel > #clockSection {
                display:none;
                flex:1 1 auto;
                flex-direction:column;
                align-items:stretch;
                height:auto;
                min-height:0;
                overflow:hidden;
            }
            #clockSection > #timeSlotsGrid {
                display:flex;
                flex:1 1 auto;
                flex-direction:column;
                min-height:0;
                max-height:none;
                overflow-y:auto;
                overflow-x:hidden;
                overscroll-behavior:contain;
                scrollbar-width:thin;
                scrollbar-color:#c5d0dc #f1f4f7;
                padding:2px 5px 10px 2px;
                margin:0 0 12px;
            }
            #clockSection > #availabilityStatus {
                display:none;
                flex:0 0 auto;
                margin:0 0 10px;
                padding:10px 12px;
            }
            #clockSection > #confirmButton {
                display:none;
                position:relative;
                flex:0 0 auto;
                width:100%;
                min-height:48px;
                margin:0;
                visibility:visible;
                opacity:1;
                z-index:2;
            }
        }
        @media (max-width:900px) {
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                height:auto;
                min-height:0;
                max-height:none;
            }
            #clockSection > #timeSlotsGrid {
                overflow:visible;
                max-height:none;
            }
        }

    
        /* Canonical desktop time panel: scroll only the slots, never the action footer. */
        .time-selection-footer {
            display:none;
            flex:0 0 auto;
            flex-direction:column;
            gap:10px;
            width:100%;
            padding-top:8px;
            background:#fff;
            position:relative;
            z-index:5;
        }
        .time-selection-footer #availabilityStatus {
            display:block;
            margin:0;
            text-align:center;
        }
        .time-selection-footer #confirmButton {
            display:block;
            width:100%;
            min-height:48px;
            margin:0;
        }
        @media (min-width:901px) {
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                box-sizing:border-box;
                height:clamp(560px,calc(100vh - 300px),680px) !important;
                min-height:560px !important;
                max-height:680px !important;
            }
            .booking-layout > .times-column {
                display:flex !important;
                flex-direction:column !important;
                min-height:0 !important;
                overflow:hidden !important;
            }
            .times-column > #bookingPanel {
                display:flex !important;
                flex:1 1 auto !important;
                flex-direction:column !important;
                min-height:0 !important;
                overflow:hidden !important;
            }
            #bookingPanel > #clockSection {
                display:flex !important;
                flex:1 1 auto !important;
                flex-direction:column !important;
                align-items:stretch !important;
                height:auto !important;
                min-height:0 !important;
                overflow:hidden !important;
            }
            #clockSection > #timeSlotsGrid {
                display:flex !important;
                flex:1 1 auto !important;
                flex-direction:column !important;
                min-height:0 !important;
                max-height:none !important;
                overflow-y:auto !important;
                overflow-x:hidden !important;
                overscroll-behavior:contain;
                margin:0 !important;
                padding:2px 5px 12px 2px !important;
            }
            #clockSection > .time-selection-footer {
                display:flex;
                flex:0 0 auto !important;
                position:relative !important;
                inset:auto !important;
                margin-top:auto !important;
            }
        }
        @media (max-width:900px) {
            .booking-layout > .calendar-column,
            .booking-layout > .times-column {
                height:auto !important;
                min-height:0 !important;
                max-height:none !important;
                overflow:visible !important;
            }
            .times-column > #bookingPanel,
            #bookingPanel > #clockSection {
                height:auto !important;
                min-height:0 !important;
                overflow:visible !important;
            }
            #clockSection > #timeSlotsGrid {
                flex:initial !important;
                max-height:none !important;
                overflow:visible !important;
                margin-bottom:18px !important;
            }
            #clockSection > .time-selection-footer {
                position:static !important;
                margin-top:0 !important;
            }
        }

            /* Animated, single-step customer verification flow */
        .customer-step-viewport { position:relative; overflow:hidden; min-height:260px; }
        .customer-step { display:none; width:100%; animation:customerStepIn .34s cubic-bezier(.2,.75,.25,1) both; }
        .customer-step.is-active { display:block; }
        @keyframes customerStepIn { from { opacity:0; transform:translateX(34px); } to { opacity:1; transform:translateX(0); } }
        .customer-step h3 { margin:6px 0 5px; color:var(--booking-navy,#142b4a); font-size:19px; font-weight:850; }
        .customer-step p { margin:0 0 18px; color:var(--booking-muted,#738198); font-size:13px; }
        .step-indicator { color:var(--booking-blue,#315b91); font-size:11px; font-weight:800; }
        .step-hint { margin-top:9px; color:var(--booking-muted,#738198); font-size:11px; line-height:1.8; }
        .otp-digit-row { display:flex; justify-content:center; gap:12px; margin:14px 0 18px; }
        .otp-digit { width:58px; height:62px; border:1px solid var(--booking-line,#e2e8f0); border-radius:14px; background:#fff; color:var(--booking-navy,#142b4a); text-align:center; font-size:24px; font-weight:800; outline:none; transition:border-color .18s,box-shadow .18s; }
        .otp-digit:focus { border-color:var(--booking-blue,#315b91); box-shadow:0 0 0 3px rgba(49,91,145,.12); }
        .step-text-button,.step-back-button { display:block; width:100%; margin-top:10px; padding:9px; border:0; background:transparent; color:var(--booking-blue,#315b91); font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; }
        .step-text-button:disabled { color:#9aa5b5; cursor:not-allowed; }
        .step-back-button { color:var(--booking-muted,#738198); }
        @media(max-width:560px) { .otp-digit { width:54px; height:58px; } .otp-digit-row { gap:9px; } }

            /* Once a time is confirmed, replace the complete date/time experience. */
        body.customer-booking-stage .booking-layout,
        body.customer-booking-stage .booking-context-card { display:none !important; }
        body.customer-booking-stage #customerSection {
            display:block !important;
            width:min(100%,760px);
            min-height:0;
            max-height:none;
            height:auto;
            overflow:visible;
            margin:0 auto;
            padding:clamp(22px,4vw,42px);
            border:1px solid var(--booking-line,#e2e8f0);
            border-radius:var(--booking-radius,22px);
            background:var(--booking-surface,#fff);
            box-shadow:0 16px 45px rgba(20,43,74,.07);
            animation:customerStepIn .34s cubic-bezier(.2,.75,.25,1) both;
        }
        body.customer-booking-stage #successSection {
            width:min(100%,760px);
            max-height:none;
            overflow:visible;
            margin:0 auto;
            padding:clamp(22px,4vw,42px);
            border:1px solid var(--booking-line,#e2e8f0);
            border-radius:var(--booking-radius,22px);
            background:var(--booking-surface,#fff);
            box-shadow:0 16px 45px rgba(20,43,74,.07);
        }
        body.customer-booking-stage .customer-step-viewport { min-height:300px; }
        body.customer-booking-stage .selected-booking { margin-bottom:26px; }
        body.customer-booking-stage .customer-step.is-active { display:block; }
        @media(max-width:700px) {
            body.customer-booking-stage { padding:16px 12px 36px; }
            body.customer-booking-stage #customerSection,
            body.customer-booking-stage #successSection { width:100%; padding:20px 16px; }
        }

            .success-account-button {
            display:flex;
            align-items:center;
            justify-content:center;
            width:100%;
            min-height:48px;
            margin:14px auto 0;
            padding:12px 20px;
            border:0;
            border-radius:12px;
            background:#203d63;
            color:#fff !important;
            font:inherit;
            font-weight:700;
            text-align:center;
            text-decoration:none;
            box-shadow:0 5px 14px rgba(32,61,99,.16);
            transition:background .2s ease,transform .2s ease;
        }
        .success-account-button:hover {
            background:#294d78;
            transform:translateY(-1px);
        }
        body.success-booking-stage .booking-layout,
        body.success-booking-stage .booking-context-card,
        body.success-booking-stage .header { display:none !important; }
        body.success-booking-stage #customerSection { display:none !important; }
        body.success-booking-stage #successSection {
            display:flex !important;
            width:min(100%,760px);
            min-height:0;
            max-height:none;
            height:auto;
            overflow:visible;
            margin:0 auto;
            padding:clamp(22px,4vw,42px);
            border:1px solid var(--booking-line,#e2e8f0);
            border-radius:var(--booking-radius,22px);
            background:var(--booking-surface,#fff);
            box-shadow:0 16px 45px rgba(20,43,74,.07);
        }
        body.success-booking-stage #successSection {
            display:flex !important;
            animation:customerStepIn .34s cubic-bezier(.2,.75,.25,1) both;
        }
        body.success-booking-stage #successSection > .confirm-button {
            width:100%;
            min-height:48px;
        }

        .customer-form-topbar {
            display:flex;
            justify-content:flex-start;
            align-items:center;
            width:100%;
            margin:0 0 18px;
        }
        .customer-back-button {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:112px;
            min-height:46px;
            padding:11px 22px;
            border:0;
            border-radius:12px;
            background:#203d63;
            color:#fff;
            font-family:inherit;
            font-size:14px;
            font-weight:700;
            line-height:1.5;
            cursor:pointer;
            box-shadow:0 5px 14px rgba(32,61,99,.16);
            transition:background .18s ease,transform .18s ease;
        }
        .customer-back-button:hover { background:#294d78; transform:translateY(-1px); }
        .customer-step .step-back-button { display:none; }

/* Booking flow typography: use the project's self-hosted Estedad variable font. */
html.ui-app,
html.ui-app body,
html.ui-app body * {
    font-family: "Estedad", Tahoma, Arial, sans-serif !important;
}
html.ui-app button,
html.ui-app input,
html.ui-app select,
html.ui-app textarea {
    font-family: "Estedad", Tahoma, Arial, sans-serif !important;
    font-synthesis: none;
}
html.ui-app {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Keep the optional account note consistent with the booking receipt typography. */
html.ui-app body #successSection .success-account-note {
    font-family: "Estedad", Tahoma, Arial, sans-serif !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: normal;
}