:root{
  --bg:#ffffff; --bg-hero:#e0f2fe; --card:#ffffff; --border:#e5e7eb;
  --text:#0f172a; --muted:#64748b; --brand:#ef4444; --brand-dark:#dc2626;
  --primary:#0ea5a3; --accent:#60a5fa; --accent2:#f59e0b; --accent3:#22c55e;
}

[data-theme='dark']{
  --bg:#0b1120; --bg-hero:#0b1a2a; --card:#0f172a; --border:#1f2937;
  --text:#e5e7eb; --muted:#94a3b8; --brand:#f97316; --brand-dark:#ea580c;
  --primary:#14b8a6; --accent:#60a5fa; --accent2:#f59e0b; --accent3:#22c55e;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins', system-ui, sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:var(--primary); text-decoration:none; }

.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 0;
}
.header-actions{ display:flex; align-items:center; gap:.5rem; }

.logo-wrap{ display:flex; align-items:center; gap:.6rem; }
.site-logo{ height:38px; width:auto; }
.brand-text{ font-weight:700; color:var(--text); }
.brand-sub{ color:var(--primary); }

.nav a{ margin:0 .8rem; color:var(--text); }
.nav a:hover{ color:var(--primary); }

.toggle{
  background:#f1f5f9;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.45rem .7rem;
  cursor:pointer;
  color:#0f172a;
}
[data-theme='dark'] .toggle{
  background:#111827;
  color:var(--text);
}

.cta.whatsapp{
  background:#25D366;
  color:#052e15;
  padding:.5rem .9rem;
  border-radius:999px;
  font-weight:600;
}
.cta.call{
  background:#22c55e;
  color:#052e15;
  padding:.5rem .9rem;
  border-radius:999px;
  font-weight:600;
}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(180deg,var(--bg-hero),var(--bg));
  padding:1.2rem 0;
}
.hero-top h1{ margin:.2rem 0 .3rem; }

.pill-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 12px 24px rgba(0,0,0,.06);
  margin-bottom:32px; /* ✅ spacing */
}

.pill-grid{
  display:grid;
  grid-template-columns:1.2fr 1.2fr 1fr 1fr;
  gap:.8rem;
}
.pill-item{ display:flex; flex-direction:column; }
.pill-item .label{ margin:0 0 .2rem; font-size:.9rem; }

.pill-item input,
.pill-item select{
  padding:.7rem .9rem .7rem 2.2rem;
  border:1.5px solid #cbd5e1;
  border-radius:12px;
  background:var(--card);
  color:var(--text);
}
.pill-item.with-icon{ position:relative; }
.pill-item .icon{
  position:absolute;
  left:.7rem;
  bottom:.9rem;
  width:18px;
  opacity:.7;
}

.pill-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}
.quick{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.chip{
  background:#f1f5f9;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem .9rem;
  cursor:pointer;
  color:#0f172a;
}
[data-theme='dark'] .chip{
  background:#111827;
  color:var(--text);
}

.btn.search{
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:.7rem 1.3rem;
  font-weight:700;
  cursor:pointer;
}
.btn.search:hover{ background:var(--brand-dark); }

/* ✅ separation line for feature section */
.hero-art{ margin-top:26px; }
.hero-art::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(to right, transparent, var(--border), transparent);
  margin-bottom:26px;
}

/* ================= COMMON ================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
}
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.accent1{ background:linear-gradient(180deg,rgba(96,165,250,.20),var(--card)); }
.accent2{ background:linear-gradient(180deg,rgba(245,158,11,.20),var(--card)); }
.accent3{ background:linear-gradient(180deg,rgba(34,197,94,.20),var(--card)); }
.clickable{ cursor:pointer; }

.btn.primary{
  background:var(--primary);
  color:#052e15;
  border:none;
  border-radius:10px;
  padding:.6rem 1rem;
  font-weight:700;
  cursor:pointer;
}
.btn.secondary{
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.6rem 1rem;
  font-weight:600;
  cursor:pointer;
}
[data-theme='dark'] .btn.secondary{
  background:#111827;
  color:var(--text);
  border:1px solid var(--border);
}
.btn.primary:hover,
.btn.secondary:hover{ filter:brightness(.98); }

/* Page header + results */
.page-header{ padding:1rem 0; border-bottom:1px solid var(--border); }
.results .actions-card{ margin-top:1rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ margin:0 0 8px 0; }
.cta-row{ margin-top:16px; }

.contact-form label{ display:flex; flex-direction:column; gap:.35rem; font-weight:600; }
.contact-form input,
.contact-form textarea{
  padding:.6rem .7rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.8rem; }
.form-actions{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }

.form-status{
  margin-top:.8rem;
  padding:.7rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  font-weight:600;
  display:none;
}
.form-status.ok{ background:rgba(34,197,94,.12); }
.form-status.error{ background:rgba(239,68,68,.12); }

/* Map embed */
.map-embed{ width:100%; border-radius:12px; overflow:hidden; }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* ================= FOOTER ================= */
.site-footer{
  border-top:1px solid var(--border);
  padding:1rem 0;
  margin-top:1rem;
  background:var(--card);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-links a{ margin-left:1rem; color:var(--muted); }
.footer-links a:hover{ color:var(--primary); }

/* Floating buttons */
.floating-whatsapp{
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  background:#25D366;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:24px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.floating-call{
  position:fixed;
  right:18px;
  bottom:82px;
  width:52px;
  height:52px;
  background:#22c55e;
  color:#052e15;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* ================= AUTOCOMPLETE ================= */
.suggest-wrap{ position:relative; }
.suggestions{
  position:absolute;
  top:100%;
  left:0; right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  max-height:240px;
  overflow-y:auto;
  z-index:999;
  display:none;
  margin-top:6px;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
}
.suggestions .item{ padding:.6rem .8rem; cursor:pointer; color:var(--text); }
.suggestions .item:hover{ background:rgba(14,165,163,.12); }

/* ================= MOBILE MENU ================= */
.menu-btn{
  display:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:10px;
  padding:.45rem .7rem;
  cursor:pointer;
}
.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:9999;
}
.mobile-menu.show{ display:block; }
.mobile-menu-inner{
  width:min(420px, 92vw);
  height:100%;
  background:var(--card);
  padding:1.2rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.menu-close{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  width:44px;
  height:44px;
  cursor:pointer;
  float:right;
}
.mobile-menu-inner a{
  display:block;
  padding:1rem .5rem;
  font-size:1.2rem;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.mobile-menu-inner a:hover{ color:var(--primary); }

/* Instagram follow section in mobile menu */
.mobile-follow{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.follow-title{
  margin:0 0 10px;
  font-weight:700;
  color:var(--muted);
}
.ig-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
}
.ig-icon{ width:22px; height:22px; }

/* ================= MODALS ================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:9999;
  padding:1rem;
}
.modal.show{ display:flex; align-items:center; justify-content:center; }
.modal-box{
  width:min(920px, 96vw);
  max-height:85vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem 1.1rem;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.modal-box.large{ max-width:900px; }
.modal-close{
  float:right;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  width:42px;
  height:42px;
  cursor:pointer;
}

/* Outstation cards grid */
.places-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:.8rem;
  margin-top:.9rem;
}
.place-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:var(--card);
}
.place-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}
.place-card span{
  display:block;
  padding:.55rem .6rem;
  font-weight:700;
  text-align:center;
}

/* Gallery (premium captions) */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:16px;
}
.gallery-item{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#0b1220;
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}
.gallery-item figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25), transparent);
  transform: translateY(100%);
  transition: transform .35s ease;
}
.gallery-item:hover{
  transform: translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item:hover figcaption{ transform: translateY(0); }
.gallery-item:active{ transform: scale(.98); }

/* Premium outstation cards ONLY inside outstation modal */
#outstationModal .place-card{
  position:relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
#outstationModal .place-card span{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px;
  font-size:16px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25), transparent);
}
#outstationModal .place-card img{ transition: transform .45s ease; }
#outstationModal .place-card:hover{
  transform: translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}
#outstationModal .place-card:hover img{ transform: scale(1.08); }
#outstationModal .place-card:active{ transform: scale(.98); }

/* Premium hover ONLY home feature cards */
.hero-feature .card{
  border-radius:16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero-feature .card:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.hero-feature .card:active{ transform: scale(.98); }

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .pill-grid{ grid-template-columns:1fr 1fr; }
  .grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }

  .nav{ display:none; }
  .menu-btn{ display:inline-block; }

  .cta.call,
  .cta.whatsapp{ display:none !important; }

  .places-grid{ grid-template-columns:repeat(2, 1fr); }
  .place-card img{ height:110px; }

  #outstationModal .place-card:hover{ transform:none; box-shadow:none; }
  .gallery-item:hover{ transform:none; box-shadow:none; }
  .gallery-item figcaption{ transform: translateY(0); }
}
@media(max-width:560px){
  .pill-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media(max-width:420px){
  .places-grid{ grid-template-columns:1fr; }
  .place-card img{ height:160px; }
}
@media(max-width:600px){
  .gallery-item img{ height:160px; }
}

/* ===== Transparent Pricing Popup Actions ===== */
.pricing-actions{
  display: flex;
  gap: 12px;              /* ✅ space between buttons */
  margin-top: 16px;
  flex-wrap: wrap;
}

.pricing-actions .btn{
  flex: 1;                /* equal width buttons */
  text-align: center;
}

/* Mobile stack */
@media (max-width: 480px){
  .pricing-actions{
    flex-direction: column;
  }
}
.pricing-actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
.pricing-actions .btn{
  flex:1;
  text-align:center;
}
@media(max-width:480px){
  .pricing-actions{ flex-direction:column; }
}

/* ===== Premium About Page ONLY ===== */
.about-premium .page-header{
  background: linear-gradient(135deg, rgba(14,165,163,.18), rgba(96,165,250,.18));
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .about-premium .page-header{
  background: linear-gradient(135deg, rgba(20,184,166,.14), rgba(96,165,250,.10));
}

.about-premium .page-header h1{
  letter-spacing: -.5px;
}

.about-premium .about-hero{
  background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.18), transparent 45%),
              radial-gradient(circle at 80% 20%, rgba(20,184,166,.18), transparent 45%);
  padding: 1.2rem 0 1.6rem;
}

[data-theme="dark"] .about-premium .about-hero{
  background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.14), transparent 45%),
              radial-gradient(circle at 80% 20%, rgba(20,184,166,.12), transparent 45%);
}

.about-premium .card{
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

[data-theme="dark"] .about-premium .card{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Premium stats cards */
.about-premium .stat{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), var(--card));
}

[data-theme="dark"] .about-premium .stat{
  background: linear-gradient(180deg, rgba(15,23,42,.9), var(--card));
}

/* Premium tags */
.about-premium .tag{
  background: linear-gradient(180deg, rgba(255,255,255,.95), var(--card));
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

[data-theme="dark"] .about-premium .tag{
  background: linear-gradient(180deg, rgba(15,23,42,.95), var(--card));
  box-shadow: 0 12px 22px rgba(0,0,0,.30);
}

/* Premium CTA band */
.about-premium .cta-band{
  background: linear-gradient(135deg, rgba(14,165,163,.12), rgba(96,165,250,.10));
  border-radius: 20px;
}

[data-theme="dark"] .about-premium .cta-band{
  background: linear-gradient(135deg, rgba(20,184,166,.10), rgba(96,165,250,.08));
}

/* Premium hover only for About page cards */
.about-premium .card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-premium .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0,0,0,.14);
}
[data-theme="dark"] .about-premium .card:hover{
  box-shadow: 0 22px 48px rgba(0,0,0,.45);
}