/* =========================================================
   GLOBAL
========================================================= */

:root{

    --green:#758b32;
    --green-dark:#556923;
    --green-soft:#eef2df;

    --dark:#202020;
    --text:#555;
    --muted:#858585;

    --line:#dedede;

    --cream:#faf9f5;

    --footer:#e9f0f2;

    --white:#fff;

    --danger:#b52e2e;

    --shadow:
        0 18px 45px rgba(0,0,0,.08);

}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color:#222;

    background:#fff;

    line-height:1.6;

}


button,
input,
select,
textarea{

    font:inherit;

}


button{

    cursor:pointer;

}


a{

    color:inherit;

    text-decoration:none;

}



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

.site-header{

    position:relative;

    z-index:1000;

    background:#fff;

    box-shadow:
        0 2px 15px rgba(0,0,0,.05);

}


.header-inner{

    min-height:86px;

    max-width:1400px;

    margin:auto;

    padding:0 45px;

    display:flex;

    align-items:center;

    gap:30px;

}


.logo{

    display:flex;

    align-items:center;

    margin-right:auto;

}


.logo img{

    width:145px;

    height:auto;

    display:block;

}


.desktop-nav{

    display:flex;

    align-items:center;

    gap:27px;

}


.desktop-nav a{

    position:relative;

    font-size:13px;

    font-weight:600;

    letter-spacing:.7px;

    text-transform:uppercase;

    color:#444;

    padding:10px 0;

}


.desktop-nav a:after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--green);

    transition:.25s;

}


.desktop-nav a:hover:after,
.desktop-nav a.active:after{

    width:100%;

}


.header-book-btn{

    background:var(--green);

    color:#fff;

    padding:13px 20px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}


.header-book-btn:hover{

    background:var(--green-dark);

}


.menu-toggle{

    display:none;

    width:44px;

    height:44px;

    border:0;

    background:transparent;

}


.menu-toggle span{

    display:block;

    width:25px;

    height:2px;

    margin:5px auto;

    background:#222;

    transition:.25s;

}


.mobile-menu{

    display:none;

}



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

.booking-hero{

    min-height:410px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

        linear-gradient(
            rgba(0,0,0,.3),
            rgba(0,0,0,.42)
        ),

        url("images/hom3.JPG")
        center/cover
        no-repeat;

}


.hero-overlay{

    position:absolute;

    inset:0;

    background:
        rgba(0,0,0,.12);

}


.hero-content{

    position:relative;

    z-index:1;

    color:#fff;

    padding:50px 20px;

}


.hero-eyebrow,
.section-eyebrow{

    display:inline-block;

    font-size:11px;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;

}


.hero-content h1{

    margin:12px 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(44px,6vw,72px);

    font-weight:600;

}


.hero-content p{

    font-size:17px;

}



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

.booking-page{

    max-width:1200px;

    margin:0 auto;

    padding:
        50px
        24px
        80px;

}


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

.steps{

    max-width:820px;

    margin:
        0 auto 45px;

    display:grid;

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

    position:relative;

    gap:10px;

}


.steps:before{

    content:"";

    position:absolute;

    top:20px;

    left:12%;

    right:12%;

    height:1px;

    background:#ddd;

    z-index:0;

}


.step{

    position:relative;

    z-index:1;

    text-align:center;

    color:#888;

    background:#fff;

}


.step span{

    display:flex;

    width:40px;

    height:40px;

    margin:
        0 auto 7px;

    align-items:center;

    justify-content:center;

    border:
        1px solid #ccc;

    background:#fff;

    border-radius:50%;

    font-weight:600;

}


.step small{

    font-size:12px;

}


.step.active span,
.step.completed span{

    background:#8ca048;

    color:#fff;

    border-color:#8ca048;

}


.step.active{

    color:#333;

}



/* =========================================================
   STEP CONTENT
========================================================= */

.step-content{

    display:none;

}


.step-content.active{

    display:block;

}


.container{

    max-width:500px;

    margin:0 auto;

}



/* =========================================================
   SEARCH CARD
========================================================= */

.search-card{

    padding:
        30px
        28px;

    background:#fff;

    border:
        1px solid #eee;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);

}


.search-card h2{

    font-weight:500;

    margin:
        0 0 8px;

}


.section-description{

    font-size:14px;

    color:#666;

    margin:
        0 0 24px;

}



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

#calendarWrapper{

    margin-bottom:28px;

}


.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}


.calendar-header h3{

    font-family:
        "Playfair Display",
        serif;

    font-size:20px;

    font-weight:500;

    margin:0;

}


.calendar-header button{

    width:40px;

    height:40px;

    border:0;

    background:#8ca048;

    color:#fff;

    font-size:25px;

    border-radius:4px;

}


.calendar-header button:hover{

    background:#71892f;

}


.weekdays,
#calendar{

    display:grid;

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

    gap:5px;

}


.weekdays{

    text-align:center;

    font-size:12px;

    font-weight:bold;

    color:#777;

    margin-bottom:5px;

}


#calendar .day{

    min-height:42px;

    border:
        1px solid #ddd;

    background:#fff;

    color:#333;

    border-radius:3px;

    position:relative;

    padding:8px 2px;

}


#calendar .day:hover:not(:disabled){

    background:#f1f3eb;

}


#calendar .day.selected-start,
#calendar .day.selected-range{

    background:#8ca048;

    color:#fff;

    border-color:#8ca048;

}


#calendar .day.booked{

    background:#f3f3f3;

    color:#aaa;

    text-decoration:line-through;

    cursor:not-allowed;

}


#calendar .day.disabled{

    color:#bbb;

    background:#fafafa;

    cursor:not-allowed;

}


.calendar-blank{

    min-height:42px;

}


.x{

    display:block;

    font-size:10px;

    line-height:10px;

}


.calendar-legend{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:14px;

    font-size:11px;

    color:#777;

}


.legend{

    display:inline-block;

    width:9px;

    height:9px;

    border-radius:50%;

    background:#fff;

    border:
        1px solid #bbb;

    margin-right:4px;

}


.legend.available{

    background:#fff;

    border-color:#bbb;

}


.legend.selected{

    background:#8ca048;

    border-color:#8ca048;

}


.legend.booked{

    background:#ddd;

    border-color:#ddd;

}



/* =========================================================
   FORMS
========================================================= */

label{

    display:block;

    font-size:13px;

    margin:
        0 0 6px;

    font-weight:600;

}


input,
select,
textarea{

    width:100%;

    padding:12px;

    border:
        1px solid #d6d6d6;

    border-radius:4px;

    background:#fff;

    color:#222;

    outline:none;

}


input:focus,
select:focus,
textarea:focus{

    border-color:#8ca048;

    box-shadow:
        0 0 0 2px
        rgba(140,160,72,.12);

}


textarea{

    resize:vertical;

}


.date-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:14px;

    margin-bottom:16px;

}


.search-card > label{

    margin-top:16px;

}


#roomsContainer{

    margin-top:20px;

}


.guest-room{

    border:
        1px solid #eee;

    padding:16px;

    margin-bottom:12px;

    background:#fafafa;

}


.guest-room-heading{

    font-weight:600;

    margin-bottom:12px;

}


.guest-select-row{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

}



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

.main-btn,
.secondary-btn{

    width:100%;

    border:0;

    border-radius:4px;

    padding:
        14px
        18px;

    font-weight:600;

    transition:.2s;

}


.main-btn{

    background:#8ba63f;

    color:#fff;

    margin-top:18px;

}


.main-btn:hover:not(:disabled){

    background:#71892f;

}


.main-btn:disabled{

    background:#c9cfc0;

    color:#fff;

    cursor:not-allowed;

}


.secondary-btn{

    background:#fff;

    color:#555;

    border:
        1px solid #ccc;

}


.secondary-btn:hover{

    background:#f7f7f7;

}



/* =========================================================
   STEP 2
========================================================= */

.step-container.wide{

    max-width:1120px;

    margin:0 auto;

}


.step-heading{

    text-align:center;

    margin-bottom:30px;

}


.step-heading h2{

    font-family:
        "Playfair Display",
        serif;

    font-size:30px;

    font-weight:600;

    margin:
        0 0 10px;

}


.step-heading > p:last-child{

    color:#666;

    margin:0;

}


.eyebrow{

    margin:
        0 0 8px;

    color:#7f963d;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}



/* =========================================================
   ROOM LAYOUT
========================================================= */

.room-layout{

    display:grid;

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

    gap:28px;

    align-items:start;

}


.room-selection-group{

    margin-bottom:38px;

}


.selection-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:
        1px solid #ddd;

    padding-bottom:12px;

    margin-bottom:18px;

}


.selection-heading span{

    font-size:20px;

    font-weight:500;

}


.selection-heading small{

    color:#777;

}


.room-grid{

    display:grid;

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

    gap:18px;

}


.room-card{

    background:#fff;

    border:
        1px solid #e3e3e3;

    transition:.2s;

    overflow:hidden;

}


.room-card:hover{

    box-shadow:
        0 8px 22px rgba(0,0,0,.08);

}


.room-card.selected{

    border:
        2px solid #8ca048;

}


.room-image-button{

    display:block;

    width:100%;

    border:0;

    padding:0;

    background:#eee;

}


.room-image-button img{

    display:block;

    width:100%;

    height:210px;

    object-fit:cover;

}


.room-card-body{

    padding:18px;

}


.room-card h3{

    font-family:
        "Playfair Display",
        serif;

    font-size:19px;

    font-weight:500;

    margin:
        0 0 10px;

}


.room-card ul{

    list-style:none;

    padding:0;

    margin:
        0 0 14px;

    color:#666;

    font-size:13px;

}


.room-card li{

    padding:3px 0;

}


.room-price{

    font-size:20px;

    font-weight:600;

    margin-bottom:12px;

}


.room-price span{

    font-size:12px;

    font-weight:400;

    color:#777;

}


.select-room-btn{

    width:100%;

    padding:12px;

    border:0;

    background:#8ca048;

    color:#fff;

    border-radius:4px;

}


.select-room-btn:hover{

    background:#71892f;

}


.empty-message{

    padding:20px;

    background:#fafafa;

    border:
        1px solid #eee;

    color:#666;

}



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

.booking-summary,
.final-summary-card,
.guest-form-card{

    background:#fff;

    border:
        1px solid #eee;

    padding:24px;

}


.booking-summary{

    position:sticky;

    top:105px;

}


.booking-summary h2,
.final-summary-card h2,
.guest-form-card h2{

    font-family:
        "Playfair Display",
        serif;

    font-size:21px;

    font-weight:500;

}


.summary-row{

    display:flex;

    justify-content:space-between;

    gap:14px;

    padding:10px 0;

    border-bottom:
        1px solid #eee;

    font-size:13px;

}


.summary-row strong{

    text-align:right;

}


.summary-divider{

    height:14px;

}


.summary-room{

    padding:12px 0;

    border-bottom:
        1px solid #eee;

    display:flex;

    flex-direction:column;

    gap:3px;

}


.summary-room span{

    font-size:14px;

}


.summary-room small{

    color:#777;

}


.summary-actions{

    margin-top:18px;

    display:grid;

    gap:10px;

}


.summary-actions .main-btn{

    margin-top:0;

}



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

.guest-layout{

    display:grid;

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

    gap:28px;

    align-items:start;

}


.form-grid{

    display:grid;

    gap:15px;

}


.form-grid.two{

    grid-template-columns:
        1fr 1fr;

}


.form-group{

    margin-bottom:15px;

}


.form-group textarea{

    resize:vertical;

    min-height:110px;

}


.payment-section{

    margin-top:28px;

    border-top:
        1px solid #eee;

    padding-top:24px;

}


.payment-option{

    display:flex;

    gap:12px;

    align-items:flex-start;

    border:
        1px solid #ddd;

    padding:15px;

    font-weight:400;

}


.payment-option input{

    width:auto;

    margin-top:4px;

}


.payment-option strong{

    display:block;

}


.payment-option small{

    display:block;

    color:#777;

    margin-top:3px;

}


.form-actions{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-top:22px;

}


.form-actions .main-btn{

    margin:0;

}


.final-summary-card{

    position:sticky;

    top:105px;

}


.summary-block{

    border-bottom:
        1px solid #eee;

    padding:
        0 0 18px;

    margin-bottom:18px;

}


.summary-block h3{

    font-size:15px;

    margin:
        0 0 12px;

    font-weight:600;

}


.summary-block p{

    display:flex;

    justify-content:space-between;

    gap:12px;

    font-size:13px;

    margin:7px 0;

}


.summary-block p strong{

    text-align:right;

}


.final-room{

    display:flex;

    justify-content:space-between;

    gap:10px;

    padding:10px 0;

    border-top:
        1px solid #eee;

    font-size:13px;

}


.final-room > div{

    display:flex;

    flex-direction:column;

}


.final-room span{

    color:#666;

}


.total-box{

    background:#f6f8f0;

    padding:16px;

}


.total-box div{

    display:flex;

    justify-content:space-between;

    padding:5px 0;

}


.total-box strong{

    font-size:16px;

}



/* =========================================================
   CONFIRMATION
========================================================= */

.confirmation-container{

    max-width:720px;

    margin:0 auto;

    text-align:center;

}


.confirmation-container h1{

    font-family:
        "Playfair Display",
        serif;

    font-weight:500;

    font-size:34px;

    margin:
        0 0 15px;

}


.confirmation-line{

    width:55px;

    height:3px;

    background:#8ca048;

    margin:
        0 auto 22px;

}


.confirmation-text{

    color:#555;

}


.confirmation-card{

    margin:28px 0;

    padding:26px;

    text-align:left;

    border:
        1px solid #ddd;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

}


.reference-label{

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:11px;

    color:#777;

}


.reference-number{

    font-size:28px;

    font-weight:600;

    margin-top:4px;

}


.confirmation-divider{

    border-top:
        1px solid #eee;

    margin:18px 0;

}


.confirmation-card p{

    margin:8px 0;

    font-size:14px;

}


.confirmation-total{

    background:#f6f8f0;

    padding:12px;

    margin-top:16px;

}


.confirmation-total p{

    display:flex;

    justify-content:space-between;

}


.payment-instructions{

    border:
        1px solid #eee;

    padding:24px;

    margin:25px 0;

    text-align:center;

}


.payment-instructions h2{

    font-family:
        "Playfair Display",
        serif;

    font-weight:500;

}


.payment-instructions a{

    display:inline-block;

    color:#718b32;

    font-weight:600;

    margin:
        4px 0 10px;

}


.pending-note{

    font-size:13px;

    color:#666;

    margin-bottom:0;

}


.confirmation-button{

    max-width:300px;

}



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

.site-footer{

    border-top:
        1px solid #eee;

    background:#e9f0f2;

}


.footer-main{

    max-width:1400px;

    margin:auto;

    padding:
        72px
        45px
        70px;

    background:#e9f0f2;

    display:grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr;

    gap:70px;

}


.footer-brand{

    max-width:600px;

}


.footer-logo{

    width:180px;

    height:auto;

    display:block;

    margin-bottom:35px;

}


.footer-brand p{

    max-width:600px;

    font-size:17px;

    line-height:1.8;

    color:#555;

}


.footer-column h3{

    color:#171717;

    font-size:17px;

    letter-spacing:2.5px;

    font-weight:700;

}


.footer-line{

    display:block;

    width:68px;

    height:3px;

    background:#333;

    margin:
        12px 0 28px;

}


.footer-column p{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:25px;

    color:#555;

    font-size:16px;

}


.footer-column p i{

    color:#777;

    width:17px;

    margin-top:5px;

}


.footer-column a{

    transition:.2s;

}


.footer-column a:hover{

    color:var(--green-dark);

}


.social-icons{

    display:flex;

    gap:15px;

}


.social-icons a{

    width:63px;

    height:63px;

    background:#333;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:24px;

}


.social-icons a:hover{

    background:#222;

}


.footer-bottom{

    max-width:1400px;

    margin:auto;

    padding:
        36px
        45px
        43px;

    border-top:
        1px solid
        rgba(40,50,50,.15);

    text-align:center;

    background:#e9f0f2;

}


.footer-bottom p{

    color:#777;

    font-size:16px;

}



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

@media(max-width:1100px){

    .desktop-nav{

        gap:16px;

    }


    .header-inner{

        padding:
            0 25px;

    }


    .footer-main{

        gap:40px;

    }

}



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

@media(max-width:850px){

    .desktop-nav,
    .header-book-btn{

        display:none;

    }


    .menu-toggle{

        display:block;

    }


    .mobile-menu{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        display:flex;

        flex-direction:column;

        background:#fff;

        border-top:
            1px solid #eee;

        box-shadow:
            0 12px 25px rgba(0,0,0,.12);

        opacity:0;

        visibility:hidden;

        transform:
            translateY(-8px);

        transition:.25s;

    }


    .mobile-menu.active{

        opacity:1;

        visibility:visible;

        transform:
            translateY(0);

    }


    .mobile-menu a{

        padding:
            15px 25px;

        border-bottom:
            1px solid #eee;

        text-transform:uppercase;

        font-size:12px;

        font-weight:700;

        letter-spacing:1px;

    }


    .mobile-menu a.active{

        color:var(--green);

    }

}



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

@media(max-width:900px){

    .room-layout,
    .guest-layout{

        grid-template-columns:1fr;

    }


    .booking-summary,
    .final-summary-card{

        position:static;

    }


    .room-grid{

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width:650px){

    .booking-page{

        padding:
            35px
            15px
            60px;

    }


    .header-inner{

        min-height:72px;

        padding:
            0 18px;

    }


    .logo img{

        width:120px;

    }


    .booking-hero{

        min-height:300px;

    }


    .hero-content h1{

        font-size:42px;

    }


    .steps{

        margin-bottom:30px;

    }


    .step small{

        font-size:10px;

    }


    .step span{

        width:34px;

        height:34px;

    }


    .steps:before{

        top:17px;

        left:8%;

        right:8%;

    }


    .search-card,
    .booking-summary,
    .guest-form-card,
    .final-summary-card{

        padding:
            20px
            16px;

    }


    .date-grid,
    .form-grid.two,
    .guest-select-row,
    .form-actions{

        grid-template-columns:1fr;

    }


    .room-grid{

        grid-template-columns:1fr;

    }


    .room-image-button img{

        height:220px;

    }


    .selection-heading{

        align-items:flex-start;

        flex-direction:column;

        gap:4px;

    }


    .confirmation-container h1{

        font-size:28px;

    }


    .calendar-legend{

        gap:9px;

    }


    .footer-main{

        padding:
            50px
            25px;

        grid-template-columns:1fr;

    }


    .footer-logo{

        width:155px;

    }


    .footer-brand p{

        font-size:15px;

    }


    .footer-column p{

        font-size:14px;

    }


    .footer-bottom{

        padding-left:20px;

        padding-right:20px;

    }


    .footer-bottom p{

        font-size:13px;

    }

}