/* ════════════════════════════════════════════════════════════════════
   MARKET PRESENCE — Premium Enterprise Info Console
   Isolated, reusable component for the floating console next to the
   India / World distribution maps. The map itself (SVG, pins, popovers,
   legend, tab switcher — see market-presence-map.css) is untouched here
   — this file only styles the floating console: #vendorLiveCard (.mpp)
   and its children, in the site's white/orange premium glass theme.

   Motion contract: only transform / opacity / filter are animated.
   Width, height, margin, left and top are never transitioned.
   ════════════════════════════════════════════════════════════════════ */

.mpp {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(248, 249, 251, .92) 50%, rgba(237, 240, 243, .9) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 106, 31, .28);
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(20, 22, 28, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
  isolation: isolate;
}

/* soft radial orange glow behind the active section, top-right */
.mpp-ambient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top right, rgba(255, 145, 40, .10), transparent 60%);
  pointer-events: none;
}

/* almost-invisible industrial grid + grain, purely decorative */
.mpp-texture {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 95%);
}

.mpp-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .04;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── status bar ── */
.mpp-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .5rem .75rem;
  margin-bottom: 1.15rem;
}

.mpp-status-live {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--accent-ink);
}

.mpp-status-label {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── search ── */
.mpp-search {
  position: relative;
  z-index: 1;
  margin-bottom: 1.3rem;
}

.mpp-search-icon {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  opacity: .6;
  pointer-events: none;
}

.mpp-search-input {
  width: 100%;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: .75rem .95rem .75rem 2.5rem;
  border-radius: 18px;
  font-size: .85rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.mpp-search-input::placeholder {
  color: var(--ink-soft);
  opacity: .7;
}

.mpp-search-input:focus {
  border-color: rgba(255, 106, 31, .65);
  background: rgba(255, 255, 255, .9);
  animation: mppSearchGlow 1.8s ease-in-out infinite;
}

@keyframes mppSearchGlow {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(255, 106, 31, .08), 0 0 16px rgba(255, 106, 31, .14);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(255, 106, 31, .14), 0 0 26px rgba(255, 106, 31, .28);
  }
}

/* ── state hero header ── */
.mpp-header {
  position: relative;
  z-index: 1;
  /* this + .mpp-body are the two elements the JS crossfade (opacity +
     translateY) runs on every hover/click — promoting them to their own
     compositor layer up front stops the "pop" as a layer is created mid
     animation, which is what read as a flash/flicker on state changes */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.mpp-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5rem;
  /* reserve height for two lines so switching between a short state name
     (no wrap) and a longer one + badge (wraps) never jumps the layout —
     the crossfade should read as a fade, never as a resize */
  min-height: calc(1.4rem * 1.15 * 2);
}

/* JS stamps this exact class on the badge span it (re)creates on every
   state change — see updateVendorCard() in the map script below. */
.mpp-hq-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #FFF;
  background: linear-gradient(135deg, #FF9128, #FF6A1F);
  padding: .32rem .7rem;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255, 106, 31, .35);
}

.mpp-company {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-ink);
  margin-bottom: .95rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--border);
}

.mpp-company:empty {
  display: none;
}

.mpp-empty-icon {
  opacity: .6;
}

/* ── dynamic body: mini info-cards + contact actions ── */
.mpp-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  /* see .mpp-header — same crossfade target, same GPU-layer reasoning */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* default / no-hover state — nothing selected yet, so no vendor details
   render at all; only the hint paragraph shows until a marker, state
   shape, or directory row is hovered or clicked (see previewItem /
   lockItem / clearPreview in the shared inline script) */
.mpp-empty-hint {
  display: none;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 18px;
}

.mpp-body.is-empty .mpp-empty-hint {
  display: block;
}

.mpp-body.is-empty .mpp-mini,
.mpp-body.is-empty .mpp-actions {
  display: none;
}

.mpp-mini {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .65rem .75rem;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

.mpp-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 31, .4);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 14px 30px rgba(20, 22, 28, .1);
}

.mpp-mini-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  line-height: 1;
  border-radius: 9px;
  background: rgba(255, 106, 31, .12);
  border: 1px solid rgba(255, 106, 31, .22);
}

.mpp-mini-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.mpp-label {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
}

.mpp-value {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── contact actions ── */
.mpp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-top: .35rem;
}

.mpp-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem .6rem;
  border-radius: 14px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.16, .84, .44, 1), box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}

.mpp-btn:active {
  transform: translateY(-1px) scale(.98);
}

.mpp-btn-icon {
  display: inline-block;
  transition: transform .3s ease;
}

.mpp-btn:hover .mpp-btn-icon {
  transform: scale(1.15) rotate(-6deg);
}

.mpp-btn-primary {
  background: linear-gradient(135deg, #FF9128, #FF6A1F);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 24px rgba(255, 106, 31, .3);
}

.mpp-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(255, 106, 31, .4), 0 0 26px rgba(255, 145, 40, .3);
  color: #FFF;
}

.mpp-btn-secondary {
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid var(--border);
}

.mpp-btn-secondary:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 31, .6);
  color: var(--accent-ink);
  background: rgba(255, 106, 31, .08);
}

.mpp-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 106, 31, .4);
  transform: scale(0);
  opacity: .6;
  pointer-events: none;
  animation: mppRipple .6s ease-out forwards;
}

@keyframes mppRipple {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* ── quick jump directory ── */
.mpp-directory {
  position: relative;
  z-index: 1;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 106, 31, .3);
}

.mpp-directory-title {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: .6rem;
}

.mpp-directory-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: .25rem;
  scrollbar-width: thin;
}

.mpp-directory-list::-webkit-scrollbar {
  width: 4px;
}

.mpp-directory-list::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 31, .4);
  border-radius: 4px;
}

.mpp-empty {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--ink-soft);
  padding: .6rem;
}

/* .quick-location-item is generated by the shared map script (renderQuickList) —
   the class name itself must stay exactly this, since JS creates elements with
   it directly. Everything below is safe to restyle freely. */
.quick-location-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .55rem .75rem .55rem 1rem;
  font-size: .8rem;
  color: var(--ink-soft);
  cursor: pointer;
  /* No transform here: shifting the box under the cursor on :hover made the
     pointer land outside the shifted box, which re-fired mouseleave/mouseenter
     in a loop and made the hovered state name flicker instead of holding. */
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .quick-location-item:hover {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(255, 106, 31, .35);
    box-shadow: 0 6px 16px rgba(255, 106, 31, .12);
    color: var(--ink);
  }
}

.quick-location-item:active {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(255, 106, 31, .35);
  color: var(--ink);
}

.quick-location-item.active {
  background: rgba(255, 106, 31, .12);
  border-color: rgba(255, 106, 31, .55);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 106, 31, .18) inset, 0 8px 20px rgba(255, 106, 31, .12);
}

.quick-location-item:focus-visible {
  outline: 2px solid var(--accent, #FF6A1F);
  outline-offset: 2px;
}

.ql-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #FFC24B, #FF6A1F);
  box-shadow: 0 0 10px rgba(255, 106, 31, .6);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1);
}

.quick-location-item.active .ql-indicator {
  transform: translateY(-50%) scaleY(1);
}

@media (hover: hover) and (pointer: fine) {
  .quick-location-item:hover .ql-indicator {
    transform: translateY(-50%) scaleY(1);
  }
}

.ql-icon {
  flex-shrink: 0;
  font-size: .82rem;
}

.ql-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ql-code {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--border);
  padding: .18rem .42rem;
  border-radius: 6px;
  transition: color .25s ease, border-color .25s ease;
}

.quick-location-item.active .ql-code {
  color: var(--accent-ink);
  border-color: rgba(255, 106, 31, .4);
}

@media (hover: hover) and (pointer: fine) {
  .quick-location-item:hover .ql-code {
    color: var(--accent-ink);
    border-color: rgba(255, 106, 31, .4);
  }
}

/* ── accessibility ── */
.mpp-search-input:focus-visible,
.mpp-btn:focus-visible {
  outline: 2px solid var(--accent, #FF6A1F);
  outline-offset: 2px;
}

/* ── responsive ── */
@media (max-width: 992px) {
  .mpp {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .mpp {
    max-width: none;
    padding: 1.4rem 1.25rem;
    /* the console's own 20px blur plus the ambient/texture/noise layers
       stacked on top of it repaint on every scroll frame on phones —
       matches the same blur-radius-cut the site nav already does at
       this width (styles.css .site-nav.scrolled) */
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }

  .mpp-state {
    font-size: 1.5rem;
  }

  .mpp-actions {
    grid-template-columns: 1fr;
  }

  /* directory rows were a few px under the ~40px tap-target guideline */
  .quick-location-item {
    padding: 0.8rem 0.85rem 0.8rem 1rem;
  }
}

@media (max-width: 400px) {
  .mpp-directory-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mpp-search-input:focus,
  .mpp-ripple {
    animation: none;
  }

  .mpp-mini,
  .mpp-btn,
  .quick-location-item,
  .ql-indicator {
    transition: none;
  }
}

/* ── India drill-down: state head card ──
   Additive only, reuses .mpp / .mpp-mini / .mpp-btn / .mpp-actions from
   above for the glass card language and CTA buttons — these rules only
   cover the piece that doesn't already exist: the state head card in the
   right-hand panel's header. One state is always selected (no "all
   states" list, no history/breadcrumb), so this is the only view. */

.state-head-card {
  margin-top: 1rem;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 106, 31, .22);
  border-radius: 18px;
  padding: 1rem 1.1rem;
}

.state-head-card.is-empty {
  text-align: center;
}

.state-head-card .mpp-empty-hint {
  display: none;
}

.state-head-card.is-empty .mpp-empty-hint {
  display: block;
  border: none;
  padding: .5rem;
}

.shc-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.shc-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF9128, #FF6A1F);
  color: #FFF;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(255, 106, 31, .3);
}

.shc-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.25;
}

.shc-role {
  font-size: .75rem;
  color: var(--ink-soft);
  margin-top: .15rem;
}

.state-head-card .mpp-actions {
  margin-top: .85rem;
}

/* ── location card (replaces the old phone/email info boxes) — a compact
   clickable pill showing "District, State"; opens the district popup ── */
.shc-location-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 106, 31, .08);
  border: 1px solid rgba(255, 106, 31, .2);
  border-radius: 14px;
  padding: .7rem .85rem;
  font: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}

.shc-location-card:hover,
.shc-location-card:focus-visible {
  border-color: rgba(255, 106, 31, .45);
  background: rgba(255, 106, 31, .13);
  transform: translateY(-1px);
}

.shc-location-card:disabled {
  cursor: default;
  opacity: .8;
}

.shc-location-card:disabled:hover {
  transform: none;
  background: rgba(255, 106, 31, .08);
  border-color: rgba(255, 106, 31, .2);
}

.shc-location-icon {
  flex-shrink: 0;
  font-size: .95rem;
}

.shc-location-text {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.shc-location-chevron {
  flex-shrink: 0;
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 700;
}

/* ── district popup — floating overlay opened from the location card ── */
.district-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 18, 24, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.district-popup-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}

.district-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(560px, 80vh);
  display: flex;
  flex-direction: column;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(15, 18, 24, .25);
  transform: scale(.94) translateY(8px);
  transition: transform .22s cubic-bezier(.16, .84, .44, 1);
}

.district-popup-overlay.open .district-popup {
  transform: scale(1) translateY(0);
}

.district-popup-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-bottom: 1px solid var(--border);
}

.district-popup-title {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
}

.district-popup-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(20, 22, 28, .04);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.district-popup-close:hover,
.district-popup-close:focus-visible {
  border-color: rgba(255, 106, 31, .5);
  color: var(--accent-ink);
  background: rgba(255, 106, 31, .08);
  transform: rotate(90deg);
}

.district-popup-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  padding: 1.2rem 1.3rem;
  scrollbar-width: thin;
}

.district-popup-grid::-webkit-scrollbar {
  width: 5px;
}

.district-popup-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 31, .4);
  border-radius: 4px;
}

/* plain, read-only display card — no click affordance, just the name */
.district-pop-card {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .65rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}

.district-pop-icon {
  flex-shrink: 0;
  font-size: .78rem;
  color: var(--accent-ink);
}

.district-pop-name {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .district-popup-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .district-popup-overlay {
    padding: 1rem;
  }

  .district-popup-header,
  .district-popup-grid {
    padding: 1rem;
  }
}

body.district-popup-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .district-popup-overlay,
  .district-popup,
  .shc-location-card,
  .district-popup-close {
    transition: none;
  }
}

/* ── India drill-down panel (right column, sibling of #vendorLiveCard) ── */
.mp-india-panel {
  grid-column: 2;
  grid-row: 1;
}

/* ── all-covered-states list, below the state head card — plain list of
   names rather than the old card grid, click any one to jump to it ── */
.idp-state-list {
  position: relative;
  z-index: 1;
  margin-top: 1.1rem;
}

.idp-state-list-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: .6rem;
}

.idp-state-list-items {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: .25rem;
  scrollbar-width: thin;
}

.idp-state-list-items::-webkit-scrollbar {
  width: 4px;
}

.idp-state-list-items::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 31, .4);
  border-radius: 4px;
}

.idp-state-item {
  text-align: left;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .75rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}

.idp-state-item:hover,
.idp-state-item:focus-visible {
  border-color: rgba(255, 106, 31, .45);
  background: rgba(255, 255, 255, .85);
  transform: translateX(2px);
}

.idp-state-item.active {
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  border-color: transparent;
  color: #FFF;
}

@media (prefers-reduced-motion: reduce) {
  .idp-state-item {
    transition: none;
  }
}

/* covered states get a pointer cursor; everything else on the India map
   stays inert (no personnel data to show) */
.state-covered {
  cursor: pointer;
}

@media (max-width: 992px) {
  .mp-india-panel {
    max-width: 380px;
    /* .market-dashboard-grid collapses to a single column at this
       breakpoint (market-presence-map.css), but the base rule above still
       hard-places this panel in column 2 — with no explicit column 2 left
       in the template, grid auto-generates an implicit one sized to
       content, so the map and this panel end up squeezed side by side
       into two narrow columns instead of stacking. Release the explicit
       placement so it falls into the single remaining column. */
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .mp-india-panel {
    max-width: none;
    padding: 1.4rem 1.25rem;
  }
}

/* ══ DARK MODE ══ */
html[data-theme="dark"] .mpp {
  background: linear-gradient(180deg, rgba(27, 31, 38, .94) 0%, rgba(32, 36, 44, .92) 50%, rgba(18, 21, 26, .9) 100%);
  box-shadow: 0 35px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .mpp-status {
  background: rgba(27, 31, 38, .6);
}

html[data-theme="dark"] .mpp-search-input {
  background: rgba(27, 31, 38, .7);
}

html[data-theme="dark"] .mpp-search-input:focus {
  background: rgba(27, 31, 38, .9);
}

html[data-theme="dark"] .mpp-mini {
  background: rgba(27, 31, 38, .55);
}

html[data-theme="dark"] .mpp-mini:hover {
  background: rgba(27, 31, 38, .8);
}

html[data-theme="dark"] .mpp-btn-secondary {
  background: rgba(27, 31, 38, .65);
}

html[data-theme="dark"] .quick-location-item {
  background: rgba(27, 31, 38, .55);
}

html[data-theme="dark"] .quick-location-item:hover {
  background: rgba(27, 31, 38, .85);
}

html[data-theme="dark"] .ql-code {
  background: rgba(27, 31, 38, .7);
}

html[data-theme="dark"] .shc-location-card {
  background: rgba(255, 106, 31, .12);
}

html[data-theme="dark"] .district-popup {
  background: #1B1F26;
}

html[data-theme="dark"] .district-popup-close {
  background: rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .district-pop-card {
  background: rgba(27, 31, 38, .65);
}