/* betboost.mobile.css — BetBoost carousel MOBILE (Fase 2, display-only).
   Scope: .bbc-mob-* (toggle/wrap, mirror .bb-mob-carousel-* di
   betbuilder_index.blade.php) + .bbc-* / #bbc* (card/modale/stepper, adattati
   da betboost.scoped.css desktop). Nessuna regola globale.
   NB: font-size in PX ASSOLUTI — il tema mobile ha html{font-size:10px} che
   collassa i rem (stesso gotcha già risolto sul desktop e su random-bet.mobile.css). */

/* ---- Toggle collassabile (mirror .bb-mob-carousel-toggle) --------------- */
.bbc-mob-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--color-bg-02, #23262b);
    border: none;
    border-bottom: 1px solid var(--color-bg-03, #3a3e45);
    color: var(--color-accent-80, #fab615);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    text-align: left;
    letter-spacing: .3px;
    transition: background .15s ease;
}
.bbc-mob-toggle[hidden] { display: none !important; }
.bbc-mob-toggle:active { background: var(--color-bg-03, #3a3e45); }
.bbc-mob-toggle-icon-lead { color: var(--color-accent-80, #fab615); font-size: 13px; }
.bbc-mob-toggle-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    background: var(--button-primary-bg, #fab615); color: var(--button-primary-text, #000);
    border-radius: 10px; padding: 0 6px; font-weight: 700; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.bbc-mob-toggle-icon {
    margin-left: auto;
    transition: transform .25s ease;
    font-size: 12px;
    opacity: .8;
}
.bbc-mob-toggle.open .bbc-mob-toggle-icon { transform: rotate(180deg); }

/* ---- Wrap collassabile (mirror .bb-mob-carousel-wrap/.open) ------------- */
.bbc-mob-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.bbc-mob-wrap.open {
    max-height: 800px; /* sufficiente a non tagliare il carosello */
}
.bbc-mob-inner {
    padding: 8px 0 4px;
    background: var(--color-bg-02, #23262b);
    border-bottom: 2px solid var(--color-bg-03, #3a3e45);
}

/* ---- Sezione + carosello (adattato da betboost.scoped.css) -------------- */
.bbc-section { margin: 0; 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 8px; padding: 0 12px;
}
.bbc-section-title {
    color: var(--menu-text-color, #ffffff);
    font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.bbc-section-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    background: var(--success-color, #2ea043); color: #fff;
    border-radius: 10px; padding: 0 6px; font-weight: 700; font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.bbc-carousel { position: relative; overflow: hidden; }
.bbc-track {
    display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
    padding: 2px 12px 8px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.bbc-track::-webkit-scrollbar { display: none; }
.bbc-arrow { display: none; } /* frecce nascoste su mobile: scroll touch nativo (come bb-carousel) */

/* ---- Card ---------------------------------------------------------------- */
.bbc-card {
    flex: 0 0 216px; min-width: 216px; max-width: 216px; cursor: pointer;
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    border-radius: 10px; padding: 12px; box-sizing: border-box;
    transition: border-color .15s ease; scroll-snap-align: start;
}
.bbc-card:active { border-color: var(--success-color, #2ea043); }
.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: 13px; 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: 20px; height: 20px;
    background: var(--success-color, #2ea043); color: #fff;
    border-radius: 50%; padding: 0 6px; font-size: 11px; font-weight: 700;
}
.bbc-avail { display: block; color: var(--menu-text-color, #fff); opacity: .85; font-size: 10px; font-weight: 700; margin-bottom: 6px; text-align: right; }
.bbc-card-sport { color: var(--button-primary-bg, #fab615); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 5px; }
.bbc-card-event { color: var(--menu-text-color, #fff); font-size: 12px; font-weight: 600; margin-bottom: 4px; line-height: 1.25; }
.bbc-card-pick { color: var(--menu-text-color, #fff); opacity: .85; font-size: 11px; margin-bottom: 8px; }
.bbc-cd { color: var(--menu-text-color, #fff); font-size: 11px; opacity: .92; margin-bottom: 8px; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.bbc-card-bottom { background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; text-align: center; }
.bbc-card-bottom-label { color: var(--menu-text-color, #fff); opacity: .8; font-size: 11px; margin-bottom: 2px; }
.bbc-card-bottom-val { font-size: 13px; }

/* base barrata (dimmed) » boosted (accent verde, prominente) */
.bbc-old { color: rgba(255,255,255,.5); text-decoration: line-through; margin-right: 2px; font-variant-numeric: tabular-nums; }
.bbc-new { color: var(--success-color, #2ea043); 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: 14px; }

/* ---- Modale (Bootstrap 3) ------------------------------------------------ */
.bbc-modal .modal-dialog { margin: 12px; }
.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 .modal-footer { display: flex; gap: 8px; }
.bbc-modal .modal-footer .bbc-btn { flex: 1 1 0; }
.bbc-modal .close { color: var(--menu-text-color, #fff); opacity: .8; font-size: 24px; }
.bbc-modal-title { color: var(--menu-text-color, #fff); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .2px; }
.bbc-modal-cd { color: var(--button-primary-bg, #fab615); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bbc-modal-avail { color: var(--success-color, #2ea043); font-size: 11px; 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: 40vh; 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: 8px 2px; }
.bbc-leg-r1 { font-size: 11px; color: var(--menu-text-color, #fff); opacity: .82; }
.bbc-leg-r2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; 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: 14px; }

.bbc-summary { margin-top: 10px; }
.bbc-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 12px; 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: 14px; }
#bbcEvents { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Stepper — touch target >=44px (Apple HIG / Material) */
.bbc-stepper { display: flex; align-items: center; gap: 8px; }
.bbc-stepper input {
    width: 88px; height: 44px; text-align: center; border-radius: 8px; font-size: 14px; 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;
}
#bbcStake { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; }
.bbc-step-btn {
    min-width: 44px; min-height: 44px; border: none; border-radius: 8px; cursor: pointer; font-size: 19px; line-height: 1;
    background: var(--input-bg, #3a3e45); color: var(--menu-text-color, #fff); font-weight: 700;
}
.bbc-stake-hint { display: block; color: var(--menu-text-color, #fff); opacity: .65; font-size: 10px; margin-top: 6px; }

/* Bottoni CTA — verde per boost (Accetta), coerente col resto del widget; touch >=44px */
.bbc-btn {
    border: none; border-radius: 8px; min-height: 46px; padding: 0 14px; font-weight: 700; cursor: pointer; font-size: 13px;
}
.bbc-btn-accept { background: var(--success-color, #2ea043) !important; color: #fff !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: 9px 11px; border-radius: 8px; font-size: 12px;
    background: rgba(46,160,67,.14); color: var(--success-color, #2ea043); }
.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 (prefers-reduced-motion: reduce) {
    .bbc-mob-toggle .bbc-mob-toggle-icon, .bbc-mob-wrap, .bbc-card, .bbc-track { transition: none; scroll-behavior: auto; }
}