/* === Giftorea Pack Page — Executive (Navy + Gold, Bold Luxury) === */
:root{
  /* Core palette */
  --navy:#0B1224;         /* deep base */
  --navy-2:#0F1D37;       /* surface */
  --navy-3:#122447;       /* raised surface */
  --ink:#0A0F1C;

  --gold-1:#EBD593;       /* light gold */
  --gold-2:#D9B95E;       /* primary gold */
  --gold-3:#C9A227;       /* deep gold */

  --text:#E9EEF7;         /* main text */
  --muted:#ACB7CC;        /* secondary text */

  --accent:#4ea2ff;       /* keep for links/icons if needed */

  --radius:18px;
  --radius-sm:14px;
  --shadow:0 28px 90px rgba(0,0,0,.45);
  --shadow-soft:0 18px 50px rgba(0,0,0,.35);

  --header-offset:110px;
  --page-pad:14px;
}

/* Background (navy vignette with subtle gold glow) */
.site-bgmesh{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(900px 600px at 85% 10%, rgba(217,185,94,.14), transparent 55%),
    radial-gradient(900px 600px at 15% 90%, rgba(233,213,147,.08), transparent 60%),
    linear-gradient(180deg, #0a1220 0%, #0c1630 50%, #0a1220 100%);
}
.mesh,.blob,.rays{position:absolute; opacity:.25; filter:blur(.0001px)}
.mesh.m-a{top:12%; left:8%; width:280px; height:280px; background:radial-gradient(closest-side, rgba(217,185,94,.16), transparent)}
.mesh.m-b{bottom:10%; right:10%; width:300px; height:300px; background:radial-gradient(closest-side, rgba(14,29,55,.4), transparent)}
.blob.one{top:22%; left:65%; width:260px; height:260px; background:radial-gradient(closest-side, rgba(233,213,147,.10), transparent)}
.blob.two{bottom:20%; left:18%; width:300px; height:300px; background:radial-gradient(closest-side, rgba(11,21,40,.5), transparent)}
.rays{inset:0; background: radial-gradient(130% 60% at 50% -30%, rgba(255,255,255,.08), 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%;
  background:#0a1220;
}
.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));
}

/* Panels (replace glass with bold luxury panels) */
.glass{
  background: linear-gradient(180deg, rgba(17,30,56,.92), rgba(15,27,50,.92));
  border: 1px solid rgba(201,162,39,.20);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Banner (supports either #packBanner or .pack-hero__img wrapper) */
.pack-hero{ max-width:1400px; margin:12px auto 20px; }

/* New HTML banner wrapper (two <img> approach) */
#packBanner{
  width:100%; border-radius:20px; overflow:hidden;
  border:1px solid rgba(201,162,39,.28);
  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 wrapper (kept for compatibility) */
.pack-hero__img{
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(201,162,39,.28);
  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;
}
@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(201,162,39,1), rgba(233,213,147,.95));
  color:#1a1f2f; padding:6px 12px; border-radius:999px; font-weight:900; font-size:12px; letter-spacing:.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.pack-title{
  margin:0; text-align:center; font-weight:1000; letter-spacing:.2px; line-height:1.15;
  font-size: clamp(28px, 5.6vw, 46px);
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.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: linear-gradient(180deg, rgba(16,29,55,.96), rgba(14,26,50,.96));
  border:1px solid rgba(201,162,39,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.stat__label{
  display:flex; align-items:center; gap:10px;
  font-weight:900; color: var(--gold-2); 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:#f7f0d2; }

.pack-suitable{ margin-top:12px; }
.pack-suitable .lead{
  margin:0; max-width:980px; text-align:center; color:#dcdff0; font-weight:800;
  background: linear-gradient(180deg, rgba(18,34,64,.96), rgba(16,30,58,.96));
  border:1px solid rgba(201,162,39,.16);
  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(--gold-1), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pack-content, .help-cta{ padding:18px; }

/* Explicit spacing between sections */
#packInfo{ margin-bottom:26px !important; }
section.pack-content{ margin-top:22px !important; }

/* Cards (navy surfaces, gold accents) */
.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: linear-gradient(180deg, rgba(18,36,70,.96), rgba(16,30,58,.96));
  border:1px solid rgba(201,162,39,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.card__media{
  position:relative; flex:0 0 128px; height:128px; border-radius:12px; overflow:hidden;
  background:#0f1e3a; border:1px solid rgba(201,162,39,.14);
}
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-ph{ width:100%; height:100%; background:linear-gradient(135deg,#1a2a4a,#142240); }

.view{
  position:absolute; right:8px; bottom:8px; z-index:2;
  color:#1a1f2f; text-decoration:none; font-weight:900; font-size:12px;
  padding:8px 12px; border-radius:12px;
  background: linear-gradient(145deg, var(--gold-1), var(--gold-3));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 18px rgba(201,162,39,.35), inset 0 1px 0 rgba(255,255,255,.45);
}

.card__body{ display:grid; gap:8px; align-content:center; }
.card__name{ margin:0; font-size:18px; font-weight:900; color:#f4ead1; }
.qty{
  display:inline-flex; align-items:center; gap:8px; color:#f4ead1; font-weight:800;
  background:rgba(201,162,39,.18); border:1px solid rgba(201,162,39,.45);
  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:#1a1f2f;
  background: linear-gradient(145deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 16px 34px rgba(201,162,39,.35);
  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:#e8ecf6;
  background: linear-gradient(180deg, rgba(18,36,70,.96), rgba(16,30,58,.96));
  border-color: rgba(201,162,39,.25);
}
.btn-ghost:hover{ transform: translateY(-1px); }

/* Pulses */
@keyframes pulse{
  0%,100%{transform:scale(1); box-shadow:0 16px 34px rgba(201,162,39,.35);}
  50%{transform:scale(1.03); box-shadow:0 20px 44px rgba(201,162,39,.48);}
}
.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 (navy bar with gold line) */
.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: linear-gradient(180deg, rgba(14,26,50,.95), rgba(12,22,42,.95));
  border-top: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 -8px 22px rgba(0,0,0,.45);
}
.sticky-cta__meta{ display:flex; align-items:center; gap:10px; font-weight:900; color:#f4ead1; }
.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;
  background: linear-gradient(180deg, rgba(18,34,64,.96), rgba(16,30,58,.96));
  border:1px solid rgba(201,162,39,.16);
  border-radius:var(--radius);
  box-shadow: var(--shadow-soft);
}
.help-cta__content h3{ margin:0 0 6px; font-size:18px; color:var(--gold-1); }
.help-cta__content p{ margin:0; color:var(--muted); font-weight:700; }

.btn-whatsapp{
  color:#0f1e2f; 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 WhatsApp section */
@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 (dark, gilded) */
.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(201,162,39,.10), transparent 40%), rgba(5,10,20,.70);
  backdrop-filter: blur(6px) 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;
  background: linear-gradient(180deg, rgba(16,30,58,.98), rgba(14,26,50,.98));
  border:1px solid rgba(201,162,39,.28);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.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:#1a1f2f;
  background: linear-gradient(145deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 6px 18px rgba(201,162,39,.35);
}
.mnav.prev{ left:8px; } .mnav.next{ right:8px; }

.modal__desc{
  margin-top:10px; white-space:pre-line; color:var(--muted); font-weight:700;
  background: linear-gradient(180deg, rgba(18,34,64,.96), rgba(16,30,58,.96));
  border:1px solid rgba(201,162,39,.16); border-radius:12px; padding:10px 12px;
}

/* BIG, reliable close button (kept for UX even if you skip fixing JS) */
.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: linear-gradient(180deg, #fff, #f7f2e4);
  border:1px solid rgba(201,162,39,.55); color:#1a1f2f;
  border-radius:12px; font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  z-index:2147483647 !important;
  pointer-events:auto !important; touch-action:manipulation;
}

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)); }
}