/* =============================
   0) TABLE OF CONTENTS
   -----------------------------
   1) Font-Face Definitions
   2) Theme Variables
   3) Global Reset & Base Styles
   4) Header & Navigation
   5) Hero & Content Boxes
   6) Footer
   7) Dark/Light Mode Toggle
   8) Dark Mode Overrides
   9) Responsive
  10) Legal Bar
   ============================= */
/* =============================
   1) FONT-FACE DEFINITIONS
   ============================= */
@font-face {
  font-family: 'Scheherazade New';
  src: url('fonts/ScheherazadeNew-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scheherazade New';
  src: url('fonts/ScheherazadeNew-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* =============================
   2) THEME VARIABLES
   ============================= */
:root {
  --main-color: #34495e;
  --text-color: #34495e;
  --page-bg: #f0f2f5;
  --header-bg: #ffffff;
  --nav-bg: #ffffff;
  --overlay-bg: rgba(0,0,0,0.5);
  --border-light: #dddddd;
  --hover-bg: rgba(52,73,94,0.05);
  --header-gap-vert: 1rem;
  --header-gap-horz: 2rem;
  --page-gutter: 1rem;
  --nav-width: 250px;
  --box-radius: 12px;
  --box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  --transition-speed: 0.3s;
  --footer-icon-color: #34495e;
  --legal-font-size: 0.65rem;
  --legal-opacity: 0.75;
  --scale: 1; /* global UI scale: phone/desktop will override */
  
}

/* =============================
   3) GLOBAL RESET & BASE STYLES
   ============================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Scheherazade New', serif;
  font-size: calc(16px * var(--scale));
  direction: rtl;
  background-color: var(--page-bg);
  text-align: right;
  height: 100%;
}
a {
  text-decoration: none;
}
body {
  margin: 0;
  padding: 0 var(--page-gutter);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--page-bg);

  /* Sticky footer layout */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { text-decoration: none; }

/* Main content grows to fill available space so footer sticks to bottom */
main { flex: 1 0 auto; }
a { text-decoration: none; }

/* =============================
   4) HEADER & NAVIGATION
   ============================= */
.main-header {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--header-bg);
  border-radius: var(--box-radius);
  margin-top: 1rem;
  min-height: 100px;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: 1001;
}
.main-header .logo img { max-height: 70px; width: auto; }
.logo img { max-height: 70px; min-height: 70px; width: auto; }
.logo a > svg { width: 120px; height: auto; max-height: 50px; display: block; }

/* ---- Auth buttons ---- */
.auth-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Works anywhere, not only when nested in .auth-buttons */
.dropdown { position: relative; z-index: 2001; }
.btn-signup {
  background-color: var(--text-color);
  color: var(--header-bg);
  border: 2px solid #fff;
  padding: 10px 18px;   /* fixed so size never shrinks with --scale */
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Scheherazade New', serif;
  font-size: 20px;      /* fixed px size, independent of :root --scale */
}
.btn-signup:hover { box-shadow: 0 0 0 2px var(--text-color); }

.btn-login {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid transparent;
  padding: 10px 18px;   /* fixed so size never shrinks with --scale */
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Scheherazade New', serif;
  font-size: 20px;      /* fixed px size, independent of :root --scale */
}
.btn-login:hover { border-color: var(--text-color); }

.profile-name {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid transparent;
  padding: 0.5rem 1.2rem;
  border-radius: 7px;
  cursor: pointer;
  font-family: 'Scheherazade New', serif;
  font-size: 1.25rem;
}
.profile-name:hover { border-color: var(--text-color); }

/* ---- Dropdown ---- */
.dropdown-toggle {
  background: none; border: none; font-size: 1.25rem; color: var(--text-color); cursor: pointer;
  line-height: 1;
  display: flex;              /* always visible */
  align-items: center;
  height: 100%;
}
.dropdown-toggle svg { vertical-align: middle; transition: transform 0.2s ease; width: 30px; height: 30px; }
.chevron-up { display: none; }
.dropdown-toggle.open .chevron-up { display: inline; }
.dropdown-toggle.open .chevron-down { display: none; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;                /* physical fallback */
  inset-inline-end: 0;     /* logical: works in RTL/LTR */
  top: calc(100% + 0.5rem);
  background: white;
  box-shadow: var(--box-shadow);
  border-radius: var(--box-radius);
  padding: 0.5rem 0;
  z-index: 2002;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.dropdown-menu a {
  display: block; width: 100%; text-align: right; padding: 0.5rem 1rem; color: var(--main-color);
  white-space: nowrap; font-size: 1.5rem;
}
.dropdown-menu a:hover { background-color: var(--hover-bg); }

/* Never show desktop-style auth buttons inside the dropdown */
.dropdown-menu .btn-login, .dropdown-menu .btn-signup { display: none !important; }
.dropdown.open .dropdown-menu { display: block !important; }
.dropdown-toggle.open + .dropdown-menu { display: block !important; }
.dropdown.open .dropdown-menu,
.dropdown-menu.open {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* ---- Desktop/Mobile visibility toggles ---- */
.desktop-only { display: block !important; }
.mobile-only  { display: none  !important; }

/* ---- Hamburger ---- */
.hamburger {
  background: none; border: none; display: flex; flex-direction: column; gap: 4px;
  width: 30px; height: 24px; cursor: pointer; z-index: 1002;
}
.hamburger span { flex: 1; background-color: var(--main-color); border-radius: 2px; }

/* ---- Side Nav (off-canvas) ---- */
.side-nav {
  position: fixed; top: 0; right: calc(-1 * var(--nav-width)); width: var(--nav-width); height: 100vh;
  background-color: var(--header-bg); padding: 2rem; box-shadow: var(--box-shadow);
  transition: right var(--transition-speed) ease; z-index: 1003;
}
.side-nav.open { right: 0; }
.side-nav .nav-links { margin-top: 2rem; }
.side-nav a {
  display: block; padding: 0.75rem 1rem; border-radius: var(--box-radius);
  color: var(--main-color); transition: background-color var(--transition-speed);
}
.side-nav a:hover { background-color: var(--hover-bg); }

/* ---- Close button in side-nav ---- */
.close-btn {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  position: absolute; top: 1rem; left: 1rem;
}

/* ---- Overlay ---- */
.overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
  transition: opacity var(--transition-speed) ease; z-index: 1002;
}
.overlay.open { opacity: 1; visibility: visible; }

/* ---- Desktop header auth-link hover ---- */
.main-header .auth-link-text {
  padding: 0.5rem 1rem; border-radius: var(--box-radius); transition: background-color var(--transition-speed);
}
.main-header .auth-link-text:hover { background-color: var(--hover-bg); }

/* ---- Mobile-only auth link block ---- */
.auth-link.mobile-only { display: block; width: 100%; margin: 1rem 0; text-align: center; }
.auth-link.mobile-only .auth-link-text {
  display: inline-block; padding: 10px 18px; border-radius: var(--box-radius);
  color: var(--main-color); transition: background-color var(--transition-speed);
  font-size: 20px; /* fixed px size to match desktop buttons */
}
.auth-link.mobile-only .auth-link-text:hover { background-color: var(--hover-bg); }

/* =============================
   5) HERO & CONTENT BOXES
   ============================= */
.hero, .premium-box, .group-box, .private-box, .profile-main {
  background-color: var(--header-bg);
  box-shadow: var(--box-shadow);
  border-radius: var(--box-radius);
  padding: 2rem; margin: 2rem 0;
}
.hero { text-align: center; }
.hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--main-color); }
.hero p { font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--main-color); }
.cta {
  display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--box-radius);
  border: 2px solid var(--main-color); color: var(--main-color);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}
.cta:hover { background-color: var(--main-color); color: #ffffff; }

.hero--forum .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta--ghost{background:transparent;border:2px solid var(--brand,#34495e);color:var(--brand,#34495e)}
.cta--ghost:hover{background:rgba(52,73,94,.06)}
.hero--forum .hero-sub{margin-top:.5rem;color:var(--muted,#6b7280);font-weight:700}


/* =============================
   6) FOOTER
   ============================= */
footer {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background-color: var(--header-bg);
  padding: var(--header-gap-vert) var(--header-gap-horz);
  box-shadow: var(--box-shadow); position: relative; z-index: 1000; border-radius: var(--box-radius); gap: 20px;
  margin-top: auto;
  margin-bottom: 1rem;
  overflow: visible;
}
footer .icons { display: flex; flex-direction: row; align-items: center; gap: 20px; }
footer a { display: inline-block; transition: opacity 0.3s; color: inherit !important; white-space: nowrap; text-decoration: none !important; }
footer .icons a { width: 40px; height: 40px; }
footer a:hover { opacity: 0.8; }
footer svg { width: 100%; height: 100%; color: var(--footer-icon-color); }
footer p, footer a:not(.icons a) { font-size: 1.2rem; }

/* =============================
   7) DARK/LIGHT MODE TOGGLE
   ============================= */
.toggle-container {
  position: relative; width: 60px; height: 30px; margin: 1rem auto; display: block;
  background-color: #ccc; border-radius: 30px; cursor: pointer; transition: background-color 0.3s;
}
.toggle-container.dark { background-color: #333; }
.toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  background-color: white; border-radius: 50%; transition: transform 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.toggle-container.dark .toggle-knob { transform: translateX(30px); }
.toggle-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; pointer-events: none; }
.toggle-icons .icon-sun::before { content: "☀️"; font-size: 16px; opacity: 0.7; }
.toggle-icons .icon-moon::before { content: "🌙"; font-size: 16px; opacity: 0.7; }

/* =============================
   8) DARK MODE OVERRIDES
   ============================= */
body.dark-mode {
  --main-color: #F5F7F8;
  --page-bg: #34495E;
  --text-color: #F5F7F8;
  --header-bg: #19242f;
  --nav-bg: #19242f;
  --overlay-bg: rgba(0,0,0,0.8);
  --hover-bg: rgba(255,255,255,0.2);
  --box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --footer-icon-color: #ffffff;
}
body.dark-mode { background-color: var(--page-bg); color: var(--text-color); }
body.dark-mode .main-header { background-color: var(--header-bg); }
body.dark-mode .side-nav { background-color: var(--nav-bg); }
body.dark-mode .overlay { background-color: var(--overlay-bg); }
body.dark-mode .side-nav [data-lang-content] a,
body.dark-mode .auth-link-text { color: var(--text-color); }
body.dark-mode .side-nav [data-lang-content] a:hover,
body.dark-mode .auth-link-text:hover { background-color: var(--hover-bg); }
body.dark-mode .cta:hover { color: #34495E; }

/* System dark mode tweak */
@media (prefers-color-scheme: dark) { :root { --footer-icon-color: #ffffff; } }

/* =============================
   9) RESPONSIVE
   -----------------------------
   Two breakpoints:
   - Phone  : ≤ 700px
   - Desktop: > 700px (base rules; extra tweaks at ≥ 1025px)
   Use --scale to resize the UI at these breakpoints.
   ============================= */
/* PHONE */
@media (max-width: 700px) {
  :root { --scale: 0.95; }

  .btn-login, .btn-signup { display: none; }
  #dropdown-toggle, .dropdown-toggle { display: flex; } /* show hamburger on phones */
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .main-header .logo img { max-height: 3rem !important; }

  footer { align-items: center; }
  footer .icons { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  footer .icons-row { display: flex; justify-content: center; gap: 20px; }
  .profile-name { display: none !important; } /* hide desktop name; use mobile name inside hamburger */
}

/* DESKTOP (enhancements) */
@media (min-width: 1025px) {
  :root { --scale: 1.05; }

  .mobile-only { display: none !important; }
  #mobile-signup, #mobile-login { display: none; }
  
}

/* =============================
   10) LEGAL BAR
   ============================= */
/* Keep legal inside footer and make it smaller & subtler */
.legal {
  font-size: var(--legal-font-size);
  color: #555;
  text-align: center;
  opacity: var(--legal-opacity);
}
/* Override earlier footer link sizing specifically for the legal area */
footer .legal,
footer .legal a,
footer .legal p,
footer .legal span,
footer .legal small {
  font-size: var(--legal-font-size) !important;
  line-height: 1.5;
}
.legal a {
  color: inherit;
  text-decoration: none;
}
.legal a:hover {
  text-decoration: underline;
  opacity: calc(var(--legal-opacity) + 0.1);
}
/* Inside-footer layout */
footer .legal {
  position: static;
  top: auto;
  margin: 0;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid #e9ecef;
  background: transparent;
}

/* =============================
   5.1) HERO-LIKE PANELS + FEATURE ROW + FAQ
   Make any section look/behave like the hero, lay out three across,
   and style the FAQ as card rectangles.
   ============================= */

/* HERO-LIKE PANELS (centered, roomy leading, subtle hover) */
.as-hero{
  /* full-width surface like the hero */
  display:block;
  width:100%;
  max-width:none;
  grid-column:1 / -1 !important;
  flex:1 0 100% !important;

  background:var(--header-bg);
  border-radius:var(--box-radius);
  box-shadow:var(--box-shadow);
  padding:2rem;
  margin:2rem 0;

  /* typography & centering */
  text-align:right;
  line-height:1.9;

  /* interaction */
  transition:transform .15s ease, box-shadow .15s ease;
}
.as-hero:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}
/* inner spacing so things don’t crash into each other */
.as-hero > * + * { margin-top:.9rem; }
.as-hero h1, .as-hero h2, .as-hero h3{ margin-top:0; margin-bottom:.4em; line-height:1.2; }
.as-hero p, .as-hero li{ line-height:1.95; }

/* HORIZONTAL FEATURE ROW
   Usage:
     <section class="feature-row cols-3">
       <div class="as-hero">…</div>
       <div class="as-hero">…</div>
       <div class="as-hero">…</div>
     </section>
     or <section class="feature-row cols-1">…</section> for single column.
*/
.feature-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* default 3 across */
  gap:1rem;
  align-items:stretch;
  margin:1.25rem 0;
  width:100%;
}
.feature-row > .as-hero{
  margin:0;
  width:100% !important;
  grid-column:auto !important; /* cancel 1 / -1 from .as-hero inside grid */
  flex:initial !important;
}
.feature-row.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-row.cols-1{ grid-template-columns: 1fr; }

/* Stack on phones only */
@media (max-width: 700px){
  .feature-row,
  .feature-row.cols-3,
  .feature-row.cols-1{
    grid-template-columns: 1fr;
  }
}

@media (max-width:700px){
  .as-hero{ padding:1.25rem; margin:1rem 0; }
}

/* Hide mobile auth links by default (>= 701px) */
.mobile-auth-btn { 
  display: none !important; 
}

/* Show them only on phones (< 700px) */
@media (max-width: 700px) {
  .mobile-auth-btn { 
    display: inline-block !important; /* or block if you want full width */
  }
}
/* Logged-in state: hide mobile auth links everywhere */
body.logged-in .mobile-auth-btn,
body[data-auth="logged-in"] .mobile-auth-btn,
body.logged-in #mobile-login,
body[data-auth="logged-in"] #mobile-login,
body.logged-in #mobile-signup,
body[data-auth="logged-in"] #mobile-signup,
body.logged-in .auth-link.mobile-only,
body[data-auth="logged-in"] .auth-link.mobile-only {
  display: none !important;
}
/* =============================
   5.2) FAQ CARDS (rectangle accordions)
   Markup:
     <div class="faq">
       <details>
         <summary>سؤال…</summary>
         <div class="answer">نص الجواب…</div>
       </details>
     </div>
   ============================= */
.faq{
  max-width: 980px;
  margin: 1.5rem auto;
}
.faq details{
  background: var(--header-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  overflow: hidden;
  margin: .65rem 0;
}
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .95rem 1.1rem;
  font-weight: 800;
  color: var(--main-color);
  cursor: pointer;
  list-style: none;               /* hide default triangle in Firefox */
}
.faq summary::-webkit-details-marker{ display:none; } /* hide marker in WebKit */

/* chevron-in-circle indicator (replaces + / −) */
.faq summary::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;              /* keep a fixed box at the edge */
  margin-inline-start: auto;   /* push icon to the opposite side of text (RTL/LTR safe) */
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;

  /* CLOSED: circle-chevron-down */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 10-4 4-4-4'/%3E%3C/svg%3E");
}

.faq details[open] summary{
  border-bottom: 1px solid #eaeef3;
}

/* OPEN: circle-chevron-up */
.faq details[open] summary::after{
  content: "";
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334495e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 14 4-4 4 4'/%3E%3C/svg%3E");
}

.faq .answer{
  padding: 1rem 1.1rem 1.15rem;
  line-height: 1.95;
  color: var(--text-color);
  background: var(--header-bg);
}

/* keyboard accessibility */
.faq summary:focus-visible{
  outline: 2px solid #b9c7d5;
  outline-offset: 2px;
  border-radius: 10px;
}
/* Extra breathing room for FAQ answer paragraphs */
.faq .answer p{
  margin: .7rem 0 .3rem;   /* space above/below each paragraph */
  line-height: 1.95;
  text-align: right;       /* match container leading */
}

.faq .answer p + p{
  margin-top: .65rem;      /* extra space between stacked paragraphs */
}
/* ===========================
   QuickPoints (FAQ-like)
   Make QuickPoints look EXACTLY like .faq cards (no toggle body)
   =========================== */
.quickpoints{
  max-width: 980px;
  margin: 1.5rem auto;
}
.quickpoints details{
  background: var(--header-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  overflow: hidden;
  margin: .65rem 0;
}
.quickpoints summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .95rem 1.1rem;         /* same as .faq summary */
  font-weight: 800;
  color: var(--main-color);
  cursor: default;                /* not a toggle like FAQ */
  list-style: none;
  line-height: 1.95;              /* same roomy leading */
}
.quickpoints summary::-webkit-details-marker{ display:none; }
/* Add check-in-circle icon to the far edge of quickpoints summaries */
.quickpoints summary::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;                 /* fixed icon box */
  margin-inline-start: auto;      /* push to the far edge (RTL/LTR safe) */
  opacity: .95;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Filled circle + white check SVG icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2334495e'/%3E%3Cpath d='M8 12l3 3 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Don’t expand: hide anything after the summary */
.quickpoints details > *:not(summary){ display:none !important; }
.quickpoints details:hover{ border-color: #d3dee7; }


/* -----------------------------------------
   CSS-ONLY: Mobile auth visibility (<700px)
   Show by default on phones, but hide if
   the page *has* a logged-in indicator.
   ----------------------------------------- */

/* Default: show mobile auth buttons on phones */
@media (max-width: 700px) {
  .mobile-auth-btn {
    display: inline-block !important;
  }
}

/* If LOGGED IN (CSS-only detection via :has):
   - presence of .profile-name anywhere, OR
   - a profile link inside the hamburger (.side-nav) or dropdown (.dropdown-menu)
   Then hide the mobile auth buttons and any login/signup links in menus. */
@media (max-width: 700px) {
  /* Hide the two mobile auth buttons */
  body:has(.profile-name) .mobile-auth-btn,
  body:has(.side-nav a[href*="/html/profile"]) .mobile-auth-btn,
  body:has(.dropdown-menu a[href*="/html/profile"]) .mobile-auth-btn {
    display: none !important;
  }

  /* Hide menu entries that go to login/signup inside hamburger & dropdown */
  body:has(.profile-name) .side-nav a[href*="/html/login"],
  body:has(.profile-name) .side-nav a[href*="/html/signup"],
  body:has(.profile-name) .dropdown-menu a[href*="/html/login"],
  body:has(.profile-name) .dropdown-menu a[href*="/html/signup"],
  body:has(.side-nav a[href*="/html/profile"]) .side-nav a[href*="/html/login"],
  body:has(.side-nav a[href*="/html/profile"]) .side-nav a[href*="/html/signup"],
  body:has(.dropdown-menu a[href*="/html/profile"]) .dropdown-menu a[href*="/html/login"],
  body:has(.dropdown-menu a[href*="/html/profile"]) .dropdown-menu a[href*="/html/signup"] {
    display: none !important;
  }
}