/* =======================================================
   CLASSY — Optimized CSS (tokens unified, duplicates removed)
   Sections:
   1) Tokens / Variables
   2) Title Animation (.saji_titles)
   3) Product Grid & Cards
   4) Header Overrides (scoped to #header)
   5) Global Add-to-Cart Rounding (CSS-only)
   6) Reduced Motion
   ======================================================= */


/* =============== 1) TOKENS / VARIABLES ================= */
:root{
  /* Brand */
  --brand-1:#29927c;     /* teal */
  --brand-2:#fbe505;     /* yellow */
  --brand-3:#4a6f41;     /* olive */

  /* Header */
  --ink:#e9fcf5;
  --ink-dim:#c2e7da;
  --header-border: color-mix(in srgb, var(--brand-1) 40%, transparent);
  --header-glow: 0 0 24px color-mix(in srgb, var(--brand-1) 45%, #000 55%);
  --accent-glow: 0 0 26px color-mix(in srgb, var(--brand-2) 40%, #000 60%);

  /* Cards */
  --title-on-card:#e9fcf5;
  --price-on-card:#ffffff;
  --card-grad: linear-gradient(
      160deg,
      #0b1513 0%,
      #0f1d19 45%,
      color-mix(in oklab, var(--brand-1) 22%, #0f1d19) 100%
  );
  --card-border: color-mix(in oklab, var(--brand-1) 40%, #0e1815);

  /* Availability */
  --ok:#2fbf93;
  --no:#c94a4a;

  /* Buttons */
  --btn-radius: 16px; /* set 12/16/18/20 or 9999px for pill */
}

/* Optional per-section brand aliases (no duplicates) */
.saji_titles{
  --c1: var(--brand-1);
  --c2: var(--brand-2);
  --c3: var(--brand-3);
}


/* =============== 2) TITLE ANIMATION ==================== */
.saji_titles .saji_anime{
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeSlide .8s ease forwards, textSheen 6s linear infinite, textBreathe 4s ease-in-out infinite;
}
.saji_titles .saji_anime::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1));
  background-size:200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineGrow .9s ease forwards .2s, underlineLoop 3.5s linear infinite 1.1s;
}

/* Keyframes */
@keyframes fadeSlide{ from{opacity:0; transform: translateY(14px);} to{opacity:1; transform: translateY(0);} }
@keyframes textSheen{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
@keyframes textBreathe{ 0%,100%{transform:translateY(0) scale(1); filter:brightness(1);} 50%{transform:translateY(-1px) scale(1.01); filter:brightness(1.06);} }
@keyframes underlineGrow{ to{ transform: scaleX(1); } }
@keyframes underlineLoop{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }


/* =============== 3) PRODUCT GRID & CARDS =============== */
.s-products-list-wrapper{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
}

.product-entry{
  background: var(--card-grad);
  border:1px solid var(--card-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:none;
}

/* Image */
.product-entry__image{
  aspect-ratio: 3 / 4;
  border-bottom:1px solid color-mix(in oklab, var(--brand-1) 25%, #0e1815);
}
.product-entry__image img{ width:100%; height:100%; object-fit:cover; }

/* Availability badge */
.product-entry__image small{
  position:absolute; inset:auto auto 0 0; transform: translate(8px,-8px);
  display:inline-flex; align-items:center; gap:6px;
  padding:.28rem .55rem !important; font-size:.76rem;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}
.product-entry__image .sicon-check-circle2{ color: var(--ok); }
.product-entry__image .sicon-cancel-circle{ color: var(--no); }

/* Out of stock */
.product-entry.is-out .product-entry__image img,
.product-entry.out-of-stock .product-entry__image img{
  filter: grayscale(.45) brightness(.92);
}
.product-entry__image .productout-stock{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.42rem .72rem; border-radius:12px;
  font-weight:800; font-size:.92rem; letter-spacing:.3px;
  color: var(--no); border:1px solid var(--no);
  background: rgba(0,0,0,.32);
}
.product-entry__image .productout-stock + .productout-stock{ display:none; }

/* Content */
.content-wrap{ padding:14px !important; background: transparent; }
.product-entry__content{ display:flex; flex-direction:column; gap:10px; }

/* Title / Price */
.product-entry__title{
  color: var(--title-on-card) !important;
  font-weight:800 !important;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.price-wrapper strong{
  color: var(--price-on-card);
  font-weight:900;
  font-size: clamp(15px, 1.9vw, 18px);
  letter-spacing:.1px;
}

/* Wishlist: hide in grid */
.s-products-list-wrapper .product_buttons,
.s-products-list-wrapper .btn--wishlist,
.s-products-list-wrapper [aria-label*="wishlist"],
.s-products-list-wrapper .sicon-heart{ display:none !important; }

/* Icons */
.product-entry .sicon-shopping{ font-size:14px; }

/* Grid: kill transitions/animations (as you had) */
.s-products-list-wrapper .product-entry,
.s-products-list-wrapper .product-entry *{
  transition:none !important;
  animation:none !important;
  transform:none !important;
}


/* =============== 4) HEADER OVERRIDES =================== */
/* Top thin bar */
#header .top-navbar{
  backdrop-filter: saturate(140%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
}

/* Main header glass + glow */
#header .header-components{
  position: sticky !important;
  top: 0 !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: var(--header-glow) !important;
  z-index: 70 !important;
}

/* Shrink on scroll (toggle .is-scrolled on #header via your JS) */
#header .header-components-inner{ transition: padding .25s ease, transform .25s ease; }
#header.is-scrolled .header-components-inner{ transform: translateY(-2px); padding-block:.25rem !important; }
#header .min-logo img{ transition: transform .25s ease, opacity .25s ease, filter .25s ease; }
#header.is-scrolled .min-logo img{ transform: scale(.94); opacity: .95; }

/* Links + hover color */
#header .header_menu a,
#header .header-components a,
#header .header-components button{ color: var(--ink) !important; }
#header .header_menu a:hover{ color: color-mix(in srgb, var(--brand-2) 80%, var(--ink) 20%) !important; }

/* Underline animation */
#header .main-menu > li > a{ position:relative; }
#header .main-menu > li > a::after{
  content:""; position:absolute; inset-inline:12px; bottom:-6px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-1));
  transform: scaleX(0); transform-origin:right; transition: transform .35s ease; opacity:.85;
}
#header .main-menu > li:hover > a::after,
#header .main-menu > li:focus-within > a::after{ transform: scaleX(1); transform-origin:left; }

/* Submenu glass reveal */
#header .sub-menu{
  pointer-events:none; transform: translateY(6px); opacity:0; visibility:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--brand-1) 45%, transparent);
  border-top: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, #08120f 85%, transparent), transparent 120%),
    var(--header-bg) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 90;
}
#header .has-children:hover > .sub-menu,
#header .has-children:focus-within > .sub-menu{
  pointer-events:auto; transform: translateY(0); opacity:1; visibility:visible; height:auto !important;
}
#header .sub-menu a{ color: var(--ink) !important; }
#header .sub-menu li:hover > a{ color: color-mix(in srgb, var(--brand-2) 80%, var(--ink) 20%) !important; }

/* Controls */
#header .search-btn,
#header .s-user-menu-trigger,
#header .s-cart-summary-wrapper{
  border-radius: 9999px !important;
  border: 1px solid color-mix(in srgb, var(--brand-1) 50%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 8%, transparent), transparent) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.22) !important;
  transition: box-shadow .25s ease, transform .15s ease !important;
}
#header .search-btn:hover,
#header .s-user-menu-trigger:hover,
#header .s-cart-summary-wrapper:hover{ box-shadow: var(--accent-glow) !important; transform: translateY(-1px); }
#header .s-cart-summary-count{
  background: radial-gradient(circle at 30% 30%, var(--brand-2), #b39f00) !important;
  color:#0f140f !important; border:1px solid #d7c100 !important;
}

/* Bottom hairline + logo */
#header .header_menu{ border-top: 1px solid color-mix(in srgb, var(--brand-3) 35%, transparent) !important; }
#header .min-logo .navbar-brand img{ filter: drop-shadow(0 2px 12px rgba(0,0,0,.45)) !important; }

/* Focus ring */
#header a:focus-visible, #header button:focus-visible{
  outline: 2px dashed color-mix(in srgb, var(--brand-2) 85%, var(--brand-1) 15%) !important;
  outline-offset: 2px !important; border-radius: 12px !important;
}


/* =============== 5) GLOBAL ADD-TO-CART ROUNDING ======== */
/* One high-specificity rule to hit product page + grid + variants */
#app :is(
  salla-add-product-button button,
  salla-add-product-button .s-button-element,
  .product_addCart_mob button,
  .product-entry salla-add-product-button button,
  .product-entry .btn--add-to-cart button,
  .product-entry .btn--add-to-cart .s-button-element,
  .product-entry .btn--add-to-cart a,
  button.s-button-element,
  button.s-button-btn,
  button[class*="s-button"],
  a[class*="s-button"]
){
  border-radius: var(--btn-radius) !important;
  overflow: hidden !important;
}

/* Optional: make wide buttons fully pill on mobile */
@media (max-width: 768px){
  #app :is(.s-button-wide, [width="wide"] button, .product_addCart_mob button){
    border-radius: max(var(--btn-radius), 9999px) !important;
  }
}


/* =============== 6) REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  .saji_titles .saji_anime,
  .saji_titles .saji_anime::after{
    animation: none !important;
    transform: none !important;
  }
}











/* ========= FOOTER REFRESH (background, polish, attribution) ========= */

/* New background + color tokens (scoped to footer only) */
.store-footer{
  /* layered gradient with a soft highlight */
  --footer-bg:
    linear-gradient(180deg,
      color-mix(in oklab, #081410 88%, transparent) 0%,
      color-mix(in oklab, var(--brand-1, #29927c) 10%, #0b1a15) 55%,
      color-mix(in oklab, var(--brand-3, #4a6f41) 10%, #0b1a15) 100%),
    radial-gradient(1100px 520px at 50% -180px,
      color-mix(in srgb, var(--brand-2, #fbe505) 13%, transparent) 0%,
      transparent 70%);
  --footer-color: #d7efe7;
  --footer-color-dark: #d7efe7;

  /* subtle inset glow & nicer rounding */
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}

/* Soft grid pattern overlay (very subtle) */
.store-footer::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; border-radius: inherit;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 24px);
  opacity:.8;
}

/* Footer logo pop just a touch */
.store-footer .footer-logo{
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

/* Contact chips: cleaner pill look on this dark bg */
.store-footer .links-contact{
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border-radius: 9999px !important;
  padding: .45rem .75rem !important;
}

/* Payment method tiles unified */
.store-footer .payment-methods .itme-method{
  background-color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  height: 40px !important;
  width: 56px !important;
  display: inline-flex; align-items:center; justify-content:center;
}

/* Top separator line in the links area (you already have after:…) — just tone color */
.store-footer .grid.relative::after{
  border-color: rgba(255,255,255,.18) !important;
}

/* Bottom bar: tighter, clearer text */
.footer-bottom{
  border-top: 1px dashed rgba(255,255,255,.16);
}
.footer-bottom .made_perfection p,
.footer-bottom .designed-by{
  color: var(--store-description);
}

/* Attribution line */
.footer-bottom .designed-by{
  font-size: .85rem;
  margin-top: .25rem;
}
.footer-bottom .designed-by a{
  text-decoration: underline;
}

/* Mobile spacing niceties */
@media (max-width: 768px){
  .store-footer{ border-radius: 12px; }
}











/* ===========================
   PUBG Instructions Section Styling
   =========================== */
#more-content {
  background: transparent !important;
  border: none !important;
  padding: 1rem 1.5rem;
  font-family: 'Cairo', sans-serif;
  line-height: 1.8;
}

/* Headline ("كيف يمكنني شحن بطاقة ببجي؟") */
#more-content strong:first-of-type {
  display: block;
  font-size: 1.3rem;
  color: #fbe505 !important; /* yellow highlight */
  text-shadow: 0 0 8px rgba(251,229,5,.4);
  margin-bottom: 0.75rem;
  letter-spacing: .3px;
}

/* Body text (instructions) */
#more-content p {
  color: #cde8d6 !important; /* soft light olive-green tint for readability */
  font-size: 1rem;
  margin-bottom: .75rem;
}

/* Step numbers */
#more-content p::first-letter {
  color: #29927c;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Inline highlights (OK, links, etc.) */
#more-content span,
#more-content a,
#more-content strong {
  color: #44d1a8 !important; /* lighter teal highlight */
  text-shadow: 0 0 6px rgba(68,209,168,.35);
  transition: color .3s ease, text-shadow .3s ease;
}
#more-content a:hover {
  color: #fbe505 !important;
  text-shadow: 0 0 8px rgba(251,229,5,.4);
}

/* Subheading ("تفاصيل البطاقة") */
#more-content h5 {
  color: #fbe505 !important;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
  text-shadow: 0 0 8px rgba(251,229,5,.4);
}

/* Paragraph after heading */
#more-content h5 + p {
  color: #a3d3a0 !important;
  text-align: justify;
  font-size: 1rem;
}

/* Small animated glow pulse for links and keywords */
@keyframes glowPulse {
  0% { text-shadow: 0 0 6px rgba(68,209,168,.4); }
  50% { text-shadow: 0 0 12px rgba(251,229,5,.4); }
  100% { text-shadow: 0 0 6px rgba(68,209,168,.4); }
}
#more-content a,
#more-content strong {
  animation: glowPulse 3s ease-in-out infinite;
}



/* =====================================
   PUBG Info Section — Unified Brand Color
   ===================================== */
#more-content {
  background: transparent !important;
  border: none !important;
  padding: 1rem 1.5rem;
  font-family: 'Cairo', sans-serif;
  line-height: 1.9;
  color: #bdf2d8 !important; /* light, clean teal tone readable everywhere */
}

/* --- ALL text unified --- */
#more-content *,
#more-content p,
#more-content li,
#more-content strong,
#more-content span,
#more-content a,
#more-content h5 {
  color: #bdf2d8 !important;
  text-shadow: 0 0 6px rgba(41,146,124,.5);
  background: transparent !important;
  border: none !important;
}

/* --- Headings --- */
#more-content strong:first-of-type,
#more-content h5 {
  display: block;
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: .75rem;
  letter-spacing: .3px;
  text-transform: none;
}

/* --- Links --- */
#more-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease, text-shadow .3s ease;
}
#more-content a:hover {
  color: #fbe505 !important; /* brand yellow accent */
  text-shadow: 0 0 10px rgba(251,229,5,.4);
}

/* --- Step numbers --- */
#more-content p::first-letter {
  color: #fbe505;
  font-weight: 700;
  font-size: 1.05rem;
}

/* --- Optional soft pulse for readability --- */
@keyframes softPulse {
  0%,100% { text-shadow: 0 0 6px rgba(41,146,124,.4); }
  50%     { text-shadow: 0 0 10px rgba(251,229,5,.4); }
}
#more-content {
  animation: softPulse 4s ease-in-out infinite;
}





/* ==========================================
   FORCE UNIFIED TEXT COLOR INSIDE #more-content
   ========================================== */
#more-content,
#more-content * {
  all: unset; /* reset any inline styles completely */
  color: #44d1a8 !important;        /* one single color */
  font-family: 'Cairo', sans-serif !important;
  line-height: 1.8 !important;
  font-size: 1rem !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

/* restore normal flow and structure after 'all: unset' */
#more-content,
#more-content * {
  display: revert;
  white-space: normal;
}

/* Headings & strong text use the same exact tone but bold */
#more-content strong,
#more-content h1,
#more-content h2,
#more-content h3,
#more-content h4,
#more-content h5 {
  color: #44d1a8 !important;
  font-weight: 700 !important;
}

/* Links (same color, but underline for clarity) */
#more-content a {
  color: #44d1a8 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* No hover color change — keep identical */
#more-content a:hover {
  color: #44d1a8 !important;
  text-decoration: underline !important;
}









/* ==============================
   #more-content — ONE COLOR + TIDY SPACING
   ============================== */
#more-content{
  /* unified typography */
  --one: #29927c;                 /* your single text color */
  line-height: 1.7 !important;    /* consistent line height */
  color: var(--one) !important;
  background: transparent !important;
  font-family: 'Cairo', system-ui, sans-serif;
}

/* 1) Force ALL text to one color (override inline styles) */
#more-content, 
#more-content *{
  color: var(--one) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* 2) Remove messy gaps caused by <br> spam and random margins */
#more-content br{ display: none !important; }
#more-content p{ margin: 0 !important; }

/* uniform vertical rhythm: every element after another gets the same gap */
#more-content * + *{ margin-top: .45rem !important; }

/* headings a bit larger, but keep rhythm tight */
#more-content h5{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-top: .8rem !important;    /* slightly more space before subheading */
  margin-bottom: .35rem !important;/* small space after */
}

/* make strong/links not break the uniform color */
#more-content strong{
  font-weight: 700 !important;
}
#more-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* optional: tidy lists if any appear later */
#more-content ul, 
#more-content ol{
  margin: 0 !important;
  padding-inline-start: 1.2em !important;
}
#more-content li{ margin: .35rem 0 !important; }