:root{
    --bg-1:#0b1117; --bg-2:#0f1720; --accent:#caa742; --muted:#9aa4ae;
    --card:#071018; --radius:14px; --max:1200px;
    --shadow: 0 10px 30px rgba(2,6,12,0.6);
    --thumb-w: 150px; --thumb-h: 120px; --gap: 10px; --visible-count: 5; --thumb-border-active: #e2b94b;
  }

  *{box-sizing:border-box}
  body{
    margin:0; min-height:100%; background-color: #20232c; color:#eaf4ff;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale; line-height:1.45;
  }

  .wrap{max-width:var(--max);margin:20px auto; padding:15px;}
  .header-title{padding: 20px 20px 10px;}
  .hero1 {position: relative;border-radius: 14px;overflow: hidden;min-height: 400px;background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));box-shadow: 0 8px 30px rgba(2,6,23,0.06);}
  .hero1 .hero1-img { width:100%; height:420px; object-fit:cover; display:block; }
  .hero1 .overlay {position: absolute;inset: 0;display:flex;align-items:flex-end;padding: 20px;background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent 40%);}
  .hero1 .meta {color: #fff;max-width: 920px;backdrop-filter: blur(2px);}
  .title {font-size: 22px;font-weight: 700;margin: 2px 0 6px;}
  .sub {color: rgba(255,255,255,0.9);font-size: 14px;display:flex;gap:12px;align-items:center;}
  .badge {background: #fff; color:#e2b94b;padding: 6px 10px;border-radius: 999px;font-weight:600;display:inline-flex;gap:8px;align-items:center;}
  .stars { color: #f7b500; font-weight:700; }
  .hero-price { color: #f7b500; font-weight:700; }

  /* page grid */
  .grid{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;}

  /* hero / gallery */
  .gallery{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow);}
  .title-row{display:flex;gap:20px;align-items:end;justify-content:space-between;}
  h1.title{font-size:38px;margin:6px 0 8px;color:#fff}
  .subtitle{color:var(--muted);font-size:16px;margin-bottom:12px}

  
  .gallery {background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:25px;padding:18px; box-shadow: 0 6px 20px;}
  .hero {border-radius:12px;overflow:hidden;background:#0b0d0f;height:420px;position:relative;}
  .hero img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
  .hero .overlay {position:absolute; inset:0; pointer-events:none;background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35));}

  /* arrows */
  .nav-btn{background:rgba(0,0,0,0.45);border:none;color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(2,6,12,0.6)}
  .nav-btn[disabled]{opacity:.35;cursor:default}

  /* thumbnails */
  .thumb-row{display:flex;align-items:center;gap:12px;margin-top:12px;
    /* width sized to show exactly (--visible-count) thumbnails (incl gaps) */
      max-width: calc((var(--thumb-w) * var(--visible-count)) + (var(--gap) * (var(--visible-count) - 1)));
    }
  .thumb-wrapper { display:flex; align-items:center; gap:10px; width:100%; }
  .thumbs{display:flex;gap:12px;overflow:hidden;flex:1}
  .thumb{flex:0 0 auto;width:120px;height:80px;border-radius:10px;overflow:hidden;border:3px solid transparent;cursor:pointer}
  .thumb img{width:100%;height:100%;object-fit:cover}
  .thumb.active{border-color:var(--accent);transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.45)}

  .thumb-btn{background:rgba(255,255,255,0.03);border:none;color:var(--muted);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}

  .thumb-progress{height:6px;background:rgba(255,255,255,0.03);border-radius:6px;overflow:hidden;margin-top:8px}
  .thumb-progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#f0d47a)}

  /* right card */
  .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:22px;box-shadow: 0 6px 20px;position:sticky;top:28px}
  .price{font-size:28px;font-weight:800;color:var(--accent);margin-bottom:6px}
  .meta{color:var(--muted);margin-bottom:12px}
  .cta{display:block;background:linear-gradient(90deg,var(--accent),#dfb443);color:#071018;text-align:center;padding:12px;border-radius:10px;font-weight:700;text-decoration:none}
  .ghost{display:inline-block;margin-top:10px;background:transparent;border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer}

  /* info & amenities */
  .section{margin-top:22px;background:transparent;border-radius:25px;}
  h3.section-title{color:#fff;margin-bottom:12px}
  .overview{color:var(--muted);font-size:15px;max-width:900px}
  .amenities{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
  .amenity{width:110px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.009));padding:12px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);text-align:center;cursor:default;transition:transform .18s, box-shadow .18s}
  .amenity:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.5)}
  .amenity svg{width:28px;height:28px;opacity:0.95;color:var(--accent)}

  /* details table */
  .details-table{margin-top:12px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));box-shadow: 0 6px 20px;}
  .dt-row{display:flex}
  .dt-cell{flex:1;padding:14px;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--muted)}
  .dt-cell.k{font-weight:700;color:#cfe6ff;width:35%}
  .dt-cell.v{color:#eaf4ff;width:65%}

  /* map */
  .map{border-radius:10px;overflow:hidden;height:200px;border:1px solid rgba(255,255,255,0.02);margin-top:8px}

  /* similar properties */
  .similar-properties {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}
  .similar h2{text-align: center;}
  .property-card {background: #fff;color: #20232c;border-radius: 12px;padding: 10px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);flex: 1;text-align: center;}
  .property-card img {width: 100%;border-radius: 12px;}
  .prop-card{min-width:220px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px;border-radius:12px;display:flex;gap:10px;align-items:center}
  .prop-card img{width:72px;height:64px;object-fit:cover;border-radius:8px}

  /* modal */
  .modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,12,0.6);z-index:1200}
  .modal{background:#06101a;color:#e6eef6;border-radius:12px;padding:10px;width:92%;max-width:520px;box-shadow:0 18px 60px rgba(0,0,0,0.7)}
  .modal form{display:flex;flex-direction:column;gap:5px}
  .modal label{font-weight:400;color:#cbd5e1}
  .modal input,.modal textarea,.modal select{width:100%;padding:8px;border-radius:8px;border:1px solid #334155;background:#0f1a25;color:#eaf4ff}
  .modal .actions{display:flex;gap:10px;margin-top:8px; justify-content:space-between}

  .btn{padding:10px 50px; border-radius:10px;border:none;cursor:pointer}
  .btn.primary{background:linear-gradient(135deg,var(--accent),#b8860b);color:#071018;font-weight:700}
  .btn.ghost{background:#334155;color:#eaf4ff}

  /* toast */
  .toast{position:fixed;right:18px;bottom:18px;padding:10px 14px;border-radius:10px;background:#0b3f1a;color:#dff7df;display:none;z-index:1300}

  /* responsive */
  @media (max-width:992px){
    .hero{height:300px}
    .grid{grid-template-columns:1fr 320px}
    .card{position:relative;top:0}
    .thumbs{gap:10px}
    .title-row{flex-direction:column;align-items:flex-start;gap:8px}
    h1.title{font-size:28px}
    :root{--visible-count: 4;}
  }
  @media (max-width:768px){
    .hero{height:220px}
    .grid{grid-template-columns:1fr; } .right-col{order:2}
    .thumb{width:82px;height:54px}
    :root{--visible-count: 3;}
    .similar-properties{padding: 10px;}
  }
  @media (max-width:576px){
    :root{--visible-count: 2;}
  }
  

/* Floating WhatsApp Container */
#whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* WhatsApp Button */
.whatsapp-btn {
    background: #25D366;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-size: 30px;
    transition: transform 0.2s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

/* Popup Text */
.whatsapp-text {
    background: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    white-space: nowrap;
    opacity: 0; /* start hidden */
    transform: translateX(20px); /* slide-in effect */
    animation: slideIn 0.8s forwards;
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}