/* =========================================================
   BOOKING PAGE — FINAL CLEAN VERSION
   PART 1 / 2
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.booking-page {
    background:
        radial-gradient(circle at 8% 45%, rgba(249, 220, 231, 0.28), transparent 24%),
        radial-gradient(circle at 92% 72%, rgba(249, 220, 231, 0.22), transparent 24%),
        #fffafa;
    color: #332d30;
}


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

.booking-hero {
    position: relative;
    min-height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 72px 25px;
    text-align: center;
    background:
        radial-gradient(circle at 13% 20%, rgba(249, 220, 231, 0.92), transparent 28%),
        radial-gradient(circle at 87% 75%, rgba(249, 220, 231, 0.75), transparent 30%),
        linear-gradient(135deg, #fffdfd 0%, #fff3f7 52%, #f9dce7 100%);
}

.booking-hero::before,
.booking-hero::after {
    content: "♡";
    position: absolute;
    color: rgba(217, 52, 115, 0.08);
    font-family: Georgia, serif;
    pointer-events: none;
}

.booking-hero::before {
    top: 35px;
    left: 7%;
    font-size: 100px;
    transform: rotate(-15deg);
}

.booking-hero::after {
    right: 8%;
    bottom: 15px;
    font-size: 135px;
    transform: rotate(12deg);
}

.booking-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 790px;
    animation: bookingHeroEnter 0.7s ease both;
}

.section-small-title {
    margin: 0 0 13px;
    color: #d93473;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.booking-hero h1 {
    margin: 0 0 21px;
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.08;
    font-weight: 500;
}

.booking-hero h1 span {
    display: block;
    margin-top: 5px;
    color: #d93473;
}

.booking-hero-content > p:last-child {
    max-width: 640px;
    margin: 0 auto;
    color: #625b5f;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   PROGRESS
========================================================= */

.booking-progress-section {
    position: relative;
    z-index: 5;
    padding: 31px 25px;
    border-top: 1px solid rgba(217, 52, 115, 0.05);
    border-bottom: 1px solid #f2dfe6;
    background: rgba(255, 255, 255, 0.96);
}

.booking-progress {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.booking-progress-step {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
}

.booking-progress-step span {
    width: 40px;
    height: 40px;
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8cbd6;
    border-radius: 50%;
    background: #ffffff;
    color: #aa8c97;
    font-size: 14px;
    font-weight: 800;
    transition: 0.3s ease;
}

.booking-progress-step p {
    margin: 0;
    color: #9b858d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.booking-progress-step.active span {
    border-color: #d93473;
    background: linear-gradient(135deg, #e44d87, #c62965);
    color: #ffffff;
    box-shadow:
        0 7px 18px rgba(217, 52, 115, 0.22),
        0 0 0 5px rgba(217, 52, 115, 0.07);
    transform: translateY(-1px);
}

.booking-progress-step.active p {
    color: #d93473;
}

.booking-progress-line {
    height: 1px;
    flex: 1;
    max-width: 110px;
    margin-top: 20px;
    background: linear-gradient(90deg, #f0d7e0, #dfafc1);
}


/* =========================================================
   MAIN BOOKING AREA
========================================================= */

.booking-main-section {
    min-height: 650px;
    padding: 72px 25px 100px;
}

.booking-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.booking-step {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 48px;
    overflow: visible;
    border: 1px solid #f0d9e2;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(255, 250, 252, 0.95)
        );
    box-shadow:
        0 24px 65px rgba(91, 50, 66, 0.09),
        0 2px 8px rgba(91, 50, 66, 0.03);
    scroll-margin-top: 110px;
}

.booking-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 170px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        #f3aec8,
        #d93473,
        #f3aec8
    );
    transform: translateX(-50%);
}

.booking-step[hidden],
.booking-success[hidden],
.service-modal[hidden] {
    display: none !important;
}

.booking-step-heading {
    max-width: 690px;
    margin: 0 auto 38px;
    text-align: center;
}

.booking-step-heading .section-small-title {
    margin-bottom: 9px;
}

.booking-step-heading h2,
.booking-success h2 {
    margin: 0 0 12px;
    font-family: Georgia, serif;
    font-size: clamp(31px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 500;
}

.booking-step-heading h2 span,
.booking-success h2 span {
    color: #d93473;
}

.booking-step-heading > p:last-child {
    max-width: 580px;
    margin: 0 auto;
    color: #746b6f;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   STEP 1 — SELECTED SERVICES
========================================================= */

.selected-services {
    display: grid;
    gap: 14px;
}

.booking-empty-services {
    padding: 39px 22px;
    text-align: center;
    border: 1.5px dashed #e7b5c8;
    border-radius: 22px;
    background:
        radial-gradient(circle at center, #fff9fb, #fff5f8);
}

.booking-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbe5ed, #f7ccdc);
    color: #d93473;
    font-size: 23px;
}

.booking-empty-services h3 {
    margin: 0 0 7px;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 500;
}

.booking-empty-services p {
    margin: 0;
    color: #83777c;
    font-size: 13px;
}

.selected-service-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 21px 22px 21px 25px;
    overflow: hidden;
    border: 1px solid #efd5df;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff, #fff7fa);
    transition: 0.25s ease;
}

.selected-service-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(#ef8eb3, #d93473);
}

.selected-service-info h3 {
    margin: 0 0 9px;
    font-family: Georgia, serif;
    color: #3b3135;
    font-size: 19px;
    font-weight: 500;
}

.selected-service-remove,
.remove-service-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0d5df;
    border-radius: 50%;
    background: #fff2f6;
    color: #c72e67;
    cursor: pointer;
}

.booking-service-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.booking-service-price-pill {
    color: #c62863;
    font-size: 14px;
    font-weight: 800;
}

.booking-service-duration-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #f0d5df;
    border-radius: 999px;
    background: #fff4f7;
    color: #79676e;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   ADD SERVICE / TOTAL
========================================================= */

.add-service-button {
    width: 100%;
    min-height: 55px;
    margin-top: 18px;
    padding: 15px 20px;
    border: 1.5px dashed #dc8cac;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff9fb, #fff3f7);
    color: #d93473;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.booking-service-total {
    margin-top: 28px;
    padding: 23px 27px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid #f0d1dd;
    border-radius: 20px;
    background:
        linear-gradient(120deg, #fff1f6, #fff8fa, #fff0f5);
}

.booking-service-total > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-service-total > div:last-child {
    text-align: right;
}

.booking-service-total span {
    color: #87777d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking-service-total strong {
    font-size: 18px;
}

#bookingTotalPrice {
    color: #d93473;
    font-size: 22px;
}


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

.booking-step-actions {
    margin-top: 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.primary-button {
    min-height: 51px;
    padding: 14px 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #df407c, #c92d68);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 52, 115, 0.16);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s ease;
}

.booking-step-actions .primary-button {
    margin-left: auto;
}

.primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(217, 52, 115, 0.25);
}

.primary-button:disabled {
    background: #ead5dd;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.booking-back-button {
    min-height: 45px;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: #74676c;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}


/* =========================================================
   STEP 2 — DATE + TIME MAIN LAYOUT
========================================================= */

.booking-date-time-grid {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns:
        minmax(360px, 0.92fr)
        minmax(0, 1.08fr);
    gap: 34px;
    align-items: start;
}

.booking-date-side {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.booking-time-area {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: start;
}

.booking-native-date-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   STEP 2 — CUSTOM CALENDAR
========================================================= */

.booking-calendar {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 25px;
    border: 1px solid #efd5e0;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(249, 220, 231, 0.38),
            transparent 30%
        ),
        #ffffff;
    box-shadow:
        0 18px 45px rgba(91, 50, 66, 0.08),
        0 3px 10px rgba(91, 50, 66, 0.025);
}

.booking-calendar-top {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.booking-calendar-title {
    min-width: 0;
}

.booking-calendar-title > span {
    display: block;
    margin-bottom: 6px;
    color: #d93473;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.booking-calendar-title h3 {
    margin: 0;
    color: #44373c;
    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
}

.booking-calendar-navigation {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-calendar-navigation-button {
    width: 39px;
    height: 39px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #edccd8;
    border-radius: 12px;
    background: #fff7fa;
    color: #d93473;
    cursor: pointer;
    transition: 0.2s ease;
}

.booking-calendar-navigation-button:hover:not(:disabled) {
    border-color: #dc7da2;
    background: #ffedf4;
    transform: translateY(-1px);
}

.booking-calendar-navigation-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.booking-calendar-weekdays,
.booking-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.booking-calendar-weekdays {
    margin-bottom: 8px;
}

.booking-calendar-weekdays span {
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a7798b;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-calendar-empty-day {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.booking-calendar-day {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #55484d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

.booking-calendar-day:hover:not(:disabled):not(.selected) {
    border-color: #efbfd0;
    background: #fff0f5;
    color: #d93473;
    transform: translateY(-1px);
}

.booking-calendar-day.today {
    border-color: #e89ab8;
    color: #d93473;
    font-weight: 900;
}

.booking-calendar-day.selected {
    border-color: #d93473;
    background: linear-gradient(135deg, #e34881, #c82b66);
    color: #ffffff;
    box-shadow: 0 7px 17px rgba(217, 52, 115, 0.24);
    font-weight: 900;
}

.booking-calendar-day.past,
.booking-calendar-day:disabled {
    border-color: transparent;
    background: transparent;
    color: #d5c8cd;
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   SELECTED DATE
========================================================= */

.booking-calendar-selected {
    margin-top: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #f0d5df;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8fb, #fff2f6);
}

.booking-calendar-selected > i {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ffe5ef;
    color: #d93473;
    font-size: 16px;
}

.booking-calendar-selected div {
    min-width: 0;
}

.booking-calendar-selected span {
    display: block;
    margin-bottom: 3px;
    color: #b46d88;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.booking-calendar-selected strong {
    display: block;
    color: #4d4045;
    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   STEP 2 — INFORMATION / CALL CARD
========================================================= */

.booking-time-help-card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 24px;
    border: 1px solid #efd5e0;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(249, 220, 231, 0.35),
            transparent 35%
        ),
        linear-gradient(145deg, #fffafd, #fff5f8);
    box-shadow: 0 14px 35px rgba(91, 50, 66, 0.055);
}

.booking-time-help-section {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
}

.booking-time-help-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffe7f0;
    color: #d93473;
    font-size: 16px;
}

.booking-time-help-phone {
    background: linear-gradient(135deg, #e54b85, #cb2c68);
    color: #ffffff;
    box-shadow: 0 7px 17px rgba(217, 52, 115, 0.18);
}

.booking-time-help-label {
    display: block;
    margin-bottom: 5px;
    color: #c06487;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.25px;
}

.booking-time-help-section h3 {
    margin: 0 0 8px;
    color: #44373c;
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
}

.booking-time-help-section p {
    margin: 0;
    color: #66585d;
    font-size: 13px;
    line-height: 1.7;
}

.booking-call-help-text {
    color: #584a50 !important;
    font-size: 14px !important;
    font-weight: 500;
}

.booking-time-help-divider {
    width: 100%;
    height: 1px;
    margin: 22px 0;
    background: #ecd3dd;
}


/* =========================================================
   PHONE / CALL
========================================================= */

.booking-visible-phone-number {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b72e62;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
}

.booking-visible-phone-number:hover {
    text-decoration: underline;
}

.booking-time-call-button {
    width: fit-content;
    margin-top: 13px;
    padding: 11px 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #d93473;
    border-radius: 999px;
    background: linear-gradient(135deg, #e34881, #ca2c67);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(217, 52, 115, 0.2);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    transition: 0.2s ease;
}

.booking-time-call-button:hover {
    background: #bd275f;
    border-color: #bd275f;
    transform: translateY(-1px);
}


/* =========================================================
   STEP 2 — AVAILABLE TIMES
========================================================= */

.booking-time-area > label {
    display: block;
    margin: 0 0 13px;
    color: #4d4448;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.25px;
}

.booking-time-slots {
    width: 100%;
    max-height: 620px;
    padding-right: 5px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 11px;
    overflow-x: hidden;
    overflow-y: auto;
}

.booking-time-slots::-webkit-scrollbar {
    width: 6px;
}

.booking-time-slots::-webkit-scrollbar-track {
    background: #fff4f7;
    border-radius: 999px;
}

.booking-time-slots::-webkit-scrollbar-thumb {
    background: #e5a1bb;
    border-radius: 999px;
}

.booking-time-slot,
.booking-time-button {
    width: 100%;
    min-height: 55px;
    box-sizing: border-box;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e7ccd6;
    border-radius: 15px;
    background: linear-gradient(145deg, #ffffff, #fff9fb);
    color: #574b50;
    box-shadow: 0 4px 12px rgba(80, 44, 57, 0.03);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.booking-time-slot i {
    display: none;
}

.booking-time-slot:hover,
.booking-time-button:hover {
    border-color: #d93473;
    background: #fff3f7;
    color: #d93473;
    transform: translateY(-1px);
}

.booking-time-slot.selected,
.booking-time-button.selected {
    border-color: #c62b65;
    background: linear-gradient(135deg, #e1437e, #c32963);
    color: #ffffff;
    box-shadow:
        0 9px 21px rgba(217, 52, 115, 0.25),
        0 0 0 3px rgba(217, 52, 115, 0.08);
}

.booking-time-slot.selected i {
    display: inline-block;
}


/* =========================================================
   TIME MESSAGES
========================================================= */

.booking-time-message,
.booking-no-availability {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

.booking-time-message {
    min-height: 115px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px dashed #e4b8c8;
    border-radius: 18px;
    background: #fff8fa;
    color: #806f76;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}

.booking-time-message i {
    color: #d93473;
}

.booking-no-availability {
    padding: 27px 20px;
    border: 1px dashed #e4b8c8;
    border-radius: 18px;
    background: #fff7fa;
    text-align: center;
}

.booking-no-availability > div {
    margin-bottom: 9px;
    color: #d93473;
    font-size: 26px;
}

.booking-no-availability strong {
    display: block;
    color: #493c41;
    font-size: 14px;
}

.booking-no-availability p {
    margin: 7px 0 0;
    color: #7e6d74;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   SELECTED APPOINTMENT / ERRORS
========================================================= */

.selected-appointment-display {
    margin-top: 25px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e7b8ca;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff0f5, #fff8fa);
}

.selected-appointment-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d93473;
    color: #ffffff;
}

.selected-appointment-display span {
    display: block;
    margin-bottom: 4px;
    color: #a16d81;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.selected-appointment-display strong {
    color: #44373c;
    font-size: 14px;
}

.booking-inline-error,
.customer-details-error {
    margin-top: 22px;
    padding: 17px 19px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #efb6c8;
    border-left: 4px solid #d93473;
    border-radius: 15px;
    background: #fff3f6;
    color: #5e4b52;
}

.booking-inline-error[hidden] {
    display: none !important;
}

.booking-error-icon,
.customer-details-error > i {
    color: #d93473;
    font-size: 18px;
}

.booking-inline-error strong,
.customer-details-error strong {
    display: block;
    margin-bottom: 3px;
    color: #a52454;
    font-size: 13px;
}

.booking-inline-error p,
.customer-details-error p {
    margin: 0;
    color: #765f68;
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   STEP 3 — CUSTOMER DETAILS
========================================================= */

.booking-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px;
}

.booking-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-field label {
    color: #4d4448;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.25px;
}

.booking-field label span {
    color: #a28f96;
    font-size: 10px;
    font-weight: 600;
}

.booking-field input,
.booking-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;
    border: 1px solid #e7cfd8;
    border-radius: 15px;
    outline: none;
    background: #fffdfd;
    color: #332d30;
    font-family: Arial, sans-serif;
    font-size: 14px;
    transition: 0.23s ease;
}

.booking-field input:focus,
.booking-field textarea:focus {
    border-color: #d93473;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(217, 52, 115, 0.08);
}

.booking-field textarea {
    min-height: 125px;
    resize: vertical;
}

.booking-full-field {
    grid-column: 1 / -1;
}


/* =========================================================
   END PART 1
   PART 2 GOES DIRECTLY BELOW
========================================================= */

/* =========================================================
   BOOKING PAGE — FINAL CLEAN VERSION
   PART 2 / 2
========================================================= */


/* =========================================================
   STEP 4 — REVIEW / CONFIRM
========================================================= */

.booking-summary {
    display: grid;
    gap: 18px;
}

.booking-review-top {
    padding-bottom: 20px;
    border-bottom: 1px solid #f0dce4;
    text-align: center;
}

.booking-review-top > span {
    color: #d93473;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.booking-review-top p {
    margin: 6px 0 0;
    color: #85767c;
    font-size: 12px;
}

.booking-review-section {
    padding: 23px;
    border: 1px solid #efd9e1;
    border-radius: 20px;
    background: rgba(255, 253, 253, 0.9);
}

.booking-review-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-review-heading-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff0f5;
    color: #d93473;
    font-size: 15px;
}

.booking-review-heading span {
    display: block;
    margin-bottom: 2px;
    color: #b1788e;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.booking-review-heading h3 {
    margin: 0;
    font-family: Georgia, serif;
    color: #41353a;
    font-size: 19px;
    font-weight: 500;
}

.booking-review-services {
    display: grid;
}

.booking-review-service {
    padding: 13px 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f3e4e9;
}

.booking-review-service:first-child {
    border-top: 0;
}

.booking-review-service-icon {
    color: #d93473;
    font-size: 15px;
}

.booking-review-service-name strong {
    display: block;
    margin-bottom: 3px;
    color: #493d42;
    font-size: 13px;
}

.booking-review-service-name span {
    color: #948187;
    font-size: 10px;
}

.booking-review-service-price {
    color: #d93473;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}


/* =========================================================
   REVIEW DETAILS
========================================================= */

.booking-review-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.booking-review-detail {
    padding: 11px 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-top: 1px solid #f3e4e9;
}

.booking-review-heading + .booking-review-detail {
    border-top: 0;
}

.booking-review-detail > i {
    width: 18px;
    margin-top: 3px;
    color: #d93473;
    text-align: center;
    font-size: 13px;
}

.booking-review-detail span {
    display: block;
    margin-bottom: 3px;
    color: #9a858d;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking-review-detail strong {
    display: block;
    color: #493d42;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}


/* =========================================================
   REVIEW TOTAL
========================================================= */

.booking-review-total {
    padding: 23px 27px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid #e9bfd0;
    border-radius: 20px;
    background:
        linear-gradient(120deg, #fff0f5, #fff8fa, #ffeff5);
}

.booking-review-total > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.booking-review-total > div:last-child {
    text-align: right;
}

.booking-review-total span {
    color: #9a7885;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.booking-review-total strong {
    color: #43373b;
    font-size: 16px;
}

.booking-review-total .booking-review-price {
    color: #d93473;
    font-size: 21px;
}

.booking-review-mehndi-note {
    padding: 15px 17px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 14px;
    background: #fff4f7;
    color: #78666d;
}

.booking-review-mehndi-note i {
    margin-top: 2px;
    color: #d93473;
}

.booking-review-mehndi-note p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
}


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

.booking-success {
    position: relative;
    overflow: hidden;
    padding: 56px 42px 50px;
    border: 1px solid #efd4df;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(249, 220, 231, 0.65),
            transparent 23%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(249, 220, 231, 0.5),
            transparent 24%
        ),
        #ffffff;
    box-shadow: 0 24px 65px rgba(91, 50, 66, 0.1);
    text-align: center;
}

.booking-success-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 7px solid #fff0f5;
    border-radius: 50%;
    background: linear-gradient(135deg, #e24480, #c52b65);
    color: #ffffff;
    box-shadow:
        0 10px 25px rgba(217, 52, 115, 0.24),
        0 0 0 1px #efc0d1;
    font-size: 29px;
}

.booking-success > p {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    color: #70666a;
    line-height: 1.7;
}

.booking-success-summary {
    width: 100%;
    max-width: 680px;
    margin: 27px auto 30px;
    text-align: left;
}

.booking-success-celebration {
    height: 32px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.booking-success-ticket {
    overflow: hidden;
    border: 1px solid #e9c7d4;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(90, 48, 64, 0.07);
}

.booking-success-ticket-heading {
    padding: 21px 24px 18px;
    border-bottom: 1px dashed #e8c9d5;
    background: linear-gradient(120deg, #fff1f6, #fff8fa);
    text-align: center;
}

.booking-success-ticket-heading span {
    color: #d93473;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.booking-success-ticket-heading h3 {
    margin: 5px 0 0;
    font-family: Georgia, serif;
    color: #403439;
    font-size: 24px;
    font-weight: 500;
}


/* =========================================================
   SUCCESS DATE + TIME
========================================================= */

.booking-success-date-time {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid #f1e0e6;
}

.booking-success-date-time > div {
    padding: 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 11px;
    align-items: center;
}

.booking-success-date-time > div:first-child {
    border-right: 1px solid #f1e0e6;
}

.booking-success-date-time i {
    grid-row: 1 / 3;
    color: #d93473;
    font-size: 20px;
}

.booking-success-date-time span,
.booking-success-bottom span,
.booking-success-label {
    color: #9a7e89;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.booking-success-date-time strong {
    margin-top: 3px;
    color: #43373c;
    font-size: 13px;
}


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

.booking-success-services {
    padding: 20px 24px;
    border-bottom: 1px solid #f1e0e6;
}

.booking-success-label {
    display: block;
    margin-bottom: 10px;
    color: #d93473;
}

.booking-success-service-row {
    padding: 9px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #f5e8ed;
    color: #55474d;
    font-size: 12px;
}

.booking-success-service-row:first-of-type {
    border-top: 0;
}

.booking-success-service-row strong {
    flex-shrink: 0;
    color: #d93473;
}


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

.booking-success-bottom {
    padding: 21px 24px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    background: #fff8fa;
}

.booking-success-bottom > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.booking-success-bottom > div:last-child {
    text-align: right;
}

.booking-success-bottom strong {
    color: #42363a;
    font-size: 15px;
}

.booking-success-bottom .booking-success-price {
    color: #d93473;
    font-size: 20px;
}

.booking-success-note {
    margin-top: 14px;
    padding: 13px 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    background: #fff3f7;
    color: #76646b;
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   SERVICE MODAL
========================================================= */

.booking-modal-open {
    overflow: hidden;
}

.service-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 27, 33, 0.58);
    backdrop-filter: blur(5px);
}

.service-modal-content {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    max-height: 86vh;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 34px;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(39, 28, 33, 0.28);
}

.service-modal-content::-webkit-scrollbar {
    width: 6px;
}

.service-modal-content::-webkit-scrollbar-track {
    background: #fff4f7;
}

.service-modal-content::-webkit-scrollbar-thumb {
    background: #e2a0b9;
    border-radius: 999px;
}

.service-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.service-modal-header h2 {
    margin: 0;
    font-family: Georgia, serif;
    color: #3d3236;
    font-size: 32px;
    font-weight: 500;
}

.service-modal-close {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: #fff0f4;
    color: #d93473;
    font-size: 25px;
    cursor: pointer;
}


/* =========================================================
   SERVICE CATEGORIES
========================================================= */

.booking-service-categories {
    margin: 28px 0 24px;
    padding: 2px 0 7px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
}

.booking-category-button {
    flex-shrink: 0;
    padding: 10px 17px;
    border: 1px solid #ead0da;
    border-radius: 999px;
    background: #ffffff;
    color: #6f6167;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.booking-category-button.active {
    border-color: #d93473;
    background: #d93473;
    color: #ffffff;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.booking-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.booking-modal-service {
    min-height: 88px;
    padding: 19px 18px 19px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    border: 1px solid #eed9e1;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #fff9fb);
}

.booking-modal-service-info h3 {
    margin: 0 0 9px;
    font-family: Georgia, serif;
    color: #43373b;
    font-size: 17px;
    font-weight: 500;
}

.booking-modal-add-button {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #efc2d2;
    border-radius: 50%;
    background: linear-gradient(135deg, #fce5ee, #f7cadb);
    color: #d93473;
    cursor: pointer;
}

.booking-modal-add-button.added,
.booking-modal-add-button:disabled {
    border-color: #d93473;
    background: #d93473;
    color: #ffffff;
}

.booking-modal-coming-soon {
    grid-column: 1 / -1;
    padding: 30px 20px;
    border: 1px dashed #e7b5c8;
    border-radius: 18px;
    background: #fff8fa;
    color: #806f76;
    text-align: center;
}

.booking-service-addon-label {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #d93473;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.booking-service-note {
    margin: 8px 0 0;
    color: #7d6d73;
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes bookingHeroEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes bookingStepEnter {
    from {
        opacity: 0;
        transform: translateY(17px);
    }

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

.booking-step-enter {
    animation: bookingStepEnter 0.48s ease both;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .booking-date-time-grid {
        max-width: 650px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .booking-time-slots {
        max-height: none;
    }

}


@media (max-width: 820px) {

    .booking-hero {
        min-height: 320px;
        padding: 60px 22px;
    }

    .booking-main-section {
        padding: 52px 18px 78px;
    }

    .booking-step {
        padding: 38px 28px;
        border-radius: 24px;
    }

    .booking-details-grid,
    .booking-review-two-column {
        grid-template-columns: 1fr;
    }

    .booking-full-field {
        grid-column: auto;
    }

    .booking-service-list {
        grid-template-columns: 1fr;
    }

    .booking-progress-line {
        max-width: 65px;
    }

}


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

@media (max-width: 560px) {

    .booking-hero {
        min-height: 290px;
        padding: 50px 18px;
    }

    .booking-hero::before,
    .booking-hero::after {
        display: none;
    }

    .booking-hero h1 {
        font-size: 38px;
    }

    .booking-progress-section {
        padding: 24px 8px;
    }

    .booking-progress-step {
        width: 65px;
    }

    .booking-progress-step span {
        width: 34px;
        height: 34px;
        margin-bottom: 6px;
        font-size: 12px;
    }

    .booking-progress-step p {
        font-size: 8px;
    }

    .booking-progress-line {
        margin-top: 17px;
    }

    .booking-main-section {
        padding: 37px 12px 65px;
    }

    .booking-step {
        padding: 30px 17px;
        border-radius: 21px;
    }

    .booking-step-heading {
        margin-bottom: 29px;
    }

    .booking-step-heading h2,
    .booking-success h2 {
        font-size: 31px;
    }

    .booking-service-total {
        padding: 19px;
        gap: 15px;
    }


    /* Calendar */

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

    .booking-calendar-top {
        align-items: flex-start;
    }

    .booking-calendar-title h3 {
        font-size: 19px;
    }

    .booking-calendar-navigation-button {
        width: 35px;
        height: 35px;
    }

    .booking-calendar-weekdays,
    .booking-calendar-days {
        gap: 4px;
    }

    .booking-calendar-day {
        font-size: 11px;
    }

    .booking-calendar-selected {
        padding: 13px;
    }


    /* Information card */

    .booking-time-help-card {
        padding: 19px 17px;
        border-radius: 20px;
    }

    .booking-time-help-section {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 12px;
    }

    .booking-time-help-icon {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .booking-time-help-section h3 {
        font-size: 17px;
    }

    .booking-time-help-section p {
        font-size: 12px;
    }

    .booking-call-help-text {
        font-size: 13px !important;
    }

    .booking-visible-phone-number {
        font-size: 14px;
    }

    .booking-time-call-button {
        width: 100%;
        box-sizing: border-box;
    }


    /* Time */

    .booking-time-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-time-slot,
    .booking-time-button {
        min-height: 48px;
        font-size: 11px;
    }


    /* Appointment display */

    .selected-appointment-display {
        align-items: flex-start;
        padding: 16px;
    }


    /* Buttons */

    .booking-step-actions {
        align-items: stretch;
    }

    .booking-step-actions .primary-button {
        flex: 1;
        padding-left: 16px;
        padding-right: 16px;
    }


    /* Review */

    .booking-review-section {
        padding: 18px;
    }

    .booking-review-total {
        padding: 20px;
    }


    /* Success */

    .booking-success {
        padding: 44px 16px 38px;
        border-radius: 22px;
    }

    .booking-success-date-time {
        grid-template-columns: 1fr;
    }

    .booking-success-date-time > div:first-child {
        border-right: 0;
        border-bottom: 1px solid #f1e0e6;
    }

    .booking-success-bottom {
        padding: 19px;
        gap: 15px;
    }


    /* Modal */

    .service-modal {
        padding: 11px;
    }

    .service-modal-content {
        max-height: 91vh;
        padding: 24px 17px;
        border-radius: 21px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .booking-progress-step {
        width: 55px;
    }

    .booking-progress-step p {
        font-size: 7.5px;
    }

    .booking-service-total,
    .booking-review-total,
    .booking-success-bottom {
        flex-direction: column;
    }

    .booking-service-total > div:last-child,
    .booking-review-total > div:last-child,
    .booking-success-bottom > div:last-child {
        text-align: left;
    }

    .booking-step-actions {
        flex-direction: column;
    }

    .booking-back-button {
        order: 2;
    }

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

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .booking-hero-content,
    .booking-step-enter {
        animation: none !important;
    }

    .booking-time-slot,
    .booking-time-button,
    .primary-button,
    .selected-service-item,
    .booking-modal-service,
    .booking-calendar-day,
    .booking-calendar-navigation-button {
        transition: none !important;
    }

}


/* =========================================================
   END OF BOOKING.CSS
========================================================= */