/* ui-pro-v5.css — header, home categories, contact bar, footer.
   Loaded after payment-footer-visuals.css so it wins. Crisp 3D only:
   gradient faces, hairline rings, top highlights. No glows, no blurred shadows, no ledges. */

/* ═════════ 1 · HEADER ═════════ */
html body #siteHeader#siteHeader {
  background:
    linear-gradient(106deg, rgba(255, 255, 255, .06) 0 20%, rgba(255, 255, 255, 0) 20% 100%),
    linear-gradient(106deg, rgba(255, 255, 255, 0) 0 66%, rgba(255, 255, 255, .045) 66% 84%, rgba(255, 255, 255, 0) 84% 100%),
    linear-gradient(180deg, #2e3659 0%, #232b49 54%, #181e38 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17) !important;
  border: 0 !important;
}
/* the coloured line under the header is gone */
html body #siteHeader#siteHeader::after { content: none !important; display: none !important; }

/* GAMING wordmark: chrome-horizon emerald face */
html body #siteHeader#siteHeader .brand-gaming-text { gap: 4px !important; }
html body #siteHeader#siteHeader .gaming-letters-row {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .3em !important;
  margin-right: -.3em !important;
  -webkit-text-stroke: .45px rgba(220, 255, 238, .6) !important;
  background: linear-gradient(180deg, #ffffff 0%, #c4ffe4 20%, #5af5b2 46%, #14c882 52%, #0d9e68 78%, #087850 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
/* top rail: hairline with a small gold diamond in the middle */
html body #siteHeader#siteHeader .gaming-bar-top {
  position: relative !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(53, 240, 160, 0) 0%, #35f0a0 26%, #ffeaa0 50%, #35f0a0 74%, rgba(53, 240, 160, 0) 100%) !important;
  opacity: .95 !important;
}
html body #siteHeader#siteHeader .gaming-bar-top::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  background: linear-gradient(135deg, #fff6c8, #f7bd16) !important;
}
/* bottom rail: fine dotted ticks, faded at both ends */
html body #siteHeader#siteHeader .gaming-bar-bot {
  height: 2px !important;
  border-radius: 0 !important;
  background: repeating-linear-gradient(90deg, #35f0a0 0 2px, transparent 2px 4px) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%) !important;
  opacity: .9 !important;
}

/* search / profile / cart: same size, richer glass-metal face */
html body #siteHeader#siteHeader .nav-search-btn,
html body #siteHeader#siteHeader .profile-nav,
html body #siteHeader#siteHeader .cart-nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #4a5480 0%, #313a63 56%, #242c4d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}
html body #siteHeader#siteHeader .nav-avatar {
  background: linear-gradient(180deg, #8fd2ff 0%, #3f8cf4 54%, #2158c8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

/* ═════════ 2 · HOME CATEGORY CARDS ═════════ */
html body #serviceIntro#serviceIntro .li-service-grid { gap: 11px !important; }
html body #serviceIntro#serviceIntro .li-service-card,
html body #serviceIntro#serviceIntro .li-service-card:hover {
  grid-template-columns: 64px minmax(0, 1fr) 34px !important;
  gap: 13px !important;
  min-height: 92px !important;
  padding: 11px 14px 11px 17px !important;
  border-radius: 21px !important;
  background:
    linear-gradient(90deg, rgba(var(--acc, 120, 140, 255), .20) 0%, rgba(var(--acc, 120, 140, 255), 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #394266 0%, #2a3253 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(255, 255, 255, .055) !important;
}
html body #serviceIntro#serviceIntro .li-service-card:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05) !important; }
html body #serviceIntro#serviceIntro .li-service-card::before {
  top: 24% !important;
  bottom: 24% !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
}

/* logo plate: pearl-white 3D tile so every brand mark reads clearly */
html body #serviceIntro#serviceIntro .li-service-logo {
  isolation: isolate !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 19px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f3fb 52%, #d3dbee 100%) !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
  filter: none !important;
}
html body #serviceIntro#serviceIntro .li-service-logo::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(30, 44, 96, .10) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 32, 80, .14) !important;
  pointer-events: none !important;
}
html body #serviceIntro#serviceIntro .li-service-logo img {
  position: relative !important;
  z-index: 1 !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  filter: none !important;
}
/* 8 Ball: artwork fills the plate */
html body #serviceIntro#serviceIntro .li-service-logo.pool-logo { background: linear-gradient(180deg, #1f6fa8, #123e66) !important; }
html body #serviceIntro#serviceIntro .li-service-logo.pool-logo img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}
html body #serviceIntro#serviceIntro .li-service-logo.pool-logo::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34) !important;
}
/* PUBG: amber plate, white mark */
html body #serviceIntro#serviceIntro .li-service-logo.pubg-logo { background: linear-gradient(180deg, #ffd466 0%, #f4a912 52%, #cc7d05 100%) !important; }
html body #serviceIntro#serviceIntro .li-service-logo.pubg-logo img { width: 42px !important; height: 42px !important; }
html body #serviceIntro#serviceIntro .li-service-logo.pubg-logo::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 46%) !important;
  box-shadow: inset 0 0 0 1px rgba(120, 60, 0, .22) !important;
}
html body #serviceIntro#serviceIntro .li-service-logo.ai-openai-logo img { width: 38px !important; height: 38px !important; }

html body #serviceIntro#serviceIntro .li-service-copy b { font-size: 16px !important; }
html body #serviceIntro#serviceIntro .li-service-copy small { margin-top: 3px !important; font-size: 11.5px !important; }
html body #serviceIntro#serviceIntro .li-service-copy em { margin-top: 4px !important; font-size: 11px !important; }
html body #serviceIntro#serviceIntro .li-service-arrow {
  width: 34px !important;
  height: 34px !important;
  background: linear-gradient(180deg, #ffe9a0 0%, #f7bd16 54%, #e19b0a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(150, 90, 0, .25) !important;
}

/* ═════════ 3 · CONTACT BAR (home under categories + store pages) ═════════ */
.li-service-shell .li-contact-bar { max-width: 1100px; margin: 12px auto 0; }
#support#support .section > .head,
#support#support > .head { display: none !important; }
.li-contact-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px 9px 11px;
  border-radius: 19px;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(247, 189, 22, .16) 0%, rgba(247, 189, 22, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #394266 0%, #2a3253 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(255, 255, 255, .055);
}
.li-contact-bar .lcb-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #3a2600;
  background: linear-gradient(180deg, #ffe9a0 0%, #f7bd16 54%, #e19b0a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(150, 90, 0, .25);
}
.li-contact-bar .lcb-tile .pp-i { width: 20px; height: 20px; stroke-width: 2.2; }
.li-contact-bar .lcb-title {
  flex: 1 1 auto;
  min-width: 0;
  font: 800 15px/1.1 'Sora', 'Inter', system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
}
.li-contact-bar .lcb-title small { display: block; margin-top: 3px; font: 600 9.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9fb0d8; }
.li-contact-bar .lcb-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.li-contact-bar .lcb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px 0 8px;
  border-radius: 14px;
  color: #fff;
  font: 800 12.5px/1 'Sora', 'Inter', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease;
}
.li-contact-bar .lcb-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.li-contact-bar .lcb-btn:active { transform: translateY(2px); filter: none; }
.li-contact-bar .lcb-btn.disabled { opacity: .5; pointer-events: none; filter: saturate(.5); }
.li-contact-bar .lcb-btn .lcb-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.li-contact-bar .lcb-btn .lcb-ico .pp-i { width: 15px; height: 15px; stroke-width: 2.3; }
.li-contact-bar .lcb-btn.wa {
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #38d97a 0%, #1fb35a 56%, #128a43 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(0, 70, 30, .3);
}
.li-contact-bar .lcb-btn.fb {
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #5aa0ff 0%, #2f78f0 56%, #1d55c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(10, 40, 120, .3);
}
@media (max-width: 380px) {
  .li-contact-bar { gap: 8px; padding-right: 8px; }
  .li-contact-bar .lcb-tile { width: 34px; height: 34px; border-radius: 11px; }
  .li-contact-bar .lcb-title { font-size: 13.5px; }
  .li-contact-bar .lcb-title small { display: none; }
  .li-contact-bar .lcb-btn { padding: 0 10px 0 6px; font-size: 11.5px; gap: 5px; }
  .li-contact-bar .lcb-btn .lcb-ico { width: 22px; height: 22px; }
}
/* store pages: contact bar sits at the end of the page, same width as content */
#support#support .li-contact-bar { margin: 4px 0 0; }

/* ═════════ 4 · FOOTER ═════════ */
html body #siteFooter#siteFooter { padding: 14px 0 26px !important; }
/* the box around the three buttons is gone */
html body #siteFooter#siteFooter .footer-legal-card {
  width: min(560px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body #siteFooter#siteFooter .footer-legal-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
html body #siteFooter#siteFooter .footer-legal-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 6px 11px !important;
  border-radius: 18px !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #384166 0%, #293152 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .055) !important;
}
html body #siteFooter#siteFooter .footer-legal-btn small,
html body #siteFooter#siteFooter .footer-legal-btn i { display: none !important; }
html body #siteFooter#siteFooter .footer-legal-btn b { font-size: 12.5px !important; letter-spacing: .01em; }
html body #siteFooter#siteFooter .footer-legal-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
}
html body #siteFooter#siteFooter .footer-legal-icon .pp-i { width: 19px; height: 19px; }
html body #siteFooter#siteFooter .footer-legal-icon.fl-lock { background: linear-gradient(180deg, #ffe9a0 0%, #f7bd16 54%, #e19b0a 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(150, 90, 0, .25) !important; }
html body #siteFooter#siteFooter .footer-legal-icon.fl-help { background: linear-gradient(180deg, #7db6ff 0%, #327ff2 56%, #1f58c8 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(10, 40, 120, .3) !important; }
html body #siteFooter#siteFooter .footer-legal-icon.fl-refund { background: linear-gradient(180deg, #ff9d8a 0%, #f2584a 56%, #c12f2a 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(100, 10, 10, .3) !important; }

/* "Pay with · verified by EPS" artwork */
html body .site-footer .payment-methods-banner {
  max-width: 560px;
  margin: 16px auto 4px;
  border-radius: 14px;
}
@media (min-width: 768px) { html body .site-footer .payment-methods-banner { max-width: 760px; } }

/* copyright line */
html body #siteFooter#siteFooter .foot {
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
.foot .foot-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 800 11.5px/1 'Sora', 'Inter', system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.foot .foot-copy b {
  font-weight: 800;
  color: transparent;
  background: linear-gradient(180deg, #fff6d0 0%, #ffd466 48%, #f0a50f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.foot .foot-copy i { display: block; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(247, 189, 22, 0), rgba(247, 189, 22, .85)); }
.foot .foot-copy i:last-child { transform: scaleX(-1); }
.foot .foot-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font: 600 10px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8f9cc2;
}
.foot .foot-tag em { font-style: normal; color: #b4c2ea; }
.foot .foot-tag u { display: block; width: 4px; height: 4px; transform: rotate(45deg); text-decoration: none; background: linear-gradient(135deg, #5af5b2, #14c882); }
.foot [hidden] { display: none !important; }

/* ═════════ v5b · services header, coloured category cards, white contact bar, legal rows ═════════ */
html body #serviceIntro#serviceIntro { padding: 10px 14px 26px !important; }
html body #serviceIntro#serviceIntro .li-service-header { margin: 0 0 14px !important; }
html body #serviceIntro#serviceIntro .lsh-wrap { gap: 7px !important; padding: 4px 0 0 !important; }
html body #serviceIntro#serviceIntro .lsh-wrap::before { content: none !important; display: none !important; }
html body #serviceIntro#serviceIntro .lsh-eyebrow {
  padding: 5px 13px !important;
  gap: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #3b4569 0%, #272f50 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
html body #serviceIntro#serviceIntro .lsh-eyebrow em { font-size: 9.5px !important; letter-spacing: 2.4px !important; }
html body #serviceIntro#serviceIntro .li-service-header h1.lsh-title { gap: 3px !important; }
html body #serviceIntro#serviceIntro .lsh-t1 { font-size: 10px !important; letter-spacing: .5em !important; gap: 10px !important; }
html body #serviceIntro#serviceIntro .lsh-t1::before,
html body #serviceIntro#serviceIntro .lsh-t1::after { width: 28px !important; height: 1px !important; }
html body #serviceIntro#serviceIntro .lsh-t2 { font-size: clamp(27px, 7.8vw, 40px) !important; line-height: 1.06 !important; }
html body #serviceIntro#serviceIntro .lsh-sub {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 1px 0 0 !important;
  font: 600 11px/1.3 'Inter', system-ui, sans-serif !important;
  letter-spacing: .02em;
  color: #a7b4d6 !important;
}
.lsh-sub u { display: block; width: 4px; height: 4px; transform: rotate(45deg); text-decoration: none; background: linear-gradient(135deg, #fff0b0, #f7bd16); }
.lsh-sub .lsh-fast { color: #5af5b2; font-weight: 700; }

/* category cards: each service gets its own rich colour + diagonal texture */
html body #serviceIntro#serviceIntro .li-service-card,
html body #serviceIntro#serviceIntro .li-service-card:hover {
  min-height: 88px !important;
  padding: 10px 13px 10px 16px !important;
}
html body #serviceIntro#serviceIntro .li-service-card.service-8ball { --f1: #12689c; --f2: #0a3556; --hi: #5fdcff; }
html body #serviceIntro#serviceIntro .li-service-card.service-meta { --f1: #2159d4; --f2: #132f80; --hi: #8ab8ff; }
html body #serviceIntro#serviceIntro .li-service-card.service-youtube { --f1: #b4202f; --f2: #591021; --hi: #ff8f9c; }
html body #serviceIntro#serviceIntro .li-service-card.service-pubg { --f1: #a96a0d; --f2: #51330a; --hi: #ffd47a; }
html body #serviceIntro#serviceIntro .li-service-card.service-chatgpt { --f1: #139073; --f2: #0a4a3b; --hi: #6fffd2; }
html body #serviceIntro#serviceIntro .li-service-card.service-vpn { --f1: #6a47d6; --f2: #35237f; --hi: #c3b0ff; }
html body #serviceIntro#serviceIntro .li-service-card,
html body #serviceIntro#serviceIntro .li-service-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 2px, rgba(255, 255, 255, 0) 2px 10px),
    linear-gradient(135deg, var(--f1, #394266) 0%, var(--f2, #2a3253) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .09) !important;
}
html body #serviceIntro#serviceIntro .li-service-card::before {
  top: 22% !important;
  bottom: 22% !important;
  width: 4px !important;
  background: var(--hi, #fff) !important;
}
html body #serviceIntro#serviceIntro .li-service-copy b { color: #fff !important; }
html body #serviceIntro#serviceIntro .li-service-copy small { color: rgba(255, 255, 255, .72) !important; }
html body #serviceIntro#serviceIntro .li-service-copy em { color: var(--hi, #fff) !important; filter: none !important; }

/* logo plates: beat payment-footer-visuals per-service tints; pearl plate, clear logo */
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo {
  width: 62px !important;
  height: 62px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fc 52%, #d2daee 100%) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo.pool-logo {
  padding: 3px !important;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6f5 100%) !important;
}
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo.pool-logo img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo.pool-logo::after { box-shadow: inset 0 0 0 1px rgba(20, 32, 80, .14) !important; background: none !important; }
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo.pubg-logo {
  border: 3px solid #fff3d6 !important;
  background: linear-gradient(180deg, #ffd466 0%, #f4a912 52%, #cc7d05 100%) !important;
}
html body #serviceIntro#serviceIntro .li-service-card .li-service-logo.pubg-logo img { width: 36px !important; height: 36px !important; }

/* Contact bar: white pearl bar so it differs from every other block */
html body .li-contact-bar {
  gap: 8px;
  min-height: 52px;
  padding: 8px 9px 8px 9px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4fb 55%, #dde4f3 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 32, 80, .12);
}
html body .li-contact-bar .lcb-tile {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #ffd466;
  background: linear-gradient(180deg, #3a4778 0%, #232c52 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(10, 16, 48, .4);
}
html body .li-contact-bar .lcb-tile .pp-i { width: 18px; height: 18px; }
html body .li-contact-bar .lcb-title {
  flex: 0 0 auto;
  margin-right: auto;
  padding-right: 4px;
  font-size: 13.5px;
  color: #141c3a;
  overflow: visible;
}
html body .li-contact-bar .lcb-title small { display: none; }
html body .li-contact-bar .lcb-actions { gap: 6px; margin-left: auto; }
html body .li-contact-bar .lcb-btn { height: 34px; padding: 0 11px 0 6px; gap: 5px; border-radius: 12px; font-size: 11.5px; }
html body .li-contact-bar .lcb-btn .lcb-ico { width: 22px; height: 22px; border-radius: 8px; }
html body .li-contact-bar .lcb-btn .lcb-ico .pp-i { width: 13px; height: 13px; }
@media (max-width: 380px) {
  html body .li-contact-bar { padding: 7px 8px; gap: 6px; }
  html body .li-contact-bar .lcb-tile { width: 30px; height: 30px; border-radius: 10px; }
  html body .li-contact-bar .lcb-title { font-size: 12.5px; padding-right: 0; }
  html body .li-contact-bar .lcb-btn { padding: 0 8px 0 5px; font-size: 11px; }
  html body .li-contact-bar .lcb-btn .lcb-ico { width: 20px; height: 20px; }
}

/* legal links: three slim rows, dark capsule style (distinct from the colour cards) */
html body #siteFooter#siteFooter .footer-legal-card { width: min(380px, 100%) !important; }
html body #siteFooter#siteFooter .footer-legal-nav { grid-template-columns: 1fr !important; gap: 8px !important; }
html body #siteFooter#siteFooter .footer-legal-btn {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 8px 12px 8px 9px !important;
  border-radius: 16px !important;
  text-align: left !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, #1f2744 0%, #141a31 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}
html body #siteFooter#siteFooter .footer-legal-icon { width: 32px !important; height: 32px !important; border-radius: 11px !important; }
html body #siteFooter#siteFooter .footer-legal-icon .pp-i { width: 17px; height: 17px; }
html body #siteFooter#siteFooter .footer-legal-btn b { font-size: 13.5px !important; }
html body #siteFooter#siteFooter .footer-legal-btn i {
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  margin-left: auto !important;
  background: rgba(255, 255, 255, .08) !important;
}
html body #siteFooter#siteFooter .footer-legal-btn i .pp-i { width: 12px; height: 12px; }

/* ═════════ v5c · simpler header text, 3D "Premium Services", spacing, green legal rows, one plain font ═════════ */
html body #serviceIntro#serviceIntro .lsh-eyebrow,
html body #serviceIntro#serviceIntro .lsh-t1 { display: none !important; }
html body #serviceIntro#serviceIntro .lsh-wrap { gap: 8px !important; padding: 8px 0 0 !important; }
html body #serviceIntro#serviceIntro .li-service-header { margin: 0 0 16px !important; }
html body #serviceIntro#serviceIntro .li-service-header h1.lsh-title { gap: 8px !important; }
html body #serviceIntro#serviceIntro .lsh-t2 {
  font-size: clamp(30px, 9.4vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.04 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: .6px rgba(255, 246, 205, .6) !important;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe98a 26%, #fbc623 49%, #d98b04 52%, #f5b816 76%, #b36a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
/* 3D rail under the title: gold hairline, centre diamond */
html body #serviceIntro#serviceIntro .li-service-header h1.lsh-title::after {
  content: "" !important;
  display: block !important;
  width: 96px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, rgba(247, 189, 22, 0) 0%, #f7bd16 30%, #ffe58f 50%, #f7bd16 70%, rgba(247, 189, 22, 0) 100%) !important;
}
html body #serviceIntro#serviceIntro .lsh-sub { margin-top: 0 !important; }

/* spacing */
html body .li-service-shell .li-contact-bar { margin: 24px auto 0; }
html body #support#support { margin-bottom: 10px; }
html body #siteFooter#siteFooter { padding-top: 26px !important; }
html body .site-footer .payment-methods-banner { margin-top: 32px; }

/* legal rows: no outline, emerald 3D faces */
html body #siteFooter#siteFooter .footer-legal-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #34d482 0%, #19a560 56%, #0e7a46 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  border: 0 !important;
  outline: 0 !important;
}
html body #siteFooter#siteFooter .footer-legal-btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
html body #siteFooter#siteFooter .footer-legal-btn b { color: #fff !important; }
html body #siteFooter#siteFooter .footer-legal-btn .footer-legal-icon.fl-lock,
html body #siteFooter#siteFooter .footer-legal-btn .footer-legal-icon.fl-help,
html body #siteFooter#siteFooter .footer-legal-btn .footer-legal-icon.fl-refund {
  color: #0b6a3a !important;
  background: linear-gradient(180deg, #ffffff 0%, #eaf8f0 55%, #c7ead7 100%) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
html body #siteFooter#siteFooter .footer-legal-btn i {
  color: #fff !important;
  background: rgba(255, 255, 255, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

/* one plain, professional font for every home-page text */
html body #serviceIntro#serviceIntro,
html body #serviceIntro#serviceIntro *,
html body .li-contact-bar,
html body .li-contact-bar *,
html body #siteFooter#siteFooter,
html body #siteFooter#siteFooter * {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}


/* LI GAMING checkout refinement: same-origin payment flow, readable benefit controls, full popup scrolling. */
#orderModal#orderModal.payment-step-active .op-panel {
  width: min(480px, 100%) !important;
  max-height: min(calc(100dvh - 16px), 820px) !important;
  min-height: 0 !important;
}
#orderModal#orderModal.payment-step-active .op-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(143,164,202,.34) transparent !important;
  padding: 12px 13px max(15px, env(safe-area-inset-bottom)) !important;
}
#orderModal#orderModal.payment-step-active .op-body::-webkit-scrollbar { width: 4px !important; }
#orderModal#orderModal.payment-step-active .op-body::-webkit-scrollbar-thumb { background: rgba(143,164,202,.34) !important; border-radius: 99px !important; }
#orderModal#orderModal.payment-step-active #paymentStep {
  display: block !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
#orderModal#orderModal.payment-step-active #paymentStep .checkout-finance-card {
  margin: 0 0 11px !important;
  padding: 11px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(39,53,79,.97), rgba(19,28,44,.98)) !important;
}
#orderModal#orderModal.payment-step-active .cfc-heading { margin-bottom: 9px !important; gap: 8px !important; }
#orderModal#orderModal.payment-step-active .cfc-heading-icon { width: 31px !important; height: 31px !important; flex-basis: 31px !important; border-radius: 10px !important; }
#orderModal#orderModal.payment-step-active .cfc-heading>div b { font-size: 12px !important; }
#orderModal#orderModal.payment-step-active .cfc-heading>div small { display: none !important; }
#orderModal#orderModal.payment-step-active .cfc-heading>a { font-size: 10px !important; }
#orderModal#orderModal.payment-step-active .cfc-finance-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 6px !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-row {
  min-height: 42px !important;
  padding: 8px 10px !important;
  display: flex !important;
  gap: 9px !important;
  border-radius: 11px !important;
  background: rgba(8,14,26,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#orderModal#orderModal.payment-step-active .cfc-toggle-copy { gap: 2px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-copy b { font-size: 11px !important; }
#orderModal#orderModal.payment-step-active .cfc-toggle-copy small { font-size: 9px !important; }
#orderModal#orderModal.payment-step-active .cfc-control { padding: 4px 2px 3px !important; }
#orderModal#orderModal.payment-step-active .cfc-totals { margin-top: 8px !important; padding: 9px !important; gap: 5px !important; }
#orderModal#orderModal.payment-step-active .cfc-note { margin-top: 7px !important; font-size: 9px !important; }
#orderModal#orderModal.payment-step-active #paymentStep .eps-payment-pro-panel {
  display: block !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  margin: 0 0 9px !important;
  padding: 10px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #111b2b, #0b1320) !important;
}
#orderModal#orderModal.payment-step-active .eps-payment-pro-head { margin-bottom: 9px !important; padding-bottom: 8px !important; }
#orderModal#orderModal.payment-step-active .eps-payment-pro-title h3 { font-size: 13px !important; }
#orderModal#orderModal.payment-step-active .eps-payment-pro-title h3::after { margin-top: 6px !important; width: 38px !important; height: 2px !important; }
#orderModal#orderModal .eps-payment-strip-wrap { width: 100% !important; overflow: hidden !important; border-radius: 9px !important; background: #fff !important; line-height: 0 !important; }
#orderModal#orderModal .eps-payment-strip-image { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; border: 0 !important; border-radius: 9px !important; }
#orderModal#orderModal.payment-step-active #paymentStep .eps-direct-pay-button {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-height: 53px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#orderModal#orderModal.payment-step-active #paymentStep .eps-payment-footnote { margin: 7px 3px 0 !important; }
@media (max-width: 500px) {
  #orderModal#orderModal.payment-step-active .op-panel { max-height: calc(100dvh - 12px) !important; border-radius: 21px !important; }
  #orderModal#orderModal.payment-step-active .op-head { padding: 12px 13px 8px !important; }
  #orderModal#orderModal.payment-step-active .op-body { padding: 9px 10px max(12px, env(safe-area-inset-bottom)) !important; }
  #orderModal#orderModal.payment-step-active .eps-payment-strip-image { width: 100% !important; }
}
