/* =========================================================
   D'SURYA VILLA
   BOOKING SYSTEM STYLES
   ---------------------------------------------------------
   File:
   /assets/css/booking.css

   Used by:
   - booking.php
   - checkout.php
========================================================= */


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

.booking-page-hero {
    position: relative;

    min-height: 68vh;

    display: flex;
    align-items: flex-end;

    padding: 110px 0 95px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    color: var(--white);

    overflow: hidden;
}


.booking-page-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,18,15,0.82),
            rgba(5,18,15,0.16)
        );

    pointer-events: none;
}


.booking-hero-content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}


.booking-hero-content h1 {
    margin-bottom: 22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            3.6rem,
            7vw,
            6.5rem
        );

    font-weight: 400;

    line-height: 0.96;

    letter-spacing: -0.025em;
}


.booking-hero-content > p:not(.hero-eyebrow) {
    max-width: 650px;

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

    font-size: 1.05rem;

    line-height: 1.7;
}


/* =========================================================
   BOOKING MAIN LAYOUT
========================================================= */

.booking-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 25px;

    align-items: start;
}


.booking-main {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   BOOKING CARDS
========================================================= */

.booking-card,
.booking-summary-card {
    padding: 34px;

    background: var(--white);

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

    border-radius: 22px;

    box-shadow:
        0 20px 60px
        rgba(25,38,32,0.055);
}


.booking-card-heading {
    margin-bottom: 28px;
}


.booking-card-heading h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight: 400;

    line-height: 1.05;
}


/* =========================================================
   UNIT SELECTOR
========================================================= */

.booking-unit-selector {
    display: grid;

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

    gap: 12px;
}


.booking-unit-option {
    position: relative;

    min-height: 120px;

    padding: 22px;

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

    border-radius: 16px;

    background:
        var(--white);

    text-align: left;

    cursor: pointer;

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


.booking-unit-option:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--gold);

    box-shadow:
        0 15px 35px
        rgba(25,38,32,0.08);
}


.booking-unit-option.active {
    background:
        rgba(18,53,45,0.055);

    border-color:
        var(--forest);

    box-shadow:
        0 12px 35px
        rgba(18,53,45,0.08);
}


.booking-unit-option span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--forest);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.45rem;

    font-weight: 400;
}


.booking-unit-option small {
    display: block;

    color:
        var(--muted);

    font-size: 0.78rem;

    line-height: 1.5;
}


/* =========================================================
   BOTH UNITS OPTION
========================================================= */

.booking-both-option {
    grid-column: 1 / -1;

    min-height: 105px;

    border:
        1px solid
        rgba(200,169,107,0.50);

    background:
        linear-gradient(
            135deg,
            rgba(200,169,107,0.08),
            rgba(18,53,45,0.035)
        );
}


.booking-both-option::before {
    content: "FULL VILLA";

    position: absolute;

    top: 17px;
    right: 20px;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(200,169,107,0.4);

    border-radius: 999px;

    color:
        var(--gold);

    font-size:
        0.58rem;

    letter-spacing:
        2px;

    font-weight:
        700;
}


.booking-both-option:hover {
    border-color:
        var(--gold);

    background:
        linear-gradient(
            135deg,
            rgba(200,169,107,0.14),
            rgba(18,53,45,0.06)
        );
}


.booking-both-option.active {
    background:
        var(--forest);

    border-color:
        var(--forest);

    color:
        var(--white);

    box-shadow:
        0 18px 45px
        rgba(11,33,28,0.16);
}


.booking-both-option.active span {
    color:
        var(--white);
}


.booking-both-option.active small {
    color:
        rgba(255,255,255,0.68);
}


.booking-both-option.active::before {
    color:
        var(--gold-light);

    border-color:
        rgba(223,198,143,0.45);
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar {
    width: 100%;
}


.calendar-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-bottom:
        20px;
}


.calendar-header h3 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.7rem;

    font-weight:
        400;

    text-align:
        center;
}


.calendar-nav {
    width: 42px;
    height: 42px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        var(--white);

    color:
        var(--forest);

    cursor:
        pointer;

    font-size:
        1.5rem;

    line-height:
        1;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.calendar-nav:hover {
    transform:
        translateY(-2px);

    background:
        rgba(200,169,107,0.08);

    border-color:
        var(--gold);
}


/* =========================================================
   CALENDAR WEEKDAY
========================================================= */

.calendar-weekdays,
.calendar-days {
    display: grid;

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

    gap: 5px;
}


.calendar-weekdays span {
    padding:
        9px 0;

    color:
        var(--muted);

    text-align:
        center;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


/* =========================================================
   CALENDAR DAY
========================================================= */

.calendar-day {
    position: relative;

    min-height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-bottom: 13px;

    border:
        1px solid
        transparent;

    border-radius: 12px;

    background:
        rgba(18,53,45,0.035);

    color:
        var(--forest);

    cursor:
        pointer;

    font-size:
        0.85rem;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}


.calendar-day:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--gold);

    background:
        rgba(200,169,107,0.08);
}


.calendar-day.empty {
    visibility:
        hidden;

    pointer-events:
        none;
}


/* =========================================================
   BOOKED / BLOCKED
========================================================= */

.calendar-day.booked,
.calendar-day.blocked {
    cursor:
        not-allowed;

    background:
        rgba(90,90,90,0.07);

    color:
        rgba(0,0,0,0.28);

    text-decoration:
        line-through;
}


.calendar-day.booked:hover,
.calendar-day.blocked:hover {
    transform:
        none;

    border-color:
        transparent;

    background:
        rgba(90,90,90,0.07);
}


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

.calendar-day.selected {
    background:
        var(--forest);

    border-color:
        var(--forest);

    color:
        var(--white);

    box-shadow:
        0 8px 22px
        rgba(18,53,45,0.18);
}


.calendar-day.selected:hover {
    background:
        var(--forest-dark);

    border-color:
        var(--forest-dark);
}


.calendar-day.in-range {
    background:
        rgba(200,169,107,0.16);

    border-color:
        rgba(200,169,107,0.22);

    color:
        var(--forest);
}


/* =========================================================
   PRICE LABELS
========================================================= */

.calendar-day::after {
    pointer-events:
        none;
}


.calendar-day.price-weekday::after,
.calendar-day.price-weekend::after {
    content:
        attr(data-price);

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    transform:
        translateX(-50%);

    color:
        var(--gold);

    font-size:
        0.49rem;

    font-weight:
        700;

    white-space:
        nowrap;
}


.calendar-day.selected.price-weekday::after,
.calendar-day.selected.price-weekend::after {
    color:
        var(--gold-light);
}


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

.calendar-legend {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        0.72rem;
}


.calendar-legend span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;
}


.legend-dot {
    width:
        9px;

    height:
        9px;

    display:
        inline-block;

    border-radius:
        50%;
}


.legend-dot.available {
    background:
        #C9D9D4;
}


.legend-dot.selected {
    background:
        var(--forest);
}


.legend-dot.booked {
    background:
        #999999;
}


.legend-dot.blocked {
    background:
        #B88962;
}


/* =========================================================
   DATE SUMMARY
========================================================= */

.booking-date-summary {
    margin-top:
        18px;

    padding:
        15px 16px;

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

    border-radius:
        12px;

    background:
        rgba(18,53,45,0.035);

    color:
        var(--muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


/* =========================================================
   GUEST SECTION
========================================================= */

.guest-input-row {
    display:
        grid;

    grid-template-columns:
        180px
        minmax(0,1fr);

    gap:
        20px;
}


.guest-input-row label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    color:
        var(--forest);

    font-size:
        0.78rem;

    font-weight:
        700;
}


.guest-input-row input,
.guest-input-row textarea {
    width:
        100%;

    padding:
        13px 14px;

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

    border-radius:
        10px;

    background:
        var(--white);

    color:
        var(--charcoal);

    outline:
        none;

    font-family:
        inherit;

    resize:
        vertical;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.guest-input-row input:focus,
.guest-input-row textarea:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(200,169,107,0.10);
}


/* =========================================================
   BOOKING SUMMARY
========================================================= */

.booking-summary-card {
    position:
        sticky;

    top:
        110px;
}


.booking-summary-card h2 {
    margin:
        8px 0 25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        2.4rem;

    font-weight:
        400;
}


.booking-summary-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        13px 0;

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

    font-size:
        0.82rem;
}


.booking-summary-row span {
    color:
        var(--muted);
}


.booking-summary-row strong {
    color:
        var(--forest);

    text-align:
        right;
}


.booking-price-breakdown {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin:
        18px 0;
}


.price-breakdown-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        var(--muted);

    font-size:
        0.78rem;
}


.price-breakdown-row strong {
    color:
        var(--forest);
}


.booking-total {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 0;

    border-top:
        1px solid
        var(--forest);

    color:
        var(--forest);
}


.booking-total strong {
    color:
        var(--gold);

    font-size:
        1.15rem;
}


.booking-continue {
    width:
        100%;

    margin-top:
        10px;

    border:
        0;

    cursor:
        pointer;
}


.booking-continue:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;
}


.booking-note {
    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        0.7rem;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   FULL VILLA SUMMARY
========================================================= */

.booking-full-villa-note {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    margin:
        18px 0;

    padding:
        15px;

    border:
        1px solid
        rgba(200,169,107,0.35);

    border-radius:
        12px;

    background:
        rgba(200,169,107,0.07);
}


.booking-full-villa-note strong {
    color:
        var(--forest);

    font-size:
        0.85rem;
}


.booking-full-villa-note span {
    color:
        var(--muted);

    font-size:
        0.72rem;

    line-height:
        1.5;
}


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

.checkout-hero {
    position:
        relative;

    min-height:
        60vh;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        100px 0 90px;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    color:
        var(--white);

    overflow:
        hidden;
}


.checkout-hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(5,18,15,0.82),
            rgba(5,18,15,0.10)
        );

    pointer-events:
        none;
}


.checkout-hero-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        850px;
}


.checkout-hero-content h1 {
    margin-bottom:
        22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            3.4rem,
            7vw,
            6rem
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.025em;
}


.checkout-hero-content > p:not(.hero-eyebrow) {
    max-width:
        650px;

    margin-top:
        20px;

    color:
        rgba(255,255,255,0.78);
}


/* =========================================================
   CHECKOUT LAYOUT
========================================================= */

.checkout-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap:
        25px;

    align-items:
        start;
}


.checkout-main {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.checkout-card,
.checkout-summary {
    padding:
        34px;

    background:
        var(--white);

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

    border-radius:
        22px;

    box-shadow:
        0 20px 60px
        rgba(25,38,32,0.055);
}


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

.checkout-form {
    display:
        grid;

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

    gap:
        20px;
}


.checkout-form label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    color:
        var(--forest);

    font-size:
        0.78rem;

    font-weight:
        700;
}


.checkout-form input,
.checkout-form textarea {
    width:
        100%;

    padding:
        14px 15px;

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

    border-radius:
        10px;

    background:
        var(--white);

    color:
        var(--charcoal);

    outline:
        none;

    font-family:
        inherit;

    resize:
        vertical;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.checkout-form input:focus,
.checkout-form textarea:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(200,169,107,0.10);
}


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


/* =========================================================
   CHECKOUT POLICY
========================================================= */

.checkout-policy h2 {
    margin-bottom:
        25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        2.3rem;

    font-weight:
        400;
}


.terms-check {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        var(--muted);

    font-size:
        0.85rem;

    line-height:
        1.5;

    cursor:
        pointer;
}


.terms-check input {
    width:
        16px;

    height:
        16px;

    flex:
        0 0 auto;

    margin-top:
        3px;

    accent-color:
        var(--forest);
}


/* =========================================================
   CHECKOUT SUMMARY
========================================================= */

.checkout-summary {
    position:
        sticky;

    top:
        110px;
}


.checkout-summary h2 {
    margin:
        8px 0 25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        2.6rem;

    font-weight:
        400;
}


.checkout-summary-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        13px 0;

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

    font-size:
        0.82rem;
}


.checkout-summary-row span {
    color:
        var(--muted);
}


.checkout-summary-row strong {
    color:
        var(--forest);

    text-align:
        right;
}


.checkout-breakdown {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    padding:
        18px 0;
}


.checkout-breakdown > div {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        var(--muted);

    font-size:
        0.76rem;
}


.checkout-breakdown > div > span {
    display:
        block;
}


.checkout-breakdown small {
    display:
        block;

    margin-top:
        2px;

    color:
        rgba(0,0,0,0.45);

    font-size:
        0.64rem;
}


.checkout-breakdown strong {
    color:
        var(--forest);
}


.checkout-total {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 0;

    border-top:
        1px solid
        var(--forest);

    color:
        var(--forest);
}


.checkout-total strong {
    color:
        var(--gold);

    font-size:
        1.25rem;
}


.checkout-pay-button {
    width:
        100%;

    margin-top:
        10px;

    border:
        0;
}


.checkout-pay-button:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;
}


.checkout-note {
    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        0.7rem;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .booking-layout {
        grid-template-columns:
            minmax(0,1fr)
            300px;
    }


    .checkout-layout {
        grid-template-columns:
            minmax(0,1fr)
            320px;
    }


    .calendar-day {
        min-height:
            58px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 900px) {

    .booking-layout,
    .checkout-layout {
        grid-template-columns:
            1fr;
    }


    .booking-summary-card,
    .checkout-summary {
        position:
            static;
    }


    .booking-summary-card {
        order:
            -1;
    }

}


@media (max-width: 700px) {

    .booking-page-hero,
    .checkout-hero {
        min-height:
            70vh;

        padding:
            90px 0 65px;
    }


    .booking-hero-content h1,
    .checkout-hero-content h1 {
        font-size:
            3.2rem;

        letter-spacing:
            -1px;
    }


    .booking-card,
    .booking-summary-card,
    .checkout-card,
    .checkout-summary {
        padding:
            24px;
    }


    .booking-unit-selector {
        grid-template-columns:
            1fr;
    }


    .booking-both-option {
        grid-column:
            auto;
    }


    .booking-both-option::before {
        position:
            static;

        display:
            inline-block;

        margin-bottom:
            10px;
    }


    .guest-input-row {
        grid-template-columns:
            1fr;
    }


    .checkout-form {
        grid-template-columns:
            1fr;
    }


    .checkout-form .full-width {
        grid-column:
            auto;
    }


    .calendar-header h3 {
        font-size:
            1.35rem;
    }


    .calendar-weekdays span {
        font-size:
            0.58rem;
    }


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


    .calendar-day {
        min-height:
            49px;

        padding-bottom:
            11px;

        border-radius:
            9px;

        font-size:
            0.72rem;
    }


    .calendar-day.price-weekday::after,
    .calendar-day.price-weekend::after {
        font-size:
            0.40rem;

        bottom:
            4px;
    }


    .calendar-legend {
        gap:
            10px;
    }


    .calendar-legend span {
        font-size:
            0.65rem;
    }

}


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

@media (max-width: 420px) {

    .calendar-nav {
        width:
            36px;

        height:
            36px;
    }


    .calendar-header h3 {
        font-size:
            1.15rem;
    }


    .calendar-day {
        min-height:
            45px;

        font-size:
            0.68rem;
    }


    .calendar-day.price-weekday::after,
    .calendar-day.price-weekend::after {
        font-size:
            0.36rem;
    }


    .booking-hero-content h1,
    .checkout-hero-content h1 {
        font-size:
            2.8rem;
    }

}