/*
 * Random Bet — mobile shell CSS (2026-08-13)
 *
 * Copre SOLO la shell mobile (launcher pill + scrim + bottom-sheet +
 * toast) creata da random_bet_launcher.blade.php. Il widget interno
 * (#rbWidget e figli) resta stilizzato da random-bet.scoped.css
 * (copiato verbatim dal desktop, invariato): qui aggiungiamo solo gli
 * override necessari per farlo vivere dentro lo sheet mobile.
 *
 * REGOLE:
 *  - Scoped a .rb-mob-* e #rbMob* (+ 2 override mirati su #rbBody/.rb-header
 *    dentro .rb-mob-sheet). Nessuna regola globale.
 *  - PX assoluti: il tema imposta html{font-size:10px}, quindi 1rem qui
 *    varrebbe 10px reali — evitato ovunque, solo px.
 *  - Colori/radius dai token gia' verificati in random-bet.scoped.css
 *    (--button-primary-bg, --tournament-element-bg, --palinsesti-border-color,
 *    --border-radius-md, --quote-button-hover-text), con gli stessi
 *    fallback letterali.
 *
 * CARICAMENTO: da aggiungere nel layout mobile accanto a
 * random-bet.scoped.css (fuori scope di questo task).
 */

/* ============================================================
   LAUNCHER — FAB fisso NON-OSCURANTE
   (2026-08-13 pivot: l'inline in coda a .home-content-toggles
   collassava la barra a 3 bottoni a 375px; tornati a FAB fisso,
   ma auto-nascosto dal glue JS quando il coupon ha contenuto
   [classe .rb-mob-launcher--hidden] cosi' non copre mai i suoi
   bottoni. bottom alzato a 78px per stare sopra la bottom-nav).
   ============================================================ */

.rb-mob-launcher {
    position: fixed;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 10050;
}

.rb-mob-launcher.rb-mob-launcher--hidden {
    display: none !important;
}

.rb-mob-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--button-primary-bg, #fab615);
    border-radius: 999px;
    color: var(--button-primary-bg, #fab615);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.rb-mob-open:focus-visible {
    outline: 2px solid var(--button-primary-bg, #fab615);
    outline-offset: 2px;
}

.rb-mob-open .fa-dice {
    font-size: 14px;
}

/* ============================================================
   SCRIM
   ============================================================ */

.rb-mob-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .2s ease-out;
    z-index: 10060;
}

.rb-mob-scrim--open {
    opacity: 1;
}

/* ============================================================
   BOTTOM SHEET
   ============================================================ */

.rb-mob-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    background: var(--tournament-element-bg, #2c2f35);
    border: 1px solid var(--palinsesti-border-color, #3a3e45);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
    transform: translateY(100%);
    transition: transform .26s ease-out;
    z-index: 10070;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rb-mob-sheet--open {
    transform: translateY(0);
}

/* Uscita leggermente piu' rapida dell'ingresso */
.rb-mob-sheet:not(.rb-mob-sheet--open) {
    transition-duration: .18s;
}

.rb-mob-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: var(--palinsesti-border-color, #3a3e45);
    flex: 0 0 auto;
}

.rb-mob-sheet-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px;
    background: var(--tournament-element-bg, #2c2f35);
    border-bottom: 1px solid var(--palinsesti-border-color, #3a3e45);
    flex: 0 0 auto;
    z-index: 1;
}

.rb-mob-sheet-title {
    color: var(--menu-text-color, #ffffff);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

.rb-mob-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--menu-text-color, #ffffff);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.rb-mob-close:focus-visible {
    outline: 2px solid var(--button-primary-bg, #fab615);
    outline-offset: -2px;
}

.rb-mob-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 16px;
    flex: 1 1 auto;
}

/* Dentro lo sheet il widget e' sempre "aperto": nascondiamo la testata
   collassabile desktop (ridondante con .rb-mob-sheet-head) e forziamo
   visibile il body interno (che parte con style="display:none" nel
   partial copiato verbatim dal desktop). Il glue JS aggiunge comunque
   .rb-expanded/data-expanded per coerenza di stato con random-bet.js. */
.rb-mob-sheet .rb-header {
    display: none !important;
}

.rb-mob-sheet #rbBody {
    display: block !important;
}

.rb-mob-sheet .rb-widget {
    border: none;
    border-radius: 0;
}

/* Fix contrasto input: sul mobile --menu-text-color vale #333 (sul desktop e' bianco),
   quindi .rb-spinner-input rendeva testo scuro su sfondo scuro (invisibile).
   Override scoped con colore chiaro esplicito + campo distinto. */
.rb-mob-sheet .rb-spinner-input {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #3a3e45 !important;
    caret-color: #ffffff;
}

/* ============================================================
   TOAST
   ============================================================ */

.rb-mob-toast {
    position: fixed;
    left: 50%;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    background: #1c1e22;
    color: var(--menu-text-color, #ffffff);
    border: 1px solid var(--button-primary-bg, #fab615);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .2s ease-out, transform .2s ease-out;
    z-index: 10080;
}

.rb-mob-toast--open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   TOUCH SIZE — controlli interni ereditati (solo se necessario a 375px)
   ============================================================ */

.rb-mob-sheet .rb-stepper-btn,
.rb-mob-sheet .rb-pill,
.rb-mob-sheet .rb-lock-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ============================================================
   VISIBILITY HELPER (shell, non usare per il coupon nativo)
   ============================================================ */

.rb-mob-launcher[hidden],
.rb-mob-scrim[hidden],
.rb-mob-sheet[hidden],
.rb-mob-toast[hidden] {
    display: none !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .rb-mob-scrim,
    .rb-mob-sheet,
    .rb-mob-toast {
        transition: none !important;
    }
}