/*
 * Bet Builder — class skeleton.
 *
 * Convenzioni:
 *  - Niente colori/font/spacing custom: il grafico li applica via la palette del
 *    tema attivo (00_skin_22, ecc.) usando classi Bootstrap esistenti
 *    (.btn, .btn-primary, .modal, .modal-dialog, .list-group, ...).
 *  - Le regole sotto sono PURO LAYOUT (display, position, z-index, flex)
 *    riutilizzabili in tutti i temi.
 *  - Le classi hanno il prefisso `.bb-` per evitare collisioni con il resto del sito.
 *
 * Caricato in:
 *  - resources/views/layout-blu/layout/header.blade.php (tutti gli sport / live page)
 */

/* ---- Bottone BB su match-row ---- */

/* Pulsante BB stile "William Hill" — pill con icona + label.
   Background/text presi dalle CSS variables del tema (button-primary-*),
   nessun colore hardcoded. */
.bb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.bb-button:hover,
.bb-button:focus {
    color: var(--button-primary-text);
    text-decoration: none;
    opacity: 0.9;
}
.bb-button > i {
    font-size: 14px;
}
/* Variante icon-only (header riga compatto) */
.bb-button.bb-button-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    gap: 0;
}
.bb-button.bb-button-icon > i {
    font-size: 16px;
}

/* ---- Avviso SweetAlert BB: blinda il box del bottone su hover ---- */
/*
 * I bottoni della dialog SweetAlert usata da showToast() (avviso "leg non
 * aggiungibile", "Combinazione impossibile", ecc.) portano le classi Bootstrap
 * .btn .btn-lg .btn-primary. Una regola globale del tema `.btn:hover { margin:0 }`
 * (specificità 0,2,0) sovrascrive il `margin-top` di base di `.sweet-alert button`
 * (0,1,1) SOLO su hover/focus/active: il bottone perde i 18px di margine
 * superiore e la dialog si ridimensiona in altezza al passaggio del mouse.
 *
 * Fix: riaffermiamo il box (margin/padding) negli stati interattivi con un
 * selettore a specificità sufficiente a battere `.btn:hover` (0,2,1 > 0,2,0),
 * usando una CSS var locale così il valore non è duplicato come numero "nudo".
 * L'hover continua a cambiare SOLO il background (gestito da sweet-alert.css).
 * Layout-only, scoped a .sweet-alert, nessun colore/stringa hardcoded.
 */
.sweet-alert button {
    --bb-swal-btn-margin: 18px 4px 0;
    --bb-swal-btn-padding: 10px 28px;
}
.sweet-alert button:hover,
.sweet-alert button:focus,
.sweet-alert button:active {
    margin: var(--bb-swal-btn-margin);
    padding: var(--bb-swal-btn-padding);
}

/* ---- Modale Bet Builder ---- */

.bb-modal .modal-dialog {
    width: 90%;
    max-width: 1100px;
    margin: 30px auto;
}

.bb-modal-content {
    /* uses .modal-content from Bootstrap; layout extension only */
}

.bb-modal-body {
    display: flex;
    flex-direction: row;
    gap: 20px;
    min-height: 400px;
    max-height: 70vh;
}

/* Colonna sinistra: lista mercati */
.bb-markets-list {
    flex: 0 0 60%;
    overflow-y: auto;
    padding-right: 10px;
}

/* Colonna destra: slip in costruzione */
.bb-slip {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    /* separatore visivo dalla lista mercati: aggiunto dal tema */
}

.bb-slip-legs {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bb-slip-leg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    /* separatore tra leg: aggiunto dal tema */
}

.bb-slip-leg-remove {
    cursor: pointer;
    margin-left: 8px;
}

.bb-price-preview {
    margin-top: auto;
    padding-top: 12px;
    text-align: right;
}

/* ---- Mercati e outcomes nella modale (BB-only naming) ---- */

.bb-markets-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bb-markets-rows > li {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-bg-03);
}
.bb-markets-empty {
    padding: 12px;
    color: var(--color-accent-80);
    text-align: center;
    list-style: none;
}

.bb-market-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bb-market-row-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.bb-market-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: #fff;
}
.bb-market-outcomes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bb-market-empty {
    color: var(--color-accent-80);
    opacity: 0.6;
    font-size: var(--font-size-xs);
}

.bb-outcome-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--border-radius-xs, 4px);
    background: var(--button-secondary-bg);
    color: #fff;
    border: 1px solid transparent;
    font-size: var(--font-size-xs);
    line-height: 1.2;
}
.bb-outcome-btn .bb-outcome-name { opacity: 0.9; }
.bb-outcome-btn .bb-outcome-odd  { font-weight: var(--font-weight-medium); }

.bb-outcome-btn-active {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}
.bb-outcome-btn-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Coupon block-per-match ---- */

.bb-coupon-block {
    /* No padding/margin custom: vincolo "skin CSS multi-theme rule"
       (memoria progetto) → niente CSS inline custom, usa palette/classi
       esistenti del tema. Padding/margin precedenti rompevano il flex
       layout delle .bs-row-market-odd interne (legs su due righe). */
}

.bb-coupon-leg-row {
    font-size: 0.85em;
    padding-left: 14px;
}

/* Layout interno delle righe coupon (BB e multipla normale): il parent
   `.bs-row-market-odd` ha 2 figli `.m-0` (nome mercato) e
   `.bs-row-outcome-oddValue` (outcome + quota + trash). Senza flex sul
   parent vanno a capo (default block-level). Il tema standard del coupon
   non forza flex; lo facciamo noi scoped a `.cupon-middle-main` (= solo
   contesto coupon, non altre pagine che usano lo stesso selettore). */
.cupon-middle-main .bs-row-market-odd {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.cupon-middle-main .bs-row-market-odd > .m-0 {
    flex: 0 0 auto;
}
.cupon-middle-main .bs-row-market-odd > .bs-row-outcome-oddValue {
    flex: 1 1 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Riga "Bet Builder - Quota totale" — replica il layout delle altre
   righe coupon (.cupon-middle-head è già stilato dal tema). Forziamo flex
   row per evitare che label e valore vadano a capo per via del col-sm-*. */
.bb-coupon-totale {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bb-coupon-totale .importo-left,
.bb-coupon-totale .importo-right {
    flex: 0 0 auto;
    width: auto;
}
.bb-coupon-totale .importo-right {
    text-align: right;
    /* Le righe delle leg hanno la quota seguita da un'icona trash (~15px
       wide + gap 8px). La riga "Bet Builder - Quota totale" non ha trash:
       per allineare verticalmente il valore con le quote delle leg sopra
       aggiungiamo un padding-right che simula lo spazio della trash.
       (15px icona + 8px gap = 23px). */
    padding-right: 23px;
}

/* ---- Mobile ---- */

@media (max-width: 768px) {
    .bb-modal .modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .bb-modal-body {
        flex-direction: column;
        max-height: none;
    }
    .bb-markets-list,
    .bb-slip {
        flex: 1 1 100%;
        padding-left: 0;
    }
    .bb-carousel-card {
        flex: 0 0 240px;
    }
}

/* ============================================================================
 * BB Suggested Packages — carousel "Popular Bet Builders" (home /betbuilder)
 * Layout: scroll horizontal con scroll-snap. Card stile dark per coerenza
 * con la skin. Bottone "Aggiungi al coupon" full-width nel footer card.
 * ============================================================================ */

.bb-carousel-section {
    background: #1d1f23;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #f0f0f0;
}

.bb-carousel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bb-carousel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    color: #fff;
}

.bb-carousel-header i {
    color: var(--button-primary-bg);
    font-size: 18px;
}

.bb-carousel-nav {
    display: flex;
    gap: 6px;
}

.bb-carousel-arrow {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ddd;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 120ms ease;
}

.bb-carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Track scrollabile orizzontalmente con snap a card. */
.bb-carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

.bb-carousel-track::-webkit-scrollbar {
    height: 4px;
}

.bb-carousel-track::-webkit-scrollbar-thumb {
    background: var(--button-primary-bg);
    border-radius: 2px;
}

/* Card singolo pacchetto. */
.bb-carousel-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #2a2c30;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bb-card-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
}

.bb-card-match {
    flex: 1;
    min-width: 0;
}

.bb-card-match-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-card-match-kickoff {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.bb-card-live-badge {
    display: inline-block;
    background: #c53030;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Badge tondo conta-leg (top-right della card). */
.bb-card-legcount {
    background: var(--button-primary-bg);
    color: #1d1f23;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

/* Lista leg con bullet sinistra (timeline-like). */
.bb-card-legs {
    flex: 1;
    overflow: hidden;
    border-left: 1px dashed rgba(255, 255, 255, 0.18);
    padding-left: 12px;
    margin-left: 4px;
}

.bb-card-leg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
}

.bb-card-leg-bullet {
    position: absolute;
    left: -16px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-primary-bg);
    box-shadow: 0 0 0 2px #2a2c30;
}

.bb-card-leg-text {
    flex: 1;
    min-width: 0;
}

.bb-card-leg-outcome {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-card-leg-market {
    font-size: 11px;
    color: #999;
    margin-top: 1px;
}

/* Bottone "Add to Betslip" full-width nel footer card. */
.bb-card-add {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    transition: background 120ms ease, border-color 120ms ease;
}

.bb-card-add:hover {
    background: var(--button-primary-bg);
    border-color: var(--button-primary-bg);
    color: #1d1f23;
}

.bb-card-add:active {
    background: var(--button-primary-bg);
}

/* Flash highlight quando un'odd cambia via SSE (carousel SSE update). */
.bb-card-add-flash {
    animation: bbCardAddFlash 700ms ease-out;
}
@keyframes bbCardAddFlash {
    0%   { background: var(--button-primary-bg); color: #1d1f23; }
    100% { background: rgba(255, 255, 255, 0.06); color: #fff; }
}

/* Visual cue (sottile) quando l'engine pubblica lambda_updated per il match
   corrente — i bottoni outcome potrebbero avere quote stale per pochi secondi. */
.bb-markets-just-updated {
    box-shadow: inset 0 0 0 2px var(--button-primary-bg);
    transition: box-shadow 1000ms ease-out;
}

/* Flash quote up/down su LIVE odds change via sseeventodds.
   Verde se la quota sale (più valore), rosso se scende. Animazione
   breve (1.2s) — sufficient per percezione, non distrae a lungo. */
button.quote_btn.bb-odd-flash-up {
    animation: bbOddFlashUp 1.2s ease-out;
}
button.quote_btn.bb-odd-flash-down {
    animation: bbOddFlashDown 1.2s ease-out;
}
@keyframes bbOddFlashUp {
    0%   { background: #2bb73c; color: #fff; }
    100% { background: inherit; color: inherit; }
}
@keyframes bbOddFlashDown {
    0%   { background: #b52d2d; color: #fff; }
    100% { background: inherit; color: inherit; }
}

#cupon #ticketalert #couponTemp,
#cupon #ticketalert #couponTemp div {
    font-size: inherit;
}
#cupon #ticketalert #couponTemp .cupon-main-num {
    color: var(--color-accent-100);
}