:root{
  --ink:#0D1F1C;
  --ink-2:#0A1917;
  --surface:#16302B;
  --surface-2:#1D3A33;
  --border:#2A4A42;
  --gold:#C89B3C;
  --gold-soft:#E0C171;
  --teal:#7A9E9F;
  --text:#F2ECDD;
  --text-muted:#A9B8B3;
  --danger:#D3776D;
  --success:#8FBB8F;
  --radius:12px;
  --font-display:'Amiri', serif;
  --font-body:'Cairo', sans-serif;
  --font-label:'Reem Kufi', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  direction:rtl;
  line-height:1.7;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ===== Islamic geometric divider (signature element) ===== */
.pattern-divider{
  height:22px;
  width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-width='1' opacity='0.55'%3E%3Cpath d='M0 11 L11 0 L22 11 L11 22 Z'/%3E%3Cpath d='M22 11 L33 0 L44 11 L33 22 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center;
  opacity:0.8;
}

/* ===== Nav ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 6vw;
  border-bottom:1px solid var(--border);
  background:var(--ink-2);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--gold-soft);
  font-weight:700;
}
.nav-links{display:flex;gap:28px;align-items:center;font-size:.95rem;}
.nav-links a{color:var(--text-muted);transition:color .2s;}
.nav-links a:hover{color:var(--gold-soft);}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  padding:13px 28px;
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:var(--ink-2);
}
.btn-gold:hover{box-shadow:0 6px 20px rgba(200,155,60,0.35);}
.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-soft);}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:rgba(211,119,109,0.1);}
.btn-block{display:block;width:100%;text-align:center;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ===== Layout helpers ===== */
.container{max-width:1080px;margin:0 auto;padding:0 6vw;}
.section{padding:64px 0;}
.eyebrow{
  font-family:var(--font-label);
  color:var(--gold);
  letter-spacing:.06em;
  font-size:.85rem;
  margin-bottom:10px;
  display:block;
}
h1,h2,h3{font-family:var(--font-display);color:var(--text);margin:0 0 14px;}
h1{font-size:2.6rem;line-height:1.3;}
h2{font-size:1.9rem;}
p{color:var(--text-muted);}

/* ===== Cards ===== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
}
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  h1{font-size:2rem;}
  .nav-links{gap:16px;font-size:.85rem;}
}

.course-card{display:flex;flex-direction:column;gap:12px;}
.price-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
.price{color:var(--gold-soft);font-weight:700;font-size:1.2rem;}
.price span{color:var(--text-muted);font-size:.8rem;font-weight:400;}

.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:20px;
  font-size:.78rem;
  font-family:var(--font-label);
}
.badge-pending{background:rgba(200,155,60,0.15);color:var(--gold-soft);}
.badge-active{background:rgba(143,187,143,0.15);color:var(--success);}
.badge-rejected{background:rgba(211,119,109,0.15);color:var(--danger);}
.badge-expired{background:rgba(169,184,179,0.15);color:var(--text-muted);}

/* ===== Forms ===== */
.form{display:flex;flex-direction:column;gap:16px;max-width:420px;}
label{font-size:.85rem;color:var(--text-muted);margin-bottom:6px;display:block;}
input,select,textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  border-radius:8px;
  font-family:var(--font-body);
  font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
.field{margin-bottom:2px;}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:34px;max-width:440px;margin:0 auto;}
.helper-text{font-size:.82rem;color:var(--text-muted);margin-top:6px;}
.error-text{font-size:.85rem;color:var(--danger);min-height:1.2em;}
.success-text{font-size:.85rem;color:var(--success);min-height:1.2em;}

/* ===== Video / lecture ===== */
.video-wrap{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000;}
.video-wrap iframe{position:absolute;top:0;right:0;width:100%;height:100%;border:0;}
.lecture-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;
  background:var(--surface);
}
.lecture-item.locked{opacity:.55;}
.file-link{font-size:.85rem;color:var(--teal);margin-inline-start:14px;}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--border);padding:36px 6vw;color:var(--text-muted);font-size:.85rem;text-align:center;}

/* ===== Utility ===== */
.center{text-align:center;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;}
.flex{display:flex;} .flex-between{display:flex;justify-content:space-between;align-items:center;}
.hidden{display:none !important;}
.muted{color:var(--text-muted);font-size:.85rem;}