:root{
  --bg:#0f1419; --card:#0b1220; --muted:#9aa4af; --text:#e5e7eb; --accent:#2456ff;
  --drawer-bg:#000; --drawer-border:#242424; --overlay:rgba(0,0,0,.5);
  --container:1200px; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --card:#ffffff; --muted:#6b7280; --text:#0b1220;
         --drawer-bg:#fff; --drawer-border:#e5e7eb; --overlay:rgba(0,0,0,.3); }
}
html,body{margin:0;background:var(--bg);color:var(--text)}
.container{max-width:var(--container);margin:0 auto;padding:28px}

/* ===== Header (desktop) ===== */
header[data-eli-mobile-nav]{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px}
header[data-eli-mobile-nav] .brand{display:flex;align-items:center;gap:12px}
header[data-eli-mobile-nav] .brand .logo{width:auto;height:44px;border-radius:10px;object-fit:cover;display:block}
header[data-eli-mobile-nav] .brand .brand-text{font-weight:800;font-size:18px}
header[data-eli-mobile-nav] nav{display:flex;gap:18px;align-items:center}
header[data-eli-mobile-nav] nav a{color:var(--muted);text-decoration:none;font-weight:700;position:relative}
header[data-eli-mobile-nav] nav a::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:-2px;width:0;height:2px;background:#fff;transition:width .25s}
header[data-eli-mobile-nav] nav a:hover::after{width:100%}

/* ===== Hamburger button ===== */
#eli-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
      border:1px solid #ffffff;background:#000;color:#fff;cursor:pointer;position:relative;z-index:2147483647}
@media (prefers-color-scheme: light){
      #eli-nav-toggle{border-color:#e5e7eb;background:#fff;color:#111}
    }
@media (max-width:767.98px){
  header[data-eli-mobile-nav] nav{display:none}
  #eli-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
      border:1px solid #333;background:#000;color:#fff;cursor:pointer;position:relative;z-index:2147483647}
}

/* ===== Drawer & Overlay ===== */
.drawer-overlay{position:fixed;inset:0;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:998;display:none}
body.drawer-open .drawer-overlay{opacity:1;pointer-events:auto;display:block}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(86vw, 360px);background:var(--drawer-bg);color:var(--text);border-inline-start:1px solid var(--drawer-border);transform:translateX(100%);transition:transform .3s ease;z-index:999;display:none;flex-direction:column}
body.drawer-open .drawer{transform:translateX(0);display:flex}

/* Drawer header */
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--drawer-border);height:56px}
.drawer-brand{display:flex;align-items:center;gap:8px;direction:ltr}
.drawer-brand .logo{width:auto;height:36px;border-radius:8px;object-fit:cover;display:block}
.drawer-close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-size:22px;line-height:1;height:36px;width:36px;color:var(--text);cursor:pointer;padding:0}
.drawer-close:focus-visible{outline:3px dashed #fff;outline-offset:4px}

/* Accordion menus */
.menu{padding:8px 0;overflow:auto}
.menu-section{border-bottom:1px solid var(--drawer-border)}
.menu-toggle{width:100%;text-align:inherit;background:transparent;border:none;color:var(--text);
  font-weight:700;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.menu-toggle .chev{transition:transform .25s ease}
.menu-toggle[aria-expanded="true"] .chev{transform:rotate(-90deg)} /* RTL: points left when open */
.submenu{max-height:0;overflow:hidden;transition:max-height .25s ease}
.submenu a{display:block;padding:10px 22px 10px 16px;text-decoration:none;border-radius:8px;color:#fff}
.submenu a:visited{color:#fff}
.submenu a:hover{background:#111}
@media (prefers-color-scheme: light){
  .submenu a{color:#111}
  .submenu a:visited{color:#111}
  .submenu a:hover{background:#f1f5ff}
}

/* Page content styles */
h1,h2 {margin:0 0 12px}
h2 {font-size:28px}
.grid {display:grid;grid-template-columns:repeat(auto-fill, minmax(260px,1fr));gap:18px;margin-top:20px}
.card {background:var(--card);border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(15,23,42,0.04);display:flex;flex-direction:column;gap:10px}
.thumb {height:140px;border-radius:10px;background-size:cover;background-position:center}
.meta {display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:6px}
.title {font-weight:700}
.instructor {font-size:13px;color:var(--muted)}
.buy-btn {margin-top:8px;padding:8px 12px;background:var(--accent);color:white;border:none;border-radius:8px;text-decoration:none;font-weight:700;text-align:center;display:inline-block}
.buy-btn:hover {background: white; color: var(--accent);}
footer {margin-top:36px;padding:26px 14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
@media (max-width:900px) {.grid{grid-template-columns:1fr}}

/* ===== A11Y widget (scoped) ===== */
#a11y-button{position:fixed;top:0rem;right:0rem;left:auto;width:35px;height:35px;border:none;padding:0;margin:0;border-radius:50%;background:transparent;box-shadow:0 8px 20px rgba(0,0,0,.35);display:grid;place-items:center;cursor:pointer;z-index:9998;}
#a11y-button img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;pointer-events:none;}
#a11y-button:focus-visible{outline:3px dashed #fff;outline-offset:4px}
#a11y-panel{position: fixed;top: 48px;left: auto;width: min(92vw, 360px);background: #111;color:#fff;border-radius: 16px;box-shadow: 0 12px 30px rgba(0,0,0,.4);padding: .75rem;z-index: 9999;display: none; right: 0.75rem;}
#a11y-panel[aria-hidden="false"]{display:block}
.a11y-panel__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem}
.a11y-panel__row + .a11y-panel__row{margin-top:.25rem}
.a11y-panel__label{font-size:.95rem}
.a11y-panel__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.a11y-btn{background:#222;color:#fff;border:1px solid #444;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;min-height:44px}
.a11y-btn[aria-pressed="true"]{outline:2px solid #0bf}
.a11y-small{font-size:.9rem}
#a11y-panel .a11y-close{
  position:absolute; right:2px; top:2px; width:40px; height:40px;
  border-radius:8px; border:none; background:transparent; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; cursor:pointer;
}
#a11y-panel .a11y-close:focus-visible{ outline:3px dashed #fff; outline-offset:3px; }
#a11y-panel{
  right: max(0.75rem, env(safe-area-inset-right));
  top: calc(48px + env(safe-area-inset-top));
  max-height: calc(100svh - 64px - env(safe-area-inset-top));
  overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#a11y-panel .a11y-btn{ min-height: 44px; }
#a11y-panel .a11y-panel__label{ font-size: 1rem; }
#a11y-panel .a11y-panel__row[data-tts-row]{align-items:stretch;gap:.5rem}
#a11y-panel .a11y-panel__row[data-tts-row] .a11y-panel__actions{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem; width:100%;
}
#a11y-panel .a11y-panel__row[data-tts-row] .a11y-btn{width:100%}
@media (max-width:420px){
  #a11y-panel .a11y-panel__row[data-tts-row]{flex-direction:column}
  #a11y-panel .a11y-panel__row[data-tts-row] .a11y-panel__actions{grid-template-columns:1fr}
}
@media (max-width: 420px){
  #a11y-panel{width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 1rem);
    right: max(0.5rem, env(safe-area-inset-right)); left: max(0.5rem, env(safe-area-inset-left));}
}
@media (max-width: 360px){
  #a11y-panel{top: 0; right: 0; left: 0; width: 100vw; height: 100svh; max-height: none; border-radius: 0;}
}

/* High-contrast & readable font toggles (body classes) */
.a11y-contrast{background:#000 !important;color:#fff !important}
.a11y-contrast *{text-shadow:none !important;box-shadow:none !important}
.a11y-underline-links a{text-decoration:underline;text-underline-offset:2px}
.a11y-readable-font{font-family: 'Atkinson Hyperlegible','Assistant','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important}

/* Zoom levels on <html> */
html.a11y-zoom-1 { font-size: 110%; }
html.a11y-zoom-2 { font-size: 120%; }
html.a11y-zoom-3 { font-size: 135%; }
html.a11y-zoom-4 { font-size: 150%; }

/* Reduce motion */
.a11y-reduced-motion *{animation:none !important;transition:none !important;scroll-behavior:auto !important}

/* Dark mode polish for existing design tokens */
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1419;--card:#0b1220;--muted:#9aa4af}
  html,body{background:var(--bg);color:#e5e7eb}
  .card, .newsletter, .about, .stat{background:var(--card);}
  nav a{color:var(--muted)}
  footer{color:var(--muted)}
  .search input{background:#0b1220;color:#e5e7eb;border-color:#1f2937}
  .stat{border-color:#1f2937}
}

/* Mobile tweaks for the floating button */
@media (max-width:600px){#a11y-button{top:0rem;right:0rem;left:auto;width:35px;height:35px}
  #a11y-panel{top: 48px;left: auto;}
}

/* --- Mobile header fixes v2 (structure-aware) --- */
@media (max-width: 600px){
  header .brand{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:.75rem; }
  header .logo{ width:auto; height:36px; flex:0 0 36px; }
  header nav a{ font-size:.95rem; }
  header nav .cta{ margin-inline-start:auto; }
}

/* Remove CTA in header as requested */
header .cta{display:none !important}

/* --- Harden mobile header further --- */
@media (max-width: 420px){
  header .brand{ gap:.5rem; }
  header .logo{ width:auto; height:32px; }
  header nav a{ font-size:.9rem; }
}
@media (max-width: 360px){
  header nav a{ font-size:.85rem; }
}

/* Underline animation (left-to-right) on header nav links; no color change on hover */
header nav a{
  position: relative;
  text-decoration: none;
  font-weight: 600;
}
header nav a::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width .25s ease;
}
header nav a:hover::after{
  width: 100%;
}
/* Neutralize previous hover color changes */
header nav a:hover{
  color: var(--muted) !important;
}

/* === Underline animation: white, robust, both hover & keyboard focus === */
header nav a{
  position: relative;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
header nav a::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width .25s ease;
}
html[dir="rtl"] header nav a::after{
  right: 0;
  left: auto;
}
header nav a:hover::after,
header nav a:focus-visible::after{
  width: 100%;
}
header nav a:hover{ color: inherit !important; }

.card.hidden { display: none; }

/* === Link-like buttons for footer === */
.linklike{ background:transparent; border:none; padding:0; margin:0; font:inherit; color:var(--muted); cursor:pointer; }

/* === Terms Modal & Overlay === */
.terms-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.terms-modal{ position:fixed; inset-block-start:50%; inset-inline:0; margin-inline:auto; width:min(720px, 92vw);
  transform: translateY(-40%) scale(.98); opacity:0; pointer-events:none;
  background:var(--card); color:var(--text); border:1px solid var(--drawer-border); border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.35); z-index:1001; transition:transform .25s ease, opacity .25s ease;
}
.terms-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--drawer-border); }
.terms-content{ padding:16px; max-height:60svh; overflow:auto; }
.terms-footer{ display:flex; justify-content:flex-end; gap:.5rem; padding:12px 16px; border-top:1px solid var(--drawer-border); }
.terms-close{ background:transparent; border:none; width:36px; height:36px; border-radius:8px; color:var(--text); font-size:22px; cursor:pointer; }
.terms-cta{ padding:.6rem 1rem; border:none; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
.terms-cta:hover{ background:#fff; color:var(--accent); }

/* Open state */
body.terms-open .terms-overlay{ opacity:1; pointer-events:auto; }
body.terms-open .terms-modal{ transform: translateY(-50%) scale(1); opacity:1; pointer-events:auto; }

/* Mobile */
@media (max-width: 420px){
  .terms-modal{ width: calc(100vw - 1rem); border-radius:12px; }
}

/* === Footer link underline animation (like header) === */
footer .linklike, footer a.linklike{
  position: relative;
  text-decoration: none;
  font-weight: 700;
}
footer .linklike::after, footer a.linklike::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width .25s ease;
}
html[dir="rtl"] footer .linklike::after, html[dir="rtl"] footer a.linklike::after{
  right: 0;
  left: auto;
}
footer .linklike:hover::after, footer .linklike:focus-visible::after,
footer a.linklike:hover::after, footer a.linklike:focus-visible::after{
  width: 100%;
}

/* === Footer links: white hover & no default underline === */
footer .linklike, footer a.linklike{
  position: relative;
  text-decoration: none;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
}
footer .linklike::after, footer a.linklike::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width .25s ease;
}
html[dir="rtl"] footer .linklike::after, html[dir="rtl"] footer a.linklike::after{
  right: 0;
  left: auto;
}
footer .linklike:hover, footer .linklike:focus-visible,
footer a.linklike:hover, footer a.linklike:focus-visible{
  color: #fff;
  outline: none;
}
footer .linklike:hover::after, footer .linklike:focus-visible::after,
footer a.linklike:hover::after, footer a.linklike:focus-visible::after{
  width: 100%;
}

/* === Terms checkbox row === */
.terms-footer{
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.terms-agree{
  display:flex; align-items:center; gap:.5rem; color:var(--text);
  font-size:.95rem;
}
.terms-agree input{ inline-size:1.1rem; block-size:1.1rem; }
.terms-cta[disabled]{ opacity:.5; cursor:not-allowed; }



  .sidebar{ display:none; }
}


/* Hide hamburger button for pages with permanent sidebar */
#eli-nav-toggle{display:none !important}

/* === "קרא עוד" — אותה אנימציה כמו תנאי שימוש === */
.referral-btn{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  font-weight: 700;
  display: inline-block;
}

.referral-btn::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;       /* כמו בכפתור תנאי שימוש */
  transition: width .25s ease;
}

/* RTL: הקו מתחיל מצד ימין */
html[dir="rtl"] .referral-btn::after{
  right: 0;
  left: auto;
}

/* אותו התנהגות hover/focus כמו בכפתור תנאי שימוש */
.referral-btn:hover,
.referral-btn:focus-visible{
  color: #fff;
  outline: none;
}

.referral-btn:hover::after,
.referral-btn:focus-visible::after{
  width: 100%;
}

/* Responsive */
/* Desktop styles for your image */
.responsive-image {
    width: 150px;   /* Desktop width */
    height: 150px;  /* Desktop height */
    object-fit: cover; /* Keeps image from stretching */
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  .page-header {
    padding: 20px;
  }

  .content-section {
    padding: 16px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  /* Mobile image size */
  .responsive-image {
    width: 150px;   /* Mobile width */
    height: 150px;  /* Mobile height */
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .info-box {
    border-color: #1f2937;
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--muted);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 8px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mb-4 {
  margin-bottom: 32px;
}

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn:hover {
  background: white;
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(36, 86, 255, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.btn-secondary:hover {
  background: var(--accent);
  color: white;
}

/* --------- new ---------*/

.logo {
  width: auto;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* Page Header */
.page-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.4)
  );
  border-radius: 12px;
  padding: 28px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(18, 31, 64, 0.06);
  margin-bottom: 40px;
}

.content-section p {
  margin: 0 0 16px;
  line-height: 1.7;
}

/* Responsive */
/* Desktop styles for your image */
.responsive-image {
    width: 550px;   /* Desktop width */
    height: 400px;  /* Desktop height */
    object-fit: cover; /* Keeps image from stretching */
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  .page-header {
    padding: 20px;
  }

  .content-section {
    padding: 16px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  /* Mobile image size */
  .responsive-image {
    width: 300px;   /* Mobile width */
    height: 200px;  /* Mobile height */
  }
}