/*
==================================================
LAYOUT GENERAL
==================================================
*/

.ch-listing{

    max-width:1280px;

    margin:0 auto;

    padding:40px 24px 80px;

}

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

.ch-listing-hero{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    margin-bottom:36px;

    background:#fff;

    box-shadow:
        0 12px 40px rgba(15,23,42,.08);

}

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

.ch-listing-hero-img{

    width:100%;

    height:480px;

    object-fit:cover;

    display:block;

}

/*
==================================================
PLACEHOLDER
==================================================
*/

.ch-listing-hero-placeholder{

    height:480px;

    background:#f3f4f6;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#6b7280;

    font-size:15px;

}

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

.ch-listing-hero-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:2;

    padding:40px;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.72) 100%
        );

    color:#fff;

}

/*
==================================================
TITLE
==================================================
*/

.ch-listing-title{

    margin:0;

    font-size:52px;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-1px;

}

/*
==================================================
META
==================================================
*/

.ch-listing-meta{

    margin-top:16px;

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    font-size:15px;

    opacity:.92;

}

/*
==================================================
BODY
==================================================
*/

.ch-listing-body{

    display:grid;

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

    gap:34px;

    align-items:start;

}

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

.ch-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:1px solid #eef2f7;

    box-shadow:
        0 8px 28px rgba(15,23,42,.05);

    margin-bottom:26px;

}

/*
==================================================
CARD TITLES
==================================================
*/

.ch-card h2{

    margin:0 0 24px;

    font-size:34px;

    line-height:1.1;

    letter-spacing:-.5px;

}

/*
==================================================
DESCRIPTION
==================================================
*/

.ch-card p{

    color:#475569;

    line-height:1.85;

    font-size:16px;

}

/*
==================================================
AMENITIES
==================================================
*/

.ch-amenities{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

}

/*
==================================================
AMENITY ITEM
==================================================
*/

.ch-amenity{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid #edf2f7;

    transition:all .22s ease;

}

.ch-amenity:hover{

    transform:translateY(-2px);

    background:#fff;

    box-shadow:
        0 8px 24px rgba(15,23,42,.06);

}

/*
==================================================
AMENITY ICON
==================================================
*/

.ch-amenity-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#ecfeff;

    color:#0891b2;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

}

/*
==================================================
AMENITY TEXT
==================================================
*/

.ch-amenity-text{

    font-size:15px;

    font-weight:600;

    color:#1e293b;

    line-height:1.4;

}

/*
==================================================
SIDEBAR
==================================================
*/

.ch-listing-sidebar{

    position:sticky;

    top:120px;

}

/*
==================================================
RESERVE BOX
==================================================
*/

.ch-reserve-box{

    background:#fff;

    border-radius:28px;

    padding:30px;

    border:1px solid #edf2f7;

    box-shadow:
        0 12px 36px rgba(15,23,42,.08);

}

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

.ch-price{

    font-size:42px;

    font-weight:800;

    color:#111827;

    margin-bottom:24px;

}

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

.ch-reserve-box label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#475569;

}

/*
==================================================
INPUTS
==================================================
*/

.ch-reserve-box input,
.ch-reserve-box select{

    width:100%;

    height:56px;

    border-radius:16px;

    border:1px solid #dbe3ec;

    background:#f8fafc;

    padding:0 18px;

    font-size:15px;

    transition:all .2s ease;

    margin-bottom:18px;

}

.ch-reserve-box input:focus,
.ch-reserve-box select:focus{

    outline:none;

    border-color:#06b6d4;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(6,182,212,.12);

}

/*
==================================================
GUEST SELECTOR
==================================================
*/

.ch-guest-selector{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-bottom:22px;

}

.ch-guest-selector button{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#06b6d4;

    color:#fff;

    font-size:24px;

    font-weight:700;

    cursor:pointer;

    transition:all .2s ease;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 8px 20px rgba(6,182,212,.22);

}

.ch-guest-selector button:hover{

    transform:translateY(-2px);

    background:#0891b2;

}

.ch-guest-selector input{

    width:92px;

    height:56px;

    border-radius:16px;

    border:1px solid #dbe3ec;

    background:#fff;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin:0;

}

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

.ch-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:all .22s ease;

}

.ch-btn--primary{

    background:#111827;

    color:#fff;

}

.ch-btn--primary:hover{

    transform:translateY(-2px);

    background:#000;

}

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

.ch-note{

    margin-top:14px;

    font-size:13px;

    color:#64748b;

    text-align:center;

}

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

.ch-listing-gallery{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:18px;

    margin-top:28px;

}

.ch-listing-gallery img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:18px;

    cursor:zoom-in;

    transition:all .25s ease;

}

.ch-listing-gallery img:hover{

    transform:scale(1.03);

    box-shadow:
        0 14px 28px rgba(15,23,42,.12);

}

/*
==================================================
LIGHTBOX
==================================================
*/

.ch-lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.ch-lightbox.active{

    display:flex;

}

.ch-lightbox-img{

    max-width:90%;

    max-height:88%;

    border-radius:18px;

}

.ch-lightbox-close{

    position:absolute;

    top:24px;

    right:32px;

    font-size:42px;

    color:#fff;

    cursor:pointer;

}

.ch-lightbox-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:30px;

    cursor:pointer;

    backdrop-filter:blur(6px);

}

.ch-lightbox-prev{

    left:24px;

}

.ch-lightbox-next{

    right:24px;

}

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

@media(max-width:980px){

    .ch-listing-body{

        grid-template-columns:1fr;

    }

    .ch-listing-sidebar{

        position:relative;

        top:auto;

    }

    .ch-listing-title{

        font-size:38px;

    }

    .ch-listing-hero-img,
    .ch-listing-hero-placeholder{

        height:360px;

    }

}

@media(max-width:640px){

    .ch-listing{

        padding:20px 14px 60px;

    }

    .ch-card{

        padding:22px;

        border-radius:20px;

    }

    .ch-card h2{

        font-size:28px;

    }

    .ch-listing-title{

        font-size:30px;

    }

    .ch-listing-hero-content{

        padding:24px;

    }

    .ch-amenities{

        grid-template-columns:1fr;

    }

    .ch-price{

        font-size:34px;

    }

}

/*
==================================================
BOLD PAYMENT
==================================================
*/

.ch-payment-box{

    margin-top:24px;

    text-align:center;

}

/*
==================================================
TITLE
==================================================
*/

.ch-payment-title{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:14px;

    letter-spacing:.2px;

}

/*
==================================================
BOLD BUTTON CONTAINER
==================================================
*/

#bold-button-container{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}

/*
==================================================
BOLD BUTTON
==================================================
*/

#bold-button-container iframe,
#bold-button-container button{

    margin:0 auto !important;

}
/*
==================================================
PAYMENT BOX
==================================================
*/

.ch-payment-box{

    margin-top:24px;

    text-align:center;

}

/*
==================================================
PAYMENT TITLE
==================================================
*/

.ch-payment-title{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:14px;

    letter-spacing:.2px;

}

/*
==================================================
BOLD CONTAINER
==================================================
*/

#bold-button-container{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}