/* ======================================================
   style.css — Complete stylesheet for YES Fashion HUB
   Replace your existing css/style.css with this file
   ====================================================== */

/* -----------------------
   GLOBAL RESET & BASE
   ----------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root{
  --accent: #0c5a34;
  --accent-2: #44c46d;
  --muted: #6b6b6b;
  --bg: #ffffff;
  --soft-green: #f3fff3;
  --wa: #25D366;
  --shadow: rgba(12,18,35,0.06);
  --card-shadow: rgba(0,0,0,0.06);
  --max-width: 1200px;
}

html,body {
  height: 100%;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* -----------------------
   CONTAINERS
   ----------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 14px;
}


/* -----------------------
   SEARCH SECTION
   ----------------------- */
#searchSection {
  padding: 12px 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  margin-bottom: 14px;
}

#searchSection .container {
  display: flex;
  align-items: center;
}

#searchBox {
  width: 100%;
  padding: 12px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--accent);
  font-size: 14px;
  outline: none;
  box-shadow: none;
}

/* -----------------------
   SHOP BY CATEGORY (Section 3)
   ----------------------- */
#shopCatSection {
  background: var(--soft-green);
  padding: 26px 0 36px;
  border-radius: 12px;
  box-shadow: 0 8px 30px var(--shadow);
  margin: 18px auto;
}

#shopCatSection .container {
  display: block;
}

#shopCatSection h2 {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--accent);
}

/* centered responsive grid - 3 per row by default */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 0 12px;
  max-width: 980px;
  margin: 0 auto;
}

.category-card {
  flex: 0 1 calc(33.333% - 18px);
  max-width: calc(33.333% - 18px);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.category-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto;
  background: #fff;
  border: 3px solid var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(12,18,35,0.12);
  transition: transform .16s ease, box-shadow .16s ease;
}

.category-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-circle .fallback {
  font-size: 22px;
  line-height: 1;
}

.category-card:hover .category-circle {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(12,18,35,0.18);
}

.category-card p {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* responsiveness: 2 per row on small screens */
/* responsiveness: 3 per row on small screens */
@media (max-width: 420px) {
  .category-card {
    flex: 0 1 calc(33.333% - 12px);
    max-width: calc(33.333% - 12px);
  }
  .category-circle { 
    width: 64px; 
    height: 64px; 
  }
  .category-card p { 
    font-size: 11px;
    white-space: normal;        /* ✅ text wrap */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* -----------------------
   SECTION TITLES
   ----------------------- */
.sectionTitle {
  font-size: 20px;
  text-align: center;
  font-weight: 800;
  margin: 26px 0 16px;
  color: var(--accent);
}

/* -----------------------
   COLLECTION BLOCKS — SECTION 4
   ----------------------- */
.collection-block {
  background: #fff;
  padding: 14px 0 22px;
  border-radius: 16px;
  width: 96%;
  margin: 0 auto 22px;
  box-shadow: 0 4px 28px var(--card-shadow);
}

.block-head {
  padding: 0 18px 10px;
}

.block-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

/* horizontal slider row with cards */
.collection-row {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 0 14px 12px;
  scroll-behavior: smooth;
}

.collection-row::-webkit-scrollbar { display: none; }

.col-card {
  min-width: 170px;
  background: #fff;
  border-radius: 12px;
  padding-bottom: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}

.col-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.col-card .meta {
  padding: 8px 10px;
}

.col-card h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111;
}

.view-btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 11px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

#liveVideoList {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;              /* ek hi line me */
    gap: 16px;
    padding: 12px 0;                /* ⬅️ side padding hata diya */
    overflow-x: auto;               /* sirf yahi scroll kare */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;               /* viewport se bahar na nikle */
    box-sizing: border-box;
}

/* scrollbar hide (clean look) */
#liveVideoList::-webkit-scrollbar {
    display: none;
}

/* Individual video card */
.live-video-card {
    flex: 0 0 auto;
    width: 220px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    scroll-snap-align: start;
}

/* iframe / video inside card */
.live-video-card iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
}

/* Optional title overlay */
.video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    color: #fff;
    padding: 6px 8px;
    font-size: 13px;
    z-index: 3;
}

/* ==== PROMO POSTER BANNER – FINAL SIZE ==== */

/* ==== PROMO POSTER BANNER – FINAL SIZE & SAFE ==== */

#promoBanner {
  position: relative;
  background: linear-gradient(135deg, #0c4b33, #1b7a57);
  color: #fff;
  text-align: center;
  padding: 30px 12px;
  overflow: hidden;
  border-radius: 12px;
}

/* Background image behind content */
.promo-bg {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 16px;
  right: 16px;

  background-size: cover;
  background-position: center;
  border-radius: 22px;
  opacity: 0.18;

  z-index: 1;            /* ✅ background layer */
  pointer-events: none;  /* ✅ clicks buttons tak jaayenge */
}

/* Desktop: thoda aur narrow */
@media (min-width: 768px) {
  .promo-bg {
    left: 28px;
    right: 28px;
    top: 18px;
    bottom: 18px;
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  .promo-bg {
    left: 40px;
    right: 40px;
  }
}

/* Inner content (text + buttons + images) */
.promo-inner {
  position: relative;
  z-index: 2;    /* ✅ hamesha background se upar */
}

.promo-title {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
}

.promo-offer {
  display: inline-block;
  background: #1ec773;
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  margin: 15px 0;
}

.promo-images {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 25px 0;
}

.promo-images img {
  width: 100px;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}

.promo-price {
  font-size: 20px;
  color: #ffd966;
  font-weight: 700;
  margin: 15px 0;
}

.promo-btn {
  display: inline-block;
  background: #ff8c2b;
  color: #fff;
  padding: 10px 25px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

/* Mobile par thoda side se chhota */
@media (max-width: 600px) {
  .promo-bg {
    left: 10%;
    right: 10%;
  }
}

/* -----------------------
   LIVE COLLECTION — SECTION 5
   ----------------------- */
#liveSec {
  padding: 20px 0 6px;
}

.slider-wrap {
  position: relative;
  width: 96%;
  margin: 0 auto;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 8px 0;
  scroll-behavior: smooth;
}

.slider-track::-webkit-scrollbar { display: none; }

.live-item {
  min-width: 68%;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-item img { width: 100%; height: 100%; object-fit: cover; }

/* arrows */
.live-arrow {
  position: absolute;
  top: 40%;
  padding: 8px 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.live-arrow.left { left: -12px; }
.live-arrow.right { right: -12px; }

/* -----------------------
   TESTIMONIALS — SECTION 6
   ----------------------- */
#testiSec { padding-bottom: 30px; position: relative; }

#testiTrack {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
}

.testi-card {
  min-width: 80%;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 4px 16px var(--card-shadow);
}

.testi-card p { color: #333; font-size: 14px; line-height: 1.45; }
.testi-author { margin-top: 8px; font-weight: 700; color: var(--muted); }

/* arrows */
.test-arrow {
  position: absolute;
  top: 40%;
  padding: 8px 12px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #eee;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.test-arrow.left { left: -12px; }
.test-arrow.right { right: -12px; }

/* -----------------------
   JOIN WHATSAPP — SECTION 7
   ----------------------- */
#joinWA {
  background: #e9ffee;
  padding: 22px 0;
  text-align: center;
}

#joinWA h2 { font-size: 20px; margin-bottom: 10px; color: var(--accent); }

.waBtn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 30px;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(12,18,35,0.08);
}

/* -----------------------
   FOLLOW US — SECTION 8
   ----------------------- */
#followSec { padding: 24px 0; background: #fff; }
#followSec h2 { text-align: center; font-size: 20px; margin-bottom: 12px; }
.socialRow { display:flex; justify-content:center; gap:16px; align-items:center; }
.sIcon img { width: 32px; height: 32px; object-fit: contain; }

.socialRow {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.sIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sIcon svg {
  width: 34px;
  height: 34px;
  display: block;
}


/* -----------------------
   ABOUT & CONTACT
   ----------------------- */
#aboutSec, #contactSec {
  padding: 22px 14px;
  text-align: center;
  color: #333;
}
#aboutSec h2, #contactSec h2 { font-size: 20px; margin-bottom: 10px; }

/* -----------------------
   FOOTER
   ----------------------- */
#footer {
  background: var(--accent);
  padding: 18px 12px;
  text-align: center;
  color: white;
  font-size: 13px;
}

/* -----------------------
   FLOATING WHATSAPP BUTTON
   ----------------------- */
.floatWA {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 9999;
}
.floatWA img { width: 30px; height: 30px; }

/* -----------------------
   UTILITIES
   ----------------------- */
.hidden { display: none !important; }
.btn { display:inline-block; padding:8px 12px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; }
.badge { padding:6px 10px; background:#eee; border-radius:8px; font-weight:700; }

/* small screens: reduce paddings */
@media (max-width: 420px) {
  .container { padding: 0 10px; }
  .sectionTitle { font-size: 18px; }
  .col-card img { height: 150px; }
}

.socialRow { display:flex; gap:16px; align-items:center; justify-content:center; }
.sIcon img, .sIcon svg { width:34px; height:34px; display:block; }
.sIcon { display:inline-flex; align-items:center; justify-content:center; }

/* ----- Modal fix for overlay & ensure centered across pages ----- */
#yfModalRoot { position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; pointer-events: none !important; }
#yfModalRoot .yf-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
#yfModalRoot .yf-modal-box {
  max-height: 90vh !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  transform: none !important; /* prevent any inherited transform effects */
}

/* ===== Modal & overlay fixes (ensure centered on all pages) ===== */
#modalRoot {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483646 !important;
  pointer-events: none !important; /* will be enabled for overlay */
}

/* modal overlay container */
#modalRoot .modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* modal inner box */
#modalRoot .modal .modal-box {
  max-width: 94%;
  width: 420px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(2,8,23,0.28);
  overflow: auto;
  padding: 14px;
  transform: none !important; /* avoid inherited transform issues */
  -webkit-transform: none !important;
}

/* small helper: ensure modal contents scroll when long */
#modalRoot .modal .modal-box::-webkit-scrollbar { height: 8px; width: 8px; }

/* Ensure modal-root appended to body won't be clipped by parent transforms */
body > #modalRoot { position: fixed; }

/* Header/cart small CSS (keeps cart button visible) */
.cart-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; width:44px; height:44px; background:transparent; }
.cart-count { position:absolute; top:-6px; right:-6px; background:#ff3b30; color:#fff; min-width:18px; height:18px; font-size:11px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; }

/* Safety: ensure big z-index for floating whatsapp (if overlaps) */
.floatWA { z-index: 2147483645; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* end of file */