:root {
  --fp-primary: #4F46E5;
  --fp-primary-dark: #4338CA;
  --fp-bg: #0F172A;
  --fp-surface: #1E293B;
  --fp-text: #F1F5F9;
  --fp-text-muted: #94A3B8;
  --fp-border: #334155;
  --fp-success: #10B981;
  --fp-warning: #F59E0B;
  --fp-error: #EF4444;
}

/* Base buttons */
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .9rem;border-radius:.75rem;border:1px solid var(--fp-border);background:var(--fp-surface);color:var(--fp-text);text-decoration:none;cursor:pointer}
.fp-btn:hover{filter:brightness(1.05)}
.fp-btn:disabled{opacity:.6;cursor:not-allowed}
.fp-btn--ghost{background:transparent;border-color:var(--fp-border)}

/* Containers */
.fp-container{max-width:980px;margin:0 auto;padding:0 16px}
.fp-card{background:var(--fp-surface);border:1px solid var(--fp-border);border-radius:16px}

/* Hero */
.fp-hero{padding:28px 0}
.fp-hero-title{font-size:clamp(26px,4vw,36px);margin:0}
.fp-hero-sub{color:var(--fp-text-muted);margin:.3rem 0 0}

/* Inputs */
.fp-input{width:100%;background:transparent;border:1px solid var(--fp-border);color:var(--fp-text);border-radius:10px;padding:10px 12px}
.fp-label{display:block;margin-bottom:6px;color:var(--fp-text-muted);font-size:14px}

/* Typography helpers */
.fp-help{color:var(--fp-text-muted);font-size:.95rem}
.fp-disclaimer{color:var(--fp-text-muted);font-size:.9rem}

/* === PHASE 8: Copy button brand color === */
.fp-btn--copy{background:var(--fp-primary);border:1px solid var(--fp-primary);color:#fff}
.fp-btn--copy:hover{filter:brightness(0.95)}



/* ===============================
   PHASE 10 — Sign-in spacing fix
   =============================== */
.fp-buy-form .fp-input { 
  margin-bottom: 12px;
}

/* Ensure inputs inside cards have breathing room */
.fp-card .fp-input { 
  margin-bottom: 12px;
}

/* ==================================
   PHASE 11 — Global subtle animations
   ================================== */

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Keyframes */
@keyframes fpFadeIn {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fpSlideUp {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fpPop {
  from { transform: scale(0.98); }
  to   { transform: scale(1); }
}

/* Apply to common surfaces */
.fp-hero,
.fp-card,
.fp-section,
.fp-container [data-animate] {
  animation: fpFadeIn .5s ease-out both;
}

/* Optional attribute-driven variants */
[data-animate="slide-up"] { animation: fpSlideUp .45s ease-out both; }
[data-animate="pop"]      { animation: fpPop .2s ease-out both; }

/* Buttons: gentle lift on hover, crisp press on active */
.fp-btn { transition: transform .15s ease, box-shadow .15s ease, filter .2s ease; }
.fp-btn:hover { transform: translateY(-1px); }
.fp-btn:active { transform: translateY(0); }

/* Cards: subtle hover elevate (opt-in using .fp-card--hover) */
.fp-card--hover { transition: transform .2s ease, box-shadow .2s ease; }
.fp-card--hover:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

/* Links and interactive states with brand color */
a, .fp-link { color: var(--fp-primary); }
a:hover, .fp-link:hover { filter: brightness(1.1); }

/* Focus rings use brand color */
:where(.fp-btn, input, select, textarea, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fp-primary) 65%, white);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Brand color consistency for copy buttons & CTAs */
.fp-btn--copy,
.fp-btn--primary {
  background: var(--fp-primary);
  border: 1px solid var(--fp-primary);
  color: #fff;
}
.fp-btn--ghost { border: 1px solid var(--fp-primary); color: var(--fp-primary); }
.fp-btn--ghost:hover { background: color-mix(in srgb, var(--fp-primary) 16%, transparent); }

/* Optional gradient utility using brand accents */
.fp-gradient {
  background-image: linear-gradient(135deg, #06C1B0 0%, #7C5CFF 100%);
  color: #fff;
}

/* === FitPocket Brand UI patch (non-breaking) === */
:root { --fp-teal:#06C1B0; --fp-purple:#7C5CFF; }
.fp-btn--primary {
  background: linear-gradient(90deg, var(--fp-teal), var(--fp-purple)) !important;
  color: #fff !important; border: 0 !important;
}
.fp-btn--primary:hover { filter: brightness(0.96); }
.fp-logo-header { width: 200px; height: auto; }
.fp-logo-footer { width: 250px; height: auto; opacity: .92; }
.fp-whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(90deg, var(--fp-teal), var(--fp-purple));
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index:1000; font-size:22px;
}

/* === Earlier Dark Theme: fitpocket.css snapshot === */
:root{
  --bg:#0B1220; --fg:#E7EBF3; --muted:#B7C1D8;
  --card:#111827; --line:#1E2A40;
  --accent1:#06C1B0; --accent2:#7C5CFF; --accent3:#2DD4BF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,rgba(12,18,32,1),rgba(12,18,32,0.94)),
      radial-gradient(60% 40% at 20% 0%, rgba(124,92,255,0.16), transparent 60%) fixed;
  color:var(--fg); font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent3);text-decoration:none}
.fp-container{max-width:1100px;margin:0 auto;padding:0 20px}
.fp-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,0.7);backdrop-filter: blur(8px);border-bottom:1px solid var(--line)}
.fp-header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.fp-brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.fp-logo{height:32px;display:block}
.fp-logo-sm{height:26px;display:block}
.fp-wordmark{font-weight:800;letter-spacing:0.2px}
.fp-grad{background:linear-gradient(45deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fp-nav a{color:var(--muted);margin:0 10px}
.fp-nav a:hover{color:var(--fg)}
.fp-btn{border:1px solid transparent;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .08s ease, box-shadow .2s ease}
.fp-btn--primary{background:linear-gradient(45deg,var(--accent1),var(--accent2)); color:#0B1220; box-shadow:0 6px 18px rgba(124,92,255,.25)}
.fp-btn--primary:hover{transform:translateY(-1px)}
.fp-btn--ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.fp-btn--disabled{opacity:.5;background:#30384a;border-color:#3a4256;color:#96a0b7;cursor:not-allowed}
.fp-main{padding-bottom:30px}
.fp-hero{padding:60px 0 10px}
.fp-hero-title{font-size:42px;line-height:1.1;margin:0 0 8px;text-shadow:0 10px 40px rgba(124,92,255,.15)}
.fp-hero-sub{color:var(--muted);margin:0}
.fp-card{background:linear-gradient(180deg,rgba(17,24,39,1),rgba(15,22,38,.98));border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 12px 40px rgba(9,14,25,.35)}
.fp-list{list-style:none;margin:0;padding:0}
.fp-list li{margin:8px 0;display:flex;gap:8px}
.fp-list li:before{content:"";width:8px;height:8px;border-radius:50%;margin-top:8px;background:linear-gradient(45deg,var(--accent1),var(--accent2))}
.fp-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px auto 46px}
@media (max-width:980px){.fp-pricing{grid-template-columns:1fr}}
.fp-card--highlight{border-color:rgba(124,92,255,.6);box-shadow:0 20px 50px rgba(124,92,255,.25)}
.fp-ribbon{position:absolute;top:16px;right:16px;font-size:12px;background:linear-gradient(45deg,var(--accent2),var(--accent3));color:#0B1220;padding:6px 10px;border-radius:999px;font-weight:800}
.fp-price{display:flex;align-items:flex-end;gap:6px;margin:12px 0 16px}
.fp-curr{opacity:.9}.fp-amt{font-size:40px;font-weight:900;letter-spacing:1px}.fp-per{color:var(--muted)}
.fp-buy-form{display:grid;gap:10px}
.fp-input{display:grid;gap:6px}
.fp-input input, .fp-input select{background:#0f1524;border:1px solid #212a40;border-radius:12px;padding:10px;color:var(--fg);outline:none}
.fp-input input:focus, .fp-input select:focus{border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.fp-footer{border-top:1px solid var(--line);margin-top:40px}
.fp-footer-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.fp-footer-links a{color:var(--muted);margin-left:12px}
.fp-footer-links a:hover{color:var(--fg)}
.fp-disclaimer{font-size:13px;opacity:.9;color:#9fb2d1}


/* === Patch: spacing/ribbon === */
.fp-card { padding-top: 28px; }
.fp-card .fp-card-title { margin-top: 4px; }
.fp-ribbon { top: 10px; right: 16px; }
/* End patch */


/* === Navigation alignment fix === */
.fp-nav{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.fp-nav a{display:inline-flex;align-items:center;height:40px}
.fp-nav .fp-btn{display:inline-flex;align-items:center;height:40px;padding:0 14px}

/* === Upgrade modal (fits existing theme) === */
.fp-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none}
.fp-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px}
.fp-modal.is-open{display:flex}
.fp-modal-backdrop.is-open{display:block}
.fp-modal__card{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.fp-modal__title{margin:0 0 8px;font-weight:700}
.fp-modal__body{margin:0 0 14px;color:var(--muted)}
.fp-modal__actions{display:flex;gap:10px;justify-content:flex-end}
.fp-modal__actions .fp-btn{height:40px;display:inline-flex;align-items:center}
/* End modal */

/* Footer logo size tweak */
.fp-footer .fp-logo{height:40px}

/* Footer small-logo size tweak */
.fp-footer .fp-logo-sm{height:56px!important;width:auto!important;display:inline-block;margin-right:10px}

/* --- FitPocket: responsive augmentations (additive; safe defaults) --- */
:root { --hit: 44px; } /* minimum tap target size */

img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

/* Prevent layout blowouts from long strings/IDs */
* { word-wrap: break-word; overflow-wrap: break-word; }

/* Containers keep breathable gutters on small screens without changing desktop layout */
.page, .container, .wrap {
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
}

/* Tables and wide elements become horizontally scrollable on phones */
.table-wrap, .overflow-x, table {
  max-width: 100%;
}
.table-wrap, .overflow-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Navigation: keep your exact markup; allow swipe scroll on overflow */
/* Allow horizontal scrolling for navigation on small screens, including
   our custom .fp-nav class. This prevents overlap when many menu items
   are present on mobile or narrow screens. */
header nav ul, .nav, .menu, .tabs, .fp-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
header nav ul::-webkit-scrollbar, .nav::-webkit-scrollbar, .menu::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

/* Forms and buttons: comfortable touch targets */
button, .btn, input[type="button"], input[type="submit"], .chip, .tab {
  min-height: var(--hit);
  min-width: var(--hit);
}

/* Modals: never exceed viewport height */
.modal, .modal__body, .dialog, .dialog__body {
  max-height: 90vh;
  overflow: auto;
}

/* Charts/images/cards stay fluid */
.chart, canvas, .chart canvas { width: 100% !important; height: auto !important; }

/* Typography scales down slightly on smaller screens, without touching desktop */
@media (max-width: 768px) {
  html { font-size: 15px; } /* gentle downscale */
}

/* Grid stacks progressively without renaming your classes */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .card, .panel { border-radius: 18px; } /* nicer on small screens; purely cosmetic */
}

/* Avoid accidental zoom-on-focus for iOS by using at least 16px font in inputs */
input, select, textarea { font-size: 16px; }