/* Gamer Store: product page purchase UI. Colours come from the theme variables via the .gsx wrapper. */
.gsx-hide { display: none !important; }
.gsx-service { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; width: 100%; }
.gsx-service [hidden], .gsx-service-extra [hidden] { display: none !important; }

.gsx-switch { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--gsx-surface2); }
.gsx-switch__btn { flex: 1 1 0; min-height: 46px; border: 0; border-radius: 999px; background: transparent; color: var(--gsx-text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.gsx-switch__btn[aria-pressed="true"] { background: var(--gsx-primary); color: var(--gsx-on-primary); }
.gsx-switch__btn[data-gsx-mode="premium"][aria-pressed="true"] { background: var(--gsx-amber); color: var(--gsx-on-amber); }
.gsx-switch__btn:focus-visible, .gsx-link-btn:focus-visible, .gsx-opt input:focus-visible, .gsx-service__submit:focus-visible { outline: 3px solid var(--gsx-primary); outline-offset: 2px; }

.gsx-service__sale-label { margin: 0 0 8px; font-weight: 700; font-size: 14px; color: var(--gsx-muted); }
.gsx-service__basic { display: flex; flex-direction: column; gap: 18px; }
.gsx-service__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gsx-service__title { margin: 0; font-size: 16px; font-weight: 700; }
.gsx-link-btn { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--gsx-primary); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

.gsx-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gsx-extras .gsx-service__title { margin-bottom: 10px; }
.gsx-opt { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 16px; border: 2px solid var(--gsx-border); border-radius: 16px; background: var(--gsx-surface); cursor: pointer; }
.gsx-opt.is-selected { border-color: var(--gsx-primary); background: var(--gsx-surface2); }
.gsx-opt input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--gsx-primary); }
.gsx-opt__text { flex: 1 1 auto; min-width: 0; }
.gsx-opt__name { display: block; font-weight: 700; }
.gsx-opt__desc { display: block; margin-top: 2px; color: var(--gsx-muted); font-size: 13px; }
.gsx-opt__price { flex: 0 0 auto; text-align: right; font-weight: 700; }
.gsx-opt__old { display: block; color: var(--gsx-muted); font-size: 12px; font-weight: 500; text-decoration: line-through; }
.gsx-opt__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--gsx-amber); color: var(--gsx-on-amber); }

.gsx-total { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--gsx-border); border-radius: 20px; background: var(--gsx-surface); box-shadow: var(--shadow, none); }
.gsx-total__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gsx-total__lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; color: var(--gsx-muted); }
.gsx-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--gsx-border); }
.gsx-total__label { font-weight: 700; }
.gsx-total__amount { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.gsx-total__points { margin: 0; color: var(--gsx-muted); font-size: 13px; font-weight: 600; }
.gsx-service__hint { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--gsx-surface2); font-size: 14px; font-weight: 600; border-left: 4px solid var(--gsx-coral); }
.gsx-service__hint.is-ok { border-left-color: var(--gsx-mint); }
.gsx-service__submit { min-height: 56px; font-size: 17px; }
.gsx-service__trust { margin: 0; padding: 4px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; color: var(--gsx-muted); font-size: 13px; font-weight: 600; }
.gsx-service__trust li::before { content: "\2713"; margin-right: 6px; color: var(--gsx-mint); font-weight: 700; }

.gsx-service-extra { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; }
.gsx-premium { display: block; margin: 0; padding: 0; border: 0; background: none; }
.gsx-premium p { margin: 0; opacity: .88; line-height: 1.55; }
.gsx-premium__tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--gsx-amber); color: var(--gsx-on-amber); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.gsx-premium__title, .gsx-custom__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gsx-premium__title { color: inherit; }
.gsx-custom { padding: 18px 20px; border: 1px dashed var(--gsx-border); border-radius: 20px; background: var(--gsx-surface); }
.gsx-custom__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gsx-custom__head > div { flex: 1 1 220px; min-width: 0; }
.gsx-custom__head p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.gsx-custom__body { margin-top: 14px; }
.gsx-custom--inline { margin-top: 16px; }

@media (prefers-reduced-motion: no-preference) {
	.gsx-opt { transition: border-color .15s, background-color .15s; }
}

.gsx-quote-note { margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(127,127,127,.5); }
.gsx-quote-note p { margin: 0 0 10px; }
.gsx-quote-note[hidden], .gsx-service__submit[hidden] { display: none !important; }

/* Extras: compact grid, coloured icons, hover help */
.gsx-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gsx-extras .gsx-service__title { grid-column: 1 / -1; margin-bottom: 0; }
.gsx-extras .gsx-opt--extra { flex-wrap: nowrap; gap: 8px 10px; min-height: 0; padding: 12px; border-radius: 14px; align-items: center; position: relative; }
.gsx-extras .gsx-opt--extra .gsx-opt__icon { width: 32px; height: 32px; border-radius: 10px; color: #fff; background: var(--x, #6d5efc); }
.gsx-extras .gsx-opt--extra .gsx-opt__icon svg { width: 20px; height: 20px; }
.gsx-extras .gsx-opt--extra .gsx-opt__text { flex: 1 1 auto; min-width: 0; }
.gsx-extras .gsx-opt--extra .gsx-opt__name { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.gsx-extras .gsx-opt--extra .gsx-opt__price { flex: 0 0 auto; margin-left: auto; text-align: right; font-size: 13px; white-space: nowrap; }
.gsx-opt--x-priority { --x: #f59e0b; }
.gsx-opt--x-order { --x: #3b82f6; }
.gsx-opt--x-skip { --x: #ef4444; }
.gsx-opt--x-intervals { --x: #14b8a6; }
.gsx-opt--x-timestamps { --x: #8b5cf6; }
.gsx-opt--x-duration { --x: #ec4899; }
.gsx-opt--x-unobtainable { --x: #22c55e; }
.gsx-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gsx-muted); color: var(--gsx-muted); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; }
.gsx-tip:hover, .gsx-tip:focus, .gsx-tip.is-open { color: var(--gsx-primary); border-color: var(--gsx-primary); outline: none; }
.gsx-tip::after { content: attr(data-tip); position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 10px; background: #14161f; color: #fff; border: 1px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; }
.gsx-tip:hover::after, .gsx-tip:focus::after, .gsx-tip.is-open::after { opacity: 1; visibility: visible; }
@media (max-width: 480px) { .gsx-extras { grid-template-columns: 1fr; } }

.gsx-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px dashed var(--gsx-border); border-radius: 20px; background: var(--gsx-surface); margin-top: 16px; }
.gsx-contact__text { flex: 1 1 240px; min-width: 0; }
.gsx-contact__text p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.gsx-contact__icons { display: flex; gap: 10px; }
.gsx-contact__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: #444; transition: transform .15s, filter .15s; }
.gsx-contact__icon:hover, .gsx-contact__icon:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }
.gsx-contact__icon--discord { background: #5865f2; }
.gsx-contact__icon--whatsapp { background: #25d366; }
.gsx-contact__icon--email { background: #ef4444; }
.gsx-contact__icon--facebook { background: #1877f2; }
.gsx-custom[hidden] { display: none !important; }

/* Tighter layout, closer to the price */
.gsx-service { gap: 12px; margin-bottom: 14px; }
.gsx-service__basic { gap: 12px; }
.gsx-extras { gap: 8px; }
.gsx-extras .gsx-extras__head { grid-column: 1 / -1; }
.gsx-opts { margin-top: 6px; gap: 8px; }
.gsx-opt { padding: 12px 14px; min-height: 0; }
.gsx-contact, .gsx-custom--inline { margin-top: 8px; padding: 14px 16px; }
.gsx-service-extra { gap: 12px; margin-bottom: 14px; }
.gsx-wc-summary { gap: 10px !important; }
.gsx-wc-summary > .gsx-wc-price { margin-bottom: 0 !important; }
.gsx-custom.is-quote .gsx-custom__head { display: none; }
.gsx-custom.is-quote .gsx-custom__body { margin-top: 0; }

/* Achievements and gamerscore */
.gsx-stats { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gsx-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(127,127,127,.18); white-space: nowrap; }
.gsx-stat--ach { color: #ffc83d; }
.gsx-stat--gs { color: #2ee66b; }
.gsx-stat--gs b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #2ee66b; color: #04130a; font-size: 10px; line-height: 1; }
.gsx-stats--opt { flex: 0 0 auto; margin-left: auto; margin-right: 8px; }
.gsx-stats--big .gsx-stat { font-size: 14px; padding: 5px 12px; }
.gsx-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.gsx-totals__label { font-size: 13px; font-weight: 600; color: var(--gsx-muted); }
.gsx-short { margin: 0; color: var(--gsx-muted, #9aa); font-size: 15px; line-height: 1.55; }
.gsx-short p { margin: 0; }
@media (max-width: 560px) { .gsx-opt .gsx-stats--opt { order: 5; flex: 1 0 100%; margin: 0; } }