/* ============================================================
   style.css — BetStar Front Office
   Palette : Bleu nuit + Or ambré + Vert néon
   ============================================================ */

/* --- Variables par défaut (écrasées par theme.php) --- */
:root {
    --color-primary:    #1A1A2E;
    --color-secondary:  #16213E;
    --color-accent:     #F5A623;
    --color-success:    #00D4AA;
    --color-danger:     #E94560;
    --color-text:       #EAEAEA;
    --color-text-muted: #9A9A9A;
    --color-border:     rgba(255,255,255,0.08);
    --color-card:       rgba(255,255,255,0.04);
    --font-main:        'Inter', 'Segoe UI', sans-serif;
    --radius:           8px;
    --radius-lg:        14px;
    --transition:       0.2s ease;
    --shadow:           0 4px 24px rgba(0,0,0,0.3);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:      var(--font-main);
    background-color: var(--color-primary);
    color:            var(--color-text);
    font-size:        15px;
    line-height:      1.6;
    min-height:       100vh;
}

a {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      opacity var(--transition);
}

a:hover {
    opacity: 0.8;
}

/* --- Scrollbar personnalisée --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-primary); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }

/* ============================================================
   LAYOUT
   ============================================================ */

.bs-wrapper {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.bs-main {
    flex: 1;
    padding: 24px 0;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.bs-navbar {
    background-color: var(--color-secondary);
    border-bottom:    1px solid var(--color-border);
    padding:          0 20px;
    height:           64px;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    position:         sticky;
    top:              0;
    z-index:          1000;
}

.bs-navbar-brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   22px;
    font-weight: 700;
    color:       var(--color-accent);
}

.bs-navbar-brand img {
    height: 38px;
    width:  auto;
}

.bs-nav-links {
    display:     flex;
    align-items: center;
    gap:         8px;
    list-style:  none;
}

.bs-nav-links a {
    color:         var(--color-text);
    padding:       8px 14px;
    border-radius: var(--radius);
    font-size:     14px;
    font-weight:   500;
    transition:    background var(--transition), color var(--transition);
}

.bs-nav-links a:hover,
.bs-nav-links a.active {
    background-color: rgba(245, 166, 35, 0.12);
    color:            var(--color-accent);
    opacity:          1;
}

.bs-wallet-badge {
    background-color: rgba(245, 166, 35, 0.15);
    border:           1px solid var(--color-accent);
    color:            var(--color-accent);
    padding:          6px 14px;
    border-radius:    20px;
    font-weight:      600;
    font-size:        14px;
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */

.bs-card {
    background-color: var(--color-secondary);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    padding:          20px;
    transition:       border-color var(--transition), transform var(--transition);
}

.bs-card:hover {
    border-color: rgba(245, 166, 35, 0.3);
}

.bs-card-header {
    border-bottom:  1px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom:  16px;
    font-weight:    600;
    font-size:      16px;
    color:          var(--color-accent);
}

/* ============================================================
   MATCHS & COTES
   ============================================================ */

.bs-fixture {
    background-color: var(--color-card);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    padding:          16px;
    margin-bottom:    12px;
    transition:       border-color var(--transition);
}

.bs-fixture:hover {
    border-color: rgba(245, 166, 35, 0.25);
}

.bs-fixture-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
}

.bs-fixture-league {
    font-size:  12px;
    color:      var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bs-fixture-time {
    font-size:  12px;
    color:      var(--color-accent);
    font-weight: 600;
}

.bs-teams {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   14px;
    gap:             12px;
}

.bs-team {
    font-weight: 600;
    font-size:   15px;
    flex:        1;
}

.bs-team.home { text-align: left; }
.bs-team.away { text-align: right; }

.bs-score {
    text-align:  center;
    font-size:   20px;
    font-weight: 700;
    color:       var(--color-accent);
    min-width:   50px;
}

.bs-odds {
    display: grid;
    gap:     6px;
    grid-template-columns: repeat(3, 1fr);
}

.bs-odd-btn {
    background-color: rgba(255,255,255,0.05);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    padding:          8px 6px;
    text-align:       center;
    cursor:           pointer;
    transition:       all var(--transition);
    display:          flex;
    flex-direction:   column;
    gap:              2px;
}

.bs-odd-btn:hover {
    border-color:     var(--color-accent);
    background-color: rgba(245, 166, 35, 0.1);
}

.bs-odd-btn.selected {
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
    color:            #1A1A2E;
}

.bs-odd-btn.suspended {
    opacity: 0.4;
    cursor:  not-allowed;
}

.bs-odd-label {
    font-size: 11px;
    color:     var(--color-text-muted);
}

.bs-odd-btn.selected .bs-odd-label {
    color: rgba(26,26,46,0.7);
}

.bs-odd-value {
    font-size:   15px;
    font-weight: 700;
    color:       var(--color-accent);
}

.bs-odd-btn.selected .bs-odd-value {
    color: #1A1A2E;
}

/* Badge LIVE */
.bs-live-badge {
    background-color: var(--color-danger);
    color:            #fff;
    font-size:        10px;
    font-weight:      700;
    padding:          2px 7px;
    border-radius:    4px;
    text-transform:   uppercase;
    letter-spacing:   0.5px;
    animation:        pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ============================================================
   BET SLIP (Panier de paris)
   ============================================================ */

.bs-betslip {
    position:         sticky;
    top:              80px;
    background-color: var(--color-secondary);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    overflow:         hidden;
}

.bs-betslip-header {
    background:    linear-gradient(135deg, var(--color-accent), #e6920a);
    color:         #1A1A2E;
    padding:       14px 18px;
    font-weight:   700;
    font-size:     15px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
}

.bs-betslip-body {
    padding:    16px;
    max-height: 60vh;
    overflow-y: auto;
}

.bs-slip-item {
    background-color: rgba(255,255,255,0.04);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    padding:          10px 12px;
    margin-bottom:    8px;
    position:         relative;
}

.bs-slip-item-match {
    font-size:   12px;
    color:       var(--color-text-muted);
    margin-bottom: 3px;
}

.bs-slip-item-pick {
    font-weight: 600;
    font-size:   14px;
}

.bs-slip-item-odd {
    color:       var(--color-accent);
    font-weight: 700;
    font-size:   15px;
}

.bs-slip-remove {
    position:         absolute;
    top:              8px;
    right:            10px;
    background:       none;
    border:           none;
    color:            var(--color-text-muted);
    cursor:           pointer;
    font-size:        16px;
    line-height:      1;
    transition:       color var(--transition);
}

.bs-slip-remove:hover {
    color: var(--color-danger);
}

.bs-betslip-footer {
    border-top: 1px solid var(--color-border);
    padding:    16px;
}

.bs-stake-input {
    background:    rgba(255,255,255,0.07);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    padding:       10px 14px;
    width:         100%;
    font-size:     15px;
    font-weight:   600;
    transition:    border-color var(--transition);
}

.bs-stake-input:focus {
    outline:      none;
    border-color: var(--color-accent);
}

.bs-potential-win {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin:          10px 0;
    font-size:       14px;
}

.bs-potential-win span:last-child {
    color:       var(--color-success);
    font-weight: 700;
    font-size:   16px;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn-bs-primary {
    background-color: var(--color-accent);
    border:           none;
    color:            #1A1A2E;
    font-weight:      700;
    padding:          10px 20px;
    border-radius:    var(--radius);
    cursor:           pointer;
    width:            100%;
    font-size:        15px;
    transition:       opacity var(--transition), transform var(--transition);
}

.btn-bs-primary:hover {
    opacity:   0.9;
    transform: translateY(-1px);
}

.btn-bs-primary:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    transform: none;
}

.btn-bs-danger {
    background-color: var(--color-danger);
    border:           none;
    color:            #fff;
    font-weight:      600;
    padding:          8px 16px;
    border-radius:    var(--radius);
    cursor:           pointer;
    transition:       opacity var(--transition);
}

.btn-bs-danger:hover { opacity: 0.85; }

.btn-bs-outline {
    background:    transparent;
    border:        1px solid var(--color-accent);
    color:         var(--color-accent);
    font-weight:   600;
    padding:       8px 16px;
    border-radius: var(--radius);
    cursor:        pointer;
    transition:    all var(--transition);
}

.btn-bs-outline:hover {
    background-color: rgba(245,166,35,0.12);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.bs-form-group {
    margin-bottom: 18px;
}

.bs-label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bs-input {
    background-color: rgba(255,255,255,0.06);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    color:            var(--color-text);
    padding:          10px 14px;
    width:            100%;
    font-size:        15px;
    transition:       border-color var(--transition);
}

.bs-input:focus {
    outline:      none;
    border-color: var(--color-accent);
    background-color: rgba(255,255,255,0.08);
}

.bs-input.is-invalid {
    border-color: var(--color-danger);
}

.bs-input-error {
    color:     var(--color-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* ============================================================
   BADGES & STATUTS
   ============================================================ */

.bs-badge {
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
}

.bs-badge-pending  { background: rgba(245,166,35,0.15);  color: var(--color-accent); }
.bs-badge-won      { background: rgba(0,212,170,0.15);   color: var(--color-success); }
.bs-badge-lost     { background: rgba(233,69,96,0.15);   color: var(--color-danger); }
.bs-badge-active   { background: rgba(0,212,170,0.12);   color: var(--color-success); }
.bs-badge-blocked  { background: rgba(233,69,96,0.12);   color: var(--color-danger); }
.bs-badge-live     { background: var(--color-danger);    color: #fff; }
.bs-badge-prematch { background: rgba(255,255,255,0.08); color: var(--color-text-muted); }

/* ============================================================
   TABLES
   ============================================================ */

.bs-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}

.bs-table th {
    background-color: rgba(255,255,255,0.04);
    color:            var(--color-text-muted);
    font-size:        12px;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.5px;
    padding:          10px 14px;
    text-align:       left;
    border-bottom:    1px solid var(--color-border);
}

.bs-table td {
    padding:       12px 14px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.bs-table tr:last-child td { border-bottom: none; }

.bs-table tbody tr {
    transition: background var(--transition);
}

.bs-table tbody tr:hover {
    background-color: rgba(255,255,255,0.03);
}

/* ============================================================
   FOOTER
   ============================================================ */

.bs-footer {
    background-color: var(--color-secondary);
    border-top:       1px solid var(--color-border);
    padding:          20px;
    text-align:       center;
    font-size:        13px;
    color:            var(--color-text-muted);
}

/* ============================================================
   ALERTS
   ============================================================ */

.bs-alert {
    padding:       12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size:     14px;
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.bs-alert-success { background: rgba(0,212,170,0.1);  border-left: 3px solid var(--color-success); color: var(--color-success); }
.bs-alert-danger  { background: rgba(233,69,96,0.1);  border-left: 3px solid var(--color-danger);  color: var(--color-danger); }
.bs-alert-warning { background: rgba(245,166,35,0.1); border-left: 3px solid var(--color-accent);  color: var(--color-accent); }
.bs-alert-info    { background: rgba(255,255,255,0.06); border-left: 3px solid var(--color-text-muted); color: var(--color-text-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
    .bs-betslip {
        position: fixed;
        bottom:   0;
        left:     0;
        right:    0;
        top:      auto;
        z-index:  999;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .bs-betslip-body { max-height: 40vh; }
}

@media (max-width: 576px) {
    .bs-odds { grid-template-columns: repeat(3, 1fr); }
    .bs-navbar-brand span { display: none; }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.bs-login-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      radial-gradient(ellipse at top, #1e1e3a 0%, var(--color-primary) 70%);
}

.bs-login-wrap {
    width:   100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.bs-login-box {
    background-color: var(--color-secondary);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    padding:          36px 32px;
    width:            100%;
    max-width:        420px;
    box-shadow:       var(--shadow);
}

.bs-login-logo {
    text-align:    center;
    margin-bottom: 24px;
}

.bs-login-logo i {
    font-size:     48px;
    color:         var(--color-accent);
    display:       block;
    margin-bottom: 10px;
}

.bs-login-logo img {
    height:        60px;
    margin-bottom: 10px;
}

.bs-login-logo h1 {
    font-size:   24px;
    font-weight: 700;
    color:       var(--color-accent);
}

.bs-login-subtitle {
    text-align:    center;
    color:         var(--color-text-muted);
    font-size:     14px;
    margin-bottom: 24px;
}

.bs-input-group {
    position: relative;
}

.bs-input-group .bs-input {
    padding-right: 44px;
}

.bs-input-eye {
    position:    absolute;
    right:       12px;
    top:         50%;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    color:       var(--color-text-muted);
    cursor:      pointer;
    font-size:   15px;
    padding:     4px;
    transition:  color var(--transition);
}

.bs-input-eye:hover { color: var(--color-accent); }

.bs-login-footer {
    text-align:  center;
    margin-top:  20px;
    font-size:   13px;
    color:       var(--color-text-muted);
}

/* ============================================================
   SPORT LINKS & PILLS (Sidebar / Mobile)
   ============================================================ */

.bs-sport-link {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       9px 12px;
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    font-size:     14px;
    font-weight:   500;
    transition:    all var(--transition);
    text-decoration: none;
}
.bs-sport-link:hover, .bs-sport-link.active {
    background: rgba(245,166,35,0.1);
    color:      var(--color-accent);
    opacity:    1;
}

/* Mobile sport pills */
.bs-sport-scroll {
    display:          flex;
    gap:              8px;
    overflow-x:       auto;
    padding:          0 0 12px;
    scrollbar-width:  none;
    margin-bottom:    8px;
}
.bs-sport-scroll::-webkit-scrollbar { display: none; }

.bs-sport-pill {
    white-space:      nowrap;
    padding:          7px 14px;
    border-radius:    20px;
    background:       rgba(255,255,255,0.06);
    border:           1px solid var(--color-border);
    color:            var(--color-text-muted);
    font-size:        13px;
    font-weight:      500;
    text-decoration:  none;
    transition:       all var(--transition);
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
}
.bs-sport-pill:hover, .bs-sport-pill.active {
    background:   rgba(245,166,35,0.15);
    border-color: var(--color-accent);
    color:        var(--color-accent);
    opacity:      1;
}

/* Section title */
.bs-section-title {
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     14px;
    font-weight:   600;
    color:         var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ============================================================
   LOGIN USER — Repris depuis style manager
   ============================================================ */
body { margin: 0; }
.login-bg { position:fixed; inset:0; z-index:0; overflow:hidden; }
.login-wrap { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { background:rgba(22,33,62,.92); border:1px solid var(--color-border); border-radius:20px; padding:40px 36px; width:100%; max-width:420px; backdrop-filter:blur(20px); box-shadow:0 24px 64px rgba(0,0,0,.5); }
@media(max-width:480px){.login-box{padding:28px 20px;}}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo img { height:56px; margin-bottom:12px; }
.login-icon { width:64px; height:64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:12px; }
.user-icon  { background:rgba(0,212,170,.2); color:var(--color-success); box-shadow:0 0 24px rgba(0,212,170,.3); }
.login-title    { font-size:22px; font-weight:800; color:var(--color-text); margin:0 0 4px; }
.login-subtitle { font-size:13px; color:var(--color-text-muted); margin:0 0 4px; }
.login-alert { background:rgba(233,69,96,.12); border:1px solid rgba(233,69,96,.3); border-radius:var(--radius); color:var(--color-danger); padding:10px 14px; font-size:13px; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.login-field  { margin-bottom:16px; }
.login-label  { display:block; font-size:11px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.login-input-wrap { position:relative; }
.login-input { width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); color:var(--color-text); padding:11px 14px; font-size:15px; outline:none; transition:border-color .2s, background .2s; }
.login-input:focus { border-color:var(--color-accent); background:rgba(255,255,255,.1); }
.login-input-wrap .login-input { padding-right:44px; }
.login-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--color-text-muted); cursor:pointer; font-size:15px; transition:color .2s; }
.login-eye:hover { color:var(--color-accent); }
.login-btn { width:100%; padding:13px; border:none; border-radius:var(--radius); font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; transition:opacity .2s, transform .2s; }
.login-btn:hover { opacity:.88; transform:translateY(-1px); }
.user-btn { background:linear-gradient(135deg,#00D4AA,#00a882); color:#1A1A2E; }
.login-bg-user { background:radial-gradient(ellipse at 10% 90%,rgba(0,212,170,.1) 0%,transparent 40%), radial-gradient(ellipse at 90% 10%,rgba(180,130,255,.08) 0%,transparent 40%), linear-gradient(135deg,#0d1020 0%,#1A1A2E 100%); }
.login-bg-orb { position:absolute; border-radius:50%; filter:blur(60px); }
.login-bg-user .o1 { width:300px; height:300px; background:rgba(0,212,170,.15); bottom:-80px; left:-80px; }
.login-bg-user .o2 { width:250px; height:250px; background:rgba(180,130,255,.1); top:-60px; right:-60px; }
.login-bg-user .o3 { width:200px; height:200px; background:rgba(245,166,35,.06); top:40%; left:50%; }
.user-login-box { border-color:rgba(0,212,170,.15); }

/* ============================================================
   FRONT OFFICE — Layout Bookmaker 3 colonnes
   ============================================================ */

/* ── NAVBAR ── */
.bs-navbar {
    background:    var(--color-secondary);
    border-bottom: 1px solid var(--color-border);
    position:      sticky;
    top:           0;
    z-index:       100;
    height:        56px;
}
.bs-navbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    padding:         0 16px;
    gap:             16px;
}
.bs-brand {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   20px;
    font-weight: 800;
    color:       var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.bs-brand i { font-size: 18px; }

.bs-nav-links {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex:        1;
    justify-content: center;
}
.bs-nav-links a {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 14px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--color-text-muted);
    text-decoration: none;
    transition:    all .2s;
    position:      relative;
}
.bs-nav-links a:hover,
.bs-nav-links a.active {
    background: rgba(245,166,35,.12);
    color:      var(--color-accent);
}
.bs-live-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--color-danger);
    animation:     pulse 1.5s infinite;
}
.bs-nav-count {
    background:    var(--color-danger);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    padding:       1px 6px;
    border-radius: 10px;
}

.bs-navbar-right {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}
.bs-wallet-chip {
    display:       flex;
    align-items:   center;
    gap:           6px;
    background:    rgba(245,166,35,.1);
    border:        1px solid rgba(245,166,35,.2);
    border-radius: 20px;
    padding:       5px 12px;
    font-size:     13px;
    font-weight:   700;
    color:         var(--color-accent);
    white-space:   nowrap;
}
.bs-user-btn {
    display:       flex;
    align-items:   center;
    gap:           7px;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--color-border);
    border-radius: 20px;
    padding:       5px 12px 5px 6px;
    color:         var(--color-text);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .2s;
}
.bs-user-btn:hover { background: rgba(255,255,255,.1); }
.bs-avatar {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--color-accent);
    color:           #1A1A2E;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    font-weight:     800;
}
.bs-user-menu { position: relative; }
.bs-user-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    background:    var(--color-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width:     180px;
    box-shadow:    0 8px 32px rgba(0,0,0,.4);
    z-index:       200;
    overflow:      hidden;
}
.bs-user-dropdown.show { display: block; }
.bs-user-dropdown a {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     11px 16px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--color-text);
    text-decoration: none;
    transition:  background .15s;
}
.bs-user-dropdown a:hover { background: rgba(255,255,255,.06); }
.bs-dropdown-divider { height: 1px; background: var(--color-border); }
.bs-btn-login {
    display:       flex;
    align-items:   center;
    gap:           6px;
    background:    var(--color-accent);
    color:         #1A1A2E;
    border-radius: 20px;
    padding:       7px 16px;
    font-size:     13px;
    font-weight:   700;
    text-decoration: none;
    transition:    opacity .2s;
}
.bs-btn-login:hover { opacity: .85; color: #1A1A2E; }
.bs-slip-toggle {
    position:  relative;
    background: rgba(255,255,255,.08);
    border:    1px solid var(--color-border);
    border-radius: 50%;
    width:     38px;
    height:    38px;
    color:     var(--color-text);
    display:   flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor:    pointer;
}
.bs-slip-badge {
    position:      absolute;
    top:           -4px;
    right:         -4px;
    background:    var(--color-danger);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* ── LAYOUT 3 COLONNES ── */
.bs-layout {
    display:    flex;
    min-height: calc(100vh - 56px);
    max-width:  1400px;
    margin:     0 auto;
}

/* ── SIDEBAR GAUCHE ── */
.bs-sidebar-left {
    width:      220px;
    flex-shrink: 0;
    background: var(--color-secondary);
    border-right: 1px solid var(--color-border);
    height:     calc(100vh - 56px);
    position:   sticky;
    top:        56px;
    overflow-y: auto;
}
.bs-side-section { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.bs-side-title {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 14px 6px;
    font-size:      11px;
    font-weight:    700;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.bs-sport-item, .bs-league-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 14px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--color-text-muted);
    text-decoration: none;
    transition:  all .15s;
    cursor:      pointer;
}
.bs-sport-item:hover, .bs-league-item:hover,
.bs-sport-item.active, .bs-league-item.active {
    background: rgba(245,166,35,.08);
    color:      var(--color-accent);
    border-left: 2px solid var(--color-accent);
    padding-left: 12px;
}
.bs-sport-count {
    margin-left: auto;
    background:  rgba(255,255,255,.08);
    color:       var(--color-text-muted);
    font-size:   11px;
    padding:     1px 7px;
    border-radius: 10px;
}

/* ── CONTENU CENTRE ── */
.bs-main-content {
    flex:       1;
    min-width:  0;
    padding:    0;
}

/* Onglets mobile */
.bs-tabs {
    background:    var(--color-secondary);
    border-bottom: 1px solid var(--color-border);
    padding:       4px 8px;
    gap:           4px;
    position:      sticky;
    top:           56px;
    z-index:       10;
}
.bs-tab {
    padding:       7px 14px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--color-text-muted);
    text-decoration: none;
    display:       flex;
    align-items:   center;
    gap:           6px;
    transition:    all .2s;
}
.bs-tab.active, .bs-tab:hover {
    background: rgba(245,166,35,.12);
    color:      var(--color-accent);
}

/* Groupe ligue */
.bs-league-group { border-bottom: 1px solid var(--color-border); }

.bs-league-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    background:      rgba(255,255,255,.02);
    cursor:          pointer;
    transition:      background .15s;
    user-select:     none;
}
.bs-league-header:hover { background: rgba(255,255,255,.04); }
.bs-league-name { font-size: 13px; font-weight: 600; }
.bs-league-count {
    background:    rgba(255,255,255,.08);
    color:         var(--color-text-muted);
    font-size:     11px;
    padding:       1px 7px;
    border-radius: 10px;
}
.bs-league-chevron { color: var(--color-text-muted); font-size: 12px; transition: transform .2s; }
.bs-league-chevron.rotated { transform: rotate(-90deg); }

/* En-têtes cotes */
.bs-odds-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         5px 14px;
    background:      rgba(255,255,255,.01);
    border-bottom:   1px solid rgba(255,255,255,.04);
}
.bs-oh-match { font-size: 11px; color: var(--color-text-muted); flex: 1; }
.bs-oh-odds  {
    display: flex;
    gap:     4px;
    width:   220px;
    font-size: 11px;
    color:   var(--color-text-muted);
    font-weight: 600;
}
.bs-oh-odds span { width: 60px; text-align: center; }

/* Body ligue (collapsible) */
.bs-league-body.collapsed { display: none; }

/* Ligne de match */
.bs-match-row {
    display:     flex;
    align-items: center;
    padding:     10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor:      pointer;
    transition:  background .15s;
    gap:         12px;
}
.bs-match-row:hover { background: rgba(255,255,255,.03); }
.bs-match-row:last-child { border-bottom: none; }

.bs-match-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.bs-match-time {
    font-size:   11px;
    color:       var(--color-text-muted);
    width:       70px;
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    gap:         2px;
    align-items: flex-start;
}
.bs-match-score { font-weight: 700; color: var(--color-accent); font-size: 12px; }
.bs-match-teams { flex: 1; min-width: 0; }
.bs-team-name {
    font-size:     13px;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.6;
}

/* Cotes */
.bs-match-odds {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}
.bs-odd {
    width:         58px;
    height:        38px;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    font-size:     13px;
    font-weight:   700;
    cursor:        pointer;
    transition:    all .15s;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.bs-odd:hover   { background: rgba(245,166,35,.15); border-color: var(--color-accent); color: var(--color-accent); }
.bs-odd.active  { background: var(--color-accent); border-color: var(--color-accent); color: #1A1A2E; }
.bs-odd.suspended { opacity: .4; cursor: not-allowed; }
.bs-odd-empty {
    width:           58px;
    height:          38px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       12px;
}
.bs-more-markets {
    width:         44px;
    height:        38px;
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    font-size:     11px;
    font-weight:   600;
    display:       flex;
    align-items:   center;
    justify-content: center;
    text-decoration: none;
    transition:    all .15s;
}
.bs-more-markets:hover { background: rgba(255,255,255,.08); color: var(--color-text); }

.bs-live-badge-sm {
    background:    var(--color-danger);
    color:         #fff;
    font-size:     9px;
    font-weight:   800;
    padding:       2px 5px;
    border-radius: 3px;
    letter-spacing: .3px;
    animation:     pulse 1.5s infinite;
}

.bs-empty {
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:    80px 20px;
    color:      var(--color-text-muted);
    text-align: center;
}
.bs-empty i   { font-size: 48px; opacity: .2; margin-bottom: 16px; }
.bs-empty p   { font-size: 14px; }

/* ── BET SLIP DROIT ── */
.bs-sidebar-right {
    width:      280px;
    flex-shrink: 0;
    height:     calc(100vh - 56px);
    position:   sticky;
    top:        56px;
}
.bs-betslip {
    background:    var(--color-secondary);
    border-left:   1px solid var(--color-border);
    height:        100%;
    display:       flex;
    flex-direction: column;
}
.bs-slip-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    border-bottom:   1px solid var(--color-border);
    font-size:       14px;
    font-weight:     700;
    flex-shrink:     0;
}
.bs-slip-count {
    background:    var(--color-accent);
    color:         #1A1A2E;
    font-size:     11px;
    font-weight:   800;
    padding:       2px 8px;
    border-radius: 10px;
    min-width:     22px;
    text-align:    center;
}
.bs-slip-clear {
    background: none;
    border:     none;
    color:      var(--color-text-muted);
    cursor:     pointer;
    padding:    4px;
    font-size:  13px;
    transition: color .15s;
}
.bs-slip-clear:hover { color: var(--color-danger); }
.bs-slip-body {
    flex:       1;
    overflow-y: auto;
    min-height: 0;
}
.bs-slip-empty {
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:     200px;
    color:      var(--color-text-muted);
    text-align: center;
    padding:    20px;
}
.bs-slip-empty i  { font-size: 32px; opacity: .2; margin-bottom: 12px; }
.bs-slip-empty p  { font-size: 12px; line-height: 1.5; }

/* Sélection dans le slip */
.bs-slip-item {
    padding:       10px 14px;
    border-bottom: 1px solid var(--color-border);
    position:      relative;
}
.bs-slip-match { font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; }
.bs-slip-selection {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.bs-slip-sel-name { font-size: 12px; font-weight: 600; }
.bs-slip-sel-odd  { font-size: 14px; font-weight: 800; color: var(--color-accent); }
.bs-slip-remove {
    position:   absolute;
    top:        8px;
    right:      10px;
    background: none;
    border:     none;
    color:      var(--color-text-muted);
    cursor:     pointer;
    font-size:  12px;
    padding:    2px;
}
.bs-slip-remove:hover { color: var(--color-danger); }
.bs-slip-market { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }

.bs-slip-footer {
    padding:    14px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-secondary);
}
.bs-slip-summary { margin-bottom: 12px; }
.bs-slip-row {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    margin-bottom:   4px;
    color:           var(--color-text-muted);
}
.bs-slip-row strong { color: var(--color-text); }
.bs-stake-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .4px; }
.bs-stake-input-wrap { position: relative; margin-bottom: 8px; }
.bs-stake-input-wrap input {
    width:         100%;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    padding:       9px 44px 9px 12px;
    font-size:     15px;
    font-weight:   700;
    outline:       none;
    transition:    border-color .2s;
}
.bs-stake-input-wrap input:focus { border-color: var(--color-accent); }
.bs-stake-currency {
    position:  absolute;
    right:     12px;
    top:       50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color:     var(--color-text-muted);
}
.bs-quick-stakes {
    display: flex;
    gap:     4px;
    margin-bottom: 12px;
}
.bs-quick-stakes button {
    flex:          1;
    padding:       5px;
    background:    rgba(255,255,255,.06);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text-muted);
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .15s;
}
.bs-quick-stakes button:hover { background: rgba(245,166,35,.1); color: var(--color-accent); border-color: rgba(245,166,35,.3); }
.bs-potential {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 12px;
    background:      rgba(0,212,170,.06);
    border:          1px solid rgba(0,212,170,.15);
    border-radius:   var(--radius);
    margin-bottom:   10px;
    font-size:       12px;
    color:           var(--color-text-muted);
}
.bs-potential-value { font-size: 15px; font-weight: 800; color: var(--color-success); }
.bs-slip-balance {
    font-size:     12px;
    color:         var(--color-text-muted);
    margin-bottom: 8px;
    text-align:    center;
}
.bs-slip-balance strong { color: var(--color-accent); }
.bs-btn-place {
    width:         100%;
    padding:       12px;
    background:    linear-gradient(135deg, var(--color-accent), #e6920a);
    border:        none;
    border-radius: var(--radius);
    color:         #1A1A2E;
    font-size:     14px;
    font-weight:   800;
    cursor:        pointer;
    transition:    opacity .2s, transform .2s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
}
.bs-btn-place:hover { opacity: .88; transform: translateY(-1px); }

/* ── MOBILE BET SLIP ── */
.bs-slip-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.6);
    z-index:    149;
}
.bs-slip-overlay.show { display: block; }

@media (max-width: 991.98px) {
    .bs-sidebar-left  { display: none; }
    .bs-sidebar-right {
        position:   fixed;
        right:      0;
        top:        56px;
        bottom:     0;
        width:      300px;
        height:     calc(100vh - 56px);
        transform:  translateX(100%);
        transition: transform .25s ease;
        z-index:    150;
    }
    .bs-sidebar-right.show { transform: translateX(0); }
    .bs-oh-odds { width: 180px; }
    .bs-odd { width: 50px; }
}

@media (max-width: 575.98px) {
    .bs-match-time { width: 55px; }
    .bs-oh-odds    { width: 160px; }
    .bs-odd        { width: 46px; height: 34px; font-size: 12px; }
    .bs-more-markets { width: 36px; }
}