/* =====================================================
   RUMAH MAKAN SIANG MALAM TEBET
   RESERVATION PAGE CSS FINAL

   All colors use global semantic variables from style.css
===================================================== */


/* =====================================================
   RESET
===================================================== */

    /* =========================
       SYSTEM
    ========================== */

    --transition:
        .35s ease;

}






/* =====================================================
   RESET
===================================================== */


*,
*::before,
*::after {


    margin:
        0;


    padding:
        0;


    box-sizing:
        border-box;

}




html {


    scroll-behavior:
        smooth;

}





body {


    font-family:
        "Montserrat",
        sans-serif;


    background:
        var(--maroon-deep);


    color:
        var(--cream);


    line-height:
        1.7;


    overflow-x:
        hidden;

}





img {


    width:
        100%;


    display:
        block;


    object-fit:
        cover;

}





a {


    color:
        inherit;


    text-decoration:
        none;

}





button,
input,
textarea,
select {


    font-family:
        inherit;

}





ul {


    list-style:
        none;

}







/* =====================================================
   TYPOGRAPHY
===================================================== */


h1,
h2,
h3,
h4 {


    font-family:
        "Cormorant Garamond",
        serif;


    font-weight:
        600;


    line-height:
        1.15;

}





h1 {


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

}





h2 {


    font-size:
        clamp(42px,5vw,72px);

}





h3 {


    font-size:
        32px;

}





p {


    color:
        var(--text-muted);


    font-size:
        16px;

}





.section-label {


    font-size:
        13px;


    letter-spacing:
        4px;


    text-transform:
        uppercase;


    color:
        var(--gold-light);


    margin-bottom:
        20px;

}







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


.container {


    width:
        min(90%,1200px);


    margin:
        0 auto;

}





.section {


    padding:
        60px 0;

}





.section-heading {


    max-width:
        750px;


    margin:
        0 auto 70px;

}





.section-heading.centered {


    text-align:
        center;

}








/* =====================================================
   BUTTON SYSTEM
===================================================== */


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 30px;

    font-size: 11px;

    font-weight: 600;
 border-radius:
        50px;
    letter-spacing: 2px;

    text-transform: uppercase;

    transition: var(--transition);

}


.btn-gold {

    background: var(--gold);

    color: var(--maroon-deep);

}


.btn-gold:hover {

    background: var(--gold-light);

    transform: translateY(-3px);

}

.btn-outline {


    border:
        1px solid rgba(212,177,106,.6);


    background:
        transparent;


    color:
        var(--gold-light);

}

.btn-outline:hover {


    background:
        var(--gold);


    color:
        var(--maroon-deep);

}

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


.page-loader {


    position:
        fixed;


    inset:
        0;


    display:
        flex;


    justify-content:
        center;


    align-items:
        center;


    background:
        var(--maroon-deep);


    z-index:
        9999;


    transition:
        opacity .6s ease,
        visibility .6s ease;

}





.page-loader.hide {


    opacity:
        0;


    visibility:
        hidden;

}





.loader-logo img {


    width:
        120px;


    animation:
        loaderPulse 2s infinite;

}





@keyframes loaderPulse {


    0% {


        transform:
            scale(.9);


        opacity:
            .6;

    }


    50% {


        transform:
            scale(1);


        opacity:
            1;

    }


    100% {


        transform:
            scale(.9);


        opacity:
            .6;

    }

}
















/* =====================================================
   RESERVATION HERO
   Page-specific hero background and spacing.
   Shared hero layout is in global-hero.css
===================================================== */

.reservation-hero {
    background: url("../images/reservation/hero-reserv.png") center / cover no-repeat;
}

/* reservation overlay and content positioning are handled by global-hero.css */

 /* =====================================================


   WHY CHOOSE US
   FEATURE
   SPACES
   RESERVATION FORM
===================================================== */





/* =====================================================
   WHY CHOOSE US
===================================================== */


.why-reserve {


    background:
        linear-gradient(
            180deg,
            var(--maroon-deep),
            var(--maroon-dark)
        );

}





.why-reserve .section-heading p {


    max-width:
        700px;


    margin:
        0 auto;

}







/* =====================================================
   FEATURE GRID
===================================================== */


.feature-grid {


    display:
        grid;


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


    gap:
        30px;

}







/* =====================================================
   FEATURE CARD
===================================================== */


.feature-card {


    position:
        relative;


    padding:
        45px 35px;


    background:
        rgba(255,255,255,.05);


    border:
        1px solid rgba(212,177,106,.18);


    border-radius:
        var(--radius-medium);


    overflow:
        hidden;


    transition:
        var(--transition);

}





.feature-card::before {


    content:
        "";


    position:
        absolute;


    inset:
        0;


    background:
        linear-gradient(
            135deg,
            rgba(212,177,106,.15),
            transparent
        );


    opacity:
        0;


    transition:
        var(--transition);

}





.feature-card:hover {


    transform:
        translateY(-12px);


    border-color:
        rgba(212,177,106,.5);


    box-shadow:
        var(--shadow-gold);

}





.feature-card:hover::before {


    opacity:
        1;

}





.feature-number {


    position:
        relative;


    z-index:
        1;


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        48px;


    color:
        rgba(212,177,106,.35);


    margin-bottom:
        20px;

}





.feature-card h3 {


    position:
        relative;


    z-index:
        1;


    color:
        var(--cream);


    margin-bottom:
        15px;

}





.feature-card p {


    position:
        relative;


    z-index:
        1;

}









/* =====================================================
   RESERVATION SPACES
===================================================== */


.reservation-spaces {


    background:
        var(--maroon-deep);

}





.spaces-grid {


    display:
        grid;


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


    gap:
        40px;

}







/* =====================================================
   SPACE CARD
===================================================== */


.space-card {


    position:
        relative;


    background:
        rgba(255,255,255,.05);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        var(--radius-large);


    overflow:
        hidden;


    transition:
        var(--transition);

}





.space-card:hover {


    transform:
        translateY(-10px);


    box-shadow:
        var(--shadow-soft);

}







/* =====================================================
   SPACE IMAGE
===================================================== */


.space-image {


    height:
        350px;


    overflow:
        hidden;

}





.space-image img {


    width:
        100%;


    height:
        100%;


    transition:
        transform .8s ease;

}





.space-card:hover .space-image img {


    transform:
        scale(1.08);

}







/* =====================================================
   SPACE CONTENT
===================================================== */


.space-content {


    padding:
        40px;

}





.space-floor {


    display:
        inline-block;


    font-size:
        12px;


    letter-spacing:
        3px;


    color:
        var(--gold-light);


    margin-bottom:
        15px;

}





.space-content h3 {


    font-size:
        42px;


    margin-bottom:
        20px;

}





.space-content p {


    margin-bottom:
        25px;

}





.space-content ul {


    margin-bottom:
        35px;

}





.space-content li {


    position:
        relative;


    padding-left:
        25px;


    margin-bottom:
        12px;


    font-size:
        14px;


    color:
        rgba(244,241,235,.8);

}





.space-content li::before {


    content:
        "✓";


    position:
        absolute;


    left:
        0;


    color:
        var(--gold-light);

}





.space-content .btn {


    width:
        fit-content;

}









/* =====================================================
   RESERVATION FORM SECTION
===================================================== */


.reservation-form-section {


    background:
        linear-gradient(
            180deg,
            var(--maroon-dark),
            var(--maroon-deep)
        );

}





.reservation-wrapper {


    display:
        grid;


    grid-template-columns:
        .9fr 1.1fr;


    gap:
        60px;


    align-items:
        start;

}







/* =====================================================
   RESERVATION INFORMATION
===================================================== */


.reservation-information {


    position:
        sticky;


    top:
        120px;

}





.reservation-tag {


    color:
        var(--gold-light);


    letter-spacing:
        3px;


    font-size:
        13px;


    margin-bottom:
        25px;

}





.reservation-information h3 {


    font-size:
        56px;


    margin-bottom:
        25px;

}





.reservation-information p {


    max-width:
        450px;

}







/* =====================================================
   HIGHLIGHTS
===================================================== */


.reservation-highlights {


    display:
        flex;


    flex-direction:
        column;


    gap:
        25px;

    margin-bottom: 20px;    

}





.highlight-item {


    display:
        flex;


    gap:
        25px;


    padding:
        25px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        var(--radius-medium);

}





.highlight-number {


    min-width:
        55px;


    height:
        55px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        rgba(212,177,106,.15);


    color:
        var(--gold-light);


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        28px;

}





.highlight-item h4 {


    font-family:
        "Montserrat",
        sans-serif;


    font-size:
        16px;


    margin-bottom:
        8px;


    color:
        var(--cream);

}





.highlight-item p {


    font-size:
        14px;

}









/* =====================================================
   RESERVATION FORM CARD
===================================================== */


.reservation-form {


    padding:
        55px;


    background:
        rgba(255,255,255,.05);


    border:
        1px solid rgba(212,177,106,.18);


    border-radius:
        var(--radius-large);


    backdrop-filter:
        blur(15px);

}







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


.form-group {


    margin-bottom:
        30px;

}





.form-group label {


    display:
        block;


    margin-bottom:
        12px;


    color:
        var(--cream);


    font-size:
        14px;

}







/* =====================================================
   INPUT SYSTEM
===================================================== */


.form-group input,
.form-group select,
.form-group textarea {


    width:
        100%;


    padding:
        18px 20px;


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


    border:
        1px solid rgba(212,177,106,.2);


    border-radius:
        14px;


    color:
        var(--cream);


    outline:
        none;


    transition:
        var(--transition);

}

.form-group{
position:relative;
}


.form-group select{

padding-right:45px;

}


.form-group::after{

content:"⌄";

position:absolute;

right:20px;

bottom:17px;

color:var(--gold);

pointer-events:none;

}



.form-group input::placeholder,
.form-group textarea::placeholder {


    color:
        rgba(244,241,235,.45);

}





.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {


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


    box-shadow:
        0 0 0 4px rgba(212,177,106,.12);

}





.form-group select {


    appearance:
        none;


    cursor:
        pointer;

}





.form-group textarea {


    resize:
        vertical;


    min-height:
        160px;

}







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


.form-row {


    display:
        grid;


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


    gap:
        25px;

}
/* =====================================================
   PART 3

   AREA SELECTION
   CHECKBOX
   JOURNEY
   EXPERIENCE
   GALLERY
   CHEF
   POLICY
   FAQ
===================================================== */





/* =====================================================
   AREA SELECTION
===================================================== */


.area-selection {


    display:
        grid;


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


    gap:
        20px;

}





.area-card {


    position:
        relative;


    padding:
        25px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.18);


    border-radius:
        20px;


    cursor:
        pointer;


    transition:
        var(--transition);

}





.area-card input {


    position:
        absolute;


    opacity:
        0;

}





.area-title {


    display:
        block;


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        30px;


    color:
        var(--cream);


    margin-bottom:
        8px;

}





.area-description {


    display:
        block;


    font-size:
        13px;


    color:
        var(--text-muted);

}





.area-card:hover {


    transform:
        translateY(-5px);


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

}





.area-card:has(input:checked) {


    background:
        rgba(212,177,106,.15);


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


    box-shadow:
        var(--shadow-gold);

}







/* =====================================================
   CHECKBOX
===================================================== */


.checkbox {


    display:
        flex;


    align-items:
        flex-start;


    gap:
        15px;


    margin:
        30px 0;


    cursor:
        pointer;

}





.checkbox input {


    width:
        18px;


    height:
        18px;


    margin-top:
        5px;


    accent-color:
        var(--gold);

}





.checkbox span {


    color:
        var(--text-muted);


    font-size:
        14px;


    line-height:
        1.6;

}





.form-submit {


    margin-top:
        35px;

}





.form-submit .btn {


    width:
        100%;

}





.form-note {


    text-align:
        center;


    margin-top:
        25px;


    font-size:
        13px;


    color:
        rgba(244,241,235,.55);

}









/* =====================================================
   RESERVATION JOURNEY
===================================================== */


.reservation-journey {


    background:
        linear-gradient(
            180deg,
            var(--maroon-deep),
            var(--maroon-dark)
        );

}





.journey-grid {


    display:
        grid;


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


    gap:
        30px;


    margin-top:
        70px;

}





.journey-card {


    padding:
        45px 35px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        24px;


    backdrop-filter:
        blur(15px);


    transition:
        var(--transition);

}





.journey-card:hover {


    transform:
        translateY(-12px);


    border-color:
        var(--gold);


    box-shadow:
        var(--shadow-gold);

}





.journey-number {


    display:
        block;


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        70px;


    line-height:
        1;


    color:
        rgba(212,177,106,.25);


    margin-bottom:
        25px;

}





.journey-card h3 {


    font-size:
        28px;


    margin-bottom:
        15px;

}





.journey-card p {


    line-height:
        1.8;

}









/* =====================================================
   PREMIUM EXPERIENCE
===================================================== */


.reservation-experience {


    background:
        var(--maroon);

}





.experience-grid {


    display:
        grid;


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


    gap:
        30px;


    margin-top:
        70px;

}





.experience-card {


    padding:
        45px 35px;


    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        22px;


    transition:
        var(--transition);

}





.experience-card:hover {


    transform:
        translateY(-12px);


    box-shadow:
        var(--shadow-gold);


    border-color:
        rgba(212,177,106,.5);

}





.experience-number {


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        55px;


    color:
        var(--gold);


    margin-bottom:
        20px;

}





.experience-card h3 {


    margin-bottom:
        15px;

}





.experience-card p {


    line-height:
        1.8;

}









/* =====================================================
   DINING GALLERY
===================================================== */


.dining-gallery {


    background:
        var(--maroon-deep);

}





.gallery-grid {


    display:
        grid;


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


    gap:
        25px;


    margin-top:
        70px;

}





.gallery-card {


    position:
        relative;


    height:
        420px;


    overflow:
        hidden;


    border-radius:
        25px;

}





.gallery-card img {


    width:
        100%;


    height:
        100%;


    object-fit:
        cover;


    transition:
        transform .8s ease;

}





.gallery-card::after {


    content:
        "";


    position:
        absolute;


    inset:
        0;


    background:
        linear-gradient(
            transparent,
            var(--overlay-maroon-dark)
        );

}





.gallery-card:hover img {


    transform:
        scale(1.1);

}





.gallery-overlay {


    position:
        absolute;


    bottom:
        35px;


    left:
        35px;


    z-index:
        2;

}





.gallery-overlay h3 {


    font-size:
        38px;

}





.gallery-overlay p {


    color:
        var(--gold-light);

}









/* =====================================================
   CHEF PROMISE
===================================================== */


.chef-promise {


    background:
        var(--maroon-dark);

}





.chef-wrapper {


    display:
        grid;


    grid-template-columns:
        1fr 1fr;


    gap:
        70px;


    align-items:
        center;

}





.chef-content h2 {


    font-size:
        55px;


    margin:
        25px 0;

}





.chef-content h2 span {


    color:
        var(--gold);

}





.chef-content p {


    max-width:
        520px;


    line-height:
        1.9;

}





.chef-image {


    height:
        650px;


    overflow:
        hidden;


    border-radius:
        30px;


    box-shadow:
        var(--shadow-soft);

}





.chef-image img {


    width:
        100%;


    height:
        100%;


    object-fit:
        cover;

}









/* =====================================================
   RESERVATION POLICY
===================================================== */


.reservation-policy {


    background:
        var(--maroon);

}





.policy-grid {


    display:
        grid;


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


    gap:
        30px;


    margin-top:
        60px;

}





.policy-card {


    padding:
        40px 30px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        22px;


    transition:
        var(--transition);

}





.policy-card:hover {


    transform:
        translateY(-8px);


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







}





.policy-card span {


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        48px;


    color:
        var(--gold);

}





.policy-card h3 {


    margin:
        20px 0 15px;


    font-size:
        30px;

}





.policy-card p {


    line-height:
        1.8;

}









/* =====================================================
   FAQ
===================================================== */


.reservation-faq {


    background:
        var(--maroon-deep);

}





.faq-list {


    max-width:
        900px;


    margin:
        60px auto 0;

}





.faq-item {


    padding:
        25px 30px;


    margin-bottom:
        20px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        18px;


    transition:
        var(--transition);

}





.faq-item:hover {


    border-color:
        rgba(212,177,106,.5);

}





.faq-item summary {


    cursor:
        pointer;


    list-style:
        none;


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        30px;


    color:
        var(--cream);

}





.faq-item summary::-webkit-details-marker {


    display:
        none;

}





.faq-item p {


    margin-top:
        20px;


    line-height:
        1.8;

}
/* =====================================================
   PART 4

   TESTIMONIAL
   STATISTICS
   CONTACT
   CTA
   GROUP DINING
   ASSURANCE
   FOOTER
   FLOATING BUTTON
   ANIMATION
   RESPONSIVE
===================================================== */





/* =====================================================
   TESTIMONIAL
===================================================== */


.guest-testimonials {


    background:
        linear-gradient(
            180deg,
            var(--maroon),
            var(--maroon-dark)
        );

}





.testimonial-grid {


    display:
        grid;


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


    gap:
        30px;


    margin-top:
        70px;

}





.testimonial-card {


    padding:
        45px 35px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        25px;


    transition:
        var(--transition);

}





.testimonial-card:hover {


    transform:
        translateY(-10px);


    border-color:
        var(--gold);


    box-shadow:
        var(--shadow-gold);

}





.testimonial-stars {


    color:
        var(--gold);


    font-size:
        22px;


    letter-spacing:
        4px;


    margin-bottom:
        25px;

}





.testimonial-card p {


    font-size:
        18px;


    line-height:
        1.9;


    font-style:
        italic;


    color:
        rgba(244,241,235,.85);

}





.testimonial-card h4 {


    margin-top:
        30px;


    font-size:
        22px;

}





.testimonial-card span {


    color:
        var(--gold-light);

}









/* =====================================================
   STATISTICS
===================================================== */


.reservation-statistics {


    background:
        var(--maroon-deep);


    padding:
        90px 0;

}





.statistics-grid {


    display:
        grid;


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


    gap:
        30px;

}





.stat-card {


    text-align:
        center;


    padding:
        40px 20px;


    background:
        rgba(255,255,255,.035);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        22px;

}





.stat-card h2 {


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        75px;


    line-height:
        1;


    color:
        var(--gold);

}





.stat-card p {


    margin-top:
        15px;


    letter-spacing:
        1px;

}









/* =====================================================
   CONTACT
===================================================== */


.reservation-contact {


    background:
        var(--maroon-dark);

}





.contact-grid {


    display:
        grid;


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


    gap:
        25px;


    margin-top:
        60px;

}





.contact-card {


    padding:
        35px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        22px;


    min-width:
        0;

}





.contact-card h3 {


    font-size:
        28px;


    margin-bottom:
        20px;

}





.contact-card p {


    line-height:
        1.8;

}





.contact-card a {


    color:
        var(--gold);


    transition:
        var(--transition);

}





.contact-card a:hover {


    color:
        var(--gold-light);

}









/* =====================================================
   GOOGLE MAP
===================================================== */


.reservation-map {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 20px;
}


.reservation-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


@media (max-width:768px){

    .reservation-map {
        height: 300px;
    }

}









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


.reservation-ending {


    position:
        relative;


    min-height:
        650px;


    display:
        flex;


    align-items:
        center;


    background:


        url("../images/reservation/ending-bg.jpg")

        center / cover no-repeat;

}





.reservation-ending-overlay {


    position:
        absolute;


    inset:
        0;


    background:


        linear-gradient(
            90deg,
            var(--overlay-maroon-dark),
            var(--overlay-maroon-medium)
        );

}





.ending-content {


    position:
        relative;


    z-index:
        2;


    max-width:
        750px;

}





.ending-content h2 {


    font-size:
        70px;


    margin:
        25px 0;

}





.ending-content h2 span {


    display:
        block;


    color:
        var(--gold);

}





.ending-content p {


    line-height:
        1.9;


    color:
        rgba(244,241,235,.85);

}





.ending-buttons {


    display:
        flex;


    gap:
        20px;


    margin-top:
        40px;

}









/* =====================================================
   GROUP DINING
===================================================== */


.group-dining {


    background:
        var(--maroon);

}





.group-grid {


    display:
        grid;


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


    gap:
        30px;


    margin-top:
        70px;

}





.group-card {


    padding:
        45px 35px;


    background:
        rgba(255,255,255,.04);


    border:
        1px solid rgba(212,177,106,.15);


    border-radius:
        25px;


    transition:
        var(--transition);

}





.group-card:hover {


    transform:
        translateY(-10px);


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

}





.group-icon {


    width:
        70px;


    height:
        70px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        rgba(184,146,74,.15);


    color:
        var(--gold);


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        32px;


    margin-bottom:
        25px;

}









/* =====================================================
   ASSURANCE
===================================================== */


.reservation-assurance {


    background:
        var(--maroon-deep);

}





.assurance-wrapper {


    display:
        grid;


    grid-template-columns:
        1fr 1fr;


    gap:
        70px;


    padding:
        70px;


    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );


    border:
        1px solid rgba(212,177,106,.18);


    border-radius:
        35px;

}





.assurance-content h2 {


    font-size:
        55px;


    margin:
        25px 0;

}





.assurance-content h2 span {


    color:
        var(--gold);

}





.assurance-content p {


    line-height:
        1.9;

}





.assurance-list {


    display:
        flex;


    flex-direction:
        column;


    gap:
        25px;

}





.assurance-item {


    display:
        flex;


    gap:
        20px;


    align-items:
        center;

}





.assurance-item span {


    width:
        40px;


    height:
        40px;


    display:
        flex;


    justify-content:
        center;


    align-items:
        center;


    border-radius:
        50%;


    background:
        rgba(184,146,74,.2);


    color:
        var(--gold);

}









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


.footer {


    background: var(--color-primary-dark);


    padding-top:
        80px;

}

.footer-grid {


    display:
        grid;


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


    gap:
        50px;

}

.footer-column {


    display:
        flex;


    flex-direction:
        column;


    gap:
        12px;

}

.footer-column h4 {


    font-family:
        "Cormorant Garamond",
        serif;


    font-size:
        32px;


    color:
        var(--gold);


    margin-bottom:
        25px;

}

.footer-column a,
.footer-column p {


    color:
        rgba(244,241,235,.7);


    font-size:
        14px;
        
   transition:   .35s ease;
}

.footer-column a:hover {


    color:
        var(--gold);
transform: translateX(8px);
}



.footer-bottom {


    margin-top:
        60px;


    padding:
        25px 0;


    text-align:
        center;


    border-top:
        1px solid rgba(255,255,255,.1);

}

.footer-bottom p {


    color:
        rgba(244,241,235,.5);

}







/* =====================================================
   PART 5

   RESPONSIVE SYSTEM
   TABLET
   MOBILE
   SMALL MOBILE
===================================================== */





/* =====================================================
   TABLET
   1024px
===================================================== */


@media (max-width:1024px) {



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


    .section {

        padding:
            90px 0;

    }





    .container {

        width:
            88%;

    }





    h1 {

        font-size:
            clamp(48px,8vw,80px);

    }





    h2 {

        font-size:
            clamp(38px,6vw,60px);

    }





    h3 {

        font-size:
            28px;

    }















    .feature-grid {

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

    }







    /* =========================
       SPACES
    ========================== */


    .spaces-grid {

        gap:
            25px;

    }





    .space-image {

        height:
            280px;

    }







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


    .reservation-wrapper {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }





    .reservation-information {

        position:
            static;

    }







    /* =========================
       JOURNEY
    ========================== */


    .journey-grid {

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

    }







    /* =========================
       EXPERIENCE
    ========================== */


    .experience-grid {

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

    }







    /* =========================
       GALLERY
    ========================== */


    .gallery-grid {

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

    }







    /* =========================
       CHEF
    ========================== */


    .chef-wrapper {

        gap:
            40px;

    }





    .chef-image {

        height:
            500px;

    }







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


    .policy-grid {

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

    }







    /* =========================
       CONTACT
    ========================== */


    .contact-grid {

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

    }

    .contact-card {
        max-width: 100%;
    }







    /* =========================
       GROUP
    ========================== */


    .group-grid {

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

    }







    /* =========================
       ASSURANCE
    ========================== */


    .assurance-wrapper {

        padding:
            45px;

    }



}









/* =====================================================
   MOBILE
   768px
===================================================== */


@media (max-width:768px) {





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


    body {

        font-size:
            15px;

    }





    .section {

        padding:
            75px 0;

    }





    .container {

        width:
            90%;

    }





    h1 {

        font-size:
            55px;

    }





    h2 {

        font-size:
            42px;

    }





    h3 {

        font-size:
            26px;

    }







    







    .space-content h3 {

        font-size:
            34px;

    }







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


    .reservation-form {

        padding:
            30px 20px;

    }





    .form-row {

        grid-template-columns:
            1fr;

    }





    .area-selection {

        grid-template-columns:
            1fr;

    }







    /* =========================
       JOURNEY
    ========================== */


    .journey-grid {

        grid-template-columns:
            1fr;

    }





    .journey-number {

        font-size:
            55px;

    }







    /* =========================
       EXPERIENCE
    ========================== */


    .experience-grid {

        grid-template-columns:
            1fr;

    }







    /* =========================
       GALLERY
    ========================== */


    .gallery-grid {

        grid-template-columns:
            1fr;

    }





    .gallery-card {

        height:
            360px;

    }







    /* =========================
       CHEF
    ========================== */


    .chef-wrapper {

        grid-template-columns:
            1fr;

    }





    .chef-content h2 {

        font-size:
            42px;

    }





    .chef-image {

        height:
            420px;

    }







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


    .policy-grid {

        grid-template-columns:
            1fr;

    }







    /* =========================
       FAQ
    ========================== */


    .faq-item {

        padding:
            20px;

    }





    .faq-item summary {

        font-size:
            24px;

    }







    /* =========================
       TESTIMONIAL
    ========================== */


    .testimonial-grid {

        grid-template-columns:
            1fr;

    }







    /* =========================
       STATISTICS
    ========================== */


    .statistics-grid {

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

    }





    .stat-card h2 {

        font-size:
            55px;

    }







    /* =========================
       CONTACT
    ========================== */


    .contact-grid {

        grid-template-columns:
            1fr;

    }





    .reservation-map {

        height:
            350px;

    }







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


    .reservation-ending {

        min-height:
            550px;

    }





    .ending-content h2 {

        font-size:
            48px;

    }





    .ending-buttons {

        flex-direction:
            column;

    }





    .ending-buttons .btn {

        width:
            100%;

    }







    /* =========================
       GROUP
    ========================== */


    .group-grid {

        grid-template-columns:
            1fr;

    }







    /* =========================
       ASSURANCE
    ========================== */


    .assurance-wrapper {

        grid-template-columns:
            1fr;


        padding:
            30px;


        border-radius:
            25px;

    }





    .assurance-content h2 {

        font-size:
            42px;

    }







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


    .footer {

        padding-top:
            60px;

    }





    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }







    /* =========================
       FLOATING BUTTON
    ========================== */


    /* Floating button styling is handled globally in assets/css/global-components.css */





    /* back-to-top styling is handled globally in assets/css/global-components.css */

}









/* =====================================================
   SMALL MOBILE
   480px
===================================================== */


@media (max-width:480px) {



    .container {

        width:
            92%;

    }





    h1 {

        font-size:
            45px;

    }





    h2 {

        font-size:
            36px;

    }





    .statistics-grid {

        grid-template-columns:
            1fr;

    }





    .highlight-item {

        flex-direction:
            column;

    }





    .highlight-number {

        width:
            50px;

        height:
            50px;

    }





    .space-content {

        padding:
            25px;

    }





    .reservation-information h3 {

        font-size:
            42px;

    }





    .ending-content h2 {

        font-size:
            40px;

    }





}
/* =====================================================
   PART 6

   FINAL OPTIMIZATION
   ACCESSIBILITY
   FORM UX
   PERFORMANCE
   LARGE DISPLAY
   PRINT
   MOTION
===================================================== */



/* =====================================================
   LARGE DESKTOP OPTIMIZATION
   1440px+
===================================================== */


@media (min-width:1440px) {


    .container {

        width:
            min(85%,1400px);

    }






    .space-image {

        height:
            420px;

    }



    .gallery-card {

        height:
            480px;

    }



    .chef-image {

        height:
            750px;

    }


}






/* =====================================================
   ULTRA LARGE DISPLAY
   1800px+
===================================================== */


@media (min-width:1800px) {


    body {

        font-size:
            18px;

    }



    .container {

        max-width:
            1500px;

    }



    h1 {

        font-size:
            120px;

    }



    h2 {

        font-size:
            80px;

    }


}






/* =====================================================
   FORM UX ENHANCEMENT
===================================================== */


.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {


    border-color:
        rgba(212,177,106,.45);


}







.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid {


    border-color:
        rgba(212,177,106,.35);


}







.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {


    border-color:
        rgba(255,80,80,.5);


}






/* =====================================================
   BUTTON LOADING STATE
===================================================== */


.btn.loading {


    pointer-events:
        none;


    opacity:
        .7;


    position:
        relative;


}





.btn.loading::after {


    content:
        "";


    width:
        18px;


    height:
        18px;


    margin-left:
        12px;


    border: 2px solid var(--overlay-maroon-medium);


    border-top-color:
        var(--maroon-deep);


    border-radius:
        50%;


    animation:
        buttonSpin .8s linear infinite;


}





@keyframes buttonSpin {


    from {

        transform:
            rotate(0deg);

    }


    to {

        transform:
            rotate(360deg);

    }


}







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


.form-message {


    margin-top:
        25px;


    padding:
        18px 25px;


    border-radius:
        15px;


    display:
        none;


    font-size:
        14px;


}





.form-message.success {


    display:
        block;


    background:
        rgba(80,180,100,.15);


    border:
        1px solid rgba(80,180,100,.4);


    color:
        #b8e8c0;


}





.form-message.error {


    display:
        block;


    background:
        rgba(255,80,80,.12);


    border:
        1px solid rgba(255,80,80,.4);


    color:
        #ffb0b0;


}








/* =====================================================
   ACCESSIBILITY
===================================================== */



button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {


    outline:
        2px solid var(--gold-light);


    outline-offset:
        4px;


}






/* =====================================================
   IMAGE PERFORMANCE
===================================================== */

img{

display:block;

max-width:100%;

}





.space-card img,
.gallery-card img,
.chef-image img {


    will-change:
        transform;


}







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









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


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


    *,
    *::before,
    *::after {


        animation-duration:
            .01ms !important;


        animation-iteration-count:
            1 !important;


        scroll-behavior:
            auto !important;


        transition-duration:
            .01ms !important;


    }


}







/* =====================================================
   PRINT VERSION
===================================================== */


@media print {


    body {


        background:
            white;


        color:
            black;


    }



    .navbar,
    .mobile-menu-btn,
    .whatsapp-floating,
    .back-to-top,
    .page-loader {


        display:
            none !important;


    }



    .section {


        padding:
            40px 0;


    }



    .reservation-form,
    .feature-card,
    .space-card,
    .testimonial-card {


        box-shadow:
            none;


        border:
            1px solid #ddd;


        background:
            white;


    }



}
@media (min-width:1440px){

    :root{

        --navbar-height:
            120px;

    }

}

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

.booking-modal{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.booking-modal.show{

    opacity:1;

    visibility:visible;

}

.booking-modal-card{

    width:min(520px,90vw);

    background: var(--color-primary-dark);

    border:1px solid rgba(212,175,55,.3);

    border-radius:24px;

    padding:40px;

    text-align:center;

    color:#fff;

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

}
.booking-modal-card h2 {

    font-size: 30px;

    font-weight: 600;

    margin-top:25px;

    margin-bottom:20px;

}

@media(max-width:480px){

    .booking-modal-card h2{

        font-size:26px;

    }

}
.booking-success-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background: var(--color-secondary);

    color: var(--color-primary-dark);

    font-size:36px;

    font-weight:bold;

    display:flex;

    justify-content:center;

    align-items:center;

}

.booking-summary{

    margin:30px 0;

}

.booking-summary div{

    display:flex;

    justify-content:space-between;

    margin:12px 0;

}

.status-pending{

    color: var(--color-secondary-light);

}

/* =====================================================
   LUXURY BOOKING BUTTON
===================================================== */

#bookingButton{

    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 240px;

    transition:
        transform .25s ease,
        opacity .25s ease;

}

#bookingButton:disabled{

    cursor: wait;

    opacity: 1;

}

#bookingButton.loading{

    pointer-events: none;

}

#bookingButton.loading::after{

    content:"";

    position:absolute;

    top:0;

    left:-45%;

    width:35%;

    height:100%;

    background:

        linear-gradient(

            115deg,

            transparent,

            rgba(255,215,120,.15),

            rgba(255,235,170,.85),

            rgba(255,215,120,.15),

            transparent

        );

    transform: skewX(-25deg);

    animation:

        luxuryShimmer 1.2s linear infinite;

}

@keyframes luxuryShimmer{

    from{

        left:-45%;

    }

    to{

        left:140%;

    }

}
#copyBookingId:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}
.booking-id-row{

    align-items:center;

}


.booking-id-value{

    display:flex;

    align-items:center;

    gap:12px;

}


.copy-booking-btn{

    width:32px;

    height:32px;

    border-radius:50%;

    border:1px solid rgba(212,175,55,.5);

    background:transparent;

    color: var(--color-secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

}


.copy-booking-btn:hover{

    background: var(--color-secondary);

    color: var(--color-primary-dark);

}


.copy-booking-btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}
/* =====================================================
   MOBILE HORIZONTAL SLIDER
===================================================== */


.slider-container{

position:relative;

}



.slider-prev,
.slider-next{

display:none;

}




@media(max-width:768px){



.slider-container{

position:relative;

overflow:hidden;

}




.mobile-slider{


display:flex;

overflow-x:auto;

scroll-snap-type:x mandatory;

gap:20px;

scroll-behavior:smooth;

padding-bottom:20px;


}



.mobile-slider::-webkit-scrollbar{

display:none;

}



.mobile-slider .space-card,
.mobile-slider .feature-card,
.mobile-slider .journey-card,
.mobile-slider .policy-card,
.mobile-slider .signature-card {



min-width:100%;
max-width:100%;
flex:0 0 100%;

scroll-snap-align:start;


}

.mobile-slider .feature-card{

    padding:30px;

}

.mobile-slider.policy-grid {

    display:flex;

    flex-wrap:nowrap;

    grid-template-columns:none;

}

.mobile-slider.policy-grid .policy-card {

    min-width:100%;

    max-width:100%;

    flex:0 0 100%;

}


.slider-prev,
.slider-next{


display:flex;

position:absolute;

top:45%;

transform:translateY(-50%);

z-index:5;


width:40px;

height:40px;

border-radius:50%;

align-items:center;

justify-content:center;


    background: var(--overlay-maroon-dark);

color:#fff;

border:none;

font-size:28px;

cursor:pointer;


}




.slider-prev{

left:10px;

}




.slider-next{

right:10px;

}



}