/***************************
  Footer Styles (footer.css)
  This file controls all footer styling.
****************************/

/* Use Open Sans for a professional look */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

body { font-family: 'Open Sans', sans-serif; }

/* Footer Wrapper */
.ks-footer {
  background-color:#f8fafc; color:#333; border-top:1px solid #eee;
  margin-top:40px; padding-top:40px;
}

/* Container (4-Column Grid) */
.ks-footer-container {
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}

/* Footer Columns common styling */
.ks-footer-col { display:flex; flex-direction:column; gap:10px; }
.ks-footer-col h3 { font-size:1.1rem; font-weight:600; margin-bottom:15px; color:#008000; }

/* Brand Section */
.footer-logo { max-width:160px; margin-bottom:15px; }
.brand-desc { font-size:.9rem; line-height:1.5; margin-bottom:15px; }

/* Download App Button */
.ks-download-app-btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:#fff; background-color:#008000; padding:10px 16px; border-radius:4px;
  font-weight:500; transition:background-color .3s;
}
.ks-download-app-btn:hover{ background-color:#006400; }

/* Quick Links & Top Categories */
.links-col ul,.categories-col ul{ list-style:none; padding:0; margin:0; }
.links-col ul li,.categories-col ul li{ margin-bottom:8px; }
.links-col ul li a,.categories-col ul li a{
  text-decoration:none; color:#333; font-size:.95rem; transition:color .3s;
}
.links-col ul li a:hover,.categories-col ul li a:hover{ color:#008000; }
.categories-col ul li i{ color:#000 !important; margin-right:6px; }

/* Follow Us */
.follow-us{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.follow-us h3{ margin-bottom:0; font-size:1.1rem; color:#008000; }
.social-list{ display:flex; gap:10px; list-style:none; margin:0; padding:0; }
.social-list li a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; font-size:1.1rem;
  transition:all .3s; color:#fff;
}
.social-list li a.facebook{ background-color:#4267B2; }
.social-list li a.instagram{ background-color:#E1306C; }
.social-list li a.twitter{ background-color:#1DA1F2; }
.social-list li a.linkedin{ background-color:#0A66C2; }
.social-list li a:hover{ filter:brightness(.9); }

/* Subscribe & Contact */
.stay-updated p{ font-size:.9rem; margin-bottom:10px; }
.ks-subscribe-form{ display:flex; flex-direction:column; gap:8px; }
.input-wrapper{ display:flex; }
.input-wrapper input[type="email"]{
  flex:1; padding:10px; border:1px solid #ccc; border-right:none;
  border-radius:4px 0 0 4px; outline:none; font-size:.95rem;
}
.input-wrapper button{
  background-color:#008000; border:none; color:#fff; padding:0 16px;
  border-radius:0 4px 4px 0; cursor:pointer; font-size:1rem; transition:background-color .3s;
}
.input-wrapper button:hover{ background-color:#006400; }

.subscribe-msg{ font-size:.85rem; color:#008000; }
.contact-info p{ font-size:.95rem; margin-bottom:6px; }
.contact-info a{ color:#333; text-decoration:none; transition:color .3s; }
.contact-info a:hover{ color:#008000; }
.contact-info i{ color:#008000; margin-right:6px; }

/* Footer Bottom */
.ks-footer-bottom{
  background-color:#008000; color:#fff; text-align:center; padding:15px 20px; margin-top:20px;
}
.ks-footer-bottom p{ font-size:.85rem; }

/* Responsive (tighten gaps on mobile) */
@media (max-width:992px){ .ks-footer-container{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .ks-footer-container{ grid-template-columns:1fr; gap:16px; }
  .ks-footer-col{ gap:8px; }
  .ks-footer-col h3{ margin-bottom:8px; }  /* tighter headings on mobile */
}

/* ============================================================
   Floating Help Widget (WhatsApp + Contact) — base styles
============================================================ */
.ksw-widget{
  position:fixed; right:18px; bottom:22px; z-index:11000;
  font-family:inherit; isolation:isolate; transform:translateZ(0); pointer-events:auto;
}
@media (max-width:768px){
  .ksw-widget{ right:calc(14px + env(safe-area-inset-right));
               bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:480px){
  .ksw-widget{ right:calc(12px + env(safe-area-inset-right));
               bottom:calc(92px + env(safe-area-inset-bottom)); }
}
.ksw-toggle{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; background:#148537; color:#fff;
  box-shadow:0 5px 12px rgba(0,0,0,.18); overflow:hidden;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.ksw-toggle:focus{ outline:3px solid rgba(20,133,55,.35); }
.ksw-widget svg{
  width:24px !important; height:24px !important;
  max-width:none !important; max-height:none !important;
  min-width:24px !important; min-height:24px !important;
  display:inline-block !important; position:static !important; float:none !important;
  color:currentColor; vertical-align:middle !important;
}
.ksw-toggle svg{ width:22px !important; height:22px !important; color:#fff; }
.ksw-widget svg path{ fill:currentColor !important; }
.ksw-panel{
  position:absolute; right:0; bottom:58px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.ksw-widget.ksw-open .ksw-panel{ opacity:1; transform:translateY(0); pointer-events:auto; }
.ksw-item{
  display:inline-flex; align-items:center; flex-wrap:nowrap;
  gap:8px; white-space:nowrap; width:auto; text-decoration:none; border-radius:999px; background:#fff;
  height:36px; padding:6px 10px 6px 6px; box-shadow:0 6px 18px rgba(0,0,0,.15); font-weight:600; color:#222; line-height:1;
}
.ksw-item:hover{ transform:translateY(-1px); }
.ksw-ico{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:0 0 26px; overflow:hidden; }
.ksw-ico svg{ width:15px !important; height:15px !important; color:#fff; }
.ksw-whatsapp .ksw-ico{ background:#25D366; }
.ksw-contact  .ksw-ico{ background:#148537; }
.ksw-item > span:last-child{ display:inline-block !important; font-size:12.5px !important; line-height:1 !important; white-space:nowrap !important; color:#222 !important; }
@media (max-width:480px){
  .ksw-item{ height:34px; }
  .ksw-ico{ width:24px; height:24px; }
  .ksw-ico svg{ width:14px !important; height:14px !important; }
  .ksw-item > span:last-child{ font-size:12px !important; }
}
@media (prefers-reduced-motion:reduce){
  .ksw-panel,.ksw-item{ transition:none !important; }
}

/* ============================================================
   Mobile accordion (Quick Links & Top Categories)
   - Smaller gaps, smooth open/close on mobile
   - Desktop stays fully open
============================================================ */
.ks-accordion .ks-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ks-accordion .ks-acc-toggle{
  display:none; background:#fff; border:1px solid #e5e7eb; color:#374151;
  width:30px; height:30px; border-radius:8px; cursor:pointer;
}
.ks-accordion .ks-acc-body{ margin:0; padding:0; overflow:visible; max-height:none; } /* desktop default */
@media (max-width:768px){
  .ks-accordion .ks-acc-toggle{ display:inline-grid; place-items:center; }
  .ks-accordion .ks-acc-head{ padding:8px 0; } /* tighter */
  .ks-accordion .ks-acc-head .fa-angle-down{ transition:transform .2s ease; }
  /* collapsed by default on mobile; JS toggles max-height inline */
  .ks-accordion .ks-acc-body{ overflow:hidden; max-height:0; }
  .ks-accordion.open .ks-acc-head .fa-angle-down{ transform:rotate(180deg); }
}

/* ============================================================
   Bottom Navigation (mobile) – premium look
============================================================ */
.ks-only-mobile{ display:none; }
@media (max-width:768px){ .ks-only-mobile{ display:block; } }

.ks-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; height:62px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid #e5e7eb;
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
  display:none; z-index:10500;
  grid-template-columns:repeat(4,1fr); align-items:center;
}
.ks-bottom-nav .ks-bnav-item{
  appearance:none; background:none; border:none; cursor:pointer;
  height:62px; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; position:relative;
  font-size:12px; color:#4b5563; text-decoration:none; letter-spacing:.2px;
}
.ks-bottom-nav .ks-bnav-item i{ font-size:22px; line-height:1; position:relative; z-index:1; }
.ks-bottom-nav .ks-bnav-item span{ position:relative; z-index:1; }

/* Active: brand color + soft circular pill behind icon */
.ks-bottom-nav .ks-bnav-item.active{ color:#148537; font-weight:600; }
.ks-bottom-nav .ks-bnav-item.active i{ color:#148537; }
.ks-bottom-nav .ks-bnav-item.active::before{
  content:""; position:absolute; top:8px; width:40px; height:40px;
  border-radius:50%; background:rgba(20,133,55,.12);
  box-shadow:0 2px 10px rgba(20,133,55,.18);
  z-index:0;
}

/* Cart badge */
.ks-bnav-badge{
  position:absolute; top:6px; right:26%;
  min-width:16px; height:16px; border-radius:10px; padding:0 4px;
  background:#ef4444; color:#fff; font-style:normal; font-size:11px;
  display:inline-grid; place-items:center; line-height:1;
}

/* Show on mobile + give page bottom spacing so nothing hides behind it */
@media (max-width:768px){
  .ks-bottom-nav{ display:grid; }
  body.has-bottom-nav{ padding-bottom: 82px; } /* space for strip + safe area */
}

/* Hide the green copyright strip on mobile */
@media (max-width:768px){
  .ks-footer-bottom{ display:none; }
}

/* With bottom nav, bring the widget closer (no overlap, lower than before) */
body.has-bottom-nav #ksw-widget{
  bottom: calc(66px + env(safe-area-inset-bottom)) !important;
}