/* ============================================
   LAROMAPARYAJ — ADDITIONS UI/UX
============================================ */

/* AUTH PAGES */
.auth-page { min-height:100vh; background:var(--dark-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:460px; background:var(--dark-card); border:1px solid var(--border-color); border-radius:16px; padding:40px; }
.auth-logo { text-align:center; margin-bottom:32px; }
.auth-logo img { width:64px; height:64px; margin-bottom:12px; }
.auth-logo h2 { font-size:22px; font-weight:900; color:var(--text-primary); }
.auth-logo span { color:var(--primary); }
.auth-logo p { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.auth-form-group { margin-bottom:18px; }
.auth-form-group label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
.auth-input-wrap { position:relative; }
.auth-input-wrap .icon-left { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none; }
.auth-input-wrap .icon-right { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; cursor:pointer; background:none; border:none; }
.auth-input { width:100%; background:var(--dark-bg); border:1.5px solid var(--border-color); color:var(--text-primary); padding:12px 14px 12px 42px; border-radius:8px; font-size:14px; transition:all 0.3s; outline:none; font-family:inherit; }
.auth-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,255,136,0.1); }
.auth-input.has-error { border-color:var(--live-red); }
.auth-error { font-size:12px; color:var(--live-red); margin-top:5px; display:flex; align-items:center; gap:4px; }
.auth-checkbox-wrap { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.auth-checkbox-wrap input[type=checkbox] { width:16px; height:16px; margin-top:2px; accent-color:var(--primary); flex-shrink:0; }
.auth-checkbox-wrap span { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.btn-auth { width:100%; background:var(--primary); color:#000; border:none; padding:14px; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.3s; margin-top:8px; font-family:inherit; }
.btn-auth:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 5px 20px rgba(0,255,136,0.3); }
.btn-auth:disabled { background:var(--border-color); color:var(--text-muted); cursor:not-allowed; transform:none; box-shadow:none; }
.auth-alert { padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.auth-alert.error { background:rgba(255,59,59,0.1); border-left:3px solid var(--live-red); color:#ff8080; }
.auth-footer { text-align:center; margin-top:20px; font-size:13px; color:var(--text-secondary); }
.auth-footer a { color:var(--primary); text-decoration:none; font-weight:600; }

/* TOAST NOTIFICATIONS */
.toast-container { position:fixed; top:80px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background:var(--dark-card); border:1px solid var(--border-color); border-radius:10px; padding:14px 18px; min-width:280px; max-width:380px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 30px rgba(0,0,0,0.4); animation:toastIn 0.3s ease; pointer-events:all; }
.toast.success { border-left:4px solid var(--primary); }
.toast.error   { border-left:4px solid var(--live-red); }
.toast.info    { border-left:4px solid #3b82f6; }
.toast i { font-size:18px; flex-shrink:0; }
.toast.success i { color:var(--primary); }
.toast.error   i { color:var(--live-red); }
.toast.info    i { color:#3b82f6; }
.toast-msg { flex:1; font-size:14px; color:var(--text-primary); line-height:1.4; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* SPINNER */
.spinner { display:inline-block; width:20px; height:20px; border:2px solid rgba(0,255,136,0.2); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; }
.spinner.lg { width:40px; height:40px; border-width:3px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px; gap:16px; color:var(--text-muted); }

/* EMPTY STATES */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state i { font-size:56px; color:var(--border-color); margin-bottom:20px; display:block; }
.empty-state h3 { font-size:18px; color:var(--text-secondary); margin-bottom:8px; }
.empty-state p { font-size:14px; color:var(--text-muted); margin-bottom:24px; }

/* LIVE BADGE */
.live-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,59,59,0.15); border:1px solid rgba(255,59,59,0.3); color:var(--live-red); padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.live-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--live-red); animation:pulse 1.5s infinite; }

/* SCORE BOARD */
.score-board { display:flex; align-items:center; justify-content:space-between; background:var(--dark-card); border:1px solid var(--border-color); border-radius:16px; padding:28px 24px; margin-bottom:20px; }
.score-team { flex:1; text-align:center; }
.score-team h2 { font-size:20px; font-weight:800; color:var(--text-primary); line-height:1.2; }
.score-team span { font-size:12px; color:var(--text-muted); }
.score-middle { text-align:center; padding:0 24px; }
.score-digits { font-size:48px; font-weight:900; color:var(--primary); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-2px; }
.score-vs { font-size:24px; font-weight:700; color:var(--text-muted); }
.score-time { font-size:13px; color:var(--text-secondary); margin-top:10px; }

/* MARKET CARD */
.market-card { background:var(--dark-card); border:1px solid var(--border-color); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.market-card-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border-color); }
.market-card-header h4 { font-size:14px; font-weight:600; color:var(--text-primary); }
.market-card-body { padding:12px; display:flex; flex-wrap:wrap; gap:8px; }
.odd-cell-lg { flex:1; min-width:80px; background:rgba(0,255,136,0.08); border:1px solid rgba(0,255,136,0.2); border-radius:8px; padding:12px 8px; text-align:center; cursor:pointer; transition:all 0.25s; }
.odd-cell-lg:hover { background:var(--primary); color:#000; transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,255,136,0.3); }
.odd-cell-lg .odd-label { font-size:11px; color:var(--text-muted); margin-bottom:4px; display:block; }
.odd-cell-lg .odd-value { font-size:16px; font-weight:800; color:var(--primary); display:block; }
.odd-cell-lg:hover .odd-label { color:rgba(0,0,0,0.6); }
.odd-cell-lg:hover .odd-value { color:#000; }
.odd-cell-lg.selected { background:var(--primary); }
.odd-cell-lg.selected .odd-label { color:rgba(0,0,0,0.6); }
.odd-cell-lg.selected .odd-value { color:#000; }
.odd-cell-lg.suspended { opacity:0.35; cursor:not-allowed; }

/* BALANCE CARD */
.balance-hero { background:linear-gradient(135deg, rgba(0,255,136,0.15) 0%, rgba(0,204,106,0.05) 100%); border:1px solid rgba(0,255,136,0.3); border-radius:16px; padding:28px; margin-bottom:24px; }
.balance-hero .amount { font-size:44px; font-weight:900; color:var(--primary); line-height:1; }
.balance-hero .currency { font-size:18px; font-weight:700; color:var(--primary-dark); margin-left:6px; }
.balance-hero .label { font-size:13px; color:var(--text-secondary); margin-top:6px; }
.wallet-actions { display:flex; gap:12px; margin-top:20px; }
.btn-wallet { padding:12px 24px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; font-family:inherit; }
.btn-wallet.deposit { background:var(--primary); color:#000; border:none; }
.btn-wallet.deposit:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn-wallet.withdraw { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-wallet.withdraw:hover { background:rgba(0,255,136,0.1); }

/* PAGINATION */
.pagination-wrap { display:flex; align-items:center; justify-content:center; gap:6px; padding:20px 0; flex-wrap:wrap; }
.pg-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--dark-card); border:1px solid var(--border-color); border-radius:6px; color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.3s; text-decoration:none; font-family:inherit; }
.pg-btn:hover { border-color:var(--primary); color:var(--primary); }
.pg-btn.active { background:var(--primary); color:#000; border-color:var(--primary); }
.pg-btn.disabled { opacity:0.3; cursor:default; pointer-events:none; }

/* MATCH ROW — desktop 8 colonnes */
.table-header { grid-template-columns:1fr repeat(3, 78px) repeat(3, 78px) 50px !important; }
.match-row     { grid-template-columns:1fr repeat(3, 78px) repeat(3, 78px) 50px !important; }

/* MATCH ROW — mobile */
@media (max-width: 900px) {
    .table-header { display: none !important; }

    .match-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .match-info {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .match-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .match-time {
        font-size: 11px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Zone cotes mobile */
    .match-odds-mobile {
        display: flex !important;
        gap: 6px !important;
        width: 100%;
    }

    .match-odds-mobile .odd-cell {
        flex: 1 !important;
        padding: 7px 4px !important;
        font-size: 13px !important;
    }

    /* Cacher cotes sur la grille desktop */
    .match-row > .odd-cell,
    .match-row > .more-odds { display: none !important; }
}

/* TICKET SELECTIONS */
.ticket-sel-row { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; border-bottom:1px solid var(--border-color); }
.ticket-sel-row:last-child { border-bottom:none; }
.ticket-sel-event { font-size:14px; color:var(--text-primary); font-weight:600; }
.ticket-sel-detail { font-size:12px; color:var(--text-secondary); margin-top:3px; }
.ticket-sel-odd { font-size:16px; font-weight:700; color:var(--primary); }
.res-win  { color:var(--primary) !important; }
.res-lose { color:var(--live-red) !important; }
.res-void { color:var(--text-muted) !important; }

/* SECTION HEADER */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border-color); }
.section-header h2 { font-size:18px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:10px; }
.section-header h2 i { color:var(--primary); }

/* INPUT GROUP */
.input-group { position:relative; }
.input-group i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none; }
.input-group input { width:100%; background:var(--dark-bg); border:1px solid var(--border-color); color:var(--text-primary); padding:11px 14px 11px 40px; border-radius:8px; font-size:14px; outline:none; transition:border 0.3s; font-family:inherit; }
.input-group input:focus { border-color:var(--primary); }

/* ============================================
   CORRECTIONS & CLASSES MANQUANTES
============================================ */

/* MARKET SUSPENDED OVERLAY */
.market-suspended-overlay { display:flex; align-items:center; gap:6px; font-size:12px; color:#ffa500; font-weight:600; }
.market-suspended-overlay i { font-size:14px; }

/* ODD FLASH */
.odd-flash .odd-value { color:#ffa500 !important; }
.odd-flash { background:rgba(255,165,0,0.15) !important; border-color:#ffa500 !important; }

/* BALANCE HERO CARD — remplace inline styles de Wallet.vue */
.balance-hero { background:linear-gradient(135deg, rgba(16,217,126,0.12) 0%, rgba(12,191,103,0.04) 100%); border:1px solid rgba(16,217,126,0.25); border-radius:16px; padding:28px; margin-bottom:24px; }
.balance-hero .balance-label { font-size:13px; color:var(--text-secondary); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.balance-hero .balance-label i { color:var(--primary); }
.balance-hero .balance-amount { display:flex; align-items:baseline; gap:8px; }
.balance-hero .balance-number { font-size:44px; font-weight:900; color:var(--primary); line-height:1; letter-spacing:-2px; }
.balance-hero .balance-currency { font-size:18px; font-weight:700; color:var(--primary-dark); }
.balance-hero .balance-frozen { font-size:12px; color:#ffa500; margin-top:6px; display:flex; align-items:center; gap:6px; }
.balance-hero .balance-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:20px; padding-top:18px; border-top:1px solid rgba(16,217,126,0.15); }
.balance-hero .balance-stat { text-align:center; }
.balance-hero .balance-stat + .balance-stat { border-left:1px solid rgba(255,255,255,0.06); }
.balance-hero .balance-stat .val { font-size:18px; font-weight:700; color:var(--text-primary); }
.balance-hero .balance-stat .lbl { font-size:11px; color:var(--text-secondary); margin-top:3px; }
.wallet-actions { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn-wallet { padding:12px 24px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:8px; font-family:inherit; }
.btn-wallet.deposit { background:var(--primary); color:#000; border:none; }
.btn-wallet.deposit:hover { background:var(--primary-dark); transform:translateY(-2px); }
.btn-wallet.withdraw { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-wallet.withdraw:hover { background:rgba(16,217,126,0.08); }

/* PROFILE PAGE CORRECTIONS */
.profile-page-container { max-width:860px; margin:0 auto; }

/* FORM INPUTS STANDARD — pour Profile */
.std-input { width:100%; background:var(--dark-card); border:1px solid var(--border-color); color:var(--text-primary); padding:12px 15px; border-radius:6px; font-size:14px; outline:none; transition:border 0.3s; font-family:inherit; }
.std-input:focus { border-color:var(--primary); }
.std-input:disabled, .std-input[readonly] { background:var(--dark-bg); color:var(--text-muted); cursor:not-allowed; }

/* BETSLIP QUICK AMOUNTS */
.quick-stakes { display:flex; gap:6px; margin-bottom:12px; }
.quick-stake-btn { flex:1; padding:6px 4px; background:rgba(16,217,126,0.08); border:1px solid rgba(16,217,126,0.2); border-radius:6px; color:var(--primary); font-size:12px; cursor:pointer; font-weight:600; transition:all 0.2s; font-family:inherit; }
.quick-stake-btn:hover { background:var(--primary); color:#000; }

/* BETSLIP STAKE INPUT */
.stake-input-wrap { position:relative; margin-bottom:10px; }
.stake-input-wrap .stake-currency { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:var(--text-muted); }
.stake-input { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border-color); color:var(--text-primary); padding:10px 50px 10px 14px; border-radius:6px; font-size:15px; font-weight:700; outline:none; transition:border 0.3s; font-family:inherit; }
.stake-input:focus { border-color:var(--primary); }

/* BETSLIP POTENTIAL WIN */
.potential-win-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid var(--border-color); margin-top:4px; }
.potential-win-row .label { font-size:14px; color:var(--text-secondary); }
.potential-win-row .value { font-size:18px; font-weight:800; color:var(--primary); }

/* BETSLIP ALERT */
.slip-alert { padding:10px 14px; border-radius:7px; font-size:13px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.slip-alert.error   { background:rgba(255,59,59,0.1); border-left:3px solid var(--live-red); color:#ff8080; }
.slip-alert.success { background:rgba(16,217,126,0.1); border-left:3px solid var(--primary); color:var(--primary); }

/* ODDS BUTTON SELECTED / SUSPENDED */
.odd-cell.selected { background:var(--primary) !important; color:#000 !important; border-color:var(--primary) !important; }
.odd-cell.suspended { opacity:0.35; cursor:not-allowed !important; pointer-events:none; }

/* EMPTY STATE */
.empty-state a.btn-cta { display:inline-block; text-decoration:none; padding:14px 32px; font-size:14px; }

/* LIVE MARKER */
.live-dot-inline { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--live-red); animation:pulse 1.5s infinite; margin-right:6px; vertical-align:middle; }

/* MOBILE — sidebar toggle */
@media (max-width:1200px) {
  .right-sidebar { display:none; }
  .betslip-mobile-fab { position:fixed; bottom:20px; right:20px; z-index:200; width:56px; height:56px; background:var(--primary); color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; box-shadow:0 4px 20px rgba(16,217,126,0.4); border:none; }
  .betslip-mobile-fab .fab-badge { position:absolute; top:-4px; right:-4px; background:var(--live-red); color:white; width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .betslip-mobile-drawer { position:fixed; bottom:0; left:0; right:0; z-index:300; background:var(--dark-card); border-top:1px solid var(--border-color); border-radius:16px 16px 0 0; padding:20px; max-height:80vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.3s ease; }
  .betslip-mobile-drawer.open { transform:translateY(0); }
  .betslip-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:290; }
}
.empty-state-btn { display:inline-block; text-decoration:none; padding:14px 32px; font-size:14px; }

/* ── RESPONSIVE HELPERS ──────────────────────────────── */
.desktop-only { display: flex !important; }
.mobile-only  { display: none !important; }

@media (max-width: 900px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: flex !important; }
}

/* Hamburger simple */
.hamburger-btn { flex-shrink: 0; }

/* ── TRANSITIONS MENU MOBILE ─────────────────────────── */
.slide-left-enter-active,
.slide-left-leave-active { transition: transform 0.28s cubic-bezier(.4,0,.2,1); }
.slide-left-enter-from,
.slide-left-leave-to     { transform: translateX(-100%); }

.fade-enter-active, .fade-leave-active { transition: opacity 0.25s; }
.fade-enter-from, .fade-leave-to       { opacity: 0; }

/* ── MENU HORIZONTAL FIXE SOUS HEADER ───────────────── */
.h-scroll-nav {
    position: sticky;
    top: 70px;
    z-index: 90;
    background: #0d0d0d;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.h-scroll-nav::-webkit-scrollbar { display: none; }

/* ── Pill button style ─────────────────────────────── */
.h-scroll-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 20px;                          /* Pill */
    background: rgba(255,255,255,0.07);           /* Fond subtil */
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.18s ease;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.h-scroll-item:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.15);
}
.h-scroll-item.active {
    background: rgba(16,217,126,0.15);
    color: var(--primary);
    border-color: rgba(16,217,126,0.4);
}

/* Dot Live */
.h-scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.h-scroll-dot.live {
    background: var(--live-red);
    animation: pulse 1.5s infinite;
}

/* Badge compteur */
.h-scroll-badge {
    background: rgba(255,255,255,0.12);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.4;
}
.h-scroll-item.active .h-scroll-badge {
    background: rgba(16,217,126,0.2);
    color: var(--primary);
}

/* Cacher le bloc mobile sur desktop */
.match-odds-mobile { display: none; }

/* ============================================================
   EVENT CARD MOBILE — style Bet365 / 1xBet
============================================================ */

/* Cacher la rangée desktop sur mobile */
.desktop-event-row { display: grid; }
.event-card-mobile { display: none; }

@media (max-width: 900px) {
  .desktop-event-row { display: none !important; }
  .event-card-mobile  { display: block; }
}

/* ── Card container ─────────────────────────────────────── */
.event-card-mobile {
    background: var(--dark-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}
.event-card-mobile:hover       { border-color: rgba(16,217,126,0.3); }
.event-card-mobile.is-live     { border-color: rgba(255,59,59,0.25); }
.event-card-mobile.is-live:hover { border-color: rgba(255,59,59,0.5); }

/* ── Top bar ────────────────────────────────────────────── */
.ecm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
}

.ecm-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,59,59,0.15);
    border: 1px solid rgba(255,59,59,0.35);
    color: var(--live-red);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ecm-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live-red);
    animation: pulse 1.2s infinite;
    flex-shrink: 0;
}

.ecm-minute {
    font-size: 11px;
    font-weight: 700;
    color: var(--live-red);
    margin-left: 6px;
}

.ecm-time {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ecm-status { display: flex; align-items: center; gap: 4px; }

.ecm-league {
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: right;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Score central ──────────────────────────────────────── */
.ecm-score-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 8px;
    min-height: 58px;
}

.ecm-team {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}
.ecm-team.home { text-align: left; }
.ecm-team.away { text-align: right; }

.ecm-score-center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 70px;
    justify-content: center;
}
.ecm-score {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
}
.ecm-sep {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 2px;
}
.ecm-vs {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: .05em;
}

/* ── Cotes ──────────────────────────────────────────────── */
.ecm-odds {
    display: flex;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.15);
}

.ecm-odd-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    min-width: 0;
}
.ecm-odd-btn:hover:not(:disabled) {
    background: rgba(16,217,126,0.12);
    border-color: rgba(16,217,126,0.35);
}
.ecm-odd-btn.selected {
    background: rgba(16,217,126,0.2);
    border-color: var(--primary);
}
.ecm-odd-btn.empty {
    opacity: 0.3;
    cursor: default;
    justify-content: center;
}
.ecm-odd-btn:disabled { cursor: not-allowed; }

.ecm-odd-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ecm-odd-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.ecm-odd-btn.selected .ecm-odd-label { color: rgba(16,217,126,0.7); }
.ecm-odd-btn.selected .ecm-odd-val   { color: var(--primary); }

.ecm-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 34px;
    transition: all 0.18s;
}
.ecm-more:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

/* ============================================================
   PALETTE FOOTBALL — AMBIANCE DOUCE
============================================================ */

:root {
    /* Couleurs football additionnelles */
    --color-live:     #ff4444;
    --color-live-bg:  rgba(255, 68, 68, 0.07);
    --color-live-border: rgba(255, 68, 68, 0.3);
    --color-soon:     #3b82f6;
    --color-soon-bg:  rgba(59, 130, 246, 0.07);
    --color-soon-border: rgba(59, 130, 246, 0.25);
    --color-gold:     #ffd700;
    --color-gold-bg:  rgba(255, 215, 0, 0.08);
    --color-win:      #10d97e;
    --color-lose:     #555;
    --color-draw:     #e0e0e0;
    --color-card-yellow: #ffd700;
    --color-card-red:    #ff3b3b;
}

/* ── MATCH CARDS : tinting par statut ───────────────────── */

/* Card LIVE — teinte rouge ambre */
.event-card-mobile.is-live {
    background: linear-gradient(135deg, rgba(255,68,68,0.06) 0%, var(--dark-card) 60%);
    border-color: var(--color-live-border);
}
.event-card-mobile.is-live .ecm-top {
    background: rgba(255,68,68,0.08);
    border-bottom-color: rgba(255,68,68,0.15);
}

/* Card BIENTÔT (upcoming) — teinte bleue douce */
.event-card-mobile:not(.is-live) {
    border-left: 3px solid var(--color-soon-border);
}
.event-card-mobile.is-live {
    border-left: 3px solid var(--color-live-border);
}

/* Score coloré : gagnant vert, perdant muté */
.ecm-score.winning  { color: var(--color-win) !important; }
.ecm-score.losing   { color: var(--color-lose) !important; }
.ecm-score.drawing  { color: var(--color-draw) !important; }

/* ── LEAGUE TITLE : bordure couleur par prestige ───────── */
.league-title {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--primary);
    padding-left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Top compétitions = bordure or */
.league-title.top-comp { border-left-color: var(--color-gold); }

/* ── H-SCROLL : icons colorés par sport ─────────────────── */
.h-scroll-item[data-sport="football"] i   { color: #10d97e; }
.h-scroll-item[data-sport="basketball"] i { color: #f97316; }
.h-scroll-item[data-sport="tennis"] i     { color: #ffd700; }
.h-scroll-item[data-sport="hockey"] i     { color: #60a5fa; }
.h-scroll-item[data-sport="baseball"] i   { color: #f59e0b; }
.h-scroll-item[data-sport="mma"] i        { color: #ef4444; }
.h-scroll-item[data-sport="rugby"] i      { color: #8b5cf6; }

/* ── HERO BANNER : gradient terrain de foot ─────────────── */
.hero-banner-slideshow {
    background: linear-gradient(160deg,
        rgba(16,217,126,0.12) 0%,
        rgba(0,80,40,0.15)   30%,
        rgba(0,0,0,0.0)      60%,
        rgba(59,130,246,0.08) 100%
    ) !important;
    border-color: rgba(16,217,126,0.2) !important;
    position: relative;
}

/* Lignes de terrain subtiles */
.hero-banner-slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 49%,
            rgba(255,255,255,0.02) 49%,
            rgba(255,255,255,0.02) 51%
        );
    pointer-events: none;
    z-index: 0;
}

/* ── BADGES COMPÉTITION COLORÉS ─────────────────────────── */
.comp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.comp-badge.champions  { background: rgba(59,130,246,0.15);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
.comp-badge.premiere   { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.comp-badge.laliga     { background: rgba(239,68,68,0.12);   color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.comp-badge.bundesliga { background: rgba(220,38,38,0.12);   color: #fca5a5; border: 1px solid rgba(220,38,38,0.25); }
.comp-badge.serie-a    { background: rgba(37,99,235,0.12);   color: #93c5fd; border: 1px solid rgba(37,99,235,0.25); }
.comp-badge.ligue1     { background: rgba(255,255,255,0.06); color: #e5e5e5; border: 1px solid rgba(255,255,255,0.12); }
.comp-badge.top        { background: var(--color-gold-bg);   color: var(--color-gold); border: 1px solid rgba(255,215,0,0.3); }

/* ── STATS CARDS COLORÉES ────────────────────────────────── */
.stat-card-live {
    border-left: 3px solid var(--color-live) !important;
    background: linear-gradient(135deg, var(--color-live-bg), var(--dark-card)) !important;
}
.stat-card-soon {
    border-left: 3px solid var(--color-soon) !important;
    background: linear-gradient(135deg, var(--color-soon-bg), var(--dark-card)) !important;
}
.stat-card-gold {
    border-left: 3px solid var(--color-gold) !important;
    background: linear-gradient(135deg, var(--color-gold-bg), var(--dark-card)) !important;
}

/* ── CARTONS FOOTBALL ────────────────────────────────────── */
.card-yellow {
    display: inline-block;
    width: 12px; height: 16px;
    background: var(--color-card-yellow);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(255,215,0,0.4);
    vertical-align: middle;
}
.card-red {
    display: inline-block;
    width: 12px; height: 16px;
    background: var(--color-card-red);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(255,59,59,0.4);
    vertical-align: middle;
}

/* ── SECTION LIVE : header coloré ───────────────────────── */
.live-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--color-live-border);
    margin-bottom: 16px;
}
.live-section-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-live);
    margin: 0;
}

/* ── COTE EN MOUVEMENT ───────────────────────────────────── */
.odd-rising  { animation: oddRise  0.6s ease; }
.odd-falling { animation: oddFall  0.6s ease; }

@keyframes oddRise {
    0%   { background: rgba(16,217,126,0.3); color: #10d97e; }
    100% { background: transparent; }
}
@keyframes oddFall {
    0%   { background: rgba(255,68,68,0.3); color: #ff4444; }
    100% { background: transparent; }
}

/* ── SPORT PILLS colorés dans h-scroll ──────────────────── */
.h-scroll-item.sport-football { border-color: rgba(16,217,126,0.15); }
.h-scroll-item.sport-basketball { border-color: rgba(249,115,22,0.15); }
.h-scroll-item.sport-tennis { border-color: rgba(255,215,0,0.15); }
.h-scroll-item.sport-live { border-color: rgba(255,68,68,0.25); background: rgba(255,68,68,0.08); }
.h-scroll-item.sport-live:hover { background: rgba(255,68,68,0.15); }
.h-scroll-item.sport-live.active { background: rgba(255,68,68,0.2); border-color: rgba(255,68,68,0.5); color: var(--color-live); }