/**
 * visitor-stats-public.css
 *
 * Styles du widget public [ecla_visiteurs].
 * Mobile-first. Charte graphique BusyBook.
 *
 * @package AlibabaNiger
 * @since   1.6.0
 */

/* ══════════════════════════════════════════════════════════════════
   WIDGET PRINCIPAL
══════════════════════════════════════════════════════════════════ */
.ecla-visitors-widget {
    --vt-green        : #2e7d32;
    --vt-green-light  : #e8f5e9;
    --vt-orange       : #ff9900;
    --vt-blue         : #003366;
    --vt-text         : #1a2744;
    --vt-muted        : #546e7a;
    --vt-border       : rgba(21,101,192,0.12);
    --vt-radius       : 12px;
    --vt-bar-bg       : #e3f2fd;
    --vt-bar-fill     : #2e7d32;

    background    : #fff;
    border        : 1.5px solid var(--vt-border);
    border-radius : var(--vt-radius);
    padding       : 20px 16px;
    max-width     : 500px;
    font-family   : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow    : 0 4px 20px rgba(0,0,0,0.07);
}

/* ── Titre ────────────────────────────────────────────────────── */
.ecla-visitors-title {
    font-size     : 1.05rem;
    font-weight   : 800;
    color         : var(--vt-green);
    margin        : 0 0 14px;
    padding-bottom: 8px;
    border-bottom : 2px solid var(--vt-orange);
    line-height   : 1.2;
}

/* ── Total général ─────────────────────────────────────────────── */
.ecla-visitors-total {
    display         : flex;
    align-items     : baseline;
    gap             : 8px;
    margin-bottom   : 16px;
    padding         : 10px 14px;
    background      : var(--vt-green-light);
    border-radius   : 8px;
    border-left     : 4px solid var(--vt-green);
}

.ecla-visitors-total-number {
    font-size   : 1.8rem;
    font-weight : 900;
    color       : var(--vt-green);
    line-height : 1;
}

.ecla-visitors-total-label {
    font-size  : 0.85rem;
    color      : var(--vt-muted);
    font-weight: 600;
}

/* ── Liste des pays ────────────────────────────────────────────── */
.ecla-visitors-list {
    list-style  : none;
    padding     : 0;
    margin      : 0;
    display     : flex;
    flex-direction: column;
    gap         : 10px;
}

/* ── Item pays ─────────────────────────────────────────────────── */
.ecla-visitors-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ecla-visitors-item-header {
    display     : flex;
    align-items : center;
    gap         : 6px;
    flex-wrap   : wrap;
}

.ecla-visitors-flag {
    font-size   : 1.2rem;
    line-height : 1;
    flex-shrink : 0;
}

.ecla-visitors-country {
    flex       : 1;
    font-size  : 0.88rem;
    font-weight: 600;
    color      : var(--vt-text);
    min-width  : 80px;
}

.ecla-visitors-count {
    font-size  : 0.9rem;
    font-weight: 800;
    color      : var(--vt-blue);
    white-space: nowrap;
}

.ecla-visitors-percent {
    font-size  : 0.78rem;
    color      : var(--vt-muted);
    white-space: nowrap;
    min-width  : 36px;
    text-align : right;
}

/* ── Barre de progression ──────────────────────────────────────── */
.ecla-visitors-bar-track {
    width         : 100%;
    height        : 6px;
    background    : var(--vt-bar-bg);
    border-radius : 20px;
    overflow      : hidden;
}

.ecla-visitors-bar-fill {
    height        : 100%;
    background    : linear-gradient(90deg, var(--vt-green) 0%, #43a047 100%);
    border-radius : 20px;
    transition    : width 0.6s ease;
    min-width     : 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE ≥ 480px
══════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
    .ecla-visitors-widget {
        padding : 24px 20px;
    }

    .ecla-visitors-title {
        font-size : 1.15rem;
    }

    .ecla-visitors-total-number {
        font-size : 2rem;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .ecla-visitors-bar-fill {
        transition: none;
    }
}