/* ════════════════════════════════════════════════════════════════
   X10 PROVIDER RIBBON — shared by /casino and /live-casino
   Markup: partials/provider-ribbon.blade.php. Loaded after
   list-L127 and x10-lobby-skin, so selectors carry .x10-prov to win
   over their legacy .x10-provider-card rules without !important.
   Tokens come from x10-lobby-skin (:root --casino-*).
═══════════════════════════════════════════════════════════════ */

.x10-prov {
    --prov-w: 104px;
    --prov-h: 92px;
    --prov-gap: 8px;
    --prov-radius: 12px;
    --prov-logo-h: 40px;
}
@media (min-width: 768px)  { .x10-prov { --prov-w: 120px; --prov-h: 98px; --prov-logo-h: 44px; --prov-gap: 10px; } }
@media (min-width: 1280px) { .x10-prov { --prov-w: 132px; --prov-h: 104px; --prov-logo-h: 48px; } }

/* ── Header: title + count on the left, scroll arrows on the right ── */
.x10-prov .x10-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.x10-prov .x10-prov-nav { display: none; gap: 6px; }
.x10-prov.is-scrollable .x10-prov-nav { display: flex; }
@media (hover: none) { .x10-prov.is-scrollable .x10-prov-nav { display: none; } }
.x10-prov .x10-prov-arrow {
    width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
    color: #fff; background: var(--casino-card, #1B324E);
    border: 1px solid var(--casino-border, rgba(255,255,255,.08)); border-radius: 50%;
    cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.x10-prov .x10-prov-arrow:hover:not(:disabled) { background: var(--casino-card-hover, #234062); color: var(--casino-accent, #E9A722); }
.x10-prov .x10-prov-arrow:disabled { opacity: .35; cursor: default; }

/* ── Rail: single horizontal row, native scrolling + snap ── */
.x10-prov .x10-prov-rail { position: relative; }
.x10-prov .x10-prov-rail::before,
.x10-prov .x10-prov-rail::after {
    content: ''; position: absolute; top: 0; bottom: 6px; width: 28px; z-index: 2; pointer-events: none;
    opacity: 0; transition: opacity .2s ease;
}
.x10-prov .x10-prov-rail::before { left: 0;  background: linear-gradient(90deg, var(--casino-bg, #001021), transparent); }
.x10-prov .x10-prov-rail::after  { right: 0; background: linear-gradient(270deg, var(--casino-bg, #001021), transparent); }
.x10-prov.is-scrollable:not(.at-start) .x10-prov-rail::before { opacity: 1; }
.x10-prov.is-scrollable:not(.at-end)   .x10-prov-rail::after  { opacity: 1; }

.x10-prov .x10-providers-ribbon.x10-prov-ribbon {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--prov-gap);
    width: 100%; max-width: 100%; margin: 0; padding: 4px 2px 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.x10-prov .x10-providers-ribbon.x10-prov-ribbon::-webkit-scrollbar { display: none; }

/* ── Tile ── */
.x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile {
    flex: 0 0 var(--prov-w); width: var(--prov-w); height: var(--prov-h); min-width: 0; box-sizing: border-box;
    padding: 10px 8px 8px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px;
    background: var(--casino-card, #1B324E);
    border: 1px solid var(--casino-border, rgba(255,255,255,.08)); border-radius: var(--prov-radius);
    box-shadow: none; transform: none; cursor: pointer; text-align: center;
    scroll-snap-align: start; user-select: none; -webkit-tap-highlight-color: transparent;
    position: relative; overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile:hover {
        background: var(--casino-card-hover, #234062); border-color: rgba(233,167,34,.45); transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.35);
    }
}
.x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile:active { transform: scale(.97); }
.x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile:focus-visible {
    outline: 2px solid var(--casino-accent, #E9A722); outline-offset: 2px;
}

/* Selected: gold ring + tinted surface + check badge (not colour alone) */
.x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile.active,
.x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(233,167,34,.16), rgba(233,167,34,.05)), var(--casino-card-hover, #234062);
    border-color: var(--casino-accent, #E9A722);
    box-shadow: inset 0 0 0 1px var(--casino-accent, #E9A722);
    font-weight: inherit;
}
.x10-prov .x10-prov-tile.active::after {
    content: ''; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--casino-accent, #E9A722)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3.5 7.3 2.2 2.2 4.8-4.8' fill='none' stroke='%23001021' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ── Tile contents ── */
.x10-prov .x10-prov-logo {
    flex: 1 1 auto; width: 100%; min-height: 0; max-height: var(--prov-logo-h);
    display: flex; align-items: center; justify-content: center;
}
.x10-prov .x10-prov-img {
    display: block; width: 100%; height: var(--prov-logo-h); max-width: 100%;
    object-fit: contain; image-rendering: auto;
    transition: transform .25s ease;
}
@media (hover: hover) { .x10-prov .x10-prov-tile:hover .x10-prov-img { transform: scale(1.06); } }
.x10-prov .x10-prov-all-icon { color: var(--casino-accent, #E9A722); }

.x10-prov .x10-prov-name {
    display: block; max-width: 100%; margin: 0; padding: 0;
    font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .01em; text-transform: none;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x10-prov .x10-prov-count {
    display: block; font-size: 10px; line-height: 1.1; font-weight: 600; color: rgba(255,255,255,.55);
    font-variant-numeric: tabular-nums;
}
.x10-prov .x10-prov-tile.active .x10-prov-count { color: var(--casino-accent, #E9A722); }

/* Text-only tiles (no registered logo): wordmark replaces logo + caption, so the name is not shown twice */
.x10-prov .x10-prov-tile.is-text .x10-prov-name { display: none; }
.x10-prov .x10-prov-tile.is-text .x10-prov-logo { max-height: none; flex: 1 1 auto; padding: 0 2px; }
.x10-prov .x10-prov-wordmark {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    max-width: 100%; font-size: 13px; line-height: 1.15; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; text-align: center; color: #fff; overflow-wrap: anywhere;
}
@media (min-width: 1280px) { .x10-prov .x10-prov-wordmark { font-size: 14px; } }

@media (prefers-reduced-motion: reduce) {
    .x10-prov .x10-prov-tile, .x10-prov .x10-prov-img, .x10-prov .x10-prov-arrow, .x10-prov .x10-prov-rail::before, .x10-prov .x10-prov-rail::after { transition: none; }
    .x10-prov .x10-providers-ribbon .x10-provider-card.x10-prov-tile:hover { transform: none; }
    .x10-prov .x10-prov-tile:hover .x10-prov-img { transform: none; }
}