* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "DM Sans", sans-serif;
            color: #39455e;
            background: #fff;
        }

        a {
            text-decoration: none;
        }


        /* =========================
           HEADER
        ========================= */

        .site-header {
            position:absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            background: rgba(20, 48, 52, 0.55);
            border-bottom: 1px solid rgba(255, 255, 255, .2);
        }

        .header-inner {
            max-width:1300px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            color: #fff;
        }

         .logo img{height:90px;}


        .main-nav {
            display: flex;
            align-items: center;
            gap: 49px;
        }

        .main-nav a {
            color: #fff;
            font-size:15px;
        }

        .main-nav .appointment-btn {
            background: #4bc7c5;
            padding: 9px 13px;
            border-radius: 4px;
            font-weight: 600;
        }

        .user-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            color: #536477;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }


        /* =========================
           HERO
        ========================= */

        .hero {
            position: relative;
            background:
                linear-gradient(
                    90deg,
                    rgba(36, 66, 69, .72),
                    rgba(41, 71, 74, .38)
                ),
                url("images/appointment-banner.jpg") center center / cover no-repeat;
        padding-bottom:150px;
        padding-top:50px;
        }

        .hero-content {
            max-width:1300px;
            margin: auto;
            padding-top: 135px;
        }

        .hero h1 {
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 44px;
            font-weight: 400;
            margin: 0 0 12px;
        }

        .breadcrumb-custom {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #fff;
            font-size:15px;
        }

        .breadcrumb-custom span {
            opacity: .95;
        }


        /* =========================
           APPOINTMENT SECTION
        ========================= */

        .appointment-section {
            padding: 45px 0 60px;
        }

        .appointment-container {
            max-width:1300px;
            margin: auto;
        }

        .appointment-layout {
            display: grid;
            grid-template-columns: 215px 1fr;
            gap: 20px;
        }


        /* =========================
           LEFT STEPS
        ========================= */

        .steps-box {
            border: 1px solid #d2dceb;
            border-radius: 6px;
            padding: 10px 11px;
            box-shadow: 0 7px 18px rgba(50, 70, 100, .08);
            height: fit-content;
        }

        .step {
            height: 53px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #68748b;
            font-family: "Playfair Display", serif;
            font-size:15px;
        }

        .step-icon {
            width: 21px;
            height: 21px;
            min-width: 21px;
            border: 1px solid #cbd6e7;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #74819a;
        }

        .step.active {
            color: #4cc4c1;
        }

        .step.active .step-icon {
            background: #4cc4c1;
            border-color: #4cc4c1;
            color: #fff;
        }


        /* =========================
           MAIN BOOKING BOX
        ========================= */

        .booking-box {
            border: 1px solid #d1dceb;
            border-radius: 6px;
            min-height: 440px;
            position: relative;
            overflow: hidden;
            background: #fff;
        }

        .booking-content {
            padding: 17px 15px 85px;
        }

        .section-title {
            font-size:15px;
            font-weight: 600;
            color: #253149;
            margin: 0 0 8px;
        }


        /* =========================
           CATEGORY
        ========================= */

        .category-buttons {
            display: flex;
            gap: 9px;
            margin-bottom: 17px;
        }

        .category-btn {
            padding:4px 32px;
            background: #fff;
            border: 1px solid #d0daea;
            border-radius: 3px;
            color: #6d7990;
            font-family: "DM Sans", sans-serif;
            font-size:15px;
            cursor: pointer;
        }

        .category-btn.active {
            border-color: #48c5c2;
            color: #34415a;
        }

        .category-btn .check {
            display: inline-flex;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            background: #4bc6c3;
            color: #fff;
            font-size: 9px;
            margin-left: 3px;
            position:absolute;
            margin-top: 3px;
        }


        /* =========================
           SERVICE CARDS
        ========================= */

        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .service-card {
            height: 67px;
            border: 1px solid #d1dceb;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 9px 13px;
            cursor: pointer;
            transition: .2s ease;
        }

        .service-card:hover,
        .service-card.selected {
            border-color: #4bc5c2;
        }

        .service-image {
            width: 39px;
            height: 39px;
            border-radius: 50%;
            object-fit: cover;
            background: #dce9eb;
        }

        .service-info {
            min-width: 0;
        }

        .service-title {
            color: #59667d;
            font-family: "Playfair Display", serif;
            font-size:15px;
            margin-bottom: 4px;
        }

        .service-price {
            color: #7c8799;
            font-family: "Playfair Display", serif;
            font-size: 15px;
        }

        .service-price span {
            color: #fff;
            background: #48c5c2;
            border-radius: 3px;
            padding: 3px 5px;
            margin-left: 2px;
            font-family: "DM Sans", sans-serif;
            font-weight: 600;
        }


        /* =========================
           BOOKING FOOTER
        ========================= */

        .booking-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 49px;
            border-top: 1px solid #d1dceb;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 18px;
        }

        .next-btn {
            border: none;
            background: #4bc6c3;
            color: #fff;
            font-size: 15px;
            border-radius: 4px;
            padding: 8px 13px;
            cursor: pointer;
        }

        .next-btn i {
            margin-left: 3px;
        }


        /* =========================
           CONSULTATION CTA
        ========================= */

        .consultation {
            background: #3193d7;
            padding: 27px 0;
        }

        .consultation-inner {
            max-width:1300px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .consultation h2 {
            margin: 0;
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 30px;
            font-weight: 500;
        }

        .consultation-buttons {
            display: flex;
            gap: 8px;
        }

        .consultation-btn {
            border: none;
            background: #4bc7c4;
            color: #fff;
            padding: 10px 13px;
            border-radius: 5px;
            font-size:15px;
            font-weight: 600;
        }


        /* =========================
           FOOTER
        ========================= */

        .footer {
            background: #50c6c3;
            color: #fff;
        }

        .footer-main {
            max-width:1300px;
            margin: auto;
            padding: 31px 0 30px;
            display: grid;
            grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
            gap: 30px;
        }

        .footer h3 {
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 27px;
            font-weight: 500;
            margin: 0 0 8px;
        }

        .footer h4 {
            color: #fff;
            font-size:16px;
            margin: 10px 0 13px;
            font-weight: 600;
        }

        .footer p,
        .footer a {
            color: #fff;
            font-size:15px;
            line-height: 1.7;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .contact-icon {
            width:35px;
            height:35px;
            border-radius: 50%;
            background: #318fdb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:15px;
        }

        .social-icons {
            display: flex;
            gap: 7px;
            margin-top: 16px;
        }

        .social-icons a {
            width:35px;
            height:35px;
            border-radius: 50%;
            background: #318fdb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:14px;
        }


        /* =========================
           COPYRIGHT
        ========================= */

        .copyright {
            border-top: 1px solid rgba(255,255,255,.25);
        }

        .copyright-inner {
            max-width:1300px;
            margin: auto;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .copyright p {
            margin: 0;
            font-size:15px;
            color: #fff;
        }


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

        .whatsapp {
            position: fixed;
            left: 10px;
            bottom: 10px;
            width: 31px;
            height: 31px;
            border-radius: 50%;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            z-index: 100;
        }

        .top-button {
            position: fixed;
            right: 20px;
            bottom: 7px;
            width: 21px;
            height: 21px;
            background: #0879c9;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            z-index: 100;
        }


        /* =========================
           APPOINTMENT SECTION
        ========================= */

        .appointment-section {
            padding: 45px 0 60px;
            min-height: 545px;
        }

        .booking-wrapper {
            width:1300px;
            margin: auto;
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 20px;
        }
        .btn {
            border: 0;
            border-radius: 5px;
            min-height: 35px;
            padding: 0 17px;
            font-size:15px;
            cursor: pointer;
        }

        .btn-back {
            background: transparent;
            color: #68748a;
        }

        .btn-next {
            background: #48c4c1;
            color: #fff;
        }

        .btn-next:hover {
            background: #35b5b2;
        }

        /* =========================
           SIDEBAR
        ========================= */

        .steps {
            border: 1px solid #d7deea;
            border-radius: 7px;
            padding: 14px 10px;
            height: max-content;
            box-shadow: 0 8px 20px rgba(25,50,90,.06);
        }

        .step {
            height: 43px;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #69748a;
            font-family: "DM Serif Display", serif;
            font-size:15px;
        }

        .step-icon {
            width: 25px;
            height: 25px;
            border: 1px solid #cbd5e5;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #68768d;
            background: #fff;
        }

        .step.active {
            color: #45c4c2;
        }

        .step.active .step-icon {
            color: #fff;
            background: #48c4c1;
            border-color: #48c4c1;
        }

        /* =========================
           CONTENT CARD
        ========================= */

        .booking-card {
            border: 1px solid #d1dbea;
            border-radius: 6px;
            min-height: 440px;
            position: relative;
            overflow: hidden;
            background: #fff;
        }

        .booking-content {
            padding: 17px 16px 70px;
            min-height: 385px;
        }

        .booking-title {
            color: #18263e;
            font-size:15px;
            font-weight: 600;
            margin-bottom: 9px;
        }

        /* =========================
           CATEGORY
        ========================= */

        .category-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 18px;
        }

        .category-btn {
            background: #fff;
            border: 1px solid #d5ddea;
            color: #647087;
            border-radius: 3px;
            padding: 5px 10px;
            font-size:15px;
            cursor: pointer;
        }

        .category-btn.active {
            color: #45c4c1;
            border-color: #45c4c1;
        }

        /* =========================
           SERVICES
        ========================= */

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

        .service-card {
            min-height: 67px;
            border: 1px solid #d7deea;
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding: 8px 10px;
            cursor: pointer;
            position: relative;
        }

        .service-card.selected {
            border-color: #45c4c1;
        }

        .service-image {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .service-name {
            font-family: "DM Serif Display", serif;
            font-size:15px;
            color: #68748a;
            margin-bottom: 3px;
        }

        .price {
            font-family: "DM Serif Display", serif;
            font-size:18px;
        }

        .price span {
            background: #47c4c1;
            color: #fff;
            padding: 3px 6px;
            border-radius: 3px;
            margin-left: 3px;
            font-family: "Poppins", sans-serif;
            font-size:15px;
        }

        .check {
            position: absolute;
            right: 9px;
            top: 9px;
            width: 15px;
            height: 15px;
            background: #48c4c1;
            color: #fff;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 8px;
        }

        .service-card.selected .check {
            display: flex;
        }

        /* =========================
           COUNSELLOR
        ========================= */

        .counsellor-grid {
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
        }

        .counsellor-card {
            width: 210px;
            min-height: 145px;
            border: 1px solid #ccd6e6;
            border-radius: 7px;
            text-align: center;
            padding: 15px 12px;
            cursor: pointer;
        }

        .counsellor-card.selected {
            border: 1px solid #111;
        }

        .counsellor-card img {
            width: 70px;
            height: 70px;
            border-radius: 14px;
            object-fit: cover;
            margin-bottom: 7px;
        }

        .counsellor-name {
            color: #29354d;
            font-size:16px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .counsellor-desc {
            font-size:15px;
            line-height: 1.35;
        }

        /* =========================
           DATE TIME
        ========================= */

        .date-time {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }

        .calendar {
            border: 1px solid #ccd6e6;
        }

        .calendar-header {
            height: 50px;
            border-bottom: 1px solid #ccd6e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px;
            color: #68758b;
            font-family: "DM Serif Display", serif;
            font-size: 15px;
        }

        .calendar-header button {
            border: 0;
            background: none;
            color: #68758b;
            font-size: 18px;
            cursor: pointer;
        }

        .weekdays,
        .dates {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .weekdays div {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .date {
            height: 46px;
            border-top: 1px solid #d7deea;
            border-right: 1px solid #d7deea;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "DM Serif Display", serif;
            font-size:15px;
            cursor: pointer;
            color: #758198;
        }

        .date.muted {
            color: #c3cad5;
        }

        .date.selected {
            background: #49c4c2;
            color: #fff;
        }

        .slots {
            border: 1px solid #ccd6e6;
            padding: 18px 15px;
        }

        .slots h3 {
            color: #1c2940;
            font-family: "DM Serif Display", serif;
            font-size: 17px;
            margin-bottom: 8px;
        }

        .slot-heading {
            font-family: "DM Serif Display", serif;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .slot-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .slot {
            border: 1px solid #cdd7e7;
            border-radius: 5px;
            padding: 8px 10px;
            font-size:15px;
            cursor: pointer;
            background: #fff;
        }

        .slot.selected {
            border-color: #49c4c2;
            background: #f3ffff;
        }

        .slot small {
            display: block;
            font-size:15px;
        }

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

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 22px;
        }

        .form-group label {
            display: block;
            color: #65728a;
            font-family: "DM Serif Display", serif;
            font-size:17px;
            margin-bottom: 7px;
        }

        .required {
            color: red;
        }

        .form-control {
            width: 100%;
            height: 45px;
            border: 1px solid #cbd5e5;
            border-radius: 4px;
            padding: 0 14px;
            color: #68748a;
            outline: none;
            font-size:15px;
        }

        .form-control:focus {
            border-color: #48c4c1;
        }

        textarea.form-control {
            height: 92px;
            padding-top: 12px;
            resize: none;
        }

        .full-width {
            grid-column: 1 / -1;
        }

        .phone-input {
            display: flex;
        }

        .country {
            width: 80px;
            height: 45px;
            border: 1px solid #cbd5e5;
            border-right: 0;
            border-radius: 4px 0 0 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 11px;
        }

        .phone-input .form-control {
            border-radius: 0 4px 4px 0;
        }


        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width: 991px) {

            .header-inner,
            .hero-content,
            .consultation-inner,
            .footer-main,
            .copyright-inner {
                max-width: 92%;
            }

            .main-nav {
                gap: 10px;
            }

            .appointment-container {
                max-width: 92%;
            }

        }


        @media(max-width: 767px) {

            .site-header {
                height: auto;
                padding: 10px 0;
            }

            .header-inner {
                flex-direction: column;
                gap: 10px;
                height: auto;
            }

            .main-nav {
                flex-wrap: wrap;
                justify-content: center;
            }

            .hero {
                height: 300px;
            }

            .hero-content {
                padding-top: 150px;
            }

            .hero h1 {
                font-size: 34px;
            }

            .appointment-layout {
                grid-template-columns: 1fr;
            }

            .steps-box {
                display: flex;
                overflow-x: auto;
                padding: 5px 10px;
            }

            .step {
                min-width: 115px;
            }

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

            .consultation-inner {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .footer-main {
                grid-template-columns: 1fr 1fr;
            }

            .copyright-inner {
                flex-direction: column;
                justify-content: center;
                gap: 4px;
            }

        }


        @media(max-width: 500px) {

            .footer-main {
                grid-template-columns: 1fr;
            }

            .consultation h2 {
                font-size: 25px;
            }

        }


        .country-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: #faf9f6;
    border: 1px solid #dedbd3;
    border-radius: 60px;
    width: fit-content;
    margin:auto;
}

.country-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width:300px;
    padding: 9px 13px;
    border-radius: 50px;
    text-decoration: none;
    color: #252525;
    transition: all .35s ease;
    overflow: hidden;
}

.country-option::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.country-option:hover::before {
    transform: translateX(120%);
}

.country-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d4ca;
    border-radius: 50%;
    flex-shrink: 0;
}

.country-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.4;
}

.country-text {
    font-family: Arial, sans-serif;
    font-size:16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .2px;
}

.country-text small {
    display: block;
    margin-bottom: 3px;
    font-size:14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    opacity: .6;
}

.country-arrow {
    margin-left: auto;
    font-size: 17px;
    opacity: .55;
    transition: all .3s ease;
}

.country-option:hover .country-arrow {
    transform: translate(3px,-3px);
    opacity: 1;
}

/* ACTIVE INTERNATIONAL */
.country-option.international.active {
    background: #171717;
    color: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
}

.country-option.international.active .country-icon {
    border-color: #b89b5e;
    color: #d7b875;
}

.country-option.international.active .country-text small {
    color: #d7b875;
    opacity: 1;
}

.country-option.international.active .country-arrow {
    color: #d7b875;
    opacity: 1;
}

/* INDIA HOVER */
.country-option.india:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,.07);
}

.country-option.india:hover .country-icon {
    border-color: #b89b5e;
    color: #9d7b3e;
}

.country-option.india:hover .country-text small {
    color: #9d7b3e;
    opacity: 1;
}

/* MOBILE */
@media (max-width: 600px) {

    .country-selector {
        gap: 4px;
        padding: 4px;
    }

    .country-option {
        min-width: auto;
        padding: 7px 10px;
        gap: 7px;
    }

    .country-icon {
        width: 29px;
        height: 29px;
    }

    .country-icon svg {
        width: 14px;
        height: 14px;
    }

    .country-text {
        font-size: 11px;
    }

    .country-text small {
        font-size: 7px;
    }

    .country-arrow {
        display: none;
    }
}



.section-mai{background: #fff4f4; border-radius:18px;padding:26px; margin:24px 0; width:100%; display:inline-block;}
.section-mai .section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-mai .section-title h2{font-size:21px;letter-spacing:-.35px;margin:0}
.section-mai .section-title p{font-size:13px;color:var(--muted);margin:4px 0 0}
.section-mai .pill{font-size:12px;font-weight:700;color:var(--brand);background:#edf2ff;border-radius:30px;padding:7px 11px;white-space:nowrap}
.section-mai .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}

.section-mai .zone-name{font-weight:750;color:var(--ink)}

.section-mai .zone-picker{gap:14px}

.zone-time{display:block;margin-top:7px;font-size:12px;font-weight:700;color:#2458d3}
.zone-us-time{display:block;margin-top:2px;font-size:11px;color:#68758b}
.zone-option{align-items:flex-start}
.zone-option{display:flex;align-items:center;gap:12px;padding:17px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.zone-option:hover{border-color:#a9bdf4;background:#fafbff}
.zone-option:has(input:checked){border-color:var(--brand);background:#edf2ff;box-shadow:0 0 0 2px rgba(36,88,211,.08)}
.zone-option input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.zone-option-copy{display:flex;flex-direction:column;gap:3px}
.zone-option-copy strong{font-size:14px;color:var(--ink)}
.zone-option-copy small{font-size:12px;color:var(--muted)}
.zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zone-card{border:1px solid var(--line);border-radius:14px;padding:19px;background:#fff}
.zone-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}
.zone-card h3{font-size:16px;margin:0}
.zone-card-head span{font-size:11px;color:var(--muted);background:var(--soft);padding:5px 8px;border-radius:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.state-chip{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#46536c;background:#f4f6fa;border:1px solid #e9edf4;border-radius:7px;padding:7px 10px;cursor:pointer;transition:.15s}
.state-chip:has(input:checked){background:#eaf0ff;border-color:#2458d3;color:#163c9c}
.state-chip input{margin:0;accent-color:#2458d3;cursor:pointer}
.note{font-size:12px;color:var(--muted);margin:14px 0 0}


.picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px}
.submit-actions{justify-content:flex-end;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.control-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.check-label{display:flex;align-items:center;gap:9px;font-size:13px;color:#46536c;font-weight:600;cursor:pointer}
.check-label input{width:17px;height:17px;accent-color:#2458d3}
.button-group{display:flex;gap:10px;flex-wrap:wrap}
.action-btn{border:0;border-radius:9px;padding:11px 17px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.action-btn.primary{background:#2458d3;color:#fff}.action-btn.primary:hover{background:#163c9c}
.action-btn.secondary{background:#eef1f7;color:#34415b}.action-btn.secondary:hover{background:#e1e7f1}
@media(max-width:720px){.picker-grid{grid-template-columns:1fr}.control-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.container{width:min(100% - 28px,1160px)}header{padding-bottom:68px}.hero{padding-top:42px}.section{padding:19px;border-radius:15px}.section-title{align-items:flex-start;flex-direction:column}.zone-grid{grid-template-columns:1fr}}
@media print{body{background:#fff}header{background:#fff;color:#111;padding:15px 0 35px}.hero p,.eyebrow,.nav-tag{color:#444}main{margin-top:0}.section{box-shadow:none;break-inside:avoid}}
/* ===== Booking form additions ===== */
:root { --line: #d1dbea; --muted: #68758b; --ink: #253149; }

.booking-form-card {
    max-width: 900px; margin: 0 auto; background: #fff; padding: 28px;
    border: 1px solid #d1dbea; border-radius: 6px;
    box-shadow: 0 8px 20px rgba(25, 50, 90, .06);
}
.form-alert {
    background: #fde8e8; border: 1px solid #f5b5b5; color: #8a1f1f;
    border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; font-size: 15px;
}
.form-alert ul { margin: 0; padding-left: 18px; }

.country { width: 125px; }
.cc-select {
    border: 0; background: transparent; width: 100%; height: 100%;
    font-size: 14px; color: #68748a; outline: none; padding: 0 6px; cursor: pointer;
}
select.form-control { background: #fff; cursor: pointer; }

.preview-box {
    display: none; background: #eef9f9; border: 1px solid #bfe9e8; border-radius: 6px;
    padding: 14px 16px; font-size: 14px; line-height: 1.7; color: #39455e;
}
.preview-box.error { background: #fff1f1; border-color: #f3b7b7; color: #a12626; }

.action-btn { padding: 12px 28px; font-size: 15px; border-radius: 5px; }
.action-btn.primary { background: #48c4c1; }
.action-btn.primary:hover { background: #35b5b2; }
.action-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ===== Selectable cards. Prefixed "pick-" so older theme rules cannot clash ===== */
.form-group .section-label { display: block; margin-bottom: 10px; }
.pick-grid { display: grid; gap: 14px; width: 100%; }
.pick-counsellors { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick-services    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.form-group label.pick {
    position: relative; display: block; margin: 0; cursor: pointer;
    font-family: "DM Sans", system-ui, sans-serif; font-weight: 400; font-size: 14px; color: #3b475f;
}
.pick input {                         /* hidden, but still focusable and validated */
    position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; bottom: 0;
}
.pick-body {
    position: relative; display: flex; height: 100%; padding: 16px;
    background: #fff; border: 1px solid #d1dbea; border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.pick:hover .pick-body { border-color: #9fdcda; }
.pick input:checked + .pick-body { border-color: #48c4c1; box-shadow: 0 6px 18px rgba(72, 196, 193, .25); }
.pick input:focus-visible + .pick-body { outline: 2px solid #1f7a8c; outline-offset: 2px; }

.pick-tick {
    position: absolute; top: 10px; right: 10px; font-size: 22px; line-height: 1; color: #48c4c1;
    opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.pick input:checked + .pick-body .pick-tick { opacity: 1; transform: scale(1); }

/* counsellor card */
.pick-counsellors .pick-body { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.pick-avatar {
    width: 86px; height: 86px; border-radius: 20px; overflow: hidden; margin-bottom: 6px;
    background: #e1f4f4; color: #1f7a8c; font-weight: 700; font-size: 26px;
    display: flex; align-items: center; justify-content: center;
}
.pick-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-name { font-weight: 700; font-size: 17px; color: #1d2b4a; }
.pick-bio  { font-size: 13px; line-height: 1.5; color: #68758b; }

/* service card */
.pick-services .pick-body { align-items: center; gap: 16px; padding-right: 44px; }
.pick-icon {
    flex: 0 0 58px; height: 58px; border-radius: 50%; background: #e1f4f4; color: #1f7a8c;
    font-size: 26px; display: flex; align-items: center; justify-content: center;
}
.pick-text  { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pick-title { font-size: 17px; color: #3b475f; }
.pick-meta  { font-size: 13px; color: #68758b; }
.pick-price {
    display: inline-block; background: #48c4c1; color: #fff; font-weight: 700;
    padding: 2px 10px; border-radius: 4px; font-size: 14px;
}
.tz-hint { display: block; margin-top: 6px; font-size: 13px; color: #68758b; }
.tz-hint.ok { color: #1b8a5a; }
/* ===== Date picker + time slots ===== */
#dateDisplay.form-control[readonly] { background: #fff; cursor: pointer; }
.datepicker { font-family: "DM Sans", system-ui, sans-serif; z-index: 1060 !important; }
.datepicker td, .datepicker th { padding: 7px 9px; border-radius: 6px; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: #48c4c1 !important; border-color: #35b5b2 !important; color: #fff !important; text-shadow: none;
}
.datepicker table tr td.today:not(.active) { background: #e1f4f4 !important; color: #1f7a8c; }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: #b8c1d0; }

.slot-msg {
    margin: 0; padding: 12px 14px; background: #f5f8fc; border: 1px dashed #d1dbea;
    border-radius: 6px; color: #68758b; font-size: 14px;
}
.slot-group { margin-bottom: 12px; }
.slot-group h4 {
    font-family: "DM Sans", system-ui, sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: #68758b; margin: 0 0 6px;
}
.slot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-btn {
    min-width: 94px; padding: 8px 14px; background: #fff; color: #1d2b4a;
    border: 1px solid #d1dbea; border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer;
}
.slot-btn:hover:not(:disabled) { border-color: #48c4c1; background: #eef9f9; }
.slot-btn.on { background: #48c4c1; border-color: #48c4c1; color: #fff; font-weight: 600; }
.slot-btn:disabled { background: #f1f3f7; color: #aab3c2; text-decoration: line-through; cursor: not-allowed; }
.slot-btn:focus-visible { outline: 2px solid #1f7a8c; outline-offset: 2px; }
.slot-error { display: block; margin-top: 6px; font-size: 13px; color: #c0392b; }
.pick-hours {
    display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 99px;
    background: #e1f4f4; color: #1f7a8c; font-size: 12px; font-weight: 600;
}
.pick-icon { overflow: hidden; }
.pick-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
@media (max-width: 720px) {
    .slot-btn { flex: 1 1 calc(33.33% - 8px); min-width: 0; }
}
@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .booking-form-card { padding: 18px; }
}