/* =========================================================
   خدمات مدينة حلب — الهوية البصرية
   لوحة الألوان الرسمية: أساسي كحلي أزرق + ذهبي + نجاح/طوارئ دلالية
   ========================================================= */

:root{
  --navy-900:#0F4C81;
  --navy-800:#0c3b65;
  --navy-700:#1361a5;
  --navy-600:#1776c8;
  --gold-500:#F4B400;
  --gold-400:#ffc521;
  --gold-100:#ffe9ac;
  --cream-50:#F1F5F9;
  --cream-100:#e3e9ef;
  --cream-white:#ffffff;
  --ink:#1c2430;
  --muted:#6b7280;
  --heading:#0c3b65;
  --on-dark:#ffffff;
  --danger:#E53935;
  --success:#26A69A;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-soft:0 10px 30px -12px rgba(15,76,129,.35);
  --shadow-card:0 4px 18px -6px rgba(15,76,129,.15);
  --maxw:1180px;
  --font-display:'Cairo', 'Tahoma', sans-serif;
  --font-body:'Tajawal', 'Tahoma', sans-serif;
}

[data-theme="dark"]{
  --cream-50:#121212;
  --cream-100:#3a3a3a;
  --cream-white:#292929;
  --ink:#eae7e0;
  --muted:#a3a19b;
  --heading:#ffe9ac;
  --navy-900:#0d1117;
  --navy-800:#161b22;
  --navy-700:#1f2530;
  --navy-600:#2a303c;
  --shadow-card:0 4px 18px -6px rgba(0,0,0,.5);
}

/* تعديلات إضافية على ألوان الحالة (نجاح/تحذير/شارات) لتبقى واضحة بالوضع الليلي */
[data-theme="dark"] .info-card__updated{background:rgba(58,125,92,.18);color:#6fcf9c;}
[data-theme="dark"] .water-pill--current{background:rgba(34,163,90,.16);color:#6fcf9c;border-color:rgba(34,163,90,.4);}
[data-theme="dark"] .water-list li{background:rgba(192,57,43,.14);border-color:rgba(192,57,43,.4);color:#f2a99e;}
[data-theme="dark"] .water-area-card--current{background:rgba(34,163,90,.14);border-color:rgba(34,163,90,.4);}
[data-theme="dark"] .water-area-card--next{background:rgba(192,57,43,.14);border-color:rgba(192,57,43,.4);}
[data-theme="dark"] .water-area-card--current .water-area-card__name{color:#6fcf9c;}
[data-theme="dark"] .water-area-card--next .water-area-card__name{color:#f2a99e;}
[data-theme="dark"] .water-note{background:rgba(255,255,255,.05);}
[data-theme="dark"] .badge--open{background:rgba(58,125,92,.18);color:#6fcf9c;}
[data-theme="dark"] .badge--closed{background:rgba(179,66,58,.18);color:#f2a99e;}
[data-theme="dark"] .elec-table td:nth-child(even){background:rgba(255,255,255,.02);}
[data-theme="dark"] .elec-table tr:nth-child(even) td{background:rgba(255,255,255,.03);}
[data-theme="dark"] .elec-table th{background:var(--navy-900);}
[data-theme="dark"] .item-card__img--placeholder,
[data-theme="dark"] .item-card__img,
[data-theme="dark"] .elec-table td,
[data-theme="dark"] .elec-table{background:transparent;}
[data-theme="dark"] .hero{background-color:var(--navy-900);}
[data-theme="dark"] .topbar{border-bottom-color:rgba(255,255,255,.08);}
[data-theme="dark"] .craft-tabs a{background:var(--cream-white);border-color:rgba(255,255,255,.1);}
[data-theme="dark"] .form-row input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] .form-row select,
[data-theme="dark"] .form-row textarea{background:var(--cream-white);border-color:rgba(255,255,255,.14);color:var(--ink);}

body, .sec-card, .item-card, .info-card, .currency-card, .water-block, .topbar, .card{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- زر الوضع الليلي/النهاري ---------- */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--cream-100);background:var(--cream-white);
  color:var(--navy-800);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;
}
[data-theme="dark"] .theme-toggle{color:var(--gold-400);}
.theme-toggle:hover{border-color:var(--gold-500);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;width:100%;max-width:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream-50);
  color:var(--ink);
  direction:rtl;
  text-align:right;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  width:100%;
  max-width:100%;
  position:relative;
}
.container,.sections,.card-grid,.hero,.news-strip,.updates,.widgets,.ad-banner,.cta-wrap{max-width:100%;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;color:var(--heading);}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px;}

::selection{background:var(--gold-400);color:var(--navy-900);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- News ticker (top strip) ---------- */
.news-strip{
  background:var(--navy-900);
  color:var(--on-dark);
  display:flex;
  align-items:stretch;
  font-size:14px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.news-strip__label{
  flex:0 0 auto;
  background:var(--gold-500);
  color:var(--navy-900);
  font-family:var(--font-display);
  font-weight:800;
  padding:9px 16px;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.news-strip__viewport{
  flex:1 1 auto;
  overflow:hidden;
  position:relative;
  padding:9px 0;
  direction:ltr; /* يضمن أن يبدأ الشريط من حافة ثابتة (يسار) بغض النظر عن اتجاه الصفحة RTL، لمنع اختفاء/قفز الشريط قبل اكتمال الدورة */
}
.news-strip__track{
  display:flex;
  direction:ltr;
  width:max-content;
  gap:60px;
  white-space:nowrap;
  will-change:transform;
}
.news-strip__track span{opacity:.92;direction:rtl;unicode-bidi:isolate;}
.news-strip__empty{padding:9px 16px;opacity:.7;font-size:13px;}

/* ---------- Top bar / site name ---------- */
.topbar{
  background:var(--cream-white);
  border-bottom:1px solid var(--cream-100);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.topbar__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;color:var(--heading);font-size:15px;}
.topbar__brand img{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold-500);}
.topbar__nav{display:flex;gap:4px;}
.topbar__actions{display:flex;align-items:center;gap:10px;}
.topbar__nav a{
  font-size:14px;font-weight:700;color:var(--heading);
  padding:8px 12px;border-radius:20px;transition:.2s;
}
.topbar__nav-more{display:none;}
.topbar__nav a{border-bottom:2px solid transparent;border-radius:0;}
.topbar__nav a:hover, .topbar__nav a.is-active{background:none;color:var(--navy-800);border-bottom-color:var(--gold-500);}
[data-theme="dark"] .topbar__nav a:hover, [data-theme="dark"] .topbar__nav a.is-active{color:var(--gold-400);}
.topbar__menu-btn{display:none;background:none;border:none;font-size:22px;color:var(--heading);}
.topbar__search-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--cream-100);background:var(--cream-white);
  color:var(--navy-800);font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
[data-theme="dark"] .topbar__search-btn{color:var(--gold-400);}
.topbar__search-btn:hover{border-color:var(--gold-500);}

/* toggle switch (الوضع الليلي) */
.theme-toggle.theme-toggle--switch{
  width:52px;height:28px;border-radius:20px;border:none;
  background:var(--navy-800);position:relative;padding:0;
}
.theme-toggle.theme-toggle--switch .knob{
  position:absolute;top:3px;inset-inline-start:3px;
  width:22px;height:22px;border-radius:50%;background:#fff;color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  transition:inset-inline-start .2s ease;
}
[data-theme="dark"] .theme-toggle.theme-toggle--switch .knob{inset-inline-start:27px;color:var(--gold-500);}

@media (max-width:820px){
  .topbar__nav{
    position:fixed;inset-inline-end:0;top:0;bottom:0;
    background:var(--navy-900);
    flex-direction:column;
    width:74%;max-width:300px;
    padding:80px 22px 22px;
    transform:translateX(-105%);
    transition:transform .3s ease;
    z-index:100;
  }
  .topbar__nav.is-open{transform:translateX(0) !important;}
  .topbar__nav{display:flex;overflow-y:auto;}
  .topbar__nav-more{display:contents;}
  .topbar__nav a{color:var(--on-dark);font-size:16px;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08) !important;border-radius:0;}
  .topbar__nav a:hover{background:transparent;color:var(--gold-400);}
  .topbar__menu-btn{display:block;}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;pointer-events:none;transition:.25s;}
  .nav-overlay.is-open{opacity:1;pointer-events:auto;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:70px 0 58px;
  text-align:center;
  color:var(--on-dark);
  background-color:var(--navy-900);
  background-image:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  background-size:cover;
  background-position:center;
}
.hero__scribble{
  position:absolute;top:18px;inset-inline-start:6%;
  font-family:'Cairo',cursive;color:var(--gold-400);
  font-size:14px;font-weight:700;opacity:.85;transform:rotate(-6deg);
  display:none;
}
@media (min-width:700px){.hero__scribble{display:block;}}
.hero__inner{position:relative;z-index:2;max-width:620px;margin:0 auto;}
.hero h1{font-size:30px;margin-bottom:8px;color:var(--on-dark);}
.hero__tagline{
  display:block;font-weight:700;font-size:15px;color:var(--gold-100);margin-bottom:6px;
}
.hero__desc{font-size:13.5px;color:rgba(255,255,255,.78);margin-bottom:22px;}
.hero__search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.97);border-radius:30px;
  padding:6px 6px 6px 6px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  max-width:480px;margin:0 auto;
}
.hero__search input{
  flex:1;border:none;background:none;outline:none;
  font-family:inherit;font-size:14.5px;padding:10px 14px;color:var(--ink);
}
.hero__search button{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:none;
  background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.hero__search button:hover{background:var(--navy-900);}

/* citadel skyline divider — echoes the logo's illustration */
.skyline{
  display:block;width:100%;height:56px;
  margin-top:34px;
  fill:var(--navy-800);
  opacity:.9;
}
.hero .skyline{position:relative;z-index:1;fill:var(--navy-900);opacity:.55;margin-top:-10px;}

/* ---------- Category grid (homepage) ---------- */
.sections{
  background:var(--cream-50);
  padding:38px 0 10px;
}
.sections__title{
  color:var(--heading);
  text-align:center;
  font-size:20px;
  margin-bottom:22px;
}
.sections__title span{color:var(--gold-500);}
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}

.sec-card-wrap{display:block;min-width:0;}
.sec-card{
  position:relative;
  width:100%;height:100%;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  min-height:118px;
  padding:16px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sec-card-wrap:hover .sec-card{transform:translateY(-4px);box-shadow:0 16px 28px -10px rgba(0,0,0,.45);}
.sec-card__icon{font-size:22px;margin-bottom:26px;opacity:.95;}
.sec-card h3{font-size:15px;color:#fff;margin:0 0 3px;}
.sec-card-caption{display:none;}
.sec-card__cap{font-size:11.5px;color:rgba(255,255,255,.85);}
.sec-card__badge{
  position:absolute;top:10px;inset-inline-end:10px;
  background:rgba(255,255,255,.92);color:var(--navy-900);
  font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px;
}

/* لون كل قسم — يبقى ثابتاً بالوضعين الليلي والنهاري */
.sec-card--jobs{background:linear-gradient(155deg,#2f6fed,#1e4fb8);}
.sec-card--electricity{background:linear-gradient(155deg,#b08a1c,#8a6a12);}
.sec-card--water{background:linear-gradient(155deg,#29b6d8,#1c8fac);}
.sec-card--craft{background:linear-gradient(155deg,#8b6fe0,#6b4fc0);}
.sec-card--offers{background:linear-gradient(155deg,#e8935a,#cf7440);}
.sec-card--currency{background:linear-gradient(155deg,#5fa8e0,#3d84c0);}
.sec-card--emergency{background:linear-gradient(155deg,#e0584f,#c23b32);}
.sec-card--humanitarian{background:linear-gradient(155deg,#3fa66a,#2a8552);}
.sec-card--complaints{background:linear-gradient(155deg,#d1548a,#b03669);}
.sec-card--fuels{background:linear-gradient(155deg,#e0633a,#b8431f);}

/* ---------- آخر الأخبار والإعلانات (الرئيسية) ---------- */
.updates{padding:36px 0;}
.updates__grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:stretch;
}
@media (max-width:760px){.updates__grid{grid-template-columns:1fr;}}
.updates__media{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;color:#fff;
  min-height:230px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--navy-900);
  background-image:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-card);
}
.updates__media h3{color:#fff;font-size:19px;margin-bottom:6px;}
.updates__media p{color:rgba(255,255,255,.8);font-size:13px;margin-bottom:16px;}
.updates__list{
  background:var(--cream-white);border-radius:var(--radius-lg);border:1px solid var(--cream-100);
  box-shadow:var(--shadow-card);padding:8px 4px;display:flex;flex-direction:column;
}
.updates__item{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--cream-100);
}
.updates__item:last-child{border-bottom:none;}
.updates__item-icon{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;
}
.updates__item-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.updates__item-date{font-size:11.5px;color:var(--muted);}
.updates__empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13.5px;}

/* ---------- صف الأدوات: الطقس / العملات / روابط سريعة ---------- */
.widgets{padding:6px 0 36px;}
.widgets__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:820px){.widgets__grid{grid-template-columns:1fr;}}
.widget-card{min-width:0;
  background:var(--cream-white);border:1px solid var(--cream-100);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:18px 20px;
}
.widget-card__title{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.widget-card__title i{color:var(--gold-500);}

.weather-widget{display:flex;align-items:center;gap:14px;}
.weather-widget__icon{font-size:34px;color:var(--gold-500);}
.weather-widget__temp{font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--heading);line-height:1;}
.weather-widget__cond{font-size:12.5px;color:var(--muted);margin-top:4px;}
.weather-widget__minmax{margin-inline-start:auto;text-align:end;font-size:11.5px;color:var(--muted);line-height:1.9;}
.weather-widget__minmax b{color:var(--ink);}
.weather-forecast{
  display:flex;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--cream-100);overflow-x:auto;
}
.weather-forecast__day{
  flex:1 0 auto;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11px;color:var(--muted);
}
.weather-forecast__day i{color:var(--gold-500);font-size:14px;}
.weather-forecast__name{font-weight:700;color:var(--ink);}
.weather-forecast__temps b{color:var(--heading);}
.weather-forecast__temps small{color:var(--muted);}


.currency-widget ul{display:flex;flex-direction:column;gap:8px;}
.currency-widget li{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;padding:6px 0;border-bottom:1px dashed var(--cream-100);
}
.currency-widget li:last-child{border-bottom:none;}
.currency-widget .val{font-family:var(--font-display);font-weight:800;color:var(--heading);font-size:14.5px;}
.currency-widget .val small{font-size:10.5px;color:var(--muted);font-weight:600;}
.currency-widget .lbl{display:flex;align-items:center;gap:6px;color:var(--ink);}
.currency-widget__empty{font-size:12.5px;color:var(--muted);}
.trend{font-size:12px;margin-inline-start:4px;}
.trend--up{color:#2a8552;}
.trend--down{color:#c23b32;}
.currency-rows--wide{display:flex;flex-direction:column;gap:14px;}
.currency-rows--wide > div{display:flex;align-items:center;justify-content:space-between;flex:none;}
.currency-rows--wide .label{margin-bottom:0;}

.quicklinks-widget ul{display:flex;flex-direction:column;gap:4px;}
.quicklinks-widget a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--ink);padding:8px 2px;
}
.quicklinks-widget a i.fa-chevron-left, .quicklinks-widget a i.fa-arrow-up-right-from-square{color:var(--muted);font-size:11px;}
.quicklinks-widget a:hover{color:var(--navy-800);}
[data-theme="dark"] .quicklinks-widget a:hover{color:var(--gold-400);}

/* ---------- شريط الدعوة للتواصل ---------- */
.cta-banner{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  color:#fff;padding:34px 26px;margin-bottom:8px;text-align:center;
  background-color:var(--navy-900);
  background-image:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-soft);
}
.cta-banner h2{color:#fff;font-size:20px;margin-bottom:6px;}
.cta-banner p{color:rgba(255,255,255,.82);font-size:13.5px;margin-bottom:16px;}
.cta-wrap{padding:6px 0 42px;}

/* ---------- Generic page header (inner pages) ---------- */
.page-head{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  color:var(--on-dark);
  padding:34px 0 26px;
  text-align:center;
}
.page-head h1{color:var(--on-dark);font-size:22px;margin-bottom:4px;}
.page-head p{color:var(--gold-100);font-size:13px;margin:0;opacity:.85;}
.page-head .breadcrumb{font-size:13px;color:var(--gold-400);margin-bottom:8px;display:inline-block;}

.page-body{padding:32px 0 50px;}

/* ---------- Generic content card (water / electricity) ---------- */
.info-card{
  background:var(--cream-white);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--cream-100);
  max-width:760px;
  margin:0 auto;
}
.info-card__updated{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--success);
  background:#e9f5ef;padding:5px 12px;border-radius:20px;margin-bottom:14px;
}
.info-card__body{font-size:15px;color:var(--ink);}
.info-card__body table{width:100%;border-collapse:collapse;margin:10px 0;}
.info-card__body td,.info-card__body th{border:1px solid var(--cream-100);padding:8px;font-size:14px;}

/* ---------- Water rounds (current / next) ---------- */
.water-wrap{max-width:640px;margin:0 auto;}
.water-block{
  background:var(--cream-white);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-card);border:1px solid var(--cream-100);
  margin-bottom:18px;
}
.water-block__head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.water-block__head i{font-size:18px;}
.water-block__head h3{margin:0;font-size:16px;}
.water-pills{display:flex;flex-wrap:wrap;gap:10px;}
.water-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:30px;font-weight:800;font-size:14px;
}
.water-pill--current{background:#e6f6ec;color:#1f7a44;border:1.5px solid #8fd6ac;}
.water-pill--current .dot{width:9px;height:9px;border-radius:50%;background:#22a35a;box-shadow:0 0 0 4px rgba(34,163,90,.18);}
.water-list{display:flex;flex-direction:column;gap:10px;}
.water-list li{
  display:flex;align-items:center;gap:10px;list-style:none;
  background:#fdf1ef;border:1.5px solid #f3c9c2;color:#9c3126;
  padding:10px 16px;border-radius:14px;font-weight:700;font-size:14px;
}
.water-list li .rank{
  width:22px;height:22px;border-radius:50%;background:#c0392b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:0 0 auto;
}
.water-list li .dot{
  width:9px;height:9px;border-radius:50%;background:#c0392b;margin-inline-start:auto;flex:0 0 auto;
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.25;}}
.water-note{font-size:13.5px;color:var(--muted);background:var(--cream-50);border-radius:12px;padding:14px 16px;}

.water-area-list{display:flex;flex-direction:column;gap:12px;}
.water-area-card{border-radius:14px;padding:14px 16px;border:1.5px solid;}
.water-area-card--current{background:#eef8f1;border-color:#8fd6ac;}
.water-area-card--next{background:#fdf1ef;border-color:#f3c9c2;}
.water-area-card__top{display:flex;align-items:center;gap:10px;}
.water-area-card__name{font-weight:800;font-size:14.5px;flex:1;}
.water-area-card--current .water-area-card__name{color:#1f7a44;}
.water-area-card--next .water-area-card__name{color:#9c3126;}
.water-area-card .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.water-area-card--current .dot{background:#22a35a;box-shadow:0 0 0 4px rgba(34,163,90,.18);}
.water-area-card--next .dot{background:#c0392b;animation:pulse-dot 1.6s ease-in-out infinite;}
.water-area-card .rank{
  width:22px;height:22px;border-radius:50%;background:#c0392b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:0 0 auto;
}
.water-area-card__sched{font-size:12.5px;margin-top:8px;font-weight:700;opacity:.85;}
.water-area-card__notes{font-size:12.5px;margin-top:6px;color:var(--ink);opacity:.75;}

/* ---------- Electricity schedule accordion ---------- */
.elec-accordion{display:flex;flex-direction:column;gap:10px;}
.elec-item{
  background:var(--cream-white);border-radius:14px;border:1px solid var(--cream-100);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.elec-item summary{
  list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;
  justify-content:space-between;font-family:var(--font-display);font-weight:800;color:var(--heading);font-size:14.5px;
  gap:10px;flex-wrap:wrap;
}
.elec-item--on{border-inline-start:4px solid var(--success);}
.elec-item--off{border-inline-start:4px solid var(--danger);}
.elec-status{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:5px 12px;border-radius:20px;order:1;
}
.elec-status--on{background:#e9f5ef;color:var(--success);}
.elec-status--off{background:#fdecea;color:var(--danger);}
[data-theme="dark"] .elec-status--on{background:rgba(58,125,92,.18);color:#6fcf9c;}
[data-theme="dark"] .elec-status--off{background:rgba(179,66,58,.18);color:#f2a99e;}
.elec-item__name{order:0;}
.elec-item__chev{order:2;}
.elec-item summary::-webkit-details-marker{display:none;}
.elec-item__name i{color:var(--gold-500);margin-inline-end:6px;}
.elec-item__chev{transition:transform .2s;color:var(--muted);}
.elec-item[open] .elec-item__chev{transform:rotate(180deg);}
.elec-item__panel{padding:0 18px 16px;display:flex;flex-direction:column;gap:8px;}
.elec-slot-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--cream-50);border-radius:10px;padding:8px 12px;}
.elec-slot-num{font-size:11.5px;color:var(--muted);font-weight:700;min-width:52px;}
.elec-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:800;}
.elec-chip--off{background:#fdecea;color:var(--danger);}
.elec-chip--on{background:#e9f5ef;color:var(--success);}
[data-theme="dark"] .elec-chip--off{background:rgba(179,66,58,.18);color:#f2a99e;}
[data-theme="dark"] .elec-chip--on{background:rgba(58,125,92,.18);color:#6fcf9c;}
.elec-slot-arrow{color:var(--muted);font-size:11px;}

/* ---------- Job image gallery ---------- */
.item-card__gallery{
  display:flex;gap:6px;overflow-x:auto;padding:6px;background:var(--cream-100);
  scroll-snap-type:x mandatory;
}
.item-card__gallery img{
  height:170px;min-width:220px;object-fit:cover;border-radius:8px;flex:0 0 auto;
  scroll-snap-align:start;cursor:pointer;
}
.item-card__gallery img:only-child{min-width:100%;}

.lightbox{
  position:fixed;inset:0;background:rgba(8,15,25,.9);z-index:999;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:100%;max-height:90vh;border-radius:10px;}
.lightbox__close{position:absolute;top:18px;inset-inline-end:20px;color:#fff;font-size:30px;background:none;border:none;cursor:pointer;}

/* ---------- Humanitarian dashboard stats ---------- */
.hum-dashboard{
  max-width:420px;margin:0 auto 30px;background:var(--cream-white);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid var(--cream-100);
  padding:26px;text-align:center;
}
.hum-dashboard__num{font-family:var(--font-display);font-size:46px;font-weight:800;color:var(--heading);line-height:1;}
.hum-dashboard__lbl{font-size:13px;color:var(--muted);margin-top:8px;font-weight:700;}
.hum-dashboard__lbl i{color:var(--gold-500);}
.hum-dashboard__divider{border-top:1px dashed var(--cream-100);margin:20px 0;}
.hum-dashboard__row{display:flex;align-items:center;justify-content:center;}
.hum-dashboard__cell{flex:1;}
.hum-dashboard__cell-num{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--gold-500);}
.hum-dashboard__cell-num small{font-size:13px;}
.hum-dashboard__cell-lbl{font-size:11.5px;color:var(--muted);margin-top:4px;}
.hum-dashboard__sep{width:1px;align-self:stretch;background:var(--cream-100);margin:0 10px;}

.hum-card-media{position:relative;}
.hum-card-badge{position:absolute;top:10px;inset-inline-start:10px;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.hum-card-pct{
  position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.hum-card-pct span{
  width:34px;height:34px;border-radius:50%;background:var(--navy-900);color:var(--on-dark);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;
}

/* ---------- List grid (jobs / humanitarian / craft) ---------- */
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.item-grid--cols-1{grid-template-columns:1fr;}
.item-grid--cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){
  .item-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .item-grid--cols-1{grid-template-columns:1fr;}
  .item-grid--cols-3{grid-template-columns:repeat(2,1fr);}
}
.item-card{
  position:relative;
  min-width:0;
  background:var(--cream-white);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--cream-100);
  display:flex;flex-direction:column;
}
.item-card__share-btn{
  position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(10,20,35,.55);color:#fff;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
.item-card__share-btn:hover{background:rgba(10,20,35,.8);}
.item-card__img{width:100%;height:170px;object-fit:cover;background:var(--cream-100);}
.item-card__img--portrait{height:auto;aspect-ratio:3/4;}
.item-card--link{cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;}
.item-card--link:hover{transform:translateY(-4px);box-shadow:0 14px 28px -10px rgba(0,0,0,.25);}
.item-card__img--placeholder{display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--gold-500);}
.item-card__body{padding:16px;flex:1;display:flex;flex-direction:column;}
.item-card__meta{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;gap:10px;flex-wrap:wrap;}
.item-card h3{font-size:16px;margin-bottom:6px;}
.item-card p{font-size:13.5px;color:var(--ink);opacity:.85;margin-bottom:12px;flex:1;}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;}
.badge--open{background:#e9f5ef;color:var(--success);}
.badge--closed{background:#f5e9e8;color:var(--danger);}

/* ---------- بطاقة منتهية (فرصة عمل / عرض انتهى وقته) ---------- */
.item-card--expired{position:relative;opacity:.72;filter:grayscale(45%);}
.item-card--expired .item-card__img{filter:grayscale(60%);}
.item-card__expired-ribbon{
  position:absolute;top:50%;inset-inline:0;
  transform:translateY(-50%);
  background:rgba(197,42,32,.94);color:#fff;
  font-size:13px;font-weight:800;
  padding:9px 10px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3);
  z-index:2;
}
[data-theme="dark"] .item-card--expired{opacity:.6;}

.progress{height:8px;border-radius:6px;background:var(--cream-100);overflow:hidden;margin-bottom:10px;}
.progress__bar{height:100%;background:linear-gradient(90deg,var(--gold-500),var(--gold-400));}

/* ---------- نماذج عامة (شكاوى، إلخ) ---------- */
.form-row{margin-bottom:16px;text-align:right;}
.form-row label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--heading);}
[data-theme="dark"] .form-row label{color:var(--gold-400);}
.form-row input[type=text],
.form-row input[type=tel],
.form-row input[type=email],
.form-row textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--cream-100);border-radius:10px;
  font-family:inherit;font-size:14.5px;background:var(--cream-white);color:var(--ink);
}
.form-row textarea{min-height:120px;resize:vertical;}
.form-row .hint{font-size:12px;color:var(--muted);margin-top:4px;}
.alert-inline{background:#fdecea;color:var(--danger);padding:12px 16px;border-radius:10px;font-size:13.5px;font-weight:700;margin-bottom:16px;}
[data-theme="dark"] .alert-inline{background:rgba(179,66,58,.18);color:#f2a99e;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:12px;border:none;
  background:var(--navy-800);color:var(--on-dark);
  transition:.2s;
}
.btn:hover{background:var(--navy-900);}
.btn--gold{background:var(--gold-500);color:var(--navy-900);}
.btn--gold:hover{background:var(--gold-400);}
.btn--outline{background:transparent;border:1.5px solid var(--heading);color:var(--heading);}
.btn--block{width:100%;}
.btn--sm{padding:7px 14px;font-size:12.5px;}
.btn[disabled], .btn--disabled{opacity:.5;pointer-events:none;}

.notice-box{
  background:var(--gold-100);border:1px solid var(--gold-400);color:var(--navy-800);
  border-radius:var(--radius-md);padding:14px 16px;font-size:13.5px;margin-bottom:18px;
  display:flex;gap:10px;align-items:flex-start;line-height:1.7;
}
[data-theme="dark"] .notice-box{background:rgba(244,180,0,.12);border-color:rgba(244,180,0,.4);color:var(--ink);}
.empty-state{
  text-align:center;padding:50px 20px;color:var(--muted);
}
.empty-state i{font-size:40px;color:var(--gold-400);margin-bottom:12px;display:block;}

/* ---------- Craft categories (tabs) ---------- */
.craft-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px;}
.craft-tabs a{
  padding:9px 18px;border-radius:24px;font-weight:700;font-size:13.5px;
  background:var(--cream-white);border:1.5px solid var(--cream-100);color:var(--heading);
}
.craft-tabs a.is-active, .craft-tabs a:hover{background:var(--navy-800);color:var(--on-dark);border-color:var(--navy-800);}

.join-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--gold-100);border:1px solid var(--gold-400);border-radius:16px;
  padding:14px 20px;margin-bottom:22px;font-size:13.5px;font-weight:700;color:var(--navy-800);
}
[data-theme="dark"] .join-banner{background:rgba(244,180,0,.14);border-color:rgba(244,180,0,.4);color:var(--ink);}

/* ---------- Currency page ---------- */
.currency-card{
  min-width:0;
  max-width:420px;margin:0 auto;background:var(--cream-white);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:26px;text-align:center;border:1px solid var(--cream-100);
}
.currency-card .rate-label{font-size:13.5px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.currency-card .rate{font-family:var(--font-display);font-size:38px;color:var(--heading);font-weight:800;}
.currency-card .rate small{font-size:15px;color:var(--muted);font-weight:600;}
.currency-rows{display:flex;justify-content:space-around;margin-top:16px;}
.currency-rows div{flex:1;}
.currency-rows .label{font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.currency-rows .value{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--heading);}

.currency-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:620px){.currency-cards-grid{grid-template-columns:1fr;}}
.currency-cards-grid .currency-card{max-width:none;margin:0;}

.currency-card--themed{position:relative;overflow:hidden;color:#fff;}
.currency-card--themed .rate-label{color:rgba(255,255,255,.92);}
.currency-card--themed .rate{color:#fff;}
.currency-card--themed .rate small{color:rgba(255,255,255,.75);}
.currency-card--themed .currency-rows .label{color:rgba(255,255,255,.75);}
.currency-card--themed .currency-rows .value{color:#fff;}
.currency-card--themed p{color:rgba(255,255,255,.75);}
.currency-card--themed::before{
  content:attr(data-symbol);
  position:absolute;left:-14px;bottom:-38px;font-size:130px;font-weight:800;
  opacity:.16;line-height:1;font-family:Arial,sans-serif;z-index:0;pointer-events:none;
}
.currency-card--themed > *{position:relative;z-index:1;}
.currency-card--usd{background:linear-gradient(155deg,#1e7a4f,#134c32);}
.currency-card--eur{background:linear-gradient(155deg,#2f5fae,#1c3f7d);}
.currency-card--try{background:linear-gradient(155deg,#c23b32,#8a2820);}
.currency-card--gold{background:linear-gradient(155deg,#f4c430,#c2940f);color:#3a2a00;}
.currency-card--gold .rate-label,.currency-card--gold .rate,.currency-card--gold p{color:#3a2a00;}
.currency-card--gold .rate small{color:rgba(58,42,0,.7);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-900);color:rgba(255,255,255,.75);
  padding:38px 0 18px;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px;
  text-align:start;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;text-align:center;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h4{color:var(--gold-400);font-size:14px;margin-bottom:14px;font-family:var(--font-display);}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a, .footer-col li{font-size:13px;color:rgba(255,255,255,.75);}
.footer-col a:hover{color:var(--gold-400);}
.footer-col--brand{max-width:280px;}
.site-footer__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);color:var(--on-dark);font-weight:800;font-size:16px;margin-bottom:10px;}
.site-footer__brand img{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold-500);}
.footer-col--brand p{font-size:13px;opacity:.75;}
.social-row{display:flex;gap:12px;margin-top:14px;}
@media (max-width:760px){.social-row{justify-content:center;}}
.social-row a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--on-dark);font-size:15px;
  transition:.2s;
}
.social-row a:hover{background:var(--gold-500);color:var(--navy-900);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:16px;text-align:center;
}
@media (max-width:600px){.footer-bottom{justify-content:center;}}
.visit-counter{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  padding:6px 16px;border-radius:20px;font-size:12.5px;
}
.site-footer__copy{font-size:12px;opacity:.55;}

/* ---------- شريط الإعلانات (ضع إعلانك هنا) ---------- */
.ad-banner{margin:22px 0 0;}
.ad-banner__box{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:100px;text-align:center;
}
.ad-banner__placeholder{
  border:2px dashed var(--cream-100);color:var(--muted);
  background:var(--cream-white);font-weight:700;font-size:14px;
  flex-direction:column;gap:8px;padding:26px;
}
.ad-banner__placeholder i{font-size:26px;color:var(--gold-500);}
.ad-banner__image img{width:100%;display:block;max-height:220px;object-fit:cover;}
.ad-banner__text{
  background:var(--gold-100);border:1px solid var(--gold-400);color:var(--navy-800);
  font-weight:700;padding:20px;font-size:14.5px;
}
[data-theme="dark"] .ad-banner__text{background:rgba(244,180,0,.14);border-color:rgba(244,180,0,.4);color:var(--ink);}


/* ---------- محول العملات ---------- */
.fab-converter{
  position:fixed;bottom:22px;inset-inline-start:22px;z-index:60;
  width:52px;height:52px;border-radius:50%;border:none;
  background:var(--navy-800);color:#fff;font-size:19px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
}
.fab-converter:hover{background:var(--navy-900);}
.converter-modal{
  display:none;position:fixed;inset:0;z-index:80;
  background:rgba(10,20,35,.55);
  align-items:center;justify-content:center;padding:16px;
}
.converter-modal.is-open{display:flex;}
.converter-modal__box{
  background:var(--cream-white);border-radius:var(--radius-lg);
  width:100%;max-width:380px;box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
  overflow:hidden;
}
.converter-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--navy-900);color:#fff;
}
.converter-modal__head h3{color:#fff;font-size:15.5px;margin:0;}
.converter-modal__head button{background:none;border:none;color:#fff;font-size:22px;line-height:1;}
.converter-modal__body{padding:18px;}
.converter-row{display:flex;align-items:flex-end;gap:8px;}
.converter-row .form-row{flex:1;}
#convSwap{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--cream-100);
  background:var(--cream-white);color:var(--navy-800);margin-bottom:2px;
}
.converter-result{
  margin-top:16px;padding:14px;border-radius:var(--radius-md);
  background:var(--gold-100);border:1px solid var(--gold-400);
  text-align:center;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--navy-800);
}
[data-theme="dark"] .converter-result{background:rgba(244,180,0,.12);border-color:rgba(244,180,0,.4);color:var(--ink);}
.converter-note{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;}


/* ---------- محروقات حلب ---------- */
.section-subtitle{
  font-size:16.5px;color:var(--heading);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.section-subtitle i{color:var(--gold-500);}

.fuel-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:560px){.fuel-price-grid{grid-template-columns:repeat(2,1fr);}}
.fuel-price-card{min-width:0;
  background:var(--cream-white);border:1px solid var(--cream-100);border-radius:var(--radius-md);
  padding:14px;text-align:center;box-shadow:var(--shadow-card);
}
.fuel-price-card__name{font-size:13px;color:var(--muted);margin-bottom:6px;}
.fuel-price-card__price{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--heading);}
.fuel-price-card__price small{font-size:11px;font-weight:600;color:var(--muted);}

.station-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:620px){.station-grid{grid-template-columns:1fr;}}
.station-card{min-width:0;
  background:var(--cream-white);border-radius:var(--radius-lg);padding:16px;
  box-shadow:var(--shadow-card);border-inline-start:4px solid var(--muted);
}
.station-card--open{border-inline-start-color:#2a8552;}
.station-card--closed{border-inline-start-color:#c23b32;}
.station-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.station-card__name{font-weight:800;color:var(--heading);font-size:14.5px;}
.station-card__status{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.station-card__status.is-open{background:rgba(42,133,82,.14);color:#2a8552;}
.station-card__status.is-closed{background:rgba(194,59,50,.14);color:#c23b32;}
.station-card__hours{font-size:12px;color:var(--muted);margin-bottom:10px;}
.station-card__fuels{display:flex;flex-wrap:wrap;gap:6px;}
.fuel-tag{
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;
  display:inline-flex;align-items:center;gap:5px;
}
.fuel-tag--available{background:rgba(42,133,82,.14);color:#2a8552;}
.fuel-tag--unavailable{background:rgba(194,59,50,.1);color:#9a9a9a;}
[data-theme="dark"] .fuel-tag--unavailable{color:#777;}


/* ---------- شاشة التحميل ---------- */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy-900);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s ease, visibility .4s ease;
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.page-loader img{width:64px;height:64px;border-radius:50%;border:3px solid var(--gold-500);animation:loader-pulse 1.4s ease-in-out infinite;}
.page-loader__spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(244,180,0,.25);border-top-color:var(--gold-500);
  animation:loader-spin .8s linear infinite;
}
@keyframes loader-spin{to{transform:rotate(360deg);}}
@keyframes loader-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}


/* ---------- إشعارات المتصفح (شريط أعلى الصفحة) ---------- */
.notif-perm-bar{
  display:none;
  align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--navy-800);color:#fff;
  padding:10px 16px;font-size:13px;font-weight:700;text-align:center;
  position:relative;z-index:50;
}
.notif-perm-bar.is-visible{display:flex;}
.notif-perm-bar i.fa-bell,.notif-perm-bar i.fa-bell-slash{color:var(--gold-400);margin-inline-end:4px;}
#notifPermBtn{
  background:var(--gold-500);color:var(--navy-900);border:none;border-radius:20px;
  padding:6px 16px;font-weight:800;font-size:12.5px;
}
#notifPermDismiss{background:none;border:none;color:rgba(255,255,255,.7);font-size:15px;padding:0 4px;}
#notifPermDismiss:hover{color:#fff;}


/* utility */
.text-center{text-align:center;}
.mt-2{margin-top:20px;}