/* ===== Mr Omar Tarek — Shared shell (navbar + footer) for every page ===== */
@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Alexandria:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

body.ot-shell {
  --bg: #F6FAFB; --surface: #fff; --ink: #0E2638; --muted: #46586A; --line: rgba(14,38,56,.1);
  --accent: #5BB8D4; --accent-d: #2A8FB0; --sun: #FFC83D; --coral: #FF8A7D; --soft: #E3F4FA;
  --glass: rgba(255,255,255,.85); --deep: #0E2638; --deep-2: #081A27; --deep-muted: #C3D6E2;
  --shadow: 0 30px 50px -28px rgba(14,38,56,.45);
}
body.ot-shell.dark {
  --bg: #0A1A24; --surface: #11283A; --ink: #EAF4F8; --muted: #A9C0CE; --line: rgba(255,255,255,.1);
  --soft: #133246; --glass: rgba(17,40,58,.85); --deep: #06131C; --deep-2: #040D14;
  --shadow: 0 30px 50px -28px rgba(0,0,0,.8);
}

/* ===== Navbar (keeps original JS hooks) ===== */
body.ot-shell .nav-content {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100% - 24px)); padding: 8px 10px 8px 16px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -12px rgba(14,38,56,.25); transition: box-shadow .3s, top .3s;
}
body.ot-shell .nav-content.scrolled { top: 8px; box-shadow: 0 16px 40px -14px rgba(14,38,56,.4); }
body.ot-shell .scroll-line { bottom: -3px; left: 30px; height: 4px; background: linear-gradient(90deg, var(--accent), var(--sun)); }
body.ot-shell .nav-content .content { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; }
body.ot-shell .ot-nav-start { display: flex; align-items: center; gap: 16px; }
body.ot-shell .logo img { width: auto; max-width: 100%; height: 46px; display: block; }
body.ot-shell .ot-nav-end { display: flex; align-items: center; gap: 14px; }
body.ot-shell .links { gap: 8px; padding: 0; }
body.ot-shell .create-account, body.ot-shell .login-button {
  font-family: 'Alexandria'; font-weight: 600; font-size: 14px; padding: 6px 16px 6px 10px;
  border-radius: 999px; gap: 6px; width: auto; flex: none; transition: transform .25s, background .25s;
}
body.ot-shell .create-account { background: var(--ink); color: var(--bg); }
body.ot-shell .create-account:hover { background: var(--accent-d); color: #fff; transform: translateY(-2px); }
body.ot-shell .login-button { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
body.ot-shell .login-button:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
body.ot-shell .links lord-icon { width: 28px !important; height: 28px !important; }
body.ot-shell .user-menu { display: flex; align-items: center; background: #0E2638; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 8px 4px 40px; }
body.ot-shell .user-menu .user-icon { display: block; padding: 0; width: 35px; height: 35px; }
body.ot-shell .user-menu::before { left: 12px; color: #fff; font-size: 18px; }
/* user menu sits at the left end of the bar, so the dropdown opens toward the right */
body.ot-shell .dropdown-content { top: 58px; right: auto; left: 0; background: var(--deep); border-radius: 22px; border: 0 solid rgba(255,255,255,.08); box-shadow: none; }
body.ot-shell .dropdown-content.open { border-width: 1px; box-shadow: var(--shadow); }
body.ot-shell .dropdown-content a { font-family: 'Alexandria'; font-size: 14px; color: #fff; text-decoration: none; }
body.ot-shell .dropdown-content a:hover { background: rgba(91,184,212,.2); }
body.ot-shell .bars { color: var(--ink); font-size: 28px; }
@media (max-width: 767px) {
  body.ot-shell .nav-content { border-radius: 26px; }
  body.ot-shell .links { left: calc(-100% - 60px); }
  body.ot-shell .links.active { left: 0; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 22px; padding: 14px; }
  body.ot-shell .links.active li { width: 100%; }
  body.ot-shell .links.active a { width: 100%; justify-content: center; }
}

/* ===== Footer ===== */
body.ot-shell #footer { background: transparent; }
body.ot-shell .footer-home { margin-top: 0; background: var(--deep-2); padding-top: 50px; }
body.ot-shell .img-footer { width: 180px; max-width: 100%; }
body.ot-shell .coat-footer { font-family: 'Lalezar'; font-size: 26px; color: #fff; margin-top: 14px; }
body.ot-shell .hr-footer { width: 120px; border: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--sun)); opacity: 1; }
body.ot-shell .footer-home .icon p { font-family: 'Alexandria'; font-size: 15px; color: var(--deep-muted); }
body.ot-shell .footer-home .icon a { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: transform .25s, background .25s; }
body.ot-shell .footer-home .icon a:hover { background: rgba(255,255,255,.18); transform: translateY(-4px); }
body.ot-shell .footer-home .icon a img { width: 30px; }
body.ot-shell .copy-right { font-family: 'Space Grotesk'; font-size: 13px; letter-spacing: .02em; font-weight: 500; background: transparent; color: #7F98A9; border-top: 1px solid rgba(255,255,255,.08); }
body.ot-shell .footer-home .copy-right .ros { color: var(--accent); text-decoration: none; }