/* ==========================================================
   NATURAL ASILIA — packages.css
   ========================================================== */
:root{
  --brand:#652b7b;
  --brand-dark:#4b1f5b;
  --gold:#d6b24b;
  --bg-soft:#faf6ef;
}

/* ---------- Hero ---------- */
.pkg-hero{
  width:100%;
  padding:70px 20px 90px;
  text-align:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(214,178,75,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.08), transparent 40%),
    var(--brand);
}
.pkg-hero h1{
  color:#fff;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(30px,4.5vw,52px);
  margin-bottom:12px;
}
.pkg-hero p{
  color:rgba(255,255,255,0.85);
  max-width:640px;
  margin:0 auto;
  font-size:17px;
}

/* ---------- Trust strip ---------- */
.trust-strip{
  overflow:hidden;
  background:#fff;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(101,43,123,0.12);
  margin-top:-45px;
  position:relative;
  z-index:5;
  padding:10px;
}
.trust-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px;
  color:#333;
  font-weight:500;
  font-size:15px;
}
.trust-item i{ color:var(--brand); font-size:22px; }

/* ---------- Section ---------- */
.pkg-section{ padding:60px 0; }
.pkg-section.pb-0{ padding-bottom:0; }
.pkg-section.pt-0{ padding-top:0; }

/* ---------- Start here ---------- */
.start-here{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  background:var(--brand);
  border-radius:18px;
  padding:32px 36px;
  color:#fff;
}
.start-here h2{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(22px,2.6vw,30px);
  margin-bottom:6px;
}
.start-here p{ margin:0; color:rgba(255,255,255,0.85); max-width:560px; }
.start-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-gold{
  background:var(--gold);
  color:var(--brand-dark);
  font-weight:600;
  border-radius:10px;
  padding:12px 22px;
  border:0;
}
.btn-gold:hover{ background:#c4a03d; color:var(--brand-dark); }
.start-actions .btn-outline-light{ border-radius:10px; padding:12px 22px; font-weight:600; }

/* ---------- Filter ---------- */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:36px;
}
.filter-chip{
  background:#fff;
  border:1px solid #e4dcee;
  color:var(--brand);
  font-weight:600;
  font-size:14px;
  padding:10px 20px;
  border-radius:30px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip:hover{ border-color:var(--brand); }
.filter-chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.filter-chip:focus-visible,
.btn-brand:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---------- Package card ---------- */
.pkg-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(101,43,123,0.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pkg-card:hover{ transform:translateY(-5px); box-shadow:0 14px 34px rgba(101,43,123,0.14); }

.pkg-img{
  position:relative;
  aspect-ratio:4/3;
  background:var(--bg-soft);
  overflow:hidden;
}
.pkg-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pkg-img img.is-fallback{ object-fit:contain; padding:18%; opacity:.5; }
.pkg-badge{
  position:absolute;
  top:12px; left:12px;
  background:var(--gold);
  color:var(--brand-dark);
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:20px;
}

.pkg-body{ display:flex; flex-direction:column; flex:1; padding:22px; }
.pkg-body h3{
  font-family:'Playfair Display',serif;
  color:var(--brand);
  font-weight:700;
  font-size:21px;
  margin-bottom:6px;
}
.pkg-for{ color:#555; font-size:14.5px; margin-bottom:14px; }
.pkg-body h4{
  color:var(--brand);
  font-size:13px;
  font-weight:700;
  margin:0 0 6px;
}
.pkg-items{ list-style:none; padding:0; margin:0 0 14px; }
.pkg-items li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14.5px;
  color:#333;
  padding:3px 0;
}
.pkg-items i{ color:var(--brand); margin-top:2px; }
.pkg-use{ font-size:14px; color:#555; margin-bottom:14px; }
.pkg-note{
  display:flex;
  gap:8px;
  background:var(--bg-soft);
  border-left:3px solid var(--gold);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  color:#444;
  margin-bottom:14px;
}
.pkg-note i{ color:var(--gold); margin-top:2px; }

.pkg-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  border-top:1px solid #f0eaf5;
}
.pkg-price{ font-weight:700; color:var(--brand); font-size:16px; }

.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-weight:600;
  border-radius:10px;
  padding:10px 20px;
  transition:background .2s ease;
}
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }

/* ---------- FAQ ---------- */
.faq-title{
  font-family:'Playfair Display',serif;
  color:var(--brand);
  font-weight:700;
  text-align:center;
  margin-bottom:24px;
}
.accordion-button{ font-weight:600; color:var(--brand); }
.accordion-button:not(.collapsed){ background:var(--bg-soft); color:var(--brand-dark); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(101,43,123,0.15); }

/* ---------- Search ---------- */
.search-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:24px;
}
.search-box{ position:relative; flex:1 1 280px; max-width:420px; }
.search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--brand); }
.search-box input{
  width:100%; padding:11px 14px 11px 40px;
  border:1px solid #e4dcee; border-radius:30px; font-size:14.5px; background:#fff;
}
.search-box input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(101,43,123,0.12); }
.result-count{ color:#666; font-size:14px; }
.empty-state{ text-align:center; padding:50px 20px; color:#555; }
.empty-state i{ font-size:40px; color:var(--brand); }

/* ---------- Details toggle ---------- */
.pkg-more{ margin-bottom:12px; }
.pkg-more summary{
  cursor:pointer; list-style:none; color:var(--brand);
  font-weight:600; font-size:13.5px; padding:6px 0;
}
.pkg-more summary::-webkit-details-marker{ display:none; }
.pkg-more summary::after{ content:" +"; }
.pkg-more[open] summary::after{ content:" \2212"; }
.pkg-items li span, .pkg-note span{ flex:1; }

@media (min-width:768px){
  .pkg-more summary{ display:none; }
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:54px; height:54px; border-radius:50%;
  background:#25d366; color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.25); text-decoration:none;
}
.wa-float:hover{ color:#fff; filter:brightness(.95); }

@media (max-width:767px){
  /* single scrollable row of filters */
  .filter-bar{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    margin:0 -12px 20px; padding:0 12px 6px; scrollbar-width:none; }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex:0 0 auto; padding:8px 16px; font-size:13px; }
  .search-box{ max-width:none; }

  /* compact two-column cards */
  .pkg-img{ aspect-ratio:1/1; }
  .pkg-badge{ top:8px; left:8px; font-size:10.5px; padding:4px 9px; max-width:calc(100% - 16px); }
  .pkg-body{ padding:12px; }
  .pkg-body h3{ font-size:15.5px; line-height:1.25; }
  .pkg-for{ font-size:12.5px; margin-bottom:8px; }
  .pkg-body h4{ font-size:12px; }
  .pkg-items li, .pkg-use{ font-size:12.5px; }
  .pkg-note{ font-size:12px; padding:8px; }
  .pkg-foot{ flex-direction:column; align-items:stretch; text-align:center; gap:8px; padding-top:10px; }
  .pkg-price{ font-size:13.5px; }
  .btn-brand{ padding:8px 10px; font-size:13.5px; }
  .start-here{ text-align:center; justify-content:center; }
  .start-actions{ justify-content:center; }
}

@media (max-width:575px){
  .pkg-hero{ padding:50px 16px 80px; }
  .start-here{ padding:26px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .pkg-card, .filter-chip, .btn-brand{ transition:none; }
  .pkg-card:hover{ transform:none; }
}

/* ---------- Language switch ---------- */
.lang-switch{
  display:inline-flex;
  background:rgba(255,255,255,0.12);
  border-radius:30px;
  padding:4px;
  margin-bottom:22px;
}
.lang-switch a{
  color:#fff;
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  padding:7px 18px;
  border-radius:30px;
  transition:background .2s ease, color .2s ease;
}
.lang-switch a:hover{ background:rgba(255,255,255,0.18); }
.lang-switch a.active{ background:var(--gold); color:var(--brand-dark); }
.lang-switch a:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* Trust strip: one background image at low opacity */
.trust-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--trust-bg);
  background-size:cover;
  background-position:center;
  opacity:.14;
  pointer-events:none;
}
.trust-strip .row{ position:relative; z-index:1; }
.trust-item{ font-weight:600; color:var(--brand-dark); }
@media (max-width:767px){
  .trust-item{ justify-content:flex-start; padding:12px 18px; }
}