/* =========================================================
   BIGO Diamond — Global Styles
   ========================================================= */

/* ---------------------------------------------------------
   1) Theme Variables
   --------------------------------------------------------- */
:root {
  --bg: #f9f9fb;
  --panel: #ffffff;
  --panel-2: #f4f5f7;
  --text: #1f1f1f;
  --muted: #555;
  --brand: #2f80ed;
  --brand-2: #4fa3ff;
  --ok: #2ecc71;
  --shadow: 0 4px 15px rgba(0,0,0,.06);
  --radius: 14px;
  --gap: 20px;

  --navbar-h: 60px;
  --sidebar-w: 300px;
  --sidebar-w-collapsed: 76px;
}

/* ---------------------------------------------------------
   2) Base Reset
   --------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* ---------------------------------------------------------
   3) Layout
   --------------------------------------------------------- */
.page {
  margin-left: var(--sidebar-w);
  padding: calc(var(--navbar-h) + 16px) 28px 28px;
  display: block;
}
body.sidebar-collapsed .page { margin-left: var(--sidebar-w-collapsed); }
@media (max-width: 1024px) {
  .page { margin-left: 0; padding: calc(var(--navbar-h) + 16px) 18px 18px; }
}

/* ---------------------------------------------------------
   4) Navbar
   --------------------------------------------------------- */
.sidebar{
  position: fixed;
  left: 0;
  top: var(--navbar-h);                         /* يبدأ بعد النافبار */
  height: calc(100vh - var(--navbar-h));        /* الارتفاع المتبقي */
  width: var(--sidebar-w);
  background: var(--panel);
  border-inline-end: 1px solid #e5e7eb;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
  z-index: 50;
  transform: translateX(0);
  transition: width .25s ease, transform .3s ease;
}

/* الأوفرلاي يجب ألا يغطي النافبار */
.sidebar-overlay{
  position: fixed;
  left: 0;
  top: var(--navbar-h);                         /* تحت النافبار */
  width: 100%;
  height: calc(100vh - var(--navbar-h));
  background: rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  z-index: 40;
}
body.sidebar-open .sidebar-overlay{ opacity:1; visibility:visible; }

/* الموبايل: دخول/خروج */
@media (max-width:1024px){
  .sidebar{ transform: translateX(-102%); width: 86%; max-width: 360px; }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  .sidebar-close{ display:flex; align-items:center; justify-content:center; }
}

/* الديسكتوب المصغّر */
body.sidebar-collapsed .sidebar{ width: var(--sidebar-w-collapsed); padding-inline:10px; }
body.sidebar-collapsed .brand-text{ display:none; }
body.sidebar-collapsed .nav-label{ display:none; }
body.sidebar-collapsed .nav-link{ justify-content:center; }

/* تحسين مظهر الأيقونات الاحترافية */
.nav-ico svg{ display:block; }
.nav-link{
  display:flex; align-items:center; gap:12px;
  color:#333; text-decoration:none; padding:12px 14px; border-radius:12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-link:hover{ background:var(--panel-2); color:var(--brand); }
.nav-link.active{ background:rgba(47,128,237,.10); color:var(--brand); border:1px solid rgba(47,128,237,.25); }

/* زر واتساب مع الأيقونة */
.btn .btn-ico{ display:inline-grid; place-items:center; margin-inline-end:8px; }

/* ---------------------------------------------------------
   6) Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 14px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; font-weight: 600; transition: .2s;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 10px rgba(47,128,237,.2); }
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { background: transparent; color: #444; border-color: #d1d5db; }
.btn-ghost:hover { border-color: #bbb; color: var(--brand); }
.full { width: 100%; }

/* ---------------------------------------------------------
   7) Content Elements (cards, sections, grids)
   --------------------------------------------------------- */
.section { margin: 34px 0; }
.section-title { margin: 0 0 16px; font-size: 24px; }

.card {
  background: var(--panel);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.grid-3 { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1050px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

/* Hero */
.hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--gap); }
.hero-text h1 { font-size: 38px; margin: 0 0 10px; }
.lead { color:#555; margin:0 0 18px; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.trust-list { display:flex; gap:14px; flex-wrap:wrap; list-style:none; padding:0; margin:10px 0 0; }
.trust-list li { color:#555; background:#f0f2f5; padding:8px 10px; border:1px solid #e0e0e0; border-radius:10px; }
.hero-art { display:flex; justify-content:center; }
.hero-logo { width:220px; height:220px; object-fit:cover; background:#fff; border-radius:26px; border:1px solid #ddd; box-shadow:0 6px 20px rgba(0,0,0,.08); }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; text-align:left; } .hero-art{ order:-1; justify-content:flex-start; } }

/* Feature */
.feature .icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#f0f2f5; border:1px solid #e0e0e0; margin-bottom:8px; }
.feature .icon svg { width:22px; height:22px; fill: var(--brand); }

/* Packages */
.package h3{ margin:0 0 6px; }
.package .muted{ color:var(--muted); margin:0 0 12px; }
.price{ font-size:28px; font-weight:800; margin:10px 0 16px; }
.price span{ font-size:14px; font-weight:600; color:var(--muted); }
.note{ color:#666; margin-top:12px; }

/* Steps */
.steps{ list-style: decimal; padding-left: 24px; display:block; }
.steps li{ margin: 8px 0; }

/* Contact */
.contact{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width:900px){ .contact{ grid-template-columns: 1fr; } }
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
input, textarea{
  background:#fff; color:var(--text); border:1px solid #ddd; border-radius:12px; padding:12px 14px;
}
input:focus, textarea:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,128,237,.15); }
.contact-info{ display:flex; flex-direction:column; gap:10px; padding:10px; }
.info-line{ color:#444; }
.info-line span{ color:#777; }

/* Footer */
.site-footer{ margin: 40px 0 10px; }
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; color:#777;
}
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-logo{ width:26px; height:26px; border-radius:6px; background:#fff; object-fit:cover; }
.foot-links a{ color:#555; text-decoration:none; margin:0 10px; }
.foot-links a:hover{ color: var(--brand); }

/* ---------------------------------------------------------
   8) Utilities
   --------------------------------------------------------- */
.muted { color: var(--muted); }