/* =====================================================
   Cleaned CSS (duplicate rules removed safely)
   - Exact duplicates per context removed
   - Order of first occurrence preserved
   - @keyframes/@font-face kept as-is
   ===================================================== */
   

:root {--bg:#0c141b;
  --panel:#121a23;
  --muted:#97a3b6;
  --text:#e9eef6;
  --brand:#ff7a00;
  --brand-2:#ff8f2d;
  --outline:#22303e;
  --card:#0f1821;
  --success:#20c997;
  --danger:#ff4d4f;}

* {box-sizing:border-box} 

html,body {margin:0;padding:0}

body.theme-dark {background:var(--bg);color:var(--text);          
  font-family: 'Rajdhani', sans-serif !important;
    font-size: 20px;  /* الحجم الأساسي */
    font-weight: 500; /* وزن متوسط نضيف */
    letter-spacing: 0.4px; /* مسافة حروف تدي فخامة */

    text-transform: none;
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
}

a {color:inherit;text-decoration:none}

.container {width:100%;max-width:1200px;margin:0 auto;padding:0 16px}


.navbar {position:sticky;top:0;z-index:50;
  background:rgba(12,20,27,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--outline);}

.nav-inner {display:flex;align-items:center;justify-content:space-between;height:64px}

.brand {display:flex;gap:8px;align-items:center;font-weight:700}

.brand img {width:28px;height:28px}


.hamburger {display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}

.hamburger span {width:22px;height:2px;background:#fff;border-radius:2px}


.nav-links {display:flex;gap:14px;align-items:center}

.nav-links a,.dropbtn {padding:8px 10px;border-radius:8px}

.nav-links a:hover,.dropbtn:hover {background:var(--panel)}


.dropdown {position:relative}

.dropbtn {background:transparent;border:0;color:var(--text);cursor:pointer}

.dropdown-menu {position:absolute;left:0;top:110%;display:none;min-width:180px;
  background:var(--panel);border:1px solid var(--outline);border-radius:10px;overflow:hidden}

.dropdown:hover .dropdown-menu {display:block}

.dropdown-menu a {display:block;padding:10px 12px}

.dropdown-menu a:hover {background:var(--card)}


.nav-cta {display:flex;align-items:center;gap:10px}

.currency-select select {background:var(--panel);color:var(--text);border:1px solid var(--outline);border-radius:8px;padding:6px 8px}

.auth-area {display:flex;align-items:center;gap:6px}

.auth-area .sep {opacity:.5}

.btn-link {color:var(--brand)}

.cart-btn {position:relative;display:flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:7px 10px;cursor:pointer}

.cart-btn .badge {position:absolute;top:-8px;right:-8px;background:#fff;color:#000;font-size:12px;border-radius:999px;padding:2px 6px;border:2px solid var(--brand)}


.hero {padding:18px 0 8px;border-bottom:1px solid var(--outline)}

.slider {position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--outline)}

.slides img {width:100%;display:none}

.slider-dots {position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:6px}

.slider-dots .dot {width:8px;height:8px;border-radius:50%;background:#fff3;border:1px solid #fff6}

.slider-dots .dot.active {background:#fff}


.main {padding:28px 0 64px}

.section {margin:28px 0}

.section-title {margin:8px 0 16px;font-size:24px}

.grid-cards {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

@media (max-width:1024px) {.grid-cards {grid-template-columns:repeat(3,1fr)}
}

@media (max-width:720px) {
.grid-cards {grid-template-columns:repeat(2,1fr)}

.hamburger {display:flex}

.nav-links {position:fixed;inset:64px 0 auto 0;background:var(--bg);border-top:1px solid var(--outline);display:none;flex-direction:column;padding:12px}

.nav-links.open {display:flex}

.only-desktop {display:none}

}

.nb__actions .user-info {display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:6px 12px; border-radius:999px; transition:.3s;}

.nb__actions .user-info:hover {background:rgba(255,255,255,.1);}

.nb__actions .user-info .avatar {width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#ff7a00,#ffb84d);
  color:#000; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; text-transform:uppercase;}

.nb__actions .user-info .name {font-weight:600; color:#fff; font-size:14px;}

.nb__actions .user-info #logoutBtn,
.nb__actions .user-info .btn {background:#ff7a00; color:#000; border:0; border-radius:8px;
  padding:6px 10px; font-weight:600; cursor:pointer; transition:.25s; text-decoration:none;}

.nb__actions .user-info #logoutBtn:hover,
.nb__actions .user-info .btn:hover {background:#ffa64d;}

.nb__actions .user-info .btn-ghost {background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25);}

.nb__actions .user-info .btn-ghost:hover {background:rgba(255,255,255,.08);}



.card {background:linear-gradient(180deg,#0f1821,#0b1218);
  border:1px solid var(--outline);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}

.card-media {display:block;overflow:hidden;aspect-ratio:3/4}

.card-media img {width:100%;height:107%;object-fit:cover;display:block;transition:transform .35s ease}

.card:hover .card-media img {transform:scale(1.06)}

.card-body {padding:12px}

.card-title {font-weight:700;margin:0 0 6px}

.card-sub {color:var(--muted);font-size:12px;margin-bottom:8px}

.card-foot {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:12px;border-top:1px solid var(--outline)}

.price {display:flex;flex-direction:column}

.price .now {font-weight:800}

.price .old {font-size:12px;color:#fff7;text-decoration:line-through}

.badge-discount {background:#ff3b30;color:#fff;font-size:11px;padding:2px 6px;border-radius:999px}


.btn {border:0;border-radius:10px;padding:9px 12px;cursor:pointer}

.btn-primary {background:var(--brand);color:#000;font-weight:700}

.btn-ghost {background:transparent;border:1px solid var(--outline);color:#fff}


.cart-panel {position:fixed;top:0;right:-380px;width:360px;max-width:100vw;height:100vh;background:var(--panel);
  border-left:1px solid var(--outline);transition:right .25s ease;z-index:60;display:flex;flex-direction:column}

.cart-panel.open {right:0}

.cart-head {display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--outline)}

.cart-items {flex:1;overflow:auto;padding:10px}

.cart-item {display:flex;gap:10px;padding:10px;border:1px solid var(--outline);border-radius:12px;background:var(--card);margin-bottom:10px}

.cart-item img {width:64px;height:64px;border-radius:10px;object-fit:cover}

.cart-row {display:flex;align-items:center;gap:8px;color:#fff8}

.qty {display:flex;align-items:center;gap:6px}

.qty button {border:1px solid var(--outline);background:transparent;color:#fff;border-radius:6px;width:26px;height:26px}

.cart-foot {border-top:1px solid var(--outline);padding:12px;display:flex;flex-direction:column;gap:10px}

.overlay {position:fixed;inset:0;background:#0006;opacity:0;pointer-events:none;transition:.25s;z-index:55}

.overlay.show {opacity:1;pointer-events:auto}


.toast {position:fixed;top:16px;right:16px;background:#0b1117;color:#fff;border:1px solid #234;
  padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(-12px);transition:.25s;z-index:70}

.toast.show {opacity:1;transform:translateY(0)}

.footer {border-top:1px solid var(--outline);padding:18px 0;color:#aeb9c8;text-align:center}


.contact {border-top:1px solid var(--outline);padding:24px 0;color:#aeb9c8}


.stock-badge {position: absolute;
  top: 10px;
  left: 10px;
  background: var(--success);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);}

.stock-out {background: var(--danger);}

.card-media {position: relative;}

.btn[disabled] {opacity: 0.5;
  cursor: not-allowed;}


.stock-badge {position:absolute; top:10px; left:10px; background:var(--success); color:#fff; padding:5px 10px; border-radius:8px; font-weight:600;}

.stock-out {background:var(--danger);}


.stock-badge {position: absolute;
  top: 10px;
  left: 10px;
  background: var(--success);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  
  
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInBadge 0.5s ease-out forwards;}




@keyframes fadeInBadge{
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.card {transition: transform 0.3s ease, box-shadow 0.3s ease;}

.card:hover {transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);}


.card-media img {transition: transform 0.4s ease;}

.card:hover .card-media img {transform: scale(1.06);}


.btn.btn-primary {transition: background 0.3s ease, transform 0.2s ease;}

.btn.btn-primary:hover {background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: translateY(-2px);}


.badge-discount {position: relative;
  overflow: hidden;}

.badge-discount::after {content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-25deg);
  animation: shine 2s infinite;}

@keyframes shine{
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}


.card {opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;}


@keyframes fadeUp{
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.card:nth-child(1) .stock-badge {animation-delay: 0.6s;}

.card:nth-child(2) .stock-badge {animation-delay: 0.7s;}

.card:nth-child(3) .stock-badge {animation-delay: 0.8s;}

.card:nth-child(4) .stock-badge {animation-delay: 0.9s;}

.card:nth-child(5) .stock-badge {animation-delay: 1.0s;}


.stock-badge {opacity: 0;
  transform: translateY(-8px);
  animation: badgeSlide 0.6s ease forwards;
  animation-delay: 0.5s;}


@keyframes badgeSlide{
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 768px) {

.product-wrap {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;}


.product-wrap > div:first-child {order: 1;}

.product-wrap > div:last-child {order: 2;}



#pImage {width: 100%; height: auto;}

.p-row {gap: 10px;}

}


.nav-links ul {list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  gap: 14px; 
  align-items: center;}

.nav-links ul li {position: relative;}

.nav-links ul li > a, 
.nav-links .dropbtn {display: inline-block; 
  padding: 8px 10px; 
  border-radius: 8px;}


.nav-links {display: flex;
  align-items: center;         
  gap: 16px;}


.nav-links > a,
.nav-links .dropbtn {display: inline-flex;        
  align-items: center;         
  height: 40px;                
  padding: 0 12px;             
  line-height: 1;              
  vertical-align: middle;
  font: inherit;               
  color: inherit;              
  background: transparent;     
  border: 0;                   
  margin: 0;                   
  border-radius: 10px;         
  cursor: pointer;}


.dropdown {display: inline-flex;
  align-items: center;}


.nav-links > a svg,
.nav-links .dropbtn svg {vertical-align: middle;}


.navbar {opacity: 1 !important;}

.navbar, .nav-inner {background: rgba(19, 32, 44, 0.9);}


.brand img {display: block;
  height: 45px;
  width: auto;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;}


.nav-links a, .nav-links .dropbtn {opacity: 1;}


@media (max-width: 768px) {

.nav-links {position: fixed;
    top: 56px;            
    left: 0; right: 0;
    display: none;        
    padding: 14px 16px;
    background: #0c141b;
    border-top: 1px solid var(--outline);
    flex-direction: column;
    gap: 18px;
    z-index: 50;}


.nav-links.open {display: block;}



.hamburger {display: inline-flex;}

}


@media (min-width: 769px) {
.nav-links {display: flex; 
    position: static; 
    gap: 16px;}

}


@media (max-width: 768px) {
.nav-links {position: fixed;
    z-index: 1200;      
    overflow: visible;}

.nav-links .dropdown .dropdown-menu {position: static;   
    z-index: 1300;}

}


.hero, .slider, .carousel {position: relative;
  z-index: 1;}


@media (max-width: 768px) {

.nav-links .dropdown {position: relative;}



.nav-links .dropdown .dropdown-menu {position: absolute;
    top: calc(100% + 6px);   
    left: 0;
    right: auto;
    transform: none;
    display: none;           
    max-width: calc(100vw - 32px);
    z-index: 1500;}



.nav-links .dropdown:hover .dropdown-menu,
  .nav-links .dropdown.open .dropdown-menu {display: block;}



.nav-links {overflow: visible;}

}

.pkg-option {border: 1px solid var(--outline);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: 0.2s;}

.pkg-option:hover {background: rgba(255,255,255,0.1);}

.pkg-option.active {background: #ffa86b;
  color: #0c141b;
  border-color: transparent;}


.product-container {display:flex;
  gap:32px;
  align-items:flex-start;
  max-width: 1200px;        
  margin: 0 auto;}


.product-media {position: relative;
  flex: 0 0 520px;          
  max-width: 520px;}


.product-media .product-image {display:block;
  width:90%;
  height:auto;
  border-radius: 12px;}


.product-media .stock-badge {position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius: 999px;
  background:#1fbf75;      
  color:#081116;
  font-weight:600;
  font-size: 12px;}

.product-media .stock-badge.stock-out {background:#e84a4a;      
  color:#fff;}


.product-info {flex:1 1 auto;
  min-width:300px;}


.price-line {display:flex;
  gap:12px;
  align-items:baseline;
  font-size:20px;}

.price-line .now {font-weight:700;}

.price-line .old {text-decoration: line-through;
  opacity:.7;}

.price-line .discount-badge {background:#ff7f50;
  color:#081116;
  padding:2px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;}


#editionGroup {display:flex; gap:8px; flex-wrap:wrap;}

.pkg-option {border:1px solid var(--outline, #2a3946);
  background:transparent;
  color:inherit;
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
  transition:.2s;}

.pkg-option.active {background:#ffa86b;
  color:#0c141b;
  border-color:transparent;}


@media (max-width: 992px) {
.product-container {flex-direction:column;}

.product-media {flex: 0 0 auto;
    max-width: 100%;}

}


.p-gallery {margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;}

.p-gallery .thumb {position:relative;
  overflow:hidden;
  border-radius:10px;
  aspect-ratio: 4 / 3;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);}

.p-gallery .thumb img {width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .2s ease;}

.p-gallery .thumb:hover img {transform: scale(1.03);}

.p-gallery .thumb.active {outline:2px solid #ffa86b;}


.p-section {margin-top:22px;}

.p-details-list {margin:10px 0 0; padding-left:18px;}

.p-details-list li {margin:6px 0;}


.reqs-tabs {display:flex; gap:8px; margin:12px 0;}

.req-tab {padding:8px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:transparent; color:inherit;
  cursor:pointer;}

.req-tab.active {background:#ffa86b; color:#0c141b; border-color:transparent;}

.reqs-table {width:100%; border-collapse:collapse; background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden;}

.reqs-table th, .reqs-table td {padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.06);}

.reqs-table tr:last-child td {border-bottom:none;}

.reqs-table th {width:180px; opacity:.8; font-weight:600;}


.cart-footer {display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  text-align: center;}

.cart-footer button {width: 90%; 
  max-width: 300px;}


aside#cartPanel .cart-foot,
aside#cartPanel .cart-footer {display: flex !important;
  flex-direction: column !important;
  align-items: center !important;  
  justify-content: center !important;
  gap: 10px;
  text-align: center;
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.1);}


aside#cartPanel .cart-foot .btn-primary,
aside#cartPanel .cart-footer .btn-primary,
aside#cartPanel .cart-foot button,
aside#cartPanel .cart-footer button,
aside#cartPanel #goCheckout,
aside#cartPanel #checkoutBtn,
aside#cartPanel #clearCartBtn {display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 90%;
  max-width: 340px;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 auto;}


aside#cartPanel #goCheckout,
aside#cartPanel #checkoutBtn,
aside#cartPanel .btn-primary {background-color: #ff7b00;
  color: #fff !important;
  border: none;
  box-shadow: 0 3px 10px rgba(255,123,0,.35);}

aside#cartPanel #goCheckout:hover,
aside#cartPanel #checkoutBtn:hover,
aside#cartPanel .btn-primary:hover {background-color: #ff8f1a;
  transform: translateY(-2px);}


aside#cartPanel #clearCartBtn {background-color: #2a2a2a;
  color: #ff7b00 !important;
  border: 1px solid #ff7b00;
  box-shadow: 0 2px 6px rgba(255,123,0,.2);}

aside#cartPanel #clearCartBtn:hover {background-color: #ff7b00;
  color: #fff !important;
  transform: translateY(-2px);}


.cart-panel {position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100dvh;
  background: #0c141b;
  box-shadow: -20px 0 40px rgba(0,0,0,.45);
  transform: translateX(100%);   
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 1200;}


.cart-panel[aria-hidden="false"] {transform: translateX(0);      
  opacity: 1;}


.overlay {position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1100;}

.overlay[aria-hidden="false"] {opacity: 1;
  pointer-events: auto;}


body.no-scroll {overflow: hidden;}


.cart-head {position: sticky; top: 0;
  background: inherit;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 1;}

.cart-foot {position: sticky; bottom: 0;
  background: inherit;
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.1);}


@media (prefers-reduced-motion: reduce) {
.cart-panel, .overlay {transition: none !important;}

}


#goCheckout.is-disabled,
#checkoutBtn.is-disabled {opacity: .5;
  pointer-events: none;       
  filter: grayscale(15%);}


@keyframes cart-shake{
  0% { transform: translateX(0) }
  25% { transform: translateX(-3px) }
  50% { transform: translateX(3px) }
  75% { transform: translateX(-2px) }
  100% { transform: translateX(0) }
}

.shake {animation: cart-shake .35s ease;}


.cart-panel {position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100dvh;
  background: #0c141b;
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.55);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  color: #fff;}


.cart-panel.open,
.cart-panel[aria-hidden="false"] {transform: translateX(0);
  opacity: 1;}


.overlay {position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1100;}

.overlay.show,
.overlay[aria-hidden="false"] {opacity: 1;
  pointer-events: auto;}




.cart-head {position: sticky;
  top: 0;
  background: inherit;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;}


.cart-foot,
.cart-footer {position: sticky;
  bottom: 0;
  background: inherit;
  padding: 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;}


.cart-foot button,
.cart-footer button,
.cart-foot .btn-primary,
.cart-footer .btn-primary,
#checkoutBtn,
#goCheckout,
#clearCartBtn {display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 90%;
  max-width: 340px;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 auto;
  transition: all 0.25s ease;}


#checkoutBtn,
#goCheckout,
.cart-footer .btn-primary {background-color: #ff7b00;
  color: #fff !important;
  border: none;
  box-shadow: 0 3px 10px rgba(255, 123, 0, 0.35);}

#checkoutBtn:hover,
#goCheckout:hover,
.cart-footer .btn-primary:hover {background-color: #ff8f1a;
  transform: translateY(-2px);}


#clearCartBtn {background-color: #2a2a2a;
  color: #ff7b00 !important;
  border: 1px solid #ff7b00;
  box-shadow: 0 2px 6px rgba(255, 123, 0, 0.2);}

#clearCartBtn:hover {background-color: #ff7b00;
  color: #fff !important;
  transform: translateY(-2px);}


#goCheckout.is-disabled,
#checkoutBtn.is-disabled {
    opacity: .5;
    filter: grayscale(20%);
    /* pointer-events: none;  ← احذف السطر ده */
}

@keyframes cart-shake{
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.shake {animation: cart-shake 0.35s ease;}


.toast {position: fixed;
  top: 25px;
  right: 90px;
  background: #0f1a24;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 3000;
  border: 1px solid rgba(255, 123, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateY(-20px);}


.toast.show {opacity: 1;
  transform: translateY(0);}


.toast::before {content: "✔";
  color: #4caf50;
  font-size: 0.8rem;}


.toast.empty::before {content: "⚠";
  color: #ff9800;}

.toast.empty {background: #2b1a00;
  border-color: rgba(255, 152, 0, 0.6);}


.cart-panel.open ~ .toast,
.cart-panel[aria-hidden="false"] ~ .toast {z-index: 4000;}


@keyframes toast-slide{
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}


.toast.error::before {content: "✖";
  color: #ff5252;}

.toast.error {background: #2a0c0c;
  border-color: rgba(255, 82, 82, 0.7);}


@media (min-width: 768px) {
.carousel-track > .card {flex-basis: calc(33.333% - 10.7px)}

}

@media (min-width: 1024px) {
.carousel-track > .card {flex-basis: calc(25% - 12px)}

}


.carousel-track {display:flex; gap:16px; overflow:auto; padding:6px 0 8px; scroll-snap-type:x mandatory}

.carousel-track > .card {flex: 0 0 240px; max-width:240px; scroll-snap-align:start;}

@media (max-width: 1024px) {
.carousel-track > .card {flex-basis: 220px; max-width:220px;}

}

@media (max-width: 768px) {
.carousel-track > .card {flex-basis: 180px; max-width:180px;}

}


.region-card .flag-thumb {display:flex;align-items:center;justify-content:center;background:#0e1b2a;border-radius:10px;height:120px;margin-bottom:10px}

.region-card .flag-thumb img {width:72px;height:72px;border-radius:50%;object-fit:cover}


#grid.grid-cards .card-media {display:block;overflow:hidden;aspect-ratio:3/4}

#grid.grid-cards .card-foot {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:12px;border-top:1px solid var(--outline)}


:root {--section-accent: #00e05b;
      --section-accent-2:#00b64a;
      --section-bg:#0c1420;
      --section-text:#eafff5;
      --section-shadow:0 8px 24px rgba(0,0,0,.35);
      --section-glow:0 0 0 1px rgba(0,224,91,.35), 0 6px 18px rgba(0,224,91,.12);}

.section-header {position:relative; display:flex; align-items:center; justify-content:center;
      gap:14px; margin:clamp(28px,4vw,44px) 0 clamp(14px,2.5vw,22px); isolation:isolate;}

.section-header::before,.section-header::after {content:""; flex:1 1 auto; height:3px; border-radius:999px;
      background:linear-gradient(90deg,transparent,var(--section-accent) 30%,var(--section-accent-2) 70%,transparent);
      opacity:.9; filter:saturate(1.1);}

.section-header .section-title {margin:0; padding:.65rem 1.25rem; border-radius:999px; white-space:nowrap;
      color:var(--section-text); font:700 clamp(14px,1.9vw,17px)/1.1 "Poppins",system-ui,sans-serif; letter-spacing:.3px;
      position:relative; backdrop-filter:blur(2px);
      background:radial-gradient(120% 140% at 50% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
                 linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--section-glow),var(--section-shadow);}

.section-header .section-title::after {content:""; position:absolute; inset:0; border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none;}

.section-header--xl .section-title {padding:.8rem 1.5rem; font-size:clamp(16px,2.2vw,20px);}

.section-header--sm .section-title {padding:.5rem 1rem;  font-size:clamp(13px,1.6vw,15px);}

@media (max-width:540px) {
.section-header {gap:10px;}

.section-header::before,.section-header::after {height:2px; opacity:.85;}

.section-header .section-title {box-shadow:0 0 0 1px rgba(0,224,91,.28), 0 8px 18px rgba(0,0,0,.28);}

}

@media (prefers-reduced-motion:no-preference) {
.section-header .section-title {transform:translateY(.5px); transition:box-shadow .25s ease, transform .25s ease;}

.section-header:hover .section-title {transform:translateY(0); box-shadow:0 0 0 1px rgba(0,224,91,.45), 0 10px 22px rgba(0,0,0,.38);}

}

html[data-theme="light"] .section-header .section-title {background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
      color:#0e1724; border-color:rgba(15,23,36,.12);
      box-shadow:0 0 0 1px rgba(0,0,0,.04),0 10px 22px rgba(0,0,0,.08);}


:root {--nb-h: 74px;}

.navbar-pro {position: sticky; top: 0; z-index: 10020;
  backdrop-filter: blur(10px);
  background: rgba(11, 23, 36, .6);
  border-bottom: 1px solid rgba(255,255,255,.08);}

.nb__bar {height: var(--nb-h); display:flex; align-items:center; justify-content:space-between; gap:14px;}


.nb__brand {display:flex; align-items:center; gap:12px; color:#e6eef7; text-decoration:none; flex:0 0 260px; min-width:260px;  padding-left: 30px; /* ✅ يحرك اللوجو ناحيه اليمين */}

.nb__logo {position:relative; width:260px; height:74px; border-radius:14px; overflow:hidden;}

.nb__logo img {width:95%; height:100%; object-fit:contain; padding:0 10px; filter: drop-shadow(0 0 10px rgba(255,255,255,.08));}

.nb__logo::after {content:""; position:absolute; inset:-20%; transform: translateX(-120%);
  background: linear-gradient(75deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  animation: nbShine 2.4s ease-in-out infinite; pointer-events:none;}

@keyframes nbShine{ 0%{ transform:translateX(-120%)} 55%{ transform:translateX(120%)} 100%{ transform:translateX(120%)} }


.nb__nav {display:flex; align-items:center; gap:14px; flex:1 1 auto;}

.nb__link {color:#e6eef7; opacity:.92; text-decoration:none; font-weight:700;
  padding:10px 10px; border-radius:10px; position:relative;}

.nb__link::after {content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: linear-gradient(90deg, transparent, #2af47b, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease; border-radius:2px;}

.nb__link:hover::after {transform:scaleX(1);}


.nb__dd {position:relative;}

.nb__dd-btn {all:unset; cursor:pointer;}

.nb__chev {opacity:.8; font-size:.85em; margin-left:4px;}

.nb__menu {position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  padding:10px; border-radius:12px; background:rgba(10,20,32,.96);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease;}

.nb__menu .nb__menu-item {display:block; color:#e6eef7; text-decoration:none; padding:10px 12px; border-radius:8px; font-weight:600; opacity:.95;}

.nb__menu .nb__menu-item:hover {background:rgba(255,255,255,.06);}

.nb__dd:hover .nb__menu {opacity:1; visibility:visible; transform:translateY(0);}


.nb__actions {display:flex; align-items:center; gap:10px;}

.nb__currency select {background:rgba(255,255,255,.06); color:#e6eef7; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px; outline:none;}

.nb__auth {display:flex; align-items:center; gap:6px; color:#e6eef7;}

.nb__auth .nb__auth-link {color:#e6eef7; opacity:.92; text-decoration:none;}

.nb__sep {opacity:.6;}


.nb__cart {position:relative; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#e6eef7;}

.nb__badge {position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#ff4d4f; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(10,20,32,1);}


.nb__ham {display:none; width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06); color:#e6eef7; align-items:center; justify-content:center;}

.nb__ham span {display:block; width:20px; height:2px; background:#e6eef7; margin:3px 0; border-radius:2px;}


.nb__drawer {position:fixed; inset:var(--nb-h) 0 auto 0; background:rgba(10,20,32,.96);
  border-bottom:1px solid rgba(255,255,255,.08); transform:translateY(-16px);
  opacity:0; visibility:hidden; transition:.2s ease; z-index:10010;}

.nb__drawer.open {transform:translateY(0); opacity:1; visibility:visible;}

.nb__mnav {padding:14px 16px; display:flex; flex-direction:column; gap:6px;}

.nb__mlink {display:block; padding:12px; border-radius:10px; color:#e6eef7; text-decoration:none; font-weight:700;}

.nb__mlink:hover {background:rgba(255,255,255,.06);}

.nb__mdd summary {list-style:none; cursor:pointer;}

.nb__mdd summary::-webkit-details-marker {display:none;}

.nb__mdd[open] > summary {background:rgba(255,255,255,.06);}

.nb__msub {display:block; padding:10px 14px 10px 26px; color:#e6eef7; opacity:.9; text-decoration:none;}

.nb__msub:hover {background:rgba(255,255,255,.06);}

.nb__mextra {margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); display:grid; gap:10px;}

.nb__currency--mobile label {display:block; font-size:12px; color:#a8b3c2; margin-bottom:6px;}

.nb__currency--mobile select {width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.06); color:#e6eef7;}


@media (max-width: 1024px) {
.nb__nav {display:none !important;}

.nb__actions > *:not(.nb__ham):not(.nb__cart) {display:none !important;}

.nb__ham {display:flex !important;}

.nb__cart {display:flex !important;}

.nb__brand {flex-basis:200px; min-width:200px;}

.nb__logo {width:200px; height:56px;}

}


:root {--z-navbar: 1000;
  --z-drawer: 1010;
  --z-cart: 12000;
  --z-toast: 13000;}

.navbar-pro {z-index: var(--z-navbar) !important;}

.nb__drawer {z-index: var(--z-drawer) !important; pointer-events: none;}

.nb__drawer.open {pointer-events: auto;}

.nb__ham {position: relative; z-index: calc(var(--z-navbar) + 20) !important;}

.nb__actions, .nb__brand, .nb__nav {position: relative; z-index: 2;}


#cartSidebar, #cartPanel, .cart-sidebar, .cart-panel, .cart-drawer, .cart-overlay {z-index: var(--z-cart) !important;}


.toast, .toast-container, .iziToast, #toastContainer {z-index: var(--z-toast) !important;}




/* Nested dropdown for Netflix */

.nb__menu .nb__dd-sub {position: relative;}

.nb__menu .nb__dd-sub>.nb__dd-btn {display:flex; align-items:center; justify-content:space-between; width:100%;}

.nb__menu-sub {position:absolute; top:0; left:100%; min-width:180px; display:none;}

.nb__dd-sub:hover>.nb__menu-sub {display:block;}

/* Mobile nested */

.nb__mdd-sub summary.nb__msub {cursor:pointer;}

.nb__mdeep {padding-left:2rem; display:block;}


@media (prefers-reduced-motion: reduce) {
.card::before {transition: none;
    transform: translateX(140%); /* show static sheen without sweeping */}

}


@media (prefers-reduced-motion: reduce) {
.card:is(:hover, :focus-within)::before {animation: none;
    background-position: 100% 50%;
    opacity: 1;}

}


@keyframes sheen-sweep{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


/* === Full-Card Sheen on Hover (Fully Golden, soft bottom) === */



/* removed hot badge */


.card-media {position:relative;}


/* === Carousel (scroll-snap) === */

.carousel {position:relative;}

.car-track {scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom:6px;}

.car-track::-webkit-scrollbar {height:8px}

.car-track::-webkit-scrollbar-thumb {background:#213042; border-radius:8px}

.car-track .card {flex: 0 0 var(--slide-w, 78%);
  scroll-snap-align:start;}

@media(min-width:540px) {.car-track .card {flex-basis: calc(50% - 10px);}
}

@media(min-width:900px) {.car-track .card {flex-basis: calc(33.333% - 10px);}
}

@media(min-width:1200px) {.car-track .card {flex-basis: calc(25% - 10px);}
}


.car-btn {position:absolute; top:40%; transform:translateY(-50%);
  background:rgba(15,24,33,.85);
  color:#fff; border:1px solid var(--outline); width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3;}

.car-btn.prev {left:-8px}

.car-btn.next {right:-8px}

@media(max-width:640px) {
.car-btn {width:32px; height:32px; top:35%}

.car-btn.prev {left:-6px}
.car-btn.next {right:-6px}

}

/* Ensure cards remain nice inside slider */

.card-media img {display:block; width:100%; height:107%; object-fit:cover}

/* شكل اللودر */

#loader {position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;}


/* الأنيميشن */

.spinner {border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;}


@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* === Discount badge: bottom-right with label === */

.card-media .badge-discount {position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff3b30;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 3;}




/* === Responsive: 2 cards per row on phones === */

@media (max-width: 640px) {
.carousel .car-track {scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;}

.carousel .car-track .card {flex: 0 0 calc(50% - 6px) !important;
    scroll-snap-align: unset !important;}

.carousel .car-btn {display: flex !important;}

}




/* === Mobile: keep slider with 2 cards visible per view === */

@media (max-width: 640px) {
.carousel .car-track {scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;

    display: flex !important;
    flex-wrap: nowrap !important;           /* keep horizontal track */
    gap: 12px !important;
    overflow-x: auto !important;            /* keep slider scrolling */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;}

.carousel .car-track .card {flex: 0 0 calc(50% - 10px) !important;  /* two cards width */
    scroll-snap-align: start !important;}

/* optional: hide arrows on phones */

}




@media (max-width: 640px) {
.carousel .car-btn {display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    top: 40%;
    background: rgba(15,24,33,.85);
    border-radius: 999px;
    color: #fff;
    z-index: 9;}

.carousel .car-btn.prev {left: 6px;}

.carousel .car-btn.next {right: 6px;}

}



/* === Mobile touch improvements (#4) === */

@media (max-width: 640px) {
.car-track {-webkit-overflow-scrolling: touch;
    touch-action: pan-x;}

}



/* === Carousel Dots (#5) === */

.car-dots {display:none;}

@media (max-width:640px) {
.car-dots {display:flex; gap:6px; justify-content:center; margin-top:8px;}

.car-dots button {width:8px; height:8px; border-radius:999px; border:0; background:#475569;}

.car-dots button[aria-current="true"] {width:20px; background:#22c55e;}

}

/* ===== Fix currency dropdown visibility ===== */

select, select option {background-color: #1b1f4a;  /* خلفية داكنة */
  color: #ffffff;             /* فونت أبيض */}


select:focus, select:hover {outline: none;
  background-color: #24285a;}


select option:hover,
select option:focus {background-color: #2e3370;
  color: #fff;}



/* --- Nav underline & dropdown arrow tweaks --- */


.nb__menu .nb__menu-item {display:flex; align-items:center;}

.nb__menu .nb__menu-item .nb__chev {margin-left:auto; padding-right:8px; opacity:.8;}

.nb__menu .nb__menu-item:hover .nb__chev {opacity:1;}


/* --- Dropdown visibility & arrow positioning fix --- */

.nb__menu, .nb__nav, .nb__bottom.container, header, .nb__bar {overflow: visible !important;}


/* Make room for arrow but don't clip submenu */

.nb__menu .nb__menu-item {position: relative; padding-right: 28px;}

.nb__menu .nb__menu-item .nb__chev {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  opacity: .8; pointer-events: none; /* don't block hover on submenu */}

.nb__menu .nb__menu-item:hover .nb__chev {opacity: 1;}


/* Ensure submenus float above cards */

.nb__menu li > ul {position: absolute;
  z-index: 1200;
  overflow: visible;}



/* Inline stock indicator under price (product page) */

.stock-inline {margin: 6px 0 12px;
  font-weight: 600;
  color: var(--success);
  display: none;
  align-items: center;
  gap: 6px;}



/* Inline stock indicator states */

.stock-inline.is-in {color: var(--success);}

.stock-inline.is-out {color: var(--danger);}

/* ===== About & Images (blend with page) ===== */

.card.about-game,
.card.game-images {/* شيل أي خلفية/بوردر/ظل */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* خلّي المسافات برا الكارد بس */
  padding: 0 !important;
  margin-top: 18px;}


/* عنوان السكشن يفضل بارز */

.section-title {margin: 0 0 12px;
  font-weight: 800;
  color: #e7edf5;            /* قريب من عناوينك */}


/* نص الـ About */

.about-game__body {color: #cbd5e1;
  line-height: 1.7;
  font-size: 15px;}


/* شبكة الصور */

.images-grid {display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;                 /* مسافة بين الصور */}


/* كل كارد صورة بدون خلفية ولا بوردر */

.images-grid .img {display:block;
  width:100%;
  height:100%;
  border-radius: 12px;
  overflow:hidden;

  background: transparent;   /* بدلاً من #0f141a */
  border: 0;
  box-shadow: none;}


/* الصورة نفسها تملأ الكارد بحواف ناعمة */

.images-grid .img > img {width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: 12px;       /* الحافة فقط للصورة */}


/* أحجام الصفوف (زي ما كانت) */

.images-grid .big {grid-column: span 6; height: 360px;}

.images-grid .small {grid-column: span 3; height: 200px;}


@media (max-width: 900px) {
.images-grid .big {grid-column: span 12; height: 260px;}

.images-grid .small {grid-column: span 6;  height: 160px;}

}

@media (max-width: 560px) {
.images-grid .small {grid-column: span 12; height: 160px;}

}

/* ============================================= */

/* 🔔 AUTH TOASTS (for login/signup/logout)      */

/* ============================================= */


.auth-toast {position: fixed;
  top: 20px;
  right: 20px;
  min-width: 220px;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
      font-family: 'Rajdhani', sans-serif !important;

  font-size: 15px;
  z-index: 9999;
  opacity: 0;
  transform: translateX(100%);
  animation: slide-in 0.4s ease forwards, slide-out 0.4s ease forwards 3.4s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);}


/* ألوان الرسائل */

.auth-toast-success {background: rgba(34,197,94,0.9);}
/* ✅ نجاح */

.auth-toast-error {background: rgba(239,68,68,0.9);}
/* ❌ خطأ */

.auth-toast-warning {background: rgba(250,204,21,0.9);}
/* ⚠️ تحذير */

.auth-toast-info {background: rgba(59,130,246,0.9);}
/* ℹ️ معلومات */


@keyframes slide-in{
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-out{
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}


/* 📱 على الموبايل: في النص فوق بانيميشن عمودي */

@media (max-width: 640px) {
.auth-toast {top: 12px;
    right: auto;
    left: 50%;
    min-width: 86vw;
    max-width: 92vw;
    border-radius: 10px;
    transform: translate(-50%, -16px);
    animation: toast-mobile-in 0.35s ease forwards,
               toast-mobile-out 0.35s ease forwards 3.2s;}

@keyframes toast-mobile-in{
    from { opacity: 0; transform: translate(-50%, -16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }

@keyframes toast-mobile-out{
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -16px); }
  }

}


/* ✨ لو فيه أكتر من Toast يظهروا فوق بعض */

.auth-toast + .auth-toast {margin-top: 10px;}

@media (max-width: 640px) {
.auth-toast + .auth-toast {margin-top: 8px;}

}

/* ==== تحسين عرض المستخدم وزر Logout في الهيدر ==== */

.user-info {display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 999px;
  transition: 0.3s ease;}


.user-info:hover {background: rgba(255, 255, 255, 0.1);}


.user-info .avatar {width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ffb84d);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;}


.user-info .name {font-weight: 600;
  color: #fff;
  font-size: 14px;}


.user-info button {background: #ff7a00;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;}


.user-info button:hover {background: #ffa64d;}

/* ===== Auth Pages ===== */

.auth-wrap {min-height: calc(100vh - 220px); /* اترك مساحة للهيدر/الفوتر */
  display:flex; align-items:center; justify-content:center;
  padding:40px 16px;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(255,255,255,.06), transparent 60%);}

.auth-card {width:min(680px, 92vw);
  background: linear-gradient(180deg, rgba(20,24,35,.9), rgba(12,16,24,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  padding:32px 28px 24px;}

.auth-title {text-align:center; color:#fff; font-size:28px; font-weight:800; letter-spacing:.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);}

.auth-sub {text-align:center; color:#cbd5e1; margin-top:6px; margin-bottom:18px;}

.auth-google {width:100%; height:52px; display:flex; align-items:center; justify-content:center;
  gap:10px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color:#fff; font-weight:700; cursor:pointer;
  transition:.25s;}

.auth-google img {width:22px; height:22px;}

.auth-google:hover {background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);}


.auth-divider {position:relative; text-align:center; margin:20px 0;}

.auth-divider:before, .auth-divider:after {content:""; position:absolute; top:50%; width:42%; height:1px; background:rgba(255,255,255,.1);}

.auth-divider:before {left:0;}
.auth-divider:after {right:0;}

.auth-divider span {color:#94a3b8; font-size:12px; padding:0 8px;}


.auth-label {display:block; color:#cbd5e1; margin:10px 2px 6px; font-size:13px;}

.auth-input {width:100%; height:52px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color:#fff; padding:0 14px; outline:none; transition:.2s;}

.auth-input::placeholder {color:#8fa1b5;}

.auth-input:focus {border-color:#4f9cff; box-shadow:0 0 0 3px rgba(79,156,255,.18);}


.auth-primary {width:100%; height:52px; margin-top:14px;
  border:none; border-radius:12px; font-weight:800; cursor:pointer;
  background: linear-gradient(90deg, #ff9d00, #ff7a00);
  color:#10141f; letter-spacing:.2px; transition:.2s;}

.auth-primary:hover {filter:brightness(1.05); transform: translateY(-1px);}


.auth-bottom {display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px;}

.auth-link {color:#4f9cff; font-weight:700; text-decoration:none;}

.auth-link:hover {text-decoration:underline;}

.auth-muted {color:#94a3b8;}

.flex-spacer {flex:1;}


.auth-secured {margin-top:18px; display:flex; align-items:center; gap:8px; justify-content:center;
  color:#94a3b8; font-size:13px;}

.auth-secured img {height:16px; opacity:.9;}

.dev-badge {margin-left:10px; font-size:12px; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#cbd5e1;}


/* داكن عام للصفحة */

.theme-dark .auth-card {backdrop-filter: blur(8px);}





/* === Close button for hamburger menu === */

.nb__close {position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 100;}

.nb__close:hover {opacity: 0.8;}


.featured-section {margin-top: 60px;
  text-align: center;}


/* 🟢 القسم بالكامل */

.featured-section {max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;}


/* العنوان */

.featured-section h2 {color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: inline-block;
  padding: 8px 22px;
  border-radius: 8px;
  background: rgba(248, 225, 225, 0.1);
  border: 1px solid rgba(0, 255, 90, 0.3);
  margin-bottom: 40px;}


/* الشبكة */

.featured-grid {display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  justify-items: center;}


/* الكارت */

.featured-card {position: relative;
  width: 220px;
  height: 220px;
  border-radius: 18px;
  cursor: pointer;
  background: #101214;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;}


.featured-card:hover {transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(0,255,115,0.4);}


/* الصورة داخل الكارت */

.featured-card img {position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.4s ease, filter 0.4s ease;
  z-index: 1;}


.featured-card:hover img {transform: scale(1.08);   /* زوم خفيف بدون خروج */
  filter: brightness(1.1);}


/* التسمية */

.featured-label {position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 12px;
  text-align: center;
  z-index: 2;  /* أعلى من الصورة */
  pointer-events: none;}


.featured-card:hover .featured-label {color: #00ff73;}


/* أنيميشن دخول */

.featured-card {opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;}

.featured-card:nth-child(1) {animation-delay:.1s}

.featured-card:nth-child(2) {animation-delay:.2s}

.featured-card:nth-child(3) {animation-delay:.3s}

.featured-card:nth-child(4) {animation-delay:.4s}

.featured-card:nth-child(5) {animation-delay:.5s}


@keyframes fadeInUp{
  to{opacity:1;transform:translateY(0)}
}


/* موبايل */

@media(max-width:992px) {
.featured-grid {grid-template-columns:repeat(3,1fr);}

}

@media(max-width:600px) {
.featured-grid {grid-template-columns:repeat(2,1fr);}

.featured-card {width:160px;height:160px;}

.featured-label {font-size:.9rem;padding:8px;}

}

/* ✅ رسالة "No products" في المنتصف بعرض متوسط */

.no-products {background: #b79f00;
  color: #000;
  font-weight: 600;
  padding: 18px 28px;
  border-radius: 6px;
  margin: 60px auto; /* يخليها في النص */
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  width: 55%; /* ✅ نصف الشاشة تقريبًا */
  max-width: 800px;
  min-width: 400px;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.4s ease-in-out;
  box-sizing: border-box;
  position: relative;}


/* ✅ أيقونة تحذير احترافية */

.no-products::before {content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: #000;
  -webkit-mask: url('https://cdn-icons-png.flaticon.com/512/565/565547.png') no-repeat center;
  mask: url('https://cdn-icons-png.flaticon.com/512/565/565547.png') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;}


/* ✅ أنيميشن خفيفة */

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 🌟 تنسيق قسم Mobile كزر رئيسي */

.nb__mdd summary.nb__mlink {background: rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;}


.nb__mdd summary.nb__mlink:hover {background: rgba(255, 255, 255, 0.12);}


/* 🎯 القائمة الفرعية */

.nb__mdd[open] .nb__msub {display: block;
  padding: 8px 24px;
  margin-left: 10px;
  border-left: 2px solid #dd4b1a;
  color: #ddd;
  transition: color 0.2s;}


.nb__mdd[open] .nb__msub:hover {color: #00b67a;}


/* 🎨 أيقونة السهم الجانبي تتحول عند الفتح */

.nb__mdd summary.nb__mlink::after {content: "▸";
  font-size: 14px;
  opacity: 0.7;
  transition: transform 0.3s ease;}


.nb__mdd[open] summary.nb__mlink::after {content: "▾";
  transform: rotate(0deg);}

/* 🔍 تحسين مظهر نتائج البحث */

.nb__s-results {position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #0d1117;
  border: 1px solid #222;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 8px 0;
  max-height: 480px;
  overflow-y: auto;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;}


/* كل عنصر */

.nb__s-item {display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #e0e0e0;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);}


.nb__s-item:last-child {border-bottom: none;}


.nb__s-item:hover {background: rgba(255, 255, 255, 0.07);
  transform: scale(1.02);}


/* الصورة */

.nb__s-item img {width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #333;}


/* النص */

.nb__s-item span {font-size: 15px;
  font-weight: 600;
  color: #ffffff; /* ← أبيض واضح */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;}


/* نتيجة فارغة */

.nb__s-empty {text-align: center;
  padding: 16px;
  color: #999;
  font-size: 14px;}


/* حركة بسيطة */

@keyframes fadeIn{
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 🔽 تخصيص شريط التمرير */

.nb__s-results::-webkit-scrollbar {width: 6px;}

.nb__s-results::-webkit-scrollbar-thumb {background: #444;
  border-radius: 4px;}

.nb__s-results::-webkit-scrollbar-thumb:hover {background: #666;}


/* 🔧 شكل البحث داخل الموبايل (الهامبرجر) */

.nb__msearch {position: relative;
  margin: 10px 16px;}


.nb__msearch form {position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 12px;
  height: 45px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);}


.nb__msearch input {flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 15px;
  padding-right: 35px;}


.nb__msearch button {position: absolute;
  right: 15px;
  background: none;
  border: none;
  color: #ccc;
  font-size: 18px;
  cursor: pointer;}


.nb__msearch button:hover {color: #fff;}

/* ✅ قائمة نتائج البحث داخل الموبايل */

.nb__s-results--mobile {position: relative;
  top: auto;
  left: auto;
  right: auto;
  background: #14181d;
  border-radius: 10px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  max-height: 250px;
  overflow-y: auto;
  z-index: 10;}


.nb__s-results--mobile a {display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;}


.nb__s-results--mobile a:hover {background: rgba(255,255,255,0.1);}


.nb__s-results--mobile img {width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;}

.nb__drawer nav {overflow: visible !important;}


/* === Base Navbar Layout === */

.nb__bar.container {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 74px;}


.nb__brand {flex: 0 0 auto;}

.nb__nav {flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;}

.nb__actions {flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;}

/* ======================================= */
/* 🎨 تحسين شكل Game details & Notes + أنيميشن */
/* ======================================= */

.p-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

/* العناصر داخل القوائم */
.p-details-list {
  list-style-type: disc;
  padding-left: 22px;
  margin-bottom: 15px;
}

.p-details-list li {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
  text-align: left;
      font-family: 'Rajdhani', sans-serif !important;


  /* 🔥 تأثير الأنيميشن */
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInList 0.6s ease forwards;
}

/* لون العلامة (•) بالـ Valorant الأحمر */
.p-details-list li::marker {
  color: #ff4655; /* لون Valorant الأحمر */
}

/* خطوط أفتح في الوضع الداكن */
body.theme-dark .p-details-list li {
  color: #ffffff;
} 

/* فاصلة خفيفة بين الأقسام */
#pNotes {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 18px;
  padding-top: 14px;
}

/* ✨ أنيميشن الظهور */
@keyframes fadeInList {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* تأخير بسيط متدرّج لكل عنصر */
.p-details-list li:nth-child(1) { animation-delay: 0.1s; }
.p-details-list li:nth-child(2) { animation-delay: 0.2s; }
.p-details-list li:nth-child(3) { animation-delay: 0.3s; }
.p-details-list li:nth-child(4) { animation-delay: 0.4s; }
.p-details-list li:nth-child(5) { animation-delay: 0.5s; }
.p-details-list li:nth-child(6) { animation-delay: 0.6s; }

/* عند المرور بالماوس */
.p-details-list li:hover {
  color: #ffffff;
  transform: translateX(4px);
  transition: transform 0.2s ease, color 0.2s ease;
}
.price-line .now {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffffff;
}
.price-line .discount-badge {
  background: #dd4b1a;
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.related-products-section {
  margin-top: 60px;
  margin-bottom: 80px; /* ✅ مسافة من الفوتر */
  text-align: center;
}

.related-products-section .section-title {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: #fff;
  text-align: center;
}

#related-products {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.related-products-section {
  margin-top: 50px;
  text-align: center;
}

.related-products-section .section-title {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: #fff;
}

#related-products {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  padding: 0 20px;
}

.related-card {
  background: #1b263b;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  max-width: 250px;
  margin: 0 auto;
}

.related-card:hover {
  transform: translateY(-6px);
}

.related-img {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

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

.related-card:hover img {
  transform: scale(1.08);
}

.badge-out {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e63946;
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
}

.related-body {
  padding: 12px 10px 16px;
  color: #fff;
}

.related-title {
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 42px;
  margin-bottom: 8px;
  color: #fff;
}

.related-price {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}
.p-redeem {
  margin-top: 2rem;
  text-align: center;
}

.p-redeem h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.p-redeem .redeem-wrap img {
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.p-redeem .redeem-wrap img:hover {
  transform: scale(1.03);
}
/* ✅ قسم "How to Redeem Code" */
#pRedeem {
  margin-top: 40px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#pRedeem h3,
#redeemTitle {
  font-size: 1.3rem;
  color: #ffb347; /* لون ذهبي ناعم */
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#redeemImage {
  max-width: 90%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

#redeemImage:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(255, 179, 71, 0.3);
}

/* ✅ محاذاة العنوان والصورة */
@media (min-width: 768px) {
  #pRedeem {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ✅ تحسين المسافات بين الأقسام */
#pNotes {
  margin-bottom: 40px;
}

.related-products-section {
  margin-top: 60px !important;
}
/* ✅ Product Features Section */
.product-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.feature-box {
  background: #121826;
  border-radius: 8px;
  padding: 10px 14px;
  color: #e5e5e5;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid #1f2a40;
  transition: all 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-2px);
  background: #1b2335;
}

.feature-box i {
  font-size: 1rem;
}
.extra-info .status {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.extra-info .status.ok {
  color: #ffffff; /* أبيض للحالة true */
}

.extra-info .status.fail {
  color: #ff4444; /* أحمر للحالة false */
}
.stock-inline {
  background: rgba(0, 255, 153, 0.15);
  color: #00ff99;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.stock-inline.is-out {
  background: rgba(255, 68, 68, 0.15);
  color: #ff4444;
}
/* النصوص العامة */
.status {
  position: relative;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status.ok {
  color: #ffffff;
}

.status.fail {
  color: #ff4444;
}

/* أيقونة التعجب */
.info-icon {
  display: inline-block;
  background-color: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-left: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.info-icon:hover {
  background-color: #00e0ff;
  color: #000;
}

/* Tooltip */
.info-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.info-icon[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(30, 30, 30, 0.95) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-icon:hover::after,
.info-icon:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
/* ===== تنسيق عام لقسم About ===== */
.about-game {
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.02);
  padding: 24px 28px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.about-game .section-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #ffffff;
  position: relative;
  display: inline-block;
}

.about-game .section-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60%;
  height: 2px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.about-game .section-title:hover::after {
  width: 100%;
}

/* نص الوصف */
.about-game__body {
  color: #cfd8dc;
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-line;
}

.about-game__body p {
  margin-bottom: 12px;
}

/* ===== ألوان المنصات ===== */
.about-game[data-platform="steam"] .section-title::after {
  background: linear-gradient(90deg, #00ff99, #00cc66);
}

.about-game[data-platform="gog"] .section-title::after,
.about-game[data-platform="playstation"] .section-title::after {
  background: linear-gradient(90deg, #00c6ff, #0072ff);
}

.about-game[data-platform="epic"] .section-title::after {
  background: linear-gradient(90deg, #a044ff, #6a00ff);
}

.about-game[data-platform="origin"] .section-title::after,
.about-game[data-platform="ea"] .section-title::after {
  background: linear-gradient(90deg, #ff8800, #ff5500);
}
/* === زرار Add to Cart الجديد === */
.btn-primary {
  background: linear-gradient(90deg, #ff9800, #ff5722);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #ffa733, #ff7043);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 87, 34, 0.45);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 3px 6px rgba(255, 87, 34, 0.2);
}

/* نسخة لو عايز نفس الستايل يتطبق داخل الكروت فقط */
.grid-cards .btn-primary {
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
}
/* === Product Meta Info === */
.product-meta-info {
  font-size: 0.95rem;
  color: #ddd;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 10px;
}

.product-meta-info .meta-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.product-meta-info strong {
  color: #fff;
  font-weight: 600;
}

.product-meta-info span {
  display: inline-block;
  min-width: 40%;
  margin-right: 10px;
}
.product-meta-info {
  background: #0c141b;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #202b3a;
}

.product-meta-info .meta-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 15px;
}

.language-flags img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  margin-right: 4px;
  box-shadow: 0 0 3px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.2);
  transition: transform .2s ease;
}

.language-flags img:hover {
  transform: scale(1.15);
}
.view-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #dd4b1a, #cc9808);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: 0.25s ease;
  width: 100%;
}

.view-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 136, 255, 0.35);
}
.related-section-title {
  text-align: left !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 25px !important;
  padding-left: 12px !important;
  color: #ffffff !important;
  border-left: 4px solid #dd4b1a;
  line-height: 1;
  letter-spacing: 0.8px;
}
.edition-btn.active {
  background: #4c89ff;
  color: #fff;
}

.edition-btn.disabled {
  opacity: .4;
  cursor: not-allowed;
}
/* Edition container */
#editionGroup {
  margin: 6px 0 10px 0;
  max-width: 320px; /* أصغر عرض مناسب */
}

/* Sleek dropdown */
.edition-select {
  width: 100%;
  padding: 8px 14px;
  height: 42px;          /* ⬅️ أصغر من النسخة السابقة */
  background: #141c2b;
  border: 1px solid #28324a;
  border-radius: 8px;    /* ⬅️ نص قطر أصغر */
  color: #fff;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
  transition: 0.25s ease;
  outline: none;
 font-family: 'Rajdhani', sans-serif !important;
}

/* Hover */
.edition-select:hover {
  border-color: #3e4b6e;
}

/* Focus effect */
.edition-select:focus {
  border-color: #627cff;
  box-shadow: 0 0 0 2px rgba(98,124,255,0.25);
}

/* Arrow icon */
.edition-select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='18' width='18' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7L10 12L15 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px; /* ⬅️ السهم أصغر */
  padding-right: 38px;
}

/* Dropdown options */
.edition-select option {
  background: #0e1420;
  color: white;
  padding: 8px;
  font-size: 14px;
}
.card-media img.platform-badge {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px;
  border-radius: 6px;
  
  z-index: 20;
}

/* مهم جدًا: منع وراثة الخصائص اللي بتكبّر الصورة */
.card-media img.platform-badge {
  max-width: 35px !important;
  max-height: 35px !important;
}

/* فصل اللوجو عن ستايل صورة اللعبة */
.card-media img:not(.platform-badge) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* ===== Platform Logo Inside Product Page ===== */
.platform-badge-inline {
  width: 26px;
  height: 26px;
  display: inline-block;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

.platform-title-icon {
  width: 33px;       /* كان 22 زودناه */
  height: 33px;
  margin-right: 4px; /* قرّبناه من العنوان */
  vertical-align: middle;
  display: inline-block;
  object-fit: contain;
  transform: translateY(-2px); /* يرفع الأيقونة سنة فوق */
}
.nb__dropdown {
  position: relative;
  display: inline-block;
}

.nb__account {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 6px 10px;
}

.nb__dropdown-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: #111827;
  padding: 10px 0;
  border-radius: 10px;
  min-width: 180px;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.15s ease-out;
  z-index: 5000;
}

.nb__dropdown-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
}

.nb__dropdown-item {
  display: block;
  padding: 10px 15px;
  color: #e5e7eb;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.nb__dropdown-item:hover {
  background: #1f2937;
}

.nb__dropdown-item.danger {
  color: #f87171;
}
.user-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  font-weight: 600;
  font-size: 16px;
}

.user-avatar.letter {
  background: #ff8c00;
}

.userName {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: 'Rajdhani', sans-serif !important;
}

.nb__account .arrow {
  margin-left: 6px;
  font-size: 13px;
  color: #cbd5e1;
}

/* DROPDOWN MENU */
.nb__dropdown-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: #0f172a;
  padding: 12px 0;
  border-radius: 12px;
  min-width: 180px;
  box-shadow: 0 8px 25px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.15s ease-out;
  z-index: 9999;
}

.nb__dropdown-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0px);
}

.nb__dropdown-item {
  display: block;
  padding: 10px 18px;
  color: #e5e7eb;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif !important;
}

.nb__dropdown-item:hover {
  background: #1e293b;
}

/* logout item will look like normal items */
.nb__dropdown-item.danger {
  color: #fc0000;
  font-weight: 500;
}
/* =============================== */
/*     MOBILE RESPONSIVE STYLE     */
/* =============================== */

@media (max-width: 768px) {

  .nb__dropdown-menu {
    top: 48px;
    right: 0;
    min-width: 100%;
    padding: 14px 0;
    border-radius: 12px;
    transform: translateY(10px);
  }

  .user-box {
    gap: 6px;
  }

  .userName {
    font-size: 14px;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  /* زرار الحساب كله */
  #userDropdownBtn {
    padding: 8px 10px;
    font-size: 14px;
  }

  /* عناصر القائمة */
  .nb__dropdown-item {
    font-size: 15px;
    padding: 12px 18px;
  }
}
/* تحسين شكل خط Rajdhani */

/* تحسين العناوين */
h1, .cart-title {
    font-weight: 700 !important;
    font-size: 34px !important;
    letter-spacing: 1px !important;
}

/* الروابط في النافبار */
.nb__link,
.nb__dd-btn {
    font-size: 19px !important;
    font-weight: 600 !important;
}

/* تطبيق خط Orbitron على الناف بار */
.nb, 
.nb * {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0.7px; /* يخلي الخط فخم */
}

/* تحسين حجم ولون الخط */
.nb__link,
.nb__dd-btn,
.nb__mnav *,
.nb__actions *,
.nb__top-item *,
.nb__currency select {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
/* تصغير حجم القائمة المنسدلة */
.nb__menu {
    padding: 8px 0 !important; /* تقليل ارتفاع البوكس */
}

.nb__menu-item {
    font-size: 17px !important;   /* حجم خط أصغر */
    padding: 6px 14px !important; /* تقليل البادينج */
    line-height: 1.3 !important;
}

/* لو فيه سب منيو */
.nb__menu-sub .nb__menu-item {
    font-size: 12.5px !important;
    padding: 6px 14px !important;
}
/* === Fix User Icon on Mobile === */
.nb__auth .nb__icon-btn,
.nb__auth i.fa-user {
    font-size: 22px !important;       /* تكبير الايقونة */
    color: #ffffff !important;        /* نفس لون الأيقونة الأصلي */
}

/* زرار الأيقونة نفسه */
.nb__auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;     /* تصغير البادينج */
    border-radius: 10px;
}

/* منع تداخل الفونت الكبير مع تصميم البوكس */
.nb__auth .name {
    font-size: 16px !important;
}
i, .fa, .fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Free" !important;
}
.slides {
  width: 100%;
  position: relative;
}

.slide {
  width: 100%;
  display: none; /* مخفي افتراضياً */
  position: relative; 
}

.slide img {
  width: 100%;
  display: block;
  border-radius: 20px;
}
.slide {
    position: relative;
    display: inline-block;
}

.slide img {
    width: 100%;
    border-radius: 20px; /* لو عايز نفس شكل الأطراف */
}

.shop-btn {
    position: absolute;
    top: 20px;          /* مكان الزر من فوق */
    right: 20px;        /* مكان الزر من اليمين */
    background: #ff7a00;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.shop-btn:hover {
    transform: scale(1.05);
}
/* عنوان بدون خطوط جانبية – شكل CDKeys */
.section-title-clean {
  font-size: 56px;
  font-weight: 800;
  color: white;
  margin: 0 0 30px 0;
  padding-left: 5px;
  letter-spacing: -1px;
}

/* توسيع المسافة فوق وتحت القسم */
.best-section,
.pc-section {
  margin-top: 60px;
  margin-bottom: 40px;
}
.tooltip-trigger {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#444;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  margin-left:6px;
  position:relative;
}

.tooltip-box {
  position:absolute;
  top:25px;
  left:0;
  background:#1e1e1e;
  color:#fff;
  padding:10px;
  border-radius:6px;
  font-size:13px;
  width:220px;
  display:none;
  z-index:999;
  line-height:1.4;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.tooltip-box.show {
  display:block;
}