*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#222;background:#fff;line-height:1.6}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 6%;background:#fff;position:sticky;top:0;z-index:10}
nav h2{margin:0;color:#0c7a35}
nav div{display:flex;align-items:center;gap:24px}
nav a{text-decoration:none;color:#333;font-weight:600}
nav a:hover{color:#0c7a35}
.btn{background:#0c7a35;color:#fff;border:0;padding:12px 22px;border-radius:7px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#095d29}
.hero{
    padding:75px 6%;
    background:linear-gradient(120deg,#f2f8ef,#fff);
    position:relative;
    overflow:hidden;
}
.wrap{max-width:1200px;margin:auto}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.28);
    z-index:1;
    pointer-events:none;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:50px;
    align-items:center;
    position:relative;
    z-index:2;
}

.hero-bg-layer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.16;
    transition:opacity 1.6s ease-in-out;
    z-index:0;
    pointer-events:none;
}
.hero h3{color:#0c7a35;margin-bottom:8px}
.hero h1{font-size:56px;line-height:1.1;margin:0 0 20px}
.hero h1 span{color:#9bd23c}

.hero-text{
    background:rgba(255,255,255,0.50);
    padding:18px 24px;
    border-radius:12px;
    display:inline-block;
}

.booking{background:#fff;padding:28px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.booking input,.booking select,.form input,.form textarea,.form select{width:100%;padding:13px;margin:7px 0;border:1px solid #ddd;border-radius:6px}
.rooms,.page-section{padding:65px 6%;max-width:1250px;margin:auto}
.rooms h2,.page-section h2{text-align:center;color:#0c7a35;margin-bottom:35px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.card img{width:100%;height:230px;object-fit:cover}
.card>div{padding:18px}
.card h3{margin-top:0;color:#0c7a35}
.page-hero{padding:65px 6%;text-align:center;background:#f2f8ef}
.page-hero h1{font-size:48px;margin:0;color:#0c7a35}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery img{width:100%;height:250px;object-fit:cover;border-radius:10px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.info-box{padding:28px;background:#f7faf5;border-radius:12px}
.form{max-width:750px;margin:auto}
.form textarea{min-height:150px;resize:vertical}
.footer{margin-top:40px;padding:30px 6%;background:#123d27;color:#fff;text-align:center}
@media(max-width:800px){
nav{flex-direction:column;gap:14px}
nav div{gap:12px;flex-wrap:wrap;justify-content:center}
.hero-grid,.info-grid{grid-template-columns:1fr}
.cards,.gallery{grid-template-columns:1fr}
.hero h1{font-size:42px}
.page-hero h1{font-size:38px}
}

/* Smooth header */
nav {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}

nav.nav-hidden {
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none;
}

nav.nav-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Compact booking form - keeps the original right-side card layout */
.booking h2 {
    margin-top: 0;
    margin-bottom: 14px;
}

.booking-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.booking-field label,
.booking > label {
    display: block;
    margin: 4px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.booking input[type="date"],
.booking input[type="number"],
.booking select {
    width: 100%;
    padding: 10px 11px;
    margin: 0 0 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #222;
}

.booking input:focus,
.booking select:focus {
    outline: none;
    border-color: #0c7a35;
    box-shadow: 0 0 0 2px rgba(12,122,53,0.08);
}

.extra-count {
    display: none;
}

.extra-count.show {
    display: block;
}

.children-ages {
    margin-top: 2px;
}

.children-ages label {
    display: block;
    margin: 4px 0;
    font-size: 13px;
    font-weight: 600;
}

.children-ages select {
    margin-bottom: 6px;
}

@media(max-width:800px){
    .booking-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Explore Around Us nav link */
nav a[href="explore.html"]{
    text-decoration:none;
    color:#333;
    font-weight:600;
}
nav a[href="explore.html"]:hover{
    color:#0c7a35;
}
/* Budget Double Room Photos */
.room-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 18px;
}

.room-photos img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    cursor: zoom-in;
}

/* Budget Double Room Image Lightbox */
.image-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    padding: 30px;
    cursor: zoom-out;
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.image-lightbox.show {
    display: flex;
}

@media(max-width:800px) {
    .room-photos {
        grid-template-columns: 1fr;
    }

    .room-photos img {
        height: 220px;
    }
}
/* ==========================================
   🌸 KPR AI CHATBOT SYSTEM STYLES 🌸
   ========================================== */
#chat-circle { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 60px; 
    height: 60px; 
    background: #0c7a35; 
    color: #fff; 
    border-radius: 50%; 
    font-size: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 999; 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}
#chat-box { 
    position: fixed; 
    bottom: 90px; 
    right: 20px; 
    width: 350px; 
    height: 450px; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.2); 
    display: flex; 
    flex-direction: column; 
    z-index: 999; 
    overflow: hidden; 
    border: 1px solid #0c7a35; 
    font-family: Arial, sans-serif; 
}
#chat-header { 
    background: #0c7a35; 
    color: #fff; 
    padding: 15px; 
    font-weight: bold; 
    font-size: 16px; 
}
#chat-logs { 
    flex: 1; 
    padding: 15px; 
    overflow-y: auto; 
    background: #f9f9f9; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.chat-msg { 
    padding: 10px 14px; 
    border-radius: 8px; 
    max-width: 80%; 
    font-size: 14px; 
    line-height: 1.4; 
}
.chat-msg.bot { 
    background: #e8f5e9; 
    color: #222; 
    align-self: flex-start; 
    border-bottom-left-radius: 0; 
}
.chat-msg.user { 
    background: #0c7a35; 
    color: #fff; 
    align-self: flex-end; 
    border-bottom-right-radius: 0; 
}
#chat-input-area { 
    display: flex; 
    padding: 10px; 
    border-top: 1px solid #eee; 
    background: #fff; 
    gap: 8px; 
}
#chat-input { 
    flex: 1; 
    border: 1px solid #ddd; 
    padding: 10px; 
    border-radius: 6px; 
    outline: none; 
    font-size: 14px; 
}
#chat-input-area button { 
    background: #0c7a35; 
    color: white; 
    border: none; 
    padding: 0 15px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
}