/* =========================================================
   FitPocket Overrides
   Non-destructive visual fixes layered on top of your stack.
   ========================================================= */

/* ---------------------------
   Brand & general tokens
---------------------------- */
:root{
  --fp-brand:#7C5CFF;         /* primary gradient end */
  --fp-brand2:#06C1B0;        /* primary gradient start */
  --fp-link:#A5AFFF;          /* lighter link color for inline anchors */
  --fp-surface:#0F1626;       /* dark card surface */
  --fp-border:rgba(230,236,245,.16);
  --fp-glow:0 0 0 1px rgba(255,255,255,.04),
            0 10px 26px rgba(0,0,0,.28),
            0 0 26px rgba(124,92,255,.42);
  --fp-glow-strong:0 0 0 1px rgba(255,255,255,.08),
                   0 12px 32px rgba(0,0,0,.32),
                   0 0 40px rgba(124,92,255,.65);
}

/* ---------------------------
   Links (lighter brand color)
---------------------------- */
a{ color:var(--fp-link); }
a:hover{ color:#C1C9FF; }

/* Remove underlines on BUTTON-styled anchors only */
a.fp-btn,
.fp-card a.fp-btn,
.fp-footer-links a.fp-btn{ text-decoration:none !important; }

/* ---------------------------
   Buttons
---------------------------- */
.fp-btn{ border-radius:14px; padding:10px 16px; border:1px solid transparent; }

/* Primary = your gradient pill */
.fp-btn--primary{
  background:linear-gradient(90deg,var(--fp-brand2),var(--fp-brand));
  color:#fff; border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--fp-glow-strong); text-decoration:none !important;
}

/* Secondary = violet “glow” pill you like on Dashboard/Progress */
.fp-btn--secondary{
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid var(--fp-border);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),
             0 8px 22px rgba(0,0,0,.22),
             0 0 18px rgba(124,92,255,.56);
  text-decoration:none !important;
}

/* Login button subtle glow ring */
.fp-btn--login{
  background:transparent;
  color:#fff;
  border:1px solid var(--fp-border);
  box-shadow:0 0 12px rgba(124,92,255,.35);
}

/* ---------------------------
   Cards with border glow
---------------------------- */
.fp-card{
  background:var(--fp-surface);
  border:1px solid var(--fp-border);
  border-radius:16px;
  box-shadow:var(--fp-glow);
}

/* Occasionally some pages render empty “bubbles”; hide truly empty cards */
.fp-card:empty{ display:none; }

/* ---------------------------
   Page titles & hero tweaks
---------------------------- */
.fp-page-title{ text-align:center; }
.fp-page-sub{ text-align:center; opacity:.95; }

/* Home-only hero: larger & bright violet glow without template changes */
.home-wrap .fp-page-title{
  font-weight:800;
  line-height:1.08;
  font-size: clamp(28px, 4.6vw, 64px);
  color:#B39CFF;
  text-shadow:0 0 22px rgba(124,92,255,.6), 0 0 40px rgba(124,92,255,.35);
}

/* ---------------------------
   Disclaimer: centered, no bubble
---------------------------- */
.fp-disclaimer,
.fp-disclaimer .fp-card,
.fp-disclaimer .fp-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.fp-disclaimer{
  max-width:1200px !important;
  margin:18px auto 0 !important;
  padding:0 16px !important;
}

/* ---------------------------
   Pricing page layout & glow
---------------------------- */
.fp-plans-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.fp-plan-card{ display:flex; flex-direction:column; }
.fp-plan-head{ padding:16px 16px 0; }
.fp-plan-features{ padding:8px 16px 12px; }
.fp-plan-card h3{ margin:0 0 4px; }
.fp-plan-card .fp-price{ margin-top:6px; }
.fp-plan-card .per{ opacity:.85; font-size:.9em; }

/* CTA buttons vertically aligned & not touching borders */
.fp-plan-card .fp-cta{
  margin-top:auto; align-self:center;
  width:auto; min-width:52%; max-width:76%;
  margin-bottom:14px; white-space:nowrap;
}

/* “Most popular” badge with violet glow ring */
.fp-plan-card .fp-badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:.85rem; margin-top:6px;
  border:2px solid #B39CFF;
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 0 32px rgba(179,156,255,.9);
  text-shadow:0 0 12px rgba(179,156,255,.95), 0 0 22px rgba(179,156,255,.75);
}

/* ---------------------------
   Referrals alignment and WhatsApp style
---------------------------- */
.referrals .ref-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.referrals .ref-row .fp-input{ flex:1 1 280px; min-width:240px; }
.referrals .fp-btn--whatsapp,
.referrals a[href^="https://wa.me"]{
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid var(--fp-border);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),
             0 8px 22px rgba(0,0,0,.22),
             0 0 18px rgba(124,92,255,.56);
}

/* ---------------------------
   Support equal heights
---------------------------- */
.support-equal{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.support-equal .fp-card{ height:100%; }

/* ---------------------------
   Tracking: dark canvas + grid + axes
   (CSS-only overlay; JS can still draw actual series on top)
---------------------------- */
#measurements-chart-wrap{
  position:relative;
  background:#0E1424 !important;
  border-top-left-radius:16px !important;
  border-top-right-radius:16px !important;
  overflow:hidden !important;
}

/* Light grid */
#measurements-chart-wrap::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px;
  opacity:.85;
}

/* White X and Y axes (bottom & left) */
#measurements-chart-wrap::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.9);
  box-shadow:-1px 0 0 rgba(255,255,255,.9); /* creates a crisp left axis edge */
}
#measurements-chart-wrap > .y-axis-line{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:rgba(255,255,255,.9);
}

/* Inputs/icons on dark backgrounds: make built-in icons legible */
input[type="date"], input[type="time"], input[type="number"], textarea.fp-input, .fp-input input{
  color:#E8EEF7;
  background:#0F1626;
  border:1px solid var(--fp-border);
}

/* ---------------------------
   Home “Chat with us” looks like a button (href fix must be in template)
---------------------------- */
.home-cta .fp-btn{ text-decoration:none !important; }

/* ---------------------------
   Misc sizing keepers (logos)
---------------------------- */
.fp-logo-header{ width:200px; max-width:45vw; height:auto; display:block; }
.fp-logo-footer{ width:250px; max-width:55vw; height:auto; display:block; opacity:.95; }

/* === Dark file inputs (progress + tracking) === */
.fp-input input[type="file"]{
  background:#0F1626 !important;
  color:#E8EEF7 !important;
  border:1px solid var(--fp-border) !important;
  padding:8px !important;
  border-radius:8px !important;
}
.fp-input input[type="file"]::file-selector-button{
  background:linear-gradient(90deg,var(--fp-brand2),var(--fp-brand)) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important; padding:8px 12px !important; margin-right:10px !important;
  cursor:pointer !important;
}

/* === Pricing spacing/portrait adjustments === */
.pricing-card .pricing-cta-row{ margin-top:auto; }
.pricing-card .plan-portrait{ max-height:380px; }
.pricing-card .scan-addon .pricing-cta-row{ margin-top:10px; }

/* === CTA stack helper (if present in template) === */
.cta-stack{ margin-top:auto; display:flex; flex-direction:column; gap:12px; align-items:center; }

/* === Height bump so 'R0 (one-off)' fits cleanly on Coach and aligns all cards === */
.pricing-card{ min-height:820px !important; }