@font-face{font-family:'AvenirAr';src:url('assets/fonts/AvenirArabic-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'AvenirAr';src:url('assets/fonts/AvenirArabic-Heavy.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'AvenirAr';src:url('assets/fonts/AvenirArabic-Medium.otf') format('opentype');font-weight:400;font-display:swap}

:root{
  --brand-primary:#014740;
  --brand-primary-dark:#002a2a;
  --brand-accent:#A1B565;
  --brand-sand:#E3D9C6;
  --bg-deep:#002a2a;
  --green-dark:#002a2a;
  --green-deep:#002a2a;
  --green-panel:#014740;
  --green-panel-light:#0f5750;
  --green-border:#0a4e47;
  --text:#f7f7f7;
  --muted:#cbd5d1;

  --bs-body-bg:var(--green-deep);
  --bs-body-color:var(--text);
  --bs-border-color:var(--green-border);
  --bs-primary:var(--brand-primary);
  --bs-primary-rgb:1,71,64;
  --bs-secondary:var(--brand-accent);
  --bs-secondary-rgb:161,181,101;
  --bs-link-color:var(--brand-accent);
  --bs-link-hover-color:#c3d68f;
}

*{box-sizing:border-box}
html,body{background:var(--green-deep);color:var(--text);font-family:'AvenirAr',Cairo,Arial,sans-serif;font-weight:400}
body{min-height:100vh}
::selection{background:var(--brand-accent);color:var(--green-deep)}

/* ===== تنصيص كل النصوص في المنتصف + ضمان عدم ظهور أي نص أسود ===== */
body, p, li, span, div, label, small, b, strong, h1, h2, h3, h4, h5, h6, button, a, .form-control, textarea, input{
  text-align:center;
  color:inherit;
}
.text-muted{color:var(--muted)!important}
.form-control{color:var(--text)!important}
.form-control::placeholder{color:var(--muted);opacity:.8}

/* التسلسل الهرمي للخطوط: عنوان = Black · عنوان فرعي = Heavy · كتابة عادية = Medium */
h1,.hero-title,.attract-overlay h1{font-family:'AvenirAr';font-weight:900}
h2,.door-head h2,.section-label + h2{font-family:'AvenirAr';font-weight:900}
h3,h4,h5,h6,.subheading,.section-label,.door-card h3,.try-card h3,.contact-card h3{font-family:'AvenirAr';font-weight:700}
body,p,span,li,label,.btn,input,textarea{font-family:'AvenirAr';font-weight:400}

.eyebrow{color:var(--brand-accent);font-weight:700;letter-spacing:.02em;font-size:.9rem}
.section-label{color:var(--brand-accent);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.subheading{font-size:1.3rem;margin-bottom:.3rem}

/* أي نص كان بلون أسود يتحول للون نص "شاشة تفاعلية" (البراند اللوني) */
.door-card h3,.door-num,.brand-title{color:var(--brand-accent)}

/* ===== Boot screen ===== */
#boot{
  position:fixed;inset:0;z-index:999;
  background:radial-gradient(circle at 50% 30%,var(--green-panel),var(--green-deep) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .7s ease;
}
.boot-logo-img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.boot-title{font-weight:800;font-size:1.2rem;text-align:center;padding:0 20px}
.boot-sub{color:var(--muted);font-size:.9rem}
.boot-spinner{color:var(--brand-accent)!important;width:2rem;height:2rem}

/* ===== شاشة الجذب (Attract) ===== */
#attract{position:fixed;inset:0;z-index:900;background:var(--green-deep);cursor:pointer;overflow:hidden;transition:opacity .6s ease,visibility .6s}
#attract.entered{opacity:0;visibility:hidden;pointer-events:none}
.attract-video-ph{position:absolute;inset:0;border:none;border-radius:0;aspect-ratio:auto}
.attract-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.attract-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;background:linear-gradient(180deg,rgba(6,27,23,.35),rgba(6,27,23,.75));text-align:center;padding:2rem}
.attract-overlay h1{font-size:1.7rem;max-width:700px}
.attract-overlay p{color:var(--brand-sand);font-size:1rem}
.attract-tap{margin-top:1.5rem;display:flex;align-items:center;gap:.5em;color:var(--brand-accent);font-weight:700;font-size:1rem;animation:tapPulse 1.8s infinite}
@keyframes tapPulse{0%,100%{opacity:.6}50%{opacity:1}}

#app{opacity:0;transition:opacity .5s ease}
#app.show{opacity:1}

/* ===== Navbar ===== */
.app-navbar{background:rgba(6,27,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--green-border)}
.navbar-logo{height:66px;width:auto;object-fit:contain}
.navbar-3col{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.navbar-center-text{flex:1;text-align:center;color:var(--muted);font-size:.9rem;font-weight:700}
.partner-logo-slot{height:66px;width:auto;display:flex;align-items:center;justify-content:center}
.partner-logo-slot img{height:100%;width:auto;max-width:none;object-fit:contain}
.partner-logo-slot i{color:var(--brand-accent);font-size:1.2rem;opacity:.6}
.app-navbar .navbar-brand{flex-direction:column;align-items:center!important}

/* ===== القائمة الجانبية — ثابتة ومنظمة ===== */
#sideNav{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:270px;
  background:var(--green-panel);
  border-left:1px solid var(--green-border);
  box-shadow:-8px 0 24px rgba(0,0,0,.16);
  z-index:1050;
  display:flex;
  flex-direction:column;
  padding:1.25rem 1rem;
  overflow-y:auto;
  overflow-x:hidden;
  direction:rtl;
}
#app{
  margin-right:270px;
  margin-inline-end:270px;
  min-width:0;
}
#sideNav *{text-align:right}
.side-nav-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.7rem;
  margin-bottom:1.25rem;
  padding:.25rem .35rem .9rem;
  border-bottom:1px solid var(--green-border);
}
.side-nav-head img{
  flex:0 0 42px;
  width:42px;
  height:42px;
  object-fit:contain;
}
.side-nav-head b{
  flex:1;
  font-size:.82rem;
  line-height:1.5;
}
.side-nav-link{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  padding:.7rem .8rem;
  border-radius:12px;
  text-align:right !important;
  direction:rtl;
  transition:.2s;
  margin-bottom:.35rem;
  flex:0 0 auto;
}
.side-nav-link:hover,
.side-nav-link.active{
  background:var(--green-panel-light);
  border-color:var(--green-border);
}
.side-nav-link i{
  flex:0 0 24px;
  color:var(--brand-accent);
  font-size:1.15rem;
  width:24px;
  text-align:center !important;
}
.side-nav-link span{
  flex:1;
  min-width:0;
  text-align:right !important;
  font-size:.88rem;
  line-height:1.35;
  white-space:normal;
}
@media (max-width:900px){
  #sideNav{
    width:235px;
    padding:.9rem .75rem;
  }
  #app{
    margin-right:235px;
    margin-inline-end:235px;
  }
  .side-nav-link span{font-size:.8rem}
}
@media (max-width:650px){
  #sideNav{width:210px}
  #app{
    margin-right:210px;
    margin-inline-end:210px;
  }
}

/* زر العودة للرئيسية — دائماً على اليمين */
.back-row{display:flex;justify-content:flex-start;margin-bottom:1.2rem}
.back-row-left{justify-content:flex-end}

/* ===== Buttons ===== */
.btn-brand{background:var(--brand-primary);border:none;color:#fff;font-weight:700;padding:.6em 1.3em;border-radius:12px;transition:.2s}
.btn-brand:hover{background:#0a6f3d;color:#fff}
.btn-outline-brand{background:transparent;border:1px solid var(--green-border);color:var(--text);font-weight:600;padding:.55em 1.2em;border-radius:12px;transition:.2s}
.btn-outline-brand:hover{background:var(--green-panel-light);border-color:var(--brand-accent);color:var(--brand-accent)}

/* ===== Generic media placeholder ===== */
.media-ph{aspect-ratio:16/10;border:2px dashed var(--green-border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--muted);background:var(--green-panel-light);font-size:.82rem;text-align:center;padding:1rem}
.media-ph i{font-size:2.2rem;color:var(--brand-accent)}
.media-ph-wide{aspect-ratio:21/9}

/* وسائط حقيقية (صورة/فيديو) مع بديل تلقائي عند تعذر تحميل الملف */
.media-real{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--green-panel-light)}
.media-real.media-ph-wide{aspect-ratio:21/9}
.media-real.gov-video-wide{aspect-ratio:1920/1080}
.media-real.cargo-modal-img{aspect-ratio:1080/1350;max-width:380px;margin:0 auto}
.media-real img,.media-real video{width:100%;height:100%;object-fit:cover;display:block}
.media-real .media-ph-inner{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--muted);border:2px dashed var(--green-border);background:var(--green-panel-light);font-size:.82rem;text-align:center;padding:1rem}
.media-real .media-ph-inner i{font-size:2.2rem;color:var(--brand-accent)}
.media-real.ph-fallback img,.media-real.ph-fallback video{display:none}
.media-real.ph-fallback .media-ph-inner{display:flex}

/* ===== Home ===== */
#home{position:relative;overflow:hidden}
.home-bg-video{position:absolute;inset:0;z-index:0}
.home-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,27,23,.55),rgba(6,27,23,.92) 70%)}
.home-content{position:relative;z-index:1}

.hero-title{font-size:2.2rem;font-weight:800;max-width:820px;margin-inline:auto}
.hero-lead{color:var(--muted);max-width:680px;font-size:1.05rem}

.doors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;max-width:1000px;margin:0 auto}
.door-card{background:var(--green-panel);border:1px solid var(--green-border);border-radius:22px;padding:1.8rem 1.4rem;text-align:center;transition:.25s;position:relative}
.door-card:hover{border-color:var(--brand-accent);transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.3)}
.door-card i{font-size:2.4rem;color:var(--brand-accent);margin-bottom:.7rem;display:block}
.door-card h3{font-size:1.1rem;margin-bottom:.4rem}
.door-card p{color:var(--muted);font-size:.85rem;margin:0}

.home-footer{position:relative;z-index:1;background:var(--green-panel);border-top:1px solid var(--green-border)}

@media (max-width:768px){
  .doors-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .doors-grid{grid-template-columns:1fr}
}

/* ===== Door screens (generic) ===== */
.door-screen{display:none}
.door-screen.show{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.door-head{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:1rem}
.door-num{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--brand-primary);color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.door-head h2{margin:0;font-size:1.7rem}
.door-intro{color:var(--muted);max-width:800px;margin-bottom:2rem}
.note-box{background:var(--green-deep);border:1px solid var(--green-border);border-radius:12px;padding:.9rem 1.1rem;color:var(--muted);font-size:.85rem;display:flex;gap:.6em;align-items:center;text-align:center}
.note-box i{color:var(--brand-accent);margin-top:.15em}

/* ===== باب 01 — سلايدات ===== */
.slide-wrap{display:flex;align-items:center;gap:1rem;max-width:900px;margin:0 auto 1.2rem}
.slide-nav-btn{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--green-border);background:var(--green-panel);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:.2s}
.slide-nav-btn:hover{background:var(--green-panel-light);border-color:var(--brand-accent);color:var(--brand-accent)}
.slide-stage{flex:1;background:var(--green-panel);border:1px solid var(--green-border);border-radius:22px;overflow:hidden;min-height:380px;display:flex;align-items:center}
.slide-inner{display:flex;flex-wrap:wrap;align-items:center;width:100%}
.slide-media{width:44%;min-width:240px;border-radius:0;border-width:0 1px 0 0;aspect-ratio:4/3;position:relative;overflow:hidden;background:#000}
.slide-media video{width:100%;height:100%;object-fit:cover;display:block}
.slide-copy{flex:1;padding:2rem;min-width:240px}
.slide-year{display:inline-flex;align-items:center;gap:.4em;background:var(--brand-primary);color:#fff;font-weight:700;font-size:.85rem;padding:.3em .9em;border-radius:999px;margin-bottom:.9rem}
.slide-copy h3{font-size:1.5rem;margin-bottom:.6rem}
.slide-copy p{color:var(--muted)}
.slide-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.slide-label-btn{background:var(--green-panel);border:1px solid var(--green-border);color:var(--text);padding:.7em 1.5em;border-radius:14px;font-weight:700;transition:.2s}
.slide-label-btn.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.slide-label-btn:hover:not(.active){border-color:var(--brand-accent);color:var(--brand-accent)}
@media (max-width:768px){
  .slide-inner{flex-direction:column}
  .slide-media{width:100%;aspect-ratio:16/9}
}

/* ===== باب 02 — تبويبات كبيرة ===== */
.subtab-bar-big{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2.5rem}
.subtab-big{background:var(--green-panel);border:1px solid var(--green-border);color:var(--muted);padding:1.3rem 2rem;border-radius:18px;font-weight:700;font-size:1.05rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:200px;transition:.2s}
.subtab-big i{font-size:1.8rem;color:var(--brand-accent)}
.subtab-big.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.subtab-big.active i{color:#fff}
.subtab-pane{display:none}
.subtab-pane.active{display:block;animation:fade .35s ease}

.subtab-tagline{color:var(--brand-accent);font-weight:700;font-size:1.1rem;margin-bottom:.4rem}
.subtab-detail{color:var(--muted);max-width:700px;margin:0 auto 1.5rem}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.4rem}
.album-item{text-align:center;cursor:pointer;background:none;border:none;padding:0}
.album-item .media-real{aspect-ratio:1350/1080;border-radius:0}
.album-caption{margin-top:.6rem}
.album-caption b{display:block;font-size:.92rem}
.album-caption span{color:var(--muted);font-size:.78rem}

.archive-expand-single{padding:1.5rem}
.archive-expand-single .media-real{aspect-ratio:1350/1080;max-width:700px;margin:0 auto;border-radius:14px}

.chip-filter{background:transparent;border:1px solid var(--green-border);color:var(--muted);padding:.45em 1.1em;border-radius:999px;font-size:.85rem;font-weight:600;margin:.25rem;transition:.2s}
.chip-filter.active{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--green-deep)}
.cargo-cat-bar{margin-bottom:1.5rem;display:flex;flex-wrap:wrap;justify-content:center}
.drama-credit{color:var(--brand-accent);font-weight:700;margin-bottom:1.2rem}
.drama-contact{margin-top:2rem;text-align:center}
.drama-contact p{color:var(--muted);font-size:.95rem}
.drama-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:900px){.drama-grid{grid-template-columns:repeat(2,1fr)}}
.cargo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.drama-card,.cargo-card{background:var(--green-panel);border:1px solid var(--green-border);border-radius:18px;overflow:hidden;padding:0;transition:.2s}
.drama-card:hover,.cargo-card:hover{border-color:var(--brand-accent);transform:translateY(-3px)}
.drama-card .media-real{border-radius:0;aspect-ratio:16/10}
.cargo-card .media-real{border-radius:0;aspect-ratio:1080/1350}
.drama-card-body,.cargo-card-body{padding:1rem 1.1rem}
.drama-card-cat{color:var(--brand-accent);font-size:.72rem;font-weight:700}
.drama-card-body h3,.cargo-card-body h3{font-size:1rem;margin:.3rem 0}
.drama-card-body p,.cargo-card-body p{color:var(--muted);font-size:.8rem;margin:0}
.chip-work{background:var(--green-panel-light);border:1px solid var(--green-border);color:var(--text);font-size:.82rem;padding:.5em 1.1em;border-radius:999px;transition:.2s}
.chip-work:hover{border-color:var(--brand-accent);color:var(--brand-accent)}

/* ===== باب 03 — المؤسسات ===== */
.institutions-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2rem}
.inst-nav-btn{background:var(--green-panel);border:1px solid var(--green-border);padding:.8em 1.6em;border-radius:14px;transition:.2s;display:inline-flex;align-items:center;justify-content:center;min-width:180px;min-height:76px}
.inst-nav-btn img{width:100%;max-width:160px;height:auto;max-height:56px;object-fit:contain}
.inst-nav-btn.active{background:var(--brand-primary);border-color:var(--brand-primary)}
.inst-embed-wrap{max-width:100%;width:100%;border:1px solid var(--green-border);border-radius:18px;overflow:hidden;background:#fff}
.inst-embed-wrap iframe{width:100%;height:70vh;border:0;display:block}
.inst-video-wrap{position:relative;aspect-ratio:1920/1080;border-radius:18px;overflow:hidden;background:#000}
.inst-video-wrap video{width:100%;height:100%;object-fit:contain;display:block}
.inst-detail h4{color:var(--brand-accent);font-size:1rem;margin:1.6rem 0 .8rem}
.inst-detail p{color:var(--muted)}
.prog-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;max-width:700px;margin:0 auto}
.prog-list li{color:var(--muted);font-size:.9rem;background:var(--green-panel);border:1px solid var(--green-border);border-radius:12px;padding:.8rem 1rem;text-align:center}
.prog-list li b{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.chips span{background:var(--green-panel-light);border:1px solid var(--green-border);color:var(--text);font-size:.78rem;padding:.4em .9em;border-radius:999px}
.chip-link{background:var(--green-panel-light);border:1px solid var(--green-border);color:var(--brand-accent);font-size:.82rem;padding:.45em 1.1em;border-radius:999px;display:inline-flex;align-items:center;gap:.4em;transition:.2s}
.chip-link i{font-size:1rem}
.chip-link:hover{border-color:var(--brand-accent);background:var(--green-panel)}
.freq-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-bottom:1rem}
.freq-card{background:var(--green-panel);border:1px solid var(--green-border);border-radius:12px;padding:.8rem 1.2rem;min-width:160px}
.freq-card b{display:block;font-size:.8rem;color:var(--brand-accent)}
.freq-card span{font-size:.9rem}

/* ===== باب 04 ===== */
.festival-banner-mini{max-width:760px;margin:0 auto;background:var(--green-panel);border:1px solid var(--green-border);border-radius:14px;padding:.7rem 1.2rem;display:flex;align-items:center;justify-content:center;gap:.6em;font-size:.8rem;color:var(--muted)}
.festival-banner-mini i{color:var(--brand-accent);font-size:1.1rem}
.festival-banner-mini b{color:var(--text)}

.pavilion-hotspot-wrap{position:relative;max-width:1300px;margin:0 auto}
.pavilion-hotspot-wrap img.pavilion-photo{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--green-border)}
.hotspot-dot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(11,130,70,.9);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:800;cursor:pointer;animation:hsPulse 2.2s infinite;transition:.2s}
.hotspot-dot:hover{background:var(--brand-accent);transform:scale(1.15)}
@keyframes hsPulse{0%{box-shadow:0 0 0 0 rgba(161,181,101,.5)}70%{box-shadow:0 0 0 12px rgba(161,181,101,0)}100%{box-shadow:0 0 0 0 rgba(161,181,101,0)}}
.pavilion-extra{max-width:360px;margin:1.5rem auto 0;background:var(--green-panel);border:1px solid var(--green-border);border-radius:18px;padding:1.2rem 1.5rem;display:flex;align-items:center;gap:1rem;text-align:right;cursor:pointer;transition:.2s}
.pavilion-extra:hover{border-color:var(--brand-accent)}
.pavilion-extra i{font-size:1.8rem;color:var(--brand-accent);flex:0 0 auto}
.pavilion-extra b{display:block;font-size:.95rem}
.pavilion-extra span{color:var(--muted);font-size:.78rem}

/* ===== باب 05 ===== */
.try-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;max-width:960px}
.try-card{background:var(--green-panel);border:1px solid var(--green-border);border-radius:22px;padding:2.2rem 1.6rem;text-align:center;transition:.25s}
.try-card:hover{border-color:var(--brand-accent);transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.3)}
.try-card i{font-size:2.8rem;color:var(--brand-accent);margin-bottom:1rem;display:block}
.try-card h3{font-size:1.1rem;margin-bottom:.5rem}
.try-card p{color:var(--muted);font-size:.85rem;margin:0}
.try-tool{max-width:700px}

.quiz-progress{color:var(--brand-accent);font-weight:700;font-size:.85rem;margin-bottom:.6rem}
.quiz-q{font-size:1.3rem;margin-bottom:1.5rem}
.quiz-opts{display:flex;flex-direction:column;gap:.8rem}
.quiz-opt{background:var(--green-panel);border:1px solid var(--green-border);color:var(--text);padding:.9em 1.2em;border-radius:14px;font-weight:600;transition:.2s}
.quiz-opt:hover:not(:disabled){border-color:var(--brand-accent)}
.quiz-opt.selected{border-color:var(--brand-accent);background:var(--green-panel-light)}
.quiz-end{padding:2rem 0}
.quiz-end i{font-size:3.5rem;color:var(--brand-accent);margin-bottom:1rem}
.quiz-end h2{margin-bottom:1rem}
.quiz-review{max-width:760px;margin:1.5rem auto;text-align:center}
.quiz-review h4{color:var(--brand-accent);font-size:1rem;margin-bottom:1rem;text-align:center}
.quiz-review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
@media (max-width:700px){.quiz-review-grid{grid-template-columns:repeat(2,1fr)}}
.quiz-review-item{background:var(--green-panel);border:1px solid var(--green-border);border-radius:10px;padding:.5rem .6rem;text-align:center;font-size:.72rem}
.quiz-review-item .qr-q{font-weight:700;margin-bottom:.25rem;font-size:.74rem}
.quiz-review-row{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.quiz-review-item .qr-wrong{color:#f3a5a5;font-size:.68rem;margin:0}
.quiz-review-item .qr-correct{color:#9be8b8;font-size:.68rem;margin:0}

.cert-form{max-width:400px;margin:0 auto}
.certificate-ph{position:relative;max-width:700px;margin:0 auto}
.cert-name-overlay{position:absolute;left:38%;right:3%;top:37%;text-align:center;font-family:'AvenirAr';font-weight:900;font-size:2rem;color:#b9a97c;line-height:1.2}

.nw-form label{font-weight:700;font-size:.88rem;color:var(--brand-accent);display:block;margin-bottom:.3rem;text-align:center}
.form-control{background:var(--green-panel);border:1px solid var(--green-border);text-align:center}
.form-control:focus{background:var(--green-panel);border-color:var(--brand-accent);box-shadow:0 0 0 .2rem rgba(161,181,101,.2)}
.nw-hints{color:var(--muted);font-size:.85rem;text-align:center}
.fb-post-ph{position:relative;max-width:420px;margin:0 auto}
.fb-post-ph .media-real{aspect-ratio:1080/1350;border-radius:10px}
.fb-body-overlay{position:absolute;top:60%;left:6%;right:6%;text-align:right;color:#fff;font-family:'AvenirAr';font-weight:700;font-size:1.75rem;line-height:1.3}
.fb-byline-overlay{position:absolute;top:84.5%;left:21%;right:21%;text-align:right;color:#fff;font-family:'AvenirAr';font-weight:400;font-size:1.05rem}
.nw-souvenir-note{text-align:center;color:var(--brand-accent);font-size:.85rem;margin-top:1rem}

/* ===== باب 06 — خريطة سوريا ===== */
.syria-map-wrap{position:relative;max-width:1000px}
.syria-map-wrap img.syria-map-photo{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--green-border)}
#govPins{position:absolute;inset:0}
.gov-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;background:none;border:none;color:#fff;cursor:pointer}
.gov-pin i{font-size:1.6rem;color:var(--brand-accent);filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));transition:.2s}
.gov-pin:hover i{color:#fff;transform:scale(1.2)}
.gov-pin span{font-size:.7rem;font-weight:700;background:rgba(6,27,23,.85);padding:.15em .6em;border-radius:999px;margin-top:2px;white-space:nowrap}
.gov-cat-info{background:var(--green-deep);border:1px solid var(--green-border);border-radius:12px;padding:1rem 1.2rem;color:var(--muted);max-width:600px;margin-inline:auto}

/* ===== تواصل معنا + الروابط الرسمية (مدمجان) ===== */
.contact-intro{max-width:820px;color:var(--muted);line-height:1.9}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;max-width:600px;margin:0 auto 3rem}
.contact-card{background:var(--green-panel);border:1px solid var(--green-border);border-radius:18px;padding:1.6rem;text-align:center}
.contact-card i{font-size:1.9rem;color:var(--brand-accent);margin-bottom:.6rem;display:block}
.contact-card h3{font-size:1rem;margin-bottom:.4rem}
.contact-card p{color:var(--muted);font-size:.85rem;margin:0}

.links-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  align-items:stretch;
}
.account-card{
  width:auto;
  min-width:0;
  height:100%;
  background:var(--green-panel);
  border:1px solid var(--green-border);
  border-radius:22px;
  padding:1.35rem 1rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.account-logo{
  width:100%;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
.account-logo img{
  max-height:100%;
  max-width:180px;
  width:auto;
  object-fit:contain;
}
.account-card h3{
  width:100%;
  min-height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  margin:0 0 .75rem;
  line-height:1.4;
}
.qr-frame{
  flex:0 0 auto;
  background:#fff;
  border-radius:14px;
  padding:.65rem;
  margin:0 auto;
  width:150px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
}
.qr-frame img{max-width:100%;max-height:100%;object-fit:contain}
.qr-ph i{font-size:3rem;color:var(--green-border)}
.qr-pending{color:var(--muted);font-size:.75rem}

/* روابط المنصات داخل بطاقات المؤسسات */
.qr-links-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.qr-link-card{
  min-width:0;
  min-height:125px;
  padding:.8rem .6rem;
  background:var(--green-panel-light);
  border:1px solid var(--green-border);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  cursor:pointer;
  transition:.2s;
}
.qr-link-card:hover{
  border-color:var(--brand-accent);
  transform:translateY(-2px);
}
.qr-link-card i{
  color:var(--brand-accent);
  font-size:1.35rem;
}
.qr-link-card span{
  font-size:.78rem;
  line-height:1.3;
}
.qr-link-card img{
  width:62px;
  height:62px;
  object-fit:contain;
  background:#fff;
  border-radius:7px;
  padding:3px;
}
@media (max-width:1000px){
  .links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-links-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .links-grid{grid-template-columns:1fr}
  .qr-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Modal / detail ===== */
.detail-modal{background:var(--green-panel);border:1px solid var(--green-border);border-radius:22px;overflow:hidden}
.modal-close-btn{position:absolute;top:16px;left:16px;z-index:5}
.meta-rows{display:flex;flex-direction:column;gap:.4rem;color:var(--muted);font-size:.88rem}
.meta-rows b{color:var(--text)}

@media (max-width:768px){
  .hero-title{font-size:1.6rem}
}

/* عدادات تصنيفات قسم ماذا نحمل إلى تونس */
#cargoCats .chip-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
}
#cargoCats .chip-filter b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.35rem;
  height:1.35rem;
  padding:0 .25rem;
  border-radius:999px;
  background:rgba(161,181,101,.16);
  color:var(--brand-accent);
  font-size:.7rem;
}
#cargoCats .chip-filter.active b{
  background:rgba(255,255,255,.16);
  color:#fff;
}

/* ===== القائمة الجانبية: تفتح وتغلق بزر ===== */
#sideNav{
  transform:translateX(100%);
  transition:transform .28s ease, box-shadow .28s ease;
  pointer-events:none;
}
#sideNav.side-nav-open{
  transform:translateX(0);
  pointer-events:auto;
}
#app{
  margin-right:0 !important;
  margin-inline-end:0 !important;
}
.side-nav-toggle{
  position:fixed;
  top:104px;
  right:18px;
  z-index:1060;
  width:48px;
  height:48px;
  border:1px solid var(--green-border);
  border-radius:13px;
  background:var(--green-panel);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  cursor:pointer;
  transition:.2s;
}
.side-nav-toggle:hover{
  background:var(--green-panel-light);
  border-color:var(--brand-accent);
  color:var(--brand-accent);
}
.side-nav-toggle i{font-size:1.35rem}
.side-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:1040;
  background:rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.28s;
}
.side-nav-backdrop.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media (max-width:650px){
  .side-nav-toggle{top:92px;right:12px;width:44px;height:44px}
}