/* === Giftorea Pack Page — Main Theme (Glassmorphism) === */
:root{
  --navy:#0B2A4A;
  --navy-2:#14345f;
  --blue:#4ea2ff;
  --light:#A8D4FF;

  --glass-bg: rgba(255,255,255,.66);
  --glass-border: rgba(255,255,255,.42);
  --glass-blur: blur(16px) saturate(120%);

  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 28px 90px rgba(11,30,58,.20);
  --shadow-soft: 0 18px 50px rgba(11,30,58,.18);

  --text:#0f172a;
  --muted:#475569;

  --purple-1:#5b36ff;
  --purple-2:#7a5cff;

  --header-offset: 110px; /* safe top so hero never hides under nav */
  --page-pad: 14px;       /* mobile gutter for full-bleed sections */
}

/* Background (soft glass mood) */
.site-bgmesh{position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(650px 450px at 12% 78%, rgba(78,162,255,0.18) 0%, transparent 32%),
    radial-gradient(560px 360px at 88% 12%, rgba(11,30,58,0.16) 0%, transparent 30%),
    linear-gradient(180deg,#fbfdff 0%, #f3f6fb 100%);
}
.mesh,.blob,.rays{position:absolute; opacity:.6; filter:blur(0.0001px)}
.mesh.m-a{top:8%; left:6%; width:200px; height:200px; background:radial-gradient(closest-side, rgba(78,162,255,.18), transparent)}
.mesh.m-b{bottom:8%; right:8%; width:260px; height:260px; background:radial-gradient(closest-side, rgba(11,30,58,.15), transparent)}
.blob.one{top:20%; left:65%; width:220px; height:220px; background:radial-gradient(closest-side, rgba(78,162,255,.12), transparent)}
.blob.two{bottom:18%; left:15%; width:260px; height:260px; background:radial-gradient(closest-side, rgba(11,30,58,.10), transparent)}
.rays{inset:0; background: radial-gradient(140% 60% at 50% -30%, rgba(255,255,255,.8), transparent 60%)}

/* Base */
html, body{
  margin:0; color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden; width:100%;
}
.pack-wrap{
  max-width:1400px; margin: calc(var(--header-offset)) auto 120px; padding:0 var(--page-pad);
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); /* sticky CTA safe space */
}

/* Glass card */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Banner (supports both implementations) */
.pack-hero{ max-width:1400px; margin:12px auto 20px; }

/* NEW two-IMG banner */
#packBanner{
  width:100%; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-soft);
}
#packBanner img{ display:block; width:100%; height:auto; object-fit:cover; }
@media (max-width:768px){ #packBanner{ border-radius:16px; } }

/* LEGACY picture banner */
.pack-hero__img{
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-soft);
  width:100%; aspect-ratio:14/5;
}
.pack-hero__img picture,
.pack-hero__img img{
  display:block; width:100% !important; height:100% !important;
  object-fit:cover !important; aspect-ratio:auto !important; /* child doesn’t force ratio */
}
@media (max-width:768px){
  .pack-hero__img{ aspect-ratio:1/1 !important; min-height:340px !important; border-radius:16px; }
}

/* Pack info */
.pack-info{ padding:24px; }
.pack-info__head{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px;
}
.pack-badge{
  background: linear-gradient(135deg, rgba(11,27,63,0.9), rgba(42,140,255,0.9));
  color:#fff; padding:6px 12px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.2px;
}
.pack-title{
  margin:0; text-align:center; font-weight:1000; letter-spacing:.2px; line-height:1.15;
  font-size: clamp(28px, 5.6vw, 44px);
  background: linear-gradient(90deg, var(--navy), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.pack-stats{
  display:grid; grid-template-columns: repeat(3, minmax(160px,1fr)); gap:16px;
  max-width: 980px; margin: 16px auto 12px;
}
.stat{
  display:grid; gap:8px; align-items:center; justify-items:center;
  padding:16px 14px; border-radius: 16px; background: rgba(255,255,255,.98);
  border:1px solid rgba(11,42,74,.10);
  box-shadow: 0 10px 28px rgba(11,42,74,.12);
}
.stat__label{
  display:flex; align-items:center; gap:10px;
  font-weight:900; color: var(--navy); font-size: 15px; letter-spacing:.25px; text-transform:uppercase;
}
.stat__label .ico{ font-size: 1.5em; line-height: 1; }
.stat__value{ font-weight:1000; font-size: clamp(22px, 3.6vw, 30px); color: var(--navy-2) }

.pack-suitable{ margin-top: 12px; }
.pack-suitable .lead{
  margin:0; max-width: 980px; text-align:center; color: var(--navy-2); font-weight: 800;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(11,42,74,.08);
  padding: 14px 18px; border-radius: 14px;
}
.value-list{
  margin: 12px auto 0; padding-left: 18px; max-width: 860px; color: var(--muted); font-weight: 700;
}

/* Sections & spacing */
.section-title{
  margin:10px 0 16px; font-size: clamp(20px, 3.8vw, 26px); font-weight:1000; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pack-content, .help-cta{ padding:18px; }

/* Explicit spacing between sections (keeps the “card” feel) */
#packInfo{ margin-bottom:26px !important; }
section.pack-content{ margin-top:22px !important; }

/* Cards */
.cards{ display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:18px; }
@media (max-width:1100px){ .cards{ grid-template-columns: repeat(2, minmax(240px,1fr)); } }
@media (max-width:640px){ .cards{ grid-template-columns: 1fr; gap:16px; } }

.card{
  display:flex; gap:14px; align-items:center;
  padding:14px; border-radius:16px;
  background:rgba(255,255,255,.98); border:1px solid rgba(11,42,74,.10);
  box-shadow: 0 8px 22px rgba(11,42,74,.10);
}
.card__media{ position:relative; flex:0 0 128px; height:128px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.06); }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-ph{ width:100%; height:100%; background:linear-gradient(135deg,#f4f7fb,#e9eff7); }
.view{
  position:absolute; right:8px; bottom:8px; z-index:2;
  color:#fff; text-decoration:none; font-weight:800; font-size:12px;
  padding:8px 12px; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    linear-gradient(135deg, rgba(18,52,92,1), rgba(36,118,196,1));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 6px 22px rgba(20,60,100,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.card__body{ display:grid; gap:8px; align-content:center; }
.card__name{ margin:0; font-size:18px; font-weight:900; color:var(--navy); }
.qty{
  display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:800;
  background:rgba(168,212,255,.3); border:1px solid rgba(168,212,255,.6); padding:6px 12px; border-radius:999px;
}
.qty .ico{ font-size:1.2em; }

/* CTAs */
.pack-ctas{ display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 22px; }
.btn{
  appearance:none; border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer;
  min-height:56px; padding:12px 16px; font-weight:900; letter-spacing:.2px; font-size:15px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-wide{ width:100%; }
.btn-primary{
  color:#fff; background: linear-gradient(145deg, var(--purple-1), var(--purple-2));
  box-shadow: 0 14px 28px rgba(91,54,255,.28);
  border-color: rgba(255,255,255,.35);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0) scale(.98); opacity:.95; }
.btn-ghost{ color:#0f172a; background:#eef2f7; border-color: rgba(11,42,74,.15); }
.btn-ghost:hover{ transform: translateY(-1px); }

/* Pulses */
@keyframes pulse{ 0%,100%{transform:scale(1); box-shadow:0 14px 28px rgba(91,54,255,.28);} 50%{transform:scale(1.03); box-shadow:0 18px 36px rgba(91,54,255,.35);} }
.btn-pulse{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulseGreen{ 0%,100%{ transform: scale(1); box-shadow: 0 10px 24px rgba(37,211,102,.28);} 50%{ transform: scale(1.03); box-shadow: 0 14px 32px rgba(37,211,102,.40);} }
.btn-whatsapp.btn-pulse{ animation: pulseGreen 2.4s ease-in-out infinite; }

/* Sticky CTA */
.sticky-cta{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 1400px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 16px; z-index: 9998;
  background: rgba(255,255,255,.9);
  border-top: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.sticky-cta__meta{ display:flex; align-items:center; gap:10px; font-weight:900; color:var(--navy); }
.sticky-cta.is-hidden{ transform: translate(-50%, 6px); opacity:.0; pointer-events:none; }
@media (max-width:820px){
  .sticky-cta{
    left: 0; right: 0; transform: none;
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
  }
}

/* Help CTA + WhatsApp */
.help-cta{ margin-top: 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.help-cta__content h3{ margin:0 0 6px; font-size:18px; color:var(--navy); }
.help-cta__content p{ margin:0; color:var(--muted); font-weight:700; }
.btn-whatsapp{
  color:#fff; background: linear-gradient(145deg, #25D366, #1EB857);
  border:0; border-radius:var(--radius-sm); font-weight:900; padding:12px 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* Mobile full-bleed footer card */
@media (max-width:768px){
  .help-cta{
    margin-top: 18px;
    margin-left: calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    border-radius: 0;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    display: flex; flex-direction: column; align-items: stretch;
  }
  .help-cta .btn-whatsapp{ width: 100%; min-height: 56px; }
}

/* Modal (glass) */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background: radial-gradient(1100px 600px at 10% -10%, rgba(36,118,196,.10), transparent 40%), rgba(10,25,55,.35);
  backdrop-filter: blur(10px) saturate(1.05);
}
.modal__backdrop{ position:absolute; inset:0; z-index:0; }
.modal__dialog{ position:relative; width:min(960px, 92vw); max-height: 88vh; overflow:auto; padding:12px; border-radius:16px; z-index:2; }
.modal__stage{ position:relative; display:grid; place-items:center; gap:8px; }
.modal__stage img{ width:100%; height:auto; border-radius:12px; }
.mnav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:999px; cursor:pointer; color:#fff;
  background:rgba(10,25,55,.5);
}
.mnav.prev{ left:8px; } .mnav.next{ right:8px; }

/* BIG, reliable close button (even if you skip JS fixes) */
.modal__close{
  position:fixed !important;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  width:56px !important; height:56px !important;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:0; border-radius:12px;
  font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  z-index:2147483647 !important;
  pointer-events:auto !important; touch-action:manipulation;
}

.modal__desc{
  margin-top:10px; white-space:pre-line; color:var(--muted); font-weight:700;
  background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:10px 12px;
}

body.modal-open{ overflow:hidden; }

/* Responsive tweaks */
@media (max-width:820px){
  .pack-stats{ grid-template-columns: 1fr; gap:12px; }
  .card__media{ flex-basis: 120px; height: 120px; }
  .pack-wrap{ padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}