/* =========================================================
   Andalusia Health & Fitness – Global Styles
   File: assets/css/styles.css
   ========================================================= */

/* ===== Theme ===== */
:root{
  --brand:#d81b60;
  --brand-dark:#a80c47;
  --ink:#ffffff;
  --body:#0b0b0b;
  --muted:#8b98a9;
  --muted-light:#64748b;
  --border:#22252a;
  --card-border:#e5e7eb;
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height: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;
}
a{ color:inherit; text-decoration:none }
img{ max-width:250%; display:inline-block }
.shell{ max-width:1200px; margin:0 auto; padding:0 23px }

/* =========================================================
   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:72px;
  gap:16px;
}
/* Logo pill */
.brand-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 20px; background:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1500px; box-shadow:0 2px 6px rgba(0,0,0,.18);
  width: 180px; /* reduced pill width */
  min-height: 56px; /* reduced pill height */
  white-space:nowrap; line-height:0;
  transition:transform .2s ease, box-shadow .2s ease;
  overflow: hidden; /* prevent text from overflowing */
}

.brand-pill span, .brand-pill .logo-text {
  font-size: 24px; /* increased font size */
  font-weight: 800;
  color: #d81b60;
  letter-spacing: 0.5px;
  margin-left: 10px;
  line-height: 1;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none; /* prevent overflow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-pill:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 4px 14px rgba(0,0,0,.25) }

/* 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 Bar (below the topbar): Join Today, Quick Pay, Call
   ========================================================= */
.ctabar{
  position:sticky; top:72px; z-index:40;   /* sits right under the topbar */
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ctabar .shell{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:flex-end; align-items:center;
  padding:10px 24px;
}

/* Pink pill button style */
.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;
}
.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 }

/* Extra top padding so hero clears fixed bars */
.hero-copy{ color:var(--ink); padding-top:112px }
.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);
}

/* Inner pages: compact hero */
.hero--compact{
  background:#0a0b0d; min-height:auto;
  padding:140px 0 60px; /* account for fixed top + CTA bar */
}
.hero--compact .hero-copy h1{ font-size:48px }
.hero--compact .hero-copy .lede{ font-size:20px; margin-top:8px }
.hero--compact .hero-copy .muted{ font-size:14px; color:var(--muted-light) }

/* =========================================================
   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;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.30) }
.btn-primary:focus-visible{ outline:3px solid rgba(216,27,96,.45); outline-offset:2px }

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

.features ul{ list-style:disc; padding-left:20px; margin:0 }
.features ul li{ margin:6px 0 }
.features .card span.muted{
  display:block; font-size:13px; color:var(--muted-light); margin-top:2px;
}

/* =========================================================
   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);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .mainnav{ gap:18px }
  .brand-pill img{ height:56px }
}

@media (max-width:768px){
  /* Topbar becomes two rows: logo then nav */
  .topbar .shell{
    grid-template-columns:1fr; height:auto; padding:8px 0; gap:8px;
  }

  /* Logo pill: centered & larger for readability */
  .brand-pill{ margin:0 auto; padding:4px 12px }
  .brand-pill img{ height:72px; } /* Increased from 52px to 72px */

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

  /* CTA bar: centered pills under nav */
  .ctabar .shell{ justify-content:center; padding:12px 16px; }
  .pill-cta{ font-size:14px; padding:10px 16px }

  /* Hero spacing so it clears fixed bars */
  .hero-copy{ padding-top:120px }
  .hero-copy h1{ font-size:40px }
  .hero-copy .lede{ font-size:18px }

  /* Cards become single column */
  .grid-3{ grid-template-columns:1fr }
}

/* ========== MOBILE SPACING PATCH (pills sit a bit lower) ========== */
/* Use a variable for the topbar height so CTA can sit just below it */
:root{ --topbar-h: 72px; }                /* desktop value */
.ctabar{ position: sticky; top: var(--topbar-h); }

@media (max-width: 768px){
  :root{ --topbar-h: 100px; }             /* stacked logo + nav height */
  .topbar .shell{ padding-bottom: 6px; }  /* tiny air under nav */
  .ctabar{
    top: var(--topbar-h);                 /* anchor CTA under the header */
    margin-top: 8px;                      /* nudge pills further down */
  }
  .ctabar .shell{ padding-top: 6px; padding-bottom: 10px; }
}

/* ===== Overlay the CTA pills on top of the hero (no black bar) ===== */

/* Remove bar background/border and layer above hero */
.ctabar{
  position: absolute;
  top: calc(var(--topbar-h) + 18px); /* nudge below header */
  left: 0; right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 55; /* ensure pills overlay topbar */
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none; /* allow clicks to pass through except pills */
}
.ctabar .shell{
  justify-content: flex-end;
  pointer-events: auto; /* pills remain clickable */
}

/* ===== Overlay the CTA pills on top of the hero (no black bar) ===== */

/* Remove bar background/border and layer above hero */
.ctabar{
  position: absolute;
  top: calc(var(--topbar-h) + 18px); /* nudge below header */
  left: 0; right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 55; /* ensure pills overlay topbar */
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none; /* allow clicks to pass through except pills */
}
.ctabar .shell{
  justify-content: flex-end;
  pointer-events: auto; /* pills remain clickable */
}
/* ======== FIX PACK: header/logo/pills cleanup ======== */

/* 1) Global images: keep aspect ratio and don't overflow */
img{ max-width:100% !important; height:auto; display:block; }

/* 2) Brand pill: let it size to content; center the logo */
.brand-pill{
  padding:6px 18px;
  width:auto; min-width:unset;
  min-height:unset;
  border-radius:9999px;
  overflow:visible;
}
.brand-pill img{
  height:72px;          /* desktop logo size */
  width:auto;
  display:block;
  line-height:0;
}

/* Mobile logo size */
@media (max-width:768px){
  .brand-pill img{ height:56px; }
}

/* Remove unused text styling inside brand pill (prevents odd spacing) */
.brand-pill span, .brand-pill .logo-text{ display:none !important; }

/* 3) De-dupe CTA bar rules and keep pills over hero */
:root{ --topbar-h: 72px; }
.hero{ position:relative; }

/* One authoritative CTA bar */
.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 24px;
  pointer-events:auto;
}

/* Pill styling stays the same, add subtle glow to pop on photo */
.pill-cta{
  box-shadow:0 8px 22px rgba(216,27,96,.25), 0 2px 6px rgba(0,0,0,.25);
  white-space:nowrap;
}

/* Mobile: center pills, and give hero text room below them */
@media (max-width:768px){
  :root{ --topbar-h: 100px; }     /* stacked logo+nav height */
  .ctabar .shell{ justify-content:center; padding:0 16px; flex-wrap:wrap; }
  .hero .shell .hero-copy{ padding-top:120px !important; }
}

/* Desktop: ensure hero headline clears pills */
@media (min-width:769px){
  .hero .shell .hero-copy{ padding-top:140px !important; }
}

/* Intro blurb under hero */
/* Intro spacing fix for pricing page */
.section--intro{
  background:#0a0b0d;
  padding:140px 0 32px;   /* increased top padding so it clears nav/pills */
  text-align:center;
}
.section--intro .lead{
  font-size:18px;
  color:#f1f5f9;
  max-width:800px;
  margin:0 auto;
  line-height:1.5;
}


/* Bottom CTA pill */
.bottom-cta{
  background:#0a0b0d;
  text-align:center;
  padding:40px 0 60px;
}
.bottom-cta .pill-cta{
  font-size:18px;
  padding:14px 28px;
}

/* ===== Membership form ===== */
.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;
}

/* Responsive */
@media (max-width: 768px){
  .grid-2{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .form-actions{ flex-direction:column; align-items:stretch }
}

/* ===== Plan picker ===== */
.plan-grid{ 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 }

/* Make the bottom actions feel strong on mobile */
#payBtn.pill-cta{ font-size:18px; padding:14px 22px }

/* Responsive adjustments */
@media (max-width:768px){
  .plan-grid{ grid-template-columns:1fr !important }
}