:root{
      --bg:#0a0f1d;
      --panel:#0f1730;
      --panel2:#0c1326;
      --border:rgba(255,255,255,.10);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.70);
      --accent:#6ea8ff;
      --ok:#39d98a;
      --warn:#ffce5c;
      --danger:#ff6b6b;
      --shadow: 0 18px 55px rgba(0,0,0,.45);
      --radius:18px;
      --radius2:14px;
    }
/* ===== Billing / Pricing ===== */
   .pricingGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:14px;
    margin-top:12px;
    }
   .planCard{
    border:1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding:14px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
   }
   .planHead{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
   }
   .planTag{
    font-size:12px; padding:6px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    color: var(--muted);
   }
  .planPrice{font-size:26px; font-weight:900; margin:10px 0 8px}
  .badge{
    padding:7px 12px; border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size:13px;
   }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 85% -10%, rgba(110,168,255,.24), transparent 60%),
        radial-gradient(700px 420px at 10% 10%, rgba(57,217,138,.18), transparent 55%),
        radial-gradient(700px 420px at 40% 120%, rgba(255,206,92,.10), transparent 55%),
        var(--bg);
    }

    .wrap{max-width:1150px;margin:0 auto;padding:26px 16px 64px}
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      margin-bottom:18px;
    }
    .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
  border-radius:12px;
}
    .title h1{margin:0;font-size:20px;letter-spacing:.2px}
    .title .sub{margin-top:4px;font-size:13px;color:var(--muted)}

    .btn{
      border:1px solid var(--border);
      background: rgba(255,255,255,.06);
      color:var(--text);
      padding:10px 14px;
      border-radius:14px;
      cursor:pointer;
      transition:.15s ease;
      display:inline-flex; align-items:center; gap:8px;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
    .btn.primary{
      background: rgba(110,168,255,.18);
      border-color: rgba(110,168,255,.35);
    }
    .btn.danger{
      background: rgba(255,107,107,.12);
      border-color: rgba(255,107,107,.35);
    }
    .btn.ghost{background: transparent}
    .btn:disabled{opacity:.55; cursor:not-allowed; transform:none}

    .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
    .pill{
      font-size:12px; color:var(--muted);
      padding:6px 10px; border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:16px;
    }

    .gridTop{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      margin-bottom:14px;
    }
    @media (max-width: 900px){
      .gridTop{grid-template-columns:1fr}
    }

    .card h2{
      margin:0 0 12px;
      font-size:15px;
      display:flex; align-items:center; justify-content:space-between;
    }

    .mebox{
      display:flex; gap:10px; flex-wrap:wrap;
      color:var(--muted);
      font-size:13px;
    }

    code{
      color: var(--text);
      background: rgba(0,0,0,.25);
      border:1px solid var(--border);
      padding:4px 8px;
      border-radius: 10px;
    }

    .status{
      margin-top:10px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size:13px;
      white-space: pre-wrap;
    }
    .status.err{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10); color: rgba(255,233,233,.95)}
    .status.ok{border-color: rgba(57,217,138,.35); background: rgba(57,217,138,.10); color: rgba(220,255,238,.95)}
    .status.warn{border-color: rgba(255,206,92,.35); background: rgba(255,206,92,.10); color: rgba(255,248,224,.95)}

    .section{margin-top:14px}
    .sectionHeader{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .sectionHeader .left{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    }
    .sectionHeader .right{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    }

    .inp, .sel{
      width:100%;
      padding:11px 12px;
      border-radius:14px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.25);
      color: var(--text);
      outline:none;
    }
    .inp::placeholder{color: rgba(234,240,255,.55)}
    .sel{padding:10px 12px}
    .tools{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin:10px 0 12px;
    }
    .tools .inp{max-width:340px}
    .tools .sel{width:auto; min-width:130px}

    .form{
      display:grid;
      gap:10px;
      margin-top:8px;
      margin-bottom:10px;
    }
    .form.cols5{grid-template-columns: repeat(5, 1fr)}
    .form.cols2{grid-template-columns: repeat(2, 1fr)}
    @media (max-width: 980px){
      .form.cols5{grid-template-columns: 1fr 1fr}
    }
    @media (max-width: 520px){
      .form.cols5,.form.cols2{grid-template-columns: 1fr}
    }

    .tableWrap{
      border-radius: 14px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.18);
      overflow:auto;
      max-height: 520px; /* ✅ مهم للأعداد الكبيرة */
    }

    table{width:100%; border-collapse: collapse; min-width: 900px}
    th,td{
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      text-align:right;
      vertical-align: middle;
      font-size:13px;
    }
    thead th{
      position: sticky; top: 0; z-index: 5; /* ✅ رأس ثابت */
      background: rgba(15,23,48,.92);
      backdrop-filter: blur(8px);
      color: rgba(234,240,255,.88);
      font-weight:600;
    }
    td .inp{
      padding:9px 10px;
      border-radius:12px;
      background: rgba(0,0,0,.22);
    }

    .actions{
      display:flex; gap:8px; flex-wrap:wrap;
      white-space:nowrap;
    }

    .pager{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-top:10px;
      flex-wrap:wrap;
    }
    .pager .mini{
      display:flex; gap:8px; align-items:center; flex-wrap:wrap;
      color: var(--muted); font-size:13px;
    }

    .hint{color: var(--muted); font-size:12px}

    .skeleton{
      height: 46px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      margin-top:10px;
    }
    @keyframes shimmer{0%{background-position: 200% 0}100%{background-position:-200% 0}}

    /* Toast */
    .toastWrap{
      position: fixed;
      bottom: 16px;
      left: 16px;
      z-index: 9999;
      display:flex;
      flex-direction: column;
      gap:10px;
      width: min(360px, calc(100vw - 32px));
      pointer-events:none;
    }
    .toast{
      pointer-events:auto;
      border:1px solid var(--border);
      background: rgba(15,23,48,.92);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding:12px 12px;
      display:flex; gap:10px; align-items:flex-start;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;margin-top:4px;
      background: var(--accent);
      flex:0 0 auto;
    }
    .toast.ok .dot{background: var(--ok)}
    .toast.err .dot{background: var(--danger)}
    .toast .tTitle{font-weight:700;font-size:13px;margin:0}
    .toast .tMsg{font-size:13px;color:var(--muted);margin-top:3px}
    /* ===== Toggle Switch (FB Pages) ===== */
.switch{
  position:relative;
  width:54px;
  height:30px;
  display:inline-block;
  vertical-align:middle;
}

.switch input{ display:none; }

.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  transition:.18s ease;
}

.slider:before{
  content:"";
  position:absolute;
  height:22px; width:22px;
  left:4px; top:50%;
  transform: translateY(-50%);
  background: rgba(234,240,255,.92);
  border-radius:999px;
  transition:.18s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}

.switch input:checked + .slider{
  background: rgba(57,217,138,.18);
  border-color: rgba(57,217,138,.35);
}

.switch input:checked + .slider:before{
  transform: translate(24px, -50%);
  background: rgba(220,255,238,.98);
}

.smallMuted{
  color: var(--muted);
  font-size: 12px;
}
/* =======================
   Beautiful Shipping Templates Modal (Scoped)
   affects ONLY #tplModal
======================= */

#tplModal{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* المربع الداخلي (أول div داخل tplModal) */
#tplModal > div{
  max-width: 980px !important;
  margin: 42px auto !important;
  border-radius: 22px !important;
  padding: 16px !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(120,119,198,.38), transparent 60%),
    radial-gradient(900px 450px at 110% 0%, rgba(0,255,199,.20), transparent 60%),
    linear-gradient(180deg, rgba(18,22,36,.96), rgba(10,12,18,.96)) !important;

  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  color: rgba(240,245,255,.92) !important;
}

/* عنوان المودال */
#tplModal div[style*="font-weight:900"],
#tplModal div[style*="font-weight:800"]{
  color: rgba(240,245,255,.95) !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* البانلات (الجزئين يمين/شمال) */
#tplModal > div > div[style*="display:flex"] > div{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* inputs / selects داخل المودال */
#tplModal .inp, #tplModal .sel{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.25) !important;
  color: rgba(240,245,255,.92) !important;
  outline: none !important;
}

#tplModal .inp::placeholder{
  color: rgba(240,245,255,.45) !important;
}

#tplModal .inp:focus, #tplModal .sel:focus{
  border-color: rgba(0,255,199,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,199,.12) !important;
}

/* buttons داخل المودال */
#tplModal .btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(240,245,255,.95) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

#tplModal .btn:hover{
  filter: brightness(1.06);
}

#tplModal .btn.primary{
  background: linear-gradient(135deg, rgba(72,110,255,.95), rgba(0,255,199,.55)) !important;
}

#tplModal .btn.danger{
  background: linear-gradient(135deg, rgba(255,60,130,.92), rgba(255,120,60,.55)) !important;
}

/* list items داخل tplList لو أنت بتعمل divs هناك */
#tplList > div{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* =========================
   PREMIUM Button: Shipping Templates
   ONLY #o_tpl_manage
========================= */

#o_tpl_manage{
  position: relative !important;
  overflow: hidden !important;

  border-radius: 14px !important;
  padding: 10px 16px !important;

  font-weight: 950 !important;
  letter-spacing: .35px !important;

  color: rgba(255,255,255,.96) !important;

  /* Premium gradient */
  background: linear-gradient(135deg,
    rgba(79,124,255,1) 0%,
    rgba(0,255,195,.92) 55%,
    rgba(0,180,255,.86) 100%) !important;

  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.30),
    0 0 26px rgba(0,255,195,.25) !important;

  transform: translateZ(0);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
}

/* Soft glowing frame */
#o_tpl_manage::before{
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 16px !important;

  background: linear-gradient(135deg,
    rgba(79,124,255,.95),
    rgba(0,255,195,.55),
    rgba(0,180,255,.45)) !important;

  filter: blur(14px) !important;
  opacity: .42 !important;
  z-index: -1 !important;

  animation: tplGlow 2.6s ease-in-out infinite !important;
}

/* Shine sweep */
#o_tpl_manage::after{
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -70% !important;
  width: 60% !important;
  height: 180% !important;

  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.18) 65%,
    transparent 100%) !important;

  transform: rotate(20deg) !important;
  opacity: .0 !important;
  transition: opacity .2s ease !important;
}

/* Hover: lift + stronger glow + trigger shine */
#o_tpl_manage:hover{
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.08) !important;

  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 0 42px rgba(0,255,195,.42) !important;
}

#o_tpl_manage:hover::after{
  opacity: .95 !important;
  animation: tplShine 1.05s ease forwards !important;
}

/* Active: press */
#o_tpl_manage:active{
  transform: translateY(0px) scale(.98) !important;
  filter: brightness(1.02) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 22px rgba(0,255,195,.28) !important;
}

/* Keyboard focus */
#o_tpl_manage:focus{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(0,255,195,.16),
    0 18px 52px rgba(0,0,0,.38),
    0 0 42px rgba(0,255,195,.38) !important;
}

/* Animations */
@keyframes tplGlow{
  0%,100%{ opacity: .34; filter: blur(14px); }
  50%{ opacity: .52; filter: blur(18px); }
}

@keyframes tplShine{
  0%{ left: -70%; }
  100%{ left: 140%; }
}
/* =========================
   PREMIUM Billing/Pricing UI
   Scoped to #billingCard only
========================= */

#billingCard{
  position: relative;
  overflow: hidden;
}

#billingCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(79,124,255,.22), transparent 55%),
    radial-gradient(700px 420px at 95% 10%, rgba(0,255,195,.16), transparent 60%),
    radial-gradient(700px 420px at 40% 120%, rgba(255,206,92,.10), transparent 55%);
  pointer-events:none;
}

#billingCard .sectionHeader{
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#billingCard #pricingGrid{
  margin-top: 12px;
}

/* grid أجمل */
#billingCard .pricingGrid{
  gap: 16px;
}

/* الكارت نفسه */
#billingCard .planCard{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(79,124,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

#billingCard .planCard:hover{
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow:
    0 26px 80px rgba(0,0,0,.45),
    0 0 40px rgba(0,255,195,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* رأس الخطة */
#billingCard .planHead > div:first-child{
  font-size: 15px;
  font-weight: 950;
}

/* Tag أجمل */
#billingCard .planTag{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(240,245,255,.75);
}

/* السعر */
#billingCard .planPrice{
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: .2px;
}
#billingCard .planPrice small{
  font-size: 12px;
  opacity: .70;
  font-weight: 700;
}

/* قائمة المميزات */
#billingCard .planFeatures{
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
#billingCard .planFeatures li{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(240,245,255,.78);
  font-size: 13px;
}
#billingCard .planFeatures li::before{
  content:"✓";
  display:inline-flex;
  width:20px;height:20px;
  align-items:center;justify-content:center;
  border-radius: 8px;
  background: rgba(0,255,195,.10);
  border: 1px solid rgba(0,255,195,.22);
  color: rgba(210,255,242,.95);
  font-weight: 1000;
}

/* زرار اشتراك Premium داخل الكارت */
#billingCard .planBtn{
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  font-weight: 950;
  letter-spacing: .3px;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(79,124,255,1), rgba(0,255,195,.65));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 45px rgba(0,0,0,.35), 0 0 26px rgba(0,255,195,.22);
}

#billingCard .planBtn:hover{
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* شارة Recommended للخطة اللي عايز تميزها */
#billingCard .planCard.featured{
  border-color: rgba(0,255,195,.22);
}
#billingCard .planCard.featured::after{
  content:"الأكثر اختيارًا";
  position:absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(255,206,92,.95), rgba(255,120,60,.55));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* badge بتاع الحالة */
#billingCard #billingBadge{
  border-radius: 999px;
  font-weight: 900;
}
/* =========================
   PREMIUM Add Order Button
   ========================= */

#o_add_manual{
  position: relative !important;
  overflow: hidden !important;

  border-radius: 16px !important;
  padding: 11px 18px !important;

  font-weight: 950 !important;
  letter-spacing: .4px !important;

  color: #fff !important;

  background: linear-gradient(135deg,
    #ff6a00 0%,
    #ff0080 50%,
    #7928ca 100%) !important;

  border: 1px solid rgba(255,255,255,.15) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 35px rgba(255,0,128,.35) !important;

  transition: all .25s ease !important;
}

/* Glow Frame */
#o_add_manual::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  background: linear-gradient(135deg,
    rgba(255,106,0,.8),
    rgba(255,0,128,.7),
    rgba(121,40,202,.7));
  filter: blur(16px);
  opacity:.45;
  z-index:-1;
  animation: addGlow 2.5s ease-in-out infinite;
}

/* Shine Effect */
#o_add_manual::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width:60%;
  height:180%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent);
  transform: rotate(20deg);
  opacity:0;
}

#o_add_manual:hover{
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 25px 70px rgba(0,0,0,.45),
    0 0 60px rgba(255,0,128,.55);
}

#o_add_manual:hover::after{
  opacity:1;
  animation: addShine 1s ease forwards;
}

#o_add_manual:active{
  transform: scale(.96);
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 30px rgba(255,0,128,.4);
}

@keyframes addGlow{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}

@keyframes addShine{
  0%{ left:-70% }
  100%{ left:130% }
}
/* =========================
   Premium Orders Table UI
   ========================= */

#orders .tableWrap{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(79,124,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Header احترافي */
#orders thead th{
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  background: linear-gradient(180deg,
    rgba(30,40,80,.95),
    rgba(15,23,48,.95)) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

/* صفوف ناعمة */
#orders tbody tr{
  transition: all .18s ease;
}

#orders tbody tr:hover{
  background: rgba(79,124,255,.10);
  transform: scale(1.002);
}

/* Checkbox أجمل */
#orders input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#6ea8ff;
}

/* أزرار داخل الجدول */
#orders .btn{
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

#orders .btn.primary{
  background: linear-gradient(135deg,
    rgba(79,124,255,.95),
    rgba(0,255,195,.6)) !important;
}
/* =========================
   PREMIUM Orders Header Toolbar
   (Buttons Row at Orders sectionHeader .right)
   ========================= */

/* استهداف كارت الأوردرات فقط */
.card.section:has(#orders) .sectionHeader{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* صندوق الأزرار يمين */
.card.section:has(#orders) .sectionHeader .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;

  padding:10px 10px;
  border-radius: 18px;

  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(79,124,255,.16), transparent 60%),
    radial-gradient(700px 240px at 100% 30%, rgba(0,255,195,.10), transparent 60%),
    rgba(0,0,0,.16);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* كل أزرار الأوردرات أعلى الجدول */
.card.section:has(#orders) .sectionHeader .right .btn{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.card.section:has(#orders) .sectionHeader .right .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.card.section:has(#orders) .sectionHeader .right .btn:active{
  transform: translateY(0) scale(.98);
}

/* تخصيص أزرار بعينها */
#o_print{
  background: linear-gradient(135deg, rgba(110,168,255,.25), rgba(110,168,255,.10)) !important;
  border-color: rgba(110,168,255,.35) !important;
}

#o_export_xlsx{
  background: linear-gradient(135deg, rgba(57,217,138,.18), rgba(57,217,138,.08)) !important;
  border-color: rgba(57,217,138,.35) !important;
}

#o_export_pdf{
  background: linear-gradient(135deg, rgba(255,206,92,.20), rgba(255,206,92,.08)) !important;
  border-color: rgba(255,206,92,.35) !important;
}

#o_reload{
  background: rgba(255,255,255,.06) !important;
}

#o_printSel{
  background: linear-gradient(135deg, rgba(0,255,195,.22), rgba(79,124,255,.18)) !important;
  border-color: rgba(0,255,195,.35) !important;
}
/* =========================
   PREMIUM Orders Tools Bar
   (the .tools under Orders)
   ========================= */

.card.section:has(#orders) .tools{
  margin-top: 12px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(121,40,202,.12), transparent 60%),
    radial-gradient(900px 320px at 100% 30%, rgba(0,255,195,.10), transparent 60%),
    rgba(0,0,0,.16) !important;

  box-shadow:
    0 20px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

  gap: 12px !important;
}

/* Inputs & Selects داخل شريط الأدوات */
.card.section:has(#orders) .tools .inp,
.card.section:has(#orders) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card.section:has(#orders) .tools .inp:focus,
.card.section:has(#orders) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
  transform: translateY(-1px);
}

/* أزرار شريط الأدوات */
.card.section:has(#orders) .tools .btn{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.card.section:has(#orders) .tools .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18);
}

/* تمييز أزرار التحديد */
#o_selectAll{
  background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(110,168,255,.10)) !important;
  border-color: rgba(110,168,255,.35) !important;
}
#o_clearSel{
  background: linear-gradient(135deg, rgba(255,107,107,.16), rgba(255,107,107,.08)) !important;
  border-color: rgba(255,107,107,.35) !important;
}

/* زر القوالب (أنت عامل له ستايل premium أصلاً) نحافظ عليه */
#o_tpl_manage{
  transform: translateZ(0);
}

/* =========================
   PREMIUM Order Modal (Add/Edit)
   Targets: #orderModal + its content
   ========================= */

/* الخلفية */
#orderModal{
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(0,0,0,.62) !important;
}

/* الكارد الداخلي: أول صندوق داخل المودال */
#orderModal > div{
  max-width: 980px !important;
  margin: 42px auto !important;
  border-radius: 22px !important;
  padding: 16px !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(79,124,255,.30), transparent 60%),
    radial-gradient(900px 420px at 110% 0%, rgba(0,255,195,.18), transparent 60%),
    linear-gradient(180deg, rgba(18,22,36,.96), rgba(10,12,18,.96)) !important;

  box-shadow:
    0 34px 110px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  color: rgba(240,245,255,.92) !important;
}

/* عنوان المودال */
#orderModal #omTitle{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .3px;
  color: rgba(240,245,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Inputs/selects داخل المودال */
#orderModal .inp,
#orderModal .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.26) !important;
  color: rgba(240,245,255,.92) !important;
  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18);

  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#orderModal .inp:focus,
#orderModal .sel:focus{
  border-color: rgba(0,255,195,.58) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
  transform: translateY(-1px);
}

/* رسالة الحالة داخل المودال */
#orderModal #omMsg{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(240,245,255,.80);
}

/* جدول العناصر داخل المودال */
#orderModal table{
  width: 100% !important;
  border-collapse: collapse !important;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}

#orderModal th, #orderModal td{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 10px !important;
  font-size: 13px !important;
}

#orderModal thead th{
  background: rgba(15,23,48,.86) !important;
  color: rgba(234,240,255,.88) !important;
  font-weight: 900 !important;
}

/* أزرار المودال */
#orderModal .btn{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

#orderModal .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 22px 60px rgba(0,0,0,.35),
    0 0 30px rgba(110,168,255,.18);
}

/* زر الحفظ */
#orderModal #omSave{
  background: linear-gradient(135deg, rgba(79,124,255,1), rgba(0,255,195,.65)) !important;
  border-color: rgba(0,255,195,.32) !important;
  color: rgba(255,255,255,.98) !important;
}

/* زر إضافة عنصر */
#orderModal #om_add_item{
  background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(110,168,255,.10)) !important;
  border-color: rgba(110,168,255,.35) !important;
}

/* زر Reset */
#orderModal #omReset{
  background: linear-gradient(135deg, rgba(255,206,92,.20), rgba(255,206,92,.08)) !important;
  border-color: rgba(255,206,92,.35) !important;
}

/* زر إغلاق */
#orderModal #omClose{
  background: linear-gradient(135deg, rgba(255,107,107,.16), rgba(255,107,107,.08)) !important;
  border-color: rgba(255,107,107,.35) !important;
}
/* =========================
   FIX Actions column alignment (Orders table)
   Keep table layout consistent + premium buttons
   ========================= */

/* 1) رجّع الـ TD لطبيعته كـ table-cell بدل flex (حتى لو inline style موجود) */
#orders td:last-child{
  display: table-cell !important;   /* يغلب display:flex المكتوب inline */
  white-space: nowrap;
  vertical-align: middle;
  width: 170px;                    /* عدّلها لو عايز أوسع/أضيق */
  min-width: 170px;
}

/* 2) حط الأزرار جوه Wrapper flex منظم باستخدام :has (بدون تغيير HTML) */
#orders td:last-child:has([data-edit-one],[data-print-one]){
  position: relative;
}

#orders td:last-child:has([data-edit-one],[data-print-one])::before{
  content:"";
  display:block;
  height:0; /* بس علشان نقدر نستخدم padding من غير ما نبوظ الجدول */
}

/* نخلي محتوى الـ td يظهر كصف واحد منظم */
#orders td:last-child:has([data-edit-one],[data-print-one]) > *{
  /* لو فيه نصوص/فراغات غير الأزرار */
}

#orders td:last-child:has([data-edit-one],[data-print-one]){
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 3) نفسّق الأزرار نفسها (تساوي عرض + محاذاة) */
#orders td:last-child [data-edit-one],
#orders td:last-child [data-print-one]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  height: 34px;
  min-width: 76px;                 /* يخليهم نفس العرض تقريبًا */
  padding: 0 12px !important;

  border-radius: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;

  margin-left: 8px;                /* في RTL ده هيبقى مسافة بين الأزرار */
}

/* 4) لو الشاشة ضيقة جدًا: نزّلهم سطرين بشكل منظم بدل بعثرة */
@media (max-width: 520px){
  #orders td:last-child{
    width: 140px;
    min-width: 140px;
    white-space: normal;
  }

  #orders td:last-child [data-edit-one],
  #orders td:last-child [data-print-one]{
    min-width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* 5) Premium colors for the two buttons (متقدم) */
#orders td:last-child [data-edit-one]{
  background: linear-gradient(135deg,
    rgba(121,40,202,.34),
    rgba(79,124,255,.18)) !important;
  border: 1px solid rgba(121,40,202,.38) !important;
}

#orders td:last-child [data-print-one]{
  background: linear-gradient(135deg,
    rgba(0,255,195,.26),
    rgba(79,124,255,.20)) !important;
  border: 1px solid rgba(0,255,195,.38) !important;
}

/* Hover premium */
#orders td:last-child [data-edit-one]:hover,
#orders td:last-child [data-print-one]:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 48px rgba(0,0,0,.32),
    0 0 26px rgba(110,168,255,.18);
}
/* =========================
   Stronger row separators (Orders)
   ========================= */

/* خط فصل أوضح بين الصفوف */
#orders tbody td{ border-bottom: 1px solid rgba(255,255,255,.24) !important; }

/* خط أقوى كل صف */
#orders tbody tr{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

/* شريط فصل أقوى كل 5 صفوف (اختياري يعطي تنظيم بصري ممتاز) */
#orders tbody tr:nth-child(5n) td{
  border-bottom: 2px solid rgba(110,168,255,.30) !important;
}

/* خط فصل واضح تحت الهيدر */
#orders thead th{
  border-bottom: 2px solid rgba(255,255,255,.20) !important;
}
/* =========================
   PREMIUM Orders Row Separator
   ========================= */

#orders tbody tr{
  position: relative;
}

/* خط فصل احترافي */
#orders tbody tr::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;

  background: linear-gradient(90deg,
      transparent,
      rgba(0,255,195,.55),
      rgba(110,168,255,.55),
      transparent);

  opacity:.85;
}

/* Hover يزيد وضوح الخط */
#orders tbody tr:hover::after{
  height:2px;
  opacity:1;
}
/* =========================
   PREMIUM Template Picker (Custom Dropdown)
   ========================= */

.tplPick{
  position: relative;
  min-width: 260px;
  flex: 0 0 auto;
}

.tplBtn{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;

  border-radius: 16px;
  padding: 10px 14px;

  border: 1px solid rgba(0,255,195,.30);
  background:
    radial-gradient(700px 180px at 10% 0%, rgba(0,255,195,.12), transparent 55%),
    radial-gradient(700px 180px at 110% 0%, rgba(79,124,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(18,22,36,.92), rgba(10,12,18,.92));

  color: rgba(240,245,255,.95);
  box-shadow:
    0 16px 44px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:right;
}

.tplBtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(0,255,195,.55);
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 0 26px rgba(0,255,195,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.tplBtn:active{ transform: translateY(0) scale(.99); }

.tplBtnTitle{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tplBtnSub{
  margin-right:auto;
  color: rgba(234,240,255,.65);
  font-size: 12px;
  white-space: nowrap;
}

.tplChevron{
  opacity:.9;
  font-size: 14px;
  transform: translateY(-1px);
}

.tplMenu{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  width: min(420px, 92vw);
  z-index: 9999;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);

  background:
    radial-gradient(900px 320px at 10% 0%, rgba(79,124,255,.20), transparent 60%),
    radial-gradient(900px 320px at 110% 0%, rgba(0,255,195,.14), transparent 60%),
    linear-gradient(180deg, rgba(18,22,36,.96), rgba(10,12,18,.96));

  box-shadow:
    0 40px 140px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.tplMenuHead{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  align-items:center;
}

.tplSearch{
  flex:1;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(240,245,255,.92);
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.tplSearch:focus{
  border-color: rgba(0,255,195,.58);
  box-shadow: 0 0 0 4px rgba(0,255,195,.12);
}

.tplMiniBtn{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(240,245,255,.92);
  cursor:pointer;
  font-weight: 900;
}

.tplList{
  max-height: 360px;
  overflow:auto;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.tplItem{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  cursor:pointer;

  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
}

.tplItem:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(110,168,255,.28);
  background: rgba(79,124,255,.10);
}

.tplItem.active{
  border-color: rgba(0,255,195,.40);
  background: linear-gradient(135deg, rgba(0,255,195,.14), rgba(79,124,255,.10));
}

.tplItemLeft{
  display:flex; flex-direction:column;
  min-width: 0;
}

.tplName{
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.tplMeta{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(234,240,255,.65);
}

.tplBadge{
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,195,.22);
  background: rgba(0,255,195,.10);
  color: rgba(210,255,242,.95);
  white-space: nowrap;
}

.tplMenuFoot{
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.60);
  font-size: 12px;
}

.tplHint{ opacity:.95; }
/* =========================
   PREMIUM Orders Counters Only
   (oTotal + oShown)
   ========================= */

#oTotal,
#oShown{
  border-radius: 16px !important;
  padding: 8px 14px !important;

  font-weight: 950 !important;
  font-size: 13px !important;
  letter-spacing: .3px;

  display: inline-flex !important;
  align-items: center;
  gap: 6px;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

/* إجمالي */
#oTotal{
  background: linear-gradient(135deg,
    rgba(79,124,255,.30),
    rgba(79,124,255,.12)) !important;

  border-color: rgba(79,124,255,.35) !important;
}

/* المعروض */
#oShown{
  background: linear-gradient(135deg,
    rgba(0,255,195,.22),
    rgba(79,124,255,.12)) !important;

  border-color: rgba(0,255,195,.35) !important;
}

/* Hover subtle */
#oTotal:hover,
#oShown:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 25px rgba(110,168,255,.18);
}
/* actions cell alignment */
#orders td.o_actions_cell{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  min-width: 210px;
}

/* زر حذف داخل الجدول بشكل Premium */
#orders .btn.danger.o_btn_del{
  background: linear-gradient(135deg,
    rgba(255,60,130,.22),
    rgba(255,107,107,.10)) !important;
  border-color: rgba(255,107,107,.38) !important;
}
#orders .btn.danger.o_btn_del:hover{
  filter: brightness(1.08);
  box-shadow: 0 0 22px rgba(255,107,107,.18);
}
/* =========================
   PREMIUM Governorates (Govs)
   Scoped to Governorates section only
   ========================= */

/* ---- Section Header (عنوان + يمين أزرار) ---- */
.card.section:has(#govs) .sectionHeader{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.card.section:has(#govs) .sectionHeader .left{
  gap:10px;
}

.card.section:has(#govs) .sectionHeader .left .pill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.card.section:has(#govs) .sectionHeader .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;

  padding:10px 10px;
  border-radius: 18px;

  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(79,124,255,.14), transparent 60%),
    radial-gradient(700px 240px at 100% 30%, rgba(0,255,195,.09), transparent 60%),
    rgba(0,0,0,.14);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* زر تحديث المحافظات */
#g_reload{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#g_reload:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#g_reload:active{ transform: translateY(0) scale(.98); }

/* ---- Tools Bar (بحث + page size + إضافة) ---- */
.card.section:has(#govs) .tools{
  margin-top: 12px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(121,40,202,.10), transparent 60%),
    radial-gradient(900px 320px at 100% 30%, rgba(0,255,195,.08), transparent 60%),
    rgba(0,0,0,.14) !important;

  box-shadow:
    0 20px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

  gap: 12px !important;
}

/* Inputs & Selects داخل شريط أدوات المحافظات */
.card.section:has(#govs) .tools .inp,
.card.section:has(#govs) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card.section:has(#govs) .tools .inp:focus,
.card.section:has(#govs) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
  transform: translateY(-1px);
}

/* زر إضافة محافظة */
#g_add{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 10px 16px !important;
  font-weight: 950 !important;
  letter-spacing: .35px !important;
  color: rgba(255,255,255,.98) !important;

  background: linear-gradient(135deg,
    rgba(79,124,255,1) 0%,
    rgba(0,255,195,.70) 55%,
    rgba(0,180,255,.86) 100%) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.30),
    0 0 26px rgba(0,255,195,.22) !important;

  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
}
#g_add:hover{
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 0 42px rgba(0,255,195,.34) !important;
}
#g_add:active{
  transform: translateY(0) scale(.98) !important;
}

/* ---- Govs Table Wrap ---- */
#govs .tableWrap{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(79,124,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Header */
#govs thead th{
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  background: linear-gradient(180deg,
    rgba(30,40,80,.95),
    rgba(15,23,48,.95)) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

/* Rows */
#govs tbody tr{
  transition: all .18s ease;
}
#govs tbody tr:hover{
  background: rgba(79,124,255,.10);
  transform: scale(1.001);
}

/* Inputs داخل الجدول */
#govs td .inp{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
}

/* ---- Actions cell alignment (حل مشكلة عدم التناسق) ---- */
#govs td .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  white-space:nowrap;
}

/* Buttons داخل جدول المحافظات */
#govs .btn{
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.08) !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#govs .btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* حفظ */
#govs .btn.primary{
  background: linear-gradient(135deg,
    rgba(79,124,255,.95),
    rgba(0,255,195,.55)) !important;
  border-color: rgba(0,255,195,.32) !important;
  color: rgba(255,255,255,.98) !important;
  box-shadow: 0 0 18px rgba(0,255,195,.12);
}

/* حذف */
#govs .btn.danger{
  background: linear-gradient(135deg,
    rgba(255,60,130,.20),
    rgba(255,107,107,.10)) !important;
  border-color: rgba(255,107,107,.38) !important;
}
#govs .btn.danger:hover{
  box-shadow: 0 0 18px rgba(255,107,107,.12);
}

/* ---- Pager ---- */
.card.section:has(#govs) .pager{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.card.section:has(#govs) #g_pageInfo{
  color: rgba(234,240,255,.72);
}
/* Premium counters for gov pills */
.card.section:has(#govs) #gTotal,
.card.section:has(#govs) #gShown{
  font-weight: 950;
  letter-spacing: .2px;
  border-color: rgba(0,255,195,.18);
  background: rgba(0,0,0,.18);
}
/* =========================
   PREMIUM Products
   Scoped to Products section only
   ========================= */

/* ---- Section Header ---- */
.card.section:has(#products) .sectionHeader{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.card.section:has(#products) .sectionHeader .left{
  gap:10px;
}
.card.section:has(#products) .sectionHeader .left .pill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.card.section:has(#products) .sectionHeader .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;

  padding:10px 10px;
  border-radius: 18px;

  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(79,124,255,.14), transparent 60%),
    radial-gradient(700px 240px at 100% 30%, rgba(0,255,195,.09), transparent 60%),
    rgba(0,0,0,.14);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* زر تحديث المنتجات */
#p_reload{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#p_reload:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#p_reload:active{ transform: translateY(0) scale(.98); }

/* ---- Tools Bar ---- */
.card.section:has(#products) .tools{
  margin-top: 12px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(121,40,202,.10), transparent 60%),
    radial-gradient(900px 320px at 100% 30%, rgba(0,255,195,.08), transparent 60%),
    rgba(0,0,0,.14) !important;

  box-shadow:
    0 20px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

  gap: 12px !important;
}

.card.section:has(#products) .tools .inp,
.card.section:has(#products) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card.section:has(#products) .tools .inp:focus,
.card.section:has(#products) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
  transform: translateY(-1px);
}

/* زر إضافة منتج (Premium) */
#p_add{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 10px 16px !important;
  font-weight: 950 !important;
  letter-spacing: .35px !important;
  color: rgba(255,255,255,.98) !important;

  background: linear-gradient(135deg,
    rgba(79,124,255,1) 0%,
    rgba(0,255,195,.70) 55%,
    rgba(0,180,255,.86) 100%) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.30),
    0 0 26px rgba(0,255,195,.22) !important;

  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
}
#p_add:hover{
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 0 42px rgba(0,255,195,.34) !important;
}
#p_add:active{ transform: translateY(0) scale(.98) !important; }

/* أزرار الاستيراد/النموذج */
#p_import_btn{
  background: linear-gradient(135deg, rgba(255,206,92,.20), rgba(255,206,92,.08)) !important;
  border-color: rgba(255,206,92,.35) !important;
}
#p_template_btn{
  background: linear-gradient(135deg, rgba(110,168,255,.22), rgba(110,168,255,.10)) !important;
  border-color: rgba(110,168,255,.35) !important;
}

/* ---- Products Table Wrap ---- */
#products .tableWrap{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(79,124,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

#products thead th{
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  background: linear-gradient(180deg,
    rgba(30,40,80,.95),
    rgba(15,23,48,.95)) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

#products tbody tr{ transition: all .18s ease; }
#products tbody tr:hover{
  background: rgba(79,124,255,.10);
  transform: scale(1.001);
}

#products td .inp{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
}

/* Actions alignment */
#products td .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  white-space:nowrap;
}

/* Buttons in table */
#products .btn{
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.08) !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#products .btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

#products .btn.primary{
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(0,255,195,.55)) !important;
  border-color: rgba(0,255,195,.32) !important;
  color: rgba(255,255,255,.98) !important;
}
#products .btn.danger{
  background: linear-gradient(135deg, rgba(255,60,130,.20), rgba(255,107,107,.10)) !important;
  border-color: rgba(255,107,107,.38) !important;
}

/* ---- Pager ---- */
.card.section:has(#products) .pager{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.card.section:has(#products) #p_pageInfo{
  color: rgba(234,240,255,.72);
}
/* =========================
   PREMIUM Size Guide
   Scoped to Size section only (#sizes)
   ========================= */

/* Header */
.card.section:has(#sizes) .sectionHeader{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.card.section:has(#sizes) .sectionHeader .left{
  gap:10px;
}
.card.section:has(#sizes) .sectionHeader .left .pill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.card.section:has(#sizes) .sectionHeader .right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;

  padding:10px 10px;
  border-radius: 18px;

  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(79,124,255,.14), transparent 60%),
    radial-gradient(700px 240px at 100% 30%, rgba(0,255,195,.09), transparent 60%),
    rgba(0,0,0,.14);

  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* زر تحديث المقاسات */
#s_reload{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .25px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#s_reload:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#s_reload:active{ transform: translateY(0) scale(.98); }

/* Tools */
.card.section:has(#sizes) .tools{
  margin-top: 12px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(121,40,202,.10), transparent 60%),
    radial-gradient(900px 320px at 100% 30%, rgba(0,255,195,.08), transparent 60%),
    rgba(0,0,0,.14) !important;

  box-shadow:
    0 20px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

  gap: 12px !important;
}

.card.section:has(#sizes) .tools .inp,
.card.section:has(#sizes) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card.section:has(#sizes) .tools .inp:focus,
.card.section:has(#sizes) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
  transform: translateY(-1px);
}

/* زر إضافة مقاس */
#s_add{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 10px 16px !important;
  font-weight: 950 !important;
  letter-spacing: .35px !important;
  color: rgba(255,255,255,.98) !important;

  background: linear-gradient(135deg,
    rgba(79,124,255,1) 0%,
    rgba(0,255,195,.70) 55%,
    rgba(0,180,255,.86) 100%) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.30),
    0 0 26px rgba(0,255,195,.22) !important;

  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
}
#s_add:hover{
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 0 42px rgba(0,255,195,.34) !important;
}
#s_add:active{ transform: translateY(0) scale(.98) !important; }

/* Table */
#sizes .tableWrap{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(79,124,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

#sizes thead th{
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  background: linear-gradient(180deg,
    rgba(30,40,80,.95),
    rgba(15,23,48,.95)) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

#sizes tbody tr{ transition: all .18s ease; }
#sizes tbody tr:hover{
  background: rgba(79,124,255,.10);
  transform: scale(1.001);
}

#sizes td .inp{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
}

/* Actions alignment */
#sizes td .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  white-space:nowrap;
}

/* Buttons in size table */
#sizes .btn{
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.08) !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#sizes .btn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

#sizes .btn.primary{
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(0,255,195,.55)) !important;
  border-color: rgba(0,255,195,.32) !important;
  color: rgba(255,255,255,.98) !important;
}
#sizes .btn.danger{
  background: linear-gradient(135deg, rgba(255,60,130,.20), rgba(255,107,107,.10)) !important;
  border-color: rgba(255,107,107,.38) !important;
}

/* Pager */
.card.section:has(#sizes) .pager{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.card.section:has(#sizes) #s_pageInfo{
  color: rgba(234,240,255,.72);
}
/* =========================
   Unified Pager Buttons (all sections)
   ========================= */
/* =========================
   Unified Pager Buttons (all sections)
   ========================= */
#p_prev,#p_next,#g_prev,#g_next,#s_prev,#s_next,#o_prev,#o_next{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#p_prev:hover,#p_next:hover,#g_prev:hover,#g_next:hover,#s_prev:hover,#s_next:hover,#o_prev:hover,#o_next:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#p_prev:active,#p_next:active,#g_prev:active,#g_next:active,#s_prev:active,#s_next:active,#o_prev:active,#o_next:active{
  transform: translateY(0) scale(.98);
}
/* =========================
   CLEAN PREMIUM (Clear & Sharp)
   - Size Guide section (contains #sizes)
   - Products section (contains #products)
   Overrides any previous glow/blur styling
========================= */

/* الكارت الأساسي: وضوح + كونتراست + حدود واضحة */
.card.section:has(#sizes),
.card.section:has(#products){
  position: relative !important;
  overflow: hidden !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  /* خلفية أوضح وأقل “تشويش” */
  background: rgba(15,23,48,.62) !important;

  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* الغِ أي Glow/blur قديم */
.card.section:has(#sizes)::before,
.card.section:has(#products)::before{
  content: none !important;
}

/* الهيدر: خط فصل واضح + مسافات أجمل */
.card.section:has(#sizes) .sectionHeader,
.card.section:has(#products) .sectionHeader{
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;

  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* عنوان القسم أوضح */
.card.section:has(#sizes) .sectionHeader h2,
.card.section:has(#products) .sectionHeader h2{
  font-weight: 950 !important;
  color: rgba(234,240,255,.95) !important;
  letter-spacing: .2px !important;
}

/* شارات Total/Shown: واضحة وبسيطة */
.card.section:has(#sizes) .pill,
.card.section:has(#products) .pill{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.20) !important;
  color: rgba(234,240,255,.82) !important;
  font-weight: 900 !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Panel للفورم (inputs فوق): واضح وبحدود */
.card.section:has(#sizes) .form,
.card.section:has(#products) .form{
  margin-top: 10px !important;
  padding: 12px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.18) !important;

  box-shadow:
    0 14px 40px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Inputs داخل الفورم: أوضح + فوكس محترم */
.card.section:has(#sizes) .form .inp,
.card.section:has(#products) .form .inp{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.26) !important;
  color: rgba(234,240,255,.92) !important;
}

.card.section:has(#sizes) .form .inp:focus,
.card.section:has(#products) .form .inp:focus{
  border-color: rgba(110,168,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(110,168,255,.14) !important;
}

/* Tools bar: واضح + متناسق */
.card.section:has(#sizes) .tools,
.card.section:has(#products) .tools{
  margin-top: 12px !important;
  padding: 12px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.16) !important;

  box-shadow:
    0 14px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Inputs/Select داخل Tools */
.card.section:has(#sizes) .tools .inp,
.card.section:has(#products) .tools .inp,
.card.section:has(#sizes) .tools .sel,
.card.section:has(#products) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(234,240,255,.92) !important;
}

.card.section:has(#sizes) .tools .inp:focus,
.card.section:has(#products) .tools .inp:focus,
.card.section:has(#sizes) .tools .sel:focus,
.card.section:has(#products) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
}

/* pager: خط واضح */
.card.section:has(#sizes) .pager,
.card.section:has(#products) .pager{
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
/* =========================
   CLEAN PREMIUM (Clear & Sharp)
   - Orders (#orders)
   - Governorates (#govs)
   - Unified Pager Buttons for ALL cards
========================= */

/* 1) كارت الأوردرات + كارت المحافظات: نفس روح المقاسات/المنتجات */
.card.section:has(#orders),
.card.section:has(#govs){
  position: relative !important;
  overflow: hidden !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(15,23,48,.62) !important;

  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* الغِ أي glow/blur سابق */
.card.section:has(#orders)::before,
.card.section:has(#govs)::before{
  content: none !important;
}

/* Header واضح */
.card.section:has(#orders) .sectionHeader,
.card.section:has(#govs) .sectionHeader{
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.card.section:has(#orders) .sectionHeader h2,
.card.section:has(#govs) .sectionHeader h2{
  font-weight: 950 !important;
  color: rgba(234,240,255,.95) !important;
  letter-spacing: .2px !important;
}

/* Pills (Total/Shown) أوضح */
.card.section:has(#orders) .pill,
.card.section:has(#govs) .pill{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.20) !important;
  color: rgba(234,240,255,.82) !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Tools bar للأوردرات والمحافظات: واضح */
.card.section:has(#orders) .tools,
.card.section:has(#govs) .tools{
  margin-top: 12px !important;
  padding: 12px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.16) !important;

  box-shadow:
    0 14px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  gap: 12px !important;
}

.card.section:has(#orders) .tools .inp,
.card.section:has(#orders) .tools .sel,
.card.section:has(#govs) .tools .inp,
.card.section:has(#govs) .tools .sel{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(234,240,255,.92) !important;
}

.card.section:has(#orders) .tools .inp:focus,
.card.section:has(#orders) .tools .sel:focus,
.card.section:has(#govs) .tools .inp:focus,
.card.section:has(#govs) .tools .sel:focus{
  border-color: rgba(0,255,195,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,255,195,.12) !important;
}

/* 2) جدول المحافظات: نفس فخامة جدول الأوردرات بدون زحمة */
#govs .tableWrap{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.18) !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#govs thead th{
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .3px !important;
  background: linear-gradient(180deg, rgba(30,40,80,.95), rgba(15,23,48,.95)) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

#govs tbody tr{
  transition: all .18s ease !important;
}
#govs tbody tr:hover{
  background: rgba(79,124,255,.10) !important;
  transform: scale(1.002) !important;
}

/* أزرار داخل جدول المحافظات نفس نظام الأوردرات */
#govs .btn{
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
#govs .btn.primary{
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(0,255,195,.6)) !important;
  border-color: rgba(0,255,195,.22) !important;
}
#govs .btn.danger{
  background: linear-gradient(135deg, rgba(255,107,107,.22), rgba(255,107,107,.08)) !important;
  border-color: rgba(255,107,107,.35) !important;
}

/* 3) توحيد شكل Pager Buttons (السابق/التالي) في كل الكروت */
.pager{
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* نفس الشكل “الراقي” لكل أزرار prev/next */
#o_prev, #o_next,
#g_prev, #g_next,
#p_prev, #p_next,
#s_prev, #s_next{
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.07) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

#o_prev:hover, #o_next:hover,
#g_prev:hover, #g_next:hover,
#p_prev:hover, #p_next:hover,
#s_prev:hover, #s_next:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 22px rgba(110,168,255,.18) !important;
}

#o_prev:active, #o_next:active,
#g_prev:active, #g_next:active,
#p_prev:active, #p_next:active,
#s_prev:active, #s_next:active{
  transform: translateY(0) scale(.98) !important;
}

/* Disabled: واضح */
#o_prev:disabled, #o_next:disabled,
#g_prev:disabled, #g_next:disabled,
#p_prev:disabled, #p_next:disabled,
#s_prev:disabled, #s_next:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 4) (اختياري) توحيد “إجراء” في جدول الأوردرات لو عندك اختلاف */
#orders td[style*="display:flex"]{
  align-items: center !important;
  gap: 8px !important;
}
#orders td[style*="display:flex"] .btn{
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
}
#orders td[style*="display:flex"] .btn.primary{
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(0,255,195,.6)) !important;
  border-color: rgba(0,255,195,.22) !important;
}
/* توحيد شكل أزرار السابق/التالي في أي Pager */
.pager .mini button.btn{
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);

  box-shadow: 0 12px 28px rgba(0,0,0,.22),
              inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.pager .mini button.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.30),
              0 0 22px rgba(110,168,255,.18);
}

.pager .mini button.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.isHidden{ display:none !important; }
/* ✅ SysCard header: خلى العنوان يسار(بالمعنى) والأدوات يمين وماتنزلش */
#sysCard h2{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

#sysCard h2 > span:last-child{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;   /* أهم سطر */
  margin-inline-start:auto !important;
  white-space:nowrap !important;
}

/* لو الـ pill طويل */
#connPillTop{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ✅ FB pages card header RTL مضبوط */
#fbpagesCard .card-h{
  direction: rtl !important;
  text-align: right !important;
  flex-direction: row-reverse !important;  /* يخلي العنوان يمين والزر شمال/حسب تصميمك */
}

/* خلى النص يمين */
#fbpagesCard h3,
#fbpagesCard p{
  text-align:right !important;
}
/* =========================
   OFFICIAL Facebook Button
   REAL LOOK
========================= */

#fbConnectBtn.fb-real{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:#1877F2 !important;
  border:1px solid #1877F2 !important;
  color:#fff !important;

  padding:10px 16px !important;
  border-radius:6px !important;

  font-weight:600 !important;
  font-size:14px;

  box-shadow:none !important;
  letter-spacing:0 !important;

  transition: background .15s ease, transform .05s ease;
}

/* أيقونة Facebook */
#fbConnectBtn .fb-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:20px;
  height:20px;

  background:#fff;
  color:#1877F2;

  border-radius:3px;
  font-weight:900;
  font-family:Arial, Helvetica, sans-serif;
}

/* hover الرسمي */
#fbConnectBtn.fb-real:hover{
  background:#166FE5 !important;
}

/* click effect */
#fbConnectBtn.fb-real:active{
  background:#145FDB !important;
  transform:scale(.98);
}

/* إزالة أي glow قديم */
#fbConnectBtn::before,
#fbConnectBtn::after{
  content:none !important;
}

.welcome-bonus-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.welcome-bonus-modal.show{
  display: block !important;
}

.welcome-bonus-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 20% 15%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(600px 360px at 80% 20%, rgba(34,197,94,.12), transparent 60%),
    rgba(5,10,20,.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.welcome-bonus-dialog{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  padding: 28px 22px 22px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(9,14,27,.97));
  box-shadow:
    0 40px 100px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation: welcomePopIn .28s ease;
}

@keyframes welcomePopIn{
  from{
    opacity: 0;
    transform: translate(-50%, -46%) scale(.96);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.welcome-bonus-close{
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: .18s ease;
}

.welcome-bonus-close:hover{
  background: rgba(255,255,255,.10);
}

.welcome-bonus-badge{
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #e9ddff;
  border: 1px solid rgba(124,92,255,.28);
  background: rgba(124,92,255,.12);
  margin-bottom: 16px;
}

.welcome-bonus-icon-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.welcome-bonus-icon{
  width: 82px;
  height: 82px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  background: linear-gradient(135deg, #7c5cff, #5f42f0);
  box-shadow: 0 18px 40px rgba(124,92,255,.28);
}

.welcome-bonus-title{
  font-size: 28px;
  line-height: 1.35;
  font-weight: 950;
  margin-bottom: 10px;
}

.welcome-bonus-sub{
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.76);
  margin-bottom: 22px;
}

.welcome-bonus-actions{
  display:flex !important;
  gap:14px !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin-top:24px !important;
}

.welcome-main-btn,
.welcome-secondary-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:210px !important;
  height:58px !important;
  margin:0 !important;
  padding:0 26px !important;
  border-radius:18px !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  font-family:inherit !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  border:none !important;
  outline:none !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease !important;
}

.welcome-main-btn{
  color:#fff !important;
  background:linear-gradient(135deg, #9a7cff 0%, #7b5cff 52%, #5e42f3 100%) !important;
  box-shadow:
    0 18px 38px rgba(103,74,255,.35),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.welcome-main-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 24px 44px rgba(103,74,255,.42),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.welcome-main-btn:active{
  transform:translateY(0) !important;
}

.welcome-secondary-btn{
  color:#f8fafc !important;
  background:linear-gradient(180deg, rgba(33,42,66,.96), rgba(16,22,38,.96)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.welcome-secondary-btn:hover{
  transform:translateY(-2px) !important;
  background:linear-gradient(180deg, rgba(40,50,78,.98), rgba(22,28,46,.98)) !important;
  border-color:rgba(255,255,255,.20) !important;
}

.welcome-secondary-btn:active{
  transform:translateY(0) !important;
}

.welcome-main-btn:focus,
.welcome-secondary-btn:focus{
  outline:none !important;
}

@media (max-width: 640px){
  .welcome-bonus-dialog{
    width: min(94vw, 520px);
    padding: 24px 16px 18px;
    border-radius: 24px;
  }

  .welcome-bonus-title{
    font-size: 23px;
  }

  .welcome-bonus-sub{
    font-size: 14px;
  }

  .welcome-bonus-actions{
    flex-direction:column !important;
    gap:10px !important;
  }

  .welcome-main-btn,
  .welcome-secondary-btn{
    width:100% !important;
    min-width:0 !important;
    height:54px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }
}
/* =========================
   MOBILE FIX PATCH
   حطه آخر ملف الـ CSS
========================= */

@media (max-width: 768px){

  .wrap{
    padding: 14px 10px 40px !important;
  }

  .topbar{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .brand{
    width: 100%;
  }

  .title h1{
    font-size: 18px !important;
  }

  .title .sub{
    font-size: 12px !important;
  }

  .gridTop{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .sectionHeader{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .sectionHeader .left,
  .sectionHeader .right{
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .tools{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tools .inp,
  .tools .sel{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .row{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn{
    width: 100%;
    justify-content: center !important;
    white-space: normal !important;
  }

  .pill,
  .badge{
    white-space: normal !important;
    text-align: center;
  }

  .form.cols5,
  .form.cols2{
    grid-template-columns: 1fr !important;
  }

  .pricingGrid{
    grid-template-columns: 1fr !important;
  }

  .planPrice{
    font-size: 22px !important;
  }

  .tableWrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }

  table{
    min-width: 680px !important;
  }

  th, td{
    font-size: 12px !important;
    padding: 8px !important;
  }

  .actions{
    flex-direction: column !important;
    align-items: stretch !important;
    white-space: normal !important;
  }

  .actions .btn{
    width: 100% !important;
    margin: 0 !important;
  }

  #orders td.o_actions_cell{
    min-width: 140px !important;
    display: table-cell !important;
  }

  #orders td:last-child [data-edit-one],
  #orders td:last-child [data-print-one]{
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
  }

  #oTotal,
  #oShown,
  #gTotal,
  #gShown{
    width: 100% !important;
    justify-content: center !important;
  }

  .pager{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .pager .mini{
    width: 100% !important;
    justify-content: space-between !important;
  }

  .pager .mini button.btn{
    flex: 1 1 0;
  }

  #sysCard h2{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #sysCard h2 > span:last-child{
    flex-wrap: wrap !important;
    white-space: normal !important;
    margin-inline-start: 0 !important;
  }

  #connPillTop{
    max-width: 100% !important;
  }

  #orderModal > div,
  #tplModal > div{
    width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    padding: 12px !important;
    border-radius: 16px !important;
    max-width: none !important;
  }

  #orderModal table{
    min-width: 620px !important;
  }

  .tplPick{
    min-width: 100% !important;
    width: 100% !important;
  }

  .tplBtn{
    width: 100% !important;
  }

  .tplBtnTitle{
    max-width: 150px !important;
  }

  .tplMenu{
    width: 100% !important;
    right: 0 !important;
  }
    body{
    overflow-x: hidden !important;
  }

  .mebox{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .planHead{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .toastWrap{
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  .welcome-bonus-dialog{
    width: calc(100vw - 16px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .welcome-bonus-title{
    font-size: 22px !important;
  }

  .welcome-bonus-sub{
    line-height: 1.7 !important;
  }

  #fbpagesCard .card-h{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #fbConnectBtn.fb-real{
    width: 100% !important;
    justify-content: center !important;
  }

  code{
    white-space: normal !important;
    word-break: break-word !important;
  }

  .inp,
  .sel,
  .btn{
    font-size: 16px !important;
  }

  .tableWrap table,
  #products table,
  #sizes table,
  #govs table,
  #orders table{
    min-width: 680px !important;
  }

  #products td .actions,
  #sizes td .actions,
  #govs td .actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #products td .actions .btn,
  #sizes td .actions .btn,
  #govs td .actions .btn{
    width: 100% !important;
  }
}
#tryDemoTopBtn{
  background: linear-gradient(135deg, #5b46f5, #7c5cff);
  color: #fff;
  border: 1px solid rgba(124,92,255,.35);
}
  .ob-actions-premium{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:18px;
  }

  .ob-connect-premium{
    position:relative;
    overflow:hidden;
    width:100%;
    border:none;
    outline:none;
    cursor:pointer;
    border-radius:24px;
    padding:20px;
    text-align:right;
    color:#fff;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
      radial-gradient(circle at bottom left, rgba(255,255,255,.10), transparent 24%),
      linear-gradient(135deg, #1877f2 0%, #0f5fd6 38%, #0a49b8 100%);
    box-shadow:
      0 24px 60px rgba(24,119,242,.28),
      0 8px 22px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(255,255,255,.06);
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
  }

  .ob-connect-premium:hover{
    transform:translateY(-2px);
    filter:brightness(1.03);
    box-shadow:
      0 30px 70px rgba(24,119,242,.34),
      0 10px 26px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.08);
  }

  .ob-connect-premium:active{
    transform:translateY(0);
  }

  .ob-connect-premium:disabled{
    opacity:.72;
    cursor:not-allowed;
    transform:none;
    filter:none;
  }

  .ob-connect-premium::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 18%, transparent 36%);
    transform:translateX(-120%);
    transition:transform .8s ease;
    pointer-events:none;
  }

  .ob-connect-premium:hover::before{
    transform:translateX(120%);
  }

  .ob-connect-premium::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:23px;
    border:1px solid rgba(255,255,255,.12);
    pointer-events:none;
  }

  .ob-connect-premium-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:relative;
    z-index:1;
  }

  .ob-connect-premium-main{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    flex:1;
  }

  .ob-connect-premium-icon{
    position:relative;
    width:60px;
    height:60px;
    flex:0 0 60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      0 10px 24px rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .ob-connect-premium-icon::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    opacity:.7;
  }

  .ob-connect-premium-icon span{
    font-size:34px;
    font-weight:900;
    line-height:1;
    transform:translateY(-1px);
  }

  .ob-connect-premium-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .ob-connect-premium-badge{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2px;
    color:#eaf3ff;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  }

  .ob-connect-premium-title{
    font-size:20px;
    font-weight:900;
    line-height:1.25;
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.08);
  }

  .ob-connect-premium-sub{
    font-size:13px;
    line-height:1.7;
    color:rgba(255,255,255,.92);
    max-width:640px;
  }

  .ob-connect-premium-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
    font-size:22px;
    font-weight:900;
    transition:transform .18s ease, background .18s ease;
  }

  .ob-connect-premium:hover .ob-connect-premium-arrow{
    transform:translateX(-3px);
    background:rgba(255,255,255,.16);
  }

  .ob-connect-premium-footer{
    position:relative;
    z-index:1;
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .ob-connect-premium-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .ob-chip{
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    color:#f6fbff;
    background:rgba(255,255,255,.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 4px 12px rgba(0,0,0,.10);
  }

  .ob-connect-premium-note{
    font-size:12px;
    color:rgba(255,255,255,.86);
    white-space:nowrap;
  }

  .ob-secondary-actions-premium{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .ob-secondary-btn{
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:13px 14px;
    background:rgba(255,255,255,.04);
    color:#eaf0ff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:
      transform .16s ease,
      border-color .16s ease,
      background .16s ease,
      box-shadow .16s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }

  .ob-secondary-btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);
    box-shadow:
      0 10px 22px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  .ob-secondary-btn:active{
    transform:translateY(0);
  }

  @media (max-width: 720px){
    .ob-connect-premium{
      padding:16px;
      border-radius:20px;
    }

    .ob-connect-premium::after{
      border-radius:19px;
    }

    .ob-connect-premium-top{
      align-items:flex-start;
    }

    .ob-connect-premium-main{
      align-items:flex-start;
      gap:12px;
    }

    .ob-connect-premium-icon{
      width:52px;
      height:52px;
      flex-basis:52px;
      border-radius:16px;
    }

    .ob-connect-premium-icon span{
      font-size:30px;
    }

    .ob-connect-premium-title{
      font-size:17px;
    }

    .ob-connect-premium-sub{
      font-size:12px;
      line-height:1.65;
    }

    .ob-connect-premium-arrow{
      width:42px;
      height:42px;
      flex-basis:42px;
      border-radius:14px;
      font-size:20px;
    }

    .ob-secondary-actions-premium{
      grid-template-columns:1fr;
    }

    .ob-connect-premium-footer{
      align-items:flex-start;
    }

    .ob-connect-premium-note{
      white-space:normal;
    }
  }
html{
  scroll-behavior:smooth;
}

.sideNavToggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1200;
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  background:#0f1730;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}

.sideNavFixed{
  position:fixed;
  top:0;
  right:0;
  width:280px;
  max-width:85vw;
  height:100vh;
  z-index:1300;
  background:#0b1220;
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-10px 0 30px rgba(0,0,0,.30);
  padding:18px 14px;
  transform:translateX(100%);
  transition:transform .25s ease;
  overflow-y:auto;
}

.sideNavFixed.open{
  transform:translateX(0);
}

.sideNavHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.sideNavTitle{
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.sideNavClose{
  border:none;
  background:rgba(255,255,255,.08);
  color:#fff;
  width:38px;
  height:38px;
  border-radius:10px;
  cursor:pointer;
  font-size:20px;
}

.sideNavLinks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sideNav-link{
  display:block;
  text-decoration:none;
  color:rgba(234,240,255,.90);
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
  transition:.2s ease;
}

.sideNav-link:hover{
  background:rgba(110,168,255,.12);
  border-color:rgba(110,168,255,.24);
}

.sideNavOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1250;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.sideNavOverlay.show{
  opacity:1;
  pointer-events:auto;
}

.withSideNav{
  transition:padding-right .25s ease;
}

@media (min-width: 1100px){
  .withSideNav{
    padding-right:0;
  }
}

#productsCard,
#govsCard,
#ordersCard,
#sizesCard,
#adminCard,
#fbpagesCard,
#billingCard,
#sysCard{
  scroll-margin-top:24px;
}
@media (max-width: 768px){

  /* تخفيف عام */
  .card{
    padding: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  }

  .section{
    margin-top: 10px !important;
  }

  .sectionHeader{
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .sectionHeader h2{
    font-size: 14px !important;
  }

  .pill,
  .badge{
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
  }

  /* الأزرار بشكل أهدى */
  .btn{
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .btn:hover{
    transform: none !important;
  }

  /* أدوات الأقسام */
  .tools{
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* فورم الإدخال */
  .form{
    padding: 0 !important;
    margin-bottom: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .inp,
  .sel{
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }

  /* صف أزرار الهيدر في الأقسام */
  .sectionHeader .right{
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 8px !important;
  }

  /* جداول أهدى */
  .tableWrap{
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  th, td{
    font-size: 12px !important;
    padding: 7px !important;
  }

  thead th{
    font-size: 11px !important;
  }

  /* أزرار الأكشن داخل الجداول */
  .actions{
    gap: 6px !important;
  }

  .actions .btn{
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* الـ pager */
  .pager{
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .pager .mini{
    font-size: 12px !important;
  }

  /* topbar */
  .topbar{
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .brand-logo{
    width: 38px !important;
    height: 38px !important;
  }

  .title h1{
    font-size: 17px !important;
  }

  .title .sub{
    font-size: 11px !important;
  }

  /* زرار تجربة النظام + زرار فيسبوك */
  #tryDemoTopBtn,
  #fbConnectBtn{
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  /* الشريط الجانبي */
  .sideNavToggle{
    top: 10px !important;
    right: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .sideNavFixed{
    width: 250px !important;
    padding: 14px 10px !important;
  }

  .sideNav-link{
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  /* المودالات أخف */
  #orderModal > div,
  #tplModal > div,
  .welcome-bonus-dialog{
    box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  }

  /* تقليل اللمعة في الأزرار المميزة */
  #o_add_manual,
  #o_tpl_manage,
  #p_add,
  #g_add,
  #s_add,
  .planBtn,
  .ob-connect-premium{
    box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
  }

  #o_add_manual::before,
  #o_tpl_manage::before,
  .ob-connect-premium::before,
  #o_add_manual::after,
  #o_tpl_manage::after{
    display: none !important;
  }
}
@media (max-width: 768px){

  /* شيل فكرة إن كل زر ياخد سطر كامل */
  .tools .btn,
  .sectionHeader .right .btn,
  .pager .btn{
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* صفوف الأزرار تبقى ملفوفة بشكل طبيعي */
  .tools,
  .sectionHeader .right,
  .pager .mini{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* الأزرار الصغيرة والمتوسطة */
  .tools .btn,
  .sectionHeader .right .btn{
    min-width: calc(50% - 4px);
    width: calc(50% - 4px) !important;
    justify-content: center !important;
  }

  /* لو عايز بعض الأزرار تفضل بعرض كامل */
  #fbConnectBtn,
  #tryDemoTopBtn,
  #p_add,
  #g_add,
  #s_add,
  #o_add_manual,
  #omSave,
  .welcome-main-btn,
  .welcome-secondary-btn{
    width: 100% !important;
    min-width: 100% !important;
  }

  /* أزرار pager نصفين */
  .pager .mini button.btn{
    flex: 1 1 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
  }
}
/* أوردر محذوف / remove */
.order-row-remove td{
  background: rgba(255, 107, 107, 0.16) !important;
  border-color: rgba(255, 107, 107, 0.35) !important;
}

/* أوردر العميل عدل عليه / locked */
.order-row-locked td{
  background: rgba(255, 206, 92, 0.16) !important;
  border-color: rgba(255, 206, 92, 0.35) !important;
}