/* === AETHER UI OVERRIDE (Counter + Language Pills) === */

/* Counter pill (original-like) */
#visitorCounter, .visitorCounter, .counter-pill, .counterPill{
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
}
#visitorCounter span, .visitorCounter span{
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Language buttons (EN/AR) as compact pills */
.lang-btn, .langBtn, #langSwitch a, a.lang, button.lang{
  height: 34px !important;
  min-width: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
}

/* Keep them aligned */
#langSwitch, .lang-switch, .langSwitch{
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* === NOOR: COUNTER + LANG ROLLBACK (SAFE) === */
/* أظهر أي widgets مخفية بالخطأ */
#noorCounter, .noorCounter, .noor-counter, [data-noor-counter],
#langSwitch, .langSwitch, .noor-lang, [data-lang-switch]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* امنع أي تعتيم/إخفاء عام للكروت */
.gateCard{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* === NOOR: FINAL COUNTER + LANGUAGE HARDENING (Scope: HOME + PORTALS) === */

/* 1) Force visibility & interactivity for the REAL selectors discovered */
#noorCounter,
.counter-lang-final,
.counter-lang-final * ,
.counter-pill,
.counter-pill * ,
.lang-switch-final,
.lang-switch-final * ,
.lang-btn {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* 2) Ensure container blocks render as intended (no inline collapse) */
.counter-lang-final { display: block !important; }
.counter-pill { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.lang-switch-final { display: inline-flex !important; align-items: center !important; gap: 10px !important; }

/* 3) Make buttons reliably clickable */
.lang-btn {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 4) RTL/LTR alignment guard (business requirement: consistent UX) */
html[dir="rtl"] .counter-lang-final { direction: rtl !important; }
html[dir="ltr"] .counter-lang-final { direction: ltr !important; }

/* 5) Safety: if any legacy rule hides "lang-switch" or generic widgets, neutralize */
.lang-switch, #langSwitch, .langSwitch,
#visitorCounter, .visitorCounter, .counterPill {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* === END NOOR HARDENING === */

/* === NOOR: HIDE "Primary Universe Gates" on HOME (brand integrity) === */
#primaryGates10,
.primary-gates-10,
section#primaryGates10,
section.primary-gates-10{
  display:none !important;
}

/* === NOOR: FORCE portal-10 cinematic title render (EN) === */
a.gateCard[href="portal-10.html"][data-title-en] .title,
a.gateCard[href="portal-10.html"][data-title-en] h2,
a.gateCard[href="portal-10.html"][data-title-en] h3{
  /* لو فيه عنوان داخلي مخفي، نخليه ظاهر */
  opacity: 1 !important;
  visibility: visible !important;
}

/* fallback: لو مافيش عنصر عنوان واضح، نعرض data-title-en كـ overlay */
a.gateCard[href="portal-10.html"][data-title-en]::after{
  content: attr(data-title-en);
  display: block;
  font-weight: 800;
  font-size: 28px;
  margin-top: 6px;
}

/* === NOOR: Father Noor label (center card) fallback render === */
a[href="portal-10.html"][data-title-en]::after{
  content: attr(data-title-en);
  display:block;
  font-weight:800;
  font-size:28px;
  margin-top:6px;
  line-height:1.15;
}
html[dir="rtl"] a[href="portal-10.html"][data-title-ar]::after{
  content: attr(data-title-ar);
}

/* === NOOR: ENSURE Father Noor overlay always visible === */
#noor-fathernoor-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* === NOOR: UNBLOCK center Father Noor card from any overlay layers === */
a.noor-center-fathernoor{
  position: relative !important;
  overflow: visible !important;
  z-index: 2147483646 !important;
}
a.noor-center-fathernoor *{
  visibility: visible !important;
  opacity: 1 !important;
}

/* Kill pseudo-overlays that often cover text */
a.noor-center-fathernoor::before,
a.noor-center-fathernoor::after{
  content: none !important;
  display: none !important;
}

/* Ensure title always on top */
a.noor-center-fathernoor #noor-fathernoor-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
}

/* =========================
   NOOR: HOME LAYER FIX (z-index 9999 overlays)
   Objective: unblock card titles visibility
   Scope: HOME only (body / html)
   ========================= */

/* 1) Keep the main cards grid above generic overlays */
.gatesGrid, .gates-grid, .gateGrid, .grid, .mainGrid, .main-grid,
section#officialYouTubeUniverses, section#primaryUniverseGates,
#officialYouTubeUniverses, #primaryUniverseGates,
a.gateCard{
  position: relative !important;
  z-index: 10000 !important;
}

/* 2) If any fixed overlay exists, neutralize it (do not remove layout, just stop covering) */
html body *[style*="z-index: 9999"][style*="position: fixed"],
html body *[style*="z-index:9999"][style*="position:fixed"]{
  pointer-events: none !important;
}

/* 3) Known offender patterns (safe: only when fixed/absolute + very high z-index) */
html body div[class*="overlay"], 
html body div[id*="overlay"],
html body div[class*="modal"],
html body div[id*="modal"],
html body div[class*="backdrop"],
html body div[id*="backdrop"]{
  /* only reduce if it is actually covering */
  pointer-events: none !important;
}

/* 4) Specifically neutralize AETHER fixed top layers if present */
html body *[class*="aether"]{
  pointer-events: none !important;
}

/* 5) Ensure Father Noor title is the top-most within its card */
a.noor-center-fathernoor,
a.noor-center-fathernoor #noor-fathernoor-title{
  z-index: 2147483647 !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* 6) Kill pseudo-layers on the center card */
a.noor-center-fathernoor::before,
a.noor-center-fathernoor::after{
  content: none !important;
  display: none !important;
}

/* === NOOR: FORCE Father Noor to be visible in CENTER card (no clipping) === */
a.noor-center-fathernoor{
  position: relative !important;
  overflow: visible !important;
  min-height: 160px !important;
}

a.noor-center-fathernoor #noor-fathernoor-title{
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  right: 16px !important;
  z-index: 2147483647 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

/* If any generic overlay covers the card, keep card above */
a.noor-center-fathernoor{
  z-index: 2147483646 !important;
}

/* Emergency: if parent containers clip, relax only around center card */
a.noor-center-fathernoor,
a.noor-center-fathernoor *{
  clip: auto !important;
}

/* === NOOR DEBUG: make Father Noor impossible to miss === */
a.noor-center-fathernoor #noor-fathernoor-title{
  background: rgba(0,0,0,.85) !important;
  border: 2px solid rgba(255,211,106,.95) !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  box-shadow: 0 0 28px rgba(255,211,106,.45) !important;
}

/* Also give the entire card a visible outline to confirm we are styling the right one */
a.noor-center-fathernoor{
  outline: 3px solid rgba(255,211,106,.85) !important;
  outline-offset: 6px !important;
}

/* === NOOR FIX: prevent clipping/stacking around the center card === */
#noor-gates-container,
div[data-noor-gates-container="1"]{
  position: relative !important;
  overflow: visible !important;
  z-index: 2147483000 !important;
}

/* reinforce center card layer */
a.noor-center-fathernoor{
  position: relative !important;
  overflow: visible !important;
  z-index: 2147483600 !important;
}

/* ensure overlay paints even if ancestors clip */
a.noor-center-fathernoor #noor-fathernoor-title{
  position: absolute !important;
  z-index: 2147483647 !important;
}

/* === NOOR VISUAL ASSERT: make center label impossible to hide === */
#noor-gates-container,
div[data-noor-gates-container="1"]{
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

a.noor-center-fathernoor{
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  outline: 6px solid #ff00ff !important;
  outline-offset: 8px !important;
}

/* Force a big badge in the dead center of the card */
a.noor-center-fathernoor #noor-fathernoor-title{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  z-index: 2147483647 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  background: #ff00ff !important;
  color: #000 !important;
  border: 6px solid #00ffff !important;
  padding: 18px 22px !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 8px rgba(0,0,0,.9) !important;

  font-size: 34px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
}

/* If something still overlays it, try to force the whole card above */
a.noor-center-fathernoor{
  position: relative !important;
  z-index: 2147483646 !important;
}

/* === NOOR KILL-SWITCH (scoped): disable common full overlays near gates === */
#noor-gates-container *,
div[data-noor-gates-container="1"] *{
  mix-blend-mode: normal !important;
}

#noor-gates-container [style*="position:fixed"],
#noor-gates-container [style*="position: absolute"],
div[data-noor-gates-container="1"] [style*="position:fixed"],
div[data-noor-gates-container="1"] [style*="position: absolute"]{
  pointer-events: none !important;
}

/* === NOOR CORE VIS FIX (Father Noor) : force visible render inside gate === */
#noor-core-gate-10{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 150px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2147483000 !important;
}

#noor-core-gate-10 *{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip: auto !important;
}

#noor-core-gate-10 .noor-core-title{
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #ffd36a !important;
  text-align: center !important;
  text-shadow: 0 0 18px rgba(255,211,106,.45) !important;
  margin: 0 !important;
}

#noor-core-gate-10 .noor-core-sub{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffd36a !important;
  text-align: center !important;
  opacity: .95 !important;
  margin: 0 !important;
}

/* Debug outline (remove later if you want) */
#noor-core-gate-10{
  outline: 4px solid rgba(255,211,106,.75) !important;
  outline-offset: 6px !important;
}

/* === NOOR FINAL • Inner Pages Unified Layout === */
body.noor-inner-page {
  background: radial-gradient(circle at top, #0b1220, #020617);
  color: #f8fafc;
  min-height: 100vh;
}

.noor-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.noor-page-center {
  text-align: center;
}

.noor-page-center h1 {
  font-size: 42px;
  font-weight: 900;
  color: #ffd36a;
  margin-bottom: 12px;
}

.noor-page-center p {
  font-size: 20px;
  opacity: .9;
}

/* تأكيد حذف أي شعار علوي داخل الصفحات الداخلية */
body.noor-inner-page .hero,
body.noor-inner-page header,
body.noor-inner-page .hero-logo {
  display: none !important;
}

/* === NOOR FINAL • Force 12 Gates Visible + 3x4 Grid === */

/* 2.1) إلغاء أي إخفاء للكروت بعد 9 */
.gateCard,
.gateCard:nth-child(n+10),
.gateCard-soon {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip-path: none !important;
  mask: none !important;
  transform: none !important;
  filter: none !important;
}

/* 2.2) تثبيت الشبكة 3 أعمدة و4 صفوف تلقائيًا */
.gatesGrid,
.gates,
#noor-gates-container,
[data-noor-gates-container="1"] {
  overflow: visible !important;
}

.gatesGrid,
.gates {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(120px, auto) !important;
  gap: 14px !important;
}

/* 2.3) ستايل زرار "قريبًا" بحيث يندمج مع الهوية */
.gateCard-soon .gateTitle {
  font-weight: 900 !important;
  color: #ffd36a !important;
  text-shadow: 0 0 18px rgba(255,211,106,.45) !important;
}
.gateCard-soon .gateSub {
  opacity: .9 !important;
  font-weight: 800 !important;
  color: #ffd36a !important;
}

/* === NOOR FINAL | FORCE SHOW ALL GATES (fix "only 9 visible") === */
.gateCard { display:flex !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; clip-path:none !important; mask:none !important; filter:none !important; transform:none !important; }

.gateCard:nth-child(n+10),
.gateCard:nth-child(n+11),
.gateCard:nth-child(n+12),
.gateCard:nth-child(n+13){ display:flex !important; opacity:1 !important; visibility:visible !important; }

.gates, .gatesGrid, #noor-gates-container, [data-noor-gates-container="1"]{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.gatesGrid, .gates{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(120px, auto) !important;
  gap: 14px !important;
}
/* === PLATFORM GRID CONTRACT : 12 CONTENT GATES === */
.gatesGrid, .gates {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 14px !important;
}
.gatesGrid .gateCard:nth-child(n+13),
.gates .gateCard:nth-child(n+13){
  display:none !important;
}

/* === NOOR UI FIX : SHOW 12 GATES VISUALLY (3x4) - STOP CLIPPING === */

/* الحاوية نفسها + أي غلاف قديم كان بيقص */
.gatesGrid, .gates,
#noor-gates-container,
[data-noor-gates-container="1"]{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  grid-auto-rows: minmax(120px, auto) !important;
  grid-auto-flow: row !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
  padding-bottom: 24px !important;
}

/* أي Parent مشهور بالقص */
.noor-page-container,
main, section, .container, .wrap, .content, .page, .hero{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* تأكيد أن 10-12 لا يتم إخفاؤهم */
.gateCard:nth-child(10),
.gateCard:nth-child(11),
.gateCard:nth-child(12){
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* لو فيه قاعدة قديمة بتخفي بعد 9/10 */
.gateCard:nth-child(n+10){
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === NOOR FIX (Root Cause): remove hard limit that hides gates > 9 === */
.gatesGrid, .gates, #noor-gates-container, [data-noor-gates-container="1"]{
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Force show 10/11/12 even if old CSS used display:none !important */
.gateCard:nth-child(10),
.gateCard:nth-child(11),
.gateCard:nth-child(12),
.gateCard:nth-child(n+10){
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip-path: none !important;
  mask: none !important;
  transform: none !important;
  filter: none !important;
}

/* Ensure 3x4 grid */
.gatesGrid, .gates{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  grid-auto-rows: minmax(120px, auto) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
}