/* ================================================================
   amk-map.css — Global Neon USA SVG Map
   Used by: Classified [amk_usa_map mode="classified"]
            Jobs       [amk_usa_map mode="jobs"]
            Matrimonial[amk_usa_map mode="matrimonial"]
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.amk-usa-map-section {
    width: 100%;
    box-sizing: border-box;
}

/* ── Map container — dark navy glass background ──────────────── */
.amk-map-container {
    width: 100%;
    background: #050b14;
    border-radius: 18px;
    padding: 28px 20px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* ambient centre glow */
    background-image: radial-gradient(
        ellipse 80% 60% at 52% 45%,
        rgba(0, 160, 220, 0.07) 0%,
        transparent 70%
    );
}

/* ── Section heading ─────────────────────────────────────────── */
.amk-map-container .amk-map-heading,
.amk-usa-map-section .amk-section__title {
    text-align: center;
    color: #7ff0ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 16px;
    filter: drop-shadow(0 0 8px rgba(63, 211, 255, 0.7));
}

/* ── SVG — centered, full width ─────────────────────────────── */
.amk-map-container svg#svg2 {
    width: 100%;
    max-width: 960px;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;   /* let glow filters bleed outside viewBox */
}

/* ── State paths ─────────────────────────────────────────────── */
.amk-map-container .state {
    fill: #071a2b;
    stroke: #3fd3ff;
    stroke-width: 1.2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    paint-order: stroke fill;
    cursor: pointer;
    transition: fill 0.22s ease, stroke-width 0.22s ease, filter 0.22s ease;
}

/* Hover */
.amk-map-container .state:hover {
    fill: #0b2a42 !important;
    stroke: #7ff0ff !important;
    stroke-width: 1.8px !important;
    filter:
        drop-shadow(0 0 5px #3fd3ff)
        drop-shadow(0 0 14px #1ec9ff)
        drop-shadow(0 0 28px rgba(30, 201, 255, 0.5)) !important;
}

/* Selected / active */
.amk-map-container .state.amk-state-selected {
    fill: #0d3352 !important;
    stroke: #9ff5ff !important;
    stroke-width: 2px !important;
}

/* ── Labels & text ───────────────────────────────────────────── */
.amk-map-container text {
    fill: #c9f7ff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    pointer-events: none !important;
    letter-spacing: 0.02em;
    filter:
        drop-shadow(0 0 4px rgba(63, 211, 255, 0.95))
        drop-shadow(0 0 10px rgba(30, 201, 255, 0.65)) !important;
}

/* ── NE connector lines ──────────────────────────────────────── */
.amk-map-container #lines {
    stroke: rgba(63, 211, 255, 0.45) !important;
    stroke-width: 0.8px !important;
    fill: none !important;
    filter: drop-shadow(0 0 3px rgba(63, 211, 255, 0.6));
}

/* ── Tooltip ─────────────────────────────────────────────────── */
.amk-map-tooltip {
    position: fixed;
    z-index: 99999;
    background: rgba(0, 20, 45, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(63, 211, 255, 0.55);
    color: #c9f7ff;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    display: none;
    box-shadow:
        0 0 12px rgba(63, 211, 255, 0.35),
        0 4px 18px rgba(0, 0, 0, 0.65);
    transform: none; /* position set entirely by JS */
}
.amk-map-tooltip.amk-tip-visible {
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .amk-map-container {
        padding: 16px 10px 12px;
        border-radius: 12px;
    }
}