/* =========================================================
   Andalusia Health & Fitness — Global Styles (clean build)
   File: assets/css/styles.css
   ========================================================= */

/* ===== Theme ===== */
:root{
  --brand:#d81b60;          /* primary brand pink */
  --brand-dark:#a80c47;     /* hover/darker shade */

  --ink:#ffffff;
  --body:#0b0b0b;
  --muted:#8b98a9;
  --muted-light:#64748b;
  --border:#22252a;
  --card-border:#e5e7eb;

  /* layout helpers */
  --shell-pad: 23px;
  --topbar-h: 72px;         /* updated on mobile in media query */
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--body);
  background:#000;
  overflow-x:hidden;               /* STOP sideways scroll */
}
a{ color:inherit; text-decoration:none }

/* Critical: media never overflows container */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* Container */
.shell{ max-width:1200px; margin:0 auto; padding:0 var(--shell-pad) }

/* =========================================================
   Header: Topbar (logo + nav)
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(0,0,0,.45); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .shell{
  display:grid;
  grid-template-columns:auto 1fr;   /* logo | nav */
  align-items:center;
  height:var(--topbar-h);
  gap:16px;
}

/* Logo pill */
.brand-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 18px; background:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9999px; box-shadow:0 2px 6px rgba(0,0,0,.18);
  white-space:nowrap; line-height:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand-pill:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,.25) }
.brand-pill img{ height:72px; width:auto; display:block }
.brand-pill .logo-text, .brand-pill span{ display:none !important; } /* guard against text overflow */

/* Nav */
.mainnav{ display:flex; gap:24px; justify-content:flex-end; align-items:center; }
.mainnav a{ color:#cfd6de; font-weight:700; font-size:15px }
.mainnav a:hover,.mainnav a.active{ color:#fff }

/* =========================================================
   CTA pills over hero (Quick Pay / Call)
   ========================================================= */
.ctabar{
  position:absolute;       /* overlay on hero */
  top:calc(var(--topbar-h) + 10px);
  left:0; right:0;
  background:transparent;
  border:0;
  z-index:55;
  margin:0; padding:0;
  pointer-events:none;     /* only pills clickable */
}
.ctabar .shell{
  display:flex; gap:12px;
  justify-content:flex-end; align-items:center;
  padding:0 var(--shell-pad);
  pointer-events:auto;
}

/* Pill style — brand pink */
.pill-cta{
  display:inline-block; color:#fff; background:var(--brand);
  border:2px solid rgba(255,255,255,.08);
  padding:10px 16px; border-radius:999px; font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap; line-height:1;
  box-shadow:0 8px 22px rgba(216,27,96,.25), 0 2px 6px rgba(0,0,0,.25);
}
.pill-cta:hover{ background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.28) }
.pill-cta:focus-visible{ outline:3px solid rgba(216,27,96,.45); outline-offset:2px }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center;
  background:#0a0b0d url('girlgym.png') center/cover no-repeat;
}
.hero .overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 42% 45%, rgba(0,0,0,.22), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.70) 100%);
}
.hero .shell{ position:relative; z-index:1 }

/* Ensure headline clears fixed top + pills */
.hero-copy{ color:var(--ink); padding-top:140px }
.hero-copy h1{
  margin:0 0 12px 0; font-size:64px; line-height:1.06; font-weight:800; letter-spacing:.2px;
  color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.65);
}
.hero-copy .lede{ color:#f1f5f9; font-size:20px; max-width:720px; text-shadow:0 2px 6px rgba(0,0,0,.55) }

/* =========================================================
   Buttons (general)
   ========================================================= */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px }
.btn{
  display:inline-block; padding:14px 22px; border-radius:14px; font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

/* Primary buttons — match pink pills */
.btn-primary{
  display:inline-flex; justify-content:center; align-items:center; gap:.5rem;
  padding:.9rem 1.4rem;
  border-radius:999px; border:none;
  background:var(--brand);
  color:var(--ink); font-weight:700;
  cursor:pointer;
  transition:background-color .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(216,27,96,.32);
}
.btn-primary:hover,.btn-primary:focus{ background:var(--brand-dark); color:var(--ink); transform:translateY(-1px) }

.btn-ghost{
  border:2px solid rgba(255,255,255,.45); color:#fff; background:transparent;
}
.btn-ghost:hover{
  border-color:#fff; background:rgba(255,255,255,.06);
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.30);
}
.btn-ghost:focus-visible{ outline:3px solid rgba(255,255,255,.45); outline-offset:2px }

/* =========================================================
   Features / Cards / Grid
   ========================================================= */
.features{ background:#0a0b0d; padding:56px 0 }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{
  background:#fff; border:1px solid var(--card-border); border-radius:16px; padding:20px;
  box-shadow:0 10px 0 #000;
}
.card h3{ margin:0 0 6px 0 }
.muted{ color:var(--muted-light) }

/* =========================================================
   Forms / Inputs
   ========================================================= */
.input{ width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px }

/* =========================================================
   Footer
   ========================================================= */
.sitefoot{
  background:#0a0b0d; color:#8a95a5; text-align:center; padding:24px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* =========================================================
   Membership / Pricing
   ========================================================= */

/* Intro spacing for pricing page */
.section--intro{
  background:#0a0b0d;
  padding:140px 0 32px;
  text-align:center;
}
.section--intro .lead{
  font-size:18px;
  color:#f1f5f9;
  max-width:800px;
  margin:0 auto;
  line-height:1.5;
}

/* Membership form container */
.form-card{
  background:#fff; border:1px solid var(--card-border); border-radius:16px;
  padding:24px; margin:0 auto 48px; max-width:960px;
}
.fieldset{ border:0; padding:0; margin:0 0 22px }
.fieldset > legend{ font-weight:800; font-size:18px; margin-bottom:12px }
.field{ display:flex; flex-direction:column; gap:8px }
.field span{ font-weight:600; color:#0b0b0b }
.field input, .field textarea, .field select{
  font-size:16px; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#0b0b0b;
}
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.grid-3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px }

.waiver{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; color:#111;
}
.agree{ display:flex; gap:10px; align-items:flex-start; margin-top:12px }
.agree input{ width:18px; height:18px; margin-top:2px }

.sig-wrap{ background:#f8fafc; border:1px dashed #cbd5e1; border-radius:12px; padding:14px }
#sigpad{ width:100%; height:180px; background:#fff; border-radius:10px; display:block }
.sig-actions{ display:flex; gap:10px; margin-top:10px }

.form-actions{ display:flex; gap:12px; align-items:center; justify-content:flex-start; margin-top:8px }

/* Plan picker */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.plan{
  position:relative; display:block; border:1px solid var(--card-border);
  border-radius:14px; background:#fff; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan input{ position:absolute; inset:0; opacity:0; pointer-events:none }
.plan-body{ padding:14px; display:flex; flex-direction:column; gap:4px }
.plan:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08) }
.plan input:checked + .plan-body{
  border-radius:12px; outline:3px solid rgba(216,27,96,.35); outline-offset:-3px;
}

/* Payments summary card tweaks */
#summaryCard h2{ margin:0 0 6px 0 }
#summaryText{ line-height:1.5 }
#payBtn.pill-cta{ font-size:18px; padding:14px 22px }

/* Membership calc card */
.calc{
  background:#101727; border:1px solid #283248; border-radius:16px;
  padding:22px 22px 26px; margin-top:18px; color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.calc *{ color:#fff }
.calc .help, .calc .muted-sm{ color:rgba(255,255,255,.7) }
.calc input[type="number"], .calc input[type="text"], .calc input[type="email"], .calc select{
  width:100%; background:#0b1220; border:1px solid #2a3346; color:#fff; border-radius:10px; padding:10px 12px; font-size:15px;
}
.calc .row{
  display:grid; grid-template-columns:repeat(12,1fr); gap:18px 20px; align-items:center; margin-top:16px;
}
.calc .row > label{ grid-column:span 4; min-width:200px }
.calc .row .toggle{ grid-column:span 8 }
.calc .row .help{ grid-column:1 / -1; font-size:13px }
#tanningAddonRow .toggle{ grid-column:1 / -1 }
#familyCountsRow > label{ grid-column:span 3 }
#accessRow > label{ grid-column:span 4 }
#accessRow .toggle{ grid-column:span 4 }
.calc::after{
  content:""; display:block; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 70%);
  margin:20px 0 14px;
}
.totals{ display:grid; gap:10px }
.totals .line{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; font-size:16px }
.totals .line span:last-child{ text-align:right }
.totals .big{
  background:#18233a; padding:12px 16px; border-radius:12px; font-size:18px; font-weight:800;
  box-shadow:0 0 14px rgba(232,30,99,.4); color:#fff;
}
.pill-ghost{ background:#151c2a; border:1px solid #2a3346; color:#e8e9ee !important; border-radius:999px; padding:9px 14px }

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet & down */
@media (max-width:1024px){
  .mainnav{ gap:18px }
  .brand-pill img{ height:64px }
}

/* Mobile */
@media (max-width:768px){
  /* Header stacks */
  :root{ --topbar-h: 100px; } /* taller when logo + nav wrap */

  .topbar .shell{
    grid-template-columns:1fr;
    height:auto; padding:8px 0; gap:8px;
  }

  /* Logo size & centering */
  .brand-pill{ margin:0 auto }
  .brand-pill img{ height:56px }

  /* Nav center/wrap */
  .mainnav{ justify-content:center; gap:12px; flex-wrap:wrap }
  .mainnav a{ font-size:14px }

  /* CTA pills center on mobile */
  .ctabar .shell{ justify-content:center; padding:0 16px; flex-wrap:wrap; gap:10px }

  /* Hero text a bit smaller and spaced below pills */
  .hero-copy{ padding-top:120px }
  .hero-copy h1{ font-size:40px }
  .hero-copy .lede{ font-size:18px }

  /* Global side padding to keep content off the edges */
  .shell{ padding:0 16px }

  /* Grids collapse */
  .grid-3{ grid-template-columns:1fr }
  .grid-2{ grid-template-columns:1fr }
  .plan-grid{ grid-template-columns:1fr !important; gap:12px }

  /* Keep cards clean */
  .plan{ margin:0 }           /* no negative/outside margins */
  .form-actions{ flex-direction:column; align-items:stretch }

  /* Calc rows stack */
  .calc .row > label,
  #accessRow .toggle,
  #familyCountsRow > label,
  #tanningAddonRow .toggle{ grid-column:1 / -1 }
  .calc #launchWizard{ width:100% }
  .totals .line{ font-size:15px }
  .totals .big{ font-size:17px }
}

/* Small phones: add a touch more padding */
@media (max-width:380px){
  .shell{ padding:0 14px }
}

/* Optional sticky bottom summary for tiny screens */
@media (max-width:560px){
  .ahf-actions.sticky-summary{
    position:sticky; bottom:0;
    background:linear-gradient(180deg, rgba(12,15,18,.85), rgba(12,15,18,1));
    backdrop-filter:blur(6px);
    padding:16px;
    border-top-left-radius:14px; border-top-right-radius:14px;
    box-shadow:0 -8px 20px rgba(0,0,0,.35);
    z-index:50;
  }
}

/* ====== MOBILE OVERFLOW CLAMP (drop at end of file) ====== */

/* Global guard so flex/grid children can actually shrink */
* { min-width: 0; }

/* Never let core blocks exceed the viewport on phones */
@media (max-width: 768px){
  /* Add safe side padding for sections that might not be inside .shell */
  .section--intro,
  .features,
  .form-card,
  .calc,
  .plan-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Clamp widths so nothing can run off-screen */
  .plan-grid,
  .plan,
  .plan-body,
  .card,
  .form-card,
  .calc {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: clip;   /* hide any tiny sub-pixel spill */
  }

  /* Single-column plans on mobile, no extra margins */
  .plan-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .plan { margin: 0 !important; }
}

/* Extra safety for ultra-small devices */
@media (max-width: 380px){
  .section--intro,
  .features,
  .form-card,
  .calc,
  .plan-grid { padding-left: 14px; padding-right: 14px; }
}

/* Brand CTAs stay pink */
.btn-primary,
.pill-cta { background: var(--brand); color: var(--ink); }
.btn-primary:hover,
.pill-cta:hover,
.btn-primary:focus,
.pill-cta:focus { background: var(--brand-dark); color: var(--ink); }

/* ===== CALC CARD: mobile fit & wrap fix ===== */
@media (max-width: 768px){
  /* Tighter side padding on the calc card */
  .calc { padding: 18px 14px 22px; }

  /* Stack every row to a single column on phones */
  .calc .row {
    grid-template-columns: 1fr !important;
    gap: 10px 12px;
  }

  /* Let labels shrink and wrap instead of forcing width */
  .calc .row > label {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-bottom: 2px;
  }

  /* Make control groups span full width */
  .calc .row .toggle,
  #accessRow .toggle,
  #tanningAddonRow .toggle,
  #familyCountsRow .toggle {
    grid-column: 1 / -1 !important;
  }

  /* Inputs should never force overflow */
  .calc input[type="number"],
  .calc input[type="text"],
  .calc input[type="email"],
  .calc select {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Long inline label/value lines wrap cleanly */
  .calc .line,
  .calc .help,
  .calc .muted-sm {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Ultra-small phones */
@media (max-width: 380px){
  .calc { padding-left: 12px; padding-right: 12px; }
}