:root{
      --gold:#d4af37;
      --gold2:#f2d06b;
      --blue:#274085;
      --cardWhite: rgba(255,255,255,.94);
      --shadow: 0 18px 45px rgba(0,0,0,.40);
      --radius: 22px;
    }
	
	#contact_us{
		display:none;
	}

	.fixed {
    background-color: #274085;
	
	}
    html,body{
      height:100%;
      margin:0;
      font-family:"Cairo", sans-serif;
      color:#fff;
      background: url("/img/gift/bk2.webp") #112b3b no-repeat top center fixed;
      background-size: cover;
    }

    .page-overlay{
      min-height: 100vh;
      background: radial-gradient(ellipse at top, rgba(0,0,0,.12), rgba(0,0,0,.50));
      padding-bottom: 60px;
    }

    .header{
      text-align:center;
      padding: 0px 12px 10px;
    }
    .brand{
      max-width: 140px;
      display:block;
      margin: 0 auto 10px;
      opacity:.95;
    }
    .title{
		font-family: swissramedium;
      font-weight:900;
      color: var(--gold);
      text-shadow: 0 10px 30px rgba(0,0,0,.55);
      margin:0;
      font-size: 2.2rem;
    }
	.card-inner , .includesModal {
		font-family: swissramedium;
	}
    .subtitle{
		font-family: swissramedium;
      margin: 10px 0 0;
      opacity:.95;
      text-shadow: 0 8px 20px rgba(0,0,0,.45);
    }

    .gifts-wrap{
      max-width: 1150px;
      margin: 0 auto;
      padding: 18px 12px 8px;
    }

    .slider{ position:relative; }

    .viewport{
      overflow:hidden;
      border-radius: 28px;
      padding: 8px;
    }

    .track{
      display:flex;
      gap: 22px;
      will-change: transform;
      transition: transform .45s cubic-bezier(.2,.8,.2,1);
      padding: 10px 6px;
    }

    .slide{
      flex: 0 0 300px;
      min-width: 300px;
    }

    .navBtn{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(212,175,55,.70);
      background: rgba(19,41,75,.70);
      color: #fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index: 10;
      box-shadow: 0 14px 30px rgba(0,0,0,.35);
      user-select:none;
      transition:.2s;
    }
    .navBtn:hover{ transform: translateY(-50%) scale(1.06); }
    .navBtn:disabled{ opacity:.35; cursor:not-allowed; }
   
   /* RTL */
[dir="rtl"] .navBtn.prev{ right:-10px; left:auto; }
[dir="rtl"] .navBtn.next{ left:-10px; right:auto; }

/* LTR */
[dir="ltr"] .navBtn.prev{ left:-10px; right:auto; }
[dir="ltr"] .navBtn.next{ right:-10px; left:auto; }


    @media (max-width: 991.98px){
      .navBtn{ display:none; }
      .viewport{ overflow:visible; }
      .track{ flex-direction:column; transform:none !important; }
      .slide{ flex: 0 0 auto; min-width: 100%; }
    }

    .gift-card{
      background: var(--cardWhite);
      border-radius: var(--radius);
      border: 2px solid rgba(212,175,55,.85);
      box-shadow: var(--shadow);
      color:#1d2330;
      overflow:hidden;
      position:relative;
    }

    .gift-card.is-featured{
      background: rgba(39,64,133,.92);
      color:#fff;
      border-color: rgba(212,175,55,.70);
    }

    .card-inner{
      padding: 16px 16px 18px;
    }

    .gift-name{
      text-align:center;
      font-weight:900;
      margin: 2px 0 10px;
      font-size: 1.05rem;
      opacity:.95;
    }

    .img-wrap{
      width: 100%;
      height: 230px;
      border-radius: 14px;
      overflow:hidden;
      position:relative;
      border: 1px solid rgba(0,0,0,.06);
      background: rgba(255,255,255,.5);
    }
    .gift-card.is-featured .img-wrap{
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
    }

    .img-wrap img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition: opacity .55s ease, transform .65s ease, filter .65s ease;
      backface-visibility:hidden;
    }
    .img-before{ opacity:1; transform:scale(1); filter:saturate(.92) contrast(.98); }
    .img-after{ opacity:0; transform:scale(1.08); filter: blur(6px) saturate(1.3) contrast(1.05); }

    .active-gift .img-before{ opacity:0; transform:scale(.96); filter: blur(6px) saturate(.9); }
    .active-gift .img-after{ opacity:1; transform:scale(1); filter: blur(0) saturate(1.12) contrast(1.05); }

    .magic-overlay{
      position:absolute;
      inset:-40%;
      pointer-events:none;
      opacity:0;
      background:
        radial-gradient(circle at 12% 20%, rgba(212,175,55,.95) 0 2.2px, transparent 3.8px),
        radial-gradient(circle at 28% 35%, rgba(255,255,255,.85) 0 1.7px, transparent 3.6px),
        radial-gradient(circle at 45% 18%, rgba(212,175,55,.75) 0 2.0px, transparent 4.0px),
        radial-gradient(circle at 62% 30%, rgba(255,255,255,.75) 0 1.6px, transparent 3.8px),
        radial-gradient(circle at 78% 22%, rgba(212,175,55,.85) 0 2.2px, transparent 4.2px),
        radial-gradient(circle at 18% 62%, rgba(255,255,255,.70) 0 1.6px, transparent 4.2px),
        radial-gradient(circle at 40% 75%, rgba(212,175,55,.80) 0 2.1px, transparent 4.6px),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.70) 0 1.5px, transparent 4.0px),
        radial-gradient(circle at 88% 58%, rgba(212,175,55,.80) 0 2.0px, transparent 4.6px);
      mix-blend-mode: screen;
      filter: blur(.2px);
      transform: rotate(0deg);
    }
    .magic-overlay::before{
      content:"";
      position:absolute;
      inset:-10%;
      background:
        radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 2.8px),
        radial-gradient(circle, rgba(212,175,55,.20) 0 1.2px, transparent 3px);
      background-size: 38px 38px, 54px 54px;
      opacity:0;
      filter: blur(.3px);
    }

    .active-gift.magic-play .magic-overlay{
      opacity:1;
      animation: sparkle 1.35s ease-out forwards;
    }
    .active-gift.magic-play .magic-overlay::before{
      opacity:1;
      animation: dustMove 1.6s ease-out forwards;
    }

    @keyframes sparkle{
      0%   { transform:scale(.88) rotate(0deg);  opacity:0;   filter:blur(6px); }
      15%  { opacity:1;  filter:blur(1.2px); }
      55%  { transform:scale(1.10) rotate(12deg); opacity:1; }
      100% { transform:scale(1.35) rotate(26deg); opacity:0; filter:blur(8px); }
    }
    @keyframes dustMove{
      0%   { transform:translateY(14px) translateX(-10px) scale(.95); opacity:0; }
      20%  { opacity:1; }
      100% { transform:translateY(-22px) translateX(16px) scale(1.12); opacity:0; }
    }

    .small-phrase{
      text-align:center;
      margin: 10px 0 10px;
      font-size: .85rem;
      opacity: .85;
      line-height: 1.35;
    }
    .gift-card.is-featured .small-phrase{ opacity:.9; }

    .includesBtn{
      width:100%;
      border-radius: 14px;
      padding: 8px 12px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.75);
      font-weight: 800;
      font-size: .9rem;
      margin: 6px 0 10px;
      cursor:pointer;
    }
    .gift-card.is-featured .includesBtn{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.22);
      color:#fff;
    }

    .row-price{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 12px;
      margin-top: 6px;
      margin-bottom: 12px;
    }

    .price{
      font-weight:900;
      color: var(--gold);
      font-size: 1.5rem;
      min-width: 80px;
      text-align:center;
    }

    .qty{
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .qtyBtn{
      width: 32px;
      height: 28px;
      border-radius: 7px;
      border: 1px solid rgba(0,0,0,.18);
      background: rgba(255,255,255,.70);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      cursor:pointer;
      user-select:none;
    }
    .gift-card.is-featured .qtyBtn{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
      color:#fff;
    }
    .qtyVal{
      min-width: 18px;
      text-align:center;
      font-weight:800;
      opacity:.9;
    }

    .donateBtn{
      width: 100%;
      border: none;
      border-radius: 999px;
      padding: 9px 14px;
      font-weight: 900;
      color:#1a1a1a;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
      transition: .2s;

      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
    }
    .donateBtn:hover{ transform: translateY(-1px); }
    .donateBtn.isSelected{ background: linear-gradient(90deg, #f2d06b, #d4af37); }

    .btnIconWrap{
      position: relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(255,255,255,.25);
      border: 1px solid rgba(0,0,0,.10);
      flex: 0 0 auto;
    }
    .gift-card.is-featured .btnIconWrap{
      background: rgba(0,0,0,.18);
      border-color: rgba(255,255,255,.18);
    }
    .btnIconWrap i{
      font-size: 18px;
      line-height: 1;
      color:#1a1a1a;
    }
    .plusBadge{
      position:absolute;
      top: -6px;
      left: -6px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      font-size: 12px;
      background: rgba(19,41,75,.95);
      color: #fff;
      border: 2px solid rgba(255,255,255,.85);
      user-select:none;
    }

    .btnText{ display:inline-block; transform: translateY(1px); }

    .donateBar{
      position: relative;
      width: min(1050px, 92vw);
      margin: 26px auto 0;
      background: rgba(19,41,75,.78);
      border: 2px solid rgba(212,175,55,.65);
      border-radius: 26px;
      padding: 18px 18px;
      box-shadow: 0 22px 55px rgba(0,0,0,.50);
      backdrop-filter: blur(6px);
    }

    .donateBarInner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .totalBlock{ text-align:center; flex: 1 1 240px; }
    .totalLabel{ opacity:.9; margin:0 0 4px; font-size: .95rem; }
    .totalValue{ margin:0; font-weight: 900; color: var(--gold); font-size: 2.2rem; line-height:1.1; }
    .totalSub{ margin: 4px 0 0; opacity:.85; font-size: .85rem; }

    .donateBarBtn{
      flex: 0 0 auto;
      min-width: 210px;
      border:none;
      border-radius: 999px;
      padding: 12px 18px;
      font-weight: 900;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      color:#1a1a1a;
      box-shadow: 0 16px 35px rgba(0,0,0,.30);
    }

    @media (max-width: 575.98px){
      .donateBar{ border-radius: 18px; padding: 14px 14px; }
      .donateBarBtn{ width: 100%; min-width: unset; }
      .totalValue{ font-size: 1.9rem; }
    }

    .includesModal .modal-content{
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(212,175,55,.45);
      background: rgba(19,41,75,.92);
      color:#fff;
      backdrop-filter: blur(8px);
    }
    .includesModal .modal-header{ border-bottom: 1px solid rgba(255,255,255,.10); }
    .includesModal .btn-close{ filter: invert(1); opacity:.9; }
    .includesModal .carousel-inner{ border-radius: 14px; overflow:hidden; }
    .includesModal .comp-img{ width:100%; height: 210px; object-fit: cover; display:block; }
    .includesModal .comp-caption{ padding: 10px 6px 2px; text-align:center; }
    .includesModal .comp-title{ font-weight: 900; color: var(--gold); margin-bottom: 6px; }
	

	.gift-toast{
		font-family: swissramedium;
    position: fixed;
    z-index: 99999;
    right: 18px;
    top: 18px;
    width: min(360px, calc(100vw - 36px));
  }
  
  	@media (min-width: 992px){
		.header{
			margin-top:80px;
		}
		.gift-toast{
			top: 98px;
		}	
	}
	
  [dir="rtl"] .gift-toast{ left: auto; right: 18px; text-align:right }
   [dir="ltr"] .gift-toast{ right: auto; left: 18px; }

  .gift-toast-inner{
    background: rgba(19,41,75,.95);
    border: 1px solid rgba(212,175,55,.55);
    border-radius: 16px;
    padding: 12px 14px;
    color:#fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
  .gift-toast-title{
    font-weight: 900;
    color: #f2d06b;
    margin-bottom: 6px;
  }
  .gift-toast-body{
    opacity: .95;
    line-height: 1.6;
    font-size: 14px;
  }
  
/* الحركة */
.cart-bump {
  transform: scale(1.35);
}

/* ألوان التحويل */
.cart-gold {
  background-color: #d4af37 !important; /* ذهبي */
  color: #000 !important;
}

.cart-red {
  background-color: #dc3545 !important; /* أحمر */
  color: #fff !important;
}

/* انتقال ناعم */
.top_cart .badge {
  transition: 
    transform .15s ease,
    background-color .25s ease,
    color .25s ease;
}