/* =====================================================================
   G4A redesign — theme overrides (templates/antler)
   Every rule is prefixed with "html body" so it wins over the section
   stylesheets that load later inside <body> (slider.css, plans.css).
   ===================================================================== */

/* ---------- HERO ---------- */

/* The slide backgrounds were a grey placeholder JPG and a broken video:
   replace them with a dark scene with red light and a faint grid. */
html body .g4a-sl-bg img,
html body .g4a-sl-bg video { display: none; }

html body .g4a-sl-bg,
html body .g4a-sl-bg--dark {
  background:
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(232, 25, 42, 0.22), transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(232, 25, 42, 0.10), transparent 70%),
    linear-gradient(180deg, #0b0b0d 0%, #111114 100%);
}
html body .g4a-sl-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 30%, transparent 75%);
}
html body .g4a-sl-ov,
html body .g4a-sl-ov--full {
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.55) 45%, transparent 75%);
}

/* Game grid on the right: shows what we host instead of an empty background. */
html body .g4a-hero-art {
  position: absolute;
  z-index: 1;
  right: 6%;
  top: 50%;
  transform: translateY(-50%) perspective(1200px) rotateY(-14deg) rotateX(6deg);
  display: grid;
  grid-template-columns: repeat(4, 96px);
  gap: 18px;
  pointer-events: none;
}
html body .g4a-hero-art img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 25, 42, 0.08);
  opacity: 0.92;
}
html body .g4a-hero-art img:nth-child(odd) { transform: translateY(18px); }

/* Headline and text: stronger contrast and rhythm. */
html body .g4a-h1 {
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.025em;
  max-width: 640px;
}
html body .g4a-p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.70);
  max-width: 500px;
}
html body .g4a-btn { padding: 13px 26px; font-size: 12px; border-radius: 6px; }
html body .g4a-btn--red { box-shadow: 0 10px 30px rgba(232, 25, 42, 0.35); }
html body .g4a-tag { border-radius: 4px; padding: 4px 10px; }

@media (max-width: 1199px) {
  html body .g4a-hero-art { right: 3%; grid-template-columns: repeat(4, 72px); gap: 12px; }
  html body .g4a-hero-art img { width: 72px; height: 72px; border-radius: 16px; }
}
@media (max-width: 991px) {
  html body .g4a-hero-art { display: none; }
}

/* Mobile: shorter hero, no arrows over the text (swipe + dots remain). */
@media (max-width: 767px) {
  html body .g4a-slider {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
  /* Same height for every slide, so the page does not jump when slides rotate. */
  html body .g4a-sl { position: relative; inset: auto; height: auto; min-height: 460px; }
  html body .g4a-sl:not(.g4a-sl--on) { display: none; }
  html body .g4a-sl-body { padding: 72px 20px 84px; }
  html body .g4a-h1 { font-size: 32px; }
  html body .g4a-p { font-size: 15px; }
  html body .g4a-arr { display: none; }
  html body .g4a-btns .g4a-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- GAME CARDS ---------- */

html body .gplans-badge { border-radius: 4px; }
html body .gplans-title { font-size: clamp(30px, 3.4vw, 46px); }

/* Red only where it matters (price CTA); headers are dark so the grid reads calmer. */
html body .gplan-card {
  position: relative;
  background: #141416;
  border: 1px solid #242428;
  border-radius: 16px;
}
html body .gplan-card__top {
  background: linear-gradient(180deg, #1c1c20 0%, #161619 100%);
  border-bottom: 1px solid #242428;
  padding: 26px 20px 22px;
}
html body .gplan-card__top::after { display: none; }
html body .gplan-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #0f0f11;
  border: 1px solid #2c2c31;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
html body .gplan-card__icon img { border-radius: 16px; }
html body .gplan-card__name {
  font-size: 16px;
  font-weight: 700;
  color: #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "from €7.00/mo" on one line; the old superscript € floated above the number. */
html body .gplan-card__price { font-size: 30px; letter-spacing: -0.01em; }
html body .gplan-card__price small {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: lowercase;
  margin-right: 4px;
  vertical-align: middle;
}
html body .gplan-card__price span { color: #9ca3af; }
html body .gplan-card__features li { color: #c4c8cf; border-bottom-color: #1f1f23; }
html body .gplan-card__btn { border-radius: 8px; }

html body .gplan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 25, 42, 0.65);
  box-shadow: 0 22px 50px rgba(232, 25, 42, 0.16);
}

/* Ribbons */
html body .gplan-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: #e8192a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
html body .gplan-ribbon--muted { background: #2a2a2f; color: #a1a1aa; }
html body .gplan-card--popular { border-color: rgba(232, 25, 42, 0.55); box-shadow: 0 0 0 1px rgba(232, 25, 42, 0.25); }
html body .gplan-card--popular .gplan-card__top {
  background: linear-gradient(180deg, rgba(232, 25, 42, 0.18) 0%, #161619 100%);
}
html body .gplan-card--legacy { opacity: 0.85; }

/* Phones: one card per row is easier to read than two narrow ones. */
@media (max-width: 576px) {
  html body .gplans-grid { grid-template-columns: 1fr; gap: 14px; }
  html body .gplan-card__features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  html body .gplan-card__features li { border-bottom: none; padding: 5px 0; }
}

/* ---------- INNER PAGES ---------- */

/* One dark background everywhere (contact and cart were blue-grey). */
html body,
html body .bg-colorstyle,
html body .wrapper.sec-normal,
html body .sec-normal,
html body #main-body,
html body .main-body,
html body .content.bg-colorstyle { background-color: #0d0d0d !important; }

/* Generic page banner (cart, store, support...): it used a grey placeholder image. */
html body .top-header.item17 {
  background:
    radial-gradient(ellipse 50% 90% at 85% 30%, rgba(232, 25, 42, 0.20), transparent 65%),
    linear-gradient(180deg, #0b0b0d 0%, #111114 100%) !important;
  padding: 64px 0 52px !important;
  min-height: 0 !important;
  border-bottom: 1px solid #1f1f23;
}
html body .top-header.item17::before,
html body .top-header.item17::after,
html body .top-header.item17.overlay::before { background: none !important; opacity: 0 !important; }
html body .top-header.item17 .heading { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
html body .top-header.item17 .subheading { font-size: 15px; color: #9ca3af; font-weight: 400; }

/* Prices on the game pages: currency sits next to the number. */
html body .g4a-cur { font-size: 0.55em; font-weight: 700; margin-right: 2px; vertical-align: 0.55em; }

/* About: the image slots have no photos yet; make them read as deliberate panels. */
html body .about-row__img-placeholder {
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(232, 25, 42, 0.16), transparent 70%),
    #121215 !important;
  border: 1px solid #242428 !important;
  border-radius: 16px !important;
}
html body .about-row__img-placeholder i { font-size: 56px !important; color: #e8192a !important; opacity: 0.9; }
html body .about-row__img-placeholder span { display: none; }

/* Contact: the submit button overlapped the card's bottom edge. */
html body .g4a-contact-wrap { padding-bottom: 48px; margin-bottom: 64px; }
html body .g4a-btn-submit { background: #e8192a; }
html body .g4a-btn-submit:hover { background: #ff2d3f; }

/* The theme's dark mode uses a blue-grey palette (#15212a / #101920) behind
   "[data-background=dark] ..." !important rules; doubled classes outrank them. */
[data-background=dark] .bg-colorstyle.bg-colorstyle { background-color: #0d0d0d !important; }
[data-background=dark] .offcanvas.bg-colorstyle.bg-colorstyle,
[data-background=dark] .content.bg-colorstyle.bg-colorstyle,
[data-background=dark] .modal-content.modal-content,
[data-background=dark] .panel-sidebar.panel-sidebar { background-color: #141416 !important; }
[data-background=dark] .list-group-item.active.active { background-color: #1c1c20 !important; border-color: #e8192a !important; }
[data-background=dark] #order-standard_cart .form-control.form-control,
[data-background=dark] #order-standard_cart .prepend-icon .field.field { background-color: #1a1a1e !important; }

/* ---------- ABOUT ---------- */

/* Thick grey rules between every section looked like a document; spacing and tone do the job. */
html body .about-divider { display: none; }
html body .about-section--mid { background: #0d0d0d; }
html body .about-section--dark { background: #111113; }

html body .about-hero {
  position: relative;
  background:
    radial-gradient(ellipse 45% 80% at 50% 0%, rgba(232, 25, 42, 0.20), transparent 70%),
    linear-gradient(180deg, #0b0b0d 0%, #0d0d0d 100%);
  padding: 96px 0 72px;
}
html body .about-hero__title { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.025em; }
html body .about-hero__badge { border-radius: 4px; }

/* Stats: four cards instead of numbers floating between two rules. */
html body .about-stats { background: #0d0d0d; padding: 0 0 72px; }
html body .about-stats__inner { gap: 16px; }
html body .about-stat {
  background: #141416;
  border: 1px solid #242428;
  border-radius: 16px;
  padding: 28px 16px;
}
html body .about-stat__number { color: #fff; }
html body .about-stat__label { color: #9ca3af; }

/* Row visuals */
html body .about-visual {
  border-radius: 18px;
  border: 1px solid #242428;
  background:
    radial-gradient(ellipse 70% 70% at 50% 35%, rgba(232, 25, 42, 0.14), transparent 70%),
    #121215;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
html body .about-visual--games {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 32px;
}
html body .about-visual--games img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
html body .about-visual--shot { padding: 0; }
html body .about-visual--shot img { display: block; width: 100%; height: auto; }
html body .about-visual--specs { display: grid; gap: 12px; padding: 28px; }
html body .about-spec {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #18181b;
  border: 1px solid #26262b;
  border-radius: 12px;
  padding: 14px 18px;
}
html body .about-spec i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(232, 25, 42, 0.12);
  color: #e8192a;
  font-size: 18px;
}
html body .about-spec b { display: block; color: #f3f4f6; font-size: 15px; }
html body .about-spec span { display: block; color: #9ca3af; font-size: 13px; }

html body .about-row__number { color: #e8192a; letter-spacing: 0.14em; }
html body .about-row__btn { border-radius: 8px; }

/* Values */
html body .about-values { background: #111113; }
html body .about-value-card {
  background: #141416;
  border: 1px solid #242428;
  border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
html body .about-value-card:hover { transform: translateY(-4px); border-color: rgba(232, 25, 42, 0.55); }
html body .about-value-card__icon {
  width: 46px;
  height: 46px;
  display: grid !important;
  place-items: center;
  border-radius: 12px;
  background: rgba(232, 25, 42, 0.12);
  font-size: 20px !important;
  margin-bottom: 18px;
}

/* Team: initials on a red gradient instead of the same person icon four times. */
html body .about-team { background: #0d0d0d; }
html body .about-team-card { background: #141416; border: 1px solid #242428; border-radius: 16px; }
html body .about-team-card__avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e8192a 0%, #7f0d17 100%) !important;
  border: 3px solid #1c1c20 !important;
  box-shadow: 0 0 0 1px rgba(232, 25, 42, 0.35), 0 12px 28px rgba(232, 25, 42, 0.25);
  color: #fff !important;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: grid !important;
  place-items: center;
}

/* Final CTA as a card with a glow, not just text on the page. */
html body .about-cta {
  max-width: 1080px;
  margin: 24px auto 96px;
  border: 1px solid #2a2a2f;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(232, 25, 42, 0.22), transparent 70%),
    #121215;
}

@media (max-width: 767px) {
  html body .about-visual--games { padding: 20px; gap: 10px; }
  html body .about-cta { margin: 16px 16px 64px; }
}

/* About stats: equal cards (4 across, 2x2 on phones) instead of content-width boxes. */
html body .about-stats__inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
html body .about-stat { width: auto !important; min-width: 0; text-align: center; }
@media (max-width: 767px) {
  html body .about-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  html body .about-stat { padding: 20px 10px; }
  html body .about-stat__number { font-size: 30px !important; }
  html body .about-stat__label { font-size: 11px !important; letter-spacing: 0.08em; }
}

/* ---------- LOADER (replaces the theme's yellow double bounce) ---------- */
html body #spinner-area {
  background: #0b0b0d;
  opacity: 1;
  display: grid;
  place-items: center;
  transition: opacity 0.35s ease;
}
html body #spinner-area.g4a-loader-done { opacity: 0; }
html body .g4a-loader { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
html body .g4a-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(232, 25, 42, 0.15);
  border-top-color: #e8192a;
  box-shadow: 0 0 30px rgba(232, 25, 42, 0.25);
  animation: g4aSpin 0.9s linear infinite;
}
html body .g4a-loader__logo {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  animation: g4aPulse 1.6s ease-in-out infinite;
}
@keyframes g4aSpin { to { transform: rotate(360deg); } }
@keyframes g4aPulse { 50% { opacity: 0.55; } }

/* ---------- ANIMATED BACKGROUND (site-wide, behind the content) ---------- */
html { background: #0b0b0d; }
html body { background: transparent !important; }

/* Page-level containers let the background show; cards, menus and panels stay solid. */
[data-background=dark] div.bg-colorstyle.bg-colorstyle:not(.offcanvas):not(.content):not(.modal-content),
html body .wrapper.sec-normal,
html body #main-body,
html body .main-body,
html body .gplans-page,
html body .about-section--mid,
html body .about-stats,
html body .about-team,
html body .about-hero { background-color: transparent !important; }
html body .about-section--dark,
html body .about-values { background: rgba(17, 17, 19, 0.55) !important; }

/* Two slow red lights */
html body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, rgba(232, 25, 42, 0.16), transparent 32%),
    radial-gradient(circle at 75% 70%, rgba(150, 12, 24, 0.18), transparent 30%);
  animation: g4aDrift 38s ease-in-out infinite alternate;
  will-change: transform;
}
/* Faint grid with a few rising sparks */
html body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 200vh;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 70, 80, 0.55) 0 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 0.8px, transparent 1.2px),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 420px 520px, 260px 340px, 64px 64px, 64px 64px;
  background-position: 40px 60px, 150px 210px, 0 0, 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.25) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.25) 100%);
  animation: g4aRise 60s linear infinite;
  will-change: transform;
}
@keyframes g4aDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(-5%, 5%, 0) scale(1.02); }
}
@keyframes g4aRise { to { transform: translate3d(0, -100vh, 0); } }

@media (prefers-reduced-motion: reduce) {
  html body::before, html body::after, html body .g4a-loader__ring, html body .g4a-loader__logo { animation: none; }
}

/* ---------- GAME PAGES (cs16, cs2, csgo, fivem, hy, minecraft, pz, rust) ----------
   Same structure on every page; it used a blue-grey palette and grey rules between sections. */
html body .cs16-hero,
html body .cs2-hero,
html body .csgo-hero,
html body .fivem-hero,
html body .hy-hero,
html body .minecraft-hero,
html body .pz-hero,
html body .rust-hero {
  background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(232, 25, 42, 0.20), transparent 70%) !important;
  padding: 88px 20px 64px !important;
}
html body .cs16-hero__title,
html body .cs2-hero__title,
html body .csgo-hero__title,
html body .fivem-hero__title,
html body .hy-hero__title,
html body .minecraft-hero__title,
html body .pz-hero__title,
html body .rust-hero__title { font-size: clamp(34px, 4.6vw, 58px) !important; letter-spacing: -0.025em; }
html body .cs16-hero__badge,
html body .cs2-hero__badge,
html body .csgo-hero__badge,
html body .fivem-hero__badge,
html body .hy-hero__badge,
html body .minecraft-hero__badge,
html body .pz-hero__badge,
html body .rust-hero__badge { border-radius: 4px; }
html body .cs16-hero__sub,
html body .cs2-hero__sub,
html body .csgo-hero__sub,
html body .fivem-hero__sub,
html body .hy-hero__sub,
html body .minecraft-hero__sub,
html body .pz-hero__sub,
html body .rust-hero__sub,
html body .cs16-stat__label,
html body .cs2-stat__label,
html body .csgo-stat__label,
html body .fivem-stat__label,
html body .hy-stat__label,
html body .minecraft-stat__label,
html body .pz-stat__label,
html body .rust-stat__label,
html body .cs16-feat__desc,
html body .cs2-feat__desc,
html body .csgo-feat__desc,
html body .fivem-feat__desc,
html body .hy-feat__desc,
html body .minecraft-feat__desc,
html body .pz-feat__desc,
html body .rust-feat__desc,
html body .cs16-card__tagline,
html body .cs2-card__tagline,
html body .csgo-card__tagline,
html body .fivem-card__tagline,
html body .hy-card__tagline,
html body .minecraft-card__tagline,
html body .pz-card__tagline,
html body .rust-card__tagline,
html body .cs16-cta__sub,
html body .cs2-cta__sub,
html body .csgo-cta__sub,
html body .fivem-cta__sub,
html body .hy-cta__sub,
html body .minecraft-cta__sub,
html body .pz-cta__sub,
html body .rust-cta__sub { color: #9ca3af !important; }
html body .cs16-hero__stats,
html body .cs2-hero__stats,
html body .csgo-hero__stats,
html body .fivem-hero__stats,
html body .hy-hero__stats,
html body .minecraft-hero__stats,
html body .pz-hero__stats,
html body .rust-hero__stats { gap: 14px !important; }
html body .cs16-stat,
html body .cs2-stat,
html body .csgo-stat,
html body .fivem-stat,
html body .hy-stat,
html body .minecraft-stat,
html body .pz-stat,
html body .rust-stat {
  background: rgba(20, 20, 22, 0.85);
  border: 1px solid #242428;
  border-radius: 14px;
  padding: 14px 22px;
}
html body .cs16-divider,
html body .cs2-divider,
html body .csgo-divider,
html body .fivem-divider,
html body .hy-divider,
html body .minecraft-divider,
html body .pz-divider,
html body .rust-divider { display: none !important; }
html body .cs16-features,
html body .cs2-features,
html body .csgo-features,
html body .fivem-features,
html body .hy-features,
html body .minecraft-features,
html body .pz-features,
html body .rust-features { background: rgba(17, 17, 19, 0.55) !important; }
html body .cs16-feat,
html body .cs2-feat,
html body .csgo-feat,
html body .fivem-feat,
html body .hy-feat,
html body .minecraft-feat,
html body .pz-feat,
html body .rust-feat {
  background: #141416;
  border: 1px solid #242428;
  border-radius: 16px;
  padding: 26px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
html body .cs16-feat:hover,
html body .cs2-feat:hover,
html body .csgo-feat:hover,
html body .fivem-feat:hover,
html body .hy-feat:hover,
html body .minecraft-feat:hover,
html body .pz-feat:hover,
html body .rust-feat:hover { transform: translateY(-4px); border-color: rgba(232, 25, 42, 0.55); }
html body .cs16-plans,
html body .cs2-plans,
html body .csgo-plans,
html body .fivem-plans,
html body .hy-plans,
html body .minecraft-plans,
html body .pz-plans,
html body .rust-plans { background: transparent !important; }
html body .cs16-card,
html body .cs2-card,
html body .csgo-card,
html body .fivem-card,
html body .hy-card,
html body .minecraft-card,
html body .pz-card,
html body .rust-card {
  background: #141416 !important;
  border: 1px solid #242428 !important;
  border-radius: 16px !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html body .cs16-card:hover,
html body .cs2-card:hover,
html body .csgo-card:hover,
html body .fivem-card:hover,
html body .hy-card:hover,
html body .minecraft-card:hover,
html body .pz-card:hover,
html body .rust-card:hover { transform: translateY(-6px); border-color: rgba(232, 25, 42, 0.6) !important; box-shadow: 0 22px 50px rgba(232, 25, 42, 0.14); }
html body .cs16-card--popular,
html body .cs2-card--popular,
html body .csgo-card--popular,
html body .fivem-card--popular,
html body .hy-card--popular,
html body .minecraft-card--popular,
html body .pz-card--popular,
html body .rust-card--popular {
  border-color: rgba(232, 25, 42, 0.7) !important;
  background: linear-gradient(180deg, rgba(232, 25, 42, 0.12) 0%, #141416 45%) !important;
  box-shadow: 0 0 0 1px rgba(232, 25, 42, 0.25);
}
html body .cs16-card__popular-tag,
html body .cs2-card__popular-tag,
html body .csgo-card__popular-tag,
html body .fivem-card__popular-tag,
html body .hy-card__popular-tag,
html body .minecraft-card__popular-tag,
html body .pz-card__popular-tag,
html body .rust-card__popular-tag { border-radius: 999px !important; }
html body .cs16-card__sep,
html body .cs2-card__sep,
html body .csgo-card__sep,
html body .fivem-card__sep,
html body .hy-card__sep,
html body .minecraft-card__sep,
html body .pz-card__sep,
html body .rust-card__sep { background: #242428 !important; }
html body .cs16-card__price span,
html body .cs2-card__price span,
html body .csgo-card__price span,
html body .fivem-card__price span,
html body .hy-card__price span,
html body .minecraft-card__price span,
html body .pz-card__price span,
html body .rust-card__price span { color: #9ca3af !important; }
html body .cs16-card__features .ico-check,
html body .cs2-card__features .ico-check,
html body .csgo-card__features .ico-check,
html body .fivem-card__features .ico-check,
html body .hy-card__features .ico-check,
html body .minecraft-card__features .ico-check,
html body .pz-card__features .ico-check,
html body .rust-card__features .ico-check { display: none !important; }
html body .cs16-card__features li,
html body .cs2-card__features li,
html body .csgo-card__features li,
html body .fivem-card__features li,
html body .hy-card__features li,
html body .minecraft-card__features li,
html body .pz-card__features li,
html body .rust-card__features li { position: relative; padding-left: 26px !important; border-bottom: 1px solid #1f1f23; }
html body .cs16-card__features li:last-child,
html body .cs2-card__features li:last-child,
html body .csgo-card__features li:last-child,
html body .fivem-card__features li:last-child,
html body .hy-card__features li:last-child,
html body .minecraft-card__features li:last-child,
html body .pz-card__features li:last-child,
html body .rust-card__features li:last-child { border-bottom: 0; }
html body .cs16-card__features li::before,
html body .cs2-card__features li::before,
html body .csgo-card__features li::before,
html body .fivem-card__features li::before,
html body .hy-card__features li::before,
html body .minecraft-card__features li::before,
html body .pz-card__features li::before,
html body .rust-card__features li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border: solid #e8192a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
html body .cs16-btn,
html body .cs2-btn,
html body .csgo-btn,
html body .fivem-btn,
html body .hy-btn,
html body .minecraft-btn,
html body .pz-btn,
html body .rust-btn { border-radius: 8px !important; box-shadow: 0 10px 26px rgba(232, 25, 42, 0.25); }
html body .cs16-btn--outline,
html body .cs2-btn--outline,
html body .csgo-btn--outline,
html body .fivem-btn--outline,
html body .hy-btn--outline,
html body .minecraft-btn--outline,
html body .pz-btn--outline,
html body .rust-btn--outline { box-shadow: none; border-color: #3a3a40 !important; }
html body .cs16-cta,
html body .cs2-cta,
html body .csgo-cta,
html body .fivem-cta,
html body .hy-cta,
html body .minecraft-cta,
html body .pz-cta,
html body .rust-cta {
  max-width: 1080px;
  margin: 16px auto 96px !important;
  border: 1px solid #2a2a2f;
  border-radius: 22px;
  background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(232, 25, 42, 0.22), transparent 70%), #121215 !important;
}
@media (max-width: 767px) {
  html body .cs16-cta,
  html body .cs2-cta,
  html body .csgo-cta,
  html body .fivem-cta,
  html body .hy-cta,
  html body .minecraft-cta,
  html body .pz-cta,
  html body .rust-cta { margin: 8px 16px 64px !important; width: auto !important; }
}
html body .cs16-card__features li,
html body .cs2-card__features li,
html body .csgo-card__features li,
html body .fivem-card__features li,
html body .hy-card__features li,
html body .minecraft-card__features li,
html body .pz-card__features li,
html body .rust-card__features li { margin-bottom: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; }

/* ---------- THEME "PINK" SCHEME -> BRAND RED (buttons, side menu toggle) ---------- */
html body .btn-default-pink-fill,
html body .btn-default-pink-fill:focus { background: #e8192a !important; border-color: #e8192a !important; color: #fff !important; }
html body .btn-default-pink-fill:hover { background: #ff2d3f !important; border-color: #ff2d3f !important; }
html body .dropside-content,
html body #dropside-content { background: #e8192a !important; box-shadow: 0 8px 24px rgba(232, 25, 42, 0.35) !important; }

/* ---------- MANAGE PRODUCT (clientarea.php?action=productdetails) ---------- */
html body .g4a-prod-wrap { background: transparent !important; padding-top: 24px !important; }

/* Product card: brand icon, readable status instead of an unlabeled green bar. */
html body .product-overbox {
  background: radial-gradient(ellipse 70% 70% at 50% 25%, rgba(232, 25, 42, 0.16), transparent 70%), #141416 !important;
  border: 1px solid #242428 !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  padding: 32px 24px 26px !important;
}
html body .product-overbox .prod-info-abso { position: static !important; transform: none !important; text-align: center; }
html body .product-overbox i {
  background: rgba(232, 25, 42, 0.14) !important;
  color: #e8192a !important;
  border-radius: 16px !important;
  width: 64px !important; height: 64px !important; line-height: 64px !important; font-size: 26px !important;
}
html body .product-overbox h3 {
  position: static !important;
  display: inline-block;
  margin: 18px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-transform: none;
}
html body .product-overbox h4 { color: #9ca3af !important; font-size: 14px !important; }
html body .product-status-text {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin: 18px auto 0 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  background: rgba(63, 185, 80, 0.12) !important;
  border: 1px solid rgba(63, 185, 80, 0.4) !important;
  color: #3fb950 !important;
  font-weight: 700;
  font-size: 13px;
}
html body .product-status-text::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html body .product-overbox.suspended .product-status-text,
html body .product-overbox.terminated .product-status-text,
html body .product-overbox.cancelled .product-status-text { background: rgba(232, 25, 42, 0.12) !important; border-color: rgba(232, 25, 42, 0.45) !important; color: #ff6b76 !important; }
html body .product-overbox.pending .product-status-text { background: rgba(210, 153, 34, 0.12) !important; border-color: rgba(210, 153, 34, 0.45) !important; color: #d29922 !important; }

/* Billing details: plain values instead of a green badge on every line. */
html body .overview-box.products-details {
  background: #141416 !important;
  border: 1px solid #242428 !important;
  border-radius: 18px !important;
}
html body .overview-box.products-details strong {
  background: none !important;
  color: #f3f4f6 !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 14px;
}

/* Module area */
html body .product-details-tab-container {
  background: #141416 !important;
  border: 1px solid #242428 !important;
  border-radius: 18px !important;
}
html body .nav-tabs-overflow { border-bottom-color: #242428 !important; }
html body .g4a-ps-state { font-size: 13px !important; }
html body .g4a-ps-btn { border-radius: 10px !important; font-size: 14px !important; padding: 12px 16px !important; }
html body .g4a-ps-links .g4a-ps-btn:first-child,
html body .g4a-ps-btn[style*="ff0000"] { background: #e8192a !important; border-color: #e8192a !important; }

/* Getting-started guide */
html body .g4a-guide {
  text-align: left;
  margin: 0 0 28px;
  padding: 26px 26px 10px;
  border-radius: 18px;
  border: 1px solid rgba(232, 25, 42, 0.35);
  background: radial-gradient(ellipse 60% 120% at 0% 0%, rgba(232, 25, 42, 0.14), transparent 70%), #141416;
}
html body .g4a-guide h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
html body .g4a-guide > p { margin: 0 0 18px; color: #9ca3af; font-size: 14px; }
html body .g4a-guide ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; counter-reset: g4astep; }
html body .g4a-guide li {
  counter-increment: g4astep;
  position: relative;
  padding: 16px 16px 16px 58px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: #18181b;
  border: 1px solid #26262b;
  color: #c4c8cf;
  font-size: 13.5px;
  line-height: 1.55;
}
html body .g4a-guide li::before {
  content: counter(g4astep);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e8192a;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
html body .g4a-guide li b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 2px; }
html body .g4a-guide code { background: #0d0d0f; border: 1px solid #2a2a2f; border-radius: 6px; padding: 1px 6px; color: #ff8a93; font-size: 12.5px; }
html body .g4a-guide__help { margin: 12px 0 14px; font-size: 13px; color: #9ca3af; }
html body .g4a-guide__help a { color: #ff6b76; font-weight: 700; }

/* Client area page title: #main-body had a fixed 350px min-height around a one-line heading. */
html body section#main-body { min-height: 0 !important; }
html body section#main-body .section-heading {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 36px 0 8px !important;
}
html body .product-status-text { position: static !important; }
html body .product-overbox h4 { margin: 2px 0 0 !important; }

/* Guide: normal text weight (it inherited bold) and the five steps on one row on wide screens. */
html body .g4a-guide li,
html body .g4a-guide > p,
html body .g4a-guide__help { font-weight: 400 !important; }
html body .g4a-guide li b { font-weight: 700 !important; }
@media (min-width: 1200px) { html body .g4a-guide ol { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
html body .overview-box.products-details { min-height: 0 !important; height: auto !important; }

/* Product tabs: the theme's "tabdrop" plugin folded every tab (even a single "Manage") into a dropdown
   whose icon font is missing, so only a caret was visible. Show the folded tabs as a normal tab bar. */
html body .nav-tabs-overflow { display: flex !important; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #242428 !important; margin-bottom: 0 !important; }
html body .nav-tabs-overflow .tabdrop { float: none !important; display: block !important; order: 99; }
html body .nav-tabs-overflow .tabdrop > .dropdown-toggle { display: none !important; }
html body .nav-tabs-overflow .tabdrop > .dropdown-menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  position: static !important;
  float: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .nav-tabs-overflow > li > a,
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 18px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  color: #9ca3af !important;
  font-weight: 700;
  font-size: 14px;
}
html body .nav-tabs-overflow > li > a:hover,
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li > a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.03) !important; }
html body .nav-tabs-overflow > li.active > a,
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li.active > a {
  color: #fff !important;
  border-bottom-color: #e8192a !important;
  background: rgba(232, 25, 42, 0.08) !important;
}
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li > a i,
html body .nav-tabs-overflow > li > a i { color: #e8192a; }
html body .product-details-tab-container { border-top-left-radius: 0 !important; }
/* The theme hides dropdown items (visibility) until the menu opens; the folded tabs must stay visible. */
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li,
html body .nav-tabs-overflow .tabdrop .dropdown-menu > li > a { visibility: visible !important; opacity: 1 !important; transform: none !important; }

/* 3-dot page menu (Overview / Information / Actions): it opened under the product panels below the title.
   Lift the title area above them and give the menu the site's look. */
html body .wrapper.sec-normal { position: relative; z-index: 40; }
html body .dropnav-header-lined { z-index: 41; }
html body .dropnav-header-lined .dropdown-menu {
  background: #141416 !important;
  border: 1px solid #2a2a2f !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  padding: 8px !important;
  min-width: 240px;
}
html body .dropnav-header-lined .dropdown-menu a,
html body .dropnav-header-lined .dropdown-menu .list-group-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #d1d5db !important;
  padding: 10px 14px !important;
}
html body .dropnav-header-lined .dropdown-menu a:hover,
html body .dropnav-header-lined .dropdown-menu .active { background: rgba(232, 25, 42, 0.12) !important; color: #fff !important; }
html body .nav-tabs-overflow .tabdrop > .dropdown-menu { visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

/* ---------- CART (standard_cart order form) ---------- */
html body #order-standard_cart { background: transparent !important; }
/* The left "Actions" column only held hidden categories: give the cart the full width. */
html body #order-standard_cart .cart-sidebar { display: none !important; }
html body #order-standard_cart .cart-body { width: 100% !important; float: none !important; max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
html body #order-standard_cart .header-lined h1 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; }

/* Panels */
html body #order-standard_cart .view-cart-items,
html body #order-standard_cart .view-cart-tabs,
html body #order-standard_cart .view-cart-tabs .tab-content,
html body #order-standard_cart .order-summary,
html body #order-standard_cart .summary-container {
  background: #141416 !important;
  border-color: #242428 !important;
}
html body #order-standard_cart .view-cart-items,
html body #order-standard_cart .view-cart-tabs,
html body #order-standard_cart .order-summary { border: 1px solid #242428 !important; border-radius: 16px !important; overflow: hidden; }
html body #order-standard_cart .view-cart-items-header { background: #18181b !important; color: #9ca3af !important; border-bottom: 1px solid #242428 !important; }
html body #order-standard_cart .view-cart-items .item { border-bottom: 1px solid #1f1f23 !important; background: transparent !important; }
html body #order-standard_cart .item-title { color: #fff !important; font-weight: 800; }
html body #order-standard_cart .item-group { color: #9ca3af !important; text-transform: capitalize; }
html body #order-standard_cart .item-price span:first-child { color: #fff; font-weight: 800; }

/* Promo code: plain field + secondary button (it was a full-width pure-red pill). */
html body #order-standard_cart .prepend-icon .field-icon { display: none !important; }
html body #order-standard_cart #inputPromotionCode,
html body #order-standard_cart .prepend-icon .field.field {
  background: #0f0f11 !important;
  border: 1px solid #2a2a2f !important;
  border-radius: 10px !important;
  padding-left: 14px !important;
  color: #fff !important;
}
html body #order-standard_cart .view-cart-tabs .btn-block,
html body #order-standard_cart #applyPromo button[type=submit] {
  background: transparent !important;
  border: 1px solid #3a3a40 !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body #order-standard_cart .view-cart-tabs .btn-block:hover { border-color: #e8192a !important; color: #fff !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a { color: #fff !important; border-bottom-color: #e8192a !important; }

/* Summary: brand-red checkout (it was green) */
html body #order-standard_cart .order-summary h2 { color: #fff !important; font-weight: 800; }
html body #order-standard_cart .total-due-today { background: #0f0f11 !important; border: 1px solid #2a2a2f !important; border-radius: 12px !important; }
html body #order-standard_cart .total-due-today .amt { color: #fff !important; font-weight: 800; }
html body #order-standard_cart .btn-checkout,
html body #order-standard_cart #checkout,
html body #order-standard_cart #btnCompleteOrder {
  background: #e8192a !important;
  border-color: #e8192a !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(232, 25, 42, 0.3) !important;
  font-weight: 800 !important;
}
html body #order-standard_cart .btn-checkout:hover,
html body #order-standard_cart #btnCompleteOrder:hover { background: #ff2d3f !important; border-color: #ff2d3f !important; }
html body #order-standard_cart .btn-continue-shopping { border-radius: 10px !important; }
html body #order-standard_cart .empty-cart .btn,
html body #order-standard_cart .btn-link.btn-xs { color: #ff6b76 !important; }

/* ---------- CLIENT AREA LISTS (services, invoices, quotes) ---------- */
html body .dataTables_wrapper .paginate_button.current,
html body .dataTables_wrapper .paginate_button.current:hover,
html body .pagination > .active > a,
html body .pagination > .active > span { background: #e8192a !important; border-color: #e8192a !important; color: #fff !important; }
html body [class*="-filter-btn"].active,
html body [class*="-filter-btn"].active-all,
html body [class*="-filter-btn"].active-all:hover { background: rgba(232, 25, 42, 0.12) !important; border-color: #e8192a !important; color: #fff !important; }
html body .dataTables_wrapper input[type=search],
html body .dataTables_wrapper select { background: #0f0f11 !important; border: 1px solid #2a2a2f !important; border-radius: 8px !important; color: #fff !important; }

/* ---------- VANTA NET BACKGROUND (desktop) ---------- */
html body #g4a-vanta { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
html.g4a-vanta-on body #g4a-vanta { opacity: 0.55; }
/* With Vanta running, the CSS grid/sparks layer would double the effect; keep only the soft red lights. */
html.g4a-vanta-on body::after { display: none; }
html.g4a-vanta-on body::before { opacity: 0.6; }

/* Vanta across the whole homepage: page sections let it through; cards, stats and CTA stay solid. */
html body .gfeatures-page,
html body .gplans-page { background: transparent !important; }
html body .gfooter { background: linear-gradient(180deg, rgba(11, 11, 13, 0.35) 0%, rgba(11, 11, 13, 0.85) 100%) !important; }
html.g4a-vanta-on body .g4a-slider { background: transparent !important; }
html.g4a-vanta-on body .g4a-sl-bg,
html.g4a-vanta-on body .g4a-sl-bg--dark { background: radial-gradient(ellipse 55% 70% at 78% 45%, rgba(232, 25, 42, 0.10), transparent 60%) !important; }
html.g4a-vanta-on body .g4a-sl-bg::before { display: none; }
/* keep the headline readable over the animation */
html.g4a-vanta-on body .g4a-sl-ov,
html.g4a-vanta-on body .g4a-sl-ov--full { background: linear-gradient(90deg, rgba(11, 11, 13, 0.85) 0%, rgba(11, 11, 13, 0.45) 45%, transparent 70%) !important; }

/* ---------- TOP BAR (language, notifications, cart, account, WhatsApp) ---------- */
html body .infonews { background: rgba(11, 11, 13, 0.92) !important; border-bottom: 1px solid #1f1f23; }
html body .infonews::after { display: none !important; }
html body .infonews .row { min-height: 44px; height: auto !important; align-items: center; }
html body .infonews .infonews-nav { display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; height: 44px; }
/* no vertical separators between items */
html body .infonews .infonews-nav > *,
html body .infonews .infonews-nav > *::before,
html body .infonews .infonews-nav > *::after { border: 0 !important; }
html body .infonews .infonews-nav > *::before,
html body .infonews .infonews-nav > *::after { display: none !important; }
html body .infonews .infonews-nav > div,
html body .infonews .infonews-nav > a { position: relative; margin: 0 !important; padding: 0 !important; height: auto !important; }

html body .g4a-top-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #26262b !important;
  background: #141416 !important;
  color: #d1d5db !important;
  font-size: 12.5px !important;
  font-weight: 600;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  position: relative;
}
html body .g4a-top-btn:hover { border-color: rgba(232, 25, 42, 0.6) !important; color: #fff !important; background: #18181b !important; }
html body .g4a-top-btn i { font-size: 13px; color: inherit; }
html body .g4a-top-btn--icon { width: 34px; padding: 0 !important; justify-content: center; }
html body .g4a-top-btn__caret { font-size: 9px !important; opacity: 0.7; }
html body .g4a-top-btn .lang-flag { width: 18px !important; height: 18px !important; border-radius: 50% !important; object-fit: cover; border: 0 !important; }
html body .g4a-top-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8192a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #0b0b0d;
}
html body .g4a-top-btn--wa { border-color: rgba(37, 211, 102, 0.45) !important; background: rgba(37, 211, 102, 0.10) !important; color: #4ade80 !important; }
html body .g4a-top-btn--wa:hover { background: rgba(37, 211, 102, 0.18) !important; border-color: #25d366 !important; color: #86efac !important; }
html body .g4a-top-btn--wa span { display: inline !important; }

/* Dropdown panels (language, notifications, account): one look */
html body .lang-menu,
html body .notif-menu,
html body .user-login .dropdown-menu {
  background: #141416 !important;
  border: 1px solid #2a2a2f !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}
html body .lang-header,
html body .notif-header { background: #0f0f11 !important; border-bottom: 1px solid #242428 !important; }
html body .lang-menu ul li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  border-radius: 10px;
  color: #d1d5db !important;
}
html body .lang-menu ul li a:hover { background: rgba(232, 25, 42, 0.10) !important; color: #fff !important; }
html body .lang-menu ul li a.active { color: #fff !important; font-weight: 700; }
html body .lang-menu ul li a .fa-check { margin-left: auto; color: #e8192a; font-size: 12px; }
html body .lang-menu ul li a .lang-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
html body .notif-count { background: #e8192a !important; color: #fff !important; border-radius: 999px !important; }
html body .notif-body ul li a i { color: #e8192a !important; }

/* Phones: icon-only buttons, labels hidden (WhatsApp keeps its icon) */
@media (max-width: 767px) {
  html body .g4a-top-btn__label,
  html body .g4a-top-btn--wa span { display: none !important; }
  html body .g4a-top-btn { padding: 0 9px !important; }
  html body .infonews .infonews-nav { gap: 6px; }
}
/* Top bar, round 2: the theme's ".infonews .iconews" rules out-ranked the buttons. */
html body .infonews .infonews-nav > div { padding: 0 !important; margin: 0 !important; width: auto !important; min-width: 0 !important; background: none !important; }
html body .infonews .infonews-nav a.g4a-top-btn.iconews {
  display: inline-flex !important;
  height: 32px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1px solid #26262b !important;
  border-radius: 8px !important;
  background: #141416 !important;
  color: #d1d5db !important;
}
html body .infonews .infonews-nav a.g4a-top-btn--icon.iconews { width: 34px !important; padding: 0 !important; justify-content: center; }
html body .infonews .infonews-nav a.g4a-top-btn.iconews:hover { border-color: rgba(232, 25, 42, 0.6) !important; background: #18181b !important; color: #fff !important; }
html body .infonews .infonews-nav a.g4a-top-btn--wa.iconews { border-color: rgba(37, 211, 102, 0.45) !important; background: rgba(37, 211, 102, 0.10) !important; color: #4ade80 !important; }
html body .infonews .infonews-nav a.g4a-top-btn--wa.iconews:hover { border-color: #25d366 !important; background: rgba(37, 211, 102, 0.18) !important; color: #86efac !important; }
html body .infonews .infonews-nav a.g4a-top-btn.iconews i { font-size: 13px !important; color: inherit !important; }

/* Language menu: a vertical list */
html body .lang-menu ul { display: block !important; padding: 6px !important; margin: 0 !important; }
html body .lang-menu ul li { display: block !important; float: none !important; width: auto !important; }

/* Phones: cart and account live in the top bar; the logo row keeps only the menu button. */
@media (max-width: 991px) {
  html body #menu-mobile .mob-row a[href*="cart.php"],
  html body #menu-mobile .mob-row a[href*="login.php"] { display: none !important; }
}
/* Phones: dropdowns from the top bar span the screen instead of overflowing it. */
@media (max-width: 767px) {
  html body .lang-menu,
  html body .notif-menu,
  html body .user-login .dropdown-menu {
    position: fixed !important;
    top: 52px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* ---------- CART v2 (cart.php?a=view): same card language as the game pages ---------- */
html body #order-standard_cart .cart-body { max-width: 1200px; padding: 8px 20px 80px; }
html body #order-standard_cart .sidebar-collapsed { display: none !important; }

/* Page header: red pill + big title, no double rules */
html body #order-standard_cart .header-lined { border: 0 !important; margin: 28px 0 30px !important; padding: 0 !important; text-align: center; }
html body #order-standard_cart .header-lined::after { display: none !important; }
html body #order-standard_cart .header-lined h1 {
  display: block; margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: clamp(32px, 4vw, 48px) !important; font-weight: 800 !important; letter-spacing: -0.02em; color: #fff !important;
}
html body #order-standard_cart .header-lined h1::after { content: ""; display: block; width: 64px; height: 3px; margin: 18px auto 0; border-radius: 3px; background: #e8192a; }

/* Two columns with a real gap */
html body #order-standard_cart .cart-body > .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin: 0 !important; }
html body #order-standard_cart .secondary-cart-body { flex: 1 1 560px; max-width: none !important; width: auto !important; padding: 0 !important; }
html body #order-standard_cart .secondary-cart-sidebar { flex: 0 0 360px; max-width: 100% !important; width: auto !important; padding: 0 !important; position: sticky; top: 96px; }

/* Items: header + list form ONE card */
html body #order-standard_cart .view-cart-items-header {
  margin: 0 !important; padding: 14px 22px !important; border: 1px solid #242428 !important; border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important; background: #18181b !important;
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #8b8b93 !important;
}
html body #order-standard_cart .view-cart-items { border-radius: 0 0 16px 16px !important; border-top: 1px solid #242428 !important; margin: 0 !important; }
html body #order-standard_cart .view-cart-items .item { padding: 20px 22px !important; transition: background .2s ease; }
html body #order-standard_cart .view-cart-items .item:hover { background: rgba(232, 25, 42, 0.04) !important; }
html body #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0 !important; }
html body #order-standard_cart .view-cart-items .item > .row { display: flex; align-items: center; }
html body #order-standard_cart .item-title { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px !important; }
html body #order-standard_cart .item-group { display: block; margin-top: 6px; font-size: 13px; }
html body #order-standard_cart .item-group::before { content: "\f11b"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif; font-weight: 900; color: #e8192a; margin-right: 7px; }
html body #order-standard_cart .item-price { text-align: right; }
html body #order-standard_cart .item-price span:first-child { display: block; font-size: 20px; }
html body #order-standard_cart .item-price .cycle { display: block; margin-top: 2px; color: #8b8b93 !important; font-size: 12.5px; }

/* Edit / remove as small chips */
html body #order-standard_cart .item-title .btn-link.btn-xs,
html body #order-standard_cart .btn-remove-from-cart {
  display: inline-flex !important; align-items: center; gap: 6px; height: 28px; padding: 0 11px !important;
  border: 1px solid #2a2a2f !important; border-radius: 7px !important; background: #0f0f11 !important;
  color: #c9c9cf !important; font-size: 12px !important; font-weight: 600; text-decoration: none !important; box-shadow: none !important;
}
html body #order-standard_cart .item-title .btn-link.btn-xs:hover,
html body #order-standard_cart .btn-remove-from-cart:hover { border-color: #e8192a !important; color: #fff !important; background: rgba(232, 25, 42, 0.1) !important; }
html body #order-standard_cart .item-title .btn-link.btn-xs i { color: #e8192a; font-size: 11px; }

/* Empty cart link + empty state */
html body #order-standard_cart .empty-cart { margin: 10px 0 24px !important; text-align: right; }
html body #order-standard_cart .empty-cart .btn { background: transparent !important; border: 0 !important; padding: 4px 2px !important; color: #8b8b93 !important; font-size: 13px !important; font-weight: 600; text-decoration: none !important; }
html body #order-standard_cart .empty-cart .btn:hover { color: #ff6b76 !important; }
html body #order-standard_cart .view-cart-empty { padding: 56px 20px !important; text-align: center; color: #8b8b93 !important; font-size: 15px; }

/* Promo card */
html body #order-standard_cart .view-cart-tabs { margin-top: 0 !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 1px solid #242428 !important; padding: 0 12px; background: #18181b; }
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a { border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; color: #8b8b93 !important; font-weight: 700; padding: 15px 12px !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a i { color: #e8192a; }
html body #order-standard_cart .view-cart-tabs .tab-content { padding: 20px 22px 22px !important; }
html body #order-standard_cart .view-cart-tabs .promo form { display: flex; gap: 10px; align-items: stretch; }
html body #order-standard_cart .view-cart-tabs .promo .form-group { flex: 1; margin: 0 !important; }
html body #order-standard_cart .view-cart-tabs .promo #inputPromotionCode { height: 46px !important; }
html body #order-standard_cart .view-cart-tabs .promo .btn-block { width: auto !important; flex: 0 0 auto; height: 46px; margin: 0 !important; padding: 0 22px !important; font-weight: 700; }

/* Summary card */
html body #order-standard_cart .order-summary { padding: 0 !important; }
html body #order-standard_cart .order-summary h2 {
  margin: 0 !important; padding: 18px 22px !important; border-bottom: 1px solid #242428; background: #18181b;
  font-size: 17px !important; text-align: left !important;
}
html body #order-standard_cart .order-summary h2::before { content: "\f543"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif; font-weight: 900; color: #e8192a; margin-right: 10px; }
html body #order-standard_cart .summary-container { padding: 18px 22px 22px !important; border: 0 !important; }
html body #order-standard_cart .summary-container .subtotal,
html body #order-standard_cart .summary-container .recurring-totals {
  display: flex !important; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin: 0 !important; padding: 11px 0 !important; border-bottom: 1px dashed #26262b !important; color: #9ca3af !important; font-size: 14px;
}
html body #order-standard_cart .summary-container .subtotal > span,
html body #order-standard_cart .summary-container .recurring-totals > span { float: none !important; }
html body #order-standard_cart .summary-container #subtotal { color: #fff !important; font-weight: 700; }
html body #order-standard_cart .summary-container .recurring-charges { text-align: right; color: #8b8b93; font-style: normal !important; }
html body #order-standard_cart .summary-container .recurring-charges .cost { color: #fff; font-weight: 700; font-style: normal !important; }
html body #order-standard_cart .total-due-today {
  margin: 18px 0 !important; padding: 18px !important; text-align: right;
  background: linear-gradient(135deg, rgba(232, 25, 42, 0.14), rgba(232, 25, 42, 0.03)) !important; border: 1px solid rgba(232, 25, 42, 0.35) !important;
}
html body #order-standard_cart .total-due-today .amt { display: block; font-size: 34px !important; line-height: 1.1; letter-spacing: -0.02em; }
html body #order-standard_cart .total-due-today span:last-child { color: #c9c9cf !important; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html body #order-standard_cart .order-summary .text-right { display: flex; flex-direction: column; gap: 10px; }
html body #order-standard_cart .btn-checkout { width: 100%; height: 52px; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; font-size: 16px !important; margin: 0 !important; }
html body #order-standard_cart .btn-checkout.disabled { opacity: .45; box-shadow: none !important; }
html body #order-standard_cart .btn-continue-shopping {
  width: 100%; height: 46px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important;
  border: 1px solid #2a2a2f !important; background: transparent !important; color: #c9c9cf !important; font-weight: 700; text-decoration: none !important;
}
html body #order-standard_cart .btn-continue-shopping:hover { border-color: #e8192a !important; color: #fff !important; }

@media (max-width: 991px) {
  html body #order-standard_cart .secondary-cart-sidebar { flex: 1 1 100%; position: static; }
  html body #order-standard_cart .view-cart-tabs .promo form { flex-direction: column; }
  html body #order-standard_cart .view-cart-tabs .promo .btn-block { width: 100% !important; }
}

/* fixes over the inline <style> in viewcart.tpl */
html body #order-standard_cart .summary-container .subtotal::before,
html body #order-standard_cart .summary-container .subtotal::after,
html body #order-standard_cart .summary-container .recurring-totals::before,
html body #order-standard_cart .summary-container .recurring-totals::after { display: none !important; content: none !important; }
html body #order-standard_cart .summary-container .subtotal > span:first-child,
html body #order-standard_cart .summary-container .recurring-totals > span:first-child { color: #9ca3af !important; }
html body #order-standard_cart .summary-container #subtotal { color: #fff !important; }
html body #order-standard_cart div.total-due-today.total-due-today-padded {
  background-color: #120b0d !important;
  background-image: linear-gradient(135deg, rgba(232, 25, 42, 0.16), rgba(232, 25, 42, 0.02)) !important;
  border: 1px solid rgba(232, 25, 42, 0.35) !important; border-radius: 12px !important; text-align: right !important; padding: 18px 20px !important;
}
html body #order-standard_cart .order-summary h2::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900; }
html body #order-standard_cart #btnEmptyCart { background: transparent !important; box-shadow: none !important; border: 0 !important; color: #8b8b93 !important; font-size: 13px !important; }
html body #order-standard_cart #btnEmptyCart:hover { color: #ff6b76 !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs { background: #18181b !important; }
html body #order-standard_cart .view-cart-tabs .tab-content { background: #141416 !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a:hover { color: #fff !important; border-bottom-color: #e8192a !important; }
@media (max-width: 991px) {
  html body #order-standard_cart .secondary-cart-body,
  html body #order-standard_cart .secondary-cart-sidebar { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  html body #order-standard_cart .cart-body { padding: 8px 14px 60px; }
}

/* ---------- CHECKOUT v2 (cart.php?a=checkout): one theme card, red section markers ---------- */
html body #order-standard_cart #frmCheckout {
  background: #141416 !important; border: 1px solid #242428 !important; border-radius: 16px !important;
  padding: 8px 30px 30px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* "Already registered?" bar */
html body #order-standard_cart .already-registered {
  display: flex !important; align-items: center; justify-content: space-between; gap: 18px; flex-direction: row-reverse;
  margin: 0 0 22px !important; padding: 16px 22px !important; border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(232, 25, 42, 0.12), rgba(232, 25, 42, 0.02)) #141416 !important;
  border: 1px solid rgba(232, 25, 42, 0.35) !important;
}
html body #order-standard_cart .already-registered::before,
html body #order-standard_cart .already-registered::after { display: none !important; }
html body #order-standard_cart .already-registered > .float-right { float: none !important; flex: 0 0 auto; }
html body #order-standard_cart .already-registered p { margin: 0 !important; color: #c9c9cf !important; font-size: 14px; text-align: left !important; }
html body #order-standard_cart #btnAlreadyRegistered,
html body #order-standard_cart #btnNewUserSignup {
  background: #e8192a !important; border: 1px solid #e8192a !important; color: #fff !important; border-radius: 10px !important;
  padding: 10px 20px !important; font-weight: 700 !important; box-shadow: 0 10px 24px rgba(232, 25, 42, 0.25) !important;
}
html body #order-standard_cart #btnAlreadyRegistered:hover,
html body #order-standard_cart #btnNewUserSignup:hover { background: #ff2d3f !important; border-color: #ff2d3f !important; }

/* Section titles */
html body #order-standard_cart .sub-heading,
html body #order-standard_cart .sub-heading-borderless {
  position: relative; margin: 28px 0 18px !important; padding: 0 0 12px !important; height: auto !important;
  border: 0 !important; border-bottom: 1px solid #242428 !important; text-align: left !important;
}
html body #order-standard_cart .sub-heading::before,
html body #order-standard_cart .sub-heading::after,
html body #order-standard_cart .sub-heading-borderless::before,
html body #order-standard_cart .sub-heading-borderless::after { display: none !important; }
html body #order-standard_cart .sub-heading span.primary-bg-color,
html body #order-standard_cart .sub-heading-borderless span.primary-bg-color {
  display: inline-flex !important; align-items: center; gap: 12px; position: static !important;
  padding: 0 !important; background: transparent !important; color: #fff !important;
  font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.01em; text-transform: none !important;
}
html body #order-standard_cart .sub-heading span.primary-bg-color::before,
html body #order-standard_cart .sub-heading-borderless span.primary-bg-color::before {
  content: ""; width: 4px; height: 20px; border-radius: 3px; background: #e8192a; box-shadow: 0 0 12px rgba(232, 25, 42, 0.6);
}
html body #order-standard_cart .sub-heading-borderless { border-bottom: 0 !important; }

/* Fields */
html body #order-standard_cart #frmCheckout .form-control,
html body #order-standard_cart #frmCheckout .field,
html body #order-standard_cart #frmCheckout textarea,
html body #order-standard_cart #frmCheckout select {
  background-color: #0f0f11 !important; border: 1px solid #2a2a2f !important; border-radius: 10px !important; color: #fff !important; box-shadow: none !important;
}
html body #order-standard_cart #frmCheckout .form-control:focus,
html body #order-standard_cart #frmCheckout textarea:focus {
  border-color: #e8192a !important; box-shadow: 0 0 0 3px rgba(232, 25, 42, 0.18) !important;
}
html body #order-standard_cart #frmCheckout .form-control::placeholder,
html body #order-standard_cart #frmCheckout textarea::placeholder { color: #71717a !important; }
html body #order-standard_cart #frmCheckout .prepend-icon .field-icon i { color: #e8192a !important; }
html body #order-standard_cart #frmCheckout .intl-tel-input .flag-container .selected-flag,
html body #order-standard_cart #frmCheckout .iti__selected-flag {
  background: #18181b !important; border-right: 1px solid #2a2a2f !important; border-radius: 10px 0 0 10px !important; color: #9ca3af !important;
}

/* Small buttons (generate password, CVV help) */
html body #order-standard_cart #frmCheckout .btn-default,
html body #order-standard_cart #frmCheckout .generate-password {
  background: #18181b !important; border: 1px solid #2a2a2f !important; color: #d1d5db !important; border-radius: 10px !important; box-shadow: none !important;
}
html body #order-standard_cart #frmCheckout .btn-default:hover,
html body #order-standard_cart #frmCheckout .generate-password:hover { border-color: #e8192a !important; color: #fff !important; }
html body #order-standard_cart #frmCheckout .input-group-btn .btn,
html body #order-standard_cart #frmCheckout .input-group-append .btn { height: 100%; border-radius: 0 10px 10px 0 !important; }

/* Password strength bar */
html body #order-standard_cart .password-strength-meter .progress { background: #0f0f11 !important; border: 1px solid #242428; border-radius: 99px !important; height: 8px; }
html body #order-standard_cart #passwordStrengthMeterBar { background: linear-gradient(90deg, #c41422, #e8192a) !important; border-radius: 99px; }

/* Total due today */
html body #order-standard_cart #totalDueToday.alert {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, rgba(232, 25, 42, 0.16), rgba(232, 25, 42, 0.03)) #120b0d !important;
  border: 1px solid rgba(232, 25, 42, 0.4) !important; border-radius: 14px !important; color: #c9c9cf !important; padding: 20px !important;
}
html body #order-standard_cart #totalDueToday strong,
html body #order-standard_cart #totalDueToday #totalCartPrice { color: #fff !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.02em; }

/* Payment methods as selectable tiles */
html body #order-standard_cart #paymentGatewaysContainer {
  background: #0f0f11 !important; border: 1px solid #242428 !important; border-radius: 14px !important; padding: 18px !important;
}
html body #order-standard_cart #paymentGatewaysContainer > p { color: #9ca3af !important; margin-bottom: 12px !important; text-align: center; }
html body #order-standard_cart #paymentGatewaysContainer .text-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html body #order-standard_cart #paymentGatewaysContainer label.radio-inline {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 20px !important;
  min-width: 150px; justify-content: center; cursor: pointer;
  background: #141416 !important; border: 1px solid #2a2a2f !important; border-radius: 12px !important;
  color: #fff !important; font-weight: 700; transition: border-color .2s ease, background .2s ease;
}
html body #order-standard_cart #paymentGatewaysContainer label.radio-inline:hover { border-color: rgba(232, 25, 42, 0.6) !important; }
html body #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked) {
  border-color: #e8192a !important; background: rgba(232, 25, 42, 0.1) !important; box-shadow: 0 0 0 1px rgba(232, 25, 42, 0.35);
}
html body #order-standard_cart #frmCheckout input[type=radio] { accent-color: #e8192a; position: static !important; margin: 0 !important; }
html body #order-standard_cart #frmCheckout .iradio_square-blue,
html body #order-standard_cart #frmCheckout .iradio_square-blue.checked { filter: hue-rotate(150deg) saturate(1.4); }

/* Card fields block */
html body #order-standard_cart #creditCardInputFields,
html body #order-standard_cart .cc-input-container {
  background: #0f0f11 !important; border: 1px solid #242428 !important; border-radius: 14px !important; padding: 22px !important; margin-top: 16px;
}
html body #order-standard_cart #creditCardInputFields .form-control { background-color: #141416 !important; }

/* Toggles (save card, marketing) in theme red */
html body #order-standard_cart .bootstrap-switch { border-color: #2a2a2f !important; border-radius: 99px !important; background: #0f0f11 !important; }
html body #order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
html body #order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on { background: #e8192a !important; color: #fff !important; }
html body #order-standard_cart .bootstrap-switch .bootstrap-switch-handle-off { background: #18181b !important; color: #9ca3af !important; }
html body #order-standard_cart .bootstrap-switch .bootstrap-switch-label { background: #d1d5db !important; }

/* Marketing opt-in */
html body #order-standard_cart .marketing-email-optin {
  background: #0f0f11 !important; border: 1px solid #242428 !important; border-radius: 14px !important; padding: 20px 22px !important; margin-top: 24px;
}
html body #order-standard_cart .marketing-email-optin h4 { color: #fff !important; font-weight: 800; font-size: 18px; text-transform: none !important; }
html body #order-standard_cart .marketing-email-optin p { color: #9ca3af !important; }

/* Complete order */
html body #order-standard_cart #btnCompleteOrder {
  min-width: 300px; height: 56px; padding: 0 34px !important; margin-top: 26px; font-size: 17px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
}
html body #order-standard_cart .checkout-security-msg {
  background: transparent !important; border: 0 !important; color: #71717a !important; font-size: 13px; text-align: center; margin-top: 14px;
}
html body #order-standard_cart .checkout-security-msg i { color: #e8192a; }

/* Recaptcha centred */
html body #order-standard_cart .recaptcha-container { display: flex; justify-content: center; }

@media (max-width: 767px) {
  html body #order-standard_cart #frmCheckout { padding: 4px 16px 22px !important; }
  html body #order-standard_cart .already-registered { flex-direction: column; text-align: center; }
  html body #order-standard_cart #btnCompleteOrder { min-width: 0; width: 100%; }
}
/* CVV field + help button as one control */
html body #order-standard_cart #frmCheckout .input-group { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; }
html body #order-standard_cart #frmCheckout .input-group > .form-control { flex: 1 1 auto; width: 1% !important; border-radius: 10px 0 0 10px !important; }
html body #order-standard_cart #frmCheckout .input-group-btn,
html body #order-standard_cart #frmCheckout .input-group-append { position: static !important; display: flex !important; width: auto !important; margin: 0 !important; }
html body #order-standard_cart #frmCheckout .input-group-btn .btn,
html body #order-standard_cart #frmCheckout .input-group-append .btn {
  position: static !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important;
  border-left: 0 !important; border-radius: 0 10px 10px 0 !important; transform: none !important;
}

/* empty cart: style the template's own icon (no extra pseudo icon) */
html body #order-standard_cart .view-cart-empty > i {
  display: block !important; width: 64px; height: 64px; line-height: 64px; margin: 0 auto 14px !important;
  border-radius: 16px; background: rgba(232, 25, 42, 0.1); color: #e8192a !important; font-size: 24px !important;
}
html body #order-standard_cart .view-cart-tabs { margin-top: 24px !important; }
html body #order-standard_cart .empty-cart { margin: 10px 0 0 !important; }

/* ---------- HOMEPAGE: custom game not listed CTA ---------- */
html body .g4a-custom-cta {
  position: relative; display: flex; align-items: center; gap: 26px; margin: 46px auto 0; max-width: 1100px;
  padding: 28px 32px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(232, 25, 42, 0.16), rgba(232, 25, 42, 0.03) 55%), #141416;
  border: 1px solid rgba(232, 25, 42, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
html body .g4a-custom-cta__icon {
  flex: 0 0 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: #e8192a; color: #fff; font-size: 26px; box-shadow: 0 12px 30px rgba(232, 25, 42, 0.35);
}
html body .g4a-custom-cta__body { flex: 1 1 auto; text-align: left; }
html body .g4a-custom-cta__badge { display: inline-block; margin-bottom: 8px; color: #ff6b76; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
html body .g4a-custom-cta__title { margin: 0 0 8px !important; color: #fff !important; font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 800 !important; letter-spacing: -0.01em; }
html body .g4a-custom-cta__title span { color: #e8192a; }
html body .g4a-custom-cta__text { margin: 0 !important; color: #b4b4bb !important; font-size: 15px; line-height: 1.6; max-width: 620px; }
html body .g4a-custom-cta__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
html body .g4a-custom-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 10px;
  background: #e8192a; border: 1px solid #e8192a; color: #fff !important; font-weight: 800; font-size: 14.5px; text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(232, 25, 42, 0.3); transition: background .2s ease, transform .2s ease;
}
html body .g4a-custom-cta__btn:hover { background: #ff2d3f; transform: translateY(-2px); }
html body .g4a-custom-cta__btn--ghost { background: transparent; border-color: #3a3a40; box-shadow: none; color: #d1d5db !important; }
html body .g4a-custom-cta__btn--ghost:hover { background: rgba(232, 25, 42, 0.1); border-color: #e8192a; }
@media (max-width: 767px) {
  html body .g4a-custom-cta { flex-direction: column; text-align: center; padding: 24px 20px; }
  html body .g4a-custom-cta__body { text-align: center; }
  html body .g4a-custom-cta__actions { width: 100%; }
}

/* Discord button next to WhatsApp (top bar + mobile drawer) */
html body .g4a-top-btn--dc span { display: inline !important; }
html body .infonews .infonews-nav a.g4a-top-btn--dc.iconews,
html body .g4a-top-btn--dc { border-color: rgba(88, 101, 242, 0.5) !important; background: rgba(88, 101, 242, 0.12) !important; color: #a5b4fc !important; }
html body .infonews .infonews-nav a.g4a-top-btn--dc.iconews:hover,
html body .g4a-top-btn--dc:hover { border-color: #5865f2 !important; background: rgba(88, 101, 242, 0.22) !important; color: #c7d2fe !important; }
html body .drawer-link.drawer-discord i { color: #5865f2; }
@media (max-width: 767px) { html body .g4a-top-btn--dc span { display: none !important; } }

/* ---------- CHECKOUT: payment method area (PayPal / Stripe) in theme colours ---------- */
html body #order-standard_cart #creditCardInputFields .payment-instructions {
  margin: 0 0 16px !important; color: #c9c9cf !important; font-size: 14px; line-height: 1.6; text-align: center;
}
/* "Connect a new PayPal account" / "Enter new card details" option */
html body #order-standard_cart #creditCardInputFields ul {
  list-style: none; max-width: 500px; margin: 0 auto 14px !important; padding: 12px 16px !important;
  background: #141416 !important; border: 1px solid #2a2a2f !important; border-radius: 12px !important;
}
html body #order-standard_cart #creditCardInputFields ul.selected { border-color: #e8192a !important; background: rgba(232, 25, 42, 0.08) !important; }
html body #order-standard_cart #creditCardInputFields ul li { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html body #order-standard_cart #creditCardInputFields ul label.radio-inline {
  display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important;
  color: #fff !important; font-weight: 600; font-size: 14px; background: transparent !important; border: 0 !important; min-width: 0;
}
html body #order-standard_cart #paypal_ppcpv_input_container { max-width: 500px; margin: 0 auto !important; }
html body #order-standard_cart #paypal_ppcpv_input_container .payer-label,
html body #order-standard_cart #paypal_ppcpv_input_container .approval-instructions { color: #c9c9cf !important; }
html body #order-standard_cart #paypal_ppcpv_input_container_button { border-radius: 10px; overflow: hidden; }

/* Stripe card fields: full width, aligned, dark */
html body #order-standard_cart #stripeElements { margin: 4px 0 0 !important; }
html body #order-standard_cart #stripeElements .stripe-cards-inputs {
  float: none !important; width: 100% !important; max-width: 640px; margin: 0 auto !important; padding: 0 !important;
}
html body #order-standard_cart #stripeElements .stripe-cards-inputs > .row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 !important; }
html body #order-standard_cart #stripeElements .stripe-cards-inputs > .row > div {
  float: none !important; padding: 0 !important; width: auto !important; max-width: none !important;
}
html body #order-standard_cart #stripeElements .stripe-cards-inputs > .row > .col-md-6 { flex: 1 1 100%; }
html body #order-standard_cart #stripeElements .stripe-cards-inputs > .row > .col-md-3 { flex: 1 1 140px; }
html body #order-standard_cart #stripeElements label { display: block; margin: 0 0 6px !important; color: #9ca3af !important; font-size: 12.5px; font-weight: 600; }
html body #order-standard_cart #stripeElements .StripeElement {
  height: 48px !important; padding: 14px 14px !important; background: #141416 !important;
  border: 1px solid #2a2a2f !important; border-radius: 10px !important; box-shadow: none !important;
}
html body #order-standard_cart #stripeElements .StripeElement--focus { border-color: #e8192a !important; box-shadow: 0 0 0 3px rgba(232, 25, 42, 0.18) !important; }
html body #order-standard_cart #stripeElements .StripeElement--invalid { border-color: #f85149 !important; }

/* Card description + "save card" row under the card fields */
html body #order-standard_cart #newCardSaveSettings { max-width: 640px; margin: 16px auto 0 !important; }
html body #order-standard_cart #newCardSaveSettings > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 !important; }
html body #order-standard_cart #newCardSaveSettings #inputDescriptionContainer,
html body #order-standard_cart #newCardSaveSettings #inputNoStoreContainer {
  float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; left: auto !important;
}
html body #order-standard_cart #newCardSaveSettings #inputDescriptionContainer { flex: 1 1 320px; }
html body #order-standard_cart #newCardSaveSettings #inputNoStoreContainer { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; color: #c9c9cf; font-size: 13px; }

/* Newsletter text: keep normal case; small lock icon on the security note */
html body #order-standard_cart .marketing-email-optin p { text-transform: none !important; }
html body #order-standard_cart .checkout-security-msg { display: block !important; text-align: center; }
html body #order-standard_cart .checkout-security-msg i { font-size: 14px !important; width: auto !important; height: auto !important; margin: 0 6px 0 0 !important; position: static !important; display: inline !important; }

/* ---------- CHECKOUT: Terms of Service gate (modal) ---------- */
html.g4a-tos-open, html.g4a-tos-open body { overflow: hidden !important; }
html body .g4a-tos {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(5, 5, 7, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
html body .g4a-tos[hidden] { display: none !important; }
html body .g4a-tos__box {
  display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: min(640px, calc(100vh - 36px));
  background: #141416; border: 1px solid #2a2a2f; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 25, 42, 0.12);
}
html body .g4a-tos__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: #18181b; border-bottom: 1px solid #242428; }
html body .g4a-tos__head h3 { margin: 0 !important; color: #fff !important; font-size: 18px !important; font-weight: 800 !important; }
html body .g4a-tos__head h3 i { color: #e8192a; margin-right: 8px; }
html body .g4a-tos__close { background: transparent; border: 0; color: #9ca3af; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
html body .g4a-tos__close:hover { color: #fff; }
html body .g4a-tos__intro { margin: 0 !important; padding: 14px 22px 0; color: #c9c9cf !important; font-size: 14px; }
html body .g4a-tos__body {
  flex: 1 1 auto; min-height: 160px; overflow-y: auto; margin: 12px 22px 0; padding: 16px 18px;
  background: #0f0f11; border: 1px solid #242428; border-radius: 12px; color: #c4c8cf; font-size: 13.5px; line-height: 1.65; outline: none;
}
html body .g4a-tos__body:focus { border-color: #3a3a40; }
html body .g4a-tos__body h1 { display: none; }
html body .g4a-tos__body h2 { margin: 16px 0 6px !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; }
html body .g4a-tos__body h2:first-child { margin-top: 0 !important; }
html body .g4a-tos__body p, html body .g4a-tos__body li { color: #c4c8cf !important; }
html body .g4a-tos__body ul { padding-left: 18px; margin: 6px 0; }
html body .g4a-tos__body a { color: #ff6b76 !important; }
html body .g4a-tos__body::-webkit-scrollbar { width: 8px; }
html body .g4a-tos__body::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 8px; }
html body .g4a-tos__progress { height: 3px; margin: 10px 22px 0; background: #242428; border-radius: 3px; overflow: hidden; }
html body .g4a-tos__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c41422, #e8192a); transition: width .15s ease; }
html body .g4a-tos__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 22px 20px; }
html body .g4a-tos__hint { color: #9ca3af; font-size: 13px; }
html body .g4a-tos__hint i { color: #e8192a; margin-right: 4px; }
html body .g4a-tos__hint.is-done { color: #4ade80; }
html body .g4a-tos__hint.is-done i { color: #4ade80; }
html body .g4a-tos__actions { display: flex; gap: 10px; margin-left: auto; }
html body .g4a-tos__btn {
  height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid #e8192a; background: #e8192a; color: #fff;
  font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 10px 26px rgba(232, 25, 42, 0.28); transition: background .2s, opacity .2s;
}
html body .g4a-tos__btn:hover:not([disabled]) { background: #ff2d3f; }
html body .g4a-tos__btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
html body .g4a-tos__btn--ghost { background: transparent; border-color: #3a3a40; color: #d1d5db; box-shadow: none; }
html body .g4a-tos__btn--ghost:hover { border-color: #e8192a; background: rgba(232, 25, 42, 0.08) !important; }
/* cover for the PayPal smart button until the terms are accepted */
html body .g4a-tos-lock {
  position: absolute; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 45px;
  border: 1px dashed rgba(232, 25, 42, 0.6); border-radius: 10px; background: #141416; cursor: pointer; padding: 0 12px;
}
html body .g4a-tos-lock span { color: #fff; font-weight: 700; font-size: 14px; }
html body .g4a-tos-lock i { color: #e8192a; margin-right: 6px; }
@media (max-width: 575px) {
  html body .g4a-tos__actions { width: 100%; }
  html body .g4a-tos__btn { flex: 1 1 auto; }
}

/* ---------- TOS gate v2: modal above every lock, grey "Complete Order" until accepted ---------- */
html body .g4a-tos { z-index: 2147483647 !important; }
html.g4a-tos-open .g4a-tos-lock { visibility: hidden !important; }
html body #btnCompleteOrder.g4a-tos-pending::before {
  content: "\f023"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; color: #a1a1aa;
}
html body #btnCompleteOrder.g4a-tos-pending .fa-arrow-circle-right,
html body #btnCompleteOrder.g4a-tos-pending .fas { opacity: .6; }
html body #stripeElements .stripe-cards-inputs { position: relative; }
html body #stripeElements .g4a-tos-lock { border-radius: 12px; }