/* ============================================================
   VIEW INSIGHTS PRO — style.css v3.1
   FULL RESPONSIVE: Android / iOS / Tablet / Laptop / Desktop
   Breakpoints:
     < 480px  → small phones (iPhone SE, Android compact)
     480–640px → large phones (iPhone 14 Pro, Samsung S series)
     640–768px → phablets / small tablets
     768–1024px → tablets (iPad, Android tablet)
     1024px+  → laptop / desktop
   ============================================================ */

/* ============================================================
   BUTTON WRAP
   ============================================================ */
.vip-button-wrap {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

/* ============================================================
   INSIGHTS BUTTON
   ============================================================ */
.vip-insights-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #ffffff;
    border: 1.5px solid rgba(75, 192, 192, 0.5);
    border-radius: 40px;
    padding: 13px 26px;
    font-size: 14px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 4px 18px rgba(75, 192, 192, 0.28);
    outline: none;
    /* iOS tap highlight */
    -webkit-tap-highlight-color: transparent;
    /* Minimum touch target 44px height */
    min-height: 48px;
    /* Prevent text selection on tap */
    user-select: none;
    -webkit-user-select: none;
    max-width: 100%;
}
.vip-insights-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(75,192,192,0.18), rgba(153,102,255,0.12));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    pointer-events: none;
}
/* Hover — desktop only */
@media (hover: hover) {
    .vip-insights-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(75,192,192,0.42);
        border-color: rgba(75,192,192,0.9);
    }
    .vip-insights-btn:hover::before { opacity: 1; }
}
/* Active/tap state — all devices */
.vip-insights-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(75,192,192,0.25);
}
.vip-insights-btn:focus-visible {
    outline: 2px solid #4BC0C0;
    outline-offset: 4px;
}

/* Icon cluster */
.vip-btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
}
.vip-chart-icon { display: inline-block; animation: vip-float 3s ease-in-out infinite; }
.vip-eye-icon   { display: inline-block; font-size: 0.9em; margin-left: 3px; animation: vip-float 3s ease-in-out infinite 1s; }
@keyframes vip-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* Live pulse dot */
.vip-pulse-dot {
    width: 8px; height: 8px;
    background: #00e676; border-radius: 50%;
    position: absolute; top: -3px; right: -3px;
    animation: vip-pulse-ring 1.6s ease-in-out infinite;
}
@keyframes vip-pulse-ring {
    0%  { transform:scale(1);   box-shadow:0 0 0 0   rgba(0,230,118,0.7); }
    50% { transform:scale(1.2); box-shadow:0 0 0 5px rgba(0,230,118,0); }
    100%{ transform:scale(1);   box-shadow:0 0 0 0   rgba(0,230,118,0); }
}

/* Button text — bilingual stack */
.vip-btn-text { display:flex; flex-direction:column; line-height:1.3; min-width:80px; }
.vip-btn-en   { display:block; }
.vip-btn-ku   { display:none; font-family:'Segoe UI','Arial Unicode MS',Tahoma,sans-serif; direction:rtl; font-size:0.92em; }

/* View count badge */
.vip-btn-count {
    background: rgba(75,192,192,0.18);
    border: 1px solid rgba(75,192,192,0.38);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px; font-weight: 700;
    color: #4BC0C0;
    white-space: nowrap;
    display: flex; flex-direction: column; align-items: center;
    line-height: 1.4; flex-shrink: 0;
}
.vip-count-ku { display:none; font-family:'Segoe UI','Arial Unicode MS',Tahoma,sans-serif; direction:rtl; }

/* ============================================================
   OVERLAY
   ============================================================ */
.vip-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: flex-end;       /* Bottom sheet on all devices */
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.32s ease;
    /* Prevent scroll bleed on iOS */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}
.vip-overlay.vip-open { opacity: 1; }

/* On tablet and desktop, switch to centered modal */
@media (min-width: 768px) {
    .vip-overlay {
        align-items: center;
        padding: 20px;
    }
}

/* ============================================================
   MODAL
   ============================================================ */
.vip-modal {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(75,192,192,0.22);
    /* Bottom sheet: rounded top corners only on mobile */
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
    /* Fill most of screen height on mobile */
    max-height: 92vh;
    min-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    /* Bottom sheet slide-up animation */
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.16,1,0.3,1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.vip-overlay.vip-open .vip-modal { transform: translateY(0); }

/* Drag handle — mobile only */
.vip-modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 2px;
    margin: 12px auto 0;
}

/* Tablet / desktop: full rounded modal */
@media (min-width: 768px) {
    .vip-modal {
        border-radius: 18px;
        max-width: 720px;
        max-height: 88vh;
        min-height: auto;
        transform: translateY(28px) scale(0.97);
        box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
    }
    .vip-overlay.vip-open .vip-modal { transform: translateY(0) scale(1); }
    .vip-modal::before { display: none; } /* hide drag handle on desktop */
}

@media (min-width: 1024px) {
    .vip-modal { max-width: 800px; }
}

/* Custom scrollbar */
.vip-modal::-webkit-scrollbar       { width: 4px; }
.vip-modal::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.vip-modal::-webkit-scrollbar-thumb { background: rgba(75,192,192,0.38); border-radius: 2px; }

/* ============================================================
   MODAL HEADER (sticky)
   ============================================================ */
.vip-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: sticky; top: 0;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    z-index: 10;
    border-radius: 20px 20px 0 0;
}
@media (min-width: 768px) {
    .vip-modal-header { padding: 20px 26px 16px; border-radius: 18px 18px 0 0; }
}

.vip-modal-title { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.vip-modal-icon  { font-size:1.8rem; animation:vip-float 3s ease-in-out infinite; display:inline-block; flex-shrink:0; }
@media (min-width: 768px) { .vip-modal-icon { font-size:2rem; } }

.vip-modal-heading {
    margin: 0 0 3px; font-size: 1.1rem; font-weight: 700;
    color: #fff; font-family: 'Segoe UI', sans-serif;
    line-height: 1.3; display: flex; flex-direction: column;
}
@media (min-width: 768px) { .vip-modal-heading { font-size: 1.25rem; } }
.vip-modal-heading .vip-lang-ku { font-size:0.9rem; color:#4BC0C0; direction:rtl; margin-top:2px; }

.vip-modal-subtitle {
    margin: 0; font-size: 0.76rem;
    color: rgba(255,255,255,0.42);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
@media (min-width: 480px)  { .vip-modal-subtitle { max-width: 280px; } }
@media (min-width: 768px)  { .vip-modal-subtitle { max-width: 400px; font-size:0.82rem; } }

/* Close button — minimum 44×44 touch target */
.vip-close-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    border-radius: 50%;
    font-size: 15px; cursor: pointer;
    transition: background 0.2s, transform 0.25s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .vip-close-btn:hover { background:rgba(255,64,129,0.32); transform:rotate(90deg); }
}
.vip-close-btn:active { background:rgba(255,64,129,0.45); transform:scale(0.92); }

/* ============================================================
   MODAL BODY
   ============================================================ */
.vip-modal-body { padding: 16px 16px 24px; }
@media (min-width: 480px) { .vip-modal-body { padding: 18px 20px 26px; } }
@media (min-width: 768px) { .vip-modal-body { padding: 22px 26px 28px; } }

/* ============================================================
   LOADING
   ============================================================ */
.vip-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem 0;
    color: rgba(255,255,255,0.55);
    gap: 16px; font-size: 0.92rem;
    font-family: 'Segoe UI', sans-serif;
}
.vip-loading p { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; }
.vip-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(75,192,192,0.18);
    border-top-color: #4BC0C0;
    border-radius: 50%;
    animation: vip-spin 0.75s linear infinite;
}
@keyframes vip-spin { to { transform:rotate(360deg); } }

/* ============================================================
   KPI STRIP
   ============================================================ */
.vip-kpi-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 col on mobile */
    gap: 10px;
    margin-bottom: 18px;
}
@media (min-width: 480px) {
    .vip-kpi-strip { grid-template-columns: repeat(4,1fr); gap:10px; }
}
@media (min-width: 768px) {
    .vip-kpi-strip { gap: 14px; margin-bottom: 22px; }
}

.vip-kpi {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 13px;
    padding: 14px 8px;
    text-align: center;
    transition: transform 0.22s, box-shadow 0.22s;
}
@media (hover: hover) {
    .vip-kpi:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.32); }
}
.vip-kpi-icon { display:block; font-size:1.3rem; margin-bottom:6px; }
@media (min-width: 480px) { .vip-kpi-icon { font-size:1.5rem; } }

.vip-kpi-val {
    display: block;
    font-size: 1.2rem; font-weight: 800;
    color: #00e676; line-height: 1.2; margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', sans-serif;
}
@media (min-width: 480px) { .vip-kpi-val { font-size:1.4rem; } }
@media (min-width: 768px) { .vip-kpi-val { font-size:1.5rem; } }

.vip-kpi-date { font-size:0.78rem !important; font-weight:600 !important; }
@media (min-width: 480px) { .vip-kpi-date { font-size:0.85rem !important; } }

.vip-kpi-lbl {
    display: flex; flex-direction: column;
    font-size: 0.7rem; color: rgba(255,255,255,0.5);
    line-height: 1.4; font-family: 'Segoe UI', sans-serif;
}
@media (min-width: 480px) { .vip-kpi-lbl { font-size:0.75rem; } }

/* ============================================================
   CHARTS
   ============================================================ */
/* Mobile: stack charts vertically */
.vip-charts-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
/* Tablet+: side by side */
@media (min-width: 640px) {
    .vip-charts-row { grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
}
@media (min-width: 768px) {
    .vip-charts-row { gap:16px; margin-bottom:16px; }
}

.vip-chart-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    padding: 14px;
}
@media (min-width: 768px) { .vip-chart-box { padding:16px; } }

.vip-chart-full { margin-bottom: 12px; }
@media (min-width: 768px) { .vip-chart-full { margin-bottom:16px; } }

.vip-chart-title {
    margin: 0 0 12px;
    font-size: 0.82rem; font-weight: 600;
    color: rgba(255,255,255,0.88);
    font-family: 'Segoe UI', sans-serif;
    display: flex; flex-direction: column; gap: 3px;
}
@media (min-width: 768px) { .vip-chart-title { font-size:0.88rem; margin-bottom:14px; } }
.vip-chart-title .vip-lang-ku { font-size:0.78rem; color:#4BC0C0; direction:rtl; }

/* Chart canvas — constrained height on each device */
.vip-chart-box canvas {
    width: 100% !important;
    max-height: 180px;
}
.vip-chart-full canvas { max-height: 130px; }

@media (min-width: 480px) {
    .vip-chart-box canvas  { max-height: 200px; }
    .vip-chart-full canvas { max-height: 150px; }
}
@media (min-width: 768px) {
    .vip-chart-box canvas  { max-height: 220px; }
    .vip-chart-full canvas { max-height: 160px; }
}
@media (min-width: 1024px) {
    .vip-chart-box canvas  { max-height: 240px; }
    .vip-chart-full canvas { max-height: 170px; }
}

/* ============================================================
   TOP CITIES
   ============================================================ */
.vip-cities-section {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    padding: 14px;
    margin-bottom: 14px;
}
@media (min-width: 768px) { .vip-cities-section { padding:16px; margin-bottom:16px; } }

/* Mobile: single column */
.vip-cities-table { display:grid; grid-template-columns:1fr; gap:0; }
/* Tablet+: two columns */
@media (min-width: 600px) {
    .vip-cities-table { grid-template-columns:1fr 1fr; column-gap:24px; }
}

.vip-city-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.84rem; color: rgba(255,255,255,0.82);
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 8px;
    /* Minimum touch target hint */
    min-height: 44px;
}

.vip-city-name       { display:flex; align-items:flex-start; gap:6px; min-width:0; flex:1; }
.vip-city-name-inner { display:flex; flex-direction:column; min-width:0; }
.vip-city-label      { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.84rem; font-weight:500; }
.vip-city-pct        { font-size:0.72rem; color:rgba(255,255,255,0.38); margin-top:1px; }

/* Inline bar */
.vip-city-bar-wrap {
    width: 50px; height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px; margin-top: 4px; overflow: hidden;
}
@media (min-width: 480px) { .vip-city-bar-wrap { width:60px; } }

.vip-city-bar {
    height: 100%;
    background: linear-gradient(90deg, #4BC0C0, #9966FF);
    border-radius: 2px; width: 0;
    transition: width 0.7s ease;
}
.vip-city-count {
    font-weight: 700; color: #4BC0C0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; flex-shrink: 0;
    font-size: 0.9rem;
}

/* ============================================================
   MODAL FOOTER
   ============================================================ */
.vip-modal-footer {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 14px;
    font-size: 0.74rem; color: rgba(255,255,255,0.35);
    line-height: 1.7; font-family: 'Segoe UI', sans-serif;
}
@media (min-width: 768px) { .vip-modal-footer { font-size:0.78rem; } }
.vip-modal-footer p { max-width:100%; margin:0 0 4px; }
.vip-data-note { font-style:italic; }

/* ============================================================
   BILINGUAL HELPERS
   ============================================================ */
.vip-lang-ku { direction:rtl; font-family:'Segoe UI','Arial Unicode MS',Tahoma,sans-serif; }
.vip-lang-en { direction:ltr; }

/* ============================================================
   SAFE AREA — iPhone notch / Dynamic Island / Android cutout
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .vip-modal {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .vip-modal-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .vip-chart-icon, .vip-eye-icon,
    .vip-modal-icon, .vip-pulse-dot,
    .vip-spinner { animation: none; }
    .vip-overlay, .vip-modal { transition: none; }
    .vip-city-bar { transition: none; }
    .vip-insights-btn { transition: none; }
}

/* ============================================================
   DARK MODE OS — no extra changes needed (already dark-first)
   LIGHT MODE OS — no changes (plugin always uses dark popup)
   ============================================================ */