/*
 * TipArena — the premium states. Everything here styles markup the Pro plugin
 * hooks into the core plugin's arena pages (locked picks, prices, plan pickers,
 * the subscribe / All-Access panels, the paywall bar). Loads on top of the core
 * arena.css and reuses its tokens; core itself never references these classes.
 */

.tsarena .tsa-premium { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-gold); }
.tsarena .tsa-premium .msr-a { font-size: 13px; }
/* a flex row of its own rather than an inline one: inline sits in a line box,
   and that box's leading made the card two pixels taller than the design */
.tsarena .tsa-pickbox__locked { display: flex; width: fit-content; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; line-height: normal; color: var(--a-faint); }
.tsarena .tsa-pickbox__locked .msr-a { font-size: 15px; }
.tsarena .tsa-premium--boxed { background: rgba(154, 106, 0, .1); border-radius: 4px; padding: 4px 9px; }
/* the next-pick card in the hero wears the chip unboxed, as the design does */
.tsarena .tsa-nextpick__top .tsa-premium--boxed { background: none; padding: 0; }
.dark .tsarena .tsa-premium--boxed { background: rgba(239, 201, 63, .12); }
.tsarena .tsa-featpick__pickrow .tsa-pickbox__locked { font-size: 16px; }
.tsarena .tsa-featpick__pickrow .tsa-pickbox__locked .msr-a { font-size: 16px; }
.tsarena .tsa-plan-pro { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--a-gold); background: rgba(154, 106, 0, .1); border-radius: 4px; padding: 4px 9px; }
.dark .tsarena .tsa-plan-pro { background: rgba(239, 201, 63, .12); }
.tsarena .tsa-tipcard__price { display: flex; align-items: baseline; gap: 5px; }
.tsarena .tsa-tipcard__amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px; }
.tsarena .tsa-tipcard__amount--free { color: var(--a-pos); }
.tsarena .tsa-tipcard__per { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--a-faint); }
.tsarena .tsa-featband__panel { background: var(--a-surface); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 16px; position: relative; box-shadow: 0 22px 50px rgba(6, 10, 24, .36); color: var(--a-ink); }
.tsarena .tsa-featband__price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--a-line); }
.tsarena .tsa-featband__amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.tsarena .tsa-featband__per { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-faint); }
.tsarena .tsa-featband__feature { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--a-muted); }
.tsarena .tsa-featband__panel .tsa-plan__check { background: var(--a-brand-soft); color: var(--a-brand-ink); }
.tsarena .tsa-periods { display: flex; gap: 6px; background: var(--a-raised); border: 1px solid var(--a-line); padding: 5px; border-radius: 10px; }
.tsarena .tsa-period { flex: 1; text-align: center; padding: 9px; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .12s; color: var(--a-muted); }
.tsarena .tsa-period.is-active { background: var(--a-brand); color: var(--a-brand-fg); }
.tsarena .tsa-featband__cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; font-size: 15px; padding: 14px; border-radius: 8px; cursor: pointer; }
.tsarena .tsa-featband__cta .msr-a { font-size: 17px; }
.tsarena .tsa-featband__fine { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-faint); text-align: center; }
.tsarena .tsa-planselect { appearance: none; -webkit-appearance: none; width: 100%; background: var(--a-raised); border: 1px solid var(--a-line); border-radius: 10px; padding: 11px 36px 11px 13px; font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; color: var(--a-ink); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7689' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.tsarena .tsa-planselect:focus { outline: none; border-color: var(--a-brand); }
.tsarena .tsa-planselect--mini { width: auto; padding: 5px 26px 5px 9px; font-size: 11px; border-radius: 7px; background-position: right 9px center; margin-left: 6px; vertical-align: middle; }
.tsarena .tsa-psel--locked { background: var(--a-lock-bg); border-color: var(--a-gold); color: #fff; box-shadow: 0 26px 60px rgba(20, 35, 90, .34); }
.tsarena .tsa-plockchip { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #0C1220; background: var(--a-gold); border-radius: 4px; padding: 4px 9px; }
.tsarena .tsa-plockchip .msr-a { font-size: 13px; }
.tsarena .tsa-psel--locked .tsa-psel__note { color: rgba(255, 255, 255, .7); max-width: 420px; margin-top: 14px; }
.tsarena .tsa-pblur { filter: blur(8px); user-select: none; }
.tsarena .tsa-psel--locked .tsa-psel__odds { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.tsarena .tsa-psel--locked .tsa-psel__oddsnote { color: rgba(255, 255, 255, .55); }
.tsarena .tsa-psel--locked .tsa-pstats { border-top-color: rgba(255, 255, 255, .16); }
.tsarena .tsa-psel--locked .tsa-pstat__num--hot { color: var(--a-panel-hot); }
.tsarena .tsa-pstat__num--blur { filter: blur(6px); user-select: none; }
.tsarena .tsa-psel--locked .tsa-pstat__label { color: rgba(255, 255, 255, .55); }
.tsarena .tsa-pctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.tsarena .tsa-pctas .tss_buy_pick,
.tsarena .tsa-pctas > a,
.tsarena .tsa-pctas > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: auto; background: #fff; color: #0C1220; border: 0; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px 24px; cursor: pointer; box-shadow: none; text-decoration: none; }
.tsarena .tsa-pctas > a { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); color: #fff; }
.tsarena .tsa-pctas > a:hover { color: #fff; }
.tsarena .tsa-pctas .msr-a,
.tsarena .tsa-pctas .material-symbols-outlined { font-size: 17px; }
.tsarena .tsa-pctas > div { display: none; }
.tsarena .tsa-panalysis__body--locked { max-height: 64px; overflow: hidden; filter: blur(5px); user-select: none; margin-bottom: 18px; mask-image: linear-gradient(180deg, #000 0%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.tsarena .tsa-ppaywall { margin-top: 4px; padding: 20px 22px; border: 1px dashed var(--a-line2); border-radius: 12px; background: var(--a-raised); display: flex; align-items: center; gap: 16px; }
.tsarena .tsa-ppaywall__icon { font-size: 24px; color: var(--a-gold); flex: none; }
.tsarena .tsa-ppaywall__body { flex: 1; min-width: 0; }
.tsarena .tsa-ppaywall__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 19px; text-transform: uppercase; }
.tsarena .tsa-ppaywall__sub { font-size: 13.5px; color: var(--a-muted); margin-top: 3px; }
.tsarena .tsa-ppaywall__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--a-brand); color: var(--a-brand-fg); font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 8px; cursor: pointer; flex: none; }
.tsarena .tsa-ppaywall__cta .msr-a { font-size: 16px; }
.tsarena .tsa-paccess--locked { background: var(--a-lock-bg); border: 0; color: #fff; box-shadow: 0 26px 60px rgba(20, 35, 90, .34); }
.tsarena .tsa-paccess__glow { position: absolute; inset: 0; background: var(--a-lock-glow); pointer-events: none; }
.tsarena .tsa-paccess--locked .tsa-pkicker { color: var(--a-gold); }
.tsarena .tsa-paccess--locked .tsa-paccess__body { color: rgba(255, 255, 255, .72); }
.tsarena .tsa-paccess--locked .tsa-paccess__item { color: rgba(255, 255, 255, .88); }
.tsarena .tsa-paccess--locked .tsa-paccess__item .msr-a { color: #C9F231; }
.tsarena .tsa-paccess--locked .tsa-paccess__note { color: rgba(255, 255, 255, .55); }
.tsarena .tsa-paccess .tsa-pctas { flex-direction: column; gap: 10px; margin-top: 0; }
.tsarena .tsa-paccess .tsa-pctas .tss_buy_pick,
.tsarena .tsa-paccess .tsa-pctas > a,
.tsarena .tsa-paccess .tsa-pctas > button { width: 100%; font-size: 14.5px; padding: 13px; }
.tsarena .tsa-pother__tile--locked { background: var(--a-gold-soft); color: var(--a-gold); }
.tsarena .tsa-ppromo { position: relative; overflow: hidden; background: var(--a-lock-bg); border-radius: 16px; padding: 22px; box-shadow: 0 22px 50px rgba(20, 35, 90, .28); color: #fff; }
.tsarena .tsa-ppromo__glow { position: absolute; inset: 0; background: var(--a-lock-glow); pointer-events: none; }
.tsarena .tsa-ppromo__inner { position: relative; }
.tsarena .tsa-ppromo__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.tsarena .tsa-ppromo__icon .msr-a { font-size: 19px; color: var(--a-gold); }
.tsarena .tsa-ppromo__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 23px; text-transform: uppercase; margin: 14px 0 8px; line-height: 1.05; }
.tsarena .tsa-ppromo__text { font-size: 13px; color: rgba(255, 255, 255, .72); margin-bottom: 18px; line-height: 1.55; }
.tsarena .tsa-ppromo__cta { display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; color: #0C1220; border: 0; font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: 8px; cursor: pointer; }
.tsarena .tsa-prow__pick--locked { color: var(--a-faint); }
.tsarena .tsa-prow__odds--locked { background: var(--a-raised); border-color: var(--a-line2); color: var(--a-ink); }
.tsarena .tsa-prow__avatar--pro { border: 2px solid var(--a-brand); }
.tsarena .tsa-roscta--pro { background: var(--a-brand); color: var(--a-brand-fg); border: 0; }
.tsarena .tsa-lb__avatar--pro { border: 2px solid var(--a-brand); }
.tsarena .tsa-rostag--pro { background: var(--a-brand); color: var(--a-brand-fg); }
.tsarena .tsa-roscard__avatar--pro { border: 2px solid var(--a-brand); }
    .tsarena .tsa-ppaywall { flex-direction: column; align-items: flex-start; }

/* ============================== Tipster profile — subscribe panel ============================== */
/* `Portal Demo Tipster Profile.dc.html`, the right column of the header. */
.tsarena .tsa-procard__head .tsa-premium { flex: none; }
.tsarena .tsa-prof__nameline .tsa-ptipster__pro { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--a-gold); background: var(--a-gold-soft); border-radius: 4px; padding: 5px 10px; }
.tsarena .tsa-prof-panel { position: relative; overflow: hidden; background: var(--a-panel-bg); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 26px 60px rgba(20, 35, 90, .34); color: #fff; }
.tsarena .tsa-prof-panel__glow { position: absolute; inset: 0; background: var(--a-panel-glow); pointer-events: none; }
.tsarena .tsa-prof-panel > * { position: relative; }
.tsarena .tsa-prof-panel__kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .58); }
.tsarena .tsa-prof-panel__price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.tsarena .tsa-prof-panel__amount { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -.02em; }
.tsarena .tsa-prof-panel__per { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, .58); }
.tsarena .tsa-prof-panel__pills { display: flex; gap: 6px; background: rgba(255, 255, 255, .1); padding: 5px; border-radius: 10px; }
.tsarena .tsa-prof-panel__pill { flex: 1; text-align: center; padding: 8px; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .12s; color: rgba(255, 255, 255, .65); }
.tsarena .tsa-prof-panel__pill.is-active { background: #fff; color: #0C1220; }
.tsarena .tsa-prof-panel__select { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.tsarena .tsa-prof-panel__features { display: flex; flex-direction: column; gap: 11px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 16px; }
.tsarena .tsa-prof-panel__feature { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255, 255, 255, .88); }
.tsarena .tsa-prof-panel__check { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--a-brand); color: var(--a-brand-fg); }
.tsarena .tsa-prof-panel__check .msr-a { font-size: 12px; }
.tsarena .tsa-prof-panel__text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.tsarena .tsa-prof-panel__text p { margin: 0 0 8px; }
.tsarena .tsa-prof-panel__cta { display: flex; align-items: center; justify-content: center; background: #fff; color: #0C1220; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 8px; cursor: pointer; border: 0; font-family: inherit; width: 100%; }
.tsarena .tsa-prof-panel__cta[disabled] { opacity: .7; cursor: default; }
.tsarena .tsa-prof-panel__single { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: 8px; cursor: pointer; }
.tsarena .tsa-prof-panel__fine { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); text-align: center; }

/* ============================== Live feed ============================== */
/* `Portal Demo Live Feed.dc.html`: a locked event withholds its selection and
   drops the brand odds plate for a quiet one, and the sidebar's All-Access card
   is the archive's promo on this page's panel gradient. */
.tsarena .tsa-live-pick__sel--locked { color: var(--a-faint); }
.tsarena .tsa-live-pick__sel--locked .msr-a { font-size: 15px; flex: none; }
.tsarena .tsa-live-pick__odds--locked { background: var(--a-surface); color: var(--a-ink); border: 1px solid var(--a-line2); }
.tsarena .tsa-live-promo { background: var(--a-panel-bg); }
.tsarena .tsa-live-promo .tsa-ppromo__glow { background: var(--a-panel-glow); }

/* ===================== Phones: the premium surfaces =====================
   The parts the core sheet is not allowed to touch — CoreBoundaryTest keeps
   .tsa-pctas, .tsa-psel--locked and .tsa-ppromo in this file. Same two
   breakpoints as arena.css. Kept above the checkout section, which is scanned
   selector-by-selector by DesignSkinTest. */
@media (max-width: 720px) {
    .tsarena .tsa-pctas { flex-direction: column; align-items: stretch; }
    .tsarena .tsa-pctas > * { width: 100%; justify-content: center; }
    .tsarena .tsa-ppromo__inner { padding: 24px; }
    .tsarena .tsa-paccess { padding: 24px; }
    .tsarena .tsa-planselect { max-width: 100%; }
    .tsarena .tsa-prof-panel__pills { flex-wrap: wrap; }
}

/* ============================ Checkout popup ============================ */
/* `Portal Demo Checkout.dc.html`. The popup is the same .tsschk markup every
   design shares (templates/tipster_checkout.php for a site package or a
   tipster, templates/checkout_modern.php for one match); only its dress
   changes here. Scoped to the body class core sets under the TipArena chrome,
   so each rule outranks the portal skin in components.css by one class and no
   selector, id, hook or script the popup runs on is touched. Every value is
   the design's own, through the tokens on body.tsarena-scope. */
.tsarena-scope main.tsschk { background: rgba(12, 18, 32, .55); backdrop-filter: none; font-family: 'Barlow', sans-serif; line-height: normal; padding: 48px 16px 64px; }
.dark .tsarena-scope main.tsschk { background: rgba(0, 0, 0, .72); }
.tsarena-scope .tsschk__dialog { max-width: 560px; }
.tsarena-scope .tsschk__card { background: var(--a-surface); color: var(--a-ink); border-radius: 20px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .55); }
/* the navy head */
.tsarena-scope .tsschk__head { padding: 28px 32px 26px; background: var(--a-lock-bg); color: #fff; }
.tsarena-scope .tsschk__head::before { background: radial-gradient(420px 200px at 85% -10%, rgba(36, 71, 240, .5), transparent 72%); }
.dark .tsarena-scope .tsschk__head::before { background: radial-gradient(420px 200px at 85% -10%, rgba(201, 242, 49, .16), transparent 72%); }
.tsarena-scope .tsschk__flag { gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(0, 0, 0, .18); border: 1px solid var(--a-gold); color: var(--a-gold); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.dark .tsarena-scope .tsschk__flag { border-color: var(--a-gold); }
.tsarena-scope .tsschk__flag .material-symbols-outlined { font-size: 14px; }
.tsarena-scope .tsschk__head-row { display: block; }
.tsarena-scope .tsschk__close { position: absolute; top: 0; right: 0; }
/* 16px under the close, which stands 10px taller than the badge beside it */
.tsarena-scope .tsschk__title { margin: 26px 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.tsarena-scope .tsschk__subline { margin: 0; font-size: 14.5px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.tsarena-scope .tsschk__subline .tss_cart_tipster { color: #fff; font-weight: 600; }
.tsarena-scope .tsschk__close { z-index: 1; width: 38px; height: 38px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.tsarena-scope .tsschk__close .material-symbols-outlined { font-size: 19px; }
.tsarena-scope .tsschk__tipster { gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.tsarena-scope .tsschk__tavatar { width: 44px; height: 44px; border-radius: 10px; }
.tsarena-scope .tsschk__tavatar--txt { background: var(--a-brand); color: var(--a-brand-fg); font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; }
.tsarena-scope .tsschk__tname { gap: 7px; font-size: 15.5px; font-weight: 600; }
.tsarena-scope .tsschk__tname .tss_cart_tipster { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsarena-scope .tsschk__tname .material-symbols-outlined { font-size: 16px; color: var(--a-panel-hot); flex: none; }
.tsarena-scope .tsschk__tyield-val { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: #43DE8B; }
.tsarena-scope .tsschk__tyield-cap { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 400; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
/* the match tile the single-match popup draws where a tipster's photo goes */
.tsarena-scope .tsschk__mtile { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: var(--a-panel-hot); }
.tsarena-scope .tsschk__tcap { margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 400; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
/* the body: mono eyebrows, 22px between blocks */
.tsarena-scope .tsschk__body { padding: 26px 32px 30px; }
.tsarena-scope .tsschk__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .14em; color: var(--a-faint); }
.tsarena-scope .tsschk__label--gap { margin-top: 22px; }
.tsarena-scope .tsschk__coupon { gap: 10px; margin-top: 9px; }
.tsarena-scope .tsschk__cfield { gap: 9px; padding: 12px 14px; border-radius: 10px; background: var(--a-raised); border: 1px solid var(--a-line2); }
.tsarena-scope .tsschk__cfield:focus-within { border-color: var(--a-brand); }
.tsarena-scope .tsschk__cfield .material-symbols-outlined { font-size: 17px; color: var(--a-faint); }
.tsarena-scope input.tsschk__cinput { font-size: 14px; font-weight: 400; color: var(--a-ink); line-height: normal; }
.tsarena-scope input.tsschk__cinput::placeholder { color: var(--a-faint); }
.tsarena-scope button.tsschk__capply { padding: 12px 22px; border-radius: 10px; background: var(--a-brand-soft); border: 1px solid var(--a-brand); color: var(--a-brand-ink); font-size: 14px; font-weight: 700; line-height: normal; }
.tsarena-scope button.tsschk__capply:hover { background: var(--a-brand); border-color: var(--a-brand); color: var(--a-brand-fg); }
.tsarena-scope .tsschk__cmsg { margin: 8px 0 0; font-size: 12.5px; font-weight: 500; }
.tsarena-scope .tsschk__details { margin-top: 9px; border: 1px solid var(--a-line); border-radius: 12px; }
.tsarena-scope .tsschk__drow { gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--a-line); }
.tsarena-scope .tsschk__drow:last-child { border-bottom: 0; }
.tsarena-scope .tsschk__dlabel { gap: 9px; font-size: 14px; font-weight: 400; color: var(--a-muted); }
.tsarena-scope .tsschk__dlabel .material-symbols-outlined { font-size: 17px; color: var(--a-brand-ink); }
.tsarena-scope .tsschk__dval { font-size: 14px; font-weight: 600; color: var(--a-ink); }
.tsarena-scope .tsschk__dval.tss_cart_price { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.tsarena-scope .tsschk__save { gap: 16px; margin-top: 10px; padding: 11px 16px; border-radius: 10px; background: var(--a-raised); border: 1px solid var(--a-line); }
.tsarena-scope .tsschk__save .tss-saving-label { gap: 9px; font-size: 13.5px; font-weight: 400; color: var(--a-muted); }
.tsarena-scope .tsschk__save .tss-saving-label .material-symbols-outlined { font-size: 17px; }
.tsarena-scope .tsschk__save .tss-saving-amount { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 400; color: var(--a-faint); }
.tsarena-scope .tsschk__save-note { font-size: 13px; font-weight: 500; color: var(--a-pos); }
.tsarena-scope .tsschk__save[data-has-discount="true"] { background: var(--a-pos-soft); border-color: var(--a-pos); }
.tsarena-scope .tsschk__save[data-has-discount="true"] .tss-saving-label,
.tsarena-scope .tsschk__save[data-has-discount="true"] .tss-saving-amount { color: var(--a-pos); }
/* the final price, on the same navy as the head */
.tsarena-scope .tsschk__final { position: relative; overflow: hidden; gap: 16px; margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: var(--a-lock-bg); color: #fff; }
.tsarena-scope .tsschk__final::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 85% -10%, rgba(36, 71, 240, .5), transparent 72%); }
.dark .tsarena-scope .tsschk__final::before { background: radial-gradient(420px 200px at 85% -10%, rgba(201, 242, 49, .16), transparent 72%); }
.tsarena-scope .tsschk__final > * { position: relative; }
.tsarena-scope .tsschk__final-cap { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
.tsarena-scope .tsschk__final-sub { margin-top: 3px; font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.tsarena-scope .tsschk__final-right .tss_cart_final_price,
.tsarena-scope .tsschk__final-right .tss_cart_final_price_p { font-family: 'JetBrains Mono', monospace; font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: normal; color: #fff; }
.tsarena-scope .tsschk__was { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .55); }
/* payment methods: one selected row, the rest quiet */
.tsarena-scope .tsschk__pm { gap: 14px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--a-raised); border: 1px solid var(--a-line); }
.tsarena-scope .tsschk__label--gap + .tsschk__pm { margin-top: 9px; }
.tsarena-scope .tsschk__pm:has(.tsschk__pm-radio:checked) { background: var(--a-brand-soft); border: 1.5px solid var(--a-brand); }
.tsarena-scope .tsschk__pm-tile { width: 42px; height: 42px; border-radius: 10px; background: var(--a-surface); border: 1px solid var(--a-line); }
.tsarena-scope .tsschk__pm-tile .material-symbols-outlined { font-size: 21px; color: var(--a-brand-ink); }
.tsarena-scope .tsschk__pm-name { font-size: 15px; font-weight: 600; color: var(--a-ink); }
.tsarena-scope .tsschk__pm-sub { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--a-faint); }
.tsarena-scope .tsschk__pm-check { width: 24px; height: 24px; border: 1.5px solid var(--a-line2); }
.tsarena-scope .tsschk__pm:has(.tsschk__pm-radio:checked) .tsschk__pm-check { background: var(--a-brand); border-color: var(--a-brand); }
.tsarena-scope .tsschk__pm-check .material-symbols-outlined { font-size: 15px; color: var(--a-brand-fg); }
/* pay */
.tsarena-scope button.tsschk__pay { gap: 10px; margin-top: 22px; padding: 16px; border-radius: 12px; background: var(--a-brand); color: var(--a-brand-fg); font-size: 16px; font-weight: 700; line-height: normal; box-shadow: none; }
.tsarena-scope button.tsschk__pay:hover { background: var(--a-brand-ink); color: var(--a-brand-fg); }
.tsarena-scope button.tsschk__pay .material-symbols-outlined { font-size: 18px; }
.tsarena-scope .tsschk__trust { gap: 14px; margin-top: 14px; }
.tsarena-scope .tsschk__trust-item { gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--a-faint); }
.tsarena-scope .tsschk__trust-item .material-symbols-outlined { font-size: 15px; color: var(--a-pos); }
.tsarena-scope .tsschk__trust-dot { width: auto; height: auto; background: none; opacity: .5; font-size: 12.5px; line-height: 16px; }
.tsarena-scope .tsschk__trust-dot::before { content: '\00b7'; font-size: 12.5px; line-height: 16px; color: var(--a-faint); }

@media (max-width: 480px) {
    /* the checkout popup: a 560px dialog with 32px gutters has to give way */
    .tsarena-scope main.tsschk { padding: 16px 10px 32px; }
    .tsarena-scope .tsschk__head { padding: 20px 20px 18px; }
    .tsarena-scope .tsschk__close { top: -4px; right: -4px; width: 34px; height: 34px; }
    .tsarena-scope .tsschk__title { font-size: 30px; margin: 18px 0 6px; }
    .tsarena-scope .tsschk__subline { font-size: 13.5px; }
    .tsarena-scope .tsschk__tipster { gap: 10px; padding: 12px; }
    .tsarena-scope .tsschk__flag { white-space: normal; }
    .tsarena-scope .tsschk__body { padding: 20px 20px 24px; }
    .tsarena-scope .tsschk__coupon { flex-wrap: wrap; }
    .tsarena-scope button.tsschk__capply { width: 100%; justify-content: center; }
    .tsarena-scope .tsschk__final { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tsarena-scope .tsschk__final-right .tss_cart_final_price,
    .tsarena-scope .tsschk__final-right .tss_cart_final_price_p { font-size: 28px; }
    .tsarena-scope .tsschk__trust { flex-direction: column; gap: 8px; }
    .tsarena-scope .tsschk__trust-dot { display: none; }
}