/* web/p2w-shop.com/public_html/styles/index.css
   Главная страница: карточки, топап, промо-модал, футер
   Зависит от root.css (подключать root.css первым)
   ─────────────────────────────────────────────── */
   
/* ─── INTRO ANIMATION ─── */
#intro {
  position: fixed; inset: 0;
  background: radial-gradient(circle at center, var(--bg-deepest) 0%, #05010a 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; color: #fff;
  font-family: Impact, Arial Black, sans-serif;
  font-size: 3rem; letter-spacing: 2px; text-transform: uppercase;
  animation: introFade 3s forwards; overflow: hidden;
}
#intro span {
  display: inline-block;
  animation: introZoom 2s ease-out forwards;
  transform: scale(0) rotate(-30deg); opacity: 0;
}
@keyframes introFade  { 0%,80% { opacity:1 } 100% { opacity:0; visibility:hidden } }
@keyframes introZoom  {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0 }
  40%  { transform: scale(1.3) rotate(10deg); opacity: 1 }
  70%  { transform: scale(1) rotate(0) }
  100% { transform: scale(1) rotate(0); opacity: 1 }
}

/* ─── MODAL OVERRIDES ─── */
.modal#promoModal.active { justify-content: center !important }
.modal { z-index: 9999 !important }
.modal .close {
  color: #fff !important;
  border: none !important;
  background: transparent !important;
  font-size: 20px; font-weight: 900;
}

/* ─── STRIP ─── */
.strip { margin: 18px 0 !important }

/* ─── PREMIUM GRID (index override — grid режим, не flex) ─── */
.premiumGrid {
  display: grid;
  gap: 16px; margin: 0;
  padding: 10px 0 !important;
  position: relative;
  transition: all .2s ease-in-out;
  cursor: default !important;
}
.premiumGrid::before, .premiumGrid::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* Popular grid layout */
.premiumGrid.popular {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  padding: 10px !important;
}
@media (min-width: 625px)  { .premiumGrid.popular { grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1280px) { .premiumGrid.popular { grid-template-columns: repeat(3,1fr) } }

/* ─── gCARD ─── */
.gCard {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bd); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  /* Единый переход — через CSS-переменные из root.css */
  transition: var(--card-transition);
  will-change: transform;
  min-width: clamp(280px, 90vw, 402px); width: 100%;
}

.premiumGrid > .gCard {
  flex: 0 0 clamp(260px, 32vw, 320px);
  scroll-snap-align: start; height: max-content;
}
@media (min-width: 625px) { .gCard { min-width: 100% !important } }

.gCard .imgWrap {
  position: relative; aspect-ratio: 16/9;
  background: var(--bg);
  min-width: max-content; min-height: max-content;
  overflow: hidden;
}
.gCard .imgWrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: var(--card-img-transition);
  will-change: transform;
}
.imgWrap img, .imgWrap { min-height: 222px }
.nedavniye > .gCard > .imgWrap img,
.nedavniye > .gCard > .imgWrap { min-height: 201.6px !important }

.gCard .body {
  display: flex; flex-direction: column;
  gap: 6px; padding: 12px;
  touch-action: manipulation; height: 100%;
}
.gCard .title  { font-weight: 900; line-height: 1.25; min-height: 35px !important }
.gCard .desc   { color: #b6c3ff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 2.8em }
.gCard .meta   { margin-top: auto; display: flex; align-items: center; justify-content: space-between }
.gCard .meta .price { display: flex; align-items: center; gap: 8px; font-weight: 800 }
.gCard::after  { opacity: 0 !important; display: none !important }
.gCard::before { display: none !important }

/* ─── Popular — единый hover (эталон для всего сайта) ─── */
.premiumGrid.popular .gCard {
  transition: var(--card-transition);
  will-change: transform;
}
.premiumGrid.popular .gCard:hover {
  transform: var(--card-hover-transform);
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
}
.premiumGrid.popular .imgWrap img {
  transition: var(--card-img-transition);
  will-change: transform;
}
.premiumGrid.popular .gCard:hover .imgWrap img { transform: var(--card-img-hover-scale) }

@media (max-width: 500px) {
  .premiumGrid.popular .imgWrap img {
    width: 100% !important; height: 100% !important;
    min-width: 100% !important; min-height: 100% !important;
  }
}

/* ─── gCARD TAG (merged два блока) ─── */
.gCard .tag {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; gap: 6px;
  max-width: calc(100% - 20px); padding: 6px 10px;
  border-radius: 10px; font-weight: 700; font-size: 12px;
  color: var(--ink);
  backdrop-filter: blur(6px);
  background: linear-gradient(135deg, rgba(15,23,42,.9), rgba(30,41,59,.85));
  border: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateZ(40px);
  --tag-icon: url(/img/App/App.png);
}
.gCard .tag img,
.gCard .tag::before {
  display: inline-block; vertical-align: middle;
  width: 18px; height: 18px; object-fit: cover;
}
.gCard .tag::before {
  content: "";
  background: var(--tag-icon) no-repeat center / contain;
}

/* Tag links */
.tag.tag-link           { transition: all .15s ease-in-out }
.tag.tag-link:hover     { color: var(--blue-link) }

.gCard .tag .tag-link {
  position: relative; cursor: pointer; color: #e5edff;
  transition: color .2s ease, text-shadow .2s ease;
}
.gCard .tag .tag-link::after {
  content: ""; position: absolute;
  left: 0; bottom: -2px; width: 100%; height: 2px;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
  opacity: 0; transform: scaleX(.6);
  transition: all .25s ease; border-radius: 2px;
}
.gCard .tag .tag-link:hover            { color: var(--blue-cat); text-shadow: 0 0 10px rgba(99,102,241,.55) }
.gCard .tag .tag-link:hover::after     { opacity: 1; transform: scaleX(1) }

/* ─── BADGE / DISC / OLD ─── */
.badge, .disc { background: var(--badge-bg); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 800 }
.old          { color: var(--muted-4); opacity: .7; text-decoration: line-through; font-weight: 700 }

/* ─── CHIP ─── */
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--line-3); padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800 }
.chip img { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); object-fit: cover }

/* ─── SECTION ─── */
.section { content-visibility: auto; contain-intrinsic-size: 600px }

/* ─── ICON IMG ─── */
.iconImg {
  position: relative; display: inline-block;
  inline-size: 54px; block-size: 54px;
  width: 54px; height: 54px;
  flex: none;
  contain: layout paint;
  transform: translateZ(0);
}
.iconImg img {
  position: absolute; inset: 0;
  inline-size: 100% !important; block-size: 100% !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block; border-radius: 12px;
}
.iconImg.skel                          { border-radius: 12px }
.iconImg.skel::before,
.iconImg.skel::after                   { border-radius: inherit }

/* ─── ICON CARD ─── */
.iconCard { height: 100px !important; display: flex; flex-direction: column; align-items: center }
.iconCard, .gCard { box-shadow: none !important }

/* ─── NAME ─── */
.name {
  margin-top: 5px; position: relative; display: flex;
  max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; align-items: center;
}
.iconCard .name { min-height: 17px }

/* ─── ICONS GRID ─── */
.icons { padding: 1px; max-height: calc(100.5px * 3 + 32px) !important; overflow: hidden }
.icons.GameR,
.icons.GameRfirst { max-height: calc(100.5px * 3 + 32px) !important }
@media (min-width: 1200px) {
  .divGames:not(:has(> section)) .icons { grid-template-columns: repeat(12, 1fr) !important }
}

/* ─── STARS ─── */
.star        { fill: currentColor }
.star--full  { color: var(--blue-light) }
.star--empty { color: var(--muted-4) }
.stars       { display: flex; align-items: center }

/* ─── LAYOUT ─── */
main.wrap          { padding: 120px 20px !important }
header.header > div.wrap { max-width: 1240px !important }
.header            { width: 100% !important; position: fixed !important }
.dot               { background: transparent !important }

@media screen and (max-width: 1280px) {
    main.wrap { padding: 80px 20px !important }
}

/* ─── IMGWRAP ─── */
.imgWrap { position: relative }
.imgWrap > .ph,
.imgWrap > .real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

/* ─── SKELETON ─── */
.skel { position: relative; overflow: hidden; background: var(--bg); border-radius: var(--radius-sm) }
.imgWrap.skel { border-radius: 0 !important }
.skel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--bg-2) }
.skel::after  {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(-75deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 55%);
  animation: skel-move 1.1s linear infinite;
  filter: blur(6px); pointer-events: none;
  opacity: 0; transition: opacity .15s ease-out;
}
.skel.is-loading::after  { opacity: 1 }
.skel.is-loaded::after   { opacity: 0; animation: none }
.skel.is-loaded::before  { opacity: 0; transition: opacity .15s ease-out }
@keyframes skel-move {
  0%   { transform: translateX(-120%) translateY(-20%) }
  100% { transform: translateX(120%)  translateY(20%)  }
}

/* ─── LAZY / REAL IMAGES ─── */
img.real           { opacity: 0; transition: opacity .2s ease-out }
img.real.is-ready  { opacity: 1 }
img.ph             { opacity: .55 }
img.lazyload,
img.lazyloading    { background-color: transparent !important }

/* ─── LOADER (центральный спиннер при загрузке карточек) ─── */
.loadProducts { width: 100%; min-height: 200px; display: flex; justify-content: center; align-items: center }
.loader {
  width: 40px; height: 40px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--acc);
  border-radius: 50%; animation: spin .8s linear infinite;
}

/* ─── HOME HERO ROW ─── */
.homeHeroRow {
  overflow: hidden; width: 100%; position: relative;
}
.homeHeroRow::-webkit-scrollbar       { height: 0 !important }
.homeHeroRow::-webkit-scrollbar-thumb { background: var(--scrollbar-img); border-radius: 4px }

.heroTrack {
  display: flex; flex-wrap: nowrap;
  width: max-content; gap: 13px;
  will-change: transform; transform: translate3d(0,0,0);
}

/* ─── HOME HERO CARD ─── */
.homeHero {
  flex: 0 0 auto; width: 300px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-sm);
  position: relative; display: block;
  border: 1px solid var(--bd-soft); height: 150px;
  text-decoration: none; color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}
.homeHero .imgStack               { position: absolute; inset: 0 }
.homeHero .imgStack img           { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: all .6s cubic-bezier(.25,1,.3,1) }
.homeHero .chip                   { position: absolute; left: 14px; top: 12px; background: var(--green-chip); color: #062a14; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; transition: background .35s ease }
.homeHero .title                  { position: absolute; left: 14px; bottom: 12px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); transition: color .35s ease }
.homeHero:hover                   { transform: translateY(-6px) scale(1.02); box-shadow: 0 15px 35px rgba(0,0,0,.25) }
.homeHero:hover .imgStack img     { transform: scale(1.08) rotate(-1deg) }
.homeHero:hover .title            { color: var(--gold) }

/* ─── STRIP / TOPUP BLOCK ─── */
.pay > .btn     { min-width: 225px !important }
.pill:hover     { background: var(--acc); transition: all .2s ease-in-out }
.btn            { width: 100%; display: flex; justify-content: center }
.sMeta          { cursor: pointer; transition: all .15s ease-in-out }
.sMeta:hover    { color: var(--blue-link) }

.box.error      { border: 2px solid #e53935; border-radius: 6px; padding: 4px }
.error-msg      { color: #e53935; font-size: 13px; margin-top: 4px }
.box, .sumBox   { height: 44.3px !important }
.sumBox         { justify-content: space-around }
.gamesDiv       { display: flex; flex-direction: column; justify-content: space-between }

/* ─── TOPUP NEW BLOCK ─── */
.topupNew {
  background: var(--panel-topup); border-radius: 22px; padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.03);
  display: flex; flex-direction: column; gap: 16px; margin-top: 16px;
}
.topupNew.animating { transition: background .4s ease, box-shadow .4s ease }

.topupHead  { display: flex; align-items: center; gap: 12px }
.topupTitle { font-size: 20px; font-weight: 800 }

.steamLogoNew {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--panel-swap-a), #0f1a2c);
  display: grid; place-items: center;
}

/* ─── FEE BADGE ─── */
.feeBadge {
  position: relative; display: inline-block; cursor: pointer;
  background: var(--blue-btn); padding: 4px 10px;
  border-radius: 999px; color: #fff;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 0 6px rgba(94,140,255,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}
.feeBadgeTG { background: var(--linear-gradient-orange) !important;box-shadow: 0 0 6px rgb(183 78 20), inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }

/* tooltip стрелка */
.feeBadge::before {
  content: ""; position: absolute;
  left: 50%; top: -8px;
  transform: translateX(-50%) translateY(6px);
  border: 6px solid transparent; border-top-color: #1c1c1e;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 19;
}
/* tooltip body */
.feeBadge::after {
  position: absolute; left: 50%; top: -8px;
  transform: translate(-50%, -100%) translateY(6px);
  background: #1c1c1e; color: #fff;
  padding: 6px 10px; font-size: 12px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 20;
}
.feeBadge:hover::after,
.feeBadge:hover::before,
.feeBadge.showTip::after,
.feeBadge.showTip::before { opacity: 1; transform: translate(-50%, -100%) translateY(0) }

/* ─── PROMO TOP ─── */
.promoTop {
  color: var(--blue-promo); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .3s ease-in-out;
}
.promoTop::after { content: "›"; font-size: 14px; opacity: .8 }
.promoTop:hover  { opacity: .9 }

/* ─── INPUT ROW ─── */
.inputsRow { width: 100%; display: flex; gap: 16px }
@media (max-width: 760px) { .inputsRow { flex-direction: column } }

.inputWrap,
.amountWrap {
  position: relative; flex: 1;
  background: var(--panel-input); padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--bd-soft);
  box-shadow: 0 0 14px rgba(0,0,0,.18);
}

.inputWrap input,
.amountWrap input {
  width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--label-6); font-size: 15px;
}
.inputWrap input::placeholder { color: var(--label-15) }

.infoBtn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-3); background: var(--panel-fill);
  color: #9fb6d8; font-size: 13px; display: grid; place-items: center; cursor: pointer;
}

.amountWrap label {
  position: absolute; top: -10px; left: 12px;
  padding: 0 6px; background: var(--panel-topup);
  color: var(--label-16); font-size: 12px; border-radius: 5px;
}

.curSymbol {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--label-15); font-weight: 600;
}

/* ─── PAY BUTTON — единый цвет на всём сайте ─── */
.payBtn {
  margin-top: 4px; width: 100%; padding: 16px 0;
  border-radius: 14px; border: 0;
  background: var(--btn-primary);
  color: #eef3ff; font-weight: 800; text-align: center; font-size: 16px;
  box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer; transition: filter .2s ease, transform .1s ease, box-shadow .2s ease;
}
.payBtn:hover  { filter: brightness(1.08); box-shadow: var(--btn-shadow-lg), inset 0 0 0 1px rgba(255,255,255,.14) }
.payBtn:active { transform: scale(.98); filter: brightness(.97) }

#payBtnTelegram { background: var(--linear-gradient-orange);box-shadow: 0 0 6px rgb(183 78 20), inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }

/* Кнопка при загрузке */
button:disabled { opacity: 0.75 !important; cursor: no-drop !important }
#payBtn.loading { position: relative; color: transparent !important }
#payBtn.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
  transform: translate(-50%, -50%);
}

/* ─── SWAP ITEM ─── */
#modeSwitch { position: relative; width: 52px; height: 52px }

.swapItem {
  position: absolute; top: 0; left: 0;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--panel-swap); border: 1px solid var(--line);
  display: grid; place-items: center;
  cursor: pointer; will-change: transform;
  transition: transform .35s ease;
}
.swapItem img { width: 40px; height: 40px }

.swapItem.active {
  background: var(--panel-swap-a);
  transform: translateY(-6px);
  z-index: 5;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.swapItem:not(.active) {
  transform: translateY(6px) translateX(-10px);
  opacity: .9;
}
.swapItem.fading { opacity: 0 }
.no-css-transform.swapItem.active,
.no-css-transform.swapItem:not(.active) { transform: none !important }

/* ─── PROMO MODAL ─── */
#promoModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  display: none; place-items: center; z-index: 40;
}
#promoModal.open { display: grid }

.promoSheet {
  width: min(420px, 92vw); background: var(--panel-modal);
  border-radius: 18px; padding: 0 !important;
  position: relative; transition: all .3s ease-in-out;
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03);
  animation: promoFade .25s ease;
}
@keyframes promoFade {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}

.promoSheet .close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--panel-close);
  border: 1px solid var(--line-3); cursor: pointer;
  color: #d7e2ff; font-size: 20px; font-weight: 500;
}

.promoHeader { text-align: center; margin-bottom: 18px }
.promoHeader img { width: 100%; opacity: .95; border-radius: var(--radius); height: 325px; object-fit: cover }
.promoHeader h2  { margin: 10px 0 0; font-size: 18px; font-weight: 800; color: var(--ink) }

.promoField { display: flex; gap: 10px; margin-bottom: 14px; margin-inline: 24px }
.promoField input {
  flex: 1; padding: 12px 14px;
  background: var(--panel-input); border: 1px solid var(--bd-soft);
  border-radius: 14px; color: var(--ink); outline: 0; font-size: 15px;
  box-shadow: 0 0 14px rgba(0,0,0,.18);
}
.promoField input::placeholder { color: var(--label-15) }

/* ─── PROMO APPLY — единый цвет кнопки ─── */
.promoApply {
  padding: 12px 16px; border-radius: 14px;
  background: var(--btn-primary);
  border: 0; color: #eef3ff; font-weight: 800; cursor: pointer;
  box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 14px; transition: filter .15s ease, transform .1s ease;
}
.promoApply:hover  { filter: brightness(1.08) }
.promoApply:active { transform: scale(.97) }

.promoError      { display: none; text-align: center; margin-top: 6px; font-weight: 600; color: var(--danger) }
.promoError.show { display: block }

#promoInput.error { background: var(--promo-err-bg) !important; border: 1px solid var(--err-2) !important; color: #fff !important }
#promoError       { margin: 15px; color: var(--err-2); font-size: 13px; display: none }

.inputErrorBorder { border: 1px solid var(--err-3) !important }

.loaderMini {
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  border-radius: 50%; animation: spinPromo .6s linear infinite; margin: 0 auto;
}
@keyframes spinPromo { to { transform: rotate(360deg) } }

@media (max-width: 760px) {
  .promoField   { flex-direction: column }
  .promoApply   { width: 100% }
}

/* ─── NEDAVNIYE (недавние) ─── */
.nedavniye {
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  flex-direction: column;
  max-height: calc(358px * 3 + 44px);
  overflow: hidden !important;
}
.premiumGrid.popular .nedavniye { /* не перекрываем */ }

@media (max-width: 1200px) {
  .section.NedavniyeS { min-width: 100% !important; max-width: 100% !important; margin-left: 0 !important }
  .nedavniye > .gCard { min-width: 49% !important }
  .nedavniye { flex-direction: row !important }
}
@media (max-width: 625px) { .nedavniye > .gCard { min-width: 100% !important } }
section:has(.nedavniye) { max-width: 400px }

/* ─── SCROLL BTN ─── */
.scroll-btn { height: 75px !important; width: 75px !important; border-radius: 100% !important; justify-content: center; align-content: center; align-items: center }
.scroll-btn.left > svg { transform: rotate(180deg) }

/* ─── NOTIFY BANNER ─── */
#notifyBanner {
  opacity: 0; transform: translate(-50%, -10px);
  animation: notifyShow .3s ease-out forwards, notifyHide .4s ease-in forwards 5s;
}
@keyframes notifyShow {
  from { opacity: 0; transform: translate(-50%, -10px) }
  to   { opacity: 1; transform: translate(-50%, 0)      }
}
@keyframes notifyHide {
  from { opacity: 1; transform: translate(-50%, 0)       }
  to   { opacity: 0; transform: translate(-50%, -10px)   }
}

/* ─── iOS SAFARI COMPAT ─── */
@supports (-webkit-touch-callout: none) {
  body { -webkit-overflow-scrolling: touch }
  .premiumGrid > .gCard { box-shadow: none !important }
  .card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
  .homeHero .imgStack img { filter: none !important }
  .ph, .ph.fade, .real, .real.loaded { transition: none !important }
  .header, .gCard, .iconCard, .pCard,
  .homeHero, .imgWrap, .imgWrap img,
  .premiumGrid, .homeHeroRow, .section, #bg-stars {
    -webkit-transform: translateZ(0); transform: translateZ(0);
    backface-visibility: hidden;
  }
  .section, .homeHeroRow { content-visibility: visible !important; contain-intrinsic-size: auto !important }
}

/* ─── FOOTER ─── */
.p2w-footer {
  background: var(--panel-topup);
  padding: 60px 0 30px; color: #fff;
  font-family: "Inter", sans-serif;
  border-top: 2px solid var(--line); position: relative; overflow: hidden;
}
.p2w-footer::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 32px;
  background: url("images/lights.png") repeat-x center; opacity: .9;
}
.p2w-footer-content {
  max-width: 1300px; margin: 0 auto; padding: 0 30px;
  display: flex; justify-content: space-between; gap: 60px;
}
.footer-column h3   { margin-bottom: 15px; font-size: 19px; font-weight: 700 }
.footer-column a    { display: block; margin-bottom: 10px; color: #d6e6ff; text-decoration: none; font-size: 15px; transition: .2s }
.footer-column a:hover { color: #fff }

.footer-social     { display: flex; gap: 14px; margin-bottom: 20px }
.footer-social img { width: 32px; height: 32px; opacity: .85; transition: .2s }
.footer-social img:hover { opacity: 1; transform: scale(1.08) }

.footer-support-btn {
  background: var(--blue-footer); padding: 12px 22px; border-radius: 8px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: .25s; display: flex; align-items: center; justify-content: center;
}
.footer-support-btn:hover { background: var(--blue-fhover) }

.footer-bottom { margin-top: 40px; text-align: center; font-size: 14px; opacity: .8 }

@media (max-width: 1024px) {
  .p2w-footer-content { flex-direction: column; align-items: center; text-align: center }
  .footer-column      { width: 100% }
  .footer-social      { justify-content: center }
}
@media (max-width: 760px) {
  .p2w-footer { display: none !important; opacity: 0 }
}