/* betboost.scoped.css — BetBoost widget (Traccia B). Scope: .bbc-*. Nessuna regola globale.
   Variabili tema layout-blu con fallback letterali.
   NB: font-size in PX ASSOLUTI — lo skin ha un rem-base ridotto (~10px) per cui i rem
   collassavano a ~8px. Scala tipografica (post tuning utente): 11/12/13/14/15/16. */

/* ---- Sezione + carosello ------------------------------------------------ */
.bbc-section { margin: 10px 0 16px; max-width: 100%; overflow: hidden; }
.bbc-section[hidden] { display: none !important; }
.bbc-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 10px; padding: 0 2px;
}
.bbc-section-title {
    color: var(--menu-text-color, #ffffff);
    font-size: 15px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.bbc-section-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    background: var(--success-color, #2ea043); color: #fff;
    border-radius: 11px; padding: 0 7px; font-weight: 700; font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.bbc-carousel { position: relative; overflow: hidden; }
.bbc-track {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
    padding: 2px 44px 10px; scrollbar-width: thin;   /* gutter 44px per non far sovrapporre le frecce alle card */
    scrollbar-color: var(--palinsesti-border-color, #3a3e45) transparent;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.bbc-track::-webkit-scrollbar { height: 7px; }
.bbc-track::-webkit-scrollbar-thumb { background: var(--palinsesti-border-color, #3a3e45); border-radius: 4px; }
.bbc-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--button-primary-bg, #fab615); color: var(--quote-button-hover-text, #000);
    font-size: 20px; line-height: 1; cursor: pointer; display: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.bbc-arrow-prev { left: 2px; }
.bbc-arrow-next { right: 2px; }
@media (min-width: 768px) { .bbc-arrow { display: block; } }

/* ---- Card --------------------------------------------------------------- */
.bbc-card {
    flex: 0 0 268px; min-width: 268px; max-width: 268px; cursor: pointer;
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    border-radius: var(--border-radius-md, 10px); padding: 14px; box-sizing: border-box;
    transition: border-color .15s ease, transform .15s ease; scroll-snap-align: start;
}
.bbc-card:hover { border-color: var(--button-primary-bg, #fab615); transform: translateY(-2px); }
.bbc-card:focus-visible { outline: 2px solid var(--button-primary-bg, #fab615); outline-offset: 2px; }
.bbc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bbc-tier { color: var(--menu-text-color, #fff); font-weight: 700; font-size: 14px; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbc-badge-legs {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    background: var(--success-color, #2ea043); color: #fff;
    border-radius: 50%; padding: 0 6px; font-size: 12px; font-weight: 700;
}
.bbc-avail { display: block; color: var(--menu-text-color, #fff); opacity: .85; font-size: 11px; font-weight: 700; margin-bottom: 8px; text-align: right; }
.bbc-card-sport { color: var(--button-primary-bg, #fab615); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; }
.bbc-card-event { color: var(--menu-text-color, #fff); font-size: 13px; font-weight: 600; margin-bottom: 4px; line-height: 1.25; }
.bbc-card-pick { color: var(--menu-text-color, #fff); opacity: .85; font-size: 12px; margin-bottom: 10px; }
.bbc-cd { color: var(--menu-text-color, #fff); font-size: 12px; opacity: .92; margin-bottom: 10px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.bbc-card-bottom { background: rgba(255,255,255,.06); border-radius: 8px; padding: 10px; text-align: center; }
.bbc-card-bottom-label { color: var(--menu-text-color, #fff); opacity: .8; font-size: 12px; margin-bottom: 2px; }
.bbc-card-bottom-val { font-size: 14px; }

/* base barrata (dimmed) » boosted (accent, prominente) — gerarchia via dimensione+colore */
.bbc-old { color: rgba(255,255,255,.5); text-decoration: line-through; margin-right: 2px; font-variant-numeric: tabular-nums; }
.bbc-new { color: var(--button-primary-bg, #fab615); font-weight: 700; font-variant-numeric: tabular-nums; }
.bbc-new::before { content: "\00BB\00A0"; color: rgba(255,255,255,.45); text-decoration: none; font-weight: 400; }
.bbc-card-bottom-val .bbc-new { font-size: 15px; }

/* ---- Modale (Bootstrap 3) ----------------------------------------------- */
.bbc-modal .modal-content {
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--palinsesti-border-color, #3a3e45); color: var(--menu-text-color, #fff);
}
.bbc-modal .modal-header, .bbc-modal .modal-footer { border-color: var(--palinsesti-border-color, #3a3e45); }
.bbc-modal .close { color: var(--menu-text-color, #fff); opacity: .8; font-size: 26px; }
.bbc-modal-title { color: var(--menu-text-color, #fff); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; }
.bbc-modal-cd { color: var(--button-primary-bg, #fab615); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bbc-modal-avail { color: var(--button-primary-bg, #fab615); font-size: 12px; font-weight: 700; margin-top: 2px; }
.bbc-modal-avail[hidden] { display: none !important; }

.bbc-legs { list-style: none; margin: 10px 0; padding: 0; max-height: min(46vh, 380px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--palinsesti-border-color, #3a3e45) transparent; }
.bbc-leg { border-bottom: 1px solid var(--palinsesti-border-color, #3a3e45); padding: 9px 2px; }
.bbc-leg-r1 { font-size: 12px; color: var(--menu-text-color, #fff); opacity: .82; }
.bbc-leg-r2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; margin-top: 4px; }
.bbc-leg-mkt { color: var(--menu-text-color, #fff); }
.bbc-leg-odds { white-space: nowrap; }
.bbc-leg-odds .bbc-new { font-size: 15px; }

.bbc-summary { margin-top: 12px; }
.bbc-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--menu-text-color, #fff); }
.bbc-summary-row .bbc-label { color: var(--menu-text-color, #fff); opacity: .82; }
.bbc-summary-row .bbc-new { font-size: 15px; }
#bbcEvents { font-weight: 700; font-variant-numeric: tabular-nums; }

.bbc-stepper { display: flex; align-items: center; gap: 8px; }
.bbc-stepper input {
    width: 96px; height: 46px; text-align: center; border-radius: 8px; font-size: 15px; font-weight: 700;
    background: var(--input-bg, #3a3e45); color: var(--menu-text-color, #fff);
    border: 1px solid var(--palinsesti-border-color, #3a3e45); font-variant-numeric: tabular-nums;
}
/* ID-level + !important per battere eventuali regole skin .form-control/input globali (come fece RandomBet) */
#bbcStake { height: 46px !important; min-height: 46px !important; box-sizing: border-box !important; }
.bbc-step-btn {
    min-width: 46px; min-height: 46px; border: none; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1;
    background: var(--input-bg, #3a3e45); color: var(--menu-text-color, #fff); font-weight: 700;
}
.bbc-step-btn:focus-visible, .bbc-stepper input:focus-visible { outline: 2px solid var(--button-primary-bg, #fab615); outline-offset: 1px; }
.bbc-stake-hint { display: block; color: var(--menu-text-color, #fff); opacity: .65; font-size: 11px; margin-top: 6px; }

.bbc-btn {
    border: none; border-radius: 8px; min-height: 48px; padding: 0 18px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.bbc-btn-accept { background: var(--button-primary-bg, #fab615) !important; color: var(--quote-button-hover-text, #000) !important; }
.bbc-btn-decline { background: var(--input-bg, #3a3e45); color: var(--menu-text-color, #fff); }
.bbc-btn:focus-visible { outline: 2px solid var(--button-primary-bg, #fab615); outline-offset: 2px; }
.bbc-btn[disabled] { opacity: .55; cursor: not-allowed; }

.bbc-notice { margin: 8px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
    background: rgba(250,182,21,.12); color: var(--button-primary-bg, #fab615); }
.bbc-notice[hidden] { display: none !important; }
.bbc-login { text-align: center; }
.bbc-login a { color: var(--button-primary-bg, #fab615); font-weight: 700; text-decoration: underline; }

@media (max-width: 767px) {
    .bbc-card { flex-basis: 232px; min-width: 232px; max-width: 232px; padding: 12px; }
    .bbc-track { padding-left: 6px; padding-right: 6px; }   /* su mobile le frecce sono nascoste → niente gutter */
    .bbc-legs { max-height: 42vh; }
    .bbc-btn { font-size: 13px; padding: 0 12px; }
    .bbc-modal-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .bbc-card, .bbc-track { transition: none; scroll-behavior: auto; }
    .bbc-card:hover { transform: none; }
}

/* ---- Task 1: decorazione couponConferma boost (badge + totale base»boosted).
   Scoped .bbc-conf-*; iniettata da betboost.js dentro #right-couponConferma.
   Px assoluti (il tema ha html{font-size:10px} che collassa i rem). ---- */
.bbc-conf-badge-wrap { text-align: center; padding: 6px 0 2px; }
.bbc-conf-badge {
    display: inline-block; padding: 1px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    background: var(--success-color, #2ea043); color: #fff;
}
.bbc-conf-odds-row { align-items: center; }
.bbc-conf-odds-left { flex-grow: 1; text-align: left; }
.bbc-conf-odds-right { flex-grow: 1; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.bbc-conf-base { text-decoration: line-through; opacity: .7; font-weight: 400; margin-right: 4px; }
.bbc-conf-arrow { opacity: .8; margin: 0 3px; }
.bbc-conf-boost { font-weight: 700; color: var(--success-color, #2ea043); font-size: 14px; }
.bbc-conf-gain { font-weight: 700; font-size: 11px; margin-left: 6px; color: var(--success-color, #2ea043); }
.bbc-conf-winval { color: var(--success-color, #2ea043); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---- Decorazione COUPON LIVE (#coupon-container). Scoped .bbc-live-*.
   Solo display: affianca il boosted alla quota di mercato senza toccare i nodi
   nativi. Px assoluti (tema html{font-size:10px}). ---- */
.bbc-live-leg-boost {
    color: var(--success-color, #2ea043); font-weight: 700; margin-right: .5em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bbc-live-leg-boost::before { content: "\00BB\00A0"; color: rgba(255,255,255,.45); font-weight: 400; }
/* Base BARRATA quando c'è il boosted affiancato (per-leg). SOLO stile: il TESTO di
   .valore resta la quota di MERCATO (lo legge il gate del Gioca) — gated dalla classe
   .bbc-live-has-boost (aggiunta da decorateLiveCoupon solo alle leg boost) → nessun
   effetto sulle giocate normali. */
.cupon-main-num-right.valore.bbc-live-has-boost { text-decoration: line-through; opacity: .55; }
.bbc-live-total-row { display: flex; align-items: center; }
.bbc-live-badge {
    display: inline-block; padding: 1px 8px; border-radius: 9px; margin-right: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    background: var(--success-color, #2ea043); color: #fff; vertical-align: middle;
}
.bbc-live-total-val { text-align: right; font-variant-numeric: tabular-nums; }
.bbc-live-base { text-decoration: line-through; opacity: .6; margin-right: 3px; }
.bbc-live-arrow { opacity: .8; margin: 0 3px; }
.bbc-live-boost { font-weight: 700; color: var(--success-color, #2ea043); font-size: 14px; }
.bbc-live-gain { font-weight: 700; font-size: 10px; margin-left: 5px; color: var(--success-color, #2ea043); }
.bbc-live-winval { color: var(--success-color, #2ea043); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }