/* =========================================================
   Aquila Innovations - Seeds & Saplings Store
   Light theme, mobile-first. Colors driven by CSS variables
   which are set inline via includes/header.php from admin settings.
   ========================================================= */

:root{
  --primary:#3f8f4f;
  --secondary:#f2a900;
  --bg:#f7fbf5;
  --text:#20301f;
  --header-bg:#ffffff;
  --card-bg:#ffffff;
  --border:#e3ede0;
}

*{ box-sizing:border-box; }

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:70px;
}

a{ text-decoration:none; }

/* ---------- Header ---------- */
.topbar{ background:var(--primary); color:#fff; }
.main-nav{ background:var(--header-bg); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.brand-icon{
  width:42px;height:42px;border-radius:50%;
  background:var(--primary); color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.brand-text{ font-weight:700; font-size:1.25rem; color:var(--text); }
.search-box{ border:1px solid var(--border); border-radius:8px 0 0 8px; }
.btn-search{ background:var(--primary); color:#fff; border-radius:0 8px 8px 0; border:1px solid var(--primary); }
.nav-link{ color:var(--text) !important; font-weight:500; }
.cart-link{ position:relative; }
.cart-badge{ background:var(--secondary); color:#fff; font-size:.65rem; margin-left:4px; }

/* ---------- Hero / Banner ---------- */
.hero-banner{ border-radius:16px; overflow:hidden; }
.hero-banner img{ width:100%; height:auto; object-fit:cover; }
.hero-slide-caption{
  position:absolute; bottom:20px; left:20px; background:rgba(255,255,255,.9);
  padding:10px 18px; border-radius:10px; font-weight:600; color:var(--text);
}

/* ---------- Section Titles ---------- */
.section-title{ font-weight:700; color:var(--text); border-left:5px solid var(--primary); padding-left:12px; margin-bottom:1.25rem; }

/* ---------- Category Cards ---------- */
.category-card{
  background:var(--card-bg); border-radius:14px; text-align:center; padding:18px 10px;
  border:1px solid var(--border); transition:.2s; height:100%; color:var(--text);
}
.category-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08); border-color:var(--primary); }
.category-card img{ width:70px; height:70px; object-fit:cover; border-radius:50%; margin-bottom:10px; }
.category-card .cat-icon{
  width:70px;height:70px;border-radius:50%; background:var(--bg); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 10px;
}

/* ---------- Product Cards ---------- */
.product-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden;
  height:100%; display:flex; flex-direction:column; transition:.2s; position:relative;
}
.product-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.09); transform:translateY(-3px); }
.product-img-wrap{ background:#f0f5ee; height:170px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.product-body{ padding:12px 14px; display:flex; flex-direction:column; flex-grow:1; }
.product-title{ font-weight:600; font-size:.95rem; color:var(--text); margin-bottom:4px; min-height:2.4em; }
.badge-organic{ background:#e8f5e9; color:#2e7d32; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:20px; }
.badge-normal{ background:#eef2ff; color:#3949ab; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:20px; }
.badge-stock-low{ background:#fff3e0; color:#e65100; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:20px; }
.badge-out{ background:#ffebee; color:#c62828; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:20px; }
.price-current{ font-weight:700; color:var(--primary); font-size:1.05rem; }
.price-old{ text-decoration:line-through; color:#999; font-size:.85rem; margin-left:6px; }
.btn-add-cart{
  background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; border-radius:8px;
}
.btn-add-cart:hover{ background:#357a41; border-color:#357a41; color:#fff; }
.btn-outline-brand{ border:1.5px solid var(--primary); color:var(--primary); font-weight:600; border-radius:8px; }
.btn-outline-brand:hover{ background:var(--primary); color:#fff; }
.btn-brand-secondary{ background:var(--secondary); border-color:var(--secondary); color:#fff; font-weight:600; border-radius:8px; }

/* ---------- Filters ---------- */
.filter-chip{
  display:inline-block; padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  font-size:.85rem; margin:3px; cursor:pointer; color:var(--text); background:#fff;
}
.filter-chip.active, .filter-chip:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---------- Cart Page ---------- */
.cart-item{ background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px; }
.cart-item img{ width:75px; height:75px; object-fit:cover; border-radius:8px; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; width:fit-content; }
.qty-control button{ border:none; background:#f2f5f0; width:32px; height:32px; font-weight:700; color:var(--text); }
.qty-control input{ width:42px; text-align:center; border:none; }
.cart-summary{ background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:18px; position:sticky; top:20px; }

/* ---------- Checkout / OTP ---------- */
.checkout-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:20px; }
.otp-input{ letter-spacing:8px; font-size:1.4rem; text-align:center; font-weight:700; }

/* ---------- Steps ---------- */
.step-indicator{ display:flex; justify-content:space-between; margin-bottom:24px; }
.step-indicator .step{ flex:1; text-align:center; font-size:.8rem; color:#aaa; position:relative; }
.step-indicator .step.active{ color:var(--primary); font-weight:700; }
.step-indicator .step .circle{
  width:28px;height:28px;border-radius:50%;background:#e5e5e5;color:#fff;display:flex;
  align-items:center;justify-content:center;margin:0 auto 6px;font-size:.8rem;font-weight:700;
}
.step-indicator .step.active .circle, .step-indicator .step.done .circle{ background:var(--primary); }

/* ---------- Order Success ---------- */
.success-icon{ font-size:70px; color:var(--primary); }

/* ---------- Footer ---------- */
.site-footer{ background:#eef4ec; border-top:1px solid var(--border); }
.footer-brand{ color:var(--primary); font-weight:700; }
.footer-heading{ font-weight:600; color:var(--text); }
.footer-link{ color:var(--text); }
.footer-link:hover{ color:var(--primary); }
.social-icon{ display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; align-items:center; justify-content:center; }
.footer-hr{ border-color:var(--border); }

/* ---------- Mobile Cart FAB ---------- */
.mobile-cart-fab{
  position:fixed; bottom:16px; right:16px; background:var(--primary); color:#fff;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:999;
}
.mobile-cart-fab .cart-badge{ position:absolute; top:-2px; right:-2px; }

/* ---------- Toast ---------- */
#toastBox{ position:fixed; top:16px; right:16px; z-index:2000; }

/* ---------- Responsive ---------- */
@media (max-width: 767px){
  .brand-text{ font-size:1.05rem; }
  .product-img-wrap{ height:130px; }
  .cart-summary{ position:static; }
}