/* =============================================================
   lbsouq.com — marketplace storefront design system (bilingual, RTL+LTR)
   Neutral base palette (trustworthy blue + amber accent) for home/cart/
   checkout/store pages. Category browse + product pages override
   --lb-section-* via an inline <style> block emitted through $addedMetas
   (see Assets/Classes/UTIL.php::themeStyleBlock() and Views/part/head.php)
   so each section (Kids/Plants/Furniture/...) gets its own look.
   IMPORTANT: the page background is declared on body ONLY (never also on
   html) — see the comment on body{} below for why.
   ============================================================= */

:root{
  --lb-default-primary:   #1B6FA8;
  --lb-default-secondary: #F0A202;
  --lb-default-bg:        #F7F9FB;
  --lb-default-text:      #1A1A2E;

  --lb-white:   #FFFFFF;
  --lb-sand:    #E4E9EF;
  --lb-ink-soft:#6B7280;
  --lb-green:   #2E7D32;
  --lb-red:     #C0392B;
  --lb-radius:    16px;
  --lb-radius-sm: 10px;
  --lb-shadow:    0 4px 18px rgba(26,26,46,.08);
  --lb-shadow-lg: 0 14px 40px rgba(26,26,46,.14);
  --lb-font-head: 'Cairo', sans-serif;
  --lb-font-body: 'Tajawal', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  color:var(--lb-default-text);
  font-family:var(--lb-font-body);
  font-size:16px;
  line-height:1.75;
}
/* Background lives on body ONLY. Declaring the same background on both
   html and body makes body's own copy paint AFTER any z-index:-1
   decorative layer (an element's own background always paints as part
   of its own box, never as "canvas," unless it's the only place a
   background is declared) — a real bug hit on a sibling project. Themed
   pages override --lb-section-bg via an inline <style> in <head>; this
   rule then just needs the CSS custom property to pick it up. */
body{
  background: var(--lb-section-bg, var(--lb-default-bg));
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,h4,h5,h6{ font-family:var(--lb-font-head); color:var(--lb-default-text); font-weight:700; line-height:1.35; }
a{ color:var(--lb-section-primary, var(--lb-default-primary)); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--lb-section-secondary, var(--lb-default-secondary)); }
::selection{ background:var(--lb-section-primary, var(--lb-default-primary)); color:#fff; }

/* ---------------- Decorative section layer (particles/pattern) ---------------- */
.lb-particles{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.lb-p-dot{ position:absolute; border-radius:50%; background:var(--lb-section-primary, var(--lb-default-primary)); opacity:.16; filter:blur(1.5px); animation:lbDrift ease-in-out infinite; }
@keyframes lbDrift{ 0%,100%{ transform:translateY(0) translateX(0) rotate(0deg); } 50%{ transform:translateY(-26px) translateX(14px) rotate(150deg); } }
@media (prefers-reduced-motion: reduce){ .lb-particles{ display:none; } *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* ---------------- Buttons ---------------- */
.lb-btn, button.lb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--lb-section-primary, var(--lb-default-primary)); color:#fff;
  border:1px solid var(--lb-section-primary, var(--lb-default-primary));
  border-radius:999px; padding:.7rem 1.7rem;
  font-family:var(--lb-font-head); font-weight:700; font-size:.95rem;
  transition:transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.lb-btn:hover{ opacity:.9; color:#fff; transform:translateY(-2px); box-shadow:var(--lb-shadow-lg); }
.lb-btn:active{ transform:scale(.97); }
.lb-btn-accent{ background:var(--lb-section-secondary, var(--lb-default-secondary)); border-color:var(--lb-section-secondary, var(--lb-default-secondary)); }
.lb-btn-outline{ background:transparent; color:var(--lb-section-primary, var(--lb-default-primary)); border:1.5px solid var(--lb-section-primary, var(--lb-default-primary)); }
.lb-btn-outline:hover{ background:var(--lb-section-primary, var(--lb-default-primary)); color:#fff; }
.lb-btn-sm{ padding:.45rem 1.1rem; font-size:.85rem; }
.lb-btn-block{ width:100%; }
.lb-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.lb-btn-whatsapp{ background:#25A55C; border-color:#25A55C; }

/* ---------------- Header ---------------- */
.lb-topbar{ background:var(--lb-default-text); color:#cfd3da; font-size:.82rem; }
.lb-topbar a{ color:#cfd3da; }
.lb-topbar a:hover{ color:#fff; }
.lb-topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; flex-wrap:wrap; gap:.5rem; }
.lb-topbar-links{ display:flex; align-items:center; gap:1rem; }
.lb-lang-switch{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; }
.lb-lang-switch a{ opacity:.65; }
.lb-lang-switch a.active{ opacity:1; color:var(--lb-default-secondary); }

.lb-navbar{
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  padding:.7rem 0; border-bottom:1px solid var(--lb-sand);
  position:sticky; top:0; z-index:1030;
}
.lb-brand img{ height:48px; border-radius:10px; }
.lb-nav-links .nav-link{ color:var(--lb-default-text); font-family:var(--lb-font-head); font-weight:700; padding:.5rem 1rem; }
.lb-nav-links .nav-link:hover{ color:var(--lb-default-primary); }
.dropdown-menu{ border:1px solid var(--lb-sand); border-radius:var(--lb-radius-sm); box-shadow:var(--lb-shadow-lg); padding:.5rem; }
.dropdown-item{ border-radius:8px; padding:.5rem .9rem; font-weight:500; }
.dropdown-item:hover{ background:var(--lb-default-bg); }

.lb-search-wrap{ position:relative; margin-inline-end:1rem; }
.lb-search{ display:flex; align-items:center; }
.lb-search input{
  border:1px solid var(--lb-sand); background:var(--lb-white);
  border-start-start-radius:999px; border-end-start-radius:999px; border-inline-end:none; padding-inline-start:1.1rem; min-width:240px;
}
.lb-search input:focus{ border-color:var(--lb-default-primary); box-shadow:none; }
.lb-search button{ border:1px solid var(--lb-default-primary); background:var(--lb-default-primary); color:#fff; border-start-end-radius:999px; border-end-end-radius:999px; padding:0 1.1rem; }
.lb-search-results{
  display:none; position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:1040;
  background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius-sm);
  box-shadow:var(--lb-shadow-lg); max-height:420px; overflow-y:auto;
}
.lb-search-results.show{ display:block; }
.lb-search-result{ display:flex; gap:.7rem; align-items:center; padding:.6rem .9rem; border-bottom:1px solid var(--lb-default-bg); color:var(--lb-default-text); }
.lb-search-result:last-child{ border-bottom:none; }
.lb-search-result:hover{ background:var(--lb-default-bg); }
.lb-search-result img{ width:44px; height:44px; object-fit:cover; border-radius:8px; flex:0 0 44px; }
.lb-search-result-noimg{ width:44px; height:44px; flex:0 0 44px; border-radius:8px; background:var(--lb-sand); display:flex; align-items:center; justify-content:center; color:var(--lb-ink-soft); }
.lb-search-result-body{ display:flex; flex-direction:column; gap:.15rem; overflow:hidden; }
.lb-search-result-body strong{ font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-search-result-body small{ color:var(--lb-ink-soft); font-size:.76rem; }
.lb-search-empty{ padding:1rem; color:var(--lb-ink-soft); text-align:center; font-size:.85rem; }

.lb-cart-link{ position:relative; font-size:1.3rem; color:var(--lb-default-text); padding:.3rem .5rem; }
.lb-cart-badge{
  position:absolute; top:-4px; inset-inline-start:-6px; background:var(--lb-default-secondary); color:#fff;
  font-size:.65rem; font-weight:700; border-radius:50%; min-width:19px; height:19px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------------- Hero banner (home page, neutral) ---------------- */
.lb-hero-banner{ margin:1.75rem 0; }
.lb-hero-banner img{
  width:100%; display:block; border-radius:var(--lb-radius);
  box-shadow:var(--lb-shadow-lg);
}
.lb-hero-banner-cta{ display:flex; gap:1rem; justify-content:center; margin-top:1.25rem; flex-wrap:wrap; }

/* ---------------- Sections ---------------- */
.lb-section{ padding:2.5rem 0; }
.lb-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.lb-section-head h2{ font-size:1.5rem; margin:0; font-weight:800; }
.lb-section-head a{ font-weight:700; font-family:var(--lb-font-head); white-space:nowrap; color:var(--lb-section-primary, var(--lb-default-primary)); }

/* ---------------- Section (category) cards on home/browse ---------------- */
.lb-category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.lb-category-card{
  background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius);
  text-align:center; padding:1.5rem 1rem; display:block; color:var(--lb-default-text);
  font-family:var(--lb-font-head); font-weight:700; transition:box-shadow .18s ease, transform .18s ease;
}
.lb-category-card:hover{ box-shadow:var(--lb-shadow-lg); transform:translateY(-4px); color:var(--lb-default-text); }
.lb-category-card .lb-cat-swatch{ width:52px; height:52px; border-radius:50%; margin:0 auto .8rem; }

/* ---------------- Product grid / cards ---------------- */
.lb-product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; }
.lb-product-card{
  background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease;
}
.lb-product-card:hover{ box-shadow:var(--lb-shadow-lg); transform:translateY(-4px); }
.lb-product-card-media{ position:relative; display:block; aspect-ratio:1/1; background:var(--lb-default-bg); overflow:hidden; }
.lb-product-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.lb-product-card:hover .lb-product-card-media img{ transform:scale(1.05); }
.lb-product-card-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--lb-sand); font-size:2.4rem; }
.lb-product-card-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.lb-product-card-title{ font-family:var(--lb-font-head); font-weight:700; color:var(--lb-default-text); font-size:.95rem; line-height:1.5; }
.lb-product-card-shop{ font-size:.78rem; color:var(--lb-ink-soft); }
.lb-product-card-shop:hover{ color:var(--lb-section-primary, var(--lb-default-primary)); }
.lb-product-card-price{ margin-top:auto; }
.lb-price-now{ font-weight:800; color:var(--lb-section-primary, var(--lb-default-primary)); font-size:1.05rem; }

.lb-badge{ position:absolute; top:.6rem; inset-inline-start:.6rem; padding:.22rem .65rem; border-radius:999px; font-size:.7rem; font-weight:700; color:#fff; }
.lb-badge-featured{ background:var(--lb-default-secondary); }
.lb-badge-oos{ background:var(--lb-red); top:auto; bottom:.6rem; inset-inline-start:.6rem; }

/* ---------------- Breadcrumbs ---------------- */
.lb-breadcrumb{ font-size:.85rem; color:var(--lb-ink-soft); margin-bottom:1.25rem; }
.lb-breadcrumb a{ color:var(--lb-ink-soft); }
.lb-breadcrumb a:hover{ color:var(--lb-default-text); }

/* ---------------- Browse / filters ---------------- */
.lb-browse-layout{ display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:start; }
.lb-filters{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:1.3rem; position:sticky; top:92px; }
.lb-filters h6{ font-weight:800; margin:1.1rem 0 .5rem; font-size:.78rem; color:var(--lb-ink-soft); font-family:var(--lb-font-head); }
.lb-filters h6:first-child{ margin-top:0; }
.lb-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; flex-wrap:wrap; gap:.75rem; background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius-sm); padding:.65rem 1rem; }
.lb-empty-state{ text-align:center; padding:3.5rem 1rem; color:var(--lb-ink-soft); }
.lb-empty-state i{ font-size:2.6rem; color:var(--lb-sand); margin-bottom:1rem; display:block; }

/* ---------------- Product detail ---------------- */
.lb-product-gallery-main{ border:1px solid var(--lb-sand); border-radius:var(--lb-radius); overflow:hidden; background:var(--lb-white); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.lb-product-gallery-main img, .lb-product-gallery-main video{ width:100%; height:100%; object-fit:cover; }
.lb-product-gallery-thumbs{ display:flex; gap:.6rem; margin-top:.7rem; flex-wrap:wrap; }
.lb-product-gallery-thumbs img, .lb-thumb-video{ width:68px; height:68px; object-fit:cover; border-radius:var(--lb-radius-sm); border:2px solid transparent; cursor:pointer; }
.lb-product-gallery-thumbs img.active, .lb-thumb-video.active{ border-color:var(--lb-section-primary, var(--lb-default-primary)); }
.lb-thumb-video{ background:var(--lb-default-text); color:#fff; display:flex; align-items:center; justify-content:center; }

.lb-product-title{ font-size:1.7rem; margin-bottom:.3rem; font-weight:800; }
.lb-product-shop-link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--lb-ink-soft); margin-bottom:1rem; font-weight:600; }
.lb-product-shop-link:hover{ color:var(--lb-section-primary, var(--lb-default-primary)); }
.lb-product-price{ font-size:1.5rem; font-weight:800; color:var(--lb-section-primary, var(--lb-default-primary)); margin-bottom:.25rem; font-family:var(--lb-font-head); }
.lb-stock{ font-weight:700; font-size:.88rem; margin-bottom:1.1rem; }
.lb-stock.in{ color:var(--lb-green); }
.lb-stock.low{ color:var(--lb-default-secondary); }
.lb-stock.out{ color:var(--lb-red); }

.lb-qty-input{ display:flex; align-items:center; border:1.5px solid var(--lb-sand); border-radius:999px; width:fit-content; overflow:hidden; background:var(--lb-white); }
.lb-qty-input button{ background:none; border:none; width:38px; height:42px; font-size:1.1rem; }
.lb-qty-input button:hover{ background:var(--lb-default-bg); }
.lb-qty-input input{ width:48px; border:none; text-align:center; font-weight:700; background:transparent; }
.lb-qty-input input:focus{ outline:none; }

.lb-tabs{ margin-top:2.5rem; border-bottom:1px solid var(--lb-sand); }
.lb-tabs .nav-link{ color:var(--lb-default-text); font-weight:700; font-family:var(--lb-font-head); border:none; border-bottom:2.5px solid transparent; border-radius:0; background:none; }
.lb-tabs .nav-link.active{ color:var(--lb-section-primary, var(--lb-default-primary)); border-bottom-color:var(--lb-section-primary, var(--lb-default-primary)); background:none; }
.lb-tab-content-body{ padding:1.4rem 0; }
.lb-report-link{ font-size:.82rem; color:var(--lb-ink-soft); }
.lb-report-link:hover{ color:var(--lb-red); }

/* ---------------- Store profile page ---------------- */
.lb-store-header{ display:flex; gap:1.5rem; align-items:center; background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:1.75rem; margin:1.5rem 0; flex-wrap:wrap; }
.lb-store-logo{ width:96px; height:96px; border-radius:16px; object-fit:cover; border:1px solid var(--lb-sand); flex:0 0 96px; }
.lb-store-logo-placeholder{ width:96px; height:96px; border-radius:16px; background:var(--lb-default-bg); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--lb-sand); flex:0 0 96px; }
.lb-store-meta h1{ font-size:1.5rem; margin-bottom:.3rem; }
.lb-store-meta-row{ display:flex; gap:1.2rem; flex-wrap:wrap; color:var(--lb-ink-soft); font-size:.9rem; }

/* ---------------- Cart / checkout ---------------- */
.lb-cart-shop-group{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); margin-bottom:1.25rem; overflow:hidden; }
.lb-cart-shop-group h5{ background:var(--lb-default-bg); padding:.8rem 1.1rem; margin:0; font-size:.95rem; display:flex; align-items:center; gap:.5rem; }
.lb-cart-table{ width:100%; border-collapse:collapse; }
.lb-cart-table th{ text-align:start; font-size:.76rem; color:var(--lb-ink-soft); padding:.7rem .9rem; border-bottom:1px solid var(--lb-sand); }
.lb-cart-table td{ padding:.85rem .9rem; border-bottom:1px solid var(--lb-default-bg); vertical-align:middle; }
.lb-cart-table tr:last-child td{ border-bottom:none; }
.lb-cart-item-media{ width:56px; height:56px; object-fit:cover; border-radius:var(--lb-radius-sm); }
.lb-cart-summary{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:1.5rem; box-shadow:var(--lb-shadow); }
.lb-cart-summary-row{ display:flex; justify-content:space-between; padding:.35rem 0; gap:1rem; }
.lb-cart-summary-row.total{ font-weight:800; font-size:1.1rem; border-top:1.5px dashed var(--lb-sand); margin-top:.5rem; padding-top:.8rem; color:var(--lb-default-primary); }
.lb-cart-note{ font-size:.8rem; color:var(--lb-ink-soft); margin-top:.5rem; }

.lb-form label{ font-weight:700; margin-bottom:.3rem; font-size:.88rem; font-family:var(--lb-font-head); }
.lb-form .form-control{ border-color:var(--lb-sand); border-radius:var(--lb-radius-sm); padding:.6rem .9rem; background:var(--lb-white); }
.lb-form .form-control:focus{ border-color:var(--lb-default-primary); box-shadow:0 0 0 .2rem rgba(27,111,168,.12); }
.lb-order-confirm{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:1.5rem; margin-bottom:1rem; }

/* ---------------- Static content pages ---------------- */
.lb-content-page h1{ margin-bottom:1.4rem; font-weight:800; }
.lb-content-page h2{ font-size:1.25rem; margin-top:1.8rem; font-weight:800; }
.lb-faq-item{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:1.2rem 1.4rem; margin-bottom:1rem; }
.lb-faq-item h3{ font-size:1rem; margin:0 0 .4rem; font-weight:800; color:var(--lb-default-primary); }

/* ---------------- Auth / seller apply (admin-adjacent, stays Arabic/RTL) ---------------- */
.lb-auth-card{ background:var(--lb-white); border:1px solid var(--lb-sand); border-radius:var(--lb-radius); padding:2rem; box-shadow:var(--lb-shadow); }

/* ---------------- Footer ---------------- */
.lb-footer{ background:var(--lb-default-text); color:#c7cad3; margin-top:3.5rem; }
.lb-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; padding:2.75rem 0 1.75rem; }
.lb-footer-logo{ height:40px; border-radius:8px; margin-bottom:.9rem; background:#fff; padding:2px; }
.lb-footer-col h6{ color:#fff; font-size:.9rem; margin-bottom:.9rem; font-family:var(--lb-font-head); font-weight:800; }
.lb-footer-col ul{ list-style:none; padding:0; margin:0; }
.lb-footer-col li{ margin-bottom:.55rem; }
.lb-footer-col a{ color:#c7cad3; }
.lb-footer-col a:hover{ color:#fff; }
.lb-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:.9rem 0; font-size:.78rem; text-align:center; color:#8f95a3; }

/* ---------------- Responsive ---------------- */
@media (max-width:991px){
  .lb-browse-layout{ grid-template-columns:1fr; }
  .lb-filters{ position:static; }
  .lb-footer-grid{ grid-template-columns:1fr 1fr; }
  .lb-section{ padding:1.75rem 0; }
}
@media (max-width:576px){
  .lb-footer-grid{ grid-template-columns:1fr; }
  .lb-hero-banner-cta{ flex-direction:column; align-items:stretch; }
  .lb-product-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
  .lb-topbar-inner{ justify-content:center; text-align:center; }
  .lb-store-header{ text-align:center; justify-content:center; }
}
