:root{
      --gold:#d4af37;
      --gold2:#f1d37a;
    }
	/* Almarai Font Family */

	@font-face {
		font-family: 'Almarai_r';
		src: url('../../img/ramadan2026/Almarai/Almarai-Regular.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
	}

	@font-face {
		font-family: 'Almarai_l';
		src: url('../../img/ramadan2026/Almarai/Almarai-Light.ttf') format('truetype');
		font-weight: 300;
		font-style: normal;
	}

	@font-face {
		font-family: 'Almarai_b';
		src: url('../../img/ramadan2026/Almarai/Almarai-Bold.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
	}

	@font-face {
		font-family: 'Almarai_eb';
		src: url('../../img/ramadan2026/Almarai/Almarai-ExtraBold.ttf') format('truetype');
		font-weight: 800;
		font-style: normal;
	}


    /* ================= BODY ================= */
    body{
      margin:0;
      min-height:100vh;
      color:#fff;
      font-family: 'Almarai_r';

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
    
    body{
		background-image: linear-gradient(180deg, rgba(8,14,30,.10) 0%, rgba(8,14,30,.92) 100%);
	  }
	  body.is-bg-ready{
		background-image:
        linear-gradient(180deg, rgba(8,14,30,.10) 0%, rgba(8,14,30,.65) 45%, rgba(8,14,30,.92) 100%),
        url("../../img/ramadan2026/bg.webp");
	  }
	  
	/* ===== Ramadan Toast Style ===== */
.ramadan-toast{
  background: linear-gradient(135deg, #0b1220, #141c2f);
  color: #fff;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  border: 1px solid rgba(241,211,122,.25);
}

.ramadan-toast .toast-body{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #f6f2e8;
}

/* Success */
.ramadan-toast.success{
  border-color: rgba(241,211,122,.55);
}
.ramadan-toast.success .toast-body::before{
  content: "✓ ";
  color: #f1d37a;
}

/* Info / Update */
.ramadan-toast.info{
  border-color: rgba(255,255,255,.25);
}

/* Warning */
.ramadan-toast.warning{
  border-color: rgba(255,193,7,.55);
}

/* Error */
.ramadan-toast.error{
  border-color: rgba(220,53,69,.6);
}


    /* ================= HEADER WRAP ================= */
    header{
      background: rgba(4,10,22,.45);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: relative;
      z-index: 80;
    }

    /* mobile first: two rows */
    .header-row-1{
      border-bottom: 1px solid rgba(212,175,55,.55);
      padding: .22rem 0;
    }
    .header-row-1 .row-inner{
      display:flex;
      justify-content: space-evenly;
      align-items:center;
      gap:.4rem;
    }

    .header-row-2{
      padding: .30rem 0;
      display:flex;
      justify-content: space-between;
      align-items:center;

      background: rgba(4,10,22,.58);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }


    .brand{
      display:flex;
      align-items:center;
      gap:.45rem;
      font-weight:800;
      font-size:.95rem;
      line-height:1;
    }
    .brand-badge{
      width:34px;height:34px;
      border-radius:12px;
      display:grid;place-items:center;
      background: linear-gradient(135deg, rgba(212,175,55,.35), rgba(212,175,55,.08));
      border:1px solid rgba(212,175,55,.45);
      color:var(--gold2);
      font-weight:900;
      font-size:.9rem;
      box-shadow: 0 10px 22px rgba(0,0,0,.20);
    }

    .pill{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color:#fff;
      border-radius:999px;
      padding:.32rem .62rem;
      font-size:.8rem;
    }

    .btn-outline-gold{
      border:1px solid rgba(212,175,55,.55);
      background:transparent;
      color:#fff;
      border-radius:12px;
      padding:.38rem .62rem;
      font-size:.8rem;
      font-weight:800;
      white-space: nowrap;
	  text-decoration:none;
    }

    .icon-btn{
      width:36px;height:36px;
      border-radius:12px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      display:grid;place-items:center;
      color:#fff;
      cursor:pointer;
      position: relative;
    }

    .badge-dot{
      position:absolute;
      top: -6px;
      inset-inline-start: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--gold);
      color:#111;
      font-size: 12px;
      font-weight: 900;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(0,0,0,.15);
    }

    .btn-gold{
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      border:none;
      color:#0b1020;
      border-radius:14px;
      font-weight:900;
      padding:.58rem .9rem;
      box-shadow: 0 12px 28px rgba(212,175,55,.18);
	  text-decoration:none;
    }

    @media (min-width: 992px){
      .header-row-1,
      .header-row-2{ display:none; }

      .header-desktop{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:.55rem 0;
      }
    }

    /* ================= CONTENT ================= */
    main{
      position:relative;
      z-index:3;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

   
    .hero-side{
      display:flex;
      align-items: stretch;
      gap: 18px;
    }

    [dir="rtl"] .hero-side{ justify-content:flex-end; }
    [dir="ltr"] .hero-side{ justify-content:flex-start; }

    [dir="rtl"] .donate-col{ order: 2; }
    [dir="rtl"] .img-col{ order: 1; }
    [dir="ltr"] .donate-col{ order: 1; }
 

    .quick-box{
      width:100%;
      border-radius:22px;
      padding:18px;
      background: rgba(4,10,22,.55);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      box-shadow: 0 30px 80px rgba(0,0,0,.35);
    }

    .section-title{ color:var(--gold2); font-weight:900; margin-bottom:.25rem; }
    .helper{ font-size:.82rem; color:rgba(255,255,255,.75); margin-bottom:.8rem; }

    .form-control, .form-select{
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      border-radius:14px;
      padding:.65rem .85rem;
      font-size:.92rem;
    }
    .form-control::placeholder{ color:rgba(255,255,255,.6); }
    option{ color:#111; }

    /* hero image */
    .ramadan-card{
      border-radius:22px;
      overflow:hidden;
      margin:auto;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 14px;
      min-height: 360px;
    }
    .ramadan-card img{
      max-width: 100%;
      height: auto;
      display:block;
      filter: drop-shadow(0 14px 40px rgba(0,0,0,.35));
    }

    @media (min-width: 791px){
      .ramadan-card{ width:500px; }
    }

    @media (max-width: 790.98px){
      .ramadan-card img{ height:100px; }
    }

    @media (max-width: 575.98px){
      body{
        background-attachment: scroll;
        background-position: 50% 20%;
      }

      .hero-side{
        flex-direction: column;
        gap: 12px;
        justify-content: center;
      }
      .img-col, .donate-col{ order: unset; }

      .ramadan-card{
        min-height: unset;
        padding: 10px;
      }
      .ramadan-card img{
        max-height: 190px;
        width: auto;
      }

      .quick-box{
        background-image:
          linear-gradient(180deg, rgba(8,14,30,.10) 0%, rgba(8,14,30,.65) 45%, rgba(8,14,30,.92) 100%),
          url("../../img/ramadan2026/bg.webp");
        background-size: cover;
        background-position: center;
        backdrop-filter: none;
      }
    }

    /* ================== Amount + Currency ================== */
    .amount-group{ display:flex; align-items:stretch; }
    .amount-group .form-control{ flex: 1 1 auto; }
    .amount-group .form-select{ flex: 0 0 auto; max-width: 120px; }
    .amount-group{ justify-content:center; }
    .amount-group .form-control,
    .amount-group .form-select{ text-align:center; }

    .quick-box .amount-group{ max-width: 360px; margin-inline: auto; }

    [dir="rtl"] .amount-group .form-control{ border-top-left-radius:0!important; border-bottom-left-radius:0!important; }
    [dir="rtl"] .amount-group .form-select{ border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
    [dir="ltr"] .amount-group .form-control{ border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
    [dir="ltr"] .amount-group .form-select{ border-top-left-radius:0!important; border-bottom-left-radius:0!important; }

    /* ============== Ramadan Special Projects (UPDATED) ============== */
    #ramadan-special{ margin-top: 28px; }

    .rs-head{ text-align:center; margin-bottom: 14px; }
    .rs-head h3{ margin:0; color: var(--gold2); font-weight: 900; }
    .rs-head p{ margin:.25rem 0 0; color: rgba(255,255,255,.70); font-size:.9rem; }

    .rs-slider{ position:relative; }
    @media (min-width: 992px){
      .rs-slider{ padding-inline: 70px; }
    }

    .rs-track{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding: 8px 4px 12px;
      -webkit-overflow-scrolling: touch;
    }
    .rs-track::-webkit-scrollbar{ height: 10px; }
    .rs-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }

    /* ✅ CARD: make top area (image area) transparent (no bg/border) */
    .rs-card{
      scroll-snap-align: start;
      flex: 0 0 100%;
      position: relative;

      /* IMPORTANT: remove background/border/shadow from the whole card so nothing appears فوق الصورة */
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;

      padding: 0 !important;
    }

    /* desktop: 3 cards visible */
    @media (min-width: 992px){
      .rs-card{ flex: 0 0 calc((100% - 28px) / 3); }
      .rs-track{ overflow-x:hidden; }
    }

    /* Image on top (NO bg/border/padding) + keep rounded TOP like screenshot */
    .rs-thumb{
      width:100%;
      padding:0 !important;
      border:0 !important;
      background: transparent !important;
      overflow: hidden;
      border-radius: 22px 22px 0 0;
    }
    .rs-thumb img{
      width:100%;
      height:auto;
      display:block;
      object-fit:cover;
      border-radius: 22px 22px 0 0;
    }

    /* ✅ Body ONLY has background/border/shadow (starts after image) */
    .rs-body{
      padding: 14px;
      background: rgba(4,10,22,.55);
      border: 1px solid rgba(255,255,255,.12);
      border-top: 0;
      border-radius: 0 0 22px 22px;
      box-shadow: 0 26px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
    }

    .rs-title{
      margin: 0 0 6px;
      font-weight: 900;
      font-size: 1.05rem;
      color:#fff;
    }
    .rs-desc{
      margin:0 0 12px;
      color: rgba(255,255,255,.72);
      font-size:.88rem;
      line-height:1.45;
    }

    .rs-controls{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:center;
      flex-wrap: wrap;
    }

    .rs-controls .form-select,
    .rs-controls .form-control{
      border-radius: 14px;
      padding: .60rem .80rem;
      font-size: .92rem;
    }

    .rs-picks{ display:flex; gap:10px; flex: 1 1 260px; justify-content:center; }
    .rs-picks > *{ flex:1; min-width: 140px; }

    .rs-actions{ display:flex; gap:10px; align-items:stretch; justify-content:center; width:100%; }

    .btn-cart-mini{
      width: 52px;
      min-width: 52px;
      height: 48px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(212,175,55,.75);
      background: rgba(255,255,255,.06);
      color: var(--gold2);
      padding:0;
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
      cursor:pointer;
    }
    .btn-cart-mini:hover{
      background: rgba(212,175,55,.10);
      border-color: rgba(241,211,122,.95);
      transform: translateY(-1px);
    }
    .btn-cart-mini:active{ transform: translateY(0); }

    .rs-btn{
      min-width: 140px;
      border-radius: 16px;
      font-weight: 900;
      padding: .68rem 1rem;
      flex: 1 1 auto;
    }

    /* ✅ NAV ARROWS: center vertically (بالنص) */
    .rs-nav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      width:44px;height:44px;
      border-radius:14px;
      background: rgba(4,10,22,.62);
      border: 1px solid rgba(212,175,55,.55);
      color:#fff;
      display:none;
      place-items:center;
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
      cursor:pointer;
    }
    @media (min-width: 992px){
      .rs-nav{ display:grid; }
    }
    .rs-nav:hover{ border-color: rgba(241,211,122,.85); }
    .rs-nav.prev{ inset-inline-start: 14px; }
    .rs-nav.next{ inset-inline-end: 14px; }

    [dir="rtl"] .rs-nav.prev svg,
    [dir="rtl"] .rs-nav.next svg{
      transform: scaleX(-1);
    }

    @media (max-width: 575.98px){
      .rs-controls{ gap:10px; }
      .rs-picks{ width:100%; }
      .rs-actions{ width:100%; }
      .rs-btn{ width:100%; }
    }
	
	/* ====== Sadaqat Section ====== */
#sadaqat{ margin-top:28px; }

.sadaqat-wrap{
  background: rgba(4,10,22,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
}

.sadaqat-title{
  text-align:center;
  margin-bottom: 12px;
}
.sadaqat-title h3{
  margin:0;
  color: var(--gold2);
  font-weight: 900;
}
.sadaqat-title p{
  margin:.25rem 0 0;
  color: rgba(255,255,255,.70);
  font-size:.9rem;
}

/* Left list */
.sadaqat-list{
  display:flex;
  flex-direction:column;
  gap:10px;
   max-height: 290px;       /* ≈ ارتفاع 4 عناصر */
  overflow-y: auto;
  padding-inline-end: 6px; /* مسافة خفيفة للسكروول */
}

/* تحسين شكل السكروول */
.sadaqat-list::-webkit-scrollbar{
  width: 6px;
}
.sadaqat-list::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.sadaqat-list::-webkit-scrollbar-thumb{
  background: rgba(212,175,55,.7);
  border-radius: 10px;
}
.sadaqat-list::-webkit-scrollbar-thumb:hover{
  background: rgba(241,211,122,.9);
}

/* نفس السلوك على الجوال */
@media (max-width: 991.98px){
  .sadaqat-list{
    max-height: 320px; /* قريب من 4 عناصر على الموبايل */
  }
}

.sadaqa-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
  cursor:pointer;
  transition: .15s ease;
}
.sadaqa-item:hover{
  border-color: rgba(212,175,55,.45);
  transform: translateY(-1px);
}
.sadaqa-item.active{
  background: rgba(212,175,55,.10);
  border-color: rgba(241,211,122,.85);
}

.sadaqa-item .meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.2;
}
.sadaqa-item .name{
  font-weight:900;
  color:#fff;
}
.sadaqa-item .hint{
  font-size:.82rem;
  color: rgba(255,255,255,.68);
}

.sadaqa-badge{
  min-width: 44px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,175,55,.55);
  color: var(--gold2);
  background: rgba(255,255,255,.06);
}

/* Right box */
.sadaqat-box{
  height: 100%;
  border-radius: 22px;
  padding: 16px;
  background: rgba(4,10,22,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

.sadaqat-box .box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.sadaqat-box .box-head .picked{
  font-weight: 900;
  color: var(--gold2);
}
.sadaqat-box .box-head .small{
  color: rgba(255,255,255,.65);
  font-size:.82rem;
}

.sadaqat-actions{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.sadaqat-actions .btn-gold{
  flex:1 1 auto;
  border-radius: 16px;
}

@media (max-width: 991.98px){
  .sadaqat-wrap{ padding: 12px; }
}


    #blog-section-1{ margin-top: 28px; }

    .blog-head{ text-align:center; margin-bottom: 14px; }
    .blog-head h3{ margin:0; color: var(--gold2); font-weight: 900; }
    .blog-head p{ margin:.25rem 0 0; color: rgba(255,255,255,.70); font-size:.9rem; }

    .blog-slider{ position:relative; }
    @media (min-width: 992px){
      .blog-slider{ padding-inline: 70px; }
    }

    .blog-track{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding: 8px 4px 12px;
      -webkit-overflow-scrolling: touch;
    }
    .blog-track::-webkit-scrollbar{ height: 10px; }
    .blog-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; }

    .blog-card{
      scroll-snap-align: start;
      flex: 0 0 100%;
      position: relative;
      border-radius: 18px;
      padding: 10px;
      background: rgba(4,10,22,.55);
      border: 1px solid rgba(212,175,55,.55);
      box-shadow: 0 26px 70px rgba(0,0,0,.22);
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: .18s ease;
    }
    .blog-card:hover{ transform: translateY(-2px); border-color: rgba(241,211,122,.95); }

    @media (min-width: 992px){
      .blog-card{ flex: 0 0 calc((100% - 28px) / 3); }
	  .blog-track{
		overflow-x: auto;          /* بدل hidden */
		justify-content: flex-start;/* بدل center */
		scroll-snap-type: x mandatory;
		padding-inline: 10px;      /* عشان ما ينقص طرف الكارد */
	  }
	  .blog-card{
		flex: 0 0 calc((100% - 28px) / 3);
	  }
    }

    .blog-thumb{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(212,175,55,.55);
      background: rgba(255,255,255,.04);
    }
    .blog-thumb img{
      width:100%;
      height: 160px;
      object-fit: cover;
      display:block;
    }

    .blog-body{ padding: 10px 6px 8px; text-align:center; }
    .blog-title{ margin: 8px 0 2px; font-weight: 900; color:#fff; font-size: 1.05rem; }
    .blog-sub{ margin:0; color: rgba(255,255,255,.72); font-size:.86rem; }
    .blog-underline{ width: 46px; height: 3px; border-radius: 999px; background: rgba(212,175,55,.75); margin: 10px auto 0; }

    /* arrows like screenshot */
    .blog-nav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      width:44px;height:44px;
      border-radius: 14px;
      background: rgba(4,10,22,.62);
      border: 1px solid rgba(255,255,255,.14);
      color:#fff;
      display:none;
      place-items:center;
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
      cursor:pointer;
    }
    @media (min-width: 992px){ .blog-nav{ display:grid; } }
    .blog-nav:hover{ border-color: rgba(212,175,55,.55); }
    .blog-nav.prev{ inset-inline-start: 14px; }
    .blog-nav.next{ inset-inline-end: 14px; }
    [dir="rtl"] .blog-nav.prev svg,
    [dir="rtl"] .blog-nav.next svg{ transform: scaleX(-1); }

    @media (max-width: 575.98px){
      .blog-thumb img{ height: 150px; }
    }


    /* ====== Blog Section (UPDATED - big carousel) ====== */
    .blog2-head h3{ color: var(--gold2); font-weight: 900; }
    .blog2-head p{ color: rgba(255,255,255,.70); font-size:.9rem; }

    .blog2-wrap{ position:relative; border-radius: 22px; padding: 10px 56px 18px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.10); }
    @media (max-width: 991.98px){ .blog2-wrap{ padding: 10px 12px 18px; } }

    .blog2-track{
      display:flex;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;
      gap: 0;
    }
    .blog2-track::-webkit-scrollbar{ height: 10px; }
    .blog2-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }

    .blog2-slide{ flex: 0 0 100%; scroll-snap-align:start; padding: 0 10px; }
    @media (max-width: 991.98px){ .blog2-slide{ padding: 0; } }

    .blog2-card{
      background: rgba(7, 14, 30, .88);
      border: 1px solid rgba(212,175,55,.22);
      border-radius: 20px;
      overflow:hidden;
      height: 100%;
      box-shadow: 0 10px 40px rgba(0,0,0,.35);
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease;
    }
    .blog2-card:hover{ transform: translateY(-2px); border-color: rgba(241,211,122,.75); }

    .blog2-thumb img{ width:100%; height: 280px; object-fit: cover; display:block; }
    @media (max-width: 991.98px){ .blog2-thumb img{ height: 210px; } }

    .blog2-body{ padding: 16px 18px 18px; }
    .blog2-title{ margin:0 0 6px; font-weight: 900; color:#fff; }
    .blog2-text{ margin:0; color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.7; }

    .blog2-nav{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      display:grid;
      place-items:center;
      border-radius: 999px;
      border: 1px solid rgba(212,175,55,.55);
      background: rgba(212,175,55,.12);
      color:#fff;
      z-index: 5;
    }
    .blog2-nav:hover{ background: rgba(212,175,55,.18); }
    .blog2-nav.prev{ inset-inline-start: 10px; }
    .blog2-nav.next{ inset-inline-end: 10px; }
    @media (max-width: 991.98px){ .blog2-nav{ display:none; } }

    .blog2-dots{ display:flex; justify-content:center; gap: 8px; margin-top: 12px; }
    .blog2-dot{ width: 28px; height: 4px; border-radius: 999px; border:0; background: rgba(212,175,55,.25); }
    .blog2-dot.is-active{ background: rgba(212,175,55,.95); }
	.video-box {
    position: relative;
    border-radius: 20px;
	padding:20px;
    overflow: hidden;
    background: #040a16;
    border: 1px solid rgba(214,179,106,.35);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
	}
	.video-box video{
		width:100%;
	}

    /* ====== Zakat Calculator (merged) ====== */
#zakatCalc{
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --text:#fff;
  --muted: rgba(255,255,255,.70);
  --good:#31c48d;
  --bad:#f05252;
  --radius:18px;
}

#zakatCalc .z-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  overflow:hidden;
}
#zakatCalc .z-card .z-card-inner{padding:16px}
@media (min-width: 992px){ #zakatCalc .z-card .z-card-inner{padding:18px} }

#zakatCalc .hero{
  padding:14px;
  border-radius: 22px;
  background:
    radial-gradient(900px 300px at 30% 0%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
}
#zakatCalc .muted{color:var(--muted)}
#zakatCalc .mini{font-size:.86rem}

#zakatCalc .form-control,
#zakatCalc .form-select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: .62rem .85rem;
}
#zakatCalc .form-control::placeholder{color:rgba(255,255,255,.42)}
#zakatCalc .form-control:focus,
#zakatCalc .form-select:focus{
  border-color: rgba(241,211,122,.85);
  box-shadow: 0 0 0 .18rem rgba(212,175,55,.18);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
#zakatCalc label.form-label{margin-bottom:.35rem}

#zakatCalc .form-switch .form-check-input{
  width: 2.8rem;
  height: 1.45rem;
  cursor:pointer;
  background-color: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
}
#zakatCalc .form-switch .form-check-input:checked{
  background-color: rgba(212,175,55,.55);
  border-color: rgba(241,211,122,.75);
}

#zakatCalc .badge-soft{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:.42rem .7rem;
  border-radius:999px;
}
#zakatCalc .pill{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px 14px;
}

#zakatCalc .sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#zakatCalc .sec-title{font-size:1.05rem;font-weight:900;margin:0}
#zakatCalc .help{font-size:.82rem;color:rgba(255,255,255,.62)}

#zakatCalc .total-box{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 12px 14px;
}
#zakatCalc .total-key{color:rgba(255,255,255,.72)}
#zakatCalc .total-val{font-weight:900; letter-spacing:.2px}

#zakatCalc .sep{height:1px;background:rgba(255,255,255,.10);margin:12px 0}

#zakatCalc .btn-soft{
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.42);
  color:#fff;
  border-radius: 14px;
  padding: .55rem .9rem;
  font-weight:900;
}
#zakatCalc .btn-soft:hover{background: rgba(212,175,55,.20); color:#fff}

#zakatCalc .grand{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(212,175,55,.14), transparent 60%),
    radial-gradient(700px 240px at 90% 0%, rgba(241,211,122,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
}
#zakatCalc .grand #grand_total{font-size:1.35rem}

/* Tabs layout */
#zakatCalc .zakat-layout{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #zakatCalc .zakat-layout{ grid-template-columns: 280px 1fr 340px; align-items:start; }
}
#zakatCalc .z-tabs{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 10px;
}
#zakatCalc .z-tablist{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 360px;
  overflow:auto;
  padding-inline-end: 6px;
}
#zakatCalc .z-tab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  transition: .15s ease;
  user-select:none;
}
#zakatCalc .z-tab:hover{ border-color: rgba(212,175,55,.55); transform: translateY(-1px); }
#zakatCalc .z-tab.active{ background: rgba(212,175,55,.10); border-color: rgba(241,211,122,.85); }
#zakatCalc .z-tab .name{ font-weight:900; }
#zakatCalc .z-tab .hint{ font-size:.82rem; color: rgba(255,255,255,.68); }
#zakatCalc .z-badge{
  min-width: 44px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.55);
  color: var(--gold2);
  background: rgba(255,255,255,.06);
}
@media (max-width: 991.98px){
  #zakatCalc .zakat-layout{ grid-template-columns: 1fr; }
  #zakatCalc .z-tablist{ flex-direction:row; max-height:none; overflow-x:auto; overflow-y:hidden; padding-inline-end:0; padding-bottom:6px; }
    #zakatCalc .z-tab{ min-width: 48%; flex-direction: column;  }
  #zakatCalc .z-tab .hint{display:none; }
  /* make the calculator fill the screen width on mobile */
  #zakatCalc{ max-width: 100% !important; padding-inline: 10px; }
  #zakatCalc .hero .form-select{ min-width: 0 !important; width: 100%; }
}

/* Actions row inside the final total box */
#zakatCalc .zakat-summary-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#zakatCalc .zakat-summary-actions .btn-cart-mini{
  width: 46px;
  height: 46px;
}

#zakatCalc .z-pane{ display:none; }
#zakatCalc .z-pane.active{ display:block; }

@media (max-width: 576px){
  #zakatCalc .sec-title{font-size:1rem}
  #zakatCalc .badge-soft{font-size:.82rem}
}
.site-footer{
  background: linear-gradient(
    180deg,
    rgba(4,10,22,.55),
    rgba(4,10,22,.92)
  );
  border-top: 1px solid rgba(212,175,55,.35);
  backdrop-filter: blur(12px);
}

.footer-text{
  font-size:.9rem;
  color: rgba(255,255,255,.7);
  margin:0;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.footer-links a{
  color:#fff;
  font-size:.9rem;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:.2s ease;
}

.footer-links a:hover{
  color:#f1d37a;
  border-color:#f1d37a;
}

.footer-copy{
  font-size:.85rem;
  color: rgba(255,255,255,.65);
}

.footer-copy span{
  color:#d4af37;
  font-weight:600;
}

/* الحالة العادية */
#mobileDockBar{
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* لما ينزل لتحت */
#mobileDockBar.dock-bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 1050;

  /* نفس ستايل الصفحة */
  background: rgba(7, 12, 25, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  padding: 10px 14px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* إخفاء اللوجو عند dock-bottom */
#mobileDockBar.dock-bottom .brand{
  display: none !important;
}

/* خلي الأزرار يمين/شمال حسب الاتجاه */
 #mobileDockBar.dock-bottom{
  justify-content: space-evenly;
}

/* (اختياري) حتى ما يغطي آخر الصفحة */
@media (max-width: 991.98px){
  body.has-dock-bottom{
    padding-bottom: 76px; /* عدليها حسب ارتفاع الشريط */
  }
}




.nisab-info{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.nisab-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
}

/* ===== Zakat Hero Responsive ===== */
.zakat-hero{ padding: 18px 18px; }

.zakat-hero-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: center;
}

.zakat-hero-title{
  min-width: 0;
}

.zakat-hero-controls{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.zakat-field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
}

.zakat-field .badge-soft{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
}

.zakat-field .form-select{
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 8px;
}

/* Small screens */
@media (max-width: 992px){
  .zakat-hero-grid{
    grid-template-columns: 1fr;
  }
  .zakat-hero-controls{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px){
  .zakat-hero-controls{
    grid-template-columns: 1fr;
  }
  .zakat-field{
    padding: 10px 10px;
  }
}

/* ===== HERO: Mobile keep 2 columns (title right, controls left) ===== */
@media (max-width: 992px){
  .zakat-hero-grid{
    grid-template-columns: 1fr 1fr !important; /* عنوان + كنترولز جنب بعض */
    align-items: start;
  }

  /* عنوان */
  .zakat-hero-title{
    order: 2;                 /* في RTL بيكون يمين بصرياً */
    text-align: start;
  }

  /* كنترولز */
  .zakat-hero-controls{
    order: 1;
    grid-template-columns: 1fr !important;  /* العملة فوق نوع السنة */
  }
}

/* على شاشات صغيرة جداً نخليها عمود واحد */
@media (max-width: 520px){
  .zakat-hero-grid{
    grid-template-columns: 1fr !important;
  }
  .zakat-hero-title,
  .zakat-hero-controls{
    order: initial;
  }
  .zakat-hero-controls{
    grid-template-columns: 1fr !important;
  }
}


/* ===== Equal height for left + right cards on desktop ===== */
@media (min-width: 992px){
  .zakat-layout{
    align-items: stretch; /* يخلي الأعمدة تتمدد بنفس الارتفاع */
  }

  /* خلي كارد الإجمالي وكارد أنواع الزكاة يملؤوا نفس الارتفاع */
  .zakat-layout > .z-card.grand,
  .zakat-layout > .z-tabs{
    height: 100%;
  }

  /* إذا z-tabs فيه كارد داخلي */
  .z-tabs,
  .z-tabs .z-tablist{
    height: 100%;
  }

  /* لو أنواع الزكاة عبارة عن tablist داخل صندوق */
  .z-tabs .z-tablist{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: stretch;
  }

  .z-tabs .z-tab{
    flex: 1 1 auto; /* يخلي العنصرين يتوزعوا بالطول */
  }

  /* كارد الإجمالي: خلّيه يتمدد */
  .z-card.grand{
    display: flex;
  }
  .z-card.grand .z-card-inner{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* خلي محتوى الإجمالي يتمدد وزر "اخرج زكاتك" يضل تحت */
  .z-card.grand .total-box{
    margin-top: auto;
  }
}


/* ============================
   FIX: "أنواع الزكاة" لا تكبر بالطول
   السبب: flex:1 في CSS القديم
============================ */

/* على الديسكتوب: خلي صندوق z-tabs يطوّل مع العمود،
   بس العناصر الداخلية (التابات) ما تتمدد */
@media (min-width: 992px){
  #zakatCalc .zakat-layout{
    align-items: stretch;
  }

  #zakatCalc .zakat-layout > .z-tabs{
    height: 100%;
  }


  #zakatCalc .z-tabs,
  #zakatCalc .z-tabs .z-tablist{
    height: 100%;
  }

  /* ✅ مهم: لا تمددي كل تاب بالطول */
  #zakatCalc .z-tabs .z-tablist{
    justify-content: flex-start !important;
  }
  #zakatCalc .z-tabs .z-tab{
    flex: 0 0 auto !important; /* بدل 1 1 auto */
  }
}
@media (max-width: 992px){
  .zakat-hero-controls{
	  display:flex;
  }
  .zakat-field{
	  width:50%;
  }
}


/* ===== RS Country label (instead of select) ===== */
.rs-meta{
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}

.rs-country{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.rs-pin{
  width:18px;
  height:18px;
  color: var(--gold2); /* ذهبي */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

.rs-country-name{
  font-weight: 900;
  color:#fff;
  font-size: .92rem;
  letter-spacing: .2px;
}

/* الكارد كله */
.rs-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* الصورة */
.rs-thumb{
  flex: 0 0 auto;
}

/* جسم الكارد */
.rs-body{
  display: flex;
  flex-direction: column;
  height: 100%;
}


.rs-desc{
  flex-grow: 1;       
}

.rs-controls{
  margin-top: auto;    
}


@media (min-width: 992px){

/* 1) خليه يمد الكروت بنفس الارتفاع داخل السطر */
#ramadan-special .rs-track{
  align-items: stretch;
}

/* 2) الغي height:100% اللي بتلخبط لأن الأب مش محدد ارتفاعه */
#ramadan-special .rs-card{
  height: auto !important;
  display: flex;
  flex-direction: column;
}

/* 3) وحّد ارتفاع الصورة (أهم نقطة) */
#ramadan-special .rs-thumb img{
  width: 100%;
  height: 230px;          /* عدلي الرقم لو بدك */
  object-fit: cover;
  display: block;
}

/* موبايل: ارتفاع أقل */
@media (max-width: 575.98px){
  #ramadan-special .rs-thumb img{
    height: 170px;
  }
}

/* 4) خلي جسم الكارد يتمدد، والأزرار تضل تحت */
#ramadan-special .rs-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#ramadan-special .rs-desc{
  flex: 1 1 auto;         /* الوصف يتمدد */
}

#ramadan-special .rs-controls{
  margin-top: auto;       /* يثبت الكنترول/الأزرار تحت */
}
}

.footer-simple-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.footer-simple-title{
  font-weight: 800;
  color: var(--gold2);
  margin-bottom: 4px;
  letter-spacing: .3px;
}

.footer-simple-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ddd;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  transition: color .15s ease, transform .15s ease;
}

.footer-simple-item svg{
  color: var(--gold2);
}

.footer-simple-item:hover{
  color:#fff;
  transform: translateY(-1px);
}


.yt-lite{
  position: relative;
  display: block;
  width: 100%;
  height: 315px;
  border: 0;
  padding: 0;
  cursor: pointer;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 30%;

  border-radius: 16px;
  overflow: hidden;
}

/* زر التشغيل */
.yt-lite .play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
}

/* الشكل الأحمر (مستطيل دائري مثل YouTube) */
.yt-lite .play::before{
  content:"";
  width:72px;
  height:50px;
  background:#ff0000;               /* YouTube Red */
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}

/* المثلث الأبيض */
.yt-lite .play::after{
  content:"";
  position:absolute;
  margin-left:4px;
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
}

/* hover (اختياري – إحساس تفاعلي) */
.yt-lite:hover .play::before{
  background:#e60000;
  transform:scale(1.05);
}