/* ── ALPHABET ARABE — Moroccan / Islamic Geometric ── */
:root {
  --teal: #0d4f5c;
  --teal2: #0a3d48;
  --teal-light: #1a7a8a;
  --gold: #c9952a;
  --gold-light: #f0c060;
  --cream: #fdf6e3;
  --text: #f0ede0;
  --text-dim: #9ab5bb;
  --sun: #e67e22;
  --moon: #2980b9;
  --radius: 12px;
  --card-bg: rgba(255,255,255,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--teal2);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(201,149,42,.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(26,122,138,.2) 0%, transparent 50%);
  color: var(--text);
  min-height: 100vh;
}

/* Geometric background */
.geo-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,0 60,15 60,45 30,60 0,45 0,15' fill='none' stroke='%23f0c060' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Header */
.header { position: sticky; top: 0; z-index: 100; background: rgba(10,61,72,.95); border-bottom: 2px solid var(--gold); backdrop-filter: blur(10px); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-arabic { font-family: 'Amiri', serif; font-size: 1.5rem; color: var(--gold); direction: rtl; letter-spacing: .1em; }
.logo-text { color: var(--text); font-size: 1rem; font-weight: 500; }
.logo-text strong { color: var(--gold-light); }
.nav { display: flex; gap: 24px; }
.nav a { color: var(--text-dim); text-decoration: none; font-size: .9rem; transition: color .2s; }
.nav a:hover { color: var(--gold); }
.lang-pill { padding: 4px 14px; border: 1px solid var(--gold); border-radius: 20px; color: var(--gold); font-size: .8rem; }

/* Hero */
.hero { position: relative; z-index: 1; text-align: center; padding: 70px 24px 50px; }
.ornament { font-family: 'Amiri', serif; font-size: 2rem; color: var(--gold); opacity: .7; margin-bottom: 20px; direction: rtl; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: 12px; }
.gold-text { color: var(--gold-light); }
.hero-sub { color: var(--text-dim); font-size: 1rem; max-width: 520px; margin: 0 auto 20px; }
.hero-tags { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-tags span { padding: 6px 14px; background: rgba(201,149,42,.15); border: 1px solid rgba(201,149,42,.3); border-radius: 20px; font-size: .82rem; color: var(--gold-light); }

/* Container */
.container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }

/* Section header */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
h2 { font-size: 1.4rem; font-weight: 600; }
.ar-inline { font-family: 'Amiri', serif; color: var(--gold); direction: rtl; }
.filter-btns { display: flex; gap: 6px; }
.filter { padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--text-dim); font-size: .85rem; cursor: pointer; transition: all .2s; font-family: inherit; }
.filter.active, .filter:hover { background: var(--gold); color: var(--teal2); border-color: var(--gold); }

/* Letters grid */
.letters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin-bottom: 48px; }
.letter-card {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 20px 12px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  position: relative;
}
.letter-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.card-num { position: absolute; top: 8px; left: 10px; font-size: .7rem; color: var(--text-dim); }
.card-main { font-family: 'Amiri', serif; font-size: 2.4rem; color: var(--gold-light); direction: rtl; line-height: 1.2; margin-bottom: 8px; }
.card-name { font-size: .85rem; font-weight: 500; margin-bottom: 4px; }
.card-trans { font-size: .78rem; color: var(--text-dim); }
.card-type { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 10px; font-size: .68rem; }
.card-type.sun { background: rgba(230,126,34,.2); color: var(--sun); }
.card-type.moon { background: rgba(41,128,185,.2); color: var(--moon); }
.letter-card.hidden { display: none; }

/* Forms section */
.forms-section { margin-bottom: 48px; }
.section-desc { color: var(--text-dim); margin-bottom: 20px; font-size: .95rem; }
h2 { color: var(--text); margin-bottom: 12px; }
.forms-table-wrap { overflow-x: auto; }
.forms-table { width: 100%; border-collapse: collapse; }
.forms-table th { background: rgba(201,149,42,.2); color: var(--gold-light); padding: 12px 14px; text-align: left; font-weight: 600; font-size: .85rem; border-bottom: 1px solid rgba(201,149,42,.3); }
.forms-table td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; }
.forms-table tr:hover td { background: rgba(255,255,255,.03); }
.ar-cell { font-family: 'Amiri', serif; font-size: 1.4rem; text-align: center; color: var(--gold-light); direction: rtl; }
.trans-cell { color: var(--text-dim); font-size: .82rem; }
.na { color: var(--text-dim); opacity: .5; }

/* Quiz */
.quiz-card { background: var(--card-bg); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 36px; text-align: center; max-width: 500px; margin: 0 auto 48px; }
.quiz-card h2 { margin-bottom: 8px; }
.quiz-card p { color: var(--text-dim); margin-bottom: 20px; font-size: .9rem; }
.quiz-letter { font-family: 'Amiri', serif; font-size: 5rem; color: var(--gold-light); min-height: 100px; line-height: 1.1; margin-bottom: 20px; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.quiz-opt { padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: .9rem; cursor: pointer; transition: all .2s; }
.quiz-opt:hover { border-color: var(--gold); background: rgba(201,149,42,.1); }
.quiz-opt.correct { border-color: #27ae60; background: rgba(39,174,96,.15); color: #27ae60; }
.quiz-opt.wrong { border-color: #e74c3c; background: rgba(231,76,60,.15); color: #e74c3c; }
.quiz-feedback { padding: 10px; border-radius: 8px; font-size: .9rem; margin-bottom: 12px; }
.quiz-feedback.hidden { display: none; }
.quiz-score { font-size: .85rem; color: var(--text-dim); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.hidden { display: none; }
.modal-card { background: var(--teal); border: 1px solid var(--gold); border-radius: 16px; padding: 36px; max-width: 400px; width: 90%; text-align: center; position: relative; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; }
.modal-letter { font-family: 'Amiri', serif; font-size: 5rem; color: var(--gold-light); margin-bottom: 12px; direction: rtl; }
.modal-card h3 { color: var(--gold); font-size: 1.3rem; margin-bottom: 12px; }
.modal-info { color: var(--text-dim); font-size: .9rem; line-height: 1.6; margin-bottom: 20px; }
.modal-close-btn { padding: 8px 24px; border: 1px solid var(--gold); border-radius: 6px; background: transparent; color: var(--gold); cursor: pointer; font-family: inherit; transition: all .2s; }
.modal-close-btn:hover { background: var(--gold); color: var(--teal2); }

/* Footer */
.footer { position: relative; z-index: 1; background: rgba(10,61,72,.95); border-top: 2px solid rgba(201,149,42,.3); padding: 20px 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-dim); flex-wrap: wrap; gap: 12px; }
.footer-arabic { font-family: 'Amiri', serif; color: var(--gold); direction: rtl; font-size: 1rem; }

@media(max-width:700px) {
  .letters-grid { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); }
  .section-header { flex-direction: column; align-items: flex-start; }
  .nav { display: none; }
}

/* ── Inner / Footer Pages ── */
.footer-links-ar { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; margin:12px 0; }
.footer-links-ar a { color:var(--text-dim); text-decoration:none; font-size:.85rem; transition:color .2s; }
.footer-links-ar a:hover { color:var(--gold); }
.content-page-ar { max-width:860px; margin:0 auto; padding:40px 24px; }
.content-page-ar h1 { font-size:2rem; margin-bottom:20px; }
.content-page-ar h2 { color:var(--gold); font-size:1.2rem; margin:24px 0 12px; }
.content-page-ar p { color:var(--text-dim); line-height:1.7; margin-bottom:12px; }
.faq-ar { margin-top:24px; }
.faq-ar-item { border:1px solid rgba(255,255,255,.1); border-radius:10px; margin-bottom:8px; }
.faq-ar-q { width:100%; padding:14px 18px; background:rgba(255,255,255,.05); border:none; text-align:left; color:var(--text); font-family:'Poppins',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-ar-q:hover { background:rgba(201,149,42,.1); }
.faq-ar-item.open .faq-ar-q { background:rgba(201,149,42,.15); }
.faq-ar-icon { color:var(--gold); font-size:1.1rem; transition:transform .3s; }
.faq-ar-item.open .faq-ar-icon { transform:rotate(45deg); }
.faq-ar-a { display:none; padding:0 18px 14px; color:var(--text-dim); font-size:.88rem; line-height:1.6; }
.faq-ar-item.open .faq-ar-a { display:block; }
.related-ar { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:14px; }
.related-ar a { display:block; padding:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; text-decoration:none; color:var(--text); font-size:.88rem; font-weight:500; text-align:center; transition:all .2s; }
.related-ar a:hover { border-color:var(--gold); background:rgba(201,149,42,.1); }
.phrase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:16px 0; }
.phrase-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:16px; cursor:pointer; transition:all .2s; }
.phrase-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.phrase-arabic { font-family:'Amiri',serif; font-size:1.8rem; color:var(--gold-light); direction:rtl; text-align:right; margin-bottom:6px; }
.phrase-french { font-size:.85rem; color:var(--text-dim); }
.phrase-trans { font-size:.78rem; color:var(--gold); margin-top:3px; font-style:italic; }