/* ==========================================================================
   Timely Product Ltd. — Landing Page Stylesheet
   Design tokens: Primary Green / Primary Orange / Dark Gray / White / Light Gray
   ========================================================================== */

:root{
  --green:        #0E8F5E;
  --green-light:  #14B876;
  --green-dark:   #0B6E48;
  --orange:       #F5893A;
  --orange-dark:  #E5661A;
  --dark:         #26313C;
  --gray-mid:     #6B7A83;
  --gray-line:    #E4E9E7;
  --bg-light:     #F6F8F7;
  --white:        #FFFFFF;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-soft:  0 10px 30px rgba(14,143,94,.10);
  --shadow-card:  0 6px 20px rgba(38,49,60,.07);
  --shadow-btn:   0 8px 20px rgba(245,137,58,.35);

  --grad-hero: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 55%, var(--green-light) 100%);
  --grad-cta:  linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);

  --font-bn: 'Noto Sans Bengali', 'Hind Siliguri', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-bn);
  background: var(--bg-light);
  color: var(--dark);
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 18px; }
section{ padding: 56px 0; }
.section-bg-alt{ background: var(--white); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Section heading ---------- */
.section-eyebrow{
  display:inline-block;
  color: var(--green);
  background: rgba(14,143,94,.09);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
}
.section-title{
  font-size: 29px;
  font-weight: bold;
  color: var(--dark);
  margin: 0 0 10px;
}
.section-sub{
  color: var(--gray-mid);
  font-size: 16px;
  margin-bottom: 30px;
  max-width: 620px;
}
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- Compact footer (per redesign — no full footer grid) ---------- */
.site-footer-compact{
  background: var(--dark); color:#aebac0; text-align:center;
  padding: 14px 10px; font-size:13.5px; margin-top:20px;
}
.site-footer-compact a{ color:#cfe9df; }

/* ---------- Section CTA (scattered "order now" buttons between sections) ---------- */
.section-cta{ margin-top:30px; }
.btn-md{ padding:12px 24px; font-size:15.5px; }

/* ---------- Benefits & Features merged, bullet-list, no icons ---------- */
.bf-grid{ display:grid; gap:30px; grid-template-columns:1fr; }
@media(min-width:768px){ .bf-grid{ grid-template-columns:1fr 1fr; } }
.bf-col{ background:#fff; border-radius:var(--radius-lg); padding:26px 28px; box-shadow:var(--shadow-card); }
.bf-heading{ font-size:19.5px; font-weight:bold; color:var(--dark); margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--bg-light); }
.bullet-list{ margin:0; padding-left:0; list-style:none; }
.bullet-list li{
  position:relative; padding-left:22px; margin-bottom:12px; font-size:15.5px; color:var(--gray-mid); line-height:1.6;
}
.bullet-list li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--green);
}

/* ---------- Order form extras ---------- */
.variation-options.justify-center{ justify-content:center; }
.cod-badge{ background:rgba(14,143,94,.09); color:var(--green-dark); border:1px solid rgba(14,143,94,.25); }
.qty-control.mx-auto{ margin-left:auto; margin-right:auto; }
.d-block{ display:block; }

/* ---------- Hero ---------- */
.hero{
  background: var(--grad-hero);
  color:#fff;
  position: relative;
  overflow:hidden;
  padding: 42px 0 60px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.15), transparent 45%);
  pointer-events:none;
}
.hero-grid{
  display:grid; gap: 34px; align-items:center;
  grid-template-columns: 1fr;
}
@media(min-width: 960px){
  .hero-grid{ grid-template-columns: 1.05fr .95fr; }
}
/* Below the 960px breakpoint the hero collapses to a single column — center
   its content instead of leaving it left-aligned, which looked unbalanced
   on narrow screens. */
@media(max-width: 959px){
  .hero-grid > div:first-child{ text-align:center; }
  .badge-row, .hero-cta-row{ justify-content:center; }
  .hero-price-row{ justify-content:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
}
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: bold;
}
.badge.badge-orange{ background: var(--grad-cta); border:none; box-shadow: var(--shadow-btn); }
.hero h1{
  font-size: 32px; line-height:1.4; margin: 0 0 16px; font-weight:bold;
}
.hero p.lead{ font-size:17px; color:#e7f5ee; max-width:520px; margin-bottom:22px; }
.hero-price-row{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.price-old{ text-decoration: line-through; color:#cfe9df; font-size:19px; }
.price-new{ font-size:36px; font-weight:bold; color:#fff; }
.price-save{ background:#fff; color:var(--green-dark); padding:4px 12px; border-radius:var(--radius-pill); font-size:14px; font-weight:bold; }
.hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  border:none; font-size:16px; font-weight:bold; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-cta{ background: var(--grad-cta); color:#fff; box-shadow: var(--shadow-btn); }
.btn-outline-light{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-block{ width:100%; }

.hero-media{ position:relative; }
.hero-media .frame{
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.25);
}
.hero-media img{ border-radius: var(--radius-md); width:100%; object-fit:cover; aspect-ratio: 4/3; background:#dff2e9; }
.stock-pill{
  position:absolute; bottom:-14px; left:18px;
  background:#fff; color:var(--dark); font-size:14px; font-weight:bold;
  padding:8px 16px; border-radius:var(--radius-pill); box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap:8px;
}
.stock-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); display:inline-block; animation: pulse 1.6s infinite; }
@keyframes pulse{ 0%{opacity:1} 50%{opacity:.35} 100%{opacity:1} }

/* ---------- Problem / Solution ---------- */
.ps-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media(min-width:768px){ .ps-grid{ grid-template-columns: 1fr 1fr; } }
.ps-card{ background:#fff; border-radius: var(--radius-lg); padding:26px; box-shadow: var(--shadow-card); }
.ps-card.problem{ border-top: 4px solid var(--orange); }
.ps-card.solution{ border-top: 4px solid var(--green); }
.ps-card h3{ margin:0 0 12px; font-size:20.5px; font-weight:bold; }
.ps-card ul li{ display:flex; gap:10px; margin-bottom:10px; color:var(--gray-mid); font-size:15.5px; }
.ps-card ul li i{ color: var(--orange); margin-top:3px; }
.ps-card.solution ul li i{ color: var(--green); }

/* ---------- Feature cards (used on the multi-product catalog page) ---------- */
.grid-cards{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); }
.feature-card{
  background:#fff; border-radius: var(--radius-lg); padding:24px;
  box-shadow: var(--shadow-card); text-align:left;
  border: 1px solid var(--gray-line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.feature-card h4{ margin:0 0 8px; font-size:17px; font-weight:bold; }
.feature-card p{ margin:0; color: var(--gray-mid); font-size:15px; }

/* ---------- Specifications table ---------- */
.spec-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.spec-table tr:nth-child(even){ background: var(--bg-light); }
.spec-table td{ padding:14px 20px; font-size:15.5px; }
.spec-table td:first-child{ color: var(--gray-mid); width:40%; font-weight:bold; }
.spec-table td:last-child{ color: var(--dark); }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.gallery-item{ border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); cursor:zoom-in; background:#fff; }
.gallery-item img{ aspect-ratio:1/1; object-fit:cover; transition: transform .3s ease; }
.gallery-item:hover img{ transform: scale(1.08); }

/* ---------- Video ---------- */
.video-wrap{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); aspect-ratio:16/9; background:#000; }
.video-wrap iframe, .video-wrap video{ width:100%; height:100%; border:0; }

/* ---------- FAQ ---------- */
.faq-item{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom:12px; overflow:hidden; }
.faq-q{ padding:16px 20px; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:bold; }
.faq-q i{ color: var(--green); transition: transform .2s ease; }
.faq-item.open .faq-q i{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; padding:0 20px; color: var(--gray-mid); font-size:15px; }
.faq-item.open .faq-a{ max-height:400px; padding-bottom:16px; }

/* ---------- Order form ---------- */
.order-section{ background: var(--grad-hero); position:relative; }
.order-card{
  background:#fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft);
  max-width: 620px; margin:0 auto;
}
.order-card h3{ margin:0 0 6px; font-size:22px; font-weight:bold; color:var(--dark); }
.order-card .sub{ color: var(--gray-mid); font-size:14.5px; margin-bottom:22px; }

/* Every field in the order form uses this ONE spacing rule, so the gap
   between Name / Phone / Address / Quantity / Delivery Zone / Notes is
   always identical regardless of what kind of control is inside it. */
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:7px; font-size:14.5px; font-weight:bold; color: var(--dark); }
.form-control{
  width:100%; padding:12px 14px; border-radius: var(--radius-sm); border:1px solid var(--gray-line);
  font-family: var(--font-bn); font-size:15.5px; background: var(--bg-light);
}
.form-control:focus{ border-color: var(--green); background:#fff; }
.form-row{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:600px){ .form-row.cols-2{ grid-template-columns:1fr 1fr; } }
.variation-options{ display:flex; gap:10px; flex-wrap:wrap; }
.variation-chip{
  border:1.5px solid var(--gray-line); border-radius: var(--radius-pill); padding:10px 18px; font-size:14.5px; font-weight:bold; color:var(--dark);
  background:#fff;
}
.variation-chip input{ display:none; }
.variation-chip.selected{ border-color: var(--green); background: rgba(14,143,94,.08); color: var(--green-dark); }
.qty-control{ display:flex; align-items:center; border:1px solid var(--gray-line); border-radius: var(--radius-pill); width:fit-content; overflow:hidden; }
.qty-control button{ background: var(--bg-light); border:none; width:40px; height:40px; font-size:19px; font-weight:bold; color: var(--dark); }
.qty-control input{ width:50px; text-align:center; border:none; font-size:16px; font-weight:bold; background:#fff; }
.order-summary{ background: var(--bg-light); border-radius: var(--radius-md); padding:16px; margin:18px 0; font-size:15px; }
.order-summary .row{ display:flex; justify-content:space-between; padding:4px 0; color: var(--gray-mid); }
.order-summary .row.total{ color: var(--dark); font-size:18.5px; font-weight:bold; border-top:1px dashed var(--gray-line); margin-top:8px; padding-top:10px; }
.field-error{ color:#d9453d; font-size:13px; margin-top:4px; display:none; }
.error .form-control{ border-color:#d9453d; }
.error .field-error{ display:block; }

/* ---------- Floating buttons ---------- */
.floating-actions{ position:fixed; right:16px; bottom:92px; z-index:70; display:flex; flex-direction:column; gap:10px; }
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.fab-messenger{ background: linear-gradient(135deg,#00B2FF,#006AFF); }
.fab-whatsapp{ background: #25D366; }
.fab-call{ background: var(--grad-cta); }

/* ---------- Sticky mobile order bar ---------- */
.sticky-order-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:#fff; box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sticky-order-bar .price{ font-size:17px; font-weight:bold; color:var(--green-dark); white-space:nowrap; flex-shrink:0; }
.sticky-order-bar .price small{ display:block; color:var(--gray-mid); font-size:12px; font-weight:normal; text-decoration: line-through; }
/* This button is deliberately sized to its OWN content (not flex:1, which
   was the actual bug — it stretched the button to fill all remaining bar
   width, leaving short button text surrounded by a lot of empty space on
   both sides). justify-content:space-between on the parent bar pushes the
   price and this button to opposite ends naturally instead. */
.sticky-order-bar-btn{ flex:0 0 auto; padding:13px 26px; font-size:15.5px; white-space:nowrap; }
@media(min-width:992px){ .sticky-order-bar{ display:none; } }

/* Utility */
.mb-0{margin-bottom:0}