:root{
  --brand:#0a4cff;
  --text:#222;
  --muted:#666;
  --bg:#ffffff;
  --border:#e6e6e6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.5;
  padding-top:72px; /* space for fixed header */
}

/* Header / nav */
header{
  position:fixed; top:0; left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:1000;
}
nav{
  max-width:1100px; margin:0 auto;
  height:72px;
  display:flex; align-items:center; gap:24px;
  padding:0 16px;
}
.logo-container img{height:40px; width:auto}
.nav-links{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.nav-link{
  text-decoration:none; color:#333; font-weight:600;
  padding:8px 10px; border-radius:8px;
}
.nav-link:hover{background:#f3f5ff; color:#0a2cff}
.nav-link.active{background:#e9efff; color:#0a2cff}

/* Layout */
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.section{background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px}

/* Buttons */
.btn{
  background:var(--brand); color:#fff; text-decoration:none;
  display:inline-block; padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
}
.btn.secondary{background:#f3f5ff; color:#0a2cff; border:1px solid #d7dfff}
.btn:hover{filter:brightness(0.95)}

/* Cards grid */
.card-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
.card{border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff}
.badge{font-size:12px; background:#eef3ff; color:#0a2cff; padding:4px 8px; border-radius:999px}
.price{font-weight:700}

/* Tables */
.table{width:100%; border:1px solid var(--border); border-radius:12px; overflow:auto}
.table-row{display:grid; gap:12px; padding:12px 14px; border-top:1px solid var(--border)}
.table-head{background:#fafafa; font-weight:700; position:sticky; top:0}
.emp-grid{grid-template-columns: 1.2fr 1.2fr 1.1fr .8fr .7fr 1.4fr 1fr .9fr .9fr}

/* Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
}
.form-row{display:flex; gap:12px; margin:10px 0}
label{min-width:120px;color:#333;font-weight:600}

/* Helpers */
.subtitle{color:var(--muted); margin-top:-6px}
.searchbar{margin:16px 0}
.note{color:var(--muted)}

/* Center the whole page section nicely */
.centerpage{
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;         /* vertical comfort */
  justify-content: center;     /* horizontal centering */
}
.centerwrap{
  width: 100%;
  max-width: 1100px;
  text-align: center;          /* center headings and text */
}

/* Center card layout and limit card width so they don't stretch too wide */
.card-grid.centered-grid{
  justify-items: center;       /* center each grid item */
}
.card{
  width: 100%;
  max-width: 360px;            /* nice readable card width */
  text-align: left;            /* keep inner text readable; change to center if you prefer */
}

/* Tabs look nicer when centered */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* Inputs style for white theme */
.searchbar input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
}

/* Keep headings tight on white */
.section h1{ margin-top: 0; }

/* --- Navbar height handling --- */
body { padding-top: 72px; }            /* room for fixed navbar */
header { position: fixed; top: 0; left: 0; right: 0; }

/* --- Normalize page containers (remove absolute centering) --- */
.container {
  position: static !important;         /* kill absolute positioning */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-width: 1100px;
  padding: 0 16px;
  margin: 24px auto;                   /* standard top space under navbar */
}

/* If you added any 'centerpage/centerwrap' earlier, disable vertical centering */
.centerpage { min-height: auto !important; display: block !important; }
.centerwrap { text-align: center; }     /* keep headings centered if you used it */

/* General section card */
.section { background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:20px; }

/* Solutions page grid centered but not vertically pushed */
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; justify-items:center; }
.card { width:100%; max-width:360px; }

/* Reduce excessive page-specific top margins (old theme) */
.cheatsheet { margin-top: 24px !important; }
.blog-posts { margin-top: 24px !important; }

/* Make sure the page can scroll normally */
html, body { height:auto; overflow: auto; }

/* Admin form should flow normally under the fixed navbar */
.admin-box{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 24px auto !important;
  max-width: 640px;            /* optional: nice width */
}

/* ---- Cheat sheet layout ---- */
.cheat-wrap { max-width: 900px; margin: 0 auto; }
.cheat-heading { text-align: center; margin-bottom: 16px; }
.cheat-heading h1 { margin: 0; }
.cheat-heading h2 { margin: 6px 0 10px; color: #555; font-weight: 600; }
.cheat-note {
  background: #fff7e6; border: 1px solid #ffe8b3;
  color: #7a5c00; padding: 10px 12px; border-radius: 10px; text-align: center;
}
.cheat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.cheat-card { border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px; background: #fff; }
.cheat-card pre { background: #0f172a; color: #c7ffb4; padding: 12px; border-radius: 8px; overflow-x: auto; }

/* ---- Employee cards ---- */
.emp-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.emp-card h3 { font-size: 20px; }
.mini-form { margin-top: 10px; }
.mini-form label { display:block; font-weight:600; margin-bottom:6px; }
.mini-form input[type="number"] { max-width: 180px; }


/* Keep code blocks LTR even in RTL pages */
.rtl pre, .rtl code, .rtl pre code {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* Keep email/phone LTR even on Arabic (RTL) pages */
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}


/* Consistent form layout on both EN/AR pages */
.form-row {
  display: grid;
  grid-template-columns: 180px 1fr;  /* label | input */
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

.form-row label {
  font-weight: 600;
  white-space: nowrap;
}

/* Make inputs full width and tidy */
.form-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #fff;
  outline: none;
}

/* Keep email/phone LTR even on RTL pages */
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* On small screens, stack label above field */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .form-row label { margin-bottom: 2px; }
}


/* Better bullets/padding on RTL lists */
.rtl .spec {
  padding-right: 1.25rem;
  padding-left: 0;
  direction: rtl;
}
.rtl .spec li {
  list-style-position: inside;
}

/* Make cards read right-to-left on Arabic pages */
.rtl .card,
.rtl .emp-card {
  direction: rtl;
  text-align: right;
}

/* Ensure inner text aligns right as well */
.rtl .card h1,
.rtl .card h2,
.rtl .card h3,
.rtl .card p,
.rtl .card .muted,
.rtl .card .card-text,
.rtl .card .spec,
.rtl .emp-card h3,
.rtl .emp-card .spec {
  text-align: right;
}

/* Bullet lists look tidy on RTL */
.rtl .spec {
  padding-right: 1.25rem;
  padding-left: 0;
  list-style-position: inside;
}

/* Keep LTR where it matters (emails/phones/commands/inputs) */
.rtl a[href^="mailto:"],
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"],
.rtl pre,
.rtl code,
.rtl pre code {
  direction: ltr;
  text-align: left;
}



/* =========================================================
   Courses + About (CamelCode Academy style)
   ========================================================= */
.cc-hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  background:linear-gradient(135deg,#0b1f5c 0%,#0a4cff 100%); color:#fff;
  border-radius:16px; padding:32px; overflow:hidden;
}
.cc-hero h1{margin:0 0 10px; font-size:34px; line-height:1.2}
.cc-hero p{margin:0 0 16px; color:#dfe7ff; font-size:17px}
.cc-hero .btn{background:#fff; color:#0a2cff; font-weight:700}
.cc-hero .btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6)}
.cc-hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.cc-photo{margin:0}
.cc-photo img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px; display:block}
.cc-photo figcaption{font-size:12.5px; color:var(--muted); margin-top:6px}
.cc-hero .cc-photo figcaption{color:#c9d6ff}
.cc-photo figcaption a{color:inherit}

.cc-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px}
.cc-stat{background:rgba(255,255,255,.12); border-radius:12px; padding:12px; text-align:center}
.cc-stat b{display:block; font-size:26px}
.cc-stat span{font-size:13px; color:#dfe7ff}

.cc-block{margin-top:28px}
.cc-block > h2{margin:0 0 6px; font-size:26px}
.cc-block > .subtitle{margin:0 0 16px}
.cc-center{text-align:center}

/* Filters */
.cc-filters{display:flex; flex-direction:column; gap:12px; align-items:center; margin:18px 0}
.cc-filters .searchbar{width:100%; max-width:520px; margin:0}
.cc-chip{
  border:1px solid #d7dfff; background:#f3f5ff; color:#0a2cff; font-weight:600;
  padding:7px 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:14px;
}
.cc-chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Course cards */
.cc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.cc-card{
  display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:#fff; transition:transform .15s ease, box-shadow .15s ease;
}
.cc-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,44,255,.10)}
.cc-art{
  position:relative; height:140px; display:flex; align-items:center; justify-content:center;
  font-size:58px; color:#fff;
}
.cc-art::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
.cc-art .cc-level{
  position:absolute; top:10px; inset-inline-start:10px; z-index:1;
  background:rgba(255,255,255,.92); color:#0b1f5c; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px;
}
.cc-art .cc-emoji{position:relative; z-index:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.cc-art.cat-cyber{background:linear-gradient(135deg,#0f172a,#1e3a8a 60%,#10b981)}
.cc-art.cat-game{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.cc-art.cat-robotics{background:linear-gradient(135deg,#0369a1,#22d3ee)}
.cc-art.cat-ai{background:linear-gradient(135deg,#4338ca,#a855f7)}
.cc-art.cat-programming{background:linear-gradient(135deg,#1d4ed8,#facc15)}
.cc-art.cat-arcade{background:linear-gradient(135deg,#be123c,#f97316)}
.cc-art.cat-apps{background:linear-gradient(135deg,#047857,#34d399)}
.cc-art.cat-3d{background:linear-gradient(135deg,#b45309,#fbbf24)}
.cc-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1}
.cc-meta{display:flex; gap:6px; flex-wrap:wrap}
.cc-body h3{margin:0; font-size:18px; line-height:1.35}
.cc-body p{margin:0; color:#444; font-size:15px; flex:1}
.cc-body .btn{align-self:flex-start; margin-top:6px}
.cc-empty{text-align:center; color:var(--muted); display:none; padding:20px}

/* Photo pair + press */
.cc-photos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cc-press{
  display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:center;
  border:1px solid var(--border); border-radius:14px; padding:16px; background:#fafbff;
}
.cc-press img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px; display:block}
.cc-press .badge{display:inline-block; margin-bottom:6px}
.cc-press h3{margin:0 0 6px}
.cc-press p{margin:0 0 10px; color:#444}

/* Info cards (problem / solution / philosophy) */
.cc-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.cc-info{border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff}
.cc-info .cc-ico{font-size:26px; display:block; margin-bottom:6px}
.cc-info h3{margin:0 0 6px; font-size:17px}
.cc-info p{margin:0; color:#555; font-size:15px}
.cc-info.problem{border-top:4px solid #f97316}
.cc-info.solution{border-top:4px solid var(--brand)}

/* Founder quote + split */
.cc-split{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.cc-quote{
  display:flex; gap:16px; align-items:center; margin-top:18px;
  background:rgba(255,255,255,.12); border-radius:12px; padding:14px;
}
.cc-quote img{width:72px; height:72px; border-radius:50%; object-fit:cover; background:#fff; flex:none}
.cc-quote blockquote{margin:0; font-style:italic}
.cc-quote cite{display:block; font-style:normal; font-size:13px; color:#c9d6ff; margin-top:4px}

/* Partners */
.cc-partners{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.cc-partner{
  border:1px solid var(--border); border-radius:12px; padding:12px; background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.cc-partner img{height:54px; max-width:100%; object-fit:contain}
.cc-partner img.on-dark{background:#0b1f5c; border-radius:8px; padding:6px}
.cc-partner span{font-size:12.5px; color:#555}

.cc-cta{
  text-align:center; background:#f3f5ff; border:1px solid #d7dfff; border-radius:16px; padding:28px 18px;
}
.cc-cta h2{margin:0 0 8px}
.cc-cta p{margin:0 auto 14px; max-width:620px; color:#444}

/* RTL tweaks */
.rtl .cc-card, .rtl .cc-info, .rtl .cc-press, .rtl .cc-hero{text-align:right}
.rtl .cc-center, .rtl .cc-cta{text-align:center}

@media (max-width: 820px){
  .cc-hero, .cc-split, .cc-press{grid-template-columns:1fr}
  .cc-hero{padding:22px}
  .cc-hero h1{font-size:28px}
  .cc-photos{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .cc-stats{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .cc-stat b{font-size:20px}
}

/* Courses hero without a side photo */
.cc-hero.cc-hero-solo{grid-template-columns:1fr}

/* =========================================================
   Compact course cards with photos (overrides earlier)
   ========================================================= */
#courseGrid.cc-grid{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
#courseGrid .cc-card{border-radius:12px}
.cc-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:#eef1f8}
.cc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cc-thumb .cc-level{
  position:absolute; top:8px; inset-inline-start:8px;
  background:rgba(255,255,255,.92); color:#0b1f5c; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px;
}
#courseGrid .cc-body{padding:12px; gap:7px}
#courseGrid .cc-meta .badge{font-size:11px; padding:3px 7px}
#courseGrid .cc-body h3{font-size:15.5px; line-height:1.3}
#courseGrid .cc-body p{
  font-size:13px; color:#555; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.cc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:4px;
}
.cc-price{font-weight:800; color:var(--brand); font-size:15px; white-space:nowrap}
.cc-foot .btn{padding:7px 12px; font-size:13px; align-self:auto; margin-top:0}
.rtl .cc-thumb .cc-level{inset-inline-start:8px}

@media (max-width:480px){
  #courseGrid.cc-grid{grid-template-columns:1fr 1fr; gap:10px}
  #courseGrid .cc-body{padding:10px}
  #courseGrid .cc-body h3{font-size:14px}
  .cc-foot .btn{padding:6px 9px}
}