/* ========= THEME / TOKENS ========= */
  

    /* ========= BASE ========= */
   
 
    a{color:inherit; text-decoration:none}
    img{display:block}
    .no-scroll{overflow:hidden; height:100dvh;}

    

  
 
 

    /* ========= DETAIL PAGE STYLES ========= */
    
    .back-btn:hover{background:rgba(255,255,255,.12)}
    
    .detail-grid{display:grid; grid-template-columns: 1fr 380px; gap:24px; margin-top:20px}
    @media (max-width: 980px){ .detail-grid{grid-template-columns:1fr} }
    
    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)}
    .card .head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
    
    
    
    .detail-info{padding:20px}
    .detail-meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
    .chip{background:#152234;border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:.85rem}
    
    .detail-amenities{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; margin:20px 0}
    .amenity-item{display:flex; align-items:center; gap:10px; padding:12px; background:#0b1522; border:1px solid rgba(255,255,255,.08); border-radius:10px}
    
    .booking-card{position:sticky; top:100px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:20px; box-shadow:var(--shadow)}
    .booking-card .price{font-size:1.8rem; font-weight:900; margin-bottom:10px}
    
    .booking-form .field{margin-bottom:16px}
    .booking-form label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
    .input, input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="tel"], select, textarea{
      width:100%; background:#0b1522; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:12px 12px; border-radius:12px; outline:none; transition:.2s ease
    }
    input:focus, select:focus, textarea:focus{border-color:var(--brand); box-shadow:var(--ring)}
    .row{display:flex; gap:10px}
    .row>*{flex:1}
    textarea{min-height:92px; resize:vertical}
    
    .booking-form .total{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid rgba(255,255,255,.08); margin-top:20px; font-size:1.2rem; font-weight:700}
    
    .btn{border:0; padding:12px 14px; border-radius:12px; cursor:pointer; font-weight:700}
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white; width:100%}
    
    .toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; padding:12px 16px; background:linear-gradient(135deg, rgba(106,167,255,.95), rgba(163,107,255,.95)); color:white; border-radius:12px; box-shadow:var(--shadow); z-index:200}
    
    .muted{color:var(--muted)}
    
   
/* GALLERY */
.detail-gallery{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0f1b2a}
.main-img-wrapper{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px}
.detail-gallery .main-img-wrapper img,.detail-gallery .main-img-wrapper video{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}
.thumbs{display:flex;gap:8px;padding:12px;background:#0b1522;border-top:1px solid rgba(255,255,255,.06);overflow-x:auto}
.thumb{flex:0 0 auto;width:80px;height:60px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12);cursor:pointer;opacity:.7;position:relative;transition:opacity .2s, transform .2s}
.thumb.active{opacity:1;border-color:var(--brand);transform:scale(1.05)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.video-thumb::after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);color:white;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
.gallery-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:white;border:none;font-size:28px;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10}
.gallery-btn:hover{background:rgba(0,0,0,.6)}
.gallery-btn.prev{left:12px}
.gallery-btn.next{right:12px}
.fullscreen-btn{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.35);color:white;border:none;font-size:20px;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:10}
.fullscreen-btn:hover{background:rgba(0,0,0,.6)}

/* FULLSCREEN */
.fullscreen-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:none;align-items:center;justify-content:center;z-index:1000}
.fullscreen-overlay.active{display:flex}
.fullscreen-overlay img,.fullscreen-overlay video{max-width:90%;max-height:90%;border-radius:12px}
.fullscreen-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.2);color:white;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer}