/* =========================================================
   SevenGreen — CLEAN FINAL CSS (Slider = contain on all; Ribbon = no gaps)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --brand:#106c09; --ink:#0f172a; --muted:#6b7280; --white:#fff; --line:#e5e7eb;
  --page-bg:#f6f8fb;
  --max:1160px; --r:16px;
  --shadow-sm:0 6px 16px rgba(15,23,42,.06);
  --shadow-md:0 12px 24px rgba(15,23,42,.08);
  --shadow-lg:0 16px 36px rgba(15,23,42,.12);
  --ring:1px solid #eaeef3;

  /* تحكم في حجم اللوجو */
  --logo-desktop: 100px;
  --logo-tablet:  72px;
  --logo-mobile:  56px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;color:var(--ink);background:var(--page-bg)}
img{display:block;max-width:100%;height:auto}

/* ---------- Ticker ---------- */
.custom-ticker{background:var(--brand);color:#fff;overflow:hidden;white-space:nowrap;padding:10px 0}
.ticker-track{display:inline-flex;gap:80px;animation:ticker-scroll 60s linear infinite;will-change:transform}
.ticker-track p{margin:0;font-size:14px;font-weight:700;white-space:nowrap}
@keyframes ticker-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);transition:box-shadow .25s ease,background .25s ease;
}
header.site.scrolled{background:#fff;box-shadow:var(--shadow-md)}
.nav-wrap{max-width:var(--max);margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800}
.logo .brand{height:var(--logo-desktop)!important;width:auto!important;display:block}
@media (max-width:1200px){ .logo .brand{height:var(--logo-tablet)!important} }
@media (max-width:900px){  .logo .brand{height:var(--logo-mobile)!important} }

nav.primary{display:none}
nav.primary ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
nav.primary a{color:var(--ink);text-decoration:none;font-weight:600}
nav.primary a:hover{text-decoration:underline}

.cta{display:none}
.cta a{background:#fff;color:var(--ink);border:1px solid var(--line);text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.cta a svg{width:18px;height:18px}

.burger{background:#fff;border:1px solid var(--line);border-radius:10px;width:44px;height:40px;display:grid;place-items:center}
.burger svg{width:22px;height:22px}

#mobile-panel{display:none;background:#fff;border-top:1px solid var(--line)}
#mobile-panel a{display:block;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1px solid #f3f4f6}

/* Desktop only */
@media (min-width:900px){
  .burger{display:none}
  nav.primary{display:block}
  .cta{display:block}
  #mobile-panel{display:none!important}
}

/* ===== Mobile header: logo left, burger right (<=900px) ===== */
@media (max-width: 900px){
  /* Grid بثلاث أعمدة للموبايل */
  header.site .nav-wrap{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: initial !important; /* يلغي space-between القديم */
  }
  /* اللوجو يسار */
  header.site .logo{
    grid-column: 1 !important;
    justify-self: start !important;
  }
  /* البرجر يمين */
  header.site .burger{
    grid-column: 3 !important;
    justify-self: end !important;
  }
  /* إخفاء عناصر الدِسك توب */
  nav.primary{ display: none !important; }
  .cta{ display: none !important; }

  /* المنيو المنسدلة تحت البرجر (اختياري) */
  #mobile-panel{
    left: auto !important;
    right: 16px !important;
    width: min(86vw, 360px) !important;
  }

  /* تأكيد عدم كسر السطر */
  header.site .nav-wrap > *{ flex: 0 0 auto !important; }
}

/* ---------- Hero Slider (Contain everywhere, no crop) ---------- */
.hero{background:linear-gradient(180deg,#f6f9fc 0%, #ffffff 75%)}
.inner{max-width:var(--max);margin:0 auto;padding:20px 16px}

.slides{
  position:relative;border-radius:16px;overflow:hidden;background:#fff;border:var(--ring);
  box-shadow:var(--shadow-lg);
  min-height:520px; height:clamp(520px, 56vw, 680px);
}
.slide{
  position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;
  padding:20px 24px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;
}
.slide.active{opacity:1;transform:none}
.slide .copy h1{margin:0 0 10px 0;font-size:36px;line-height:1.1}
.slide .copy p{color:var(--muted);margin:0 0 18px 0}
.slide .copy .btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:800;box-shadow:0 10px 22px rgba(16,108,9,.18);border:0}

/* الصورة لا تُقص أبداً */
.slide img.media{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:12px;
  background:#fff;
}

/* Dots & Arrows */
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb;border:2px solid #fff;cursor:pointer;opacity:.7}
.dot.active{background:var(--brand);opacity:1}
.slides > .arrow{
  position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)
}
.slides > .arrow.prev{left:12px} .slides > .arrow.next{right:12px}

/* Mobile tweaks */
@media (max-width:900px){
  .slides{min-height:420px;height:auto}
  .slide{grid-template-columns:1fr;gap:10px;padding:16px}
  .slide .copy h1{font-size:26px}
  .slide img.media{height:280px !important;object-fit:contain !important;object-position:center top !important}
  .slides > .arrow{display:none!important}
}

/* ---------- Tall Portrait Panels ---------- */
.tall{max-width:var(--max);margin:42px auto;padding:0 16px;display:flex;flex-direction:column;gap:48px}
.panel{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center}
.panel.reverse{grid-template-columns:1fr 1.1fr}
.panel .imgwrap{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);border:var(--ring);background:#fff;height:720px}
.panel .imgwrap img{width:100%;height:100%;object-fit:cover;object-position:center}
.panel .copy h2{font-size:30px;margin:0 0 10px 0}
.panel .copy p{color:var(--muted);margin:0}
@media (max-width:900px){
  .panel,.panel.reverse{grid-template-columns:1fr}
  .panel .imgwrap{order:1;height:auto}
  .panel .copy{order:2}
  .panel .imgwrap img{object-fit:contain;object-position:center top}
}

/* ---------- Section Shell ---------- */
.sg-container{max-width:var(--max);margin:0 auto;padding:0 16px}
.sg-section{padding:56px 0;background:transparent;position:relative}
.sg-title{margin:0;font-size:28px}
.sg-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sg-grid{display:grid;gap:18px}
.sg-section:not(:first-of-type)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, rgba(16,108,9,.18), rgba(15,23,42,.06) 35%, rgba(15,23,42,.06) 65%, rgba(16,108,9,.18));
  opacity:.5;
}

/* ---------- Our Products ---------- */
.sg-categories{grid-template-columns:repeat(4,minmax(0,1fr))}
.cat-card{display:flex;flex-direction:column;gap:10px;user-select:none;transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;will-change:transform}
.cat-card:hover{transform:translateY(-4px)}
.cat-thumb{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);background:#fff;border:var(--ring)}
.cat-thumb::after{content:"";display:block;aspect-ratio:4/3}
.sg-categories .cat-thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.cat-card:hover .cat-thumb{box-shadow:var(--shadow-lg)}
.cat-caption{text-align:center;font-size:18px}
.cat-caption .arrow{opacity:.6;margin-left:6px}
@media (max-width:1000px){.sg-categories{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.sg-categories{grid-template-columns:1fr 1fr}.cat-caption{font-size:16px}}

/* ---------- Reviews ---------- */
.sg-reviews{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-md);transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease}
.sg-review:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sg-review-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sg-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#f3f4f6}
.sg-stars-mini{color:#f59e0b;font-size:14px;letter-spacing:1px}
.sg-review-text{margin:0;color:var(--ink);line-height:1.6}
.sg-stars{display:flex;align-items:center;gap:8px;color:#f59e0b}
.sg-stars small{color:var(--muted)}
@media (max-width:900px){.sg-reviews{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sg-reviews{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:14px}
.faq-item{background:#0b1220;color:#e5e7eb;border-radius:16px;box-shadow:var(--shadow-md)}
.faq-q{width:100%;text-align:left;background:transparent;color:#e5e7eb;border:0;padding:16px 18px;font-size:18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-q .icon{opacity:.75;transition:transform .25s ease}
.faq-a{padding:0 18px 18px 18px;display:none;color:#e5e7eb;line-height:1.7}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}

/* ---------- Footer ---------- */
.sg-footer{background:#0b1220;color:#e5e7eb;border-top:none;padding:32px 0 40px;box-shadow:0 -10px 28px rgba(0,0,0,.06)}
.sg-footer-grid{display:grid;grid-template-columns:2fr 2fr 1.5fr;gap:24px;margin-bottom:20px}
.sg-foot-col h4{margin:0 0 10px 0}
.sg-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sg-list a{color:#c7d2fe;text-decoration:none}
.sg-list a:hover{text-decoration:underline}
.sg-payments{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sg-payments img,.sg-payments svg{height:20px;max-height:20px;width:auto;display:inline-block;vertical-align:middle;opacity:.95;transition:transform .15s ease,opacity .15s ease}
.sg-payments img:hover,.sg-payments svg:hover{opacity:1;transform:translateY(-1px)}
.sg-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.sg-inline{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.sg-inline a{color:#c7d2fe;text-decoration:none}
.sg-inline a:hover{text-decoration:underline}

/* ---------- Reveal Animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform:none}

/* منع تسرّب ستايل السهام داخل باقي الأقسام */
.sg-section .arrow{
  position:static!important;background:transparent!important;border:0!important;width:auto!important;height:auto!important;
  border-radius:0!important;box-shadow:none!important;transform:none!important;display:inline!important;padding:0;margin:0;opacity:.6;
}

/* ===== FORCE OVERRIDES ===== */
header.site .logo .brand{height:var(--logo-desktop)!important;width:auto!important}

/* ---------- RIBBON (Vertical full images / no gaps) ---------- */
#home-collage{padding:0;margin:0;border:0;line-height:0;background:transparent}
#home-collage .ribbon-vert{display:block;margin:0;padding:0}
#home-collage .tile-full{margin:0;padding:0;border:0;box-shadow:none;line-height:0}
#home-collage .tile-full img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
  background:transparent;
  vertical-align:top;
}
#home-collage .tile-full + .tile-full{ margin-top:-1px; }
@supports (mask-image:linear-gradient(black,black)){
  #home-collage .tile-full + .tile-full{ margin-top:0; }
}

/* Full-bleed alignment */
html, body { overflow-x: hidden; }
#home-collage{
  padding:0 !important; margin:0 !important; border:0;
  line-height:0;
  width:100vw;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:transparent;
}
#home-collage .ribbon-vert{ display:flex; flex-direction:column; gap:0; }

/* Reveal for ribbon */
#home-collage.reveal .tile-full{
  opacity:0; transform:translateY(12px);
  transition:opacity .48s ease, transform .48s ease;
}
#home-collage.reveal.show .tile-full{ opacity:1; transform:none; }

/* ===== SLIDER — منع القص على الديسكتوب والموبايل ===== */
.slides{ min-height:520px; height:clamp(520px, 56vw, 680px); }
.slide img.media{
  object-fit:contain !important;
  object-position:center !important;
  background:#fff;
}
@media (max-width:900px){
  .slides{ min-height:420px; height:auto; }
  .slide img.media{ height:280px !important; object-position:center top !important; }
}