/* ==================================================
   REINA BEAUTY SALON
   MODERN BOOKING PAGE
================================================== */


.booking-modern-page {

    --bk-black: #171313;
    --bk-soft-black: #282222;

    --bk-pink: #d7a09b;
    --bk-pink-soft: #f6e9e7;
    --bk-pink-light: #fcf7f6;

    --bk-gold: #bf9955;
    --bk-gold-light: #dfc079;

    --bk-white: #ffffff;
    --bk-cream: #fcfaf8;

    --bk-grey: #7d7474;

    --bk-line:
        rgba(23, 19, 19, 0.12);

    margin: 0;

    background:
        var(--bk-cream);

    color:
        var(--bk-black);

    font-family:
        "DM Sans",
        sans-serif;

}


.booking-modern-page h1,
.booking-modern-page h2,
.booking-modern-page h3 {

    font-family:
        "Playfair Display",
        serif;

    font-weight:
        500;

}


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

.booking-modern-page
.main-header {

    min-height:
        84px;

    padding:
        0 6%;

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid rgba(20, 15, 15, 0.06);

}


.booking-modern-page
.logo-img {

    height:
        62px;

    max-width:
        240px;

}


.booking-modern-page
.main-nav {

    gap:
        30px;

}


.booking-modern-page
.main-nav a {

    position:
        relative;

    padding:
        8px 0;

    color:
        var(--bk-black);

    font-size:
        13px;

    font-weight:
        500;

    text-decoration:
        none;

}


.booking-modern-page
.main-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        2px;

    width:
        0;

    height:
        1px;

    background:
        var(--bk-gold);

    transition:
        width 0.3s ease;

}


.booking-modern-page
.main-nav a:hover::after {

    width:
        100%;

}


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

.booking-hero {

    padding:
        105px 24px 95px;

    overflow:
        hidden;

    background:
        var(--bk-soft-black);

    color:
        white;

}


.booking-hero-inner {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        60px;

}


.booking-eyebrow {

    display:
        inline-block;

    margin-bottom:
        24px;

    color:
        var(--bk-gold-light);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.24em;

}


.booking-hero h1 {

    max-width:
        780px;

    margin:
        0;

    font-size:
        clamp(55px, 7vw, 92px);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


.booking-hero h1 em {

    display:
        block;

    color:
        #efc9c4;

    font-weight:
        500;

}


.booking-hero p {

    max-width:
        550px;

    margin:
        30px 0 0;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        15px;

    font-weight:
        300;

    line-height:
        1.8;

}


.booking-hero-number {

    padding-bottom:
        12px;

    color:
        rgba(255, 255, 255, 0.22);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        72px;

}


/* =========================
   WRAPPER
========================= */

.booking-modern-wrapper {

    padding:
        105px 24px 130px;

}


.booking-modern-container {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

}


/* =========================
   INTRO
========================= */

.booking-intro {

    display:
        grid;

    grid-template-columns:
        1.3fr 0.7fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        65px;

}


.booking-small-label {

    display:
        block;

    margin-bottom:
        15px;

    color:
        var(--bk-gold);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.21em;

}


.booking-intro h2 {

    margin:
        0;

    font-size:
        clamp(40px, 5vw, 61px);

    line-height:
        1.08;

}


.booking-intro > p {

    margin:
        0;

    color:
        var(--bk-grey);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================
   ACCOUNT NOTE
========================= */

.booking-account-note {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        24px;

    align-items:
        center;

    margin-bottom:
        60px;

    padding:
        25px 28px;

    background:
        var(--bk-pink-soft);

    border-radius:
        18px;

}


.booking-note-icon {

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        white;

    border-radius:
        50%;

    color:
        var(--bk-gold);

}


.booking-account-note strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        14px;

}


.booking-account-note p {

    margin:
        0;

    color:
        var(--bk-grey);

    font-size:
        13px;

}


.booking-note-links {

    display:
        flex;

    gap:
        18px;

}


.booking-note-links a {

    color:
        var(--bk-black);

    font-size:
        12px;

    font-weight:
        600;

    text-decoration:
        none;

    border-bottom:
        1px solid var(--bk-black);

}


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

.booking-progress {

    display:
        grid;

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

    margin-bottom:
        70px;

    border-top:
        1px solid var(--bk-line);

}


.booking-progress-step {

    position:
        relative;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 12px 0 0;

    color:
        #aaa;

    border-top:
        2px solid transparent;

    transition:
        all 0.3s ease;

}


.booking-progress-step.active {

    color:
        var(--bk-black);

    border-top-color:
        var(--bk-gold);

}


.progress-number {

    font-size:
        10px;

    font-weight:
        600;

}


.progress-name {

    font-size:
        11px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


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

.booking-step {

    display:
        none;

    animation:
        bookingFade 0.45s ease;

}


.booking-step.active {

    display:
        block;

}


@keyframes bookingFade {

    from {

        opacity:
            0;

        transform:
            translateY(12px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.booking-step-heading {

    display:
        grid;

    grid-template-columns:
        1.3fr 0.7fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        55px;

}


.booking-step-heading > div {

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        25px;

    align-items:
        start;

}


.booking-step-number {

    padding-top:
        12px;

    color:
        var(--bk-gold);

    font-size:
        11px;

}


.booking-step-heading h2 {

    margin:
        0;

    font-size:
        clamp(40px, 4vw, 58px);

    line-height:
        1.08;

}


.booking-step-heading > p {

    margin:
        0;

    color:
        var(--bk-grey);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================
   BACK BUTTON
========================= */

.booking-back {

    margin-bottom:
        35px;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    color:
        var(--bk-grey);

    font-family:
        inherit;

    font-size:
        12px;

    cursor:
        pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.booking-back:hover {

    color:
        var(--bk-black);

    transform:
        translateX(-4px);

}


/* =========================
   SPECIALISTS
========================= */

.modern-specialists-grid {

    display:
        grid;

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

    border-top:
        1px solid var(--bk-line);

    border-left:
        1px solid var(--bk-line);

}


.modern-specialist-card {

    position:
        relative;

    min-height:
        360px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    justify-content:
        space-between;

    text-align:
        left;

    background:
        white;

    border:
        0;

    border-right:
        1px solid var(--bk-line);

    border-bottom:
        1px solid var(--bk-line);

    color:
        var(--bk-black);

    cursor:
        pointer;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

}


.modern-specialist-card:hover {

    z-index:
        2;

    transform:
        translateY(-8px);

    background:
        var(--bk-pink-light);

    box-shadow:
        0 20px 45px
        rgba(30, 20, 20, 0.08);

}


.modern-specialist-card.selected {

    background:
        var(--bk-pink-soft);

}


.specialist-card-index {

    color:
        var(--bk-gold);

    font-size:
        10px;

}


.specialist-avatar {

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        15px 0;

    background:
        var(--bk-soft-black);

    border-radius:
        50%;

    color:
        #efc9c4;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        38px;

}


.specialist-card-content > span {

    color:
        var(--bk-grey);

    font-size:
        9px;

    letter-spacing:
        0.17em;

}


.specialist-card-content h3 {

    margin:
        7px 0 0;

    font-size:
        31px;

}


.specialist-select-icon {

    position:
        absolute;

    right:
        28px;

    bottom:
        28px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--bk-line);

    border-radius:
        50%;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


.modern-specialist-card:hover
.specialist-select-icon {

    transform:
        rotate(-35deg);

    background:
        var(--bk-black);

    color:
        white;

}


/* =========================
   SELECTED SUMMARY
========================= */

.booking-selection-summary {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        30px;

    padding:
        18px 0;

    border-top:
        1px solid var(--bk-line);

    border-bottom:
        1px solid var(--bk-line);

}


.booking-selection-summary span {

    color:
        var(--bk-grey);

    font-size:
        11px;

    text-transform:
        uppercase;

}


.booking-selection-summary strong {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        20px;

    font-weight:
        500;

}


/* =========================
   SERVICE OPTIONS
========================= */

.modern-services-selection {

    display:
        grid;

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

    gap:
        18px;

}


.modern-service-option {

    min-height:
        180px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        25px;

    align-items:
        center;

    padding:
        28px;

    text-align:
        left;

    background:
        white;

    border:
        1px solid var(--bk-line);

    border-radius:
        16px;

    color:
        var(--bk-black);

    cursor:
        pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.modern-service-option:hover {

    transform:
        translateY(-4px);

    background:
        var(--bk-pink-light);

    box-shadow:
        0 18px 40px
        rgba(30, 20, 20, 0.06);

}


.modern-service-option.selected {

    background:
        var(--bk-pink-soft);

    border-color:
        var(--bk-pink);

}


.service-option-index {

    align-self:
        flex-start;

    color:
        var(--bk-gold);

    font-size:
        10px;

}


.service-option-label {

    color:
        var(--bk-grey);

    font-size:
        9px;

    letter-spacing:
        0.18em;

}


.modern-service-option h3 {

    margin:
        10px 0 0;

    font-size:
        24px;

    line-height:
        1.25;

}


.service-option-arrow {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--bk-line);

    border-radius:
        50%;

}


/* =========================
   SELECTED INFO
========================= */

.booking-selected-info {

    display:
        grid;

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

    gap:
        30px;

    margin-bottom:
        55px;

}


.booking-selected-info > div {

    padding:
        20px 0;

    border-top:
        1px solid var(--bk-line);

}


.booking-selected-info span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--bk-gold);

    font-size:
        9px;

    letter-spacing:
        0.2em;

}


.booking-selected-info strong {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        22px;

    font-weight:
        500;

}


/* =========================
   DATES
========================= */

.date-section {

    margin-bottom:
        65px;

}


.date-section-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    margin-bottom:
        28px;

}


.date-section-top h3,
.hours-heading h3 {

    margin:
        0;

    font-size:
        30px;

}


.date-navigation {

    display:
        flex;

    gap:
        8px;

}


.date-navigation button {

    width:
        44px;

    height:
        44px;

    background:
        white;

    border:
        1px solid var(--bk-line);

    border-radius:
        50%;

    color:
        var(--bk-black);

    cursor:
        pointer;

    transition:
        all 0.25s ease;

}


.date-navigation button:hover:not(:disabled) {

    background:
        var(--bk-black);

    color:
        white;

}


.date-navigation button:disabled {

    opacity:
        0.3;

    cursor:
        default;

}


.modern-date-grid {

    display:
        grid;

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

    gap:
        9px;

}


.modern-date-card {

    min-height:
        130px;

    padding:
        18px 10px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    align-items:
        center;

    background:
        white;

    border:
        1px solid var(--bk-line);

    border-radius:
        14px;

    color:
        var(--bk-black);

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.modern-date-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--bk-pink);

}


.modern-date-card.selected {

    background:
        var(--bk-black);

    border-color:
        var(--bk-black);

    color:
        white;

}


.date-day-name {

    color:
        var(--bk-grey);

    font-size:
        10px;

    text-transform:
        uppercase;

}


.modern-date-card.selected
.date-day-name {

    color:
        rgba(255, 255, 255, 0.6);

}


.modern-date-card strong {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        33px;

    font-weight:
        500;

}


.date-month {

    font-size:
        10px;

    text-transform:
        uppercase;

}


/* =========================
   HOURS
========================= */

.hours-section {

    padding-top:
        50px;

    border-top:
        1px solid var(--bk-line);

}


.hours-heading {

    margin-bottom:
        28px;

}


.modern-hours-grid {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.modern-hour-button {

    min-width:
        105px;

    padding:
        14px 20px;

    background:
        white;

    border:
        1px solid var(--bk-line);

    border-radius:
        100px;

    color:
        var(--bk-black);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        all 0.25s ease;

}


.modern-hour-button:hover {

    border-color:
        var(--bk-pink);

    transform:
        translateY(-2px);

}


.modern-hour-button.selected {

    background:
        var(--bk-black);

    border-color:
        var(--bk-black);

    color:
        white;

}


.hours-placeholder,
.booking-loading {

    color:
        var(--bk-grey);

    font-size:
        13px;

}


.no-hours-message {

    width:
        100%;

    padding:
        30px;

    background:
        var(--bk-pink-light);

    border-radius:
        14px;

    color:
        var(--bk-grey);

    text-align:
        center;

}


.no-hours-message span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--bk-gold);

}


/* =========================
   FINAL
========================= */

.booking-final-layout {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        70px;

}


.booking-final-summary {

    padding:
        40px;

    background:
        var(--bk-soft-black);

    border-radius:
        20px;

    color:
        white;

}


.booking-final-summary
.booking-small-label {

    color:
        var(--bk-gold-light);

}


.final-summary-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);

}


.final-summary-row span {

    color:
        rgba(255, 255, 255, 0.5);

    font-size:
        11px;

    text-transform:
        uppercase;

}


.final-summary-row strong {

    max-width:
        65%;

    text-align:
        right;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        18px;

    font-weight:
        500;

}


.final-summary-message {

    margin-top:
        45px;

}


.final-summary-message > span {

    display:
        block;

    color:
        var(--bk-pink);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        72px;

    line-height:
        0.5;

}


.final-summary-message p {

    margin:
        20px 0 0;

    color:
        #efc9c4;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        25px;

    font-style:
        italic;

    line-height:
        1.35;

}


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

.booking-client-form {

    padding:
        15px 0;

}


.modern-form-group {

    margin-bottom:
        30px;

}


.modern-form-group label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--bk-grey);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.modern-form-group input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        17px 0;

    background:
        transparent;

    border:
        0;

    border-bottom:
        1px solid var(--bk-line);

    border-radius:
        0;

    outline:
        none;

    color:
        var(--bk-black);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        16px;

    transition:
        border-color 0.25s ease;

}


.modern-form-group input:focus {

    border-bottom-color:
        var(--bk-gold);

}


.booking-confirm-button {

    position:
        relative;

    width:
        100%;

    margin-top:
        12px;

    padding:
        9px 10px 9px 26px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--bk-black);

    border:
        0;

    border-radius:
        100px;

    color:
        white;

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.booking-confirm-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        var(--bk-pink);

    transform:
        translateX(-101%);

    transition:
        transform 0.4s ease;

}


.booking-confirm-button > span {

    position:
        relative;

    z-index:
        2;

}


.booking-confirm-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(20, 15, 15, 0.16);

}


.booking-confirm-button:hover::before {

    transform:
        translateX(0);

}


.confirm-arrow {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        white;

    border-radius:
        50%;

    color:
        var(--bk-black);

    transition:
        transform 0.3s ease;

}


.booking-confirm-button:hover
.confirm-arrow {

    transform:
        rotate(-35deg);

}


.booking-form-note {

    margin:
        18px 0 0;

    color:
        var(--bk-grey);

    font-size:
        11px;

    text-align:
        center;

}


/* =========================
   EMPTY
========================= */

.booking-empty {

    grid-column:
        1 / -1;

    padding:
        70px 30px;

    background:
        white;

    border:
        1px solid var(--bk-line);

    border-radius:
        16px;

    text-align:
        center;

}


.booking-empty > span {

    color:
        var(--bk-gold);

    font-size:
        24px;

}


.booking-empty h3 {

    margin:
        20px 0 8px;

    font-size:
        27px;

}


.booking-empty p {

    margin:
        0;

    color:
        var(--bk-grey);

    font-size:
        13px;

}


/* =========================
   BOTTOM
========================= */

.booking-bottom-message {

    padding:
        75px 24px;

    background:
        var(--bk-soft-black);

    color:
        white;

    text-align:
        center;

}


.booking-bottom-message span {

    color:
        var(--bk-gold-light);

    font-size:
        9px;

    letter-spacing:
        0.25em;

}


.booking-bottom-message p {

    margin:
        15px 0 0;

    color:
        #efc9c4;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        30px;

    font-style:
        italic;

}


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

@media (
    max-width: 900px
) {

    .booking-modern-page
    .main-header {

        min-height:
            72px;

        padding:
            0 20px;

    }


    .booking-modern-page
    .logo-img {

        height:
            50px;

    }


    .booking-hero-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .booking-hero-number {

        display:
            none;

    }


    .booking-intro,
    .booking-step-heading {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .modern-specialists-grid {

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

    }


    .modern-services-selection {

        grid-template-columns:
            1fr;

    }


    .modern-date-grid {

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

    }


    .booking-final-layout {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

}


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

@media (
    max-width: 600px
) {

    .booking-hero {

        padding:
            75px 18px 70px;

    }


    .booking-hero h1 {

        font-size:
            52px;

    }


    .booking-modern-wrapper {

        padding:
            75px 18px 90px;

    }


    .booking-account-note {

        grid-template-columns:
            auto 1fr;

    }


    .booking-note-links {

        grid-column:
            1 / -1;

        padding-left:
            69px;

    }


    .booking-progress {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            5px;

    }


    .booking-progress-step {

        display:
            block;

        padding:
            12px 0 0;

    }


    .progress-name {

        display:
            none;

    }


    .modern-specialists-grid {

        grid-template-columns:
            1fr;

    }


    .modern-specialist-card {

        min-height:
            275px;

    }


    .booking-step-heading > div {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .booking-step-number {

        padding:
            0;

    }


    .booking-step-heading h2 {

        font-size:
            42px;

    }


    .booking-selected-info {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .date-section-top {

        align-items:
            flex-start;

        gap:
            20px;

    }


    .modern-date-grid {

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

    }


    .modern-date-card {

        min-height:
            115px;

    }


    .modern-hours-grid {

        display:
            grid;

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

    }


    .modern-hour-button {

        min-width:
            0;

        padding:
            13px 8px;

    }


    .booking-final-summary {

        padding:
            30px 24px;

    }


    .final-summary-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;

    }


    .final-summary-row strong {

        max-width:
            100%;

        text-align:
            left;

    }


    .booking-bottom-message p {

        font-size:
            25px;

    }

}


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

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

    .booking-modern-page *,
    .booking-modern-page *::before,
    .booking-modern-page *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}