/*
Theme Name: Fit Life
Theme URI: https://example.com/fitlife-theme
Author: Fit Life
Author URI: https://example.com
Description: Custom one-page WordPress landing page theme for Fit Life, a herbal supplement brand. Converted from a static HTML/Tailwind design, pixel-for-pixel preserved.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fitlife
*/

/* ==========================================================================
   NOTE: Tailwind CSS utility classes are loaded via the Tailwind CDN script
   (see functions.php). The rules below are the site's custom design-system
   CSS, extracted unchanged from the original static HTML file so the
   frontend design is preserved exactly.
   ========================================================================== */

  :root{
    --green-500:#16A34A;
    --green-700:#166534;
    --green-100:#DCFCE7;
    --amber-500:#F59E0B;
    --gold-400:#FFD54F;
    --forest-900:#0B3320;
    --ink:#0E2A1B;
  }
  *{ font-family:'Noto Sans Bengali','Hind Siliguri',sans-serif; }
  .font-display{ font-family:'Baloo Da 2','Noto Sans Bengali',sans-serif; }
  html{ scroll-behavior:smooth; }
  body{
    color:var(--ink);
    background:linear-gradient(180deg,#F0FDF4,#ECFDF5,#FFFFFF);
    overflow-x:hidden;
  }

  /* ---------- surfaces ---------- */
  .bg-tint-green{ background:linear-gradient(180deg,#DCFCE7 0%, #F0FDF4 100%); }
  .bg-tint-white{ background:#FFFFFF; }
  .bg-tint-gradient{ background:linear-gradient(160deg,#ECFDF5 0%, #DCFCE7 50%, #FFF7ED 100%); }
  .bg-tint-deep{ background:linear-gradient(160deg,#166534 0%, #0B3320 100%); }

  .glass{
    background:rgba(255,255,255,0.62);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,0.7);
    box-shadow:0 10px 40px rgba(15,61,36,0.12);
  }
  .glass-dark{
    background:rgba(11,51,32,0.55);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,0.14);
  }

  /* gradient border card */
  .grad-border{
    background:linear-gradient(135deg,#4ADE80,#F59E0B 60%,#FFD54F);
    border-radius:22px;
    padding:2px;
  }
  .grad-border-inner{
    border-radius:20px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(14px);
    height:100%;
  }

  .grad-green{ background:linear-gradient(135deg,#22C55E 0%,#166534 100%); }
  .grad-amber{ background:linear-gradient(135deg,#FFD54F 0%,#F59E0B 100%); }
  .grad-deep{ background:linear-gradient(160deg,#166534 0%,#0B3320 100%); }

  .text-grad{
    background:linear-gradient(135deg,#16A34A,#F59E0B);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .section-title{ position:relative; display:inline-block; }
  .section-title .underline-deco{
    position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
    width:70px; height:6px; border-radius:6px;
    background:linear-gradient(90deg,#16A34A,#F59E0B);
  }

  .card-hover{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
  .card-hover:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 24px 50px rgba(15,61,36,0.2); }

  /* buttons */
  .btn-cta{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#34D399,#16A34A 55%,#166534);
    box-shadow:0 10px 30px rgba(22,163,74,0.4), 0 0 0 0 rgba(255,213,79,0.5);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-cta:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 45px rgba(22,163,74,0.5), 0 0 25px rgba(255,213,79,0.5); }
  .btn-cta:active{ transform:translateY(0) scale(0.97); }
  .ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.55);
    transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;
  }
  @keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

  .pulse-ring{ animation:pulseRing 2.2s cubic-bezier(0.4,0,0.6,1) infinite; }
  @keyframes pulseRing{
    0%{ box-shadow:0 0 0 0 rgba(255,213,79,0.55); }
    70%{ box-shadow:0 0 0 18px rgba(255,213,79,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,213,79,0); }
  }

  .badge-float{ animation:floatY 4s ease-in-out infinite; }
  @keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

  /* floating decorative blur circles */
  .blur-circle{ position:absolute; border-radius:9999px; filter:blur(60px); pointer-events:none; z-index:0; }

  /* floating particles */
  .particle{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); animation:particleUp linear infinite; }
  @keyframes particleUp{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:.8; }
    90%{ opacity:.5; }
    100%{ transform:translateY(-120px) translateX(10px); opacity:0; }
  }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#F0FDF4; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#16A34A,#F59E0B); border-radius:10px; }

  .modal-backdrop{ background:rgba(11,51,32,0.6); backdrop-filter:blur(8px); }

  .faq-content{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .faq-item.open .faq-content{ max-height:300px; }
  .faq-item.open .faq-chevron{ transform:rotate(180deg); }
  .faq-chevron{ transition:transform .3s ease; }

  .timeline-line{ background:repeating-linear-gradient(to bottom,#16A34A 0,#16A34A 8px,transparent 8px,transparent 16px); }

  input:focus, textarea:focus, select:focus{ outline:none; box-shadow:0 0 0 3px rgba(22,163,74,0.3); border-color:#16A34A; }

  .leaf-deco{ display:inline-block; }

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

  /* ---------- product gallery ---------- */
  .gallery-card{
    break-inside:avoid;
    margin-bottom:1.5rem;
    border-radius:24px;
    overflow:hidden;
    cursor:zoom-in;
    position:relative;
  }
  .gallery-card .img-wrap{ overflow:hidden; border-radius:24px; position:relative; }
  .gallery-card img{
    width:100%; height:100%; display:block; object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .gallery-card:hover img{ transform:scale(1.08); }
  .gallery-card .hd-badge{
    position:absolute; top:12px; left:12px;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    padding:4px 10px; border-radius:9999px; color:#fff;
    z-index:2;
  }
  .gallery-card .zoom-hint{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(11,51,32,0.35); opacity:0; transition:opacity .3s ease; z-index:1;
  }
  .gallery-card:hover .zoom-hint{ opacity:1; }

  #lightboxImg{ animation:lbFade .35s ease; }
  @keyframes lbFade{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:scale(1);} }
  /* ==========================================================================
     NEW — Price / Parcel Receiving animation
     ========================================================================== */
  .parcel-scene{ position:relative; }
  .parcel-figure{ transform-origin:center bottom; }

  /* delivery man walks in slightly, customer leans in to receive */
  @keyframes handoffApproach{
    0%, 12%{ transform:translateX(0); }
    30%, 70%{ transform:translateX(var(--approach, -10px)); }
    88%,100%{ transform:translateX(0); }
  }
  .figure-delivery{ animation:handoffApproach 6s ease-in-out infinite; --approach:14px; }
  .figure-customer{ animation:handoffApproach 6s ease-in-out infinite; --approach:-14px; }

  /* parcel moves from delivery man's hand to customer's hand */
  @keyframes parcelHandoff{
    0%, 15%{ transform:translate(0,0) rotate(0deg); opacity:1; }
    45%{ transform:translate(var(--parcel-dx,0), -8px) rotate(-6deg); opacity:1; }
    55%,78%{ transform:translate(var(--parcel-dx,0), 0) rotate(0deg); opacity:1; }
    100%{ transform:translate(var(--parcel-dx,0), 0) rotate(0deg); opacity:1; }
  }
  .parcel-box{ animation:parcelHandoff 6s ease-in-out infinite; }

  /* taka note floats from customer to delivery man, opposite direction */
  @keyframes takaFloat{
    0%, 48%{ transform:translate(0,0); opacity:0; }
    55%{ opacity:1; }
    72%{ transform:translate(var(--taka-dx,0), -10px); opacity:1; }
    82%, 100%{ transform:translate(var(--taka-dx,0), -10px); opacity:0; }
  }
  .taka-note{ animation:takaFloat 6s ease-in-out infinite; }

  /* success checkmark pops in at the end of the loop */
  @keyframes checkPop{
    0%, 82%{ transform:scale(0); opacity:0; }
    90%{ transform:scale(1.15); opacity:1; }
    96%, 100%{ transform:scale(1); opacity:1; }
  }
  .success-check{ animation:checkPop 6s ease-in-out infinite; transform-origin:center; }

  @keyframes softBob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
  }
  .soft-bob{ animation:softBob 3.2s ease-in-out infinite; }

  .price-tag-glow{
    animation:priceGlow 2.6s ease-in-out infinite;
  }
  @keyframes priceGlow{
    0%,100%{ box-shadow:0 10px 30px rgba(22,163,74,0.25), 0 0 0 0 rgba(255,213,79,0.35); }
    50%{ box-shadow:0 14px 40px rgba(22,163,74,0.35), 0 0 0 12px rgba(255,213,79,0); }
  }

  /* ==========================================================================
     NEW — Bangladesh delivery coverage map
     ========================================================================== */
  .bd-point{ transform-origin:center; animation:bdPulse 2.4s ease-in-out infinite; }
  @keyframes bdPulse{
    0%,100%{ transform:scale(0.85); opacity:.75; }
    50%{ transform:scale(1.25); opacity:1; }
  }
  .bd-point-ring{ transform-origin:center; animation:bdRing 2.4s ease-out infinite; }
  @keyframes bdRing{
    0%{ transform:scale(0.6); opacity:.55; }
    100%{ transform:scale(2.2); opacity:0; }
  }
  .bd-route{
    stroke-dasharray:6 8;
    animation:bdRouteFlow 2.6s linear infinite;
  }
  @keyframes bdRouteFlow{ to{ stroke-dashoffset:-140; } }

  .bd-van{
    offset-rotate:0deg;
    animation:bdVanMove 9s linear infinite;
  }
  @keyframes bdVanMove{
    0%{ offset-distance:0%; }
    100%{ offset-distance:100%; }
  }

  .bd-map-wrap{ position:relative; }
  .bd-map-glow{
    position:absolute; inset:10%;
    background:radial-gradient(circle, rgba(22,163,74,0.18), transparent 70%);
    filter:blur(30px);
    animation:softBob 5s ease-in-out infinite;
    pointer-events:none;
  }

  /* delivery-time mini cards: flowing marker along a dotted track */
  .flow-track{
    stroke-dasharray:4 7;
    animation:bdRouteFlow 2s linear infinite;
  }
  .flow-marker{
    animation:flowMarker 3.6s ease-in-out infinite;
  }
  @keyframes flowMarker{
    0%,100%{ transform:translateX(0); }
    50%{ transform:translateX(var(--flow-dx, 60px)); }
  }
  .icon-pulse{ animation:iconPulseSeq 3.6s ease-in-out infinite; }
  @keyframes iconPulseSeq{
    0%, 100%{ transform:scale(1); opacity:.55; }
    50%{ transform:scale(1.15); opacity:1; }
  }