/* =========================================================
   ✅ نسخة "مستقرة" + WP-SAFE (Scoped) - معدلة بالكامل
   - كل شيء داخل #alrashdiApp
   ========================================================= */
#alrashdiApp{
  --bg:#ffffff;
  --bg2:#f6f8fc;
  --panel:#ffffff;
  --panel2:#fbfcff;
  --text:#0b1b2b;
  --muted:rgba(11,27,43,.68);
  --line:rgba(11,27,43,.10);
  --blue:#1d4ed8;
  --red:#dc2626;
  --shadow:0 16px 42px rgba(11,27,43,.12);
  --shadow2:0 10px 28px rgba(11,27,43,.10);
  --radius:18px;
  --radius2:26px;
  --max:1180px;

  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 8%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(900px 520px at 92% 14%, rgba(220,38,38,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  padding:0;
  margin:0;
  overflow-x:hidden;
  min-height: 100vh;
}

/* Prevent theme styles from breaking layout inside the app */
#alrashdiApp *{ 
  box-sizing:border-box; 
  margin:0;
  padding:0;
}

#alrashdiApp img{ 
  max-width:100%; 
  height:auto; 
  display:block; 
  border:0;
}

#alrashdiApp a{ 
  color:inherit; 
  text-decoration:none; 
  transition: color 0.2s ease;
}

#alrashdiApp p{ 
  margin:0 0 1em 0; 
  line-height:1.6;
}

#alrashdiApp h1,#alrashdiApp h2,#alrashdiApp h3,#alrashdiApp h4,#alrashdiApp h5{ 
  margin:0 0 0.5em 0;
  line-height:1.3;
  font-weight:800;
}

#alrashdiApp .wrap{ 
  max-width:var(--max); 
  margin:0 auto; 
  padding:0 20px; 
  width:100%;
}

/* Topbar */
#alrashdiApp .topbar{
  position:sticky; 
  top:0; 
  z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(11,27,43,.08);
}

#alrashdiApp .nav{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:14px; 
  padding:12px 0;
  flex-wrap:nowrap;  min-width:0;
}


#alrashdiApp .brand{ 
  display:flex; 
  align-items:center; 
  gap:12px; 
  min-width:220px; 
  flex-shrink:0;
}

#alrashdiApp .logo{
  width:42px; 
  height:42px; 
  border-radius:14px;
  background: 
    radial-gradient(20px 20px at 30% 35%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(135deg, rgba(29,78,216,.92), rgba(220,38,38,.85));
  box-shadow: 0 12px 26px rgba(29,78,216,.14);
  position:relative; 
  overflow:hidden;
  border:1px solid rgba(11,27,43,.12);
  flex-shrink:0;
}

#alrashdiApp .brand h1{ 
  font-size:16px; 
  font-weight:800; 
  line-height:1.2; 
  margin:0;
}

#alrashdiApp .brand small{
  display:block; 
  margin-top:4px;
  font-family:Inter, system-ui, sans-serif;
  direction:ltr; 
  text-align:right;
  color:var(--muted); 
  font-size:12px; 
  font-weight:600;
}

#alrashdiApp .menu{
  display:flex; 
  align-items:center; 
  gap:8px; 
  flex-wrap:nowrap;
  justify-content:center;
  flex:1;  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ✅ السماح للـ dropdown أن يظهر خارج شريط القائمة على الشاشات الواسعة */
@media (min-width: 980px){
  #alrashdiApp .menu{ overflow:visible; }
}

/* =============================
   Dropdown (القبيلة)
   ============================= */
#alrashdiApp .alr-dd{ position:relative; }

#alrashdiApp .alr-dd-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#alrashdiApp .alr-dd-caret{ font-size:12px; opacity:.8; }

#alrashdiApp .alr-dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,27,43,.12);
  border-radius:14px;
  box-shadow: 0 18px 44px rgba(11,27,43,.18);
  padding:8px;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: all .18s ease;
}

#alrashdiApp .alr-dd-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(11,27,43,.86);
  font-weight:800;
  font-size:12.2px;
  white-space:nowrap;
}

#alrashdiApp .alr-dd-menu a:hover,
#alrashdiApp .alr-dd-menu a:focus{
  color:var(--blue);
  background:rgba(29,78,216,.06);
  border-color:rgba(29,78,216,.18);
  outline:none;
}

#alrashdiApp .alr-dd-divider{
  display:block;
  height:1px;
  background:rgba(11,27,43,.10);
  margin:6px 6px;
}

/* إظهار القائمة عند المرور/التركيز */
#alrashdiApp .alr-dd:hover .alr-dd-menu,
#alrashdiApp .alr-dd:focus-within .alr-dd-menu,
#alrashdiApp .alr-dd.is-open .alr-dd-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* في الشاشات الصغيرة: نخفي dropdown داخل الهيدر (لأن القائمة تتحول Drawer) */
@media (max-width: 980px){
  #alrashdiApp .alr-dd-menu{ display:none; }
}

/* ✅ wp_nav_menu يطبع عناصر <li> (بدون <ul> في هذا القالب)، فنعالجها حتى لا تنكسر القائمة لسطرين */
#alrashdiApp .menu li{ list-style:none; display:inline-flex; margin:0; padding:0; }
#alrashdiApp .menu li a{ display:inline-flex; }

/* =========================================================
   ✅ Topbar styles (GLOBAL)
   السبب: الهيدر يُطبع خارج #alrashdiApp في بعض القوالب،
   وبالتالي نكرر قواعد القائمة/الأزرار بدون Scope.
   ========================================================= */

.topbar .menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:center;
  flex:1;
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (min-width: 980px){
  .topbar .menu{ overflow:visible; }
}

/* Dropdown (القبيلة) */
.topbar .alr-dd{ position:relative; list-style:none; }
.topbar .alr-dd-trigger{ display:inline-flex; align-items:center; gap:6px; }
.topbar .alr-dd-caret{ font-size:12px; opacity:.8; }

.topbar .alr-dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,27,43,.12);
  border-radius:14px;
  box-shadow: 0 18px 44px rgba(11,27,43,.18);
  padding:8px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: all .18s ease;
}

.topbar .alr-dd-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(11,27,43,.86);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

.topbar .alr-dd-menu a:hover,
.topbar .alr-dd-menu a:focus{
  color:var(--blue);
  background:rgba(29,78,216,.06);
  border-color:rgba(29,78,216,.18);
  outline:none;
}

.topbar .alr-dd-divider{
  display:block;
  height:1px;
  background:rgba(11,27,43,.10);
  margin:6px 6px;
}

.topbar .alr-dd:hover .alr-dd-menu,
.topbar .alr-dd:focus-within .alr-dd-menu,
.topbar .alr-dd.is-open .alr-dd-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

@media (max-width: 980px){
  .topbar .alr-dd-menu{ display:none; }
}

/* عناصر القائمة لو طُبعت كـ <li> */
.topbar .menu li{ list-style:none; display:inline-flex; margin:0; padding:0; }
.topbar .menu li a{ display:inline-flex; }

/* زر الرئيسية */
.topbar .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  transition:all .18s ease;
  box-shadow: var(--shadow2);
  cursor:pointer;
  outline:none;
  font-family:inherit;
}

.topbar .btn:hover,
.topbar .btn:focus{ transform: translateY(-1px); outline:none; }

.topbar .btn.primary{
  border-color:rgba(29,78,216,.35);
  background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(220,38,38,.88));
  color:#fff;
  box-shadow: 0 18px 40px rgba(29,78,216,.22);
}

/* روابط القائمة بنفس ستايل الصفحة الرئيسية */
.topbar .menu a{
  padding:10px 12px;
  border-radius:12px;
  color:rgba(11,27,43,.80);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  border:1px solid transparent;
  transition:all .18s ease;
}

.topbar .menu a:hover,
.topbar .menu a:focus{
  color:var(--blue);
  background:rgba(29,78,216,.06);
  border-color:rgba(29,78,216,.18);
  outline:none;
}


#alrashdiApp .menu a{
  padding:10px 12px; 
  border-radius:12px;
  color:rgba(11,27,43,.80);
  border:1px solid transparent;
  transition:all .18s ease;
  font-weight:800; 
  font-size:13px;
  white-space:nowrap;
}

#alrashdiApp .menu a:hover,
#alrashdiApp .menu a:focus{
  color:var(--blue);
  background:rgba(29,78,216,.06);
  border-color:rgba(29,78,216,.18);
  transform: translateY(-1px);
  outline:none;
}

#alrashdiApp .cta{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  justify-content:flex-end; 
  min-width:220px; 
  flex-shrink:0;
}

#alrashdiApp .btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  padding:10px 14px; 
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:800; 
  font-size:13px;
  transition:all .18s ease;
  box-shadow: var(--shadow2);
  cursor:pointer;
  outline:none;
  font-family:inherit;
}

#alrashdiApp .btn:hover,
#alrashdiApp .btn:focus{ 
  transform: translateY(-1px); 
  outline:none;
}

#alrashdiApp .btn.primary{
  border-color:rgba(29,78,216,.35);
  background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(220,38,38,.88));
  color:#fff;
  box-shadow: 0 18px 40px rgba(29,78,216,.22);
}

/* Mobile nav */
#alrashdiApp .burger{
  display:none;
  width:44px; 
  height:44px; 
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(29,78,216,.18);
  background:rgba(29,78,216,.06);
  align-items:center; 
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow2);
  outline:none;
}

#alrashdiApp .burger span{
  width:20px; 
  height:2px; 
  background:rgba(11,27,43,.78);
  position:relative; 
  display:block; 
  border-radius:999px;
  transition:transform 0.3s ease;
}

#alrashdiApp .burger span:before,
#alrashdiApp .burger span:after{
  content:""; 
  position:absolute; 
  left:0; 
  right:0;
  height:2px; 
  border-radius:999px; 
  background:rgba(11,27,43,.78);
  transition:transform 0.3s ease;
}

#alrashdiApp .burger span:before{ 
  top:-7px; 
  transform-origin:left;
}

#alrashdiApp .burger span:after{ 
  top:7px; 
  transform-origin:left;
}

#alrashdiApp .drawer{
  position:fixed; 
  inset:0;
  background:rgba(0,0,0,.38);
  display:none; 
  z-index:1000;
  padding:18px;
}

#alrashdiApp .drawer[open]{ 
  display:block; 
  animation:fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

#alrashdiApp .drawer-panel{
  width:min(420px, 100%);
  height:100%;
  margin-right:auto;
  margin-left:0;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(11,27,43,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex; 
  flex-direction:column;
  animation:slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { transform:translateX(100%); }
  to { transform:translateX(0); }
}

#alrashdiApp .drawer-head{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(11,27,43,.10);
  background:linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,1));
  flex-shrink:0;
}

#alrashdiApp .drawer-title{ 
  font-weight:900; 
  font-size:16px; 
  margin:0;
}

#alrashdiApp .drawer-close{
  width:42px; 
  height:42px; 
  border-radius:14px;
  border:1px solid rgba(220,38,38,.18);
  background:rgba(220,38,38,.06);
  cursor:pointer;
  font-size:18px; 
  font-weight:900;
  display:flex; 
  align-items:center; 
  justify-content:center;
  outline:none;
  transition:all 0.2s ease;
}

#alrashdiApp .drawer-close:hover,
#alrashdiApp .drawer-close:focus{
  background:rgba(220,38,38,.12);
  transform:scale(1.05);
}

#alrashdiApp .drawer-nav{
  padding:12px;
  display:flex; 
  flex-direction:column; 
  gap:10px;
  overflow:auto;
  flex:1;
}

#alrashdiApp .drawer-sep{
  height:1px;
  background:rgba(11,27,43,.10);
  margin:6px 2px;
  border-radius:999px;
}

#alrashdiApp .drawer-nav li{ list-style:none; margin:0; padding:0; }

#alrashdiApp .drawer-nav a{
  padding:12px 12px; 
  border-radius:16px;
  border:1px solid rgba(11,27,43,.10);
  background:rgba(29,78,216,.04);
  color:rgba(11,27,43,.86);
  font-weight:900;
  font-size:14px;
  transition:all 0.2s ease;
}

#alrashdiApp .drawer-nav a:hover,
#alrashdiApp .drawer-nav a:focus{
  background:rgba(29,78,216,.08);
  border-color:rgba(29,78,216,.22);
  transform:translateX(-4px);
  outline:none;
}

/* Hero */
#alrashdiApp .hero{ 
  padding: 46px 0 26px; 
  position:relative;
}

#alrashdiApp .hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:stretch;
}

#alrashdiApp .hero-card{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70)),
    radial-gradient(620px 320px at 25% 10%, rgba(29,78,216,.14), transparent 60%),
    radial-gradient(520px 260px at 80% 50%, rgba(220,38,38,.10), transparent 60%);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  overflow:hidden;
  position:relative;
}

#alrashdiApp .kicker{
  display:inline-flex; 
  align-items:center; 
  gap:10px;
  padding:8px 12px; 
  border-radius:999px;
  border:1px solid rgba(29,78,216,.20);
  background:rgba(29,78,216,.06);
  color:rgba(11,27,43,.85);
  font-weight:900; 
  font-size:12px;
  margin-bottom:0;
}

#alrashdiApp .hero h2{
  margin:14px 0 10px 0;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing:.2px;
  font-weight:900;
}

#alrashdiApp .hero p{
  margin:10px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
  max-width: 60ch;
}

#alrashdiApp .hero-actions{
  display:flex; 
  gap:12px; 
  flex-wrap:wrap;
  margin-top:18px;
}

#alrashdiApp .hero-side{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}

/* Showcase slider */
#alrashdiApp .showcase{
  border-radius: 18px;
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  min-height: 250px;
}

#alrashdiApp .slides{
  position:relative;
  height: 240px;
  overflow:hidden;
  border-radius: 16px;
}

#alrashdiApp .slide{
  position:absolute; 
  inset:0;
  opacity:0; 
  transform: scale(1.02);
  transition: opacity .65s ease, transform 1.1s ease;
  pointer-events:none;
}

#alrashdiApp .slide[aria-hidden="false"]{
  opacity:1; 
  transform: scale(1.00);
  pointer-events:auto;
}

#alrashdiApp .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 16px;
}

#alrashdiApp .slides:after{
  content:"";
  position:absolute; 
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.40));
  pointer-events:none;
  border-radius: 16px;
}

#alrashdiApp .slide-cap{
  position:absolute; 
  bottom:12px; 
  right:12px; 
  left:12px;
  color:#fff;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:12px;
  z-index:2;
}

#alrashdiApp .slide-cap .cap-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
#alrashdiApp .slide-desc{font-size:12px;line-height:1.5;opacity:.92;max-width:64ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow: 0 14px 30px rgba(0,0,0,.35);}

#alrashdiApp .slide-cap b{
  font-size:14px; 
  font-weight:900;
  text-shadow: 0 14px 30px rgba(0,0,0,.35);
}

#alrashdiApp .dots{ 
  display:flex; 
  gap:6px; 
  flex-shrink:0;
}

#alrashdiApp .dot{
  width:10px; 
  height:10px; 
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.25);
  cursor:pointer;
  transition:all .18s ease;
  outline:none;
}

#alrashdiApp .dot[aria-current="true"]{ 
  background:#fff; 
  transform: scale(1.08); 
}

#alrashdiApp .dot:hover,
#alrashdiApp .dot:focus{
  background:rgba(255,255,255,.5);
  transform:scale(1.1);
}

#alrashdiApp section{ 
  padding: 22px 0; 
  position:relative;
}

#alrashdiApp .section-title{
  display:flex; 
  align-items:flex-end; 
  justify-content:space-between; 
  gap:12px;
  margin-bottom: 14px;
  flex-wrap:wrap;
}

#alrashdiApp .section-title h3{ 
  font-size:22px; 
  font-weight:900; 
  margin:0;
}

#alrashdiApp .section-title p{
  color: var(--muted); 
  font-size:13px; 
  line-height:1.6; 
  max-width:56ch;
  margin:0;
}

#alrashdiApp .grid{ 
  display:grid; 
  gap:14px; 
  width:100%;
}

#alrashdiApp .grid.cards{ grid-template-columns: repeat(4, 1fr); }
#alrashdiApp .grid.branches{ grid-template-columns: repeat(3, 1fr); gap:16px; }
#alrashdiApp .grid.news{ grid-template-columns: repeat(3, 1fr); }
#alrashdiApp .grid.gallery{ grid-template-columns: repeat(4, 1fr); }

/* ====================================================
   ✅ Archive: Documents / Media Library grid
   - كان ينقصه تعريف grid لذلك كانت الكروت تظهر بعرض الصفحة (وتصير ضخمة)
   ==================================================== */
#alrashdiApp .alr-cards-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, 1fr);
  width:100%;
}

/* تقليل إحساس "الضخامة" حتى لو كانت الصورة كبيرة */
#alrashdiApp .alr-cards-grid .media{ 
  aspect-ratio: 16 / 9;
}

#alrashdiApp .alr-cards-grid .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ====================================================
   ✅ قسم الفروع - معدل ومصحح بالكامل (Horizontal Scroller)
   ==================================================== */
#alrashdiApp .branches-scroller{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 auto;
  padding:5px 0 20px;
}

#alrashdiApp .branches-track{
  flex:1;
  display:flex;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:10px 5px 20px;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
  width:100%;
}

#alrashdiApp .branches-track::-webkit-scrollbar{ 
  display:none; 
  height:0;
}

#alrashdiApp .branches-track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

/* حجم الكرت ثابت تماماً */
#alrashdiApp .branches-track .branch-card{
  flex:0 0 280px !important; /* عرض ثابت */
  min-width:280px !important;
  max-width:280px !important;
  width:280px !important;
  height:250px !important; /* ارتفاع ثابت */
  min-height:250px !important;
  max-height:250px !important;
  scroll-snap-align:start;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(11,27,43,0.1);
  background:#fff;
  box-shadow:0 8px 24px rgba(11,27,43,0.1);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  flex-direction:column;
  margin:0 !important;
  padding:0 !important;
}

#alrashdiApp .branches-track .branch-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 40px rgba(11,27,43,0.15);
  border-color:rgba(29,78,216,0.2);
}

/* قسم الصورة داخل الكرت - حجم ثابت */
#alrashdiApp .branch-card .media{
  width:100% !important;
  height:150px !important;
  min-height:150px !important;
  max-height:150px !important;
  border-radius:0 !important;
  border:none !important;
  margin:0 !important;
  overflow:hidden !important;
  position:relative;
  flex-shrink:0;
}

#alrashdiApp .branch-card .media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform 0.5s ease;
}

#alrashdiApp .branch-card:hover .media img{
  transform:scale(1.05);
}

#alrashdiApp .branch-card .media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.55));
  pointer-events:none;
}

/* معلومات الفرع */
#alrashdiApp .branch-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px 14px;
  color:#fff;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  z-index:2;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
}

#alrashdiApp .branch-overlay h4{
  font-size:14px !important;
  font-weight:900;
  text-shadow:0 10px 24px rgba(0,0,0,0.4);
  margin:0;
  line-height:1.3;
  flex:1;
}

#alrashdiApp .branch-overlay p{
  margin-top:4px;
  font-size:11px !important;
  line-height:1.5;
  color:rgba(255,255,255,0.9);
  text-shadow:0 10px 24px rgba(0,0,0,0.3);
  margin-bottom:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#alrashdiApp .branch-chip{
  padding:6px 10px !important;
  border-radius:999px;
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-weight:900;
  font-size:10px !important;
  white-space:nowrap;
  flex-shrink:0;
  height:fit-content;
}

/* أزرار التمرير - محسنة */
#alrashdiApp .scroll-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:14px !important;
  border:1px solid rgba(11,27,43,0.12) !important;
  background:rgba(255,255,255,0.95) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:0 12px 32px rgba(11,27,43,0.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-size:20px !important;
  font-weight:900 !important;
  color:rgba(11,27,43,0.86) !important;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  z-index:10 !important;
  outline:none !important;
  flex-shrink:0 !important;
  position:relative !important;
}

#alrashdiApp .scroll-btn:hover,
#alrashdiApp .scroll-btn:focus{
  transform:translateY(-2px) scale(1.05) !important;
  border-color:rgba(29,78,216,0.25) !important;
  box-shadow:0 16px 36px rgba(29,78,216,0.18) !important;
  background:rgba(255,255,255,1) !important;
}

#alrashdiApp .scroll-btn:active{
  transform:translateY(0) scale(0.98) !important;
}

#alrashdiApp .scroll-btn:disabled{
  opacity:0.3 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:0 6px 20px rgba(11,27,43,0.08) !important;
}

#alrashdiApp .scroll-btn.prev{ 
  margin-right:auto; 
}

#alrashdiApp .scroll-btn.next{ 
  margin-left:auto; 
}

/* More news */
#alrashdiApp .more-wrap{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#alrashdiApp .more-wrap .note{ 
  color:var(--muted); 
  font-size:12px; 
  margin:0;
}

/* Fluent Forms wrapper */
#alrashdiApp .ff-wrap{ 
  margin-top: 10px; 
  width:100%;
}

#alrashdiApp .card{
  border-radius: var(--radius);
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
  padding: 16px 16px;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, border-color .18s ease;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}

#alrashdiApp .card:hover{ 
  transform: translateY(-2px); 
  border-color: rgba(29,78,216,.22); 
}

#alrashdiApp .tag{
  display:inline-flex; 
  gap:8px; 
  align-items:center;
  font-size:11px; 
  color:var(--blue);
  font-weight:900; 
  letter-spacing:.2px; 
  margin-bottom:10px;
}

#alrashdiApp .card h4{ 
  font-size:16px; 
  font-weight:900; 
  margin-bottom:8px; 
  line-height:1.3;
}

#alrashdiApp .card p{ 
  color:var(--muted); 
  font-size:13px; 
  line-height:1.85; 
  margin-bottom:10px;
  flex:1;
}

#alrashdiApp .link{
  margin-top:12px;
  display:inline-flex; 
  align-items:center; 
  gap:8px;
  color: rgba(11,27,43,.90);
  font-weight:900; 
  font-size:13px;
  transition:gap 0.2s ease;
}

#alrashdiApp .link:hover{
  gap:12px;
  color:var(--blue);
}

/* Buttons (used in Documents/Media library) */
#alrashdiApp .alr-btn{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.92);
  color: rgba(11,27,43,.92);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(11,27,43,.08);
  transition: .18s ease;
}
#alrashdiApp .alr-btn:hover{ transform: translateY(-1px); border-color: rgba(29,78,216,.25); }
#alrashdiApp .alr-btn:active{ transform: translateY(0); }

/* Media Library tweaks */
#alrashdiApp .media.media--book{ aspect-ratio: 4 / 5; }
#alrashdiApp .alr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#alrashdiApp .alr-btn__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#alrashdiApp .alr-btn__ico .alr-ico{ width:18px; height:18px; }
#alrashdiApp .alr-play .alr-ico{ width:34px; height:34px; }

#alrashdiApp .alr-btn--soft{ background: rgba(29,78,216,.06); }

#alrashdiApp .media{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(11,27,43,.10);
  overflow:hidden;
  background: rgba(29,78,216,.05);
  box-shadow:none;
  position:relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

#alrashdiApp .media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform 0.3s ease;
}

/* Media library: video card play overlay */
#alrashdiApp .media.alr-video{
  position:relative;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
#alrashdiApp .media.alr-video .alr-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size:22px;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}
#alrashdiApp .media.alr-video:hover .alr-play{ background:rgba(0,0,0,.62); }

/* Video embeds inside cards */
#alrashdiApp .media iframe,
#alrashdiApp .media embed,
#alrashdiApp .media video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Filters pills (Documents/Media) */
#alrashdiApp .alr-filters{ 
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

#alrashdiApp .alr-pill{
  appearance:none;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(11,27,43,.08);
  transition: transform .18s ease, border-color .18s ease;
}

#alrashdiApp .alr-pill:hover{ transform: translateY(-1px); border-color: rgba(29,78,216,.22); }
#alrashdiApp .alr-pill.is-active{ border-color: rgba(29,78,216,.38); box-shadow: 0 16px 34px rgba(29,78,216,.10); }

/* Author button */
#alrashdiApp .alr-author-btn{
  border:0;
  background:transparent;
  color: var(--blue);
  font-weight:900;
  cursor:pointer;
  padding:0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Modal */
#alrashdiApp .alr-modal{ display:none; }
#alrashdiApp .alr-modal[aria-hidden="false"]{ 
  display:block;
  position:fixed;
  inset:0;
  z-index:99999;
}
#alrashdiApp .alr-modal[aria-hidden="false"] .alr-modal__backdrop{
  animation: alrFadeIn .18s ease both;
}
#alrashdiApp .alr-modal[aria-hidden="false"] .alr-modal__panel{
  animation: alrPop .22s cubic-bezier(.2,.9,.2,1) both;
}
#alrashdiApp .alr-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
#alrashdiApp .alr-modal__panel{
  position:relative;
  width:min(680px, calc(100% - 24px));
  margin: 8vh auto;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  border:1px solid rgba(11,27,43,.12);
  box-shadow: 0 28px 70px rgba(11,27,43,.28);
  overflow:hidden;
}
#alrashdiApp .alr-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11,27,43,.10);
  background: linear-gradient(180deg, rgba(244,246,247,.9), rgba(255,255,255,0));
}
#alrashdiApp .alr-modal__body{ padding: 14px 16px 18px; }
#alrashdiApp .alr-modal__close{
  width:38px;
  height:38px;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  font-weight:900;
  cursor:pointer;
  transition: .18s ease;
}
#alrashdiApp .alr-modal__close:hover{ transform: translateY(-1px); border-color: rgba(29,78,216,.25); }

/* Modal typography (for Book details) */
#alrashdiApp .alr-section-title{
  font-weight: 900;
  margin: 12px 0 8px;
  color: rgba(11,27,43,.92);
}
#alrashdiApp .alr-rich{ line-height: 1.95; }
#alrashdiApp .alr-rich p{ margin: 0 0 10px; }
#alrashdiApp .alr-rich p:last-child{ margin-bottom:0; }
#alrashdiApp .alr-rich ul{ margin: 0 18px 10px 0; padding: 0 18px 0 0; }
#alrashdiApp .alr-rich li{ margin: 0 0 6px; }

/* Buy buttons in book modal */
#alrashdiApp .alr-buy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(11,27,43,.08);
  transition:.18s ease;
}
#alrashdiApp .alr-buy-btn:hover{ transform: translateY(-1px); border-color: rgba(29,78,216,.25); }

@keyframes alrFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes alrPop{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{ opacity:1; transform: translateY(0) scale(1);} }

#alrashdiApp .thumb{
  border-radius: 18px;
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  box-shadow: var(--shadow2);
  transition:.18s ease;
  cursor:pointer;
  height:100%;
  display:flex;
  flex-direction:column;
}

#alrashdiApp a.thumb{ text-decoration:none; color:inherit; }


#alrashdiApp .thumb:hover{ 
  transform: translateY(-2px); 
  border-color: rgba(29,78,216,.22); 
}

#alrashdiApp .thumb img{ 
  width:100%; 
  height:210px; 
  object-fit:cover; 
  flex-shrink:0;
}

/* ✅ ألبوم الصور: لا نقصّ الصورة داخل المصغرات */
#alrashdiApp .grid.gallery .thumb img{
  object-fit: contain;
  background: #fff;
}



#alrashdiApp .thumb .cap{
  padding: 10px 12px;
  font-weight:900; 
  font-size:13px;
  color: var(--text);
  background: rgba(255,255,255,.95);
  border-top:1px solid rgba(11,27,43,.10);
  flex:1;
}

#alrashdiApp .ann-wrap{
  border-radius: var(--radius2);
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}

#alrashdiApp .ann-head{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:12px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,.92));
  border-bottom:1px solid rgba(11,27,43,.10);
  flex-wrap:wrap;
}

#alrashdiApp .ann-head h4{ 
  font-size:16px; 
  font-weight:900; 
  margin:0;
}

#alrashdiApp .tabs{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  justify-content:flex-start; 
}

#alrashdiApp .tab{
  padding:10px 12px; 
  min-height:44px;
  border-radius: 999px;
  border:1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.06);
  color: var(--text);
  font-weight:900; 
  font-size:12px;
  cursor:pointer; 
  user-select:none;
  transition:all .15s ease;
  outline:none;
}

#alrashdiApp .tab[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(29,78,216,.14), rgba(255,255,255,.92));
  border-color: rgba(29,78,216,.30);
  box-shadow: 0 12px 24px rgba(29,78,216,.10);
}

#alrashdiApp .tab:hover,
#alrashdiApp .tab:focus{
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.25);
  outline:none;
}

#alrashdiApp .ann-body{ 
  padding: 14px; 
}

#alrashdiApp .ann-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 420px;
  overflow:auto;
  padding: 2px;
  scrollbar-gutter: stable;
}

#alrashdiApp .ann{
  border-radius: 18px;
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.95);
  padding: 14px 14px;
  box-shadow: var(--shadow2);
}

#alrashdiApp .ann .type{
  display:inline-flex; 
  align-items:center; 
  gap:8px;
  font-weight:900; 
  font-size:11px;
  padding:7px 10px; 
  border-radius:999px;
  background: rgba(29,78,216,.06);
  border:1px solid rgba(29,78,216,.16);
  margin-bottom: 10px;
}

#alrashdiApp .ann h5{ 
  font-size:14px; 
  font-weight:900; 
  margin-bottom:6px; 
  line-height:1.3;
}

#alrashdiApp .ann p{ 
  color: var(--muted); 
  font-size:13px; 
  line-height:1.8; 
  margin-bottom:0;
}

#alrashdiApp .ann .meta{
  margin-top: 10px;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:10px;
  font-family: Inter, system-ui, sans-serif;
  font-size:12px; 
  direction:ltr;
  color: rgba(11,27,43,.60);
}

#alrashdiApp .form-card{
  border-radius: 22px;
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 16px 16px;  direction:rtl;
}


#alrashdiApp .form-card h4{ 
  font-size:16px; 
  font-weight:900; 
  margin-bottom:6px; 
}

#alrashdiApp .form-card p{ 
  color:var(--muted); 
  font-size:13px; 
  line-height:1.8; 
  margin-bottom:12px; 
}

#alrashdiApp .row{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:10px; 
}

#alrashdiApp .field{ 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
}

#alrashdiApp label{ 
  font-size:12px; 
  font-weight:800; 
  color: rgba(11,27,43,.85); 
  margin:0;
}

#alrashdiApp input, #alrashdiApp select, #alrashdiApp textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.12);
  background:#fff;
  font: inherit;
  font-size:13px;
  outline:none;
  transition:.15s ease;
  font-family:inherit;
}

#alrashdiApp textarea{ 
  min-height: 110px; 
  resize: vertical; 
  font-family:inherit;
}

#alrashdiApp input:focus, #alrashdiApp select:focus, #alrashdiApp textarea:focus{
  border-color: rgba(29,78,216,.35);
  box-shadow: 0 0 0 4px rgba(29,78,216,.10);
  outline:none;
}

#alrashdiApp .form-actions{ 
  margin-top:12px; 
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
  align-items:center; 
  justify-content:flex-start; 
}

#alrashdiApp .note{ 
  color: rgba(11,27,43,.58); 
  font-size:12px; 
  line-height:1.7; 
  margin:0;
}

#alrashdiApp footer{
  margin-top: 24px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  padding: 22px 0 26px;
}

#alrashdiApp .foot{ 
  display:grid; 
  grid-template-columns: 1.2fr .8fr; 
  gap: 18px; 
  align-items:start; 
}

#alrashdiApp .foot p{ 
  color:var(--muted); 
  font-size:13px; 
  line-height:1.8; 
  margin:0 0 1em 0;
}

#alrashdiApp .links{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px; 
  justify-content:flex-start; 
}

#alrashdiApp .pill{
  padding:10px 12px; 
  min-height:44px;
  border-radius: 999px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(29,78,216,.04);
  color: rgba(11,27,43,.88);
  font-weight:900; 
  font-size:12px;
  transition:all 0.2s ease;
}

#alrashdiApp .pill:hover{
  background: rgba(29,78,216,.08);
  border-color: rgba(29,78,216,.22);
  transform:translateY(-1px);
}

#alrashdiApp .copy{
  margin-top: 12px;
  color: rgba(11,27,43,.55);
  font-size:12px;
  font-family: Inter, system-ui, sans-serif;
  direction:ltr;
  text-align:right;
  padding-top:12px;
  border-top:1px solid rgba(11,27,43,.08);
}

/* Reveal */
#alrashdiApp .reveal{ 
  opacity:0; 
  transform: translateY(14px); 
  transition: opacity .55s ease, transform .55s ease; 
}

#alrashdiApp .reveal.is-in{ 
  opacity:1; 
  transform:none; 
}

/* Back to top */
#alrashdiApp .topbtn{
  position:fixed;
  left:18px; 
  bottom:18px;
  width:46px; 
  height:46px;
  border-radius:16px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  display:flex; 
  align-items:center; 
  justify-content:center;
  cursor:pointer;
  opacity:0; 
  pointer-events:none;
  transform: translateY(10px);
  transition: all .18s ease;
  z-index: 1200;
  font-weight:900;
  outline:none;
}

#alrashdiApp .topbtn.show{ 
  opacity:1; 
  pointer-events:auto; 
  transform:none; 
}

#alrashdiApp .topbtn:hover,
#alrashdiApp .topbtn:focus{
  background: rgba(255,255,255,.98);
  transform:translateY(-2px);
  box-shadow:0 18px 46px rgba(11,27,43,.16);
}

/* Forms row */
#alrashdiApp .forms-row{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:14px; 
  align-items:start;   direction:ltr;
}

/* Right column stack in Community Forms */
#alrashdiApp .forms-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}


/* Responsive */
@media (max-width: 1024px){
  #alrashdiApp .hero h2{
    font-size:36px;
  }
  
  #alrashdiApp .grid.cards{ 
    grid-template-columns: repeat(3, 1fr); 
  }

  #alrashdiApp .alr-cards-grid{ 
    grid-template-columns: repeat(2, 1fr);
  }
  
  #alrashdiApp .grid.gallery{ 
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (max-width: 980px){
  #alrashdiApp .hero-grid{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .menu{ 
    display:none !important; 
  }
  
  #alrashdiApp .burger{ 
    display:inline-flex; 
  }
  
  #alrashdiApp .grid.cards{ 
    grid-template-columns: repeat(2, 1fr); 
  }

  #alrashdiApp .alr-cards-grid{ 
    grid-template-columns: repeat(2, 1fr);
  }
  
  #alrashdiApp .grid.branches{ 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  /* تعديل حجم الكروت في الفروع للجوال */
  #alrashdiApp .branches-track .branch-card{
    flex:0 0 240px !important;
    min-width:240px !important;
    max-width:240px !important;
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }
  
  #alrashdiApp .branch-card .media{
    height:130px !important;
    min-height:130px !important;
    max-height:130px !important;
  }
  
  #alrashdiApp .grid.news{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .grid.gallery{ 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  #alrashdiApp .ann-grid{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .foot{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .row{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .forms-row{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .scroll-btn{
    display:flex !important;
  }
}

@media (max-width: 560px){
  #alrashdiApp .alr-cards-grid{ 
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px){
  #alrashdiApp .hero h2{ 
    font-size: 32px; 
  }
  
  #alrashdiApp .branches-track .branch-card{
    flex:0 0 220px !important;
    min-width:220px !important;
    max-width:220px !important;
    height:200px !important;
    min-height:200px !important;
    max-height:200px !important;
  }
  
  #alrashdiApp .branch-card .media{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
  }
}

@media (max-width: 640px){
  #alrashdiApp .hero h2{ 
    font-size: 28px; 
  }
  
  #alrashdiApp .hero p{
    font-size:14px;
  }
  
  #alrashdiApp .grid.cards{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .grid.branches{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .branches-track .branch-card{
    flex:0 0 200px !important;
    min-width:200px !important;
    max-width:200px !important;
    height:180px !important;
    min-height:180px !important;
    max-height:180px !important;
  }
  
  #alrashdiApp .branch-card .media{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
  }
  
  #alrashdiApp .grid.gallery{ 
    grid-template-columns: 1fr; 
  }
  
  #alrashdiApp .thumb img{ 
    height: 190px; 
  }
  
  #alrashdiApp .brand{ 
    min-width: unset; 
  }
  
  #alrashdiApp .cta{ 
    min-width: unset; 
    gap:8px; 
  }
  
  #alrashdiApp .cta .btn{ 
    padding:10px 10px; 
  }
  
  #alrashdiApp .forms-row{ 
    grid-template-columns: 1fr; 
  }
  
  /* إخفاء أزرار التمرير في الشاشات الصغيرة */
  #alrashdiApp .scroll-btn{
    display:none !important;
  }
}

@media (max-width: 480px){
  #alrashdiApp .wrap{
    padding:0 15px;
  }
  
  #alrashdiApp .hero h2{ 
    font-size: 24px; 
  }
  
  #alrashdiApp .branches-track .branch-card{
    flex:0 0 180px !important;
    min-width:180px !important;
    max-width:180px !important;
    height:160px !important;
    min-height:160px !important;
    max-height:160px !important;
  }
  
  #alrashdiApp .branch-card .media{
    height:90px !important;
    min-height:90px !important;
    max-height:90px !important;
  }
  
  #alrashdiApp .section-title h3{
    font-size:18px;
  }
  
  #alrashdiApp .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  
  #alrashdiApp .hero-actions .btn,
  #alrashdiApp .forms-row .btn,
  #alrashdiApp #announcements .btn,
  #alrashdiApp .btn.block{
    width:100%;
    justify-content:center;
  }

  #alrashdiApp .topbar .btn{
    width:auto;
  }
}

/* تحسينات الوصول والتفاعل */
@media (hover: none) and (pointer: coarse){
  #alrashdiApp .menu a:hover{
    transform:none;
  }
  
  #alrashdiApp .btn:hover{
    transform:none;
  }
  
  #alrashdiApp .card:hover{
    transform:none;
  }
  
  #alrashdiApp .branch-card:hover{
    transform:none;
  }
}

/* طباعة */
@media print{
  #alrashdiApp .topbar,
  #alrashdiApp .burger,
  #alrashdiApp .scroll-btn,
  #alrashdiApp .topbtn{
    display:none !important;
  }
  
  #alrashdiApp{
    background:none;
  }
  
  #alrashdiApp .card,
  #alrashdiApp .hero-card{
    box-shadow:none;
    border:1px solid #ddd;
  }
}
/* =========================================================
   ✅ Branches Archive: Horizontal Slider (Desktop + Mobile)
   - Forces horizontal layout + arrows.
   ========================================================= */
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-wrap{
  position:relative;
}

body.post-type-archive-alr_branch #alrashdiApp .alr-branches-track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:16px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:10px 56px !important; /* space for arrows */
  scrollbar-width:none;
}
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-track::-webkit-scrollbar{display:none;}

body.post-type-archive-alr_branch #alrashdiApp .alr-branch-card{
  flex:0 0 320px !important;
  width:320px !important;
  max-width:320px !important;
  scroll-snap-align:start;
}

@media (max-width: 520px){
  body.post-type-archive-alr_branch #alrashdiApp .alr-branches-track{
    padding:10px 44px !important;
  }
  body.post-type-archive-alr_branch #alrashdiApp .alr-branch-card{
    flex-basis:82vw !important;
    width:82vw !important;
    max-width:82vw !important;
  }
}

body.post-type-archive-alr_branch #alrashdiApp .alr-branches-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(11,27,43,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10;
}
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-arrow:hover{background:rgba(255,255,255,.96);}
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-arrow.is-left{left:10px;}
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-arrow.is-right{right:10px;}

/* Prevent any global button styles from breaking arrow */
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-arrow{
  padding:0 !important;
  line-height:1 !important;
  font-size:22px !important;
}


/* ===== Branches Slider (Transform-based, RTL-proof) ===== */
body.post-type-archive-alr_branch .alr-branches-viewport{
  overflow: hidden;
  position: relative;
}

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

@media (max-width: 1100px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}

body.post-type-archive-alr_branch .alr-branch-card{
  /* ضمان تمدد الكرت بشكل مرتب */
  min-height: 0;
}

/* إطار الصورة الداخلي مثل تصميم "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-card-media{
  background: #f4f6ff;
  border: 2px solid rgba(11,27,43,.10);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* مستطيل — غيّره إلى 4/3 لو تبي أطول */
}

body.post-type-archive-alr_branch .alr-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* إلغاء أي سلوك سحب/تمرير أفقي قديم */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track{
  overflow: visible !important;
  transform: none !important;
}

body.post-type-archive-alr_branch .alr-branches-arrow{
  display:none !important;
}
body.post-type-archive-alr_branch .alr-branches-track{
  display: flex;
  gap: 16px;
  will-change: transform;
  transform: translateX(0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
body.post-type-archive-alr_branch .alr-branches-track.is-dragging{
  cursor: default;
}
body.post-type-archive-alr_branch .alr-branches-viewport{ cursor: default; }

/* كرت الفرع: ثبات العرض عشان السلايدر يحسب خطوة واضحة */
body.post-type-archive-alr_branch .alr-branch-card{
  flex: 0 0 320px;
}
@media (max-width: 520px){
  body.post-type-archive-alr_branch .alr-branch-card{ flex-basis: 82vw; }
}

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

/* Tablet */
@media (max-width: 1100px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Mobile */
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(1, minmax(0,1fr)); }
}

/* صورة الفرع داخل إطار مثل تصميم "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  padding:14px;
  background:transparent;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:auto;
  display:block;
  background:#f4f6ff;
  border:2px solid rgba(11,27,43,.10);
  border-radius:18px;
  aspect-ratio: 16 / 9; /* مستطيل — غيّره إلى 4/3 لو تبيه أطول */
  object-fit:cover;
}

/* تأكيد عدم وجود تمرير أفقي */
body.post-type-archive-alr_branch .alr-branches-grid,
body.post-type-archive-alr_branch #alrashdiApp{
  overflow-x:hidden;
}

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

/* تابلت */
@media (max-width: 1100px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* جوال */
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}

/* إطار الصورة داخل الكرت (نفس الروح لكن مستطيل) */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background: rgba(29,78,216,0.04);
  border: 2px solid rgba(11,27,43,.10);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* مستطيل: غيّره إلى 4/3 لو تبيه أطول */
  margin: 6px 0 14px;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* تأكيد: لا يوجد سكرول/سحب للفروع بعد الآن */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track{
  overflow: visible !important;
}
body.post-type-archive-alr_branch .alr-branches-arrow{ display:none !important; }

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

/* تأكد من إلغاء أي أنماط سلايدر قديمة (احتياط) */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track,
body.post-type-archive-alr_branch .alr-branches-arrow{ display:none !important; }

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  margin-top:14px;
}

@media (max-width: 1100px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}

/* إطار الصورة الداخلي مثل تصميم "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background:rgba(29,78,216,0.06);
  border:2px solid rgba(11,27,43,0.10);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio: 16 / 9; /* مستطيل */
  display:block;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* تحسينات على كرت الفرع عشان يكون قريب من كروت "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

body.post-type-archive-alr_branch .alr-branch-card h4{ margin:0; }
body.post-type-archive-alr_branch .alr-branch-card p{ margin:0; }

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

/* تأكد من إلغاء أي أنماط سلايدر قديمة (احتياط) */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track,
body.post-type-archive-alr_branch .alr-branches-arrow{
  display:none !important;
}

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

/* تابلت */
@media (max-width: 1100px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* جوال */
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:1fr;
  }
}

/* إطار الصورة داخل الكرت (زي تصميم نبذة مختصرة) */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background:#f4f6ff;
  border:2px solid rgba(11,27,43,.10);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:16 / 9; /* مستطيل */
  display:block;
  margin-bottom:14px;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* تنعيم الكروت قليلاً لتقارب تصميم "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card{
  padding:18px;
}

/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

/* تأكد من إلغاء أي أنماط سلايدر قديمة (احتياط) */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track,
body.post-type-archive-alr_branch .alr-branches-arrow{
  all: unset;
  display: none !important;
}

body.post-type-archive-alr_branch .alr-branches-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* استجابة للشاشات */
@media (max-width: 1200px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px){
  body.post-type-archive-alr_branch .alr-branches-grid{ grid-template-columns: 1fr; }
}

/* إطار الصورة الداخلي (نفس الروح اللي بالصورة) */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background: #f4f6ff;
  border: 2px solid rgba(11,27,43,.10);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* مستطيل */
  display: block;
  margin-bottom: 12px;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* تحسين كرت الفرع ليكون قريب من "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card{
  padding: 18px;
}

body.post-type-archive-alr_branch .alr-branch-card h4{
  margin-top: 8px;
}


/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

/* تأكد من إلغاء أي أنماط سلايدر قديمة (احتياط) */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track,
body.post-type-archive-alr_branch .alr-branches-arrow{
  display:none !important;
}

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

@media (max-width: 1200px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }
}

/* كرت الفرع: نفس هوية "نبذة مختصرة" */
body.post-type-archive-alr_branch .alr-branch-card{
  padding:18px;
}

/* إطار الصورة الداخلي */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background:rgba(29,78,216,0.06);
  border:2px solid rgba(11,27,43,0.10);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio: 16 / 9; /* مستطيل */
  margin-bottom:14px;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* === ALR BRANCH GRID OVERRIDE v14 === */


/* =========================================================
   ✅ فروع القبيلة — Grid ثابت (بدون سكرول)
   - 5 كروت في الصف على الديسكتوب (صفّين = 10 فروع)
   - نفس روح تصميم "نبذة مختصرة" مع إطار صورة داخلي (مستطيل)
   ========================================================= */

/* تأكد من إلغاء أي أنماط سلايدر قديمة (احتياط) */
body.post-type-archive-alr_branch .alr-branches-wrap,
body.post-type-archive-alr_branch .alr-branches-viewport,
body.post-type-archive-alr_branch .alr-branches-track,
body.post-type-archive-alr_branch .alr-branches-arrow{
  display:none !important;
}

body.post-type-archive-alr_branch .alr-branches-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  overflow:visible !important;
}

@media (max-width: 1200px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px){
  body.post-type-archive-alr_branch .alr-branches-grid{
    grid-template-columns:1fr;
  }
}

/* إطار الصورة الداخلي (مثل تصميم نبذة مختصرة) */
body.post-type-archive-alr_branch .alr-branch-card .alr-card-media{
  background:#f4f6ff;
  border:2px solid rgba(11,27,43,.10);
  border-radius:18px;
  overflow:hidden;
  padding:12px;
}

body.post-type-archive-alr_branch .alr-branch-card .alr-card-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  aspect-ratio: 16 / 9;   /* مستطيل */
  object-fit:cover;
  background:#e9edf7;
}

/* مسافات داخل الكرت أقرب لستايل نبذة مختصرة */
body.post-type-archive-alr_branch .alr-branch-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}


/* =========================================================
   ✅ Home Branches Grid (بدون سكرول) — نفس ستايل "نبذة مختصرة"
   - 5 فوق + 5 تحت (10 فروع) على الديسكتوب
   ========================================================= */
#alrashdiApp #branches .home-branches-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

@media (max-width: 1100px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}

/* إطار الصورة الداخلي (مستطيل) */
#alrashdiApp #branches .alr-card-media{
  background:#f4f6ff;
  border:2px solid rgba(11,27,43,.10);
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:16 / 9;
  margin-bottom:12px;
}
#alrashdiApp #branches .alr-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* إلغاء أي تأثير سحب/تمرير قديم داخل قسم الفروع */
#alrashdiApp #branches .branches-scroller,
#alrashdiApp #branches .branches-track,
#alrashdiApp #branches .scroll-btn{
  display:none !important;
}

/* =========================================================
   ✅ FINAL FIX (v18.1) — فروع القبيلة (الرئيسية + صفحة الأرشيف)
   المشكلة اللي كانت تصير على اللابتوب/الآيباد:
   - قواعد مكررة في الملف كانت تلغي الـ grid أو تفك قيود الصورة
   - صورة الفرع كانت تتمدد بطول غير طبيعي

   الحل هنا مقصود أنه يكون "آخر" شيء بالملف + أقوى أولوية ( !important )
   ========================================================= */

/* --- Archive: /branches (post-type-archive-alr_branch) --- */
body.post-type-archive-alr_branch #alrashdiApp .alr-branches-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* --- Home: قسم الفروع في الصفحة الرئيسية --- */
#alrashdiApp #branches .home-branches-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Responsive breakpoints (Laptop / iPad) */
@media (max-width: 1200px){
  body.post-type-archive-alr_branch #alrashdiApp .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px){
  body.post-type-archive-alr_branch #alrashdiApp .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px){
  body.post-type-archive-alr_branch #alrashdiApp .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px){
  body.post-type-archive-alr_branch #alrashdiApp .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Media frame: يمنع الصورة تكبر/تطول بشكل مزعج */
body.post-type-archive-alr_branch #alrashdiApp .alr-branch-card .alr-card-media,
#alrashdiApp #branches .alr-branch-card .alr-card-media{
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
}

body.post-type-archive-alr_branch #alrashdiApp .alr-branch-card .alr-card-media img,
#alrashdiApp #branches .alr-branch-card .alr-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =========================================================
   ✅ صفحات المقالات/الصفحات (متوافقة مع نفس الهوية)
   ========================================================= */

#alrashdiApp .alr-page{ min-height: 60vh; }

#alrashdiApp .alr-page-hero{
  padding: 22px 0 14px;
  background: radial-gradient(900px 520px at 10% 8%, rgba(29,78,216,.10), transparent 55%),
              radial-gradient(700px 420px at 90% 12%, rgba(220,38,38,.10), transparent 55%);
}

#alrashdiApp .alr-hero-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 16px 0;
}

#alrashdiApp .alr-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* =========================================================
   رمضان: Hero للأفضل + أزرار
   ========================================================= */

#alrashdiApp .alr-page-hero.alr-ramadan-hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 18px;
  background: radial-gradient(900px 520px at 10% 8%, rgba(29,78,216,.16), transparent 55%),
              radial-gradient(800px 420px at 92% 18%, rgba(16,185,129,.14), transparent 55%),
              radial-gradient(700px 420px at 70% 80%, rgba(220,38,38,.10), transparent 60%);
}

#alrashdiApp .alr-page-hero.alr-ramadan-hero::before{
  content: '';
  position: absolute;
  inset: -220px -220px -220px -220px;
  background: radial-gradient(520px 520px at 15% 30%, rgba(255,255,255,.45), transparent 60%),
              radial-gradient(420px 420px at 85% 35%, rgba(255,255,255,.36), transparent 62%);
  filter: blur(2px);
  pointer-events: none;
}

#alrashdiApp .alr-ramadan-hero-inner{
  position: relative;
  z-index: 1;
}

#alrashdiApp .alr-ramadan-hero-pills{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#alrashdiApp .alr-hero-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.70);
  color: var(--muted);
  font-size: 12px;
}
#alrashdiApp .alr-hero-pill b{
  color: var(--text);
  font-weight: 900;
}

#alrashdiApp .alr-hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.70);
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
#alrashdiApp .alr-hero-btn.primary{
  border-color: rgba(16,185,129,.26);
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(29,78,216,.95));
  color: #fff;
  box-shadow: 0 18px 40px rgba(29,78,216,.18);
}
#alrashdiApp .alr-hero-btn.ghost{
  background: rgba(255,255,255,.62);
}
#alrashdiApp .alr-hero-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
#alrashdiApp .alr-hero-btn:active{
  transform: translateY(0);
}

@media (max-width: 760px){
  #alrashdiApp .alr-hero-inner{ align-items: flex-start; flex-direction: column; }
  #alrashdiApp .alr-hero-actions{ width: 100%; }
  #alrashdiApp .alr-hero-btn{ width: 100%; }
}

#alrashdiApp .alr-post-meta{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
}

#alrashdiApp .alr-post-cover{
  margin-top: 14px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(11,27,43,.10);
  box-shadow: var(--shadow);
  background: #fff;
}

#alrashdiApp .alr-post-cover img{
  width:100%;
  height: min(48vh, 420px);
  object-fit: cover;
}

#alrashdiApp .alr-page-body{ padding: 16px 0 32px; }

#alrashdiApp .alr-content-card{
  border-radius: 26px;
  border:1px solid rgba(11,27,43,.10);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}

#alrashdiApp .alr-content{
  line-height: 2;
  font-size: 15px;
  color: var(--text);
}

#alrashdiApp .alr-content h1,
#alrashdiApp .alr-content h2,
#alrashdiApp .alr-content h3,
#alrashdiApp .alr-content h4{
  margin: 18px 0 10px;
  line-height: 1.35;
}

#alrashdiApp .alr-content p{ margin: 0 0 12px; }

#alrashdiApp .alr-share{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,27,43,.10);
}

#alrashdiApp .alr-share-title{
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 14px;
}

#alrashdiApp .alr-share-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

#alrashdiApp .alr-share-btn{
  appearance:none;
  border: 1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  cursor:pointer;
  text-decoration:none;
  box-shadow: var(--shadow2);
  transition: .15s ease;
}

#alrashdiApp .alr-share-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(29,78,216,.22);
}

#alrashdiApp .alr-share-btn .ico{
  width: 22px;
  height: 22px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.08);
  color: #1d4ed8;
}

#alrashdiApp .alr-share-btn.copied .ico{ background: rgba(22,163,74,.10); color: #16a34a; }

#alrashdiApp .alr-back-row{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }

#alrashdiApp .alr-pagination{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  font-weight: 900;
}

#alrashdiApp .alr-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 40px;
  height: 40px;
  border-radius: 14px;
  margin: 0 4px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.92);
  text-decoration:none;
  color: var(--text);
  box-shadow: var(--shadow2);
}

#alrashdiApp .alr-pagination .page-numbers.current{
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.25);
}

#alrashdiApp .alr-mini-footer{
  margin-top: 28px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(11,27,43,.10);
  background: rgba(246,248,252,.75);
}

#alrashdiApp .alr-mini-foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

#alrashdiApp .alr-mini-title{ font-weight: 1000; letter-spacing: .2px; }
#alrashdiApp .alr-mini-copy{ color: var(--muted); font-size: 12px; margin-top: 4px; }

#alrashdiApp .alr-mini-links{ display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 760px){
  #alrashdiApp .alr-hero-inner{ align-items:flex-start; flex-direction:column; }
  #alrashdiApp .alr-post-cover img{ height: 280px; }
}


/* =========================================================
   ✅ HOTFIX (v1.0.4) — إصلاح فروع القبيلة (رجّعها مثل قبل)
   المشكلة الظاهرة عندك:
   - أول فرع يطلع بصورة عملاقة وباقي الفروع تتكدس تحت بعض
   السبب غالبًا: كاش/ستايل خارجي يغلب على grid أو على إطار الصورة.
   هذا القسم يفرض Grid + كرت متناسق + صورة 16:9 بشكل قاطع.
   ========================================================= */

#alrashdiApp #branches .alr-branches-grid,
#alrashdiApp #branches .home-branches-grid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

@media (max-width: 1200px){
  #alrashdiApp #branches .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 980px){
  #alrashdiApp #branches .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 760px){
  #alrashdiApp #branches .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 480px){
  #alrashdiApp #branches .alr-branches-grid,
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns: 1fr !important; }
}

/* الكرت نفسه (يمنع أي تحويل إلى قائمة/سطر واحد) */
#alrashdiApp #branches .alr-branch-card{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  min-width:0 !important;
}

/* إطار الصورة: 16:9 + قصّ */
#alrashdiApp #branches .alr-branch-card .alr-card-media{
  position:relative !important;
  border-radius:18px !important;
  overflow:hidden !important;
  aspect-ratio:16/9 !important;
  background:#f4f6ff !important;
  border:2px solid rgba(11,27,43,.10) !important;
}

/* Fallback للمتصفحات اللي ممكن ما تطبق aspect-ratio بشكل صحيح */
@supports not (aspect-ratio: 16/9){
  #alrashdiApp #branches .alr-branch-card .alr-card-media::before{
    content:"";
    display:block;
    padding-top:56.25%;
  }
  #alrashdiApp #branches .alr-branch-card .alr-card-media > img{
    position:absolute;
    inset:0;
  }
}

#alrashdiApp #branches .alr-branch-card .alr-card-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* منع أي صور داخل محتوى الفرع (لو فيه بلوك صورة بالمحتوى) من تكسير الشكل */
#alrashdiApp #branches img{
  max-width:100% !important;
  height:auto !important;
}

/* =========================================================
   ✅ HOTFIX (v1.0.4) — إصلاح فروع القبيلة (الرئيسية)
   ========================================================= */

/* يفرض الشبكة حتى لو فيه ستايل خارجي */
#alrashdiApp #branches .home-branches-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
@media (max-width:1200px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width:980px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width:760px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:480px){
  #alrashdiApp #branches .home-branches-grid{ grid-template-columns:1fr !important; }
}

/* الكرت نفسه (يمنع تمدد غريب/تكدس) */
#alrashdiApp #branches .alr-branch-card{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  min-width:0 !important;
}

/* إطار الصورة 16:9 ويقصّ أي صورة طويلة */
#alrashdiApp #branches .alr-branch-card .alr-card-media{
  position:relative !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#f4f6ff !important;
  border:2px solid rgba(11,27,43,.10) !important;
  aspect-ratio:16/9 !important;
}

/* fallback للمتصفحات اللي ما تدعم aspect-ratio */
@supports not (aspect-ratio:16/9){
  #alrashdiApp #branches .alr-branch-card .alr-card-media{ height:0 !important; padding-top:56.25% !important; }
  #alrashdiApp #branches .alr-branch-card .alr-card-media img{ position:absolute !important; inset:0 !important; }
}

#alrashdiApp #branches .alr-branch-card .alr-card-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  max-width:100% !important;
}

/* يمنع أي ستايل يضغط المحتوى ويخليه "قائمة" */
#alrashdiApp #branches .alr-branch-card h4,
#alrashdiApp #branches .alr-branch-card p,
#alrashdiApp #branches .alr-branch-card .link{
  position:relative;
  z-index:1;
}

/* Align specific form titles */
#subscribe h4.align-left{ text-align:left; }
#submitAnnouncement h4.align-right{ text-align:right; }


/* Footer contact form: lift slightly for better alignment */
#alrashdiApp .ff-contact{ margin-top:-10px !important; }

/* Visitor counter badge (safe + minimal) */
.alr-visit-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(29,78,216,.06);
  vertical-align:middle;
}
.alr-visit-ico{ font-size:14px; line-height:1; }
.alr-visit-badge strong{ font-weight:800; }
@media (max-width:520px){
  .alr-visit-badge{ padding:2px 8px; }
}


/* ====================================================
   ✅ Media Library — Consistent Cards (Web + Mobile)
   - توحيد الارتفاعات، نسب الصور، الأزرار، وتحسين الجوال
   ==================================================== */
#alrashdiApp .alr-cards-grid{
  align-items: stretch;
  grid-auto-rows: 1fr;
}

#alrashdiApp .alr-media-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

#alrashdiApp .alr-media-card .alr-media{
  width:100%;
  border-radius: 16px;
  overflow:hidden;
  margin-bottom: 12px;
}

/* video thumb button should behave like block */
#alrashdiApp .alr-media-card .alr-media--video{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
}

#alrashdiApp .alr-media-card--video .alr-media{ aspect-ratio: 16 / 9; }
#alrashdiApp .alr-media-card--book  .alr-media{ aspect-ratio: 4 / 5; }
#alrashdiApp .alr-media-card--document .alr-media,
#alrashdiApp .alr-media-card--doc .alr-media{ aspect-ratio: 16 / 9; }

#alrashdiApp .alr-media-card h4{
  margin: 8px 0 8px;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.35em * 2);
}

#alrashdiApp .alr-media-card .alr-author{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* clamp description so cards stay consistent */
#alrashdiApp .alr-media-card .alr-desc{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
  display:-webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow:hidden;
  flex: 1;
}
#alrashdiApp .alr-media-card .alr-desc .alr-date{ font-weight: 800; }
#alrashdiApp .alr-media-card .alr-desc .alr-sep{ margin: 0 6px; opacity:.7; }

/* actions pinned to bottom */
#alrashdiApp .alr-media-card .alr-card-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-start;
}

/* unify buttons (details/play/open) */
#alrashdiApp .alr-media-card .media-play-btn,
#alrashdiApp .alr-media-card .media-details-btn{
  width:100%;
  justify-content:center;
  min-height: 44px;
  border-radius: 14px;
}

/* overlay play icon matches buttons */
#alrashdiApp .alr-play{
  width:64px;
  height:64px;
  border-radius: 999px;
  background: rgba(11,27,43,.55);
  backdrop-filter: blur(4px);
  display:grid;
  place-items:center;
}
#alrashdiApp .alr-play .alr-ico{
  width:22px;
  height:22px;
  color:#fff;
}

/* responsive grid + button sizes */
@media (max-width: 980px){
  #alrashdiApp .alr-cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #alrashdiApp .alr-cards-grid{ grid-template-columns: 1fr; gap:12px; }
  #alrashdiApp .card{ padding:14px; }
  #alrashdiApp .alr-media-card .media-play-btn,
  #alrashdiApp .alr-media-card .media-details-btn{
    min-height: 42px;
    font-size: 14px;
  }
}



/* ====================================================
   ✅ Modals: allow full scroll on mobile/desktop
   ==================================================== */
#alrashdiApp .alr-modal__panel{
  max-height: 84vh;
  display:flex;
  flex-direction:column;
}
#alrashdiApp .alr-modal__body{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}




/* ============================
   Media Library – Final UX polish
   (Scoped, no effect elsewhere)
   ============================ */
#alrashdiApp .alr-media-card .alr-media{
  /* unify visual rhythm across books/videos/docs */
  aspect-ratio: auto !important;
  height: 220px;
}
#alrashdiApp .alr-media-card .alr-media img,
#alrashdiApp .alr-media-card .alr-media video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
/* avoid large empty blocks inside cards */
#alrashdiApp .alr-media-card .alr-desc{
  flex: initial !important;
  display:-webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
#alrashdiApp .alr-media-card .alr-card-actions{
  margin-top: 14px !important;
}
/* unify button sizing + mobile friendliness */
#alrashdiApp .alr-card-actions{ gap:10px; }
#alrashdiApp .alr-card-actions .alr-btn{
  width:100%;
  min-height: 44px;
  border-radius: 16px;
}
@media (max-width: 720px){
  #alrashdiApp .alr-media-card .alr-media{ height: 190px; border-radius: 16px; }
  #alrashdiApp .alr-btn{ font-size: 14px; padding: 12px 16px; border-radius: 16px; }
}
/* modal scrolling (author/details) */
#alrashdiApp .alr-modal__panel{
  max-height: 86vh;
  overflow: hidden;
}
#alrashdiApp .alr-modal__body,
#alrashdiApp .alr-modal__bio{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(86vh - 120px);
  padding-right: 2px;
}

#alrashdiApp .alr-modal__list{margin:10px 18px 0 0; padding:0;}
#alrashdiApp .alr-modal__list li{margin:6px 0;}



/* =========================================================
   ✅ UX FIX: Mobile-friendly modal scroll + easy close
   - Smooth scrolling inside modal
   - Prevent page scroll-jank and restore scroll on close
   ========================================================= */
#alrashdiApp .alr-modal[aria-hidden="false"]{
  display:flex;
  align-items:center;
  justify-content:center;
}
#alrashdiApp .alr-modal__backdrop{
  background: rgba(0,0,0,.55);
}
#alrashdiApp .alr-modal__panel{
  width: min(760px, calc(100% - 24px));
  max-height: 88vh;
  border-radius: 18px;
  overflow: hidden;
}
#alrashdiApp .alr-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#alrashdiApp .alr-modal__close{
  width:44px;
  height:44px;
  border-radius: 12px;
}
#alrashdiApp .alr-modal__body{
  max-height: calc(88vh - 64px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 14px 18px;
}

/* Optional grab bar on mobile (if present) */
#alrashdiApp .alr-modal__grab{
  height: 4px;
  width: 54px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  margin: 10px auto 6px;
}

/* Mobile bottom-sheet feel */
@media (max-width: 720px){
  #alrashdiApp .alr-modal[aria-hidden="false"]{
    align-items:flex-end;
    padding: 14px;
  }
  #alrashdiApp .alr-modal__panel{
    width: 100%;
    max-height: 82vh;
    border-radius: 18px;
  }
  #alrashdiApp .alr-modal__body{
    max-height: calc(82vh - 64px);
  }
}


/* ===== Modal scroll helpers (mobile) ===== */
/* الأسهم داخل البوب أب (الجوال): فوق يمين وبشكل مربّع مرتب */
#alrashdiApp .alr-modal__panel{ position: relative; }
#alrashdiApp .alr-modal__scroll{
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 72px; /* تحت الهيدر حتى لا تتعارض مع العنوان/زر الإغلاق */
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 6;
}
#alrashdiApp .alr-modal__scrollbtn{
  width: 42px;
  height: 42px;
  border-radius: 10px; /* مربّع بحواف ناعمة */
  border: 1px solid rgba(11,27,43,.16);
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(11,27,43,.14);
  color: rgba(11,27,43,.92);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#alrashdiApp .alr-modal__scrollbtn:active{ transform: translateY(1px); }

@media (min-width: 900px){
  #alrashdiApp .alr-modal__scroll{ display:none; }
}

/* =========================================================
   ✅ Subscribe modal (اشترك)
   - Scoped + global fallback
   ========================================================= */

#alrashdiApp .alr-subscribe-modal,
.alr-subscribe-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

#alrashdiApp .alr-subscribe-modal *,
.alr-subscribe-modal *{
  box-sizing:border-box;
}

html.alr-scroll-lock{ overflow:hidden; }


#alrashdiApp .alr-subscribe-modal.is-open,
.alr-subscribe-modal.is-open{ display:block; }

#alrashdiApp .alr-subscribe-backdrop,
.alr-subscribe-backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,27,43,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@supports (-webkit-touch-callout: none){
  #alrashdiApp .alr-subscribe-backdrop,
  .alr-subscribe-backdrop{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

#alrashdiApp .alr-subscribe-card,
.alr-subscribe-card{
  position: relative;
  max-width: 520px;
  width: calc(100% - 34px);
  margin: 9vh auto 0;
  max-height: calc(100vh - 120px);
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(11,27,43,.14);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(11,27,43,.22);
  padding: 18px;
}

#alrashdiApp .alr-subscribe-x,
.alr-subscribe-x{
  position:absolute;
  inset-inline-end: 12px;
  inset-block-start: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11,27,43,.14);
  background: rgba(255,255,255,.95);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

#alrashdiApp .alr-subscribe-head,
.alr-subscribe-head{ padding-inline-end: 48px; }

/* Icon helper */
#alrashdiApp .alr-icon,
.alr-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
#alrashdiApp .alr-icon svg,
.alr-icon svg{ display:block; }

/* Modal header polish */
#alrashdiApp .alr-subscribe-card .kicker,
.alr-subscribe-card .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(29,78,216,.18);
  background: rgba(29,78,216,.06);
  font-weight:900;
  font-size:12px;
  color: rgba(11,27,43,.85);
}
#alrashdiApp .alr-subscribe-card h3,
.alr-subscribe-card h3{
  margin:10px 0 0;
  font-size:20px;
  line-height:1.35;
  letter-spacing:-.2px;
}
#alrashdiApp .alr-subscribe-card .muted,
.alr-subscribe-card .muted{
  color: rgba(11,27,43,.64);
  font-weight:800;
  line-height:1.85;
}
@media (prefers-reduced-motion: reduce){
  #alrashdiApp .alr-subscribe-modal,
  .alr-subscribe-modal,
  #alrashdiApp .alr-subscribe-backdrop,
  .alr-subscribe-backdrop,
  #alrashdiApp .alr-subscribe-card,
  .alr-subscribe-card{ transition:none !important; }
}


#alrashdiApp .alr-subscribe-form,
.alr-subscribe-form{ display:grid; gap:12px; margin-top: 12px; }

/* Modal button matches site buttons */
#alrashdiApp .alr-subscribe-card .btn,
.alr-subscribe-card .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:900;
  font-size:13px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: var(--shadow2);
  cursor:pointer;
  outline:none;
  font-family:inherit;
}
#alrashdiApp .alr-subscribe-card .btn:hover,
.alr-subscribe-card .btn:hover{ transform: translateY(-1px); }

#alrashdiApp .alr-subscribe-card .btn.primary,
.alr-subscribe-card .btn.primary{
  border-color:rgba(29,78,216,.35);
  background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(220,38,38,.88));
  color:#fff;
  box-shadow: 0 18px 40px rgba(29,78,216,.22);
}


#alrashdiApp .alr-subscribe-form label span,
.alr-subscribe-form label span{ display:block; font-weight:900; font-size:13px; margin:0 0 6px; }

#alrashdiApp .alr-subscribe-form input[type="text"],
#alrashdiApp .alr-subscribe-form input[type="email"],
.alr-subscribe-form input[type="text"],
.alr-subscribe-form input[type="email"]{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.14);
  padding: 12px 12px;
  font-weight: 800;
  outline: none;
  background: rgba(255,255,255,.98);
}

#alrashdiApp .alr-subscribe-form input:focus,
.alr-subscribe-form input:focus{
  border-color: rgba(29,78,216,.45);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}

#alrashdiApp .alr-subscribe-consent,
.alr-subscribe-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.12);
  background: rgba(29,78,216,.04);
  font-weight: 800;
  font-size: 13px;
  color: rgba(11,27,43,.88);
}

#alrashdiApp .alr-subscribe-consent a,
.alr-subscribe-consent a{ color: rgba(29,78,216,.95); text-decoration: underline; }

#alrashdiApp .alr-subscribe-msg,
.alr-subscribe-msg{
  margin-top: 2px;
  min-height: 18px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(11,27,43,.85);
}

#alrashdiApp .alr-subscribe-msg.bad,
.alr-subscribe-msg.bad{ color: rgba(220,38,38,.95); }

#alrashdiApp .alr-subscribe-msg.ok,
.alr-subscribe-msg.ok{ color: rgba(16,185,129,.95); }

@media (max-width: 520px){
  #alrashdiApp .alr-subscribe-card,
  .alr-subscribe-card{ margin: 6vh auto 0; padding: 16px; }
}

/* =========================================================
   ✅ Mobile header tweaks (modern + balanced)
   - Works inside #alrashdiApp and as fallback
   ========================================================= */
@media (max-width: 980px){
  /* Hide desktop menu, rely on burger + drawer */
  #alrashdiApp .topbar .menu,
  .topbar .menu{ display:none !important; }

  /* ✅ Mobile layout requested by user:
     Right side: brand (logo + name)
     Left side: burger + subscribe (same level)
  */
  #alrashdiApp .topbar .nav,
  .topbar .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    direction:rtl; /* keep brand anchored to the right */
  }

  /* Brand stays on the right, single-line title */
  #alrashdiApp .topbar .brand,
  .topbar .brand{
    min-width:0;
    flex:1;
    justify-content:flex-end;
    text-align:right;
    gap:10px;
    direction:rtl;
  }
  #alrashdiApp .topbar .brand h1,
  .topbar .brand h1{
    font-size:13px;
    line-height:1.25;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 66vw;
  }
  #alrashdiApp .topbar .brand small,
  .topbar .brand small{ display:none; }

  /* Actions group on the LEFT (burger + subscribe) */
  #alrashdiApp .topbar .cta,
  .topbar .cta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    direction:ltr; /* keep burger at far-left then subscribe */
  }

  #alrashdiApp .topbar .burger,
  .topbar .burger{
    display:inline-flex;
    width:48px;
    height:48px;
    min-height:48px;
    border-radius:18px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(11,27,43,.12);
    box-shadow: var(--shadow2);
    justify-content:center;
    align-items:center;
  }

  /* Hide home button on mobile (exists in drawer anyway) */
  #alrashdiApp .topbar .cta .alr-home-btn,
  .topbar .cta .alr-home-btn{ display:none !important; }

  /* Make subscribe compact and pretty */
  #alrashdiApp .topbar .alr-sub-trigger,
  .topbar .alr-sub-trigger{
    width:48px;
    height:48px;
    min-height:48px;
    padding:0;
    border-radius:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 18px 40px rgba(29,78,216,.22);
  }

  #alrashdiApp .topbar .alr-sub-trigger .alr-btn-text,
  .topbar .alr-sub-trigger .alr-btn-text{ display:none; }

  #alrashdiApp .topbar .alr-icon,
  .topbar .alr-icon{ display:inline-flex; }

  /* A little breathing room on very small screens */
  #alrashdiApp .wrap,
  .wrap{ padding-inline: 12px; }
}

@media (max-width: 380px){
  #alrashdiApp .topbar .brand h1,
  .topbar .brand h1{ max-width: 190px; }
}

/* =========================================================
   ✅ Fallback header styles (in case #alrashdiApp wrapper is missing)
   ========================================================= */
.topbar .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  box-shadow: var(--shadow2);
  cursor:pointer;
  outline:none;
  font-family:inherit;
}
.burger{
  display:none;
  width:48px;
  height:48px;
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(29,78,216,.18);
  background:rgba(29,78,216,.06);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow2);
  outline:none;
}
.burger span{
  width:20px;
  height:2px;
  background:rgba(11,27,43,.78);
  position:relative;
  display:block;
  border-radius:999px;
}
.burger span:before,
.burger span:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  background:rgba(11,27,43,.78);
}
.burger span:before{ top:-7px; }
.burger span:after{ top:7px; }
.drawer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:1000;
  padding:18px;
}
.drawer[open]{ display:block; animation:fadeIn 0.3s ease; }
.drawer-panel{
  width:min(420px, 100%);
  height:100%;
  margin-right:auto;
  margin-left:0;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(11,27,43,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  overflow:hidden;
}
@media (max-width: 980px){
  .topbar .menu{ display:none !important; }
  .burger{ display:inline-flex; }
}
@media (max-width: 520px){
  .topbar .brand h1{ font-size:12.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 240px; }
}

/* =========================================================
   ✅ Thanks toast (after subscribe)
   ========================================================= */
.alr-thanks-toast{
  position:fixed;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  z-index: 99999;
  display:flex;
  gap:12px;
  align-items:flex-start;
  max-width: 360px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(11,27,43,.12);
  background:rgba(255,255,255,.96);
  box-shadow: 0 18px 45px rgba(11,27,43,.18);
  transform: translateY(14px);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}
.alr-thanks-toast.show{ transform: translateY(0); opacity:1; }

.alr-thanks-ic{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  color:#fff;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(29,78,216,.85));
  box-shadow: 0 14px 28px rgba(16,185,129,.18);
}

.alr-thanks-title{
  font-weight:1000;
  font-size:13px;
  color: rgba(11,27,43,.92);
  margin: 1px 0 2px;
}
.alr-thanks-sub{
  font-weight:800;
  font-size:12.5px;
  color: rgba(11,27,43,.68);
  line-height:1.65;
}


/* ====================================================
   ✅ Lightbox (Modern) - Global
   ==================================================== */
.alr-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  z-index: 9999;
}
.alr-lightbox.is-open{ display:flex; }

.alr-lightbox .alr-lb-card{
  width: min(1400px, 98vw);
  max-height: 92vh;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(14,15,17,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  position: relative;
  display:flex;
  flex-direction:column;
}

.alr-lightbox .alr-lb-stage{
  background: rgba(0,0,0,.60);
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.alr-lightbox .alr-lb-stage img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .15s ease;
  transform-origin: 0 0;
  cursor: zoom-in;
}

/* Zoom / Real-size mode */
.alr-lightbox.is-zoom .alr-lb-stage{
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
}
.alr-lightbox.is-zoom .alr-lb-stage img{
  max-width: none;
  max-height: none;
  cursor: grab;
}
.alr-lightbox.is-zoom .alr-lb-stage.is-drag,
.alr-lightbox.is-zoom .alr-lb-stage.is-drag img{
  cursor: grabbing;
}


.alr-lightbox .alr-lb-cap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.68);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: 13px;
}
.alr-lightbox .alr-lb-hint{
  opacity: .75;
  font-weight: 750;
  font-family: Inter, system-ui, sans-serif;
}

.alr-lightbox .alr-lb-btn{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
}
.alr-lightbox .alr-lb-btn:hover{ background: rgba(0,0,0,.55); }

.alr-lightbox .alr-lb-prev{
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
}
.alr-lightbox .alr-lb-next{
  left: auto;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
}
.alr-lightbox .alr-lb-close{
  top: 12px;
  left: 12px;
  font-size: 22px;
}
.alr-lightbox .alr-lb-zoom{
  top: 12px;
  left: 62px;
  font-size: 16px;
}

/* زر رجوع واضح (خصوصاً للجوال/كبار السن) */
.alr-lightbox .alr-lb-back{
  top: auto;
  bottom: 12px;
  left: 12px;
  width: auto;
  padding: 0 16px;
  height: 44px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  gap: 8px;
}

@media (min-width: 900px){
  .alr-lightbox .alr-lb-back{
    display: none;
  }
}

@media (max-width: 600px){
  .alr-lightbox{ padding: 12px; }
  .alr-lightbox .alr-lb-btn{ width:40px;height:40px;border-radius:14px; }
  .alr-lightbox .alr-lb-zoom{ left: 60px; }
}



/* ====================================================
   ✅ Tribe Symbols
   ==================================================== */
#alrashdiApp .alr-symbols-grid{
  align-items: stretch;
}

#alrashdiApp .alr-symbol-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

#alrashdiApp .alr-symbol-card__media{
  display:block;
  width:100%;
  aspect-ratio: 4 / 5.15;
  overflow:hidden;
  border-radius:22px;
  margin-bottom:14px;
  background:linear-gradient(180deg,rgba(11,27,43,.04),rgba(11,27,43,.08));
  box-shadow:0 18px 36px rgba(11,27,43,.08);
}

#alrashdiApp .alr-symbol-card__media img,
#alrashdiApp .alr-symbol-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition: transform .35s ease;
}

#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__media img{
  transform: scale(1.03);
}

#alrashdiApp .alr-symbol-card h4{
  margin: 8px 0 10px;
  line-height:1.35;
  min-height: calc(1.35em * 2);
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

#alrashdiApp .alr-symbol-card__desc{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.9;
  display:-webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow:hidden;
  flex:1;
}

#alrashdiApp .alr-symbol-engage{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}

#alrashdiApp .alr-symbol-engage--single{
  margin:0 0 18px;
  flex-wrap:wrap;
}

#alrashdiApp .alr-symbol-engage__hint{
  color:var(--muted);
  font-size:.95rem;
}

#alrashdiApp .alr-like-btn{
  appearance:none;
  border:1px solid rgba(11,27,43,.10);
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
  color:var(--text);
  border-radius:999px;
  min-height:46px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#alrashdiApp .alr-like-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
}

#alrashdiApp .alr-like-btn.is-liked{
  border-color:rgba(220,38,38,.18);
  background:linear-gradient(180deg,rgba(254,242,242,.98),rgba(255,255,255,.95));
}

#alrashdiApp .alr-like-btn.is-busy{
  opacity:.8;
  pointer-events:none;
}

#alrashdiApp .alr-like-btn__icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#alrashdiApp .alr-like-btn__icon svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}

#alrashdiApp .alr-like-btn.is-liked .alr-like-btn__icon svg{
  fill:currentColor;
}

#alrashdiApp .alr-like-btn__count{
  font-variant-numeric:tabular-nums;
}

#alrashdiApp .alr-symbol-card .alr-card-actions{
  margin-top:auto;
  display:flex;
}

#alrashdiApp .alr-symbol-cover{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(76vh, 860px);
  padding:18px;
  border-radius:28px;
  background:radial-gradient(circle at top,rgba(255,255,255,.22),rgba(255,255,255,.05));
  backdrop-filter:blur(3px);
}

#alrashdiApp .alr-symbol-cover img,
#alrashdiApp .alr-symbol-cover__img{
  width:100%;
  height:min(76vh, 860px);
  object-fit:contain;
  object-position:center top;
  border-radius:22px;
}

#alrashdiApp .alr-symbol-role-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(11,27,43,.10);
  background:rgba(29,78,216,.06);
  color:var(--text);
  font-weight:800;
}

@media (max-width: 640px){
  #alrashdiApp .alr-symbol-card__media{
    aspect-ratio: 4 / 5.35;
    border-radius:18px;
  }
  #alrashdiApp .alr-like-btn{
    min-height:42px;
    padding:9px 14px;
  }
  #alrashdiApp .alr-symbol-cover{
    min-height:min(58vh, 520px);
    padding:12px;
    border-radius:22px;
  }
  #alrashdiApp .alr-symbol-cover img,
  #alrashdiApp .alr-symbol-cover__img{
    height:min(58vh, 520px);
  }
}

/* ====================================================
   ✅ Tribe Symbols — v1.1.9 visual refinement
   ==================================================== */
#alrashdiApp .alr-symbols-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
  align-items:stretch;
}

#alrashdiApp .alr-symbol-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:26px;
  padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 18px 38px rgba(11,27,43,.08);
  overflow:hidden;
}

#alrashdiApp .alr-symbol-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.26),transparent 42%,rgba(255,255,255,.10) 78%,transparent);
  pointer-events:none;
}

#alrashdiApp .alr-symbol-card__media{
  position:relative;
  display:block;
  width:100%;
  min-height:390px;
  aspect-ratio:4 / 5.25;
  overflow:hidden;
  border-radius:24px;
  margin-bottom:14px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.72), rgba(255,255,255,.08) 45%),
    linear-gradient(180deg, rgba(11,27,43,.04), rgba(11,27,43,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 18px 36px rgba(11,27,43,.10);
}

#alrashdiApp .alr-symbol-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.32) 18%,transparent 38%);
  transform:translateX(-112%);
  transition:transform .75s ease;
  pointer-events:none;
  z-index:2;
}

#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__media::before{
  transform:translateX(112%);
}

#alrashdiApp .alr-symbol-card__media img,
#alrashdiApp .alr-symbol-card__img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center top !important;
  padding:12px;
  transition:transform .35s ease;
}

#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__media img,
#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__img{
  transform:scale(1.02);
}

#alrashdiApp .alr-symbol-engage{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
}

#alrashdiApp .alr-symbol-engage--single{
  margin:0 0 18px;
  flex-wrap:wrap;
}

#alrashdiApp .alr-symbol-engage__hint{
  color:var(--muted);
  font-size:.92rem;
}

#alrashdiApp .alr-like-btn{
  appearance:none;
  border:1px solid rgba(220,38,38,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(254,242,242,.95));
  color:#c81e1e;
  border-radius:999px;
  min-height:36px;
  padding:6px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font:inherit;
  font-size:.92rem;
  font-weight:800;
  box-shadow:0 10px 22px rgba(220,38,38,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#alrashdiApp .alr-like-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(220,38,38,.14);
}

#alrashdiApp .alr-like-btn.is-liked{
  border-color:rgba(220,38,38,.28);
  background:linear-gradient(180deg,rgba(254,242,242,.98),rgba(255,255,255,.96));
  color:#b91c1c;
}

#alrashdiApp .alr-like-btn__icon{
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#alrashdiApp .alr-like-btn__icon svg{
  width:17px;
  height:17px;
  display:block;
  fill:#ef4444;
  stroke:#dc2626;
  stroke-width:2;
}

#alrashdiApp .alr-like-btn__label{
  line-height:1;
}

#alrashdiApp .alr-like-btn__count{
  min-width:28px;
  padding-inline:7px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(220,38,38,.10);
  color:#991b1b;
  font-size:.84rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

#alrashdiApp .alr-symbol-cover{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(78vh, 920px);
  padding:18px;
  border-radius:30px;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.30),rgba(255,255,255,.06) 48%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(4px);
  box-shadow:0 24px 52px rgba(11,27,43,.10);
}

#alrashdiApp .alr-symbol-cover--zoom{
  cursor:zoom-in;
  text-decoration:none;
}

#alrashdiApp .alr-symbol-cover::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(125deg,transparent 0%,rgba(255,255,255,.22) 16%,transparent 34%);
  transform:translateX(-115%);
  transition:transform .9s ease;
  pointer-events:none;
}

#alrashdiApp .alr-symbol-cover:hover::before{
  transform:translateX(115%);
}

#alrashdiApp .alr-symbol-cover img,
#alrashdiApp .alr-symbol-cover__img{
  width:100%;
  height:min(78vh, 920px);
  object-fit:contain;
  object-position:center top;
  border-radius:24px;
  padding:12px;
}

#alrashdiApp .alr-symbol-cover__zoom-pill{
  position:absolute;
  left:20px;
  bottom:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0f172a;
  font-weight:800;
  box-shadow:0 12px 24px rgba(11,27,43,.12);
}

#alrashdiApp .alr-symbol-comments{
  margin-top:26px;
  border-top:1px solid rgba(11,27,43,.08);
  padding-top:22px;
}

#alrashdiApp .alr-symbol-comments__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

#alrashdiApp .alr-symbol-comments__head h3,
#alrashdiApp .alr-symbol-comment-form__title{
  margin:0 0 6px;
  font-size:1.28rem;
}

#alrashdiApp .alr-symbol-comments__head p,
#alrashdiApp .alr-symbol-comment-form__note{
  margin:0;
  color:var(--muted);
  line-height:1.9;
}

#alrashdiApp .alr-symbol-comments__count{
  min-width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));
  border:1px solid rgba(11,27,43,.08);
  box-shadow:0 14px 28px rgba(11,27,43,.08);
  font-weight:900;
  font-size:1.1rem;
}

#alrashdiApp .alr-symbol-comments__list{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

#alrashdiApp .alr-symbol-comment-card,
#alrashdiApp .alr-symbol-comments__empty,
#alrashdiApp .alr-symbol-comment-form{
  border:1px solid rgba(11,27,43,.08);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.88));
  box-shadow:0 16px 34px rgba(11,27,43,.06);
}

#alrashdiApp .alr-symbol-comment-card{
  padding:16px 18px;
}

#alrashdiApp .alr-symbol-comment-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

#alrashdiApp .alr-symbol-comment-card__head strong{
  color:var(--text);
}

#alrashdiApp .alr-symbol-comment-card__head span{
  color:var(--muted);
  font-size:.92rem;
}

#alrashdiApp .alr-symbol-comment-card__body{
  line-height:2;
  color:#263445;
}

#alrashdiApp .alr-symbol-comments__empty{
  padding:18px;
  color:var(--muted);
  line-height:1.9;
  margin-bottom:18px;
}

#alrashdiApp .alr-symbol-comment-form{
  padding:18px;
}

#alrashdiApp .alr-symbol-comment-form .comment-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

#alrashdiApp .alr-symbol-comment-form .comment-form > p{
  margin:0;
}

#alrashdiApp .alr-symbol-comment-form .comment-form-comment,
#alrashdiApp .alr-symbol-comment-form .form-submit,
#alrashdiApp .alr-symbol-comment-form .comment-notes,
#alrashdiApp .alr-symbol-comment-form .logged-in-as,
#alrashdiApp .alr-symbol-comment-form .must-log-in,
#alrashdiApp .alr-symbol-comment-form .comment-form-cookies-consent{
  grid-column:1 / -1;
}

#alrashdiApp .alr-symbol-comment-form label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:var(--text);
}

#alrashdiApp .alr-symbol-comment-form input[type="text"],
#alrashdiApp .alr-symbol-comment-form input[type="email"],
#alrashdiApp .alr-symbol-comment-form textarea{
  width:100%;
  border:1px solid rgba(11,27,43,.12);
  border-radius:16px;
  padding:12px 14px;
  background:#fff;
  font:inherit;
  color:var(--text);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}

#alrashdiApp .alr-symbol-comment-form input[type="text"]:focus,
#alrashdiApp .alr-symbol-comment-form input[type="email"]:focus,
#alrashdiApp .alr-symbol-comment-form textarea:focus{
  border-color:rgba(29,78,216,.26);
  box-shadow:0 0 0 4px rgba(29,78,216,.08);
}

#alrashdiApp .alr-symbol-comment-submit{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(180deg,#1d4ed8,#1e40af);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(29,78,216,.20);
}

@media (max-width: 980px){
  #alrashdiApp .alr-symbols-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  #alrashdiApp .alr-symbols-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  #alrashdiApp .alr-symbol-card{
    border-radius:22px;
    padding:14px;
  }

  #alrashdiApp .alr-symbol-card__media{
    min-height:360px;
    aspect-ratio:4 / 5.5;
    border-radius:20px;
  }

  #alrashdiApp .alr-like-btn{
    min-height:34px;
    padding:6px 10px;
    font-size:.88rem;
  }

  #alrashdiApp .alr-like-btn__icon,
  #alrashdiApp .alr-like-btn__icon svg{
    width:16px;
    height:16px;
  }

  #alrashdiApp .alr-symbol-cover{
    min-height:min(62vh, 560px);
    padding:10px;
    border-radius:24px;
  }

  #alrashdiApp .alr-symbol-cover img,
  #alrashdiApp .alr-symbol-cover__img{
    height:min(62vh, 560px);
    border-radius:18px;
    padding:8px;
  }

  #alrashdiApp .alr-symbol-cover__zoom-pill{
    left:12px;
    bottom:12px;
    padding:8px 12px;
    font-size:.88rem;
  }

  #alrashdiApp .alr-symbol-comments__head{
    flex-direction:column;
    align-items:stretch;
  }

  #alrashdiApp .alr-symbol-comments__count{
    width:56px;
  }

  #alrashdiApp .alr-symbol-comment-form .comment-form{
    grid-template-columns:1fr;
  }

  #alrashdiApp .alr-symbol-comment-card__head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ====================================================
   ✅ Tribe Symbols — v1.1.10 interaction + image polish
   ==================================================== */
#alrashdiApp .alr-symbols-grid{
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:22px;
}

#alrashdiApp .alr-symbol-card{
  border-radius:28px;
  padding:18px;
  box-shadow:0 22px 42px rgba(11,27,43,.09);
}

#alrashdiApp .alr-symbol-card__media{
  min-height:clamp(430px, 46vw, 585px);
  height:clamp(430px, 46vw, 585px);
  aspect-ratio:auto;
  border-radius:26px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.84), rgba(255,255,255,.10) 44%),
    linear-gradient(180deg, rgba(11,27,43,.03), rgba(11,27,43,.11));
}

#alrashdiApp .alr-symbol-card__media::after{
  content:"";
  position:absolute;
  inset:auto 10px 10px 10px;
  height:18%;
  border-radius:0 0 20px 20px;
  background:linear-gradient(180deg, transparent, rgba(11,27,43,.08));
  pointer-events:none;
}

#alrashdiApp .alr-symbol-card__media img,
#alrashdiApp .alr-symbol-card__img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:10px 10px 0 !important;
  filter:contrast(1.02) saturate(1.02);
}

#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__media img,
#alrashdiApp .alr-symbol-card:hover .alr-symbol-card__img{
  transform:scale(1.018);
}

#alrashdiApp .alr-symbol-engage{
  gap:8px;
  flex-wrap:wrap;
}

#alrashdiApp .alr-like-btn,
#alrashdiApp .alr-comment-link{
  appearance:none;
  border-radius:999px;
  min-height:34px;
  padding:5px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

#alrashdiApp .alr-like-btn{
  border:1px solid rgba(220,38,38,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  color:#dc2626;
  box-shadow:0 8px 16px rgba(220,38,38,.06);
}

#alrashdiApp .alr-like-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(220,38,38,.34);
  box-shadow:0 10px 20px rgba(220,38,38,.10);
}

#alrashdiApp .alr-like-btn.is-busy{
  opacity:.85;
  pointer-events:none;
}

#alrashdiApp .alr-like-btn.is-liked{
  color:#b91c1c;
  border-color:rgba(220,38,38,.38);
  background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,255,255,.95));
  box-shadow:0 0 0 1px rgba(248,113,113,.15), 0 10px 24px rgba(239,68,68,.14), 0 0 18px rgba(248,113,113,.22);
}

#alrashdiApp .alr-like-btn.is-pop{
  animation:alrLikePulse .72s cubic-bezier(.22,.9,.22,1);
}

#alrashdiApp .alr-like-btn__icon{
  width:15px;
  height:15px;
}

#alrashdiApp .alr-like-btn__icon svg{
  width:15px;
  height:15px;
  fill:transparent;
  stroke:#dc2626;
  stroke-width:2.1;
  transition:fill .22s ease, stroke .22s ease, filter .28s ease, transform .22s ease;
}

#alrashdiApp .alr-like-btn.is-liked .alr-like-btn__icon svg{
  fill:#ef4444;
  stroke:#ef4444;
  filter:drop-shadow(0 0 7px rgba(248,113,113,.46));
  transform:scale(1.06);
}

#alrashdiApp .alr-like-btn__label{
  line-height:1;
}

#alrashdiApp .alr-like-btn__count{
  min-width:24px;
  height:20px;
  padding-inline:6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(220,38,38,.08);
  color:#991b1b;
  font-size:.78rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

#alrashdiApp .alr-comment-link{
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
  color:#1f2937;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

#alrashdiApp .alr-comment-link:hover{
  transform:translateY(-1px);
  border-color:rgba(15,23,42,.18);
  box-shadow:0 12px 22px rgba(15,23,42,.09);
}

#alrashdiApp .alr-symbol-cover{
  min-height:min(86vh, 1020px);
  padding:20px;
  border-radius:32px;
  box-shadow:0 28px 58px rgba(11,27,43,.12);
}

#alrashdiApp .alr-symbol-cover img,
#alrashdiApp .alr-symbol-cover__img{
  width:100% !important;
  height:min(86vh, 1020px) !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:8px !important;
}

#alrashdiApp .alr-symbol-cover__zoom-pill{
  background:rgba(255,255,255,.95);
  box-shadow:0 16px 28px rgba(11,27,43,.13);
}

#alrashdiApp .alr-symbol-comment-form{
  scroll-margin-top:110px;
}

@keyframes alrLikePulse{
  0%{ transform:scale(1); box-shadow:0 8px 16px rgba(220,38,38,.08); }
  28%{ transform:scale(1.07); box-shadow:0 0 0 8px rgba(248,113,113,.12), 0 14px 28px rgba(239,68,68,.18), 0 0 24px rgba(248,113,113,.30); }
  58%{ transform:scale(.98); }
  100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(248,113,113,.15), 0 10px 24px rgba(239,68,68,.14), 0 0 18px rgba(248,113,113,.22); }
}

@media (max-width: 980px){
  #alrashdiApp .alr-symbols-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  #alrashdiApp .alr-symbol-card__media{
    min-height:420px;
    height:420px;
  }
}

@media (max-width: 640px){
  #alrashdiApp .alr-symbols-grid{
    grid-template-columns:1fr;
  }

  #alrashdiApp .alr-symbol-card{
    border-radius:24px;
    padding:14px;
  }

  #alrashdiApp .alr-symbol-card__media{
    min-height:390px;
    height:390px;
    border-radius:22px;
  }

  #alrashdiApp .alr-like-btn,
  #alrashdiApp .alr-comment-link{
    min-height:32px;
    padding:5px 9px;
    font-size:.78rem;
  }

  #alrashdiApp .alr-symbol-cover{
    min-height:min(68vh, 680px);
    padding:12px;
    border-radius:24px;
  }

  #alrashdiApp .alr-symbol-cover img,
  #alrashdiApp .alr-symbol-cover__img{
    height:min(68vh, 680px) !important;
    padding:4px !important;
  }
}


#alrashdiApp .alr-share-trigger{
  appearance:none;
  border:1px solid rgba(2,132,199,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,255,.94));
  color:#0f3b55;
  border-radius:999px;
  min-height:34px;
  padding:5px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(2,132,199,.08);
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

#alrashdiApp .alr-share-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(2,132,199,.30);
  box-shadow:0 12px 24px rgba(2,132,199,.12);
}

#alrashdiApp .alr-share-trigger.is-sharing{
  opacity:.86;
  pointer-events:none;
}

#alrashdiApp .alr-share-trigger__icon,
#alrashdiApp .alr-share-trigger__icon svg{
  width:15px;
  height:15px;
}

#alrashdiApp .alr-share-trigger.copied{
  color:#0369a1;
  border-color:rgba(2,132,199,.34);
  background:linear-gradient(180deg, rgba(224,242,254,.98), rgba(255,255,255,.94));
  box-shadow:0 0 0 1px rgba(56,189,248,.12), 0 10px 22px rgba(14,165,233,.14);
}

#alrashdiApp .alr-symbol-comment-form .comment-form-email,
#alrashdiApp .alr-symbol-comment-form .comment-form-url,
#alrashdiApp .alr-symbol-comment-form .comment-form-cookies-consent{
  display:none !important;
}

@media (max-width: 640px){
  #alrashdiApp .alr-share-trigger{
    min-height:32px;
    padding:5px 9px;
    font-size:.78rem;
  }
}