/* ===== مبرة أسر الفوادرة — RTL responsive theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;
  overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}

/* ---------- header ---------- */
.topbar{background:var(--primary-dark);color:#fff;font-size:.82rem}
.topbar a{color:#fff;opacity:.92}
.topbar a:hover{opacity:1}
.topbar-in{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.4rem 0;flex-wrap:wrap}
.topbar-contact{display:flex;gap:1rem;flex-wrap:wrap}
.topbar-free{opacity:.9}
.topbar-date{font-weight:500}

.mainbar{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}
.mainbar-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--primary-dark)}
.logo img{height:54px;width:auto}
.logo-text{font-size:1.15rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--primary-dark);cursor:pointer}
.menu-close{display:none}

.mainmenu{flex:1}
.mainmenu>ul{display:flex;gap:.3rem;list-style:none;justify-content:center;flex-wrap:wrap}
.mainmenu li{position:relative}
.mainmenu>ul>li>a{padding:.6rem .8rem;display:block;font-weight:700;border-radius:8px}
.mainmenu>ul>li>a:hover{background:var(--bg)}
.submenu{position:absolute;top:100%;right:0;background:#fff;min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:10px;padding:.4rem;
  list-style:none;display:none;z-index:60}
.mainmenu li.has-children:hover>.submenu{display:block}
.submenu li a{padding:.5rem .7rem;display:block;border-radius:6px}
.submenu li a:hover{background:var(--bg)}

.header-actions{display:flex;align-items:center;gap:.5rem}
.search{display:flex;background:var(--bg);border-radius:30px;overflow:hidden}
.search input{border:0;background:transparent;padding:.5rem .9rem;width:140px;font-family:inherit;outline:none}
.search button{border:0;background:transparent;cursor:pointer;padding:0 .7rem;font-size:1rem}
.icon-btn{position:relative;font-size:1.25rem;padding:.35rem .5rem;border-radius:8px}
.icon-btn:hover{background:var(--bg)}
.cart-badge{position:absolute;top:-2px;left:-4px;background:var(--accent);color:#fff;
  font-size:.7rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* ---------- slider ---------- */
.slider{position:relative;overflow:hidden;border-radius:0 0 18px 18px}
.slides{display:flex;transition:transform .6s ease}
.slide{min-width:100%;position:relative}
.slide img{width:100%;height:clamp(220px,42vw,520px);object-fit:cover}
.slide-cap{position:absolute;inset-block-end:0;inset-inline:0;
  background:linear-gradient(0deg,rgba(10,79,55,.85),transparent);
  color:#fff;padding:2rem 1.5rem 1.4rem}
.slide-cap h2{font-size:clamp(1.2rem,3vw,2.2rem)}
.slider-dots{position:absolute;inset-block-end:10px;inset-inline:0;display:flex;gap:.4rem;justify-content:center}
.slider-dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer}
.slider-dots button.active{background:#fff}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);
  border:0;width:42px;height:42px;border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--primary-dark)}
.slider-arrow.prev{inset-inline-end:12px}.slider-arrow.next{inset-inline-start:12px}

/* ---------- sections ---------- */
.section{padding:2.6rem 0}
.section-eyebrow{color:var(--accent);font-weight:700;text-align:center}
.section-title{text-align:center;font-size:clamp(1.4rem,3vw,2rem);color:var(--primary-dark);margin-bottom:1.6rem}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:.7rem 1.5rem;border-radius:30px;
  font-weight:700;border:0;cursor:pointer;transition:.2s;font-family:inherit}
.btn:hover{background:var(--primary-dark);color:#fff}
.btn-accent{background:var(--accent)}
.btn-block{display:block;width:100%;text-align:center}
.center{text-align:center;margin-top:1.5rem}

/* product/news grids */
.grid{display:grid;gap:1.2rem}
.products-grid{grid-template-columns:repeat(var(--cols-laptop,4),1fr)}
.news-grid{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.07);
  display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.card-img{height:190px;background:var(--bg) center/cover}
.card-body{padding:1rem;display:flex;flex-direction:column;flex:1}
.card-tag{align-self:flex-start;background:var(--bg);color:var(--primary-dark);font-size:.72rem;
  padding:.2rem .6rem;border-radius:20px;margin-bottom:.5rem;font-weight:700}
.card h3{font-size:1.05rem;margin-bottom:.4rem}
.card p{font-size:.9rem;color:#555;flex:1}
.card .btn{margin-top:.8rem}
.progress{height:8px;background:var(--bg);border-radius:6px;overflow:hidden;margin:.6rem 0}
.progress>span{display:block;height:100%;background:var(--accent)}
.progress-info{font-size:.8rem;color:#666;display:flex;justify-content:space-between}

/* ---------- forms / pages ---------- */
.page-main{min-height:50vh;padding-block:1rem}
.flash{padding:.8rem 1rem;border-radius:10px;margin:.6rem 0}
.flash-success{background:#e6f5ee;color:#0a6b46}
.flash-error{background:#fdeaea;color:#b3261e}
.panel{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.07);padding:1.6rem;margin:1rem 0}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;padding:.7rem;border:1px solid #d8e0dc;
  border-radius:10px;font-family:inherit;font-size:1rem;background:#fff}
.field textarea{min-height:120px}
.muted{color:#777;font-size:.9rem}
.amount-row{display:flex;gap:.6rem;flex-wrap:wrap}
.amount-chip{padding:.5rem 1rem;border:1px solid var(--primary);color:var(--primary);
  border-radius:30px;cursor:pointer;background:#fff;font-family:inherit}
.amount-chip.active{background:var(--primary);color:#fff}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
table.tbl th,table.tbl td{padding:.7rem;border-bottom:1px solid #eee;text-align:right;font-size:.92rem}
table.tbl th{background:var(--bg)}

/* ---------- footer ---------- */
.site-footer{background:var(--primary-dark);color:#fff;margin-top:3rem}
.footer-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:2.5rem 0}
.site-footer h4{margin-bottom:.7rem;color:var(--accent)}
.site-footer a{color:#fff;opacity:.9}
.social a{margin-inline-start:.8rem}
.copyright{text-align:center;padding:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}

/* ---------- responsive ---------- */
@media(max-width:992px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .products-grid{grid-template-columns:repeat(var(--cols-tablet,2),1fr)}
}
@media(max-width:768px){
  .nav-toggle{display:block;order:1}
  /* mobile header: logo centered on top, then toggle (right) + icons (left) */
  .mainbar-in{flex-wrap:wrap;justify-content:space-between;row-gap:.5rem}
  .logo{order:0;flex:0 0 100%;justify-content:center;text-align:center}
  .header-actions{order:2}
  .mainmenu{position:fixed;inset:0 0 0 auto;width:280px;background:#fff;transform:translateX(100%);
    transition:.3s;padding:3.4rem 1rem 1rem;box-shadow:-6px 0 30px rgba(0,0,0,.15);overflow:auto;z-index:80}
  body.nav-open .mainmenu{transform:translateX(0)}
  .menu-close{display:block;position:absolute;top:.4rem;inset-inline-start:.6rem;background:none;border:0;
    font-size:2rem;line-height:1;color:var(--primary-dark);cursor:pointer;padding:.2rem .5rem}
  .mainmenu>ul{flex-direction:column;align-items:stretch}
  .submenu{position:static;display:block;box-shadow:none;background:var(--bg);margin-inline-start:.6rem}
  .search input{width:90px}
  .footer-in{grid-template-columns:1fr;text-align:center}
  .products-grid{grid-template-columns:repeat(var(--cols-mobile,1),1fr)}
  .news-grid{grid-template-columns:1fr}
  .topbar-free{display:none}
}