: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}
    .logo{
      width:44px;height:44px;border-radius:16px;
      background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(57,217,138,.82));
      box-shadow: var(--shadow);
    }
    .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;
}