/* =====================================================================
   Cubarika — University 5.0 Redesign (v7)
   Global override stylesheet. Preserves 100% of existing HTML/PHP.
   Palette: Deep Navy + White + Gold. Glassmorphism, luxury typography.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Token overrides ---------- */
:root, :host {
  --background: #f7f9fc;
  --foreground: #0a1628;
  --card: #ffffff;
  --popover: #ffffff;

  --primary: #0a1f44;          /* Deep Navy */
  --primary-foreground: #ffffff;
  --primary-2: #14315f;
  --primary-3: #1f4478;

  --secondary: #eef3fb;
  --secondary-foreground: #0a1f44;

  --muted: #f1f5f9;
  --muted-foreground: #4a5b73;

  --accent: #f5ecd6;
  --accent-foreground: #0a1f44;

  --gold: #c9a45c;
  --gold-2: #b48a44;
  --gold-soft: #ecd9a7;
  --gold-foreground: #1a1204;

  --border: #dfe6f0;
  --input: #e5edf7;
  --ring: #c9a45c;

  --success: #12a55b;
  --warning: #d98e00;
  --destructive: #d64545;

  --radius: 14px;

  --shadow-soft:      0 4px 18px -6px rgba(10,31,68,.14), 0 2px 6px -2px rgba(10,31,68,.08);
  --shadow-elevated:  0 24px 60px -24px rgba(10,31,68,.28), 0 8px 20px -8px rgba(10,31,68,.14);
  --shadow-gold:      0 12px 40px -14px rgba(201,164,92,.55);
  --shadow-glass:     0 20px 50px -20px rgba(10,31,68,.35);

  --gradient-primary: linear-gradient(135deg, #0a1f44 0%, #14315f 60%, #1f4478 100%);
  --gradient-gold:    linear-gradient(135deg, #c9a45c 0%, #e5c67d 100%);
  --gradient-hero:    linear-gradient(120deg, #050f24 0%, #0a1f44 40%, #14315f 75%, #0a1f44 100%);
  --gradient-mesh:
      radial-gradient(60% 60% at 15% 10%,  rgba(201,164,92,.18) 0%, transparent 60%),
      radial-gradient(50% 50% at 90% 15%,  rgba(31,68,120,.22) 0%, transparent 60%),
      radial-gradient(60% 60% at 50% 100%, rgba(10,31,68,.14) 0%, transparent 65%);

  --font-sans: "IBM Plex Sans Arabic", "Cairo", "Tajawal", "Inter", system-ui, sans-serif;
  --font-display: "Cairo", "IBM Plex Sans Arabic", "Poppins", "Inter", system-ui, sans-serif;
  --font-latin: "Inter", "Poppins", system-ui, sans-serif;
}

.dark, html.dark {
  --background: #06101f;
  --foreground: #eef3fb;
  --card: #0d1a30;
  --popover: #0d1a30;
  --primary: #7fb0f0;
  --primary-foreground: #04101f;
  --secondary: #12223d;
  --secondary-foreground: #eef3fb;
  --muted: #10203a;
  --muted-foreground: #9fb0c8;
  --accent: #1a2b48;
  --accent-foreground: #eef3fb;
  --border: rgba(255,255,255,.08);
  --input: rgba(255,255,255,.10);
  --gold: #e5c67d;
  --gold-foreground: #1a1204;
  --shadow-soft:     0 6px 24px -8px rgba(0,0,0,.6);
  --shadow-elevated: 0 30px 70px -20px rgba(0,0,0,.75);
  --gradient-mesh:
      radial-gradient(60% 60% at 15% 10%,  rgba(201,164,92,.14) 0%, transparent 60%),
      radial-gradient(50% 50% at 90% 15%,  rgba(80,140,220,.18) 0%, transparent 60%),
      radial-gradient(60% 60% at 50% 100%, rgba(60,90,150,.14) 0%, transparent 65%);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
html, body {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--background);
  color: var(--foreground);
}
body { background-image: var(--gradient-mesh); background-attachment: fixed; background-size: cover; }

::selection { background: var(--gold); color: var(--gold-foreground); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--primary-2)); border-radius: 10px; }
::-webkit-scrollbar-track { background: var(--muted); }

/* Latin numerals/words keep Inter */
:where(input, button, a, span, div, p, h1, h2, h3, h4, h5, h6):lang(en),
:where(input, button, a, span, div, p, h1, h2, h3, h4, h5, h6):lang(fr) {
  font-family: var(--font-latin) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .font-display, .font-bold, .font-black, .font-extrabold {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}

/* ---------- Header (sticky, glass) ---------- */
header.sticky, header[class*="sticky"] {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(10,31,68,0.08) !important;
  box-shadow: 0 4px 30px -20px rgba(10,31,68,.35);
}
.dark header.sticky, .dark header[class*="sticky"] {
  background: rgba(6,16,31,0.82) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
header.sticky.is-scrolled { box-shadow: 0 10px 40px -20px rgba(10,31,68,.4); }

header nav a { position: relative; }
header nav > a::after, header nav > div > button::after {
  content: ""; position: absolute; bottom: 4px; right: 12px; left: 12px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--primary));
  transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
  border-radius: 2px;
}
header nav > a:hover::after, header nav > a[aria-current="page"]::after,
header nav > div > button:hover::after { transform: scaleX(1); }

/* Logo mark polish */
header a[href="/"] > div:first-child {
  box-shadow: 0 6px 20px -8px rgba(201,164,92,.55), inset 0 0 0 1px rgba(201,164,92,.35);
  transition: transform .3s ease;
}
header a[href="/"]:hover > div:first-child { transform: rotate(-6deg) scale(1.05); }

/* Mega menu dropdown enhancements */
header .group > div[class*="absolute"] {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-elevated) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(20px);
}
.dark header .group > div[class*="absolute"] { background: rgba(13,26,48,.98) !important; }
header .group > div[class*="absolute"] a {
  border-radius: 10px !important;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
header .group > div[class*="absolute"] a:hover {
  background: linear-gradient(90deg, rgba(201,164,92,.14), rgba(10,31,68,.06)) !important;
  color: var(--primary) !important;
  transform: translateX(-3px);
}

/* ---------- Hero sections ---------- */
section:first-of-type, [class*="hero"], header + section, main > section:first-child {
  position: relative;
}
main > section:first-child::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-mesh);
  pointer-events: none; z-index: 0;
}
main > section:first-child > * { position: relative; z-index: 1; }

/* Gradient text util (auto-applied to gradient-brand) */
.gradient-text, [class*="gradient-text"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ---------- Buttons ---------- */
a[class*="bg-primary"], button[class*="bg-primary"],
a[class*="bg-brand"], button[class*="bg-brand"] {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -12px rgba(10,31,68,.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover,
a[class*="bg-brand"]:hover, button[class*="bg-brand"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(10,31,68,.55);
  filter: brightness(1.08);
}
a[class*="bg-gold"], button[class*="bg-gold"] {
  background: var(--gradient-gold) !important;
  color: var(--gold-foreground) !important;
  box-shadow: var(--shadow-gold);
  border: 0 !important;
}
a[class*="bg-gold"]:hover, button[class*="bg-gold"]:hover {
  transform: translateY(-2px); filter: brightness(1.05);
}

/* Outline buttons */
a[class*="border-primary"], button[class*="border-primary"] {
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  transition: all .25s ease;
}
a[class*="border-primary"]:hover, button[class*="border-primary"]:hover {
  background: var(--primary) !important; color: #fff !important;
  transform: translateY(-2px);
}

/* ---------- Cards ---------- */
[class*="rounded-2xl"][class*="bg-card"],
[class*="rounded-xl"][class*="bg-card"],
article[class*="rounded"],
[class*="border"][class*="bg-card"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-soft);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
[class*="rounded-2xl"][class*="bg-card"]:hover,
[class*="rounded-xl"][class*="bg-card"]:hover,
article[class*="rounded"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: rgba(201,164,92,.45) !important;
}

/* News/article cards - gold ribbon */
article .absolute[class*="bg-gold"] {
  background: var(--gradient-gold) !important;
  color: var(--gold-foreground) !important;
  box-shadow: 0 6px 18px -6px rgba(201,164,92,.55);
  font-weight: 700 !important;
}

/* Gold badge accents */
[class*="bg-gold"] { background: var(--gradient-gold) !important; color: var(--gold-foreground) !important; }
[class*="text-gold"] { color: var(--gold-2) !important; }
[class*="text-primary"] { color: var(--primary) !important; }

/* ---------- Footer ---------- */
footer, footer[class*="border-t"] {
  background: linear-gradient(180deg, #050f24 0%, #0a1f44 100%) !important;
  color: #cbd5e6 !important;
  border-top: 3px solid var(--gold) !important;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 15% 0%, rgba(201,164,92,.14) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 100%, rgba(80,140,220,.10) 0%, transparent 70%);
  pointer-events: none;
}
footer * { position: relative; }
footer a { color: #cbd5e6 !important; transition: color .2s ease; }
footer a:hover { color: var(--gold) !important; }
footer h3, footer h4, footer .font-bold { color: #fff !important; }

/* ---------- Utility: glass card ---------- */
.v7-glass {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: var(--shadow-glass);
  border-radius: 20px;
}
.dark .v7-glass { background: rgba(13,26,48,.6); border-color: rgba(255,255,255,.06); }

/* ---------- Reveal animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Auto-reveal sections when JS labels them */
section.v7-revealed > * { animation: v7SectionIn .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes v7SectionIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Preloader ---------- */
#v7-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--gradient-hero);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#v7-preloader.is-done { opacity: 0; visibility: hidden; }
#v7-preloader .ring {
  width: 68px; height: 68px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--gold);
  animation: v7spin 1s linear infinite;
}
@keyframes v7spin { to { transform: rotate(360deg); } }

/* ---------- Floating actions (dark mode, back-to-top, chatbot) ---------- */
.v7-fab-stack {
  position: fixed; bottom: 20px; left: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
}
[dir="rtl"] .v7-fab-stack { left: 20px; right: auto; }
.v7-fab {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--gradient-primary); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(10,31,68,.55);
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
}
.v7-fab:hover { transform: translateY(-3px) scale(1.05); }
.v7-fab.gold { background: var(--gradient-gold); color: var(--gold-foreground); box-shadow: var(--shadow-gold); }
#v7-to-top { opacity: 0; pointer-events: none; }
#v7-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- Chatbot panel (placeholder / FAQ redirect) ---------- */
#v7-chat-panel {
  position: fixed; bottom: 80px; left: 20px; z-index: 91;
  width: min(340px, calc(100vw - 32px)); max-height: 70vh;
  border-radius: 20px; overflow: hidden; display: none;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated);
  flex-direction: column;
}
#v7-chat-panel.is-open { display: flex; animation: v7SectionIn .3s ease both; }
#v7-chat-panel header {
  background: var(--gradient-primary); color: #fff;
  padding: 14px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
#v7-chat-panel .body { padding: 16px; overflow: auto; font-size: 14px; }
#v7-chat-panel .qa { display: block; padding: 10px 12px; margin: 6px 0; border-radius: 10px; background: var(--muted); color: var(--foreground); text-decoration: none; }
#v7-chat-panel .qa:hover { background: var(--gold-soft); }

/* ---------- Section headings polish ---------- */
h2[class*="text-3xl"], h2[class*="text-4xl"], section h2 {
  position: relative; display: inline-block;
}
section h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 10px;
  background: var(--gradient-gold); border-radius: 4px;
}

/* ---------- Counter chips ---------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---------- Statistics band gradient background ---------- */
section[class*="bg-primary"] {
  background: var(--gradient-hero) !important;
  color: #fff;
  position: relative; overflow: hidden;
}
section[class*="bg-primary"]::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(201,164,92,.18) 0%, transparent 60%),
    radial-gradient(40% 40% at 80% 80%, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none;
}
section[class*="bg-primary"] > * { position: relative; z-index: 1; }

/* ---------- Mobile menu polish (nav injected by existing script) ---------- */
#mobileNavPanel {
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(20px);
  border-top: 3px solid var(--gold) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.dark #mobileNavPanel { background: rgba(6,16,31,.98) !important; }
#mobileNavPanel a { border-radius: 10px !important; transition: all .2s ease; }
#mobileNavPanel a:hover { background: var(--gold-soft) !important; color: var(--primary) !important; }

/* ---------- Focus visible ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive typography ---------- */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.35rem, 5vw, 2rem) !important; }
}