/* ==========================================================
   Theme layer (Bootstrap-friendly)
   - Light/Dark via data-bs-theme
   - Telecom carrier accents
========================================================== */
@import url("country-flags.css");


:root{
  --carrier-ym:  #e53e3e;
  --carrier-sf:  #3b82f6;
  --carrier-mtn: #eab308;
  --carrier-you: #8b5cf6;
  /* افتراضي = داكن (قبل تشغيل JS أو عند غياب data-bs-theme على الجذر) */
  --clr-bg:       #0b1020;
  --clr-surface:  rgba(22, 28, 48, 0.72);
  --clr-surface2: rgba(32, 40, 68, 0.88);
  --clr-border:   rgba(255,255,255,.12);
  --clr-border-hi:rgba(99, 140, 255,.45);
  --clr-txt:      #f2f4ff;
  --clr-txt2:     #c5cce0;
  --clr-txt3:     #8b95b0;
  --clr-cyan:     #38e0f5;
  --clr-glass:    rgba(255,255,255,.06);
  --clr-glass-strong: rgba(255,255,255,.10);
  --shadow-theme: 0 18px 48px rgba(0,0,0,.35);
}

/* Global typography */
html, body{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Prefer Bootstrap tokens, just tint */
html[data-bs-theme="dark"], body[data-bs-theme="dark"]{
  --app-accent: var(--carrier-sf);
  --app-accent-2: var(--carrier-you);

  /* وضع ليلي أوضح — أقل عتامة، نص أعلى تبايناً، أسطح زجاجية */
  --clr-bg:       #0b1020;
  --clr-surface:  rgba(22, 28, 48, 0.72);
  --clr-surface2: rgba(32, 40, 68, 0.88);
  --clr-border:   rgba(255,255,255,.12);
  --clr-border-hi:rgba(99, 140, 255,.45);
  --clr-txt:      #f2f4ff;
  --clr-txt2:     #c5cce0;
  --clr-txt3:     #8b95b0;
  --clr-cyan:     #38e0f5;
  --clr-glass:    rgba(255,255,255,.06);
  --clr-glass-strong: rgba(255,255,255,.10);
  --shadow-theme: 0 18px 48px rgba(0,0,0,.35);
}

html[data-bs-theme="light"], body[data-bs-theme="light"]{
  --app-accent: var(--carrier-sf);
  --app-accent-2: var(--carrier-ym);

  --clr-bg:       #f6f7fb;
  --clr-surface:  rgba(255,255,255,.86);
  --clr-surface2: #f0f2f8;
  --clr-border:   rgba(15,23,42,.10);
  --clr-border-hi:rgba(59,130,246,.35);
  --clr-txt:      #0f172a;
  --clr-txt2:     #334155;
  --clr-txt3:     #64748b;
  --clr-cyan:     #0e7490;
  --clr-glass:    rgba(255,255,255,.65);
  --clr-glass-strong: rgba(255,255,255,.88);
  --shadow-theme: 0 16px 48px rgba(15,23,42,.08);
}

/* نص وخلفية الجسم — يتجاوز لون Bootstrap حتى يظهر النص في الوضع الفاتح */
html[data-bs-theme="light"] body,
body[data-bs-theme="light"]{
  color:var(--clr-txt);
  background-color:var(--clr-bg);
}
html[data-bs-theme="dark"] body,
body[data-bs-theme="dark"]{
  color:var(--clr-txt);
  background-color:var(--clr-bg);
}

/* Global link/button accent */
a:hover{color:var(--app-accent)}
.btn-accent{
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-2);
  --bs-btn-hover-border-color: var(--app-accent-2);
}

/* Bootstrap component tinting (light mode readability) */
html[data-bs-theme="light"] .navbar .nav-link{color:rgba(15,23,42,.75)}
html[data-bs-theme="light"] .navbar .nav-link.active{color:rgba(15,23,42,1)}
html[data-bs-theme="light"] .offcanvas{background:#fff}

/* Dark glass surfaces — وضوح بدون تعتيم خانق */
html[data-bs-theme="dark"] .hb-glass,
html[data-bs-theme="dark"] .hb-bento-card,
html[data-bs-theme="dark"] .hb-ency-item,
html[data-bs-theme="dark"] .hb-table-scroll,
html[data-bs-theme="dark"] .ls-card,
html[data-bs-theme="dark"] .kashef-tool-wrap,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] header.border-bottom{
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
html[data-bs-theme="dark"] header.border-bottom{
  background: color-mix(in srgb, var(--clr-bg) 55%, transparent);
  border-color: var(--clr-border) !important;
}
html[data-bs-theme="dark"] .offcanvas{
  background: color-mix(in srgb, #12182c 92%, #3b82f6 8%);
  color: var(--clr-txt);
  border-inline-start: 1px solid var(--clr-border);
}
html[data-bs-theme="dark"] .dropdown-menu{
  background: color-mix(in srgb, #151c34 94%, transparent);
  border: 1px solid var(--clr-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-bs-theme="dark"] .dropdown-item{color:var(--clr-txt2)}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="dark"] .dropdown-item.active{
  background: color-mix(in srgb, var(--app-accent) 18%, transparent);
  color: var(--clr-txt);
}
html[data-bs-theme="dark"] .btn-outline-secondary{
  color: var(--clr-txt2);
  border-color: var(--clr-border);
  background: var(--clr-glass);
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover{
  color: var(--clr-txt);
  border-color: var(--clr-border-hi);
  background: var(--clr-glass-strong);
}
html[data-bs-theme="dark"] .navbar-toggler{
  border-color: var(--clr-border);
}
html[data-bs-theme="dark"] .accordion-button{
  background: transparent;
  color: var(--clr-txt);
  box-shadow: none;
}
html[data-bs-theme="dark"] .accordion-button:not(.collapsed){
  background: color-mix(in srgb, var(--app-accent) 14%, transparent);
  color: var(--clr-txt);
}
html[data-bs-theme="dark"] .accordion-body{
  color: var(--clr-txt2);
}

/* Small helper for carrier badges */
.badge-carrier-ym{background:rgba(229,62,62,.15);color:var(--carrier-ym);border:1px solid rgba(229,62,62,.35)}
.badge-carrier-sf{background:rgba(59,130,246,.15);color:var(--carrier-sf);border:1px solid rgba(59,130,246,.35)}
.badge-carrier-mtn{background:rgba(234,179,8,.15);color:var(--carrier-mtn);border:1px solid rgba(234,179,8,.35)}
.badge-carrier-you{background:rgba(139,92,246,.15);color:var(--carrier-you);border:1px solid rgba(139,92,246,.35)}

/* Header locale/country — visible on phone & tablet */
.header-locale-pickers{flex-shrink:0}
.header-locale-pickers .locale-flag,
.dropdown-item .locale-flag{
  font-size:1.05em;
  line-height:1;
  display:inline-block;
}
.header-locale-pickers .locale-code{font-weight:700;letter-spacing:.02em}

/* Header row: مسافة ثابتة بين الشعار / التبويبات / الأزرار (LTR + RTL) */
header .navbar > .container{
  gap:0.65rem 1rem;
  flex-wrap:nowrap;
  align-items:center;
}
header .navbar-collapse{
  flex:1 1 auto;
  min-width:0;
}
header .navbar-nav{
  flex-wrap:nowrap;
  column-gap:0.1rem;
}

/* Numbro wordmark logo */
.navbar-brand.numbro-brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  position:relative;
  z-index:2;
  padding-block:0.2rem;
  padding-inline:0.1rem;
  margin-inline-end:1rem !important;
  text-decoration:none;
  line-height:0;
  isolation:isolate;
  /* الشعار لاتيني — لا يرث direction:rtl من الصفحة وإلا يتداخل مع التبويبات */
  direction:ltr !important;
  unicode-bidi:isolate;
}
.numbro-logo{
  display:inline-flex;
  align-items:center;
  color:var(--clr-txt, var(--clr-text, #f8fafc));
  max-width:10.5rem;
  direction:ltr;
  unicode-bidi:isolate;
}
.numbro-logo-svg{
  display:block;
  width:auto;
  height:2rem;
  max-width:100%;
  overflow:visible;
  direction:ltr;
}
@media (min-width:992px){
  .numbro-logo-svg{height:2.55rem}
}
@media (max-width:1199.98px){
  .navbar-brand.numbro-brand{margin-inline-end:0.75rem !important}
  .numbro-logo{max-width:9.25rem}
  .numbro-logo-svg{height:2.05rem}
  header .navbar-nav .nav-link{
    padding-inline:0.6rem;
    font-size:0.95rem;
  }
}
.navbar-brand.numbro-brand:hover .numbro-logo{
  color:color-mix(in srgb, var(--clr-txt, #fff) 88%, var(--carrier-sf, #3b82f6));
  opacity:0.92;
}
html[data-bs-theme="light"] .numbro-logo,
body[data-bs-theme="light"] .numbro-logo{
  color:#0f172a;
}

@media (max-width:575.98px){
  .header-locale-pickers .btn{padding-inline:.55rem;font-size:.82rem}
  .numbro-logo{max-width:8rem}
  .numbro-logo-svg{height:1.85rem}
  .navbar-brand.numbro-brand{margin-inline-end:0.5rem !important}
}

/* هيدر ذكي: يختفي عند السحب للأسفل، يظهر عند السحب للأعلى، ثابت في الأعلى */
.site-auto-header{
  --ns-report: #f07167;
  --ns-objection: #0d9488;
  position:sticky;
  top:0;
  z-index:1030;
  transition:transform .28s ease, box-shadow .28s ease;
  will-change:transform;
  background:color-mix(in srgb, var(--clr-bg, #07071a) 88%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
/* حجم أوضح ومتناسق عبر الشاشات */
.site-auto-header .navbar{
  padding-block:0.65rem;
}
@media (min-width:992px){
  .site-auto-header .navbar{padding-block:0.85rem}
}
.site-auto-header .btn-sm{
  --bs-btn-padding-y:0.48rem;
  --bs-btn-padding-x:0.95rem;
  --bs-btn-font-size:0.92rem;
  --bs-btn-line-height:1.4;
  min-height:2.5rem;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
}
@media (min-width:992px){
  .site-auto-header .btn-sm{
    --bs-btn-padding-y:0.55rem;
    --bs-btn-padding-x:1.1rem;
    --bs-btn-font-size:0.98rem;
    min-height:2.7rem;
  }
}
/* أزرار ثابتة: بلاغ مرجاني / اعتراض تركواز / بحث أزرق الموقع — لا تتبدل مع الصفحة */
.site-auto-header .btn-outline-danger{
  --bs-btn-color: var(--ns-report);
  --bs-btn-border-color: color-mix(in srgb, var(--ns-report) 72%, transparent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ns-report);
  --bs-btn-hover-border-color: var(--ns-report);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ns-report);
  --bs-btn-active-border-color: var(--ns-report);
}
.site-auto-header .btn-outline-primary{
  --bs-btn-color: var(--ns-objection);
  --bs-btn-border-color: color-mix(in srgb, var(--ns-objection) 72%, transparent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ns-objection);
  --bs-btn-hover-border-color: var(--ns-objection);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ns-objection);
  --bs-btn-active-border-color: var(--ns-objection);
}
html[data-bs-theme="light"] .site-auto-header,
body[data-bs-theme="light"] .site-auto-header{
  background:color-mix(in srgb, #fff 90%, transparent);
}
.site-auto-header.is-hidden{
  transform:translateY(-100%);
  box-shadow:none;
}
.site-auto-header.is-scrolled{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce){
  .site-auto-header{transition:none}
}

/* القائمة الجانبية فوق الهيدر والطبقات الأخرى */
#mainOffcanvas.site-mobile-drawer{
  z-index: 1085;
  width: min(66.666vw, 22rem);
  max-width: 22rem;
}
.offcanvas-backdrop{
  z-index: 1080;
}
#mainOffcanvas .offcanvas-body .btn{
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: start;
}
.site-mobile-drawer__head{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.85rem 1rem;
  min-height: 3.25rem;
}
.site-mobile-drawer__close{
  margin: 0;
  padding: 0.55rem;
  width: 2.5rem;
  height: 2.5rem;
  background-size: 1rem;
  opacity: 0.85;
}
.site-mobile-drawer__actions .btn span{
  display: inline !important;
}

/* ── Footer: شريط قانوني مميز عن محتوى الصفحة ── */
.site-footer-bar{
  --ft-bg: color-mix(in srgb, var(--clr-surface, #111827) 92%, #000 8%);
  --ft-border: color-mix(in srgb, var(--carrier-sf, #3b82f6) 38%, var(--clr-border, #334155));
  --ft-text: var(--clr-txt, #e2e8f0);
  --ft-muted: var(--clr-txt2, #94a3b8);
  --ft-legal-bg: color-mix(in srgb, var(--carrier-sf, #3b82f6) 12%, transparent);
  --ft-legal-border: color-mix(in srgb, var(--carrier-sf, #3b82f6) 34%, transparent);
  position: relative;
  z-index: 2;
  margin-top: 3.5rem;
  padding: 1.35rem 0 1.5rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ft-bg) 70%, transparent) 0%, var(--ft-bg) 28%),
    var(--ft-bg);
  border-top: 3px solid var(--ft-border);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}
html[data-bs-theme="light"] .site-footer-bar,
body[data-bs-theme="light"] .site-footer-bar{
  --ft-bg: #f1f5f9;
  --ft-border: color-mix(in srgb, var(--carrier-sf, #2563eb) 45%, #94a3b8);
  --ft-text: #0f172a;
  --ft-muted: #475569;
  --ft-legal-bg: #eff6ff;
  --ft-legal-border: #93c5fd;
  box-shadow: 0 -10px 36px rgba(15, 23, 42, 0.08);
}
.site-footer-bar__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  text-align: center;
}
.site-footer-bar__nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.85rem;
}
.site-footer-bar__dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ft-muted) 70%, transparent);
}
.site-footer-bar__link{
  color: var(--ft-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.site-footer-bar__link:hover{
  color: var(--ft-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.site-footer-bar__legal{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 42rem;
}
.site-footer-bar__legal-link{
  flex: 1 1 auto;
  min-width: min(100%, 11rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ft-legal-border);
  background: var(--ft-legal-bg);
  color: var(--ft-text);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  line-height: 1.35;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.site-footer-bar__legal-link:hover{
  border-color: var(--carrier-sf, #3b82f6);
  color: var(--carrier-sf, #3b82f6);
  background: color-mix(in srgb, var(--carrier-sf, #3b82f6) 10%, var(--ft-legal-bg));
}
.site-footer-bar__copy{
  margin: 0;
  font-size: 0.8rem;
  color: var(--ft-muted);
  line-height: 1.5;
}
@media (max-width:575.98px){
  .site-footer-bar{
    margin-top: 2.5rem;
    padding: 1.2rem 0 1.35rem;
  }
  .site-footer-bar__legal{
    flex-direction: column;
  }
  .site-footer-bar__legal-link{
    width: 100%;
    min-width: 0;
  }
  .site-footer-bar__dot{display:none}
  .site-footer-bar__nav{
    flex-direction: column;
    gap: 0.4rem;
  }
}