/* ═══════════════════════════════════════════════════════════════
   Baseball TV France — Web integrations CSS
   Uses JNews variables and patterns for consistency.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --btv-primary: #cc000a;
    --btv-primary-hover: #a30008;
    --btv-navy: #002866;
    --btv-bg: #f8fafc;
    --btv-card: #ffffff;
    --btv-border: #e2e8f0;
    --btv-text: #334155;
    --btv-text-muted: #94a3b8;
    --btv-radius: 10px;
}

/* Dark mode variable overrides — maps BTV vars to JNews dark variables */
.jnews-dark-mode {
    --btv-bg: var(--j-bg-color, #1A1A1A);
    --btv-card: var(--j-darkgrey-bg-color, #282828);
    --btv-border: var(--j-border-color, #303030);
    --btv-text: var(--j-link-txt-color, #ffffff);
    --btv-text-muted: var(--j-meta-txt-color, #8B8B8B);
}

/* ── ARTICLE REACTIONS ──────────────────────────────────────── */

.btv-reactions-container {
    margin: 20px 0;
    padding: 16px 0;
    border-top: 1px solid var(--btv-border);
}

/* Hide inline reactions on mobile — they're in the action bar instead */
@media (max-width: 768px) {
    .btv-reactions-container {
        display: none;
    }
}

.btv-reactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.btv-reactions-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--btv-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btv-reactions-total {
    font-size: 12px;
    color: var(--btv-text-muted);
}

.btv-reactions-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btv-reaction {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--btv-border);
    border-radius: 24px;
    background: var(--btv-card);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--btv-text);
}

.btv-reaction:hover {
    border-color: currentColor;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btv-reaction.active {
    background: #fef2f2;
}

.btv-reaction-icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
}

ion-icon.btv-reaction-icon {
    font-size: 18px;
}

.btv-reaction-label {
    font-weight: 500;
}

.btv-reaction-count {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
}

/* ── POLLS ──────────────────────────────────────────────────── */

.btv-poll-container {
    margin: 24px 0;
    padding: 24px;
    background: var(--btv-bg);
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
}

.btv-poll-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--btv-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.btv-poll-question {
    font-size: 18px;
    font-weight: 700;
    color: var(--btv-text);
    margin-bottom: 16px;
    line-height: 1.4;
}

.btv-poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btv-poll-option {
    position: relative;
    padding: 12px 16px;
    border: 1.5px solid var(--btv-border);
    border-radius: 8px;
    background: var(--btv-card);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--btv-text);
    transition: all 0.2s;
    overflow: hidden;
}

.btv-poll-option:hover:not(.show-results) {
    border-color: var(--btv-primary);
}

.btv-poll-option.voted {
    border-color: var(--btv-primary);
    font-weight: 700;
}

.btv-poll-option-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(204, 0, 10, 0.08);
    transition: width 0.5s ease;
    z-index: 0;
}

.btv-poll-option-text {
    position: relative;
    z-index: 1;
}

.btv-poll-option-pct {
    position: relative;
    z-index: 1;
    float: right;
    font-weight: 700;
    color: var(--btv-primary);
}

.btv-poll-total {
    margin-top: 12px;
    font-size: 12px;
    color: var(--btv-text-muted);
}

.btv-poll-ends {
    font-size: 11px;
    color: var(--btv-text-muted);
    margin-top: 4px;
}

/* ── MY STATS / PROGRESSION ─────────────────────────────────── */

.btv-stats-page {
    padding: 4px 0;
}

/* Level card */
.btv-level-card {
    background: linear-gradient(135deg, var(--btv-primary) 0%, var(--btv-navy) 100%);
    color: #fff;
    border-radius: var(--btv-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.btv-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.btv-level-name {
    font-size: 20px;
    font-weight: 700;
}
.btv-level-xp {
    font-size: 16px;
    font-weight: 700;
    opacity: 0.9;
}
.btv-level-bar-wrap {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.btv-level-bar {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    transition: width 0.8s ease;
}
.btv-level-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.75;
}

/* KPI grid */
.btv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 480px) {
    .btv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.btv-kpi-card {
    background: var(--btv-card);
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    padding: 16px;
    text-align: center;
}
.btv-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--btv-text);
    line-height: 1.2;
}
.btv-kpi-label {
    font-size: 12px;
    color: var(--btv-text-muted);
    margin-top: 4px;
}

/* Badges section */
.btv-badges-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--btv-text);
    margin: 0 0 12px;
}
.btv-badges-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btv-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--btv-card);
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
}
.btv-badge-row.locked {
    opacity: 0.7;
}
.btv-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btv-badge-icon ion-icon {
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.btv-badge-info {
    flex: 1;
    min-width: 0;
}
.btv-badge-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--btv-text);
}
.btv-badge-desc {
    font-size: 12px;
    color: var(--btv-text-muted);
    margin-top: 2px;
}
.btv-badge-progress-wrap {
    height: 4px;
    background: var(--btv-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.btv-badge-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.btv-badge-progress-text {
    font-size: 10px;
    color: var(--btv-text-muted);
    margin-top: 2px;
}
.btv-badge-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Dark mode stats */
.jnews-dark-mode .btv-level-card {
    background: linear-gradient(135deg, var(--btv-primary) 0%, var(--j-dark-bg-color, #131313) 100%);
}
.jnews-dark-mode .btv-kpi-card,
.jnews-dark-mode .btv-badge-row {
    background: var(--btv-card);
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-kpi-value,
.jnews-dark-mode .btv-badge-name,
.jnews-dark-mode .btv-badges-section h4 {
    color: var(--btv-text);
}
.jnews-dark-mode .btv-badge-row.locked {
    opacity: 0.5;
}
.jnews-dark-mode .btv-badge-progress-wrap {
    background: var(--btv-border);
}

/* ── SUGGESTIONS ────────────────────────────────────────────── */

/* Suggestions block — uses native JNews postblock classes, just needs spacing */
.btv-suggestions-block {
    margin-top: 24px;
}

/* ── BOOKMARK BUTTON ────────────────────────────────────────── */

/* Hide JNews native bookmark — replaced by BTV bookmark (synced with app). */
.jeg_meta_bookmark:not(.btv-bookmark-btn) {
    display: none !important;
}

.btv-bookmark-btn {
    cursor: pointer;
    transition: color 0.2s;
}

/* ── NOTIFICATIONS BELL ─────────────────────────────────────── */

.btv-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.btv-notif-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    position: relative;
}
.btv-notif-toggle svg {
    width: 20px;
    height: 20px;
}
.btv-notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--btv-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Dropdown */
.btv-notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 420px;
    background: var(--btv-card);
    border-radius: var(--btv-radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 100001;
    flex-direction: column;
    overflow: hidden;
}
.btv-notif-dropdown.open {
    display: flex;
}
@media (max-width: 480px) {
    .btv-notif-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
    }
}

.btv-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--btv-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--btv-text);
    flex-shrink: 0;
}
.btv-notif-read-all {
    background: none;
    border: none;
    color: var(--btv-text-muted);
    cursor: pointer;
    padding: 4px;
}
.btv-notif-read-all:hover {
    color: var(--btv-primary);
}

.btv-notif-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.btv-notif-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.btv-notif-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--btv-text-muted);
    font-size: 14px;
}

/* Notification item */
.btv-notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
    position: relative;
    cursor: pointer;
    background: rgba(204, 0, 10, 0.03);
}
.btv-notif-item + .btv-notif-item {
    border-top: 1px solid var(--btv-border);
}
.btv-notif-item.read {
    background: transparent;
}
.btv-notif-item:hover {
    background: var(--btv-bg);
}

.btv-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--btv-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--btv-text-muted);
}

.btv-notif-content {
    flex: 1;
    min-width: 0;
}
.btv-notif-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--btv-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btv-notif-body {
    font-size: 12px;
    color: var(--btv-text-muted);
    line-height: 1.3;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btv-notif-time {
    font-size: 11px;
    color: var(--btv-text-muted);
    margin-top: 3px;
    opacity: 0.7;
}

.btv-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--btv-primary);
    flex-shrink: 0;
    align-self: center;
}

/* Dark mode notifications */
.jnews-dark-mode .btv-notif-dropdown {
    background: var(--btv-bg);
}
.jnews-dark-mode .btv-notif-header {
    border-color: var(--btv-border);
    color: var(--btv-text);
}
.jnews-dark-mode .btv-notif-item + .btv-notif-item {
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-notif-item {
    background: rgba(204, 0, 10, 0.05);
}
.jnews-dark-mode .btv-notif-item.read {
    background: transparent;
}
.jnews-dark-mode .btv-notif-item:hover {
    background: var(--btv-card);
}
.jnews-dark-mode .btv-notif-icon {
    background: var(--btv-card);
}
.jnews-dark-mode .btv-notif-title {
    color: var(--btv-text);
}

.btv-bookmark-btn.active a,
.btv-bookmark-btn.active i {
    color: var(--btv-primary) !important;
}

/* ── SMART APP BANNER ───────────────────────────────────────── */

.btv-smart-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--btv-navy);
    color: #fff;
    font-size: 13px;
    position: relative;
    z-index: 9999;
}

.btv-smart-banner-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

.btv-smart-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.btv-smart-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btv-smart-banner-text strong {
    font-size: 13px;
}

.btv-smart-banner-text span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.btv-smart-banner-btn {
    padding: 6px 14px;
    background: var(--btv-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

/* ── CTA APP ────────────────────────────────────────────────── */

.btv-cta-app {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 24px 0;
    padding: 24px;
    background: linear-gradient(135deg, var(--btv-navy), #003d99);
    border-radius: var(--btv-radius);
    color: #fff;
}

@media (max-width: 600px) {
    .btv-cta-app {
        flex-direction: column;
        text-align: center;
    }
}

.btv-cta-content {
    flex: 1;
}

.btv-cta-content h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #fff;
}

.btv-cta-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.btv-cta-buttons {
    display: flex;
    gap: 8px;
}

.btv-cta-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btv-cta-ios {
    background: #fff;
    color: var(--btv-navy);
}

.btv-cta-android {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── REPORT BUTTON ──────────────────────────────────────────── */

.btv-report-comment {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--btv-text-muted);
    font-size: 12px;
    padding: 2px 6px;
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.btv-report-comment:hover {
    opacity: 1;
    color: var(--btv-primary);
}

/* ── BIRTHDAY BADGE ─────────────────────────────────────────── */

.btv-birthday-badge {
    display: inline-block;
    font-size: 14px;
    margin-left: 4px;
    cursor: help;
}

/* ── DARK MODE SUPPORT ──────────────────────────────────────── */

.jnews-dark-mode .btv-reactions-container,
.jnews-dark-mode .btv-poll-container {
    border-color: var(--btv-border);
}

.jnews-dark-mode .btv-reaction,
.jnews-dark-mode .btv-poll-option {
    background: var(--btv-card);
    border-color: var(--btv-border);
    color: var(--btv-text);
}

.jnews-dark-mode .btv-reaction.active {
    background: #2d1f1f;
}


.jnews-dark-mode .btv-poll-container {
    background: var(--btv-card);
}

.jnews-dark-mode .btv-poll-question {
    color: var(--btv-text);
}

/* ── ACCOUNT NAV BTV ────────────────────────────────────────── */

.btv-account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.btv-account-nav ul li a {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: var(--btv-text);
    text-decoration: none;
    border-bottom: 1px solid var(--btv-border);
}

.btv-account-nav ul li a:hover {
    color: var(--btv-primary);
}

/* ── BOOKMARKS LIST ─────────────────────────────────────────── */

.btv-bookmarks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btv-bookmark-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    background: var(--btv-card);
}

.btv-bookmark-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.btv-bookmark-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btv-bookmark-info a {
    color: var(--btv-text);
    text-decoration: none;
    line-height: 1.4;
}

.btv-bookmark-info a:hover {
    color: var(--btv-primary);
}

.btv-bookmark-date {
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* ── READING HISTORY ────────────────────────────────────────── */

.btv-history-count {
    font-size: 13px;
    color: var(--btv-text-muted);
    margin: 0 0 12px;
}

.btv-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btv-history-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    background: var(--btv-card);
    text-decoration: none;
    transition: box-shadow 0.15s;
}
.btv-history-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.btv-history-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.btv-history-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.btv-history-info strong {
    font-size: 14px;
    color: var(--btv-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.btv-history-cat {
    font-size: 10px;
    font-weight: 700;
    color: var(--btv-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btv-history-date {
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* Dark mode history */
.jnews-dark-mode .btv-history-item {
    background: var(--btv-card);
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-history-info strong {
    color: var(--btv-text);
}

/* ── WARNINGS LIST ──────────────────────────────────────────── */

.btv-warnings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btv-warning-item {
    padding: 16px;
    border: 1px solid #fcd34d;
    background: #fefce8;
    border-radius: var(--btv-radius);
}

.btv-warning-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.btv-warning-badge {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
}

.btv-warning-date {
    font-size: 11px;
    color: var(--btv-text-muted);
}

.btv-warning-item p {
    font-size: 14px;
    color: var(--btv-text);
    margin: 0 0 8px;
}

.btv-warning-meta {
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* ── REPORTS LIST ───────────────────────────────────────────── */

.btv-reports-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btv-report-item {
    padding: 16px;
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    background: var(--btv-card);
}

.btv-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--btv-text);
}

.btv-report-status {
    font-size: 12px;
    font-weight: 500;
}

.btv-report-item p {
    font-size: 13px;
    color: var(--btv-text-muted);
    margin: 0 0 8px;
}

.btv-report-date {
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* ── EMPTY STATE ────────────────────────────────────────────── */

.btv-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--btv-text-muted);
}

.btv-empty-state p {
    font-size: 15px;
}

/* ── ACCOUNT PROFILE BTV FIELDS ─────────────────────────────── */

.btv-profile-label h3 {
    color: var(--btv-primary);
    font-size: 16px;
    margin-top: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--btv-primary);
}

/* ── AUTHOR PAGE ENRICHED ───────────────────────────────────── */

.btv-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.btv-badge-item {
    font-size: 12px;
    background: #f0fafa;
    padding: 4px 12px;
    border-radius: 16px;
    color: #334155;
    white-space: nowrap;
}

.btv-fav-team {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--btv-text);
}

.btv-team-logo {
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.btv-stats-grid {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.btv-stat-card {
    text-align: center;
    padding: 12px 16px;
    background: var(--btv-bg);
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    min-width: 70px;
}

.btv-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--btv-primary);
}

.btv-stat-label {
    font-size: 10px;
    color: var(--btv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btv-birthday-badge-author {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 24px;
}

.btv-supporter-badge {
    font-size: 16px;
    margin-left: 4px;
}

.jeg_author_image {
    position: relative;
}

/* ── SCORES WIDGET ──────────────────────────────────────────── */

.btv-scores-widget {
    margin: 20px 0;
}

.btv-scores-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--btv-text);
    margin-bottom: 12px;
}

.btv-scores-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btv-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    background: var(--btv-card);
}

.btv-score-card.live {
    border-color: var(--btv-primary);
    border-width: 2px;
}

.btv-score-team {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--btv-text);
}

.btv-score-team.right {
    justify-content: flex-end;
}

.btv-team-logo-sm {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.btv-score-result {
    text-align: center;
    min-width: 80px;
}

.btv-score-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--btv-text);
}

.btv-score-live {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--btv-primary);
    text-transform: uppercase;
    animation: btv-pulse 1.5s infinite;
}

@keyframes btv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.btv-score-time {
    display: block;
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* ── MUR DES MOMENTS ────────────────────────────────────────── */

.btv-wall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
@media (max-width: 768px) {
    .btv-wall-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.btv-wall-item {
    position: relative;
    border-radius: var(--btv-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.btv-wall-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btv-wall-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    padding: 16px 12px 12px;
}

.btv-wall-user {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.btv-wall-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.btv-wall-user span {
    font-size: 12px;
    font-weight: 600;
}

.btv-wall-comment {
    font-size: 12px;
    margin: 4px 0;
    opacity: 0.9;
    font-style: italic;
}

.btv-wall-location {
    font-size: 11px;
    opacity: 0.7;
}

.btv-wall-rating {
    font-size: 12px;
    margin-top: 4px;
}

/* ── CHECK-INS LIST ─────────────────────────────────────────── */

.btv-checkins-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btv-checkin-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    background: var(--btv-card);
}

.btv-checkin-photo {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.btv-checkin-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btv-checkin-rating {
    font-size: 14px;
}

.btv-checkin-info p {
    font-size: 13px;
    color: var(--btv-text);
    margin: 0;
    font-style: italic;
}

.btv-checkin-location {
    font-size: 11px;
    color: var(--btv-primary);
}

.btv-checkin-date {
    font-size: 11px;
    color: var(--btv-text-muted);
}

/* ── FAQ ────────────────────────────────────────────────────── */

.btv-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btv-faq-item {
    border: 1px solid var(--btv-border);
    border-radius: var(--btv-radius);
    overflow: hidden;
}

.btv-faq-question {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    color: var(--btv-text);
    cursor: pointer;
    background: var(--btv-bg);
    list-style: none;
}

.btv-faq-question::-webkit-details-marker {
    display: none;
}

.btv-faq-question::before {
    content: '▸ ';
    color: var(--btv-primary);
}

.btv-faq-item[open] .btv-faq-question::before {
    content: '▾ ';
}

.btv-faq-answer {
    padding: 0 16px 16px;
    font-size: 14px;
    color: var(--btv-text);
    line-height: 1.6;
}

/* ── LEGAL CONTENT ──────────────────────────────────────────── */

.btv-legal-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--btv-text);
}

.btv-legal-content h2 { font-size: 22px; margin: 24px 0 12px; }
.btv-legal-content h3 { font-size: 17px; margin: 20px 0 8px; color: var(--btv-navy); }
.btv-legal-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.btv-legal-content th { background: var(--btv-bg); padding: 8px; text-align: left; font-size: 12px; }
.btv-legal-content td { padding: 8px; border-bottom: 1px solid var(--btv-border); font-size: 13px; }
.btv-legal-content ul { padding-left: 20px; }
.btv-legal-content li { margin-bottom: 4px; }

/* ── APP WIDGET ─────────────────────────────────────────────── */

.btv-widget-app {
    background: linear-gradient(135deg, var(--btv-navy), #003d99);
    color: #fff;
    padding: 20px;
    border-radius: var(--btv-radius);
    text-align: center;
}

.btv-widget-app h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
}

.btv-widget-app p {
    font-size: 13px;
    opacity: 0.85;
    margin: 0 0 16px;
    line-height: 1.5;
}

.btv-widget-btn {
    display: block;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--btv-navy);
    background: #fff;
}

.btv-widget-btn.android {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

/* ── Hide native JNews comments (replaced by panel) ─────────── */
.jnews_comment_container { display: none !important; }

/* ── COMMENT PANEL ──────────────────────────────────────────── */

/* Overlay / backdrop */
.btv-cpanel-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background 0.3s ease;
}
.btv-cpanel-overlay.open {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

/* Panel — desktop: slide from right */
.btv-cpanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--btv-card);
    display: flex;
    flex-direction: column;
    z-index: 100000;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btv-cpanel-overlay.open .btv-cpanel {
    transform: translateX(0);
}

/* Drag handle (mobile only) */
.btv-cpanel-handle {
    display: none;
}

/* Header */
.btv-cpanel-header {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--btv-border);
}
.btv-cpanel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btv-cpanel-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--btv-text);
    margin: 0;
}
.btv-cpanel-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--btv-text-muted);
    margin-left: 6px;
}
.btv-cpanel-count:not(:empty)::before { content: '('; }
.btv-cpanel-count:not(:empty)::after { content: ')'; }
.btv-cpanel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--btv-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
}
.btv-cpanel-close:hover {
    background: var(--btv-bg);
    color: var(--btv-text);
}

/* Body (scrollable) */
.btv-cpanel-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 20px;
    -webkit-overflow-scrolling: touch;
}

/* Loading spinner */
.btv-cpanel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}
.btv-cpanel-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--btv-border);
    border-top-color: var(--btv-primary);
    border-radius: 50%;
    animation: btv-spin 0.7s linear infinite;
}
@keyframes btv-spin { to { transform: rotate(360deg); } }

/* Empty state */
.btv-cpanel-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--btv-text-muted);
    font-size: 14px;
}
.btv-cpanel-empty p {
    margin: 0;
}

/* ── Comment item ── */
.btv-cp-comment {
    display: flex;
    gap: 10px;
    padding: 14px 0;
}
.btv-cp-comment + .btv-cp-comment:not(.btv-cp-reply) {
    border-top: 1px solid var(--btv-border);
}

/* Avatar */
.btv-cp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Reply indent */
.btv-cp-reply {
    margin-left: 46px;
    padding-left: 14px;
    border-left: 2px solid var(--btv-border);
    border-top: none !important;
}
.btv-cp-reply .btv-cp-avatar {
    width: 28px;
    height: 28px;
}

/* Content */
.btv-cp-content {
    flex: 1;
    min-width: 0;
}

/* Header row */
.btv-cp-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.btv-cp-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--btv-text);
}
.btv-cp-badge {
    display: inline-flex;
    align-items: center;
}
.btv-cp-bday {
    color: var(--btv-primary);
}
.btv-cp-time {
    font-size: 11px;
    color: var(--btv-text-muted);
    margin-left: auto;
}

/* Comment text */
.btv-cp-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--btv-text);
    margin-bottom: 6px;
    word-break: break-word;
}
.btv-cp-text p { margin: 0 0 4px; }
.btv-cp-text p:last-child { margin: 0; }

/* Actions row */
.btv-cp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

/* Vote buttons (like / dislike) */
.btv-cp-vote {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 3px 8px;
    color: var(--btv-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.btv-cp-vote:hover {
    background: var(--btv-bg);
}
.btv-cp-like.active {
    color: #0d9488;
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.2);
}
.btv-cp-dislike.active {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.06);
    border-color: rgba(185, 28, 28, 0.15);
}
.btv-cp-vote-count {
    font-size: 12px;
    font-weight: 500;
}

/* Reply button */
.btv-cp-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--btv-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 4px;
}
.btv-cp-reply-btn:hover { opacity: 0.8; }

/* Report button in panel */
.btv-cp-report {
    background: none;
    border: none;
    color: var(--btv-text-muted);
    cursor: pointer;
    padding: 3px 4px;
    opacity: 0.5;
    transition: all 0.15s;
    margin-left: auto;
}
.btv-cp-report:hover {
    opacity: 1;
    color: var(--btv-primary);
}

/* ── Reply indicator bar ── */
.btv-cpanel-reply-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--btv-bg);
    border-top: 1px solid var(--btv-border);
    font-size: 13px;
    color: var(--btv-text-muted);
}
.btv-cpanel-reply-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btv-cpanel-cancel-reply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--btv-text-muted);
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}
.btv-cpanel-cancel-reply:hover {
    background: var(--btv-border);
}

/* ── Footer (input area) ── */
.btv-cpanel-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--btv-border);
    background: var(--btv-card);
}
.btv-cpanel-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btv-cpanel-my-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.btv-cpanel-input {
    flex: 1;
    border: 1px solid var(--btv-border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--btv-text);
    background: var(--btv-bg);
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}
.btv-cpanel-input:focus {
    border-color: var(--btv-primary);
}
.btv-cpanel-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--btv-primary);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.btv-cpanel-send:disabled {
    opacity: 0.35;
    cursor: default;
}
.btv-cpanel-send:not(:disabled):hover {
    background: var(--btv-primary-hover);
}

/* Login link in footer */
.btv-cpanel-login {
    display: block;
    text-align: center;
    padding: 12px;
    color: var(--btv-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: var(--btv-bg);
    border-radius: var(--btv-radius);
}
.btv-cpanel-login:hover {
    background: var(--btv-border);
}

/* ── Mobile bottom sheet ── */
@media (max-width: 768px) {
    .btv-cpanel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 92vh;
        height: 92dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .btv-cpanel-overlay.open .btv-cpanel {
        transform: translateY(0);
    }
    .btv-cpanel-handle {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--btv-border);
        border-radius: 2px;
        margin: 0 auto 8px;
    }
    .btv-cpanel-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ── MOBILE ACTION BAR ──────────────────────────────────────── */

/* Hidden on desktop */
.btv-mobile-bar,
.btv-reactions-picker {
    display: none;
}

@media (max-width: 768px) {
    .btv-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: var(--btv-card);
        border-top: 1px solid var(--btv-border);
        padding: 0 16px;
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: center;
        height: 49px;
    }

    .btv-mob-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--btv-text-muted);
        padding: 8px 16px;
        cursor: pointer;
        min-width: 50px;
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.1s;
    }
    .btv-mob-btn:active {
        opacity: 0.6;
    }
    .btv-mob-btn svg,
    .btv-mob-btn ion-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        display: block;
    }
    .btv-mob-count {
        font-size: 14px;
        font-weight: 500;
        color: inherit;
    }

    /* Active bookmark */
    .btv-mob-bookmark.active {
        color: var(--btv-primary);
    }
    .btv-mob-bookmark.active .btv-bk-icon {
        fill: currentColor;
    }

    /* Reactions picker bubble — always display:flex so Ionicons can hydrate */
    .btv-reactions-picker {
        display: flex;
        position: fixed;
        bottom: calc(49px + max(0px, env(safe-area-inset-bottom)) + 12px);
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        z-index: 10000;
        background: var(--btv-card);
        border-radius: 28px;
        padding: 10px 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        flex-direction: row;
        gap: 4px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .btv-reactions-picker.open {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: auto;
    }

    .btv-rp-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 22px;
        border: none;
        background: none;
        cursor: pointer;
        transition: all 0.12s;
        color: var(--btv-text-muted);
    }
    .btv-rp-btn svg,
    .btv-rp-btn ion-icon {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        display: block;
    }
    .btv-rp-btn:active {
        transform: scale(1.2);
    }
    .btv-rp-btn.active {
        transform: scale(1.05);
    }

    /* Add bottom padding to article body so bar doesn't cover content */
    .jeg_main .jeg_inner_content {
        padding-bottom: calc(49px + max(0px, env(safe-area-inset-bottom)) + 12px);
    }
}

/* Dark mode mobile bar */
.jnews-dark-mode .btv-mobile-bar {
    background: var(--btv-bg);
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-reactions-picker {
    background: var(--btv-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Report button (shared between panel and legacy) */
.btv-report-comment {
    background: none;
    border: none;
    color: var(--btv-text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 13px;
    line-height: 1;
    transition: color 0.2s;
}
.btv-report-comment:hover {
    color: var(--btv-primary);
}

/* ── DARK MODE ──────────────────────────────────────────────── */

.jnews-dark-mode .btv-score-card,
.jnews-dark-mode .btv-checkin-item,
.jnews-dark-mode .btv-bookmark-item,
.jnews-dark-mode .btv-report-item {
    background: var(--btv-card);
    border-color: var(--btv-border);
}

.jnews-dark-mode .btv-badge-item {
    background: var(--btv-card);
    color: var(--btv-text);
}

.jnews-dark-mode .btv-stat-card {
    background: var(--btv-card);
    border-color: var(--btv-border);
}

.jnews-dark-mode .btv-faq-question {
    background: var(--btv-card);
    color: var(--btv-text);
}

/* Dark mode — FAQ answer + item border */
.jnews-dark-mode .btv-faq-answer {
    color: var(--j-txt-color, #CACACA);
}
.jnews-dark-mode .btv-faq-item {
    border-color: var(--btv-border);
}

/* Dark mode — texts (var(--btv-text) doesn't auto-switch) */
.jnews-dark-mode .btv-bookmark-info a,
.jnews-dark-mode .btv-report-header,
.jnews-dark-mode .btv-checkin-info p,
.jnews-dark-mode .btv-score-team,
.jnews-dark-mode .btv-score-num,
.jnews-dark-mode .btv-scores-header h3,
.jnews-dark-mode .btv-fav-team,
.jnews-dark-mode .btv-warning-item p {
    color: var(--btv-text);
}

/* Dark mode — warning item */
.jnews-dark-mode .btv-warning-item {
    background: #1c1917;
    border-color: #78350f;
}
.jnews-dark-mode .btv-warning-badge {
    color: #fbbf24;
}

/* Dark mode — legal content */
.jnews-dark-mode .btv-legal-content {
    color: var(--j-txt-color, #CACACA);
}
.jnews-dark-mode .btv-legal-content h2 {
    color: var(--btv-text);
}
.jnews-dark-mode .btv-legal-content h3 {
    color: #93c5fd;
}
.jnews-dark-mode .btv-legal-content th {
    background: var(--btv-card);
    color: var(--btv-text);
}
.jnews-dark-mode .btv-legal-content td {
    border-color: var(--btv-border);
    color: var(--j-txt-color, #CACACA);
}

/* Dark mode — account nav */
.jnews-dark-mode .btv-account-nav ul li {
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-account-nav ul li a {
    color: var(--j-txt-color, #CACACA);
}

/* Dark mode — profile label */
.jnews-dark-mode .btv-profile-label h3 {
    border-color: var(--btv-primary);
}

/* Dark mode — score card border */
.jnews-dark-mode .btv-score-card.live {
    border-color: var(--btv-primary);
}

/* Dark mode — wall */
.jnews-dark-mode .btv-wall-item {
    border-color: var(--btv-border);
}

/* Dark mode — empty state */
.jnews-dark-mode .btv-empty-state {
    color: var(--btv-text-muted);
}

/* Dark mode — smart banner (already dark bg, just border) */
.jnews-dark-mode .btv-smart-banner {
    border-color: var(--btv-border);
}

/* Dark mode — comment panel */
.jnews-dark-mode .btv-cpanel {
    background: var(--btv-bg);
}
.jnews-dark-mode .btv-cpanel-header {
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-cpanel-header h3 {
    color: var(--btv-text);
}
.jnews-dark-mode .btv-cpanel-close:hover {
    background: var(--btv-card);
}
.jnews-dark-mode .btv-cp-author,
.jnews-dark-mode .btv-cp-text {
    color: var(--btv-text);
}
.jnews-dark-mode .btv-cp-comment + .btv-cp-comment:not(.btv-cp-reply) {
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-cp-reply {
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-cp-vote:hover {
    background: var(--btv-card);
}
.jnews-dark-mode .btv-cpanel-reply-bar {
    background: var(--btv-card);
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-cpanel-footer {
    background: var(--btv-bg);
    border-color: var(--btv-border);
}
.jnews-dark-mode .btv-cpanel-input {
    background: var(--btv-card);
    border-color: var(--btv-border);
    color: var(--btv-text);
}
.jnews-dark-mode .btv-cpanel-empty {
    color: var(--btv-text-muted);
}
.jnews-dark-mode .btv-cpanel-login {
    background: var(--btv-card);
    color: var(--btv-primary);
}
.jnews-dark-mode .btv-cpanel-handle {
    background: var(--btv-border);
}