/* Dar AlWaqar — Storefront Beige Theme (FINAL CLEAN) */

/* ========= Root & Base ========= */
:root{
  --bg:#f5efe6;
  --bg-2:#fbf8f3;
  --card:#ffffff;
  --text:#1f1b16;
  --muted:#7a6f60;

  --border:#e8dfd3;
  --accent:#b88941;
  --accent-600:#9b7435;
  --accent-100:#f3e6d2;
  --ring:#b88941;

  --shadow:0 8px 24px rgba(27,19,8,.08);

  /* Inputs */
  --input-h:48px;
  --input-radius:12px;
  --input-bg:#fff;
  --input-br: var(--border);
  --input-ph:#9b8f80;
  --focus-ring: 0 0 0 4px rgba(184,137,65,.18);

  /* Icons */
  --icon: var(--text);
  --icon-muted: #9a8b78;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
/* عند تفعيل البنر – الخلفية تتطبّق على html مباشرة */
html.has-hero{
  background:
    linear-gradient(180deg,
      rgba(245,239,230,.60) 0%,
      rgba(245,239,230,.80) 55%,
      rgba(245,239,230,.92) 100%),
    var(--hero-img) center/cover no-repeat fixed;
}
body{
  background:transparent; /* حتى تظهر خلفية html */
  color:var(--text);
  font-family:'Kufam','Tajawal',system-ui,Segoe UI,Roboto,'Noto Sans Arabic',sans-serif;
  margin:0;
}
a{color:var(--text);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.py{padding:16px 0}

/* ========= Header ========= */
.site-header-pro.full{
  position:sticky;top:0;z-index:60;width:100%;
  background:linear-gradient(180deg,#fff 0%, var(--bg-2) 100%);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 24px rgba(184,137,65,.10);
}
.site-header-pro .nav{display:flex;align-items:center;gap:14px;padding:12px 0}
.site-header-pro .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text)}
.site-header-pro .brand .logo{height:34px;width:auto;object-fit:contain}
.site-header-pro .brand .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.site-header-pro .nav-links{display:flex;gap:8px;align-items:center}
.site-header-pro .nav-links .link{padding:10px 12px;border-radius:12px}
.site-header-pro .nav-links .link:hover{background:var(--accent-100)}
.site-header-pro .nav-links .link.active{background:var(--accent-100);border:1px solid var(--accent);color:var(--text);font-weight:800}

/* Dropdown (الأقسام) */
.site-header-pro .nav .dropdown{position:relative}
.site-header-pro .nav .dropdown-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;color:var(--text);cursor:pointer;
  padding:6px 10px;border-radius:10px;font:inherit
}
.site-header-pro .nav .dropdown-toggle:hover{background:rgba(0,0,0,.04)}
.site-header-pro .nav .dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:8px;display:none;z-index:60;box-shadow:0 10px 22px rgba(0,0,0,.12)
}
.site-header-pro .nav .dropdown.show .dropdown-menu{display:block}
.site-header-pro .nav .dropdown-menu a{
  display:block;padding:8px 10px;border-radius:8px;color:var(--text)
}
.site-header-pro .nav .dropdown-menu a:hover{background:var(--accent-100)}

.site-header-pro .search{
  flex:1;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:8px 12px
}
.site-header-pro .search input{all:unset;flex:1;color:var(--text)}
.site-header-pro .btn.cart{white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.site-header-pro .btn.cart .badge{
  background:#fff;color:var(--accent);border:1px solid var(--accent);
  padding:2px 8px;border-radius:999px;font-weight:900
}
.nav-toggle{
  display:none;border:1px solid var(--border);background:#fff;
  border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--text)
}

/* ========= Buttons / Badges / Alerts ========= */
.btn{
  padding:10px 14px;
  border-radius:12px;
  background:var(--accent);
  color: #9b7435;
  font-weight:700;
  border:1px solid var(--accent-600);
  cursor:pointer;
}
.btn:hover{background:var(--accent-600)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.small{padding:8px 10px;font-size:.92rem;border-radius:10px}
.btn.outline{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.outline:hover{background:var(--accent-100)}
.btn.block{width:100%} .btn.wide{min-width:180px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,var(--accent-100),#fff);
  border:1px solid var(--border);color:var(--text);
  padding:6px 10px;border-radius:999px;font-weight:700
}
.alert{border:1px solid var(--border);background:#fff;padding:10px;border-radius:10px}
.alert-danger{border-color:#f2c0c0;background:#fff8f8}
.alert-success{border-color:#c9e5c9;background:#f6fff6}

/* ========= Icons ========= */
svg, .icon, [class^="fa-"], [class*=" fa-"], .feather{ color:var(--icon); fill:currentColor; stroke:currentColor; }
svg [fill="#000"], svg [fill="#000000"], svg [fill="#111"], svg [fill="#222"]{ fill: currentColor !important; }
svg [stroke="#000"], svg [stroke="#000000"], svg [stroke="#111"], svg [stroke="#222"]{ stroke: currentColor !important; }
.muted{color:var(--muted)} .muted svg, .muted .icon{ color: var(--icon-muted); }

/* ========= Inputs / Forms ========= */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="number"],select,textarea,.pill{
  appearance:none; -webkit-appearance:none;
  height:var(--input-h); width:100%;
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-br); border-radius:var(--input-radius);
  padding:10px 14px; line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.02); transition:.15s ease;
}
textarea{min-height:120px; resize:vertical}
input::placeholder,textarea::placeholder{ color:var(--input-ph); }
input:hover,select:hover,textarea:hover,.pill:hover{ border-color:#d9cdbd; }
input:focus,select:focus,textarea:focus,.pill:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--focus-ring);
}
input[type="radio"], input[type="checkbox"]{ accent-color: var(--accent); }
.field-sm{--input-h:40px} .field-lg{--input-h:56px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.form-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){.form-cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.form-cols-3{grid-template-columns:1fr}}

.auth-card{
  max-width:460px;margin:24px auto;padding:18px;border-radius:16px;
  background:rgba(255,255,255,.90); backdrop-filter:blur(6px);
  border:1px solid var(--border); box-shadow:var(--shadow)
}
.auth-title{margin:0 0 10px;font-weight:900;text-align:center}

/* ========= Cards & Product Grid ========= */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.product-card .thumb{height:220px;display:flex;align-items:center;justify-content:center;background:var(--bg-2)}
.product-card .thumb img{height:100%;width:100%;object-fit:cover}
.product-card .meta{padding:10px;display:flex;flex-direction:column;gap:6px}
.product-card .price{font-weight:800}

/* ========= Catalog Tabs / Chips ========= */
.chip{white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--text);padding:8px 12px;border-radius:999px}
.chip:hover{background:var(--accent-100)}
.tabs{margin:6px 0 10px}
.tabs-track{display:flex;gap:8px;overflow:auto;scrollbar-width:none}
.tabs-track::-webkit-scrollbar{display:none}
.tab{background:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:999px;cursor:pointer;font-family: 'Kufam';}
.tab.active{background:var(--accent-100);border-color:var(--accent)}

/* ========= Hero carousel ========= */
#carousel{--h:360px}
#carousel .track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
#carousel .slide{min-width:100%;height:var(--h);position:relative;background:var(--bg-2)}
#carousel img{width:100%;height:100%;object-fit:cover}
#carousel .cap{
  position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);padding:14px 16px;border-radius:12px;border:1px solid var(--border)
}
#carousel .prev,#carousel .next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 12px;color:var(--text)
}
#carousel .prev{left:12px}#carousel .next{right:12px}

/* ========= Horizontal featured list ========= */
.hcaro{position:relative}
.hcaro .htrack{display:flex;gap:12px;overflow:hidden;scroll-behavior:smooth}
.hcaro .htrack > *{flex:0 0 240px}
.hcaro .hbtn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 12px;cursor:pointer;z-index:2
}
.hcaro .prev{left:8px}.hcaro .next{right:8px}

/* ========= Tables (Summary lists) ========= */
.table{
  width:100%; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow)
}
.table thead th{
  background:var(--bg-2); color:var(--text); text-align:right; padding:12px;
  font-weight:800; border-bottom:1px solid var(--border)
}
.table td{padding:12px;border-bottom:1px solid var(--border)}
.table tr:last-child td{border-bottom:0}

/* ========= Footer ========= */
.site-footer-pro{margin-top:48px;background:var(--bg-2);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px;padding:36px 0}
.footer-col h5{margin:0 0 10px 0;font-size:1.05rem;color:var(--text)}
.footer-col a{display:block;color:var(--muted);margin:6px 0}
.sub{border-top:1px solid var(--border);color:var(--muted);padding:12px 0;font-size:.9rem}

/* ========= Misc. fixes ========= */
.badge, .sf-size-pill, .sf-qty, .co-item-qty{
  background:#fff !important; color:var(--text) !important; border-color:var(--border) !important;
}

/* ========= Optional hero block ========= */
.hero-banner{
  position:relative; border-radius:16px; overflow:hidden;
  height:320px; margin:12px 0; border:1px solid var(--border); box-shadow:var(--shadow)
}
.hero-banner::before{
  content:""; position:absolute; inset:0;
  background:var(--hero-img) center/cover no-repeat;
  filter:saturate(105%) contrast(98%);
}
.hero-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.35));
}
.hero-banner .hero-caption{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding:18px; text-align:left;
}
.hero-banner h2{margin:0;font-size:2rem}

/* ========= Responsive ========= */
@media (max-width: 920px){
  .nav-toggle{display:inline-flex}
  .site-header-pro .search{order:3;width:100%}
  .site-header-pro .nav{flex-wrap:wrap}
  .site-header-pro .nav-links{display:none;width:100%;gap:6px;order:2}
  .site-header-pro.open .nav-links{display:flex}
  .site-header-pro .btn.cart{order:4}
}
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.product-grid{grid-template-columns:repeat(2,1fr)}#carousel{--h:260px}.hero-banner{height:240px}.hero-banner h2{font-size:1.4rem}}
@media(max-width:520px){.product-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}