@layer variable, library;
@import "/assets/lib/crumbs.css" layer(library);

/* #region ====== VARIABLE (Layer) ====== */
    @layer variable {
        :root {
            /* container */
            --max-page: 100%;
            --main-padding-x: 1.25rem;
            --section-padding-y: 4rem;

            /* Fonts */
            --font-serif: "EB Garamond", serif;
            --font-sans: "Inter", sans-serif;

            /* primary color - evergreen */
            --pr-50: #ebfaf3;
            --pr-100: #d6f5e8;
            --pr-200: #adebd0;
            --pr-300: #85e0b9;
            --pr-400: #5cd6a1;
            --pr-500: #33cc8a;
            --pr-600: #29a36e;
            --pr-700: #1f7a53;
            --pr-800: #145237;
            --pr-900: #0a291c; /*base*/
            --pr-950: #071d13;

            /* Secondary color - apricot cream */
            --sc-50: #fbf4ea;
            --sc-100: #f6ead5;
            --sc-200: #edd5ab;
            --sc-300: #e4c081; /*base*/
            --sc-400: #dbab57;
            --sc-500: #d2962d;
            --sc-600: #a87824;
            --sc-700: #7e5a1b;
            --sc-800: #543c12;
            --sc-900: #2a1e09;
            --sc-950: #1d1506;

            --primary: light-dark(var(--pr-800), var(--pr-700));
            --secondary: light-dark(var(--sc-300), var(--sc-200));
            --main-bg: light-dark(#fcf9f5, #130f07);

            --white: light-dark(#ffffff, #212529);
            --black: light-dark(#212529, #ffffff);
            --grey: light-dark(#6a6a6a, #aaaaaa);
            --border: light-dark(#e1e1e1, #5a5a5a);

            /* static */
            --putih: #ffffff;
            --hitam: #212529;
            --garis: #e1e1e1;

            /* status */
            --red: #dc3545;
            --green: #4caf50;
            --orange: #ffc107;
            --blue: #2196f3;
            --purple: #673ab7;
            
            /*others*/
            --shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
            --anim: .25s ease;
            --anim-lg: .5s ease;
        }
    }
/* #endregion ====================== */

/* #region ====== LIBRARY (Layer) ====== */
    @layer library {
        :root {
            /* override crumbs variables */
            --cr-primary: var(--primary);
            --cr-secondary: var(--secondary);

            --cr-white: var(--white);
            --cr-black: var(--black);
            --cr-grey: var(--grey);
            --cr-border: var(--border);            
            
            --cr-static-white: var(--putih);
            --cr-static-black: var(--hitam);

            --cr-info: var(--blue);
            --cr-success: var(--green);      
            --cr-danger: var(--red);
            --cr-warning: var(--orange);

            --cr-switch-active-clr: var(--primary);

            --cr-switch-dark-txt: light-dark(var(--pr-400), var(--pr-900));
            --cr-switch-dark-bg: light-dark(var(--pr-900), var(--pr-400));
        }

        .cr-btn.cr-secondary,
        .cr-btn.cr-secondary-outline {
            --cr-btn-base-txt-clr: var(--primary);
        }
    }
/* #endregion ====================== */

/* #region ====== GENERAL ====== */
    html.lenis,
    html.lenis body {
        height: auto;
    }
    .lenis.lenis-smooth {
        scroll-behavior: auto !important;
    }
    .lenis.lenis-scrolling iframe {
        pointer-events: none;
    }
    .lenis.lenis-stopped {
        overflow: clip;
    }

    body {
        font-family: var(--font-sans);
        min-height: 100vh;
        background-color: var(--main-bg);
        overflow: hidden auto;
    }
    html.has-modal,
    body.has-modal {
        overflow: hidden !important;
    }
    section {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        margin: 0 auto;
    }
    .subtitle {
        color: var(--secondary);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }
    .title {
        position: relative;
        font-family: var(--font-serif);
        font-size: 2.25rem;
        font-weight: 500;
        line-height: 1.2;
        text-transform: capitalize;
        margin-bottom: 1.5rem;
    }
    .desc {
        font-size: 1rem;

        span {
            display: block;
            margin-top: 1rem;
        }
    }
    .mini-garnish {
        height: 30px;
        margin-bottom: 1rem;
    }
    #navbar, header, section, footer {
        max-width: var(--max-page);
    }

    @keyframes movingLeaf {
        50% {
            transform: rotate(-10deg);
        }
    }
/* #endregion ====================== */

/* #region ====== SCROLLBAR ====== */
    *::-webkit-scrollbar {
        height: 10px;
        width: 8px;
    }
    *::-webkit-scrollbar-track {
        background: var(--border);
        margin: 0;
    }
    *::-webkit-scrollbar-thumb {
        background-color: var(--primary);
        background: linear-gradient(to top, var(--primary) 0%, var(--primary) 60%);
        border: 2px solid transparent;
        border-radius: 10px;
        background-clip: content-box;
    }
/* #endregion ====================== */

/* #region ====== BACK TO TOP ====== */
    #bttBtn {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        border: none;
        outline: none;
        color: var(--primary);
        font-size: 2.25rem;
        background-color: var(--secondary);
        border-radius: 50%;
        box-shadow: 2px 2px 8px var(--shadow);
        transform: scale(0);
        transition: var(--anim);
        transform-origin: center bottom;
        -webkit-animation: showBtt linear forwards;
                animation: showBtt linear forwards;
        animation-timeline: scroll();
	    animation-range: 0vh 75vh;
        cursor: pointer;
        z-index: 99;
    }
    @-webkit-keyframes showBtt {
        to {
            transform: scale(1);
        }
    }
    @keyframes showBtt {
        to {
            transform: scale(1);
        }
    }
/* #endregion ====================== */

/* #region ====== HIDE ARROW INPUT ====== */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
/* #endregion ====================== */

/* #region ====== CUSTOM SELECTION COLOR ====== */
    ::-moz-selection {
        color: var(--putih);
        background: var(--red);
    }
    ::selection {
        color: var(--putih);
        background: var(--red);
    }
    ::-moz-selection {
        color: var(--putih);
        background: var(--red);
    }
/* #endregion ====================== */

/* #region ====== NAVBAR ====== */
    #navbar {
        --nav-scroll-range: 0vh 30vh;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5%;
        padding: 1rem var(--main-padding-x);
        margin-inline: auto;
        transition: var(--anim);
        isolation: isolate;
        z-index: 100;        
    }

    .nav-brand {
        position: relative;
        
        a {
            display: flex;
            align-items: center;
            color: var(--putih);
            text-decoration: none;
            -webkit-animation: changeClrBrand linear forwards;
                    animation: changeClrBrand linear forwards;
            animation-timeline: scroll();
            animation-range: var(--nav-scroll-range);
        }
        svg {
            height: 38px;
            aspect-ratio: 1;
        }
        div {
            margin-left: 1rem;
            text-transform: uppercase;
        }
        span:first-child {
            display: block;
            font-family: var(--font-serif);
            font-size: 1.3rem;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: 1px;
        }
        span:last-child {
            display: block;
            font-size: .7rem;
            line-height: 1.3;
        }
    }
    @-webkit-keyframes changeClrBrand {
        to {
            color: var(--secondary);
        }
    }
    @keyframes changeClrBrand {
        to {
            color: var(--secondary);
        }
    }
    
    .nav-menu {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1rem 1.25rem;
        background-color: var(--pr-950);
        opacity: 0;
        pointer-events: none;
        isolation: isolate;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, var(--pr-950) 65%, transparent 90%);
            z-index: -1;
        }
        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50%;
            /* background-image: url(/images/main/img-main-layanan-04.jpg); */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center bottom;
            opacity: .25;
            z-index: -2;
        }
    }
    .logo-nav-mobile {
        position: relative;
        display: flex;
        align-items: center;
        color: var(--secondary);

        svg {
            height: 38px;
            aspect-ratio: 1;
        }
        div {
            margin-left: 1rem;
            text-transform: uppercase;
        }
        span:first-child {
            display: block;
            font-family: var(--font-serif);
            font-size: 1.35rem;
            font-weight: 900;
            line-height: 1.3;
        }
        span:last-child {
            display: block;
            font-size: .7rem;
        }
    }

    .nav-menu ul {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: .5rem;
        width: 100%;
        padding: 0;
    }
    .nav-menu ul li {
        position: relative;
        width: 100%;
        list-style: none;

        .nav-link {
            display: block;
            color: var(--putih);
            font-size: 1.1rem;
            text-transform: capitalize;
            text-decoration: none;
            width: 100%;
            padding: 1rem;
            background-color: hsl(from var(--white) h s l / .05);
            border-radius: .75rem;
            transition: var(--anim);
            
            &::after {
                content: '\e0cd';
                position: absolute;
                right: 1rem;
                font-family: crumbsicon;
                color: var(--putih);
            }
        }
    }

    .cta-mobile {
        position: relative;
        color: var(--white);
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding-bottom: 1.5rem;

        i {
            color: var(--secondary);
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        p:nth-of-type(1) {
            font-size: 1.5rem;
            font-weight: 800;
            font-family: var(--font-serif);
            text-transform: capitalize;
            margin-bottom: .35rem;
        }
        p:nth-of-type(2) {
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
    }

    #nav-toggle {
        display: none;
    }
    label[for="nav-toggle"] {
        display: grid;
        place-items: center;
        width: 2.2rem;
        height: 2.2rem;
        cursor: pointer;
        z-index: 99;
        
        i {
            font-size: 2rem;
            color: var(--putih);
            -webkit-animation: changeClrTgl linear forwards;
                    animation: changeClrTgl linear forwards;
            animation-timeline: scroll();
            animation-range: var(--nav-scroll-range);

            &:last-child {
                display: none;
                color: var(--red) !important;
            }
        }
    }
    @-webkit-keyframes changeClrTgl {
        to {
            color: var(--secondary);
        }
    }
    @keyframes changeClrTgl {
        to {
            color: var(--secondary);
        }
    }
    #nav-toggle:checked ~ .nav-menu {
        opacity: 1;
        pointer-events: all;
    }
    #nav-toggle:checked ~ label[for="nav-toggle"] i:first-child {
        display: none;
    }
    #nav-toggle:checked ~ label[for="nav-toggle"] i:last-child {
        display: block;
    }

    .cta {
        display: none;
    }

    .nav-layer {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--pr-900);
        z-index: -2;
        
        &.trans {
            -webkit-animation: showLayerNav linear forwards;
                    animation: showLayerNav linear forwards;
            animation-timeline: scroll();
            animation-range: var(--nav-scroll-range);
            opacity: 0;
        }
    }
    @-webkit-keyframes showLayerNav {
        to {
            opacity: 1;
        }
    }
    @keyframes showLayerNav {
        to {
            opacity: 1;
        }
    }
/* #endregion ====================== */

/* #region ====== FOOTER ====== */
    footer {
        color: var(--putih);
        padding: calc(var(--section-padding-y) / 2) var(--main-padding-x) 1.5rem var(--main-padding-x);
        margin: 0 auto;
        margin-top: var(--section-padding-y);
        background-color: var(--pr-900);

        .top {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, -webkit-max-content);
            grid-template-rows: repeat(3, max-content);
            gap: 2rem;
            font-size: .9rem;
            margin-bottom: 2rem;
        }
        .profile {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            font-size: 1rem;
            
            p:nth-of-type(1) {
                color: var(--secondary);
                font-family: var(--font-serif);
                font-size: 1.5rem;
                font-weight: 600;
                margin-bottom: 0;
            }
        }
        .logo {
            min-width: 75px;
            width: 75px;
            padding-top: 0;

            img {
                width: 100%;
                height: auto;
                -o-object-fit: contain;
                   object-fit: contain;
            }
        }
        .social {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.5rem;
        }
        .sub {
            color: var(--secondary);
            font-family: var(--font-serif);
            font-size: 1.25rem;
            font-weight: 600;
        }
        .address ul {
            list-style-type: none;
            padding: 0;

            li:not(:last-child) {
                margin-bottom: .25rem;
            }
            i {
                margin-right: .75rem;
            }
        }
        .navigate ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            list-style-type: none;
            padding: 0;

            li:not(:last-child) {
                margin-bottom: .25rem;
            }
            a {
                text-decoration: none;

                &:hover {
                    color: var(--secondary);
                    text-decoration: underline;
                }
            }
        }

        .mark {
            padding-top: 1.5rem;
            border-top: 1px solid var(--secondary);

            p {
                font-size: .9rem;
                text-align: center;
                margin-bottom: 0;
            }
        }
    }
/* #endregion ====================== */

/* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

/* #region ====== MAIN HEADER ====== */
    #mainHeader {
        position: relative;
        width: 100%;
        height: 100vh;
        max-width: var(--maxPage);
        margin: 0 auto;
        background-color: var(--hitam);
        isolation: isolate;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, var(--black), rgba(33, 37, 41, .3), rgba(33, 37, 41, .15) 80%);
            z-index: 2;
        }
        .hero {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;

            video {
                display: block;
                width: 100%;
                max-width: 100%;
                height: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
            }
        }

        .hero-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 2rem var(--main-padding-x);
            z-index: 2;
        }
        .rating {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            width: 100%;
            color: var(--white);

            img {
                width: 35px;
                aspect-ratio: 1;
            }
            p:first-child {
                font-size: .75rem;
                font-weight: 300;
                margin-bottom: 0;
            }
            p:last-child {
                font-size: .9rem;
                margin-bottom: 0;
            }
            b, c, span {
                display: inline-block;
            }
            b {
                margin-right: .5rem;
            }
            span {
                color: var(--secondary);
                text-indent: -2px;
            }
        }
        .rating-count {
            display: flex;
            align-items: center;
            gap: .75rem;
            color: inherit;
            text-decoration: none;
        }

        .video-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        .toggle-video,
        .toggle-sound {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            font-size: 1.35rem;
            color: var(--white);
            background: transparent;
            border: 1px solid var(--white);
            border-radius: 100%;
            opacity: .75;
            cursor: pointer;

            &:hover {
                color: var(--primary);
                background-color: var(--secondary);
                border-color: var(--secondary);
                opacity: 1;
            }
        }
    }
/* #endregion ====================== */

/* #region ====== MODAL VIDEO HEADER ====== */
    .modal-promo {
        display: flex;
        place-items: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
        background: rgba(0,0,0,0.75);
        pointer-events: none;
        transition: .5s ease-in-out;
        opacity: 0;
        z-index: 9999;

        &.open {
            pointer-events: all;
            opacity: 1;
        }
    }
    .modal-content{
        position: relative;
        display: flex;
        width: fit-content;
        height: fit-content;
        max-width: 450px;
        max-height: 95%;
        margin: 0 auto;
        background: var(--white);
        border-radius: 1rem;

        .close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: grid;
            place-items: center;
            width: 35px;
            aspect-ratio: 1;
            color: var(--red);
            font-size: 1.25rem;
            background-color: #FAEBEB;
            border-radius: 50%;
            cursor: pointer;
            z-index: 15;
        }
        
        .wrapper {
            flex: 1;
            width: 100%;
            height: 100%;
            padding: .35rem;
    
            a {
                text-decoration: none;
            }
            img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: .75rem;
            }
        }
    }
/* #endregion ====================== */

/* #region ====== ABOUT ====== */
    #about {
        position: relative;
        padding: var(--section-padding-y) var(--main-padding-x);
        overflow: hidden;

        .garnish {
            position: absolute;
            top: -100px;
            right: -150px;
            width: 300px;
            pointer-events: none;
            opacity: .15;
        }
        .wrapper {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        .text {
            .title {
                margin-bottom: 1rem;
            }

            .cols {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1rem;
                font-size: .9rem;
                margin-top: 1.75rem;

                > div {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                }
                img {
                    height: 60px;
                    margin-bottom: 1rem;
                }
                p:nth-of-type(1) {
                    font-weight: 700;
                    text-transform: uppercase;
                    margin-bottom: .25rem;
                }
                p:nth-of-type(2) {
                    font-size: .9rem;
                    margin-bottom: 0;
                }
            }
        }
        .img {
            position: relative;
            height: 100%;
            border-radius: .75rem;
            overflow: hidden;

            span {
                position: absolute;
                bottom: 0;
                color: var(--white);
                font-family: var(--font-serif);
                font-size: 1.1rem;
                line-height: 1.3;
                padding: 1.25rem;
                z-index: 5;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
/* #endregion ====================== */

/* #region ====== ESCAPE ====== */
    #escape {
        position: relative;
        padding: var(--section-padding-y) var(--main-padding-x);
        
        .garnish {
            position: absolute;
            top: -75px;
            right: 0;
            width: 350px;
            aspect-ratio: 1;
            opacity: .1;
            pointer-events: none;
            overflow: hidden;
            
            img {
                position: absolute;
                right: -150px;
                transform-origin: center right;
                animation: movingLeaf 5s ease-in-out infinite;
            }
            img:first-child {
                display: none;
                animation-delay: 0.5s;
            }
            img:last-child {
                top: 35px;
                width: 100%;
            }
        }

        .top-head {
            text-align: center;

            .mini-garnish {
                margin-inline: auto;
            }
        }
        
        .wrap-items {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 2rem;
            background-color: var(--white);

            .item {
                border-radius: 1rem;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
                overflow: hidden;
            }
            img {
                width: 100%;
                height: auto;
            }
            .text {
                position: relative;
                text-align: center;
                padding: .75rem;
                padding-top: 2.25rem;

                i {
                    position: absolute;
                    left: 50%;
                    top: -30px;
                    transform: translateX(-50%);
                    display: grid;
                    place-items: center;
                    width: 60px;
                    height: 60px;
                    color: var(--white);
                    font-size: 2rem;
                    background-color: var(--sc-400);
                    outline: 4px solid var(--white);
                    border-radius: 50%;
                }
                p:nth-of-type(1) {
                    position: relative;
                    font-family: var(--font-serif);
                    font-size: 1.5rem;
                    font-weight: 600;
                    text-transform: capitalize;
                    
                    &::after {
                        content: '';
                        display: block;
                        width: 40%;
                        margin: 0 auto;
                        margin-top: .5rem;
                        border-bottom: 2px solid var(--sc-400);
                    }
                }
                p:nth-of-type(2) {
                    font-size: .9rem;
                    margin-bottom: .75rem;
                }
            }
        }
    }
/* #endregion ====================== */

/* >>>>>>>>>>>>>>>>>>>>>>>>>  PAGES  <<<<<<<<<<<<<<<<<<<<<<<<< */

/* #region ====== RESERVATION ====== */
    #reserveHeader {
        --paddingHead: 73px;

        position: relative;
        width: 100%;
        height: calc(60vh + var(--paddingHead));
        padding-top: var(--paddingHead);
        margin: 0 auto;
        isolation: isolate;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url(/images/reservation/img-reservation-hero.jpg);
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
        }
        .wrapper {
            position: relative;
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            text-align: center;
            padding: 0 var(--main-padding-x) 2rem var(--main-padding-x);
            isolation: isolate;

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background: var(--black);
                opacity: .45;
                z-index: -1;
            }
        }
        .text {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: var(--paddingHead);

            .title {
                color: var(--putih);
                text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
                margin-bottom: .5rem;
            }
            .title::after {
                display: none;
            }
            .desc {
                color: var(--putih);
                text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
            }
        }
    }    

    #reservationSearch {
        position: relative;
        top: calc(var(--section-padding-y) * -1.25);
        padding: 0 var(--main-padding-x);
        
        .reservation-search-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .75rem;
            padding: 1rem;
            background-color: var(--white);
            border: 1px solid var(--border);
            border-radius: 1rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        .reservation-item {
            position: relative;
            width: 100%;

            &:first-of-type {
                grid-column: span 2;
            }
            label {
                display: block;
                font-size: .8rem;
                font-weight: 600;
                text-transform: capitalize;
                margin-bottom: .5rem;
            }
            .pick-dates,
            .qty {
                display: flex;
                align-items: center;
                min-height: 40px;
                padding: 0 .75rem;
                background-color: var(--white);
                border: 1px solid var(--border);
                border-radius: .5rem;

                &:focus,
                &:has(:focus) {
                    outline: 4px solid hsl(from var(--primary) h s l / .25);
                }
                > i {
                    display: none;
                }
            }
            .pick-dates {
                cursor: pointer;
                user-select: none;

                p {
                    flex: 1;
                    font-size: .95rem;
                    line-height: 1;
                    margin-bottom: 0;
                }
            }
            .pick-dates div {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    display: block;
                }
            }
            input[type="date"] {
                text-align: center;
                padding: 0;
                background: transparent;
                border: none;
                outline: none;
                cursor: pointer;
            }
            input[type="date"]::-webkit-calendar-picker-indicator {
                display: none;
            }
            select {
                width: 100%;
                padding: 0;
                background: transparent;
                border: none;
                outline: none;
                cursor: pointer;
            }
        }

        .calendar-view {
            position: absolute;
            top: calc(100% + .5rem);
            left: 0;
            width: min(100%, 420px);
            padding: 1rem;
            background-color: var(--white);
            border: 1px solid var(--border);
            border-radius: .75rem;
            box-shadow: 0 18px 40px hsl(from var(--hitam) h s l / .16);
            z-index: 20;

            &[hidden] {
                display: none;
            }
            .calendar-head {
                display: grid;
                grid-template-columns: 32px 1fr 32px;
                align-items: center;
                gap: .75rem;
                margin-bottom: .75rem;
            }
            .calendar-title {
                color: var(--hitam);
                font-size: 1.15rem;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                margin-bottom: 0;
            }
            .calendar-nav {
                display: grid;
                place-items: center;
                width: 32px;
                height: 32px;
                color: var(--blue);
                font-size: 1.1rem;
                background-color: transparent;
                border: 0;
                border-radius: 50%;
                cursor: pointer;
                transition: var(--anim);

                &:hover {
                    color: var(--putih);
                    background-color: var(--blue);
                }
            }

            .calendar-weekdays,
            .calendar-days {
                display: grid;
                grid-template-columns: repeat(7, minmax(0, 1fr));
            }
            .calendar-weekdays {
                color: var(--hitam);
                font-size: .78rem;
                font-weight: 400;
                text-align: center;
                padding-bottom: .6rem;
                margin-bottom: .4rem;
                border-bottom: 1px solid var(--border);

                span:nth-child(7) {
                    color: var(--red);
                }
            }
            .calendar-days {
                gap: .55rem 0;
            }
            .calendar-day {
                position: relative;
                display: grid;
                place-items: center;
                min-width: 0;
                height: 34px;
                color: var(--hitam);
                font-size: .95rem;
                background-color: transparent;
                border: 0;
                cursor: pointer;
                isolation: isolate;
                transition: var(--anim);

                &:nth-child(7n) {
                    color: var(--red);
                }
                &.outside,
                &:disabled {
                    color: #b8b1aa;
                    cursor: not-allowed;
                }
                &.empty {
                    pointer-events: none;
                }
                &.in-range {
                    color: var(--putih);
                    background-color: var(--blue);
                }
                &.selected {
                    color: var(--hitam);
                    background-color: var(--white);
                    border-radius: 999px;
                    box-shadow: inset 0 0 0 2px var(--blue);
                }
                &.range-start:not(.range-end) {
                    border-radius: 999px 0 0 999px;
                }
                &.range-end:not(.range-start) {
                    border-radius: 0 999px 999px 0;
                }
            }
        }

        .cr-btn {
            grid-column: span 2;
            margin-top: .5rem;
        }
    }

    #reservationResults {
        padding: 0 var(--main-padding-x) var(--section-padding-y) var(--main-padding-x);

        .reservation-result-head {
            margin-bottom: 1.5rem;

            P:first-child {
                color: var(--primary);
                font-family: var(--font-serif);
                font-size: 2rem;
                font-weight: 700;
                text-transform: capitalize;
                margin-bottom: .25rem;
            }
            #reservationResultCount {
                margin-bottom: 0;

                span {
                    display: block;
                    margin-bottom: .15rem;
                }
                i {
                    margin-right: .25rem;
                }
            }
        }
        .wrap-result {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            width: 100%;
            min-width: 0;
        }
        .reservation-room-card {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background-color: var(--putih);
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            box-shadow: 0 14px 38px hsl(from var(--hitam) h s l / .1);
            overflow: hidden;
    
            &[hidden] {
                display: none;
            }
        }

        .room-media {
            position: relative;
            min-width: 0;
            padding: .75rem;
        }
        .room-media .cr-carousel .carousel-track {
            border-radius: .75rem;
        }
        .room-media .cr-carousel .carousel-indicators {
            margin-top: .75rem;
        }

        .room-desc {
            min-width: 0;
            padding: .75rem;
        }
        .room-info-panel {
            margin-bottom: 1rem;
        }
        .room-name {
            font-family: var(--font-serif);
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.15;
            text-transform: capitalize;
            margin-bottom: .75rem;
        }
        .room-rate-badge {
            display: inline-flex;
            align-items: center;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .32rem .55rem;
            border-radius: 999px;
            margin-bottom: .65rem;
            border: 1px solid transparent;

            &.breakfast {
                color: #1f5f35;
                background-color: #dff6e7;
                border-color: #9fd8b4;
            }
            &.standard {
                color: #7a560d;
                background-color: #fff3d4;
                border-color: #ecd08e;
            }
        }
        .room-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .4rem 1.5rem;
            font-size: .85rem;

            i {
                margin-right: .25rem;
            }
        }

        .room-action {
            min-width: 0;
            padding: .75rem;
            border-top: 1px solid var(--border);

            > p {
                color: var(--primary);
                font-size: 1.1rem;
                font-weight: 700;
                text-transform: capitalize;
                margin-bottom: .5rem;
            }
            .summary {
                div {
                    display: flex;
                    flex-direction: column;
                    gap: .25rem;
                }
                p {
                    margin-bottom: 0;

                    &:nth-of-type(3) {
                        font-weight: 600;
                    }
                }
                span {
                    display: inline-block;
                    min-width: 85px;
                }
                i {
                    font-style: normal;
                }
                .cr-btn {
                    width: 100%;
                    margin-top: 1rem;
                }
            }
        }

        .no-room {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem 1.5rem;
            text-align: center;
            background-color: var(--putih);
            border: 1px solid var(--border);
            border-radius: .75rem;
            box-shadow: 0 14px 38px hsl(from var(--hitam) h s l / .08);
            overflow: hidden;

            img {
                width: auto;
                height: 225px;
                filter: grayscale(0.9);
                margin-bottom: .5rem;
            }
            p:first-of-type {
                font-size: 1.25rem;
                font-weight: 700;
                text-transform: capitalize;
                margin-bottom: .25rem;
            }
            p:nth-of-type(2) {
                font-size: 1rem;
                margin-bottom: .5rem;
            }
        }

        .reservation-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem 1.5rem;
            text-align: center;
            background-color: var(--putih);
            border: 1px solid var(--border);
            border-radius: .75rem;
            box-shadow: 0 14px 38px hsl(from var(--hitam) h s l / .08);

            video {
                width: 225px;
                aspect-ratio: 1;
            }
            p:first-of-type {
                font-size: 1.25rem;
                font-weight: 700;
                text-transform: capitalize;
                margin-bottom: .25rem;
            }
            p:nth-of-type(2) {
                font-size: 1rem;
                margin-bottom: 0;
            }
        }
    }

    @keyframes l27 {
      100% {transform: rotate(1turn)}
    }
/* #endregion ====================== */

    #tes {
        padding: var(--section-padding-y) var(--main-padding-x);

        .wrap-result {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .room-type {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
    }

/* #region ====== XXX ====== */
/* #endregion ====================== */

/* >>>>>>>>>>>>>>>>>>>>>>>>>  ETC  <<<<<<<<<<<<<<<<<<<<<<<<< */

/* #region ====== MOTION HANDLE ====== */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --anim: 0;
            --anim-lg: 0;
        }
    }
/* #endregion ====================== */