/* GymBuddy India site-wide flow UI layer */

:root {
  --flow-bg: #050605;
  --flow-surface: rgba(14, 18, 15, 0.86);
  --flow-surface-2: rgba(255, 255, 255, 0.055);
  --flow-line: rgba(255, 255, 255, 0.12);
  --flow-line-strong: rgba(200, 241, 53, 0.34);
  --flow-lime: #c8f135;
  --flow-wa: #25d366;
  --flow-blue: #6ee7ff;
  --flow-amber: #ffb020;
  --flow-text-soft: rgba(232, 232, 232, 0.7);
  --flow-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 84% 8%, rgba(37, 211, 102, 0.08), transparent 24%),
    radial-gradient(circle at 16% 70%, rgba(200, 241, 53, 0.07), transparent 22%),
    var(--flow-bg);
}

body.flow-ready {
  opacity: 1;
}

body.flow-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  transition: opacity 180ms ease, transform 180ms ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 24%, black, transparent 76%);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: var(--flow-ease);
}

a,
button,
input,
select {
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--flow-lime);
  outline-offset: 3px;
}

nav#navbar {
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.88), rgba(11, 16, 12, 0.82)),
    rgba(8, 8, 8, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav-links a,
.mobile-menu a,
.footer-links a {
  position: relative;
}

.nav-links a::after,
.mobile-menu a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, var(--flow-lime), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--flow-ease);
}

.nav-links a:hover::after,
.nav-links a.active::after,
.mobile-menu a:hover::after,
.footer-links a:hover::after {
  transform: scaleX(1);
}

.nav-cta,
.calc-btn,
.tpl-download,
.tpl-coach-btn,
.pro-cta-btn,
.tools-cta-btn,
.fd-modal-add-btn,
.ex-builder-link,
.builder-btn.primary,
.flow-action {
  position: relative;
  overflow: hidden;
}

.nav-cta::after,
.calc-btn::after,
.tpl-download::after,
.tpl-coach-btn::after,
.pro-cta-btn::after,
.tools-cta-btn::after,
.fd-modal-add-btn::after,
.ex-builder-link::after,
.builder-btn.primary::after,
.flow-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: translateX(-120%);
  transition: transform 620ms var(--flow-ease);
}

.nav-cta:hover::after,
.calc-btn:hover::after,
.tpl-download:hover::after,
.tpl-coach-btn:hover::after,
.pro-cta-btn:hover::after,
.tools-cta-btn:hover::after,
.fd-modal-add-btn:hover::after,
.ex-builder-link:hover::after,
.builder-btn.primary:hover::after,
.flow-action:hover::after {
  transform: translateX(120%);
}

:is(.tpl-hero, .tools-hero, .fd-hero, .ex-hero, .workout-hero, .seo-hero, .food-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(400px, 54dvh, 520px);
  display: grid;
  align-items: center;
  padding-block: clamp(78px, 9dvh, 104px) clamp(28px, 4dvh, 44px) !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(37, 211, 102, 0.16), transparent 29%),
    radial-gradient(circle at 18% 76%, rgba(255, 176, 32, 0.1), transparent 23%),
    linear-gradient(135deg, #050607 0%, #090d0a 48%, #10140f 100%) !important;
}

:is(.tpl-hero, .tools-hero, .fd-hero, .ex-hero, .workout-hero, .seo-hero, .food-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 241, 53, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 255, 0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
}

:is(.tpl-hero, .tools-hero, .fd-hero, .ex-hero, .workout-hero, .seo-hero, .food-hero)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -24%;
  z-index: -1;
  width: min(1040px, 120vw);
  height: 46%;
  transform: translateX(-50%) perspective(760px) rotateX(64deg);
  transform-origin: center bottom;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(200, 241, 53, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 241, 53, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.18;
  mask-image: linear-gradient(180deg, transparent, black 22%, transparent 86%);
}

:is(.tpl-hero-inner, .tools-hero-inner, .fd-hero-inner, .ex-hero-inner, .workout-hero, .seo-hero-grid, .food-hero > *) {
  position: relative;
  z-index: 1;
}

:is(.tpl-hero-badge, .tools-hero-badge, .fd-hero-badge, .ex-hero-badge, .ex-section-label, .section-label, .fd-coach-label, .seo-pill, .seo-kicker, .food-kicker) {
  border: 1px solid rgba(37, 211, 102, 0.32);
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.1);
  color: #d8ffe8;
  box-shadow: 0 0 34px rgba(37, 211, 102, 0.07);
}

:is(.tpl-hero h1, .tools-hero h1, .fd-hero h1, .ex-hero h1, .workout-hero h1, .seo-hero h1, .food-title) {
  font-size: clamp(44px, 6.4vw, 78px) !important;
  line-height: 0.92 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

:is(.tpl-hero-sub, .tools-hero-sub, .fd-hero-sub, .ex-hero-sub, .workout-hero p, .seo-lead, .seo-sub, .food-intro) {
  color: var(--flow-text-soft) !important;
  font-size: clamp(14px, 1.25vw, 17px) !important;
  line-height: 1.55 !important;
}

:is(.tpl-hero-badge, .tools-hero-badge, .fd-hero-badge, .ex-hero-badge, .seo-kicker, .food-kicker) {
  margin-bottom: 18px !important;
}

.fd-hero-stat-row {
  margin-top: 24px !important;
  gap: 24px !important;
}

.fd-hero-stat-num {
  font-size: 30px !important;
}

:is(.tools-selector, .fd-search-section, .ex-search-wrap, .ex-chips-section, .ex-secondary, .ex-count-bar) {
  position: sticky;
  top: 64px;
  z-index: 70;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 8, 7, 0.86) !important;
  backdrop-filter: blur(18px);
}

:is(.filters-inner, .tools-grid, .fd-goals-inner, .fd-search-inner, .ex-search-inner, .ex-chips-inner, .ex-secondary-inner, .ex-count-inner, .tpl-count-inner) {
  max-width: 1180px !important;
}

:is(.filter-pill, .tool-tab, .fd-goal-card, .fd-filter-toggle, .fd-view-btn, .ex-tab, .ex-chip, .ex-dd-btn, .tpl-reset, .ex-reset, .builder-btn, .mode-close) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(12, 15, 13, 0.86) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  transition: transform 220ms var(--flow-ease), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

:is(.filter-pill:hover, .tool-tab:hover, .fd-goal-card:hover, .fd-filter-toggle:hover, .fd-view-btn:hover, .ex-tab:hover, .ex-chip:hover, .ex-dd-btn:hover, .tpl-reset:hover, .ex-reset:hover, .builder-btn:hover, .mode-close:hover) {
  transform: translateY(-3px);
  border-color: rgba(200, 241, 53, 0.36) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
}

:is(.filter-pill.active, .tool-tab.active, .fd-goal-card.active, .fd-view-btn.active, .ex-tab.active, .ex-chip.active, .builder-btn.primary) {
  border-color: rgba(200, 241, 53, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(200, 241, 53, 0.18), rgba(37, 211, 102, 0.08)),
    rgba(12, 15, 13, 0.92) !important;
  color: #ffffff !important;
}

:is(.tpl-grid-section, .calc-area, .fd-results-section, .ex-grid-section, .workout-shell, .pro-preview, .tools-cta, .fd-seo-section, .fd-faq, .ex-builder-intro, .seo-section, .seo-final, .food-page, .food-section) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 10%, rgba(200, 241, 53, 0.08), transparent 26%),
    linear-gradient(180deg, #080908 0%, #050605 100%) !important;
}

:is(.tpl-card, .calc-panel, .result-card, .fd-card, .fd-food-card, .fd-coach-strip, .fd-adv-filters, .fd-compare-wrap, .fd-tray, .fd-modal, .ex-builder-intro-inner, .library-panel, .builder-panel, .workout-item, .stored-card, .mode-card, .pro-preview-inner, .pdf-page, .seo-card, .seo-feature, .seo-step, .seo-col, .seo-related a, .seo-faq details, .food-card, .food-cta) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(13, 16, 14, 0.86) !important;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.pro-preview-inner {
  padding: clamp(28px, 4vw, 46px) !important;
  gap: clamp(36px, 5vw, 68px) !important;
  overflow: visible !important;
}

.pro-preview-copy,
.pro-preview-visual {
  min-width: 0;
}

.pro-preview-badge {
  margin-top: 0 !important;
}

.pro-preview h2 {
  max-width: 520px;
}

.pro-preview-desc {
  max-width: 510px !important;
}

.pro-cta-row {
  padding-top: 4px;
}

:is(.tpl-card, .tool-tab, .fd-card, .fd-food-card, .stored-card, .workout-item, .seo-feature, .seo-step, .seo-related a, .food-card, .food-cta) {
  transform: translateY(0);
  transition: transform 260ms var(--flow-ease), border-color 260ms ease, box-shadow 260ms ease;
}

:is(.tpl-card:hover, .fd-card:hover, .fd-food-card:hover, .stored-card:hover, .workout-item:hover, .seo-feature:hover, .seo-step:hover, .seo-related a:hover, .food-card:hover, .food-cta:hover) {
  transform: translateY(-8px);
  border-color: rgba(200, 241, 53, 0.32) !important;
  box-shadow: 0 36px 104px rgba(0, 0, 0, 0.44);
}

:is(.calc-panel.active, .fd-modal, .mode-card) {
  animation: flow-panel-in 360ms var(--flow-ease) both;
}

.calc-area {
  scroll-margin-top: 210px;
}

.calc-panel {
  padding: clamp(28px, 4vw, 42px) !important;
}

.calc-panel .calc-header {
  margin-bottom: 28px;
}

.calc-panel .calc-title {
  margin: 0 0 12px;
}

.calc-panel .calc-desc {
  max-width: 640px;
}

.calc-panel .calc-form {
  margin-top: 30px;
}

:is(input, select, textarea, .fd-search-box, .ex-search, .workout-name-input) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
}

:is(input, select, textarea, .fd-search-box, .ex-search, .workout-name-input):focus-within,
:is(input, select, textarea):focus {
  border-color: rgba(200, 241, 53, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(200, 241, 53, 0.1);
}

.seo-actions,
.food-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

:is(.seo-primary, .seo-secondary, .food-cta a) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 800;
}

:is(.seo-primary, .food-cta a) {
  color: #050605 !important;
  background: linear-gradient(135deg, var(--flow-lime), #f4ff88) !important;
  box-shadow: 0 18px 48px rgba(200, 241, 53, 0.18);
}

.seo-secondary {
  color: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
}

.food-wrap,
.seo-wrap {
  max-width: 1180px !important;
}

.food-crumbs {
  padding-top: 92px;
}

.food-table {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

:is(.result-number, .fd-hero-stat-num, .why-stat, .tpl-count strong, .ex-count strong, .mode-timer, .food-fact span:last-child) {
  color: var(--flow-lime) !important;
  text-shadow: 0 0 32px rgba(200, 241, 53, 0.16);
}

.tool-tab-icon {
  font-size: 0 !important;
}

.tool-tab-icon::before {
  content: attr(data-flow-icon);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.flow-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--flow-ease), transform 620ms var(--flow-ease);
}

.flow-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ex-grid .ex-card-link.flow-reveal {
  opacity: 1 !important;
  transform: none !important;
}

footer {
  background:
    radial-gradient(circle at 12% 20%, rgba(200, 241, 53, 0.08), transparent 24%),
    linear-gradient(180deg, #050605 0%, #080808 100%) !important;
}

@keyframes flow-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  :is(.tpl-hero, .tools-hero, .fd-hero, .ex-hero, .workout-hero, .seo-hero, .food-hero) {
    min-height: clamp(332px, 50dvh, 430px);
    padding-block: 78px 26px !important;
  }

  :is(.tpl-hero h1, .tools-hero h1, .fd-hero h1, .ex-hero h1, .workout-hero h1, .seo-hero h1, .food-title) {
    font-size: clamp(42px, 12vw, 62px) !important;
  }

  :is(.tpl-hero-sub, .tools-hero-sub, .fd-hero-sub, .ex-hero-sub, .workout-hero p, .seo-lead, .seo-sub, .food-intro) {
    font-size: 15px !important;
  }

  .fd-hero-stat-row {
    margin-top: 18px !important;
  }

  :is(.tools-selector, .fd-search-section, .ex-search-wrap, .ex-chips-section, .ex-secondary, .ex-count-bar) {
    position: relative;
    top: auto;
    backdrop-filter: none;
  }

  :is(.tpl-card, .calc-panel, .result-card, .fd-card, .fd-food-card, .fd-coach-strip, .fd-adv-filters, .fd-compare-wrap, .fd-tray, .fd-modal, .ex-builder-intro-inner, .library-panel, .builder-panel, .workout-item, .stored-card, .mode-card, .pro-preview-inner, .pdf-page) {
    backdrop-filter: none;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  }

  .ex-builder-intro-inner > * {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .ex-hero h1 {
    font-size: clamp(34px, 9.2vw, 44px) !important;
    line-height: 0.98 !important;
  }

  .ex-builder-intro {
    padding-inline: 20px !important;
  }

  .ex-builder-intro-inner {
    width: auto !important;
    max-width: min(300px, calc(100vw - 40px)) !important;
    box-sizing: border-box;
  }

  .ex-builder-intro-inner > div:first-child {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ex-builder-intro h2 {
    font-size: 25px !important;
    line-height: 1.04 !important;
    letter-spacing: 0.7px !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .ex-builder-title-line {
    display: block;
  }

  .ex-builder-intro p {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}