/* ==========================================================================
   Nutrition V2 Landing Page — page-specific styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header Override — white bg, black text, purple CTA from the start
   -------------------------------------------------------------------------- */

/* White background always */
.page-nutrition-v2 #header-new-home:not(.scrolled) {
  background: white;
}

/* Default: hide white logo, show black logo */
.page-nutrition-v2 #header-new-home .logo .logo-white {
  display: none;
}

/* Scrolled: black logo hides via Tailwind group-[.scrolled]:hidden, compact logo shows — no override needed */

/* Nav links: black text */
.page-nutrition-v2 #header-new-home .primary-menu > li a,
.page-nutrition-v2 #header-new-home .primary-menu > li .menu-wrapper > a {
  color: #000;
}

/* Sign-in button: black text */
.page-nutrition-v2 #header-new-home .sign-in-button {
  color: #000 !important;
}

/* Start Free Trial button: purple bg, white text */
.page-nutrition-v2 #header-new-home .header-button .card-solid-btn {
  background: #5e59ff !important;
  color: white !important;
  border-radius: 8px;
}

.page-nutrition-v2 #header-new-home .header-button .card-solid-btn svg path {
  stroke: white;
  fill: none;
}

/* Hover state for purple button */
.page-nutrition-v2 #header-new-home .header-button:hover .card-solid-btn {
  background: #4e49ef !important;
}

/* Remove white outline on header button */
.page-nutrition-v2 #header-new-home .solid-btn-white {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Scrolled state: keep same purple button */
.page-nutrition-v2 #header-new-home.scrolled .header-button .card-solid-btn {
  background: #5e59ff !important;
  color: white !important;
}

.page-nutrition-v2 #header-new-home.scrolled .sign-in-button {
  color: #000 !important;
}

/* Icon-down (dropdown arrow) — black */
.page-nutrition-v2 #header-new-home .icon-down {
  border-color: #000;
}

/* Header padding */
.page-nutrition-v2 #header-new-home .mobile-menu .mobile-menu-inner .mobile-menu-head{
  padding-top: 10px;
  padding-bottom: 10px;
}

.page-nutrition-v2 #header-new-home .mobile-menu .mobile-menu-inner .mobile-menu-head .logo-black {
  width: 122px;
}

.page-nutrition-v2 .mobile-menu .mobile-submenu {
  top: calc(101px + var(--intercomBanner));;
}

.page-nutrition-v2 .primary-menu.has-current-page > li > a {
  opacity: 1;
}

.page-nutrition-v2 .card-solid-btn::before {
  width: 192px;
  height: 192px;
}

@media (min-width: 768px) {
  .page-nutrition-v2 #header-new-home .mobile-menu .mobile-menu-inner .mobile-menu-head {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .page-nutrition-v2 #header-new-home .mobile-menu .mobile-menu-inner .mobile-menu-head .logo-black {
    width: 147px;
  }

  .page-nutrition-v2 .mobile-menu .mobile-submenu {
    top: calc(118px + var(--intercomBanner));
  }
}

@media (min-width: 1024px) {
  .page-nutrition-v2 #header-new-home .header-inner {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .page-nutrition-v2 #header-new-home.scrolled .header-inner {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

@media (min-width: 1440px) {
  .page-nutrition-v2 #header-new-home .header-inner {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (min-width: 1920px) {
  .page-nutrition-v2 #header-new-home .header-inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* Mobile: white logo hidden via CSS above, black logo visible by default */
/* Scrolled/menu-open: logo.svg shows naturally — no override needed */

/* --------------------------------------------------------------------------
   Industry-style Sections — Slick carousel + progress bar
   Mirrors homepage .slick-videos-industry / .slick-text-industry exactly
   -------------------------------------------------------------------------- */

@keyframes progressFillNutrition {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Video carousel container --- */

.slick-videos-nutrition-meal,
.slick-videos-nutrition-macro {
  overflow: hidden;
}

/* Dots bar */
.slick-videos-nutrition-meal .slick-dots,
.slick-videos-nutrition-macro .slick-dots {
  position: relative;
  bottom: 0;
  display: flex;
  margin-top: 30px;
  margin-bottom: 16px;
  gap: 6px;
}

@media (min-width: 768px) {
  .slick-videos-nutrition-meal .slick-dots {
    margin-top: 20px;
  }

  .slick-videos-nutrition-macro .slick-dots {
    margin-top: 50px;
  }
}

@media (min-width: 1024px) {
  .slick-videos-nutrition-meal .slick-dots,
  .slick-videos-nutrition-macro .slick-dots {
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 50px;
  }
}

@media (min-width: 1280px) {
  .slick-videos-nutrition-meal .slick-dots,
  .slick-videos-nutrition-macro .slick-dots {
    margin-bottom: 20px;
    margin-top: 50px;
  }
}

/* Dots li — progress track */
.slick-videos-nutrition-meal .slick-dots li,
.slick-videos-nutrition-macro .slick-dots li {
  width: 100%;
  height: 3px;
  position: relative;
  margin: 0;
  background: rgba(0, 0, 0, 0.1);
}

@media (min-width: 1024px) {
  .slick-videos-nutrition-meal .slick-dots li,
  .slick-videos-nutrition-macro .slick-dots li {
    height: 2px;
  }
}

/* Progress fill */
.slick-videos-nutrition-meal .slick-dots li::before,
.slick-videos-nutrition-macro .slick-dots li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: rgba(28, 28, 28, 1);
}

/* Invisible click area on dots — matches homepage li::after */
.slick-videos-nutrition-meal .slick-dots li::after,
.slick-videos-nutrition-macro .slick-dots li::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: calc(100% + 56px);
  width: 100%;
}

@media (min-width: 768px) {
  .slick-videos-nutrition-meal .slick-dots li::after,
  .slick-videos-nutrition-macro .slick-dots li::after {
    display: none;
  }
}

/* Active dot progress animation — gated on slick-initialized so the static
   PHP <ul.slick-dots.custom-slick-dot> doesn't start the animation with the
   CSS fallback before slick replaces it. */
.slick-videos-nutrition-meal.slick-initialized .slick-dots li.slick-active::before {
  animation: progressFillNutrition var(--duration-video-nutrition-meal, 5s) ease forwards;
}

.slick-videos-nutrition-macro.slick-initialized .slick-dots li.slick-active::before {
  animation: progressFillNutrition var(--duration-video-nutrition-macro, 5s) ease forwards;
}

.slick-videos-nutrition-meal .slick-dots li button,
.slick-videos-nutrition-macro .slick-dots li button {
  display: none;
}

/* --- Text carousel --- */

/* Track layout */
.slick-text-nutrition-meal .slick-track,
.slick-text-nutrition-macro .slick-track {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .slick-text-nutrition-meal .slick-track,
  .slick-text-nutrition-macro .slick-track {
    flex-direction: row;
  }
}

/* Slide base — opacity + margins matching homepage */
.slick-text-nutrition-meal .slick-slide,
.slick-text-nutrition-macro .slick-slide {
  opacity: 0.4;
  cursor: pointer;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 640px) {
  .slick-text-nutrition-meal .slick-slide,
  .slick-text-nutrition-macro .slick-slide {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Hover */
.slick-text-nutrition-meal .slick-slide:hover,
.slick-text-nutrition-macro .slick-slide:hover {
  opacity: 1;
}

/* Active current — sm+ only (mobile uses .active class) */
@media (min-width: 640px) {
  .slick-text-nutrition-meal .slick-slide.slick-current,
  .slick-text-nutrition-macro .slick-slide.slick-current {
    opacity: 1;
  }
}

/* Slick-list negative margin to compensate slide margins */
@media (min-width: 640px) {
  .slick-text-nutrition-meal .slick-list,
  .slick-text-nutrition-macro .slick-list {
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (min-width: 1440px) {
  .slick-text-nutrition-meal .slick-list,
  .slick-text-nutrition-macro .slick-list {
    margin-left: -8px;
    margin-right: -8px;
  }
}

@media (min-width: 1920px) {
  .slick-text-nutrition-meal .slick-list,
  .slick-text-nutrition-macro .slick-list {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* AI badge active/inactive — desktop (slick-current) */
.slick-text-nutrition-meal .slick-slide.slick-current .ai-icon,
.slick-text-nutrition-macro .slick-slide.slick-current .ai-icon {
  display: inline-block !important;
}

.slick-text-nutrition-meal .slick-slide:not(.slick-current) .ai-icon,
.slick-text-nutrition-macro .slick-slide:not(.slick-current) .ai-icon {
  display: none !important;
}

.slick-text-nutrition-meal .slick-slide:not(.slick-current) .ai-icon-inactive,
.slick-text-nutrition-macro .slick-slide:not(.slick-current) .ai-icon-inactive {
  display: inline-block !important;
}

.slick-text-nutrition-meal .slick-slide.slick-current .ai-icon-inactive,
.slick-text-nutrition-macro .slick-slide.slick-current .ai-icon-inactive {
  display: none !important;
}

/* Mobile progress bar (visible < 640px only) */
.slick-text-nutrition-meal .slick-slide .progress,
.slick-text-nutrition-macro .slick-slide .progress {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin: 0 0 16px;
  background: rgba(0, 0, 0, 0.2);
}

@media (min-width: 640px) {
  .slick-text-nutrition-meal .slick-slide .progress,
  .slick-text-nutrition-macro .slick-slide .progress {
    display: none;
  }
}

.slick-text-nutrition-meal .slick-slide .progress::before,
.slick-text-nutrition-macro .slick-slide .progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: rgb(0, 0, 0);
}

/* Default .active state — video hidden on desktop, mt-5 for when it shows */
.slick-text-nutrition-meal .slick-slide.active .video-mobile-item,
.slick-text-nutrition-macro .slick-slide.active .video-mobile-item {
  display: none;
  margin-top: 16px;
}

/* Mobile: stacked layout, active shows video */
@media (max-width: 639px) {
  .slick-text-nutrition-meal .slick-list,
  .slick-text-nutrition-macro .slick-list {
    margin: 0 !important;
  }

  .slick-text-nutrition-meal .slick-track,
  .slick-text-nutrition-macro .slick-track {
    width: 100% !important;
    transform: none !important;
  }

  .slick-text-nutrition-meal .slick-slide,
  .slick-text-nutrition-macro .slick-slide {
    width: 100% !important;
  }

  .slick-text-nutrition-meal .slick-slide.active,
  .slick-text-nutrition-macro .slick-slide.active {
    opacity: 1;
  }

  .slick-text-nutrition-meal .slick-slide.active .progress::before,
  .slick-text-nutrition-macro .slick-slide.active .progress::before {
    width: 100%;
  }

  .slick-text-nutrition-meal .slick-slide.active .video-mobile-item,
  .slick-text-nutrition-macro .slick-slide.active .video-mobile-item {
    display: block;
    transition: opacity 0.5s;
  }

  /* AI badge — mobile uses .active class */
  .slick-text-nutrition-meal .slick-slide.active .ai-icon,
  .slick-text-nutrition-macro .slick-slide.active .ai-icon {
    display: inline-block !important;
  }

  .slick-text-nutrition-meal .slick-slide.active .ai-icon-inactive,
  .slick-text-nutrition-macro .slick-slide.active .ai-icon-inactive {
    display: none !important;
  }

  .slick-text-nutrition-meal .slick-slide:not(.active) .ai-icon,
  .slick-text-nutrition-macro .slick-slide:not(.active) .ai-icon {
    display: none !important;
  }

  .slick-text-nutrition-meal .slick-slide:not(.active) .ai-icon-inactive,
  .slick-text-nutrition-macro .slick-slide:not(.active) .ai-icon-inactive {
    display: inline-block !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Header
   -------------------------------------------------------------------------- */

/* Mobile: purple Start free trial button.
   Excludes .logo because the same selector also matches the logo link inside the header's flex container. */
.page-nutrition-v2 #header-new-home .mobile-menu .flex > a:not(.menu-toggle):not(.logo) {
  background: #5e59ff !important;
}

.page-nutrition-v2 #header-new-home .mobile-menu .flex > a:not(.menu-toggle):not(.logo) span {
  color: white !important;
}

/* Mobile menu toggle: black lines */
.page-nutrition-v2 #header-new-home .menu-icon::before,
.page-nutrition-v2 #header-new-home .menu-icon::after {
  background-color: #000;
}

/* --------------------------------------------------------------------------
   Form states — hero (Figma 3194:74361) + CTA (Figma 3194:74460)

   Toggle contract (driven by nutrition-v2.js):
   - Input error:    add .error to <input>      → red border + reveal .custom-error-message.show
   - Button loading: add .is-loading to <button> → hides text+arrow, shows spinner
   -------------------------------------------------------------------------- */

/* Error message — hidden by default, revealed when .show is added.
   Scoped to the hero + CTA forms ONLY so we don't override the contact-us
   popup, which injects its own .custom-error-message with a different
   visibility contract (toggles `hidden` on the outer .error-message wrapper). */
.page-nutrition-v2 .nutrition-v2-cta-form .custom-error-message,
.page-nutrition-v2 .nutrition-hero-form .custom-error-message {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.page-nutrition-v2 .nutrition-hero-form .input-wrapper:has(.custom-error-message.show) {
  margin-bottom: 26px;
}

.page-nutrition-v2 .nutrition-hero-form .custom-error-message.show,
.page-nutrition-v2 .nutrition-v2-cta-form .custom-error-message.show {
  display: flex;
}

/* Hero input — error state (overrides Tailwind !border-[#757575]) */
.page-nutrition-v2 .start-free-trial-input.error,
.page-nutrition-v2 .start-free-trial-input.invalid {
  border-color: #F64242 !important;
  background-color: #fff !important;
}

/* Button — loading state: hide label + arrow, show spinner */
.page-nutrition-v2 .start-free-trial-button .btn-loader {
  display: none;
  width: 19px;
  height: 19px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: nutritionBtnSpin 0.8s linear infinite;
}

.page-nutrition-v2 .start-free-trial-button.is-loading .btn-text,
.page-nutrition-v2 .start-free-trial-button.is-loading .btn-arrow {
  display: none;
}

.page-nutrition-v2 .start-free-trial-button.is-loading .btn-loader {
  display: block;
}

@keyframes nutritionBtnSpin {
  to { transform: rotate(360deg); }
}

@media (min-width: 640px) {
  .page-nutrition-v2 .nutrition-hero-form .input-wrapper:has(.custom-error-message.show) {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   CTA form — glass input + white button states (Figma 3194:74460)

   Same JS toggle contract as the hero form:
   - Input error:    add .error to <input>      → red tinted bg + border + reveal message
   - Button loading: add .is-loading to <button> → hides text, shows dark spinner
   -------------------------------------------------------------------------- */

/* Input — filled state: drop the border once the field has a value (matches Figma "Filled") */
.page-nutrition-v2 .cta-email-input:not(:placeholder-shown):not(:focus) {
  border-color: transparent !important;
}

/* Input — error: tinted red glass + red border */
.page-nutrition-v2 .cta-email-input.error,
.page-nutrition-v2 .cta-email-input.invalid {
  background-color: rgba(246, 96, 66, 0.26) !important;
  border-color: #F66042 !important;
}

/* Button — loading state: hide label, show dark spinner on white bg */
.page-nutrition-v2 .cta-submit-button .btn-loader {
  display: none;
  width: 19px;
  height: 19px;
  border: 2.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000000;
  border-radius: 50%;
  animation: nutritionBtnSpin 0.8s linear infinite;
}

.page-nutrition-v2 .cta-submit-button.is-loading .btn-text {
  display: none;
}

.page-nutrition-v2 .cta-submit-button.is-loading .btn-loader {
  display: block;
}
/* =========================================================================
   Explore More — Swiper carousel
   ========================================================================= */

/* Pagination lives OUTSIDE .swiper (sibling, not child) so Swiper's
   overflow:hidden can't clip it. Override Swiper's default position:absolute
   to flow in normal block layout. 30×4px pill bars, 2px gap, inactive at 20%.
   Bullet count is auto-generated by Swiper (one per snap position): 3 at 375
   and 768, 2 at 1024 where card 3 already fits inside snap 1. */
.page-nutrition-v2 .explore-more-pagination.swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 100%;
  bottom: auto;
  left: auto;
  line-height: 0;
}

.page-nutrition-v2 .explore-more-pagination .swiper-pagination-bullet {
  width: 30px;
  height: 4px;
  background-color: #333;
  opacity: 0.2;
  border-radius: 99px;
  margin: 0 !important;
  transition: opacity 0.2s ease;
}

.page-nutrition-v2 .explore-more-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Hide pagination when all 3 cards fit (Swiper sets .swiper-pagination-lock
   on the bullets container when watchOverflow locks the swiper). */
.page-nutrition-v2 .explore-more-pagination.swiper-pagination-lock {
  display: none;
}

.page-nutrition-v2 footer {
  padding-top: 64px;
}

@media (min-width: 640px) {
  .page-nutrition-v2 footer {
    padding-top: 80px;
  }
}