/* =========================================================
   Neon Dark UI — AffiliateShop (Cyan/Teal Glow + Glass)
   Clean + readable text on dark, no bootstrap color clashes
   ========================================================= */

:root{
  /* Base */
  --bg:           #0a0f1c;
  --bg-2:         #0d1526;
  --surface:      rgba(13,21,38,.65);
  --surface-2:    rgba(9,14,25,.55);
  --border:       rgba(35,215,255,.22);

  /* Text */
  --text:         #eafaff;   /* نص رئيسي */
  --muted:        #9fd0e4;   /* نص ثانوي */

  /* Accents / Glow */
  --accent:       #23d7ff;   /* cyan */
  --accent-2:     #00ffc6;   /* teal */
  --accent-soft:  rgba(35,215,255,.12);
  --success:      #22c55e;
  --warning:      #f59e0b;
  --danger:       #ef4444;

  --glass-blur:   12px;
}

/* ---------- Background ---------- */
html, body{
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(35,215,255,.08), transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, rgba(0,255,198,.06), transparent 70%),
    linear-gradient(180deg, #091224 0%, #0a0f1c 100%);
  color: var(--text);
}

/* ---------- Typography fixes (وضوح الكتابة) ---------- */
h1,h2,h3,h4,h5,h6{ color:#f0fbff; }
small, .small{ color: var(--muted) !important; }
.text-muted{ color: var(--muted) !important; }
.text-dark{ color: var(--text) !important; }        /* Bootstrap override */
.table .text-dark{ color: var(--text) !important; } /* inside tables */

/* ---------- Links & Navbar ---------- */
a, .nav-link{ color: var(--text); text-decoration: none; }
a:hover, .nav-link:hover, .nav-link.active{ color: var(--accent) !important; }

.navbar{
  background: linear-gradient(180deg, rgba(17,26,45,.80), rgba(10,15,28,.65)) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur));
}
.navbar .navbar-brand{ color: var(--text) !important; }

/* ---------- Glass + Glow helpers ---------- */
.glass{
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  backdrop-filter: blur(var(--glass-blur));
}
.border-glow{
  border: 1px solid var(--border) !important;
  box-shadow:
    0 0 0 1px rgba(35,215,255,.15) inset,
    0 0 24px rgba(35,215,255,.10),
    0 0 64px rgba(0,255,198,.10);
}

/* ---------- Cards / Modals / Dropdown / Lists ---------- */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.offcanvas,
.toast,
.accordion-item{
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  color: var(--text) !important;
  border-radius: 14px;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 30px var(--accent-soft);
}
.card .card-body{ color: var(--text); }

/* ---------- Tables ---------- */
.table{ color: var(--text); border-color: var(--border); }
.table thead th{
  background: linear-gradient(180deg, rgba(35,215,255,.10), transparent);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table > :not(caption) > * > *{
  background: rgba(9,14,25,.6);
  border-color: var(--border);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{ background: rgba(12,20,36,.65); }

/* ---------- Forms ---------- */
.form-control,
.form-select,
.input-group-text,
.form-check-input{
  background: rgba(14,22,40,.6) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(var(--glass-blur));
}
.form-control::placeholder{ color: var(--muted); }
.form-check-input:checked{
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn-primary{
  --bs-btn-color: #02121a;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #031016 !important;
  border: none;
  box-shadow: 0 0 0 1px rgba(35,215,255,.35) inset,
              0 6px 18px rgba(0,255,198,.18),
              0 0 40px rgba(35,215,255,.18);
}
.btn-primary:hover{ filter: brightness(1.06); }

.btn-outline-secondary{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: rgba(35,215,255,.10);
  --bs-btn-hover-border-color: var(--accent);
}

/* ---------- Badges / Chips ---------- */
.badge-soft,
.badge.bg-light,         /* Bootstrap bg-light inside badges */
.badge.text-bg-light{    /* Bootstrap v5 helper */
  background: rgba(35,215,255,.12) !important;
  color: #d7f5ff !important;
  border: 1px solid rgba(35,215,255,.25) !important;
  border-radius: 10px;
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1000px 600px at 15% -20%, rgba(35,215,255,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,255,198,.10), transparent 70%),
    linear-gradient(135deg, #0b1424 0%, #0c1222 100%) !important;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 0 40px rgba(35,215,255,.10);
}
.hero-illus{
  min-height: 260px;
  border-radius: 14px;
  background:
    radial-gradient(600px 400px at 70% 20%, rgba(35,215,255,.18), transparent 60%),
    radial-gradient(500px 320px at 20% 80%, rgba(0,255,198,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  box-shadow: 0 0 30px rgba(35,215,255,.12) inset;
}

/* ---------- “سينما” تِكر (السطر فوق الهيرو) ---------- */
.cinema-ticker{
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(8,26,40,.8), rgba(8,20,36,.75));
  border: 1px solid rgba(0,210,255,.25);
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.18), 0 0 30px rgba(0,210,255,.10);
  color: var(--text);
}
.cinema-track{ display:flex; gap:28px; white-space:nowrap; animation:ticker-move 22s linear infinite; }
.cinema-item{
  font-weight:700; letter-spacing:.4px; color:#e6fbff;
  text-shadow: 0 0 8px rgba(0,240,255,.55), 0 0 22px rgba(0,240,255,.35);
}
.cinema-sep{ opacity:.6; color:#a5f3ff; text-shadow:0 0 10px rgba(0,210,255,.45); }
@keyframes ticker-move{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Panel تحت الهيرو: لائحة أخبار/نِقاط ---------- */
.bullet-panel{
  border-radius: 14px; padding: 12px 14px;
  background: radial-gradient(120% 120% at 10% -10%, rgba(0,210,255,.06), transparent 50%),
              linear-gradient(180deg, rgba(7,20,35,.72), rgba(7,13,28,.72));
  border: 1px solid rgba(0,210,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.16), 0 0 26px rgba(0,210,255,.09);
  color: var(--text);
}
.bullet-panel ul{ margin:0; padding-inline-start:22px; }
.bullet-panel li{ margin:6px 0; position:relative; line-height:1.6; }
.bullet-panel li::marker{ content:""; }
.bullet-panel li:before{
  content:""; position:absolute; right:calc(100% + 8px); top:8px;
  width:8px; height:8px; border-radius:50%;
  background:#38f3ff; box-shadow:0 0 8px #38f3ff, 0 0 18px rgba(56,243,255,.6);
}

/* ---------- Rotator نسخة “خبر واحد كل مرة” ---------- */
.bullet-rotator{
  min-height: 50px; height: 50px;
  padding: 10px 14px; border-radius: 14px;
  background: radial-gradient(120% 120% at 10% -10%, rgba(0,210,255,.06), transparent 50%),
              linear-gradient(180deg, rgba(7,20,35,.72), rgba(7,13,28,.72));
  border: 1px solid rgba(0,210,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.16), 0 0 26px rgba(0,210,255,.09);
  overflow: hidden; color: var(--text);
}
.bullet-rotator li{
  position:absolute; inset:0; display:flex; align-items:center;
  line-height:1.65; font-size:.95rem; color:var(--text);
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
  padding-inline-start:22px;
}
.bullet-rotator li.active{ opacity:1; transform:translateY(0); }
.bullet-rotator li::before{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:#38f3ff; box-shadow:0 0 8px #38f3ff, 0 0 18px rgba(56,243,255,.6);
}
@media (max-width:576px){ .bullet-rotator{ min-height:46px; padding:8px 12px; } }

/* ---------- Product cards ---------- */
.card-product{
  border-radius: 16px; overflow:hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 10px 35px rgba(0,0,0,.35), 0 0 26px rgba(35,215,255,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-product .img-wrap{
  background: radial-gradient(600px 280px at 60% -30%, rgba(35,215,255,.18), transparent 60%),
              rgba(10,16,28,.6);
}
.card-product:hover{ transform: translateY(-2px); }

/* ---------- Alerts ---------- */
.alert{
  border-color: var(--border); color: var(--text);
  backdrop-filter: blur(var(--glass-blur));
}
.alert-info{    background: rgba(35,215,255,.10); color:#d4f6ff; border-color: rgba(35,215,255,.25); }
.alert-success{ background: rgba(34,197,94,.12);  color:#c6f7d6; border-color: rgba(34,197,94,.22); }
.alert-warning{ background: rgba(245,158,11,.12); color:#fde69a; border-color: rgba(245,158,11,.22); }
.alert-danger{  background: rgba(239,68,68,.12);  color:#ffd1d1; border-color: rgba(239,68,68,.22); }

/* ---------- Accordion (FAQ) ---------- */
.accordion-button{
  background: var(--surface);
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.accordion-button:focus{ box-shadow: 0 0 0 .25rem rgba(35,215,255,.18); }
.accordion-button::after{ filter: invert(1); }

/* ---------- Footer ---------- */
footer, .footer{
  background: linear-gradient(180deg, rgba(13,21,38,.8), rgba(10,15,28,.8));
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ---------- Scrollbar ---------- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:6px;
}
*::-webkit-scrollbar-track{ background:#0a0f1c; }

/* ---------- KPIs ---------- */
.hr-soft{ border-top: 1px solid var(--border); }
.kpis .num{ color:#a9efff; }



/* ==== Fix Pack: focus + text colors + stacking ==== */

/* 1) خليه يبان الفوكس مزيان ويكتب بوضوح */
.form-control,
.form-select,
textarea,
input,
button {
  color: var(--text) !important;
  caret-color: var(--accent);
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder { color: var(--muted) !important; }

.form-control:focus,
.form-select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .25rem rgba(35,215,255,.25) !important;
  background: rgba(14,22,40,.72) !important;
}

/* 2) علاش “كحل”؟ Bootstrap كيستعمل .text-dark/.bg-light داخل badges والليست */
.text-dark { color: #e6f7ff !important; }
.text-muted { color: var(--muted) !important; }

/* badges/chips */
.badge,
.badge.bg-light {
  background: rgba(35,215,255,.12) !important;
  color: #bfefff !important;
  border: 1px solid rgba(35,215,255,.25) !important;
}

/* باش dropdown/table متبّينش بكحل */
.dropdown-menu,
.table > :not(caption) > * > * {
  color: var(--text) !important;
}

/* 3) منع أي عنصر يتحول لـ overlay فوق الفيلترات/الفورم */
.cinema-ticker,
.cinema-track,
.bullet-panel,
.bullet-rotator {
  position: relative;
  z-index: 0;
  pointer-events: auto;
}
.cinema-ticker:before { pointer-events: none; }

/* حط ذا الأجزاء اللي فيها فورم فوق (فلترات الأدمن/البحث) */
.navbar,
.admin-toolbar,
.filters,
.filters .row,
.card .card-header {
  position: relative;
  z-index: 5;
  isolation: isolate; /* يمنع تأثير ظلال خارجية */
}

/* فاش شي عنصر كيغطيك بلا قصد، نمنع الكليك غير على العناصر الزخرفية */
.cinema-track * { pointer-events: none; }

/* 4) bg-light ديال Bootstrap كنبدلوه لنسخة نيون باش متخنقش النص */
.bg-light {
  background-color: rgba(35,215,255,.08) !important;
}

/* 5) selection كيعاون على وضوح الكتابة */
::selection {
  background: rgba(35,215,255,.35);
  color: #031016;
}

/* 6) أزرار/حقول معطلة باينة اللون */
.form-control:disabled,
.form-select:disabled,
button:disabled {
  color: #cfeaf7 !important;
  background: rgba(14,22,40,.45) !important;
  opacity: .7;
}

/* 7) تصحيح ارتفاع الروتيتور كيما بغيتي (يبقى يناسب أطول جملة) */
.bullet-rotator { height: auto !important; min-height: 0 !important; }



/* =========================================================
   AffiliateShop — Soft Ghost Button (neon glass)
   Paste at the END of dark.css
   ========================================================= */

/* أساس الزر */
.btn.btn-soft-ghost{
  --ghost-border: rgba(35,215,255,.28);
  --ghost-bg: rgba(35,215,255,.06);
  --ghost-bg-hover: rgba(35,215,255,.12);
  --ghost-ring: rgba(35,215,255,.28);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .625rem 1rem;                 /* حجم مريح */
  border-radius: .9rem;
  border: 1px solid var(--ghost-border);
  background: var(--ghost-bg);
  color: #e6f7ff !important;
  text-decoration: none !important;
  line-height: 1.35;

  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(35,215,255,.08) inset,
    0 6px 20px rgba(0,0,0,.25),
    0 0 22px rgba(35,215,255,.10);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .04s ease-in;
}

/* حجم كبير يتماشى مع .btn-lg */
.btn.btn-soft-ghost-lg{ padding: .75rem 1.15rem; border-radius: 1rem; font-weight: 600; }

/* Hover/Active */
.btn-soft-ghost:hover{
  background: var(--ghost-bg-hover);
  border-color: #23d7ff;
  color: #23d7ff !important;             /* accent على الهوفر */
}
.btn-soft-ghost:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 0 0 1px rgba(35,215,255,.10) inset,
    0 3px 14px rgba(0,0,0,.35),
    0 0 16px rgba(35,215,255,.10);
}

/* Focus واضح بنفس روح النيون */
.btn-soft-ghost:focus,
.btn-soft-ghost:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 .25rem var(--ghost-ring),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(35,215,255,.12) inset;
  border-color: #23d7ff;
}

/* Disabled */
.btn-soft-ghost:disabled,
.btn-soft-ghost.disabled{
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(.1);
}

/* أي SVG/Icon داخل الزر */
.btn-soft-ghost > svg,
.btn-soft-ghost .bi{ width: 1em; height: 1em; }

/* تصحيح على الموبايل: الزر بعرض كامل بدون تمدد غريب */
@media (max-width: 576px){
  .btn-soft-ghost.w-100{ display: inline-flex; width: 100%; }
}

/* لو عندك زر داخل .row .align-items-start، ما يتزاحمش عمودياً */
.row.align-items-start .btn-soft-ghost{ align-self: stretch; }

/* تأكيد عدم تعارض مع الزخارف القريبة */
.btn-soft-ghost{ position: relative; z-index: 3; }


/* ===== Bullet bar: single line (rotator + button) ===== */
.bullet-bar{
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.bullet-bar.no-wrap{ flex-wrap: nowrap; }

/* rotator يتمدّد ويأخذ الباقي */
.bullet-bar .bullet-rotator{
  flex: 1 1 auto;
  min-width: 0;              /* يسمح للنص يتقلّص بدون كسر الـflex */
}

/* الزر عرض ثابت قابل للتكيف */
.bullet-bar .bullet-btn{
  flex: 0 0 230px;           /* ثابت على الدِّسكتوب */
  white-space: nowrap;       /* ما يتكسّرش النص داخل الزر */
}
@media (max-width: 480px){
  .bullet-bar .bullet-btn{ flex-basis: 180px; } /* أصغر على الموبايل */
}

/* وسط الجملة داخل الروتيتور (اختياري) */
.bullet-rotator li{
 /* خلّي الرسالة وسط الصندوق */
  text-align: center;
  padding-inline-start: 28px; /* نخلّي مسافة نقطة النيون */
}









/* Badge colors for statuses (neon dark) */
.badge.status{
  border: 1px solid transparent;
  padding: .35rem .55rem;
  border-radius: .65rem;
  font-weight: 600;
}

/* أخضر: delivered/approved */
.badge.status.success{
  color: #c6f7d6 !important;
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.30) !important;
  box-shadow: 0 0 18px rgba(34,197,94,.12);
}

/* أحمر: cancelled/rejected */
.badge.status.danger{
  color: #ffd1d1 !important;
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.30) !important;
  box-shadow: 0 0 18px rgba(239,68,68,.12);
}

/* أصفر: pending */
.badge.status.warning{
  color: #fde69a !important;
  background: rgba(245,158,11,.16) !important;
  border-color: rgba(245,158,11,.32) !important;
  box-shadow: 0 0 18px rgba(245,158,11,.10);
}

/* رمادي: no_answer */
.badge.status.secondary{
  color: #d7e3ef !important;
  background: rgba(148,163,184,.18) !important;
  border-color: rgba(148,163,184,.32) !important;
}

/* أزرق: processing */
.badge.status.primary{
  color: #cae6ff !important;
  background: rgba(59,130,246,.16) !important;
  border-color: rgba(59,130,246,.32) !important;
}

/* سماوي: shipped */
.badge.status.info{
  color: #bff6ff !important;
  background: rgba(35,215,255,.16) !important;
  border-color: rgba(35,215,255,.32) !important;
}










/* زر الهامبورغر: خلفية ديغراديان على الزر */
.navbar .toggler-soft{
  background: linear-gradient(135deg, #00ffc6 0%, #00b4ff 100%);
  border: 0;
  border-radius: .6rem;
  padding: .35rem .5rem;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
}

/* رجّع الشرَيطات باللون الأبيض – نكسر rule ديال none !important */
nav.navbar .navbar-toggler .navbar-toggler-icon{
  width: 1.25rem; height: 1.25rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* SVG ديال الشرَيطات باللون الأبيض */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  opacity: 1;
}

/* تباين أفضل فاش كتدوز عليه */
.navbar .toggler-soft:focus,
.navbar .toggler-soft:hover{
  box-shadow: 0 0 0 2px rgba(255,255,255,.28) inset, 0 0 0 3px rgba(0,255,198,.35);
  outline: none;
}