/* ============================================================
   VIEW INSIGHTS PRO — style.css v3.4
   THEME HARDENING STRATEGY:
   1. Every rule is scoped under .vip-button-wrap or .vip-overlay
      — theme global styles cannot leak in.
   2. .vip-modal uses isolation:isolate + contain:layout style
      — creates its own stacking context.
   3. All elements inside .vip-modal declare their own:
      font-family, font-size, color, background, box-sizing,
      line-height, border, margin, padding — nothing inherited
      from the theme.
   4. z-index: 2147483647 on overlay (browser max).
   5. dir="ltr" on overlay via HTML — RTL theme safe.
   6. .vip-hidden used alongside [hidden] — never rely on
      [hidden] alone (some themes override it).
   7. @media (hover: none) disables hover effects on touch.
   ============================================================ */

/* ---- SCOPED RESET — ONLY inside plugin elements ------------ */
.vip-button-wrap,
.vip-button-wrap *,
.vip-overlay,
.vip-overlay * {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
}

/* Enforce hidden state — dual method for theme safety */
.vip-overlay.vip-hidden,
.vip-content.vip-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---- DESIGN TOKENS -----------------------------------------
   All inside .vip-overlay so they don't pollute theme :root
   ------------------------------------------------------------ */
.vip-overlay {
    --vip-bg:         #0f1428;
    --vip-surface:    #16213e;
    --vip-surface2:   #1a2547;
    --vip-surface3:   #1e2d56;
    --vip-accent:     #4bc0c0;
    --vip-accent2:    #36a2eb;
    --vip-text:       #e8eaf6;
    --vip-muted:      rgba(232,234,246,.55);
    --vip-border:     rgba(75,192,192,.18);
    --vip-border2:    rgba(255,255,255,.07);
    --vip-radius:     16px;
    --vip-radius-sm:  10px;
    --vip-radius-xs:  6px;
    --vip-ease:       cubic-bezier(.16,1,.3,1);
    --vip-font:       -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --vip-font-ku:    "Noto Sans Arabic","Segoe UI",sans-serif;
    --vip-font-emoji: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}

/* Also declare on button-wrap so button uses same tokens */
.vip-button-wrap {
    --vip-surface:    #16213e;
    --vip-surface2:   #1a2547;
    --vip-accent:     #4bc0c0;
    --vip-accent2:    #36a2eb;
    --vip-text:       #e8eaf6;
    --vip-muted:      rgba(232,234,246,.55);
    --vip-border:     rgba(75,192,192,.18);
    --vip-border2:    rgba(255,255,255,.07);
    --vip-radius:     16px;
    --vip-ease:       cubic-bezier(.16,1,.3,1);
    --vip-font:       -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --vip-font-ku:    "Noto Sans Arabic","Segoe UI",sans-serif;
    --vip-font-emoji: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}

/* ============================================================
   BUTTON WRAP
   ============================================================ */
.vip-button-wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--vip-font) !important;
    text-align: left !important;
    direction: ltr !important;
}

/* ============================================================
   BUTTON — hardened against theme button resets
   ============================================================ */
.vip-insights-btn {
    all: unset !important;           /* nuclear reset — rebuilds from scratch */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg,#16213e 0%,#1a2547 100%) !important;
    border: 1px solid rgba(75,192,192,.25) !important;
    border-radius: 50px !important;
    color: #e8eaf6 !important;
    font-family: var(--vip-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 48px !important;
    min-width: 160px !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: transform .22s var(--vip-ease),
                box-shadow .22s var(--vip-ease),
                border-color .22s var(--vip-ease) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
}
.vip-insights-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
        rgba(75,192,192,.1) 0%,
        rgba(54,162,235,.1) 100%) !important;
    opacity: 0 !important;
    transition: opacity .22s ease !important;
    border-radius: inherit !important;
}
@media (hover: hover) {
    .vip-insights-btn:hover::before { opacity: 1 !important; }
    .vip-insights-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(75,192,192,.28) !important;
        border-color: rgba(75,192,192,.5) !important;
    }
}
.vip-insights-btn:active  { transform: scale(.97) !important; }
.vip-insights-btn:focus-visible {
    outline: 2px solid #4bc0c0 !important;
    outline-offset: 3px !important;
}

/* Button icon */
.vip-btn-icon {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.vip-chart-icon,
.vip-eye-icon {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-family: var(--vip-font-emoji) !important;
    transition: opacity .4s, transform .4s !important;
    line-height: 1 !important;
}
.vip-eye-icon { opacity: 0 !important; transform: scale(.7) !important; }
@media (hover: hover) {
    .vip-insights-btn:hover .vip-chart-icon { opacity: 0 !important; transform: scale(.7) !important; }
    .vip-insights-btn:hover .vip-eye-icon   { opacity: 1 !important; transform: scale(1) !important;  }
}

/* Pulse dot */
.vip-pulse-dot {
    position: absolute !important;
    top: 2px !important; right: 2px !important;
    width: 7px !important; height: 7px !important;
    background: #4bc0c0 !important;
    border-radius: 50% !important;
    display: block !important;
}
.vip-pulse-dot::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 2px solid #4bc0c0 !important;
    animation: vip-pulse 2s ease-out infinite !important;
}
@keyframes vip-pulse {
    0%   { opacity:.9; transform:scale(1);   }
    100% { opacity:0;  transform:scale(2.2); }
}

/* Button text spans */
.vip-btn-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
    font-family: var(--vip-font) !important;
}
.vip-btn-en {
    display: block !important;
    font-family: var(--vip-font) !important;
    font-size: 14px !important;
    color: #e8eaf6 !important;
    font-style: normal !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.vip-btn-ku {
    display: none !important;
    direction: rtl !important;
    font-family: var(--vip-font-ku) !important;
    font-size: 12px !important;
    color: rgba(232,234,246,.6) !important;
    font-style: normal !important;
    text-decoration: none !important;
}

/* Count badge */
.vip-btn-count {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    padding: 3px 9px !important;
    background: rgba(75,192,192,.13) !important;
    border: 1px solid rgba(75,192,192,.22) !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--vip-font) !important;
    color: #4bc0c0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    font-style: normal !important;
    text-decoration: none !important;
}
.vip-count-en {
    display: block !important;
    font-family: var(--vip-font) !important;
    font-size: 11px !important;
    color: #4bc0c0 !important;
    font-style: normal !important;
}
.vip-count-ku {
    display: none !important;
    direction: rtl !important;
    font-family: var(--vip-font-ku) !important;
    font-size: 10px !important;
    color: rgba(232,234,246,.5) !important;
    font-style: normal !important;
}

/* ============================================================
   OVERLAY BACKDROP
   ============================================================ */
.vip-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; right: 0 !important;
    bottom: 0 !important; left: 0 !important;
    z-index: 2147483647 !important;  /* browser integer max */
    background: rgba(5,8,20,.78) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .32s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--vip-font) !important;
}
.vip-overlay.vip-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================================
   MODAL — theme-isolated container
   ============================================================ */
.vip-modal {
    /* Isolation from theme stacking contexts */
    isolation: isolate !important;
    contain: layout style !important;

    width: 100% !important;
    max-height: 92dvh !important;
    max-height: 92vh !important;
    background: #16213e !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid rgba(75,192,192,.18) !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateY(100%) !important;
    transition: transform .38s cubic-bezier(.16,1,.3,1) !important;
    will-change: transform !important;
    position: relative !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom,0px) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5) !important;

    /* Explicit font reset — kills theme font inheritance */
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #e8eaf6 !important;
    text-align: left !important;
    direction: ltr !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    word-spacing: normal !important;
}
.vip-overlay.vip-open .vip-modal {
    transform: translateY(0) !important;
}

/* Drag handle */
.vip-drag-handle {
    width: 44px !important;
    height: 4px !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 2px !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ============================================================
   MODAL HEADER
   ============================================================ */
.vip-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 18px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}
.vip-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
.vip-modal-icon {
    font-size: 20px !important;
    font-family: var(--vip-font-emoji) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: block !important;
}
.vip-modal-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #e8eaf6 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* Override theme h2 styles that would bleed in */
.vip-overlay h2.vip-modal-heading {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #e8eaf6 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.vip-overlay h2.vip-modal-heading::before,
.vip-overlay h2.vip-modal-heading::after { display: none !important; }

.vip-modal-subtitle {
    font-size: 11px !important;
    color: rgba(232,234,246,.55) !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 260px !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Close button — hardened against theme button resets */
.vip-close-btn {
    all: unset !important;
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 50% !important;
    color: rgba(232,234,246,.6) !important;
    font-size: 14px !important;
    font-family: var(--vip-font) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .2s, color .2s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 1 !important;
}
.vip-close-btn:hover,
.vip-close-btn:focus-visible {
    background: rgba(255,255,255,.14) !important;
    color: #e8eaf6 !important;
    outline: 2px solid #4bc0c0 !important;
    outline-offset: 2px !important;
}

/* ============================================================
   MODAL BODY
   ============================================================ */
.vip-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px 16px 20px !important;
    background: transparent !important;
}
.vip-modal-body::-webkit-scrollbar { width: 4px; }
.vip-modal-body::-webkit-scrollbar-track { background: transparent; }
.vip-modal-body::-webkit-scrollbar-thumb {
    background: rgba(75,192,192,.28);
    border-radius: 2px;
}

/* ============================================================
   LOADING
   ============================================================ */
.vip-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 48px 20px !important;
    color: rgba(232,234,246,.55) !important;
    font-size: 13px !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    background: transparent !important;
}
.vip-spinner {
    width: 36px !important;
    height: 36px !important;
    border: 3px solid rgba(75,192,192,.15) !important;
    border-top-color: #4bc0c0 !important;
    border-radius: 50% !important;
    animation: vip-spin .8s linear infinite !important;
    background: transparent !important;
    display: block !important;
    flex-shrink: 0 !important;
}
@keyframes vip-spin { to { transform: rotate(360deg); } }

/* ============================================================
   BILINGUAL SPANS
   ============================================================ */
.vip-overlay .vip-lang-en {
    display: block !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    text-decoration: none !important;
}
.vip-overlay .vip-lang-ku {
    display: none !important;
    direction: rtl !important;
    font-family: "Noto Sans Arabic","Segoe UI",sans-serif !important;
    font-style: normal !important;
    text-decoration: none !important;
    text-align: right !important;
}

/* ============================================================
   KPI STRIP
   ============================================================ */
.vip-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
}
.vip-kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 14px 10px 12px !important;
    background: #1a2547 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;
    text-align: center !important;
    margin: 0 !important;
}
.vip-kpi-icon {
    font-size: 18px !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
    line-height: 1 !important;
    display: block !important;
}
.vip-kpi-val {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #4bc0c0 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.vip-kpi-date { font-size: 11px !important; }
.vip-kpi-lbl {
    font-size: 10px !important;
    color: rgba(232,234,246,.55) !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.vip-kpi-lbl .vip-lang-ku {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 10px !important;
}

/* ============================================================
   CHARTS
   ============================================================ */
.vip-charts-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
}
.vip-chart-box {
    background: #1a2547 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;
    padding: 14px 14px 12px !important;
    margin: 0 !important;
}
.vip-chart-full { margin-bottom: 12px !important; }
.vip-chart-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(232,234,246,.55) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    line-height: 1.3 !important;
}
/* Override all theme h3 styles */
.vip-overlay h3.vip-chart-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(232,234,246,.55) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: uppercase !important;
}
.vip-overlay h3.vip-chart-title::before,
.vip-overlay h3.vip-chart-title::after { display: none !important; }

.vip-chart-title .vip-lang-ku {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 11px !important;
}
.vip-chart-box canvas {
    max-height: 200px !important;
    width: 100% !important;
    display: block !important;
}
.vip-chart-full canvas { max-height: 160px !important; }

/* ============================================================
   TOP CITIES
   ============================================================ */
.vip-cities-section { margin-bottom: 4px !important; }
.vip-cities-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
}
.vip-city-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #1a2547 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 6px !important;
    margin: 0 !important;
}
.vip-city-name {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
}
.vip-city-name > span {
    font-size: 13px !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    line-height: 1 !important;
    display: block !important;
}
.vip-city-name-inner {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
}
.vip-city-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e8eaf6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.vip-city-pct {
    display: block !important;
    font-size: 10px !important;
    color: rgba(232,234,246,.5) !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}
.vip-city-bar-wrap {
    margin-top: 5px !important;
    height: 3px !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    display: block !important;
}
.vip-city-bar {
    height: 100% !important;
    width: 0 !important;
    background: linear-gradient(90deg,#4bc0c0,#36a2eb) !important;
    border-radius: 2px !important;
    transition: width .7s cubic-bezier(.16,1,.3,1) !important;
    display: block !important;
}
.vip-city-count {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #4bc0c0 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ============================================================
   MODAL FOOTER
   ============================================================ */
.vip-modal-footer {
    margin: 18px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
}
.vip-modal-footer p {
    font-size: 10px !important;
    color: rgba(232,234,246,.5) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    background: transparent !important;
    max-width: 100% !important;
}
.vip-data-note { opacity: .7 !important; font-style: italic !important; }

/* ============================================================
   TABLET (≥ 600px)
   ============================================================ */
@media (min-width: 600px) {
    .vip-charts-row { flex-direction: row !important; }
    .vip-charts-row .vip-chart-box { flex: 1 1 0 !important; min-width: 0 !important; }
    .vip-kpi-strip { grid-template-columns: repeat(4,1fr) !important; }
    .vip-chart-box canvas { max-height: 220px !important; }
    .vip-chart-full canvas { max-height: 180px !important; }
    .vip-modal-footer { flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; }
}

/* ============================================================
   DESKTOP (≥ 768px) — centered modal, not bottom sheet
   ============================================================ */
@media (min-width: 768px) {
    .vip-overlay { align-items: center !important; }
    .vip-modal {
        width: 90% !important;
        max-width: 820px !important;
        max-height: 88vh !important;
        border-radius: 16px !important;
        border: 1px solid rgba(75,192,192,.18) !important;
        transform: translateY(24px) scale(.97) !important;
        transition: transform .35s cubic-bezier(.16,1,.3,1),
                    opacity .25s ease !important;
        opacity: 0 !important;
        padding-bottom: 0 !important;
        box-shadow: 0 24px 80px rgba(0,0,0,.6) !important;
    }
    .vip-overlay.vip-open .vip-modal {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }
    .vip-drag-handle { display: none !important; }
    .vip-modal-header { padding: 18px 22px 16px !important; }
    .vip-modal-body   { padding: 20px 22px 24px !important; }
    .vip-modal-heading { font-size: 17px !important; }
    .vip-overlay h2.vip-modal-heading { font-size: 17px !important; }
    .vip-modal-subtitle { max-width: 400px !important; font-size: 12px !important; }
    .vip-close-btn  { width: 38px !important; height: 38px !important; }
    .vip-kpi-val    { font-size: 22px !important; }
    .vip-chart-box canvas { max-height: 240px !important; }
    .vip-chart-full canvas { max-height: 200px !important; }
    .vip-city-label { font-size: 14px !important; }
    .vip-city-count { font-size: 15px !important; }
}

/* ============================================================
   LARGE DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
    .vip-modal { max-width: 900px !important; max-height: 85vh !important; }
    .vip-kpi-val { font-size: 24px !important; }
    .vip-chart-box canvas { max-height: 260px !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .vip-modal,
    .vip-overlay,
    .vip-spinner,
    .vip-city-bar,
    .vip-pulse-dot::after,
    .vip-chart-icon,
    .vip-eye-icon {
        animation: none !important;
        transition: none !important;
    }
    .vip-overlay.vip-open .vip-modal {
        transform: none !important;
        opacity: 1 !important;
    }
}