/* ==========================================================================
   IBplay — Public Site — Common Styles
   Shared tokens, nav, footer, buttons. Loaded on every public-facing page.
   ========================================================================== */

:root {
  /* Surfaces */
  --ib-bg:            #0b0b0d;   /* dark neutral gray, not literal black — reads as "black" without being flat/dead */
  --ib-bg-2:          #101013;
  --ib-surface:       #17171b;
  --ib-surface-2:     #151a27;
  --ib-surface-3:     #1b2130;
  --ib-border:        rgba(255, 255, 255, 0.08);
  --ib-border-strong: rgba(255, 255, 255, 0.16);

  /* Brand gradient */
  --ib-blue:    #4f8cff;
  --acc-rgb:    79, 140, 255;      /* the accent as r,g,b, for translucent uses (pages may override it) */
  --ib-blue-2:  #2f6bff;
  --ib-purple:  #9b5cff;
  --ib-gradient: linear-gradient(100deg, #4f8cff 0%, #8b6bff 55%, #9b5cff 100%);

  /* Game accents */
  --ib-cs2:       #e3b565;
  --ib-minecraft: #6fcf5d;
  --ib-fivem:     #ff5c7a;

  /* Text */
  --ib-text:       #f4f6fb;
  --ib-text-dim:   #97a1b5;
  --ib-text-faint: #5c6478;

  /* Status */
  --ib-online: #34d399;
  --ib-danger: #ff5c5c;

  /* One card surface, used by every card component site-wide */
  --ib-card-bg:     rgba(255, 255, 255, 0.03);
  --ib-card-border: rgba(255, 255, 255, 0.08);

  /* Type scale for card-level content (headings/eyebrows keep their own rules) */
  --ib-fs-meta: 12.5px;   /* labels, chip text, fine print */
  --ib-fs-body: 13.5px;   /* card paragraphs */
  --ib-fs-card-h: 17px;   /* card headings (h3) */

  /* Type */
  --ib-display: 'Chakra Petch', 'Manrope', 'Vazirmatn', sans-serif;   /* Manrope covers Cyrillic, Vazirmatn covers Persian/Arabic (loaded only for those languages) */
  --ib-body:    'Manrope', 'Vazirmatn', sans-serif;
  --ib-mono:    'JetBrains Mono', monospace;

  /* Misc */
  --ib-radius:    8px;   /* the one radius for every card on the site */
  --ib-radius-sm: 5px;
  --ib-radius-lg: 16px;
  --ib-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ib-container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.ib-site {
  margin: 0;
  background-color: var(--ib-bg); /* flat, neutral near-black — the .ib-particles layer carries all the motion */
  color: var(--ib-text);
  font-family: var(--ib-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Fixed-position UI (modals, floating widget) must be exempt, otherwise this
   rule wins on specificity and drags them back into normal page flow. */
body.ib-site > *:not(.ib-ambient):not(.ib-nav):not(.ib-mobile-drawer):not(.ib-modal-backdrop):not(.ib-trial-fab):not(.ib-particles):not(.ib-notice) { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.ib-container {
  width: 100%;
  max-width: var(--ib-container);
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 640px) {
  .ib-container { padding: 0 20px; }
}

/* ---------- Section eyebrow tag ---------- */
.ib-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  background: none;
  border: none;
  font-family: var(--ib-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ib-blue);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ib-eyebrow::before { content: '['; margin-right: -3px; opacity: .55; }
.ib-eyebrow::after  { content: ']'; margin-left: -3px; opacity: .55; }
.ib-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ib-online); box-shadow: 0 0 6px var(--ib-online); position: relative; }

/* Small pulsing "live" ring around any eyebrow dot — a shared bit of
   motion so eyebrow badges across every section feel like one system
   rather than a one-off hero effect. */
.ib-eyebrow .dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--ib-online);
  animation: ib-dot-ripple 2s ease-out infinite;
}
@keyframes ib-dot-ripple {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Focus visibility (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ib-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Buttons ---------- */
.ib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--ib-radius-sm);
  font-family: var(--ib-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ib-ease), box-shadow 0.25s var(--ib-ease), background 0.25s var(--ib-ease), border-color .25s var(--ib-ease);
  white-space: nowrap;
}
.ib-btn svg { width: 16px; height: 16px; flex: none; }

.ib-btn--primary {
  background: linear-gradient(180deg, #4b86ff 0%, #2f66e0 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 26px -10px rgba(47, 102, 224, 0.65);
}
.ib-btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #5a91ff 0%, #3670ec 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 16px 34px -10px rgba(47, 102, 224, 0.75);
}

.ib-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ib-border-strong);
  color: var(--ib-text);
}
.ib-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.3); }

.ib-btn--sm { padding: 10px 18px; font-size: 13px; border-radius: 8px; }
.ib-btn--lg { padding: 17px 32px; font-size: 16.5px; border-radius: 12px; }
.ib-btn--block { width: 100%; }

/* ---------- Nav ---------- */
.ib-nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 16px 0;
  transition: background 0.3s var(--ib-ease), border-color 0.3s var(--ib-ease);
  border-bottom: 1px solid transparent;
  background: rgba(7, 9, 15, 0.82);
}
.ib-nav.is-scrolled {
  background: rgba(7, 9, 15, 0.94);
  border-bottom-color: var(--ib-border);
}
.ib-nav .ib-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ib-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ib-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.ib-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--ib-gradient);
  color: #06070d;
  font-size: 14px;
  font-weight: 800;
  transform: skew(-6deg);
}
.ib-logo-ib { color: var(--ib-blue); }
.ib-logo-play { color: #fff; }

.ib-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
}
.ib-nav-links > li > a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ib-text-dim);
  transition: color 0.2s;
  position: relative;
}
.ib-nav-links > li > a:hover,
.ib-nav-links > li > a.is-active { color: #fff; }
.ib-nav-links > li > a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--ib-gradient);
  border-radius: 2px;
}

.ib-nav-actions { display: flex; align-items: center; gap: 12px; }
.ib-nav-link-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--ib-text-dim);
  padding: 10px 14px;
}
.ib-nav-link-btn:hover { color: #fff; }

.ib-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--ib-border-strong);
  background: rgba(255,255,255,0.03);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.ib-burger span { width: 16px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 920px) {
  .ib-nav-links { display: none; }
  .ib-nav-actions .ib-btn--ghost,
  .ib-nav-actions .ib-nav-link-btn,
  .ib-nav-actions .ib-btn--primary { display: none; }
  .ib-burger { display: inline-flex; }
}

/* ---------- Games dropdown (shared header) ---------- */
.ib-nav-dd { position: relative; }
.ib-nav-dd-trigger { display: inline-flex; align-items: center; gap: 6px; }
.ib-nav-caret { width: 13px; height: 13px; opacity: .75; flex: none; transition: transform .25s var(--ib-ease); }
.ib-nav-dd.is-open .ib-nav-caret, .ib-nav-dd:has(:focus-visible) .ib-nav-caret { transform: rotate(180deg); }
@media (hover: hover) { .ib-nav-dd:hover .ib-nav-caret { transform: rotate(180deg); } }
.ib-dd-panel {
  position: absolute; top: 100%; left: 50%; z-index: 250; width: 410px; padding-top: 18px;    /* the padding is an invisible hover bridge */
  transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--ib-ease), visibility 0s .2s;
}
.ib-nav-dd.is-open .ib-dd-panel, .ib-nav-dd:has(:focus-visible) .ib-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s;
}
/* hover opens it only on devices that really hover: a touch screen's "sticky" :hover must never hold it open */
@media (hover: hover) {
  .ib-nav-dd:hover .ib-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
}
.ib-nav-dd.is-dismissed .ib-dd-panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); }
.ib-dd-card { padding: 14px; border-radius: 18px; border: 1px solid var(--ib-border-strong); background: var(--ib-surface); box-shadow: 0 28px 60px -26px rgba(0,0,0,.7); }
.ib-dd-label { margin: 2px 8px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ib-text-faint); }
.ib-dd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ib-dd-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; border: 1px solid transparent; transition: background-color .2s, box-shadow .2s, transform .2s var(--ib-ease); }
.ib-dd-item img { width: 52px; height: 52px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--ib-border-strong); }
.ib-dd-item .ib-opt-soon { margin-inline-end: 4px; }
.ib-dd-text { flex: 1; min-width: 0; }
.ib-dd-text b { display: block; font-family: var(--ib-display); font-size: 15.5px; font-weight: 700; color: var(--ib-text); }
.ib-dd-text small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ib-text-dim); }
.ib-dd-go { width: 16px; height: 16px; flex: none; color: var(--ib-text-faint); transition: transform .25s var(--ib-ease), color .2s; }
.ib-dd-item:hover, .ib-dd-item:focus-visible, .ib-dd-item.is-current { background: var(--ib-surface-2); box-shadow: inset 3px 0 0 var(--accent, var(--ib-blue)); }
.ib-dd-item:hover .ib-dd-go, .ib-dd-item:focus-visible .ib-dd-go { transform: translateX(3px); color: var(--accent, var(--ib-blue)); }
.ib-dd-item:focus-visible, .ib-dd-all:focus-visible, .ib-nav-dd-trigger:focus-visible { outline: 2px solid var(--ib-blue); outline-offset: 2px; }
.ib-dd-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 8px 2px; padding-top: 12px; border-top: 1px solid var(--ib-border); }
.ib-dd-soon span { margin-right: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ib-text-faint); }
.ib-dd-soon i { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--ib-border-strong); color: var(--ib-text-dim); }
.ib-dd-all { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ib-blue); transition: background-color .2s; }
.ib-dd-all .ib-dd-go { color: currentColor; }
.ib-dd-all:hover { background: var(--ib-surface-2); }
@media (prefers-reduced-motion: reduce) { .ib-dd-panel, .ib-nav-caret, .ib-dd-item, .ib-dd-go { transition: none; } }

/* mobile drawer: the same list, as an accordion */
.ib-drawer-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--ib-border); background: none; color: inherit; text-align: left; cursor: pointer;
  font-family: var(--ib-display); font-size: 22px; font-weight: 600; }
.ib-drawer-acc .ib-nav-caret { width: 18px; height: 18px; opacity: .8; }
.ib-drawer-acc[aria-expanded="true"] .ib-nav-caret { transform: rotate(180deg); }
.ib-drawer-sub { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height .35s var(--ib-ease); }
.ib-drawer-sub.is-open { max-height: 340px; }
.ib-mobile-drawer nav .ib-drawer-game { display: flex; align-items: center; gap: 14px; padding: 10px 6px 10px 12px; border-bottom: 0; font-size: 17px; font-weight: 600; color: var(--ib-text-dim); }
.ib-drawer-game img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.ib-mobile-drawer nav .ib-drawer-all { padding-left: 12px; font-size: 15px; color: var(--ib-blue); }

/* ---------- Round header controls: theme button, and the language | currency | basket group ---------- */
.ib-circ {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ib-border-strong); background: var(--fill-1, rgba(255,255,255,.04)); color: var(--ink, #fff); cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s var(--ib-ease);
}
.ib-circ:hover { border-color: rgba(var(--acc-rgb), .6); background: rgba(var(--acc-rgb), .12); color: var(--ib-blue); }
.ib-circ:active { transform: scale(.93); }
.ib-circ:focus-visible { outline: 2px solid var(--ib-blue); outline-offset: 3px; }
.ib-circ svg { width: 19px; height: 19px; }

/* typographic art for a game that has no picture yet (ib_game_thumb() in includes/games.php; the big version fills a card) */
.ib-gtype { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 11px; text-align: center;
  font-family: var(--ib-display); font-weight: 800; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; color: var(--accent, var(--ib-blue));
  background: #0a0f1b; background: radial-gradient(120% 100% at 25% 15%, color-mix(in srgb, var(--accent, var(--ib-blue)) 34%, #0a0f1b), #0a0f1b 72%); border: 1px solid color-mix(in srgb, var(--accent, var(--ib-blue)) 40%, transparent); }
.ib-gtype--lg { width: 100%; height: 100%; border: 0; border-radius: 0; font-size: clamp(64px, 9vw, 116px); letter-spacing: -.04em; text-shadow: 0 0 44px color-mix(in srgb, var(--accent, var(--ib-blue)) 60%, transparent); }
.ib-gtype--lg::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.045) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.045) 39px 40px); }

/* flags (SVG from includes/flags.php): a small rectangle by default, or a round crop in round buttons */
.ib-flag { display: inline-block; width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,.28); vertical-align: middle; }
.ib-flag--round { width: 22px; height: 22px; border-radius: 50%; }
.ib-circ .ib-flag--round { transition: transform .35s var(--ib-ease); }
.ib-circ:hover .ib-flag--round { transform: scale(1.1); }
/* the currency button shows the chosen code (USD, EUR ...) */
.ib-cur-code { font-family: var(--ib-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1px; line-height: 1; }
.ib-opt > .ib-flag { width: 28px; height: 19px; }

/* theme: the sun spins away and a moon turns in (the icon shows the mode you'd switch TO) */
.ib-theme-ic { width: 22px; height: 22px; overflow: visible; transition: transform .5s var(--ib-ease); }
.ib-theme-ic .ib-ic-sun, .ib-theme-ic .ib-ic-moon { transform-origin: 12px 12px; transition: transform .6s var(--ib-ease), opacity .35s ease; }
.ib-theme-ic .ib-ic-moon { opacity: 0; transform: rotate(-80deg) scale(.35); }
.ib-theme-ic .ib-sun-rays { transform-origin: 12px 12px; transition: transform .6s var(--ib-ease); }
.ib-theme:hover .ib-sun-rays { transform: rotate(45deg); }
html[data-theme="light"] .ib-theme-ic .ib-ic-sun { opacity: 0; transform: rotate(80deg) scale(.35); }
html[data-theme="light"] .ib-theme-ic .ib-ic-moon { opacity: 1; transform: none; }
html[data-theme="light"] .ib-theme:hover .ib-ic-moon { transform: rotate(-16deg); }

/* the group */
.ib-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 3px; border-radius: 999px; border: 1px solid var(--ib-border-strong); background: var(--fill-1, rgba(255,255,255,.03)); }
.ib-tool { position: relative; }
.ib-tool + .ib-tool::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 1px; background: var(--ib-border-strong); pointer-events: none; }
.ib-tools .ib-circ { width: 34px; height: 34px; border: 0; background: transparent; }
.ib-tools .ib-circ svg { width: 18px; height: 18px; }
.ib-tools .ib-circ .ib-flag--round { width: 21px; height: 21px; }
.ib-tools .ib-circ:hover, .ib-tool.is-open > .ib-circ { background: rgba(var(--acc-rgb), .15); color: var(--ib-blue); }

/* basket badge */
.ib-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ib-blue); color: #fff;
  font-family: var(--ib-mono); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--ib-bg); pointer-events: none; }
.ib-badge[hidden] { display: none; }
.ib-badge.is-pop { animation: ib-badge-pop .5s var(--ib-ease); }
@keyframes ib-badge-pop { 0% { transform: scale(.3); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* menus (click to open; same card look as the Games dropdown) */
.ib-tool-menu {
  position: absolute; top: calc(100% + 16px); right: -6px; z-index: 260; width: 276px; padding: 14px; border-radius: 18px;
  border: 1px solid var(--ib-border-strong); background: var(--ib-surface); box-shadow: 0 28px 60px -26px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .3s var(--ib-ease), visibility 0s .2s;
}
.ib-tool.is-open > .ib-tool-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ib-tool-menu--cart { width: 330px; }
.ib-tool-title { margin: 2px 6px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ib-text-faint); }
.ib-opt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; }
.ib-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ib-opt:hover, .ib-opt:focus-visible { background: var(--ib-surface-2); outline: none; }
.ib-opt[aria-selected="true"] { border-color: rgba(var(--acc-rgb), .45); background: rgba(var(--acc-rgb), .08); }
.ib-opt-main { flex: 1; min-width: 0; }
.ib-opt-main b { display: block; font-family: var(--ib-display); font-size: 15px; font-weight: 700; color: var(--ib-text); }
.ib-opt-main small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ib-text-dim); }
.ib-opt-sym { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ib-surface-3); border: 1px solid var(--ib-border); font-family: var(--ib-display); font-size: 13.5px; font-weight: 700; color: var(--ib-text); }
.ib-opt-soon { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--ib-border-strong); color: var(--ib-text-faint); }
.ib-opt-check { width: 16px; height: 16px; flex: none; color: var(--ib-blue); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ib-ease); }
.ib-opt[aria-selected="true"] .ib-opt-check { opacity: 1; transform: none; }
.ib-tool-note { margin: 10px 6px 2px; font-size: 12px; line-height: 1.5; color: var(--ib-text-faint); }

/* basket panel */
.ib-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 8px; text-align: center; color: var(--ib-text-dim); }
.ib-cart-empty svg { width: 36px; height: 36px; opacity: .55; }
.ib-cart-empty p { margin: 0; font-size: 14px; }
.ib-cart-empty[hidden], .ib-cart-full[hidden] { display: none; }
.ib-cart-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--ib-border); background: var(--ib-surface-2); }
.ib-cart-item img { width: 48px; height: 48px; flex: none; border-radius: 11px; object-fit: cover; }
.ib-cart-item .ib-cart-txt { flex: 1; min-width: 0; }
.ib-cart-item b { display: block; font-family: var(--ib-display); font-size: 15px; color: var(--ib-text); }
.ib-cart-item small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ib-text-dim); }
.ib-cart-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--ib-text-faint); cursor: pointer; transition: background-color .2s, color .2s; }
.ib-cart-x:hover { background: var(--ib-surface-3); color: var(--ib-text); }
.ib-cart-x svg { width: 15px; height: 15px; }
.ib-cart-total { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 4px 12px; font-size: 13.5px; color: var(--ib-text-dim); }
.ib-cart-total b { font-family: var(--ib-display); font-size: 21px; color: var(--ib-text); }
.ib-cart-full .ib-btn { width: 100%; justify-content: center; }
.ib-cart-note { margin: 10px 4px 0; font-size: 12px; line-height: 1.5; color: var(--ib-text-faint); text-align: center; }

@media (max-width: 920px) {
  .ib-tools { margin-left: 0; }
  .ib-tools .ib-circ { width: 32px; height: 32px; }
  .ib-tool-menu, .ib-tool-menu--cart { position: fixed; top: 74px; left: 12px; right: 12px; width: auto; }
}
@media (max-width: 400px) { .ib-nav-actions { gap: 6px; } .ib-circ { width: 34px; height: 34px; } .ib-tools { padding: 2px; } .ib-tools .ib-circ { width: 28px; height: 28px; } .ib-tools .ib-circ svg { width: 16px; height: 16px; } .ib-tools .ib-circ .ib-flag--round { width: 19px; height: 19px; } .ib-tools .ib-cur-code { font-size: 9.5px; } .ib-burger { width: 38px; height: 38px; } }
@media (max-width: 350px) { .ib-logo-play { display: none; } }
@media (prefers-reduced-motion: reduce) { .ib-tool-menu, .ib-opt-check, .ib-theme-ic, .ib-theme-ic * { transition: none; } .ib-badge.is-pop { animation: none; } }

/* Mobile drawer */
.ib-mobile-drawer {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(5,7,12,0.98);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 40px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ib-ease);
}
.ib-mobile-drawer.is-open { transform: translateX(0); }
.ib-mobile-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.ib-mobile-drawer nav { display: flex; flex-direction: column; gap: 6px; }
.ib-mobile-drawer nav a {
  font-family: var(--ib-display);
  font-size: 22px;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid var(--ib-border);
}
.ib-mobile-drawer-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.ib-close-btn {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--ib-border-strong);
  background: rgba(255,255,255,0.03);
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Section helpers ---------- */
.ib-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 44px; }
.ib-section-title {
  font-family: var(--ib-display);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  max-width: 640px;
}
.ib-section-sub { color: var(--ib-text-dim); font-size: 16px; line-height: 1.6; max-width: 480px; margin: 0; }
.ib-grad-text {
  background: var(--ib-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Footer ---------- */
.ib-footer {
  border-top: 1px solid var(--ib-border);
  padding: 72px 0 30px;
  background: var(--ib-bg-2);
}
.ib-footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}
.ib-footer-brand p {
  color: var(--ib-text-dim);
  font-size: 14px;
  max-width: 280px;
  margin: 14px 0 22px;
}
.ib-footer-socials { display: flex; gap: 10px; }
.ib-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--ib-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ib-text-dim);
  transition: color .2s, border-color .2s;
}
.ib-footer-socials a:hover { color: #fff; border-color: var(--ib-blue); }
.ib-footer-socials svg { width: 16px; height: 16px; }

.ib-footer-col h4 {
  font-family: var(--ib-display);
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #fff;
  margin: 0 0 16px;
}
.ib-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ib-footer-col a { color: var(--ib-text-dim); font-size: 14px; transition: color .2s; }
.ib-footer-col a:hover { color: #fff; }

.ib-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--ib-border);
  color: var(--ib-text-faint);
  font-size: 13px;
}
.ib-footer-bottom-links { display: flex; gap: 20px; }
.ib-footer-status { display: inline-flex; align-items: center; gap: 7px; }
.ib-footer-status span.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ib-online); box-shadow: 0 0 8px var(--ib-online); }

@media (max-width: 860px) {
  .ib-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ib-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .ib-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Trust / stat strip (reused across pages) ---------- */
.ib-trust-strip {
  border-top: 1px solid var(--ib-border);
  border-bottom: 1px solid var(--ib-border);
  background: rgba(255,255,255,0.015);
}
.ib-trust-strip .ib-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px 28px;
}
.ib-trust-item { display: flex; align-items: center; gap: 12px; }
.ib-trust-item .ib-icon-badge { width: 38px; height: 38px; }
.ib-trust-item strong {
  display: block;
  font-family: var(--ib-display);
  font-size: 18px;
  color: #fff;
}
.ib-trust-item span { font-size: 12.5px; color: var(--ib-text-dim); }

@media (max-width: 760px) {
  .ib-trust-strip .ib-container { grid-template-columns: repeat(2, 1fr); }
}

.ib-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(79,140,255,0.16), rgba(155,92,255,0.10));
  border: 1px solid rgba(120,140,255,0.25);
  color: var(--ib-blue);
  flex: none;
}
.ib-icon-badge svg { width: 19px; height: 19px; }

/* ---------- Final CTA banner (reused) ---------- */
.ib-cta-banner {
  position: relative;
  margin: 0 auto;
  max-width: var(--ib-container);
  border-radius: 28px;
  overflow: hidden;
  padding: 64px 48px;
  text-align: center;
  background:
    radial-gradient(120% 180% at 15% 0%, rgba(79,140,255,0.22), transparent 55%),
    radial-gradient(120% 180% at 85% 100%, rgba(155,92,255,0.22), transparent 55%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ib-border);
}
.ib-cta-banner > * {
  position: relative;
  z-index: 1;
}
.ib-cta-banner h2 {
  font-family: var(--ib-display);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 14px;
}
.ib-cta-banner p { color: var(--ib-text-dim); max-width: 480px; margin: 0 auto 30px; }
.ib-cta-banner .ib-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ib-cta-trust-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ib-border);
}
.ib-cta-trust-row span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ib-text-dim);
}

@media (max-width: 640px) {
  .ib-cta-banner { padding: 48px 24px; border-radius: 20px; }
}

/* ---------- Toast Stack & Notification (shared: public site) ---------- */
.ib-toast-stack {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ib-toast {
  pointer-events: auto;
  padding: 12px 18px;
  border-radius: 9px;
  border: 1px solid var(--ib-border-strong);
  background: var(--ib-surface-2);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ib-ease), transform 0.25s var(--ib-ease);
  display: flex;
  align-items: center;
  gap: 9px;
}

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

.ib-toast::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ib-online);
  flex: none;
  box-shadow: 0 0 6px 1px rgba(52, 211, 153, 0.6);
}

.ib-toast.danger::before {
  background: var(--ib-danger);
  box-shadow: 0 0 6px 1px rgba(255, 92, 92, 0.5);
}

/* ---------- FAQ (shared: used on homepage + servers.php) ---------- */
.ib-faq { max-width: 760px; margin: 0 auto; }
.ib-faq-item {
  border-bottom: 1px solid var(--ib-border);
}
.ib-faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  background: none; border: none;
  color: #fff;
  font-family: var(--ib-display);
  font-size: 16.5px;
  font-weight: 600;
  text-align: left;
}
.ib-faq-q svg { width: 18px; height: 18px; flex: none; color: var(--ib-text-dim); transition: transform .3s var(--ib-ease); }
.ib-faq-item.is-open .ib-faq-q svg { transform: rotate(45deg); color: var(--ib-blue); }
.ib-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ib-ease);
}
.ib-faq-a p { margin: 0 4px 22px; color: var(--ib-text-dim); font-size: 14.5px; line-height: 1.7; max-width: 620px; }


/* ---------- Ambient particles (whole site) ----------
   ONE fixed layer of tiny dots drifting upward behind every section.
   Only transform + opacity animate (compositor-only, no repaint), no blur,
   so it costs almost nothing however long the page is. */
.ib-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ib-particles span {
  position: absolute;
  bottom: -12px;
  width: var(--size, 3px);
  height: var(--size, 3px);
  background: var(--ib-blue);
  opacity: 0;
  transform: rotate(45deg); /* small diamond "signal ping" rather than a soft dot */
  will-change: transform, opacity;
  animation: ib-particle-rise var(--dur, 24s) linear var(--delay, 0s) infinite;
}
@keyframes ib-particle-rise {
  0%   { transform: translate3d(0, 0, 0) rotate(45deg);      opacity: 0; }
  10%  { opacity: .45; }
  85%  { opacity: .2; }
  100% { transform: translate3d(0, -112vh, 0) rotate(45deg); opacity: 0; }
}
@media (max-width: 720px) {
  .ib-particles span:nth-child(n+9) { display: none; }
}

/* mid-size screens: the secondary "Features" link makes room for the others (it is still in the mobile menu and footer) */
@media (max-width: 1180px) { .ib-nav-hide-md { display: none; } }
@media (max-width: 1060px) { .ib-nav-links { gap: 18px; } .ib-nav-actions { gap: 8px; } }

/* desktop: the language | currency | basket group sits at the far edge of the window, apart from the menu buttons.
   The header content reserves exactly the room it needs (less when the window is wider than the page content). */
@media (min-width: 1100px) {
  .ib-nav > .ib-container { padding-inline-end: max(28px, calc(172px - max(0px, (100vw - var(--ib-container)) / 2))); }
  .ib-nav-actions .ib-tools { position: absolute; top: 50%; inset-inline-end: 20px; margin: 0; transform: translateY(-50%); }
}

/* ==========================================================================
   Right-to-left languages (Persian, Arabic): <html dir="rtl"> is set by includes/i18n.php.
   Most layout flips by itself (flex/grid); only things that were anchored to a physical side need a rule here.
   ========================================================================== */
[dir="rtl"] .ib-tool-menu { right: auto; left: -6px; }
@media (max-width: 920px) { [dir="rtl"] .ib-tool-menu, [dir="rtl"] .ib-tool-menu--cart { left: 12px; right: 12px; } }
/* numbers, counters, prices and technical values keep their left-to-right order inside right-to-left text */
[dir="rtl"] .ib-rv-count, [dir="rtl"] .fs-count, [dir="rtl"] .ib-net-spec b, [dir="rtl"] .ib-amt, [dir="rtl"] .ib-game-price,
[dir="rtl"] .ib-badge, [dir="rtl"] .ib-cur-code, [dir="rtl"] .ch-prog-txt, [dir="rtl"] .ch-pts, [dir="rtl"] .ch-reward-buy b { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ib-net-spec b { display: block; text-align: right; }