/* Activity header and cohesive, evenly spaced gift/price cards. */
#gp-now-buying.gp-catalog-design {
  --gp-catalog-accent: #49df64;
  --gp-catalog-primary: #1689ff;
  --gp-catalog-muted: #6d6d71;
  --gp-catalog-metric-color: rgba(255,255,255,.4);
  --gp-catalog-secondary: #282727;
  --gp-catalog-feed-pitch: 80px;
  --gp-catalog-glass-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 1.8px 3px 0 -2px rgba(255,255,255,.27), inset -2px -2px 0 -2px rgba(255,255,255,.24), inset -3px -8px 1px -6px rgba(255,255,255,.18), inset -.3px -1px 4px rgba(0,0,0,.24), inset -1.5px 2.5px 0 -2px rgba(0,0,0,.4), inset 0 3px 4px -2px rgba(0,0,0,.4), inset 2px -6.5px 1px -4px rgba(0,0,0,.2), 0 1px 5px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.16);
  min-height: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* The optional discount is inserted after this strip when private auth resolves.
   Keep its glass surface clear of the last row without spacing an absent bonus. */
/* Loading adds a screen-reader status between the strip and discount. The
   space belongs to the header, independent of those transient React siblings. */
[data-gp-catalog-view]:has(> #gp-now-buying.gp-catalog-design) > .gp-catalog-bonus {
  margin-top: 12px;
}
#gp-now-buying.gp-catalog-design .gp-catalog-activity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}
#gp-now-buying.gp-catalog-design .gpnb-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(73,223,100,.15);
  color: var(--gp-catalog-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  gap: 4px;
}
#gp-now-buying.gp-catalog-design .gpnb-online,
#gp-now-buying.gp-catalog-design .gpnb-delivered {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex: none;
  gap: 4px;
  margin: 0;
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
#gp-now-buying.gp-catalog-design .gpnb-online { margin-left: auto; }
#gp-now-buying.gp-catalog-design .gpnb-delivered[hidden] { display: none !important; }
#gp-now-buying.gp-catalog-design .gp-catalog-metric-value {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  color: var(--gp-catalog-metric-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
#gp-now-buying.gp-catalog-design .gp-catalog-metric-value .gpnb-online-num,
#gp-now-buying.gp-catalog-design .gp-catalog-metric-value .gpnb-dnum {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
#gp-now-buying.gp-catalog-design .gpnb-online-cap,
#gp-now-buying.gp-catalog-design .gpnb-dword,
#gp-now-buying.gp-catalog-design .gp-catalog-review-short {
  padding: 0;
  background: none;
  color: var(--gp-catalog-metric-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
}
/* The feed injects its base styles later; keep the review label at the same
   contrast as the other metric text regardless of stylesheet order. */
#gp-now-buying.gp-catalog-design .gpnb-delivered .gpnb-dword {
  color: var(--gp-catalog-metric-color);
}
#gp-now-buying.gp-catalog-design .gp-catalog-source-icon,
#gp-now-buying.gp-catalog-design .gp-catalog-source-icon svg {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
}
#gp-now-buying.gp-catalog-design .gpnb-online .gp-catalog-source-icon { color: var(--gp-catalog-accent); }
#gp-now-buying.gp-catalog-design .gpnb-delivered .gp-catalog-source-icon,
#gp-now-buying.gp-catalog-design .gpnb-delivered .gp-catalog-source-icon svg { color: var(--gp-catalog-primary); }
#gp-now-buying.gp-catalog-design .gp-catalog-review-short { display: none; }
#gp-now-buying.gp-catalog-design[aria-busy=true] .gp-catalog-metric-value { visibility: hidden; }
#gp-now-buying.gp-catalog-design .gpnb-rail { margin: 0; padding: 0; min-width: 0; }
#gp-now-buying.gp-catalog-design .gpnb-feedclip { padding-bottom: 0; position: relative; }
#gp-now-buying.gp-catalog-design .gpnb-feed { position: relative; z-index: 1; }
#gp-now-buying.gp-catalog-design .gpnb-tile { position: relative; width: 72px; margin-right: 8px; gap: 0; padding: 0; }
#gp-now-buying.gp-catalog-design .gp-catalog-sale-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  box-sizing: border-box;
  gap: 3px;
  padding: 6px 6px 5px;
  border-radius: 18px;
  background: rgba(40,39,39,.72);
  box-shadow: var(--gp-catalog-glass-shadow);
}
#gp-now-buying.gp-catalog-design .gp-catalog-image-shell {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 2px;
  background: none;
  border-radius: 16px;
  box-shadow: none;
}
#gp-now-buying.gp-catalog-design .gpnb-thumb {
  width: 56px;
  height: 56px;
  flex: none;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  background-color: transparent;
}
#gp-now-buying.gp-catalog-design .gpnb-price {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  max-width: 100%;
  min-height: 22px;
  min-width: 0;
  gap: 3px;
  padding: 2px 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--gp-catalog-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
#gp-now-buying.gp-catalog-design .gp-catalog-money {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}
#gp-now-buying.gp-catalog-design .gp-catalog-price-amount,
#gp-now-buying.gp-catalog-design .gp-catalog-price-unit { flex: none; }
#gp-now-buying.gp-catalog-design .gp-catalog-price-unit { color: var(--gp-catalog-accent); }
@supports (color: color-mix(in oklab, white, transparent)) {
  #gp-now-buying.gp-catalog-design .gpnb-title { background: color-mix(in oklab, var(--gp-catalog-accent) 15%, transparent); }
  #gp-now-buying.gp-catalog-design { --gp-catalog-metric-color: color-mix(in oklab, #fff 40%, transparent); }
  #gp-now-buying.gp-catalog-design .gp-catalog-sale-card { background: color-mix(in oklab, var(--gp-catalog-secondary) 72%, transparent); }
}
@supports (corner-shape: squircle) {
  #gp-now-buying.gp-catalog-design .gpnb-thumb,
  #gp-now-buying.gp-catalog-design .gp-catalog-image-shell { corner-shape: squircle; border-radius: 70px; }
}
@media (max-width: 400px) {
  #gp-now-buying.gp-catalog-design .gpnb-dword { display: none; }
  #gp-now-buying.gp-catalog-design .gp-catalog-review-short { display: inline; }
  #gp-now-buying.gp-catalog-design .gp-catalog-activity-head { gap: 6px; }
}
@media (max-width: 360px) {
  #gp-now-buying.gp-catalog-design .gpnb-online-cap { display: none; }
  #gp-now-buying.gp-catalog-design .gpnb-title { padding-inline: 6px; font-size: 12px; }
}

/* Approved Portals card styles and catalogue arrangement. Native pr owns search styling. */
.gp-catalog-tabs{display:flex;align-items:center;gap:12px;margin:14px 0 8px;min-height:32px}
/* The bonus already contributes 8px below its border. Add only 4px here
   so both sides of the optional bonus have the same 12px gap. */
[data-gp-catalog-view]>.gp-catalog-bonus+.gp-thematic-catalog>.gp-catalog-tabs{margin-top:4px}
/* The native toolbar's translated safe-area mask covers the preceding tabs
   once Telegram iOS supplies its inset. At sticky top:0 the mask is already
   outside the clipped scroller. Remove just that redundant mask here; retain
   the toolbar's own background and stacking order while scrolling. */
.gp-catalog-native-controls>.sticky>.absolute.bg-background.-translate-y-full.top-0{display:none}
.gp-catalog-tab{position:relative;padding:0;border:0;background:none;color:#393939;font:inherit;font-size:clamp(20px,5.6vw,24px);font-weight:700;line-height:32px;white-space:nowrap;cursor:pointer}
.gp-catalog-tab[aria-selected=true]{color:#fff}
.gp-catalog-collections-tab{display:inline-block;padding-right:18px}
.gp-catalog-new{position:absolute;right:0;top:-4px;display:block;width:30px;height:12px;transform:rotate(8deg);pointer-events:none}
.gp-catalog-new svg{display:block;width:100%;height:100%}
/* The old PlayerOK stylesheet made price controls inert. Restore interaction
   only for enabled controls that explicitly open the external storefront. */
body[data-gp-route="play"] div.bg-secondary\/65.cursor-pointer.flex.flex-col [data-slot="button"].bg-primary[data-gp-store-purchase="playerok"]:enabled,
body[data-gp-route="play"] [data-vaul-drawer][data-state="open"] button[data-gp-store-purchase="playerok"]:enabled,
body[data-gp-route="play"] [role="dialog"][data-state="open"] button[data-gp-store-purchase="playerok"]:enabled{pointer-events:auto!important;cursor:pointer!important}
.gp-catalog-collection-search{margin:0 0 16px;padding-top:8px}
.gp-catalog-collection-search svg{width:16px;height:16px}
.gp-catalog-error{font-size:13px;line-height:18px;color:var(--secondary-foreground);margin:8px 0}
[data-gp-catalog-view=collections]>.grid,[data-gp-catalog-view=collections]>.flex.bg-input\/60,[data-gp-catalog-view=collections]>.gp-catalog-native-controls{display:none!important}
.gp-thematic-catalog [hidden],.gp-catalog-native-controls[hidden]{display:none!important}
#gp-thematic-collections{--primary-foreground:#fff;--secondary-foreground:#6d6d71;--accent:#49df64;--secondary:#282727;--muted:#3a3a3a;--glass-shadow:inset 0 0 0 1px rgba(255,255,255,.03),inset 1.8px 3px 0 -2px rgba(255,255,255,.27),inset -2px -2px 0 -2px rgba(255,255,255,.24),inset -3px -8px 1px -6px rgba(255,255,255,.18),inset -.3px -1px 4px 0 rgba(0,0,0,.24),inset -1.5px 2.5px 0 -2px rgba(0,0,0,.4),inset 0 3px 4px -2px rgba(0,0,0,.4),inset 2px -6.5px 1px -4px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.2),0 6px 16px 0 rgba(0,0,0,.16);padding:0 0 110px;margin:0;min-height:360px;text-align:left;color:var(--primary-foreground);font-size:14px;line-height:18px}
#gp-thematic-collections *{box-sizing:border-box}
#gp-thematic-collections button{font-family:inherit;cursor:pointer}
#gp-thematic-collections button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#gp-thematic-collections .cc-button{display:flex;border:0;text-align:left;color:inherit;height:auto;margin:0;min-width:0;width:100%}
#gp-thematic-collections .cc-icon{display:inline-flex;flex:none;width:16px;height:16px;align-items:center;justify-content:center;color:var(--secondary-foreground)}
#gp-thematic-collections .cc-icon svg{display:block;width:100%;height:100%}
#gp-thematic-collections .cc-flag{margin-left:5px;vertical-align:middle}
#gp-thematic-collections .cc-name{display:block;font-size:17px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
#gp-thematic-collections .cc-count,#gp-thematic-collections .cc-description,#gp-thematic-collections .cc-gift-number{display:block;font-size:13px;line-height:18px;color:var(--secondary-foreground)}
#gp-thematic-collections .cc-image{display:block;object-fit:contain;max-width:100%;height:auto;border-radius:16px}
#gp-thematic-collections .cc-image-fallback{aspect-ratio:1;background:var(--muted)}
#gp-thematic-collections .cc-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
#gp-thematic-collections .cc-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,calc((100% - 12px)/2)),1fr));gap:12px}
#gp-thematic-collections .cc-card,#gp-thematic-collections .cc-gift-full{background:var(--secondary);box-shadow:var(--glass-shadow);border-radius:26px}
@supports(color:color-mix(in lab,red,red)){#gp-thematic-collections .cc-card,#gp-thematic-collections .cc-gift-full{background:color-mix(in oklab,var(--secondary)65%,transparent)}}
#gp-thematic-collections .cc-card{flex-direction:column;gap:10px;padding:12px}
#gp-thematic-collections .cc-mosaic{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;aspect-ratio:1}
#gp-thematic-collections .cc-mosaic .cc-image{width:100%;height:100%;min-height:0;min-width:0;aspect-ratio:1}
#gp-thematic-collections .cc-mosaic .cc-cover-image{grid-column:1/-1;grid-row:1/-1}
#gp-thematic-collections .cc-card-bottom{display:flex;align-items:center;gap:4px;width:100%}
#gp-thematic-collections .cc-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,calc((100% - 16px)/3)),1fr));gap:8px}
#gp-thematic-collections .cc-gift{display:flex;flex-direction:column;min-width:0}
#gp-thematic-collections .cc-gift>.cc-image{width:100%;aspect-ratio:1}
#gp-thematic-collections .cc-gift-full{padding:8px;width:auto;gap:4px;border:0;text-align:left;color:inherit}
#gp-thematic-collections .cc-gift-full>.cc-image{margin-bottom:4px}
#gp-thematic-collections .cc-gift-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
#gp-thematic-collections .cc-gift-name{font-size:14px;font-weight:600}
#gp-thematic-collections .cc-gift-name,#gp-thematic-collections .cc-gift-number{overflow-wrap:anywhere;line-height:18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#gp-thematic-collections .cc-gift-price{font-size:13px;font-weight:600;color:var(--accent);text-align:left;line-height:18px;height:18px;white-space:nowrap}
#gp-thematic-collections .cc-price-status{font-size:12px;line-height:18px;color:var(--secondary-foreground)}
#gp-thematic-collections .cc-price-status:empty{display:none}
#gp-thematic-collections .cc-price-status[data-reserved]:empty{display:block;min-height:18px}
#gp-thematic-collections .cc-load-sentinel{height:1px}
#gp-thematic-collections .cc-detail-heading{display:flex;gap:12px;align-items:center;margin:16px 0 12px}
#gp-thematic-collections .cc-detail-heading .cc-info{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
#gp-thematic-collections .cc-empty{padding:36px 12px;text-align:center}
#gp-thematic-collections .cc-empty p{margin:0 0 10px}
#gp-thematic-collections .cc-open{border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;min-height:28px}
@media(max-width:328px){#gp-thematic-collections .cc-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.gp-catalog-tabs{gap:10px}}
@media(prefers-reduced-motion:reduce){#gp-thematic-collections *{scroll-behavior:auto!important}}

/* Resale banners are real links. Keep the same reserved geometry and existing
   panorama artwork as the native div slide; element semantics must not change
   the visual box or let the foreground image cover the catalogue below it. */
[data-slot="carousel"].relative.px-4.mb-3.z-11
  [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl {
  aspect-ratio: 1968 / 528;
  background-color: rgba(255,255,255,.04);
}

@media (min-width: 701px) {
  [data-slot="carousel"].relative.px-4.mb-3.z-11
    [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl {
    aspect-ratio: auto !important;
    height: calc(688px * 528 / 1968);
    min-height: calc(688px * 528 / 1968);
    background-color: var(--gp-banner-bg, rgb(20,55,42));
    background-image: url("/assets/gp-pano-giftpay.webp"), url("/assets/gp-banner-cont-green.webp");
    background-repeat: no-repeat, repeat-x;
    background-position: left center, left center;
    background-size: auto 100%, auto 100%;
  }
  [data-slot="carousel"].relative.px-4.mb-3.z-11
    [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl:has(img[src*="gp-banner-instant"]) {
    background-image: url("/assets/gp-pano-instant.webp?v=auto"), url("/assets/gp-banner-cont-purple.webp");
    background-color: rgb(28,20,38);
  }
  [data-slot="carousel"].relative.px-4.mb-3.z-11
    [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl:has(img[src*="funpay-banner"]) {
    background-image: url("/assets/gp-pano-funpay.webp"), url("/assets/gp-banner-cont-green.webp");
  }
  [data-slot="carousel"].relative.px-4.mb-3.z-11
    [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl:has(img[src*="playerok-banner"]) {
    background-image: url("/assets/gp-pano-playerok.webp"), url("/assets/gp-banner-cont-green.webp");
  }
  [data-slot="carousel"].relative.px-4.mb-3.z-11
    [data-slot="carousel-item"] > a.rounded-xl.w-full.overflow-hidden.squircle-2xl > img {
    width: auto !important;
    max-width: 688px;
    height: auto !important;
    opacity: 0 !important;
  }
}
