/* ==========================================================
   ZS Insight — Frontend Widget Styles
   ========================================================== */

.zs-insight-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.zs-insight-no-access {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
}

/* ── Realtime Counter ── */
.zs-realtime-count-widget {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f8f9fa;
    border-radius: 20px;
    border: 1px solid #e9ecef;
}
.zs-realtime-count-widget .zs-count {
    font-size: 18px;
    font-weight: 700;
    color: #2271b1;
    min-width: 24px;
    display: inline-block;
}
.zs-realtime-count-widget .zs-label {
    font-size: 13px;
    color: #64748b;
}
.zs-realtime-dot {
    width: 8px;
    height: 8px;
    background: #00a32a;
    border-radius: 50%;
    animation: zs-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes zs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Trending / Popular Posts List ── */
.zs-trending-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}
.zs-trending-posts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.zs-trending-posts li:last-child {
    border-bottom: none;
}
.zs-trending-rank {
    width: 24px;
    height: 24px;
    background: #2271b1;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.zs-trending-title {
    flex: 1;
    font-weight: 500;
    min-width: 60px;
}
.zs-trending-title a {
    color: #1e293b;
    text-decoration: none;
}
.zs-trending-title a:hover {
    color: #2271b1;
    text-decoration: underline;
}
.zs-trending-views {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
}

/* ── Post Analytics Cards ── */
.zs-post-analytics {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}
.zs-stat-card {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.zs-stat-card .zs-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #2271b1;
    display: block;
}
.zs-stat-card .zs-stat-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Skeleton Loading ── */
.zs-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: zs-shimmer 1.5s infinite;
    border-radius: 4px;
    min-height: 20px;
    color: transparent !important;
}
@keyframes zs-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Dashboard Widget ── */
.zs-insight-widget[data-widget="dashboard"] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* ==========================================================
   LTR Overrides  (dir="ltr" is directly on .zs-insight-widget)
   Forces LTR when plugin language is English but WP locale is RTL
   ========================================================== */
.zs-insight-widget[dir="ltr"],
.zs-ltr .zs-insight-widget {
    direction: ltr !important;
    text-align: left !important;
}
.zs-insight-widget[dir="ltr"] table th,
.zs-ltr .zs-insight-widget table th,
.zs-insight-widget[dir="ltr"] table td,
.zs-ltr .zs-insight-widget table td {
    text-align: left !important;
}
.zs-insight-widget[dir="ltr"] ul,
.zs-ltr .zs-insight-widget ul {
    direction: ltr;
    text-align: left;
}

/* ==========================================================
   RTL Overrides  (dir="rtl" on .zs-insight-widget or body)
   ========================================================== */
.zs-insight-widget[dir="rtl"],
[dir="rtl"] .zs-insight-widget,
.zs-rtl .zs-insight-widget {
    direction: rtl;
    text-align: right;
}

/* Flip skeleton shimmer direction for RTL */
.zs-insight-widget[dir="rtl"] .zs-skeleton,
[dir="rtl"] .zs-skeleton,
.zs-rtl .zs-skeleton {
    animation-direction: reverse;
}

/* Tables default right-aligned text */
.zs-insight-widget[dir="rtl"] table th,
[dir="rtl"] .zs-insight-widget table th,
.zs-rtl .zs-insight-widget table th {
    text-align: right;
}

/* Stat Cards keep center */
.zs-insight-widget[dir="rtl"] .zs-stat-card,
[dir="rtl"] .zs-stat-card,
.zs-rtl .zs-stat-card {
    text-align: center;
}

/* Trending list — row direction is handled by flex gap, no flip needed */

/* Who's Online header — keep flex left-to-right for the dot indicator */
.zs-insight-widget[dir="rtl"] .zs-whos-online-header,
[dir="rtl"] .zs-whos-online-header,
.zs-rtl .zs-whos-online-header {
    flex-direction: row-reverse;
}

/* ==========================================================
   Post Analytics Widget
   ========================================================== */
.zs-post-analytics-widget { width: 100%; }
.zs-pa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.zs-pa-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.zs-pa-period {
    font-size: 11px;
    color: #666;
    text-transform: capitalize;
}
.zs-pa-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.zs-pa-card {
    flex: 1;
    min-width: 100px;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
}
.zs-pa-value {
    font-size: 24px;
    font-weight: 700;
    color: #f5a623;
    line-height: 1;
    margin-bottom: 6px;
}
.zs-pa-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.zs-trend-up   { color: #4caf50; }
.zs-trend-down { color: #f44336; }
.zs-trend-icon { font-size: 14px; margin-left: 4px; }
.zs-pa-last-visit {
    width: 100%;
    font-size: 11px;
    color: #555;
    text-align: right;
    margin-top: 8px;
}
.zs-pa-loading {
    text-align: center;
    color: #888;
    padding: 24px;
    font-size: 13px;
}
.zs-empty-state {
    text-align: center;
    color: #777;
    padding: 20px;
    font-size: 13px;
}
.zs-scroll-bar {
    width: 100%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.zs-scroll-bar > div {
    height: 100%;
    background: #f5a623;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* RTL for post analytics */
.zs-insight-widget[dir="rtl"] .zs-pa-header,
[dir="rtl"] .zs-pa-header,
.zs-rtl .zs-pa-header { flex-direction: row-reverse; }
.zs-insight-widget[dir="rtl"] .zs-trend-icon,
[dir="rtl"] .zs-trend-icon,
.zs-rtl .zs-trend-icon { margin-left: 0; margin-right: 4px; }
.zs-insight-widget[dir="rtl"] .zs-pa-last-visit,
[dir="rtl"] .zs-pa-last-visit,
.zs-rtl .zs-pa-last-visit { text-align: left; }

/* ─────────────────────────────────────────────
 * Traffic Insights Widget
 * ───────────────────────────────────────────── */
.zs-traffic-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.zs-ti-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    flex: 1 1 300px;
    min-width: 280px;
}

.zs-ti-trend-section {
    flex: 1 1 100%;
}

.zs-ti-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #222;
}

/* Donut chart layout */
.zs-ti-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
}

.zs-ti-donut-svg {
    flex-shrink: 0;
}

/* Legend */
.zs-ti-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zs-ti-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.zs-ti-legend-label {
    color: #444;
}

.zs-ti-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Trend chart */
.zs-ti-trend-wrap {
    width: 100%;
    overflow-x: auto;
}

.zs-ti-trend {
    width: 100%;
    height: auto;
    min-height: 200px;
}

.zs-ti-trend-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px;
    color: #555;
}

.zs-ti-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Tooltips ── */
.zs-ti-donut-wrap,
.zs-ti-trend-wrap {
    position: relative;
}

.zs-ti-tooltip,
.zs-ti-chart-tooltip {
    position: absolute;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    line-height: 1.6;
}

.zs-ti-chart-tooltip {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
}

/* Donut segment hover effect */
.zs-ti-donut-seg {
    transition: stroke-width 0.2s ease;
}

/* Trend dot transition */
.zs-ti-dot-sess,
.zs-ti-dot-pv {
    transition: r 0.15s ease;
}

/* Responsive: stack donut charts vertically on small screens */
@media (max-width: 600px) {
    .zs-ti-donut-wrap {
        flex-direction: column;
    }
    .zs-ti-section {
        min-width: 0;
    }
}