/* MeetRadar - phosphor-green army radar / CRT screen theme */
:root {
    --radar-bg: #040d05;
    --radar-surface: #071a0a;
    --radar-surface-2: #0a2510;
    --radar-phosphor: #39ff14;
    --radar-phosphor-bright: #caffd0;
    --radar-phosphor-dim: #1f7a3a;
    --radar-border: #0e4d23;
    --radar-text: #9fd9a4;
    --radar-amber: #ffb400;
}

body, .grabbacell {
    background-color: var(--radar-bg);
    color: var(--radar-text);
}

body {
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(57, 255, 20, 0.04) 0px,
            rgba(57, 255, 20, 0.04) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(ellipse at center, #0a2510 0%, #040d05 70%);
    background-attachment: fixed;
}

.grabbacell { background-color: rgba(7, 26, 10, 0.55); }

.searchresultrow, #ask_for_gender, .image-container, .infobanner {
    border-top: 1px solid var(--radar-phosphor-dim);
    box-shadow: 0 -1px 6px rgba(57, 255, 20, 0.18);
}
.color1bg, .searchrezu_bg2 { background-color: var(--radar-surface); }
.color2bg, .searchrezu_bg1 { background-color: var(--radar-bg); }

a {
    color: var(--radar-phosphor);
    text-shadow: 0 0 4px rgba(57, 255, 20, 0.35);
}
a:visited { color: var(--radar-phosphor-dim); text-shadow: none; }
a:hover {
    color: var(--radar-phosphor-bright);
    text-shadow: 0 0 6px rgba(202, 255, 208, 0.6);
}

.shadow1 { box-shadow: 0 0 6px rgba(57, 255, 20, 0.25) inset; }

.xpandbuttz {
    border-color: var(--radar-border);
    background-color: var(--radar-surface-2);
    color: var(--radar-phosphor);
}

#leftDiv {
    background-color: var(--radar-bg);
    box-shadow: -1px -1px 2px var(--radar-border) inset;
}
#centerDiv { background-color: var(--radar-bg); }
#rightDiv {
    background-color: var(--radar-bg);
    box-shadow: 1px -1px 2px var(--radar-border) inset;
}
#toggleLeftDiv {
    background-color: var(--radar-bg);
    box-shadow: -1px -1px 2px var(--radar-border) inset;
    color: var(--radar-phosphor);
}
#toggleRightDiv {
    background-color: var(--radar-bg);
    box-shadow: 1px -1px 2px var(--radar-border) inset;
    color: var(--radar-phosphor);
}
.toggleActive {
    background-color: var(--radar-phosphor) !important;
    color: var(--radar-bg) !important;
    text-shadow: none !important;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.55) !important;
}

form, .responsive_stackable, .chat-input-container, .file-preview-, #ask_for_gender {
    border: 1px solid var(--radar-border);
    background-color: rgba(7, 26, 10, 0.35);
}
.responsive_stackable form { border: none; }


/* ============================================================
   HUD radar contour around the /search map view
   ============================================================ */
#search_map_container {
    position: relative;
    margin: 10px auto 16px;
    padding: 6px;
    border-radius: 22px;
    background: var(--radar-bg);
    border: 1.5px solid var(--radar-phosphor-dim);
    box-shadow:
        0 0 14px rgba(57, 255, 20, 0.45),
        0 0 28px rgba(57, 255, 20, 0.18),
        inset 0 0 22px rgba(57, 255, 20, 0.12);
    overflow: hidden;
}
#search_map_container #map_canvas {
    border-radius: 16px;
    overflow: hidden;
}

/* HUD corner brackets (four L-shapes drawn from one pseudo via layered gradients) */
#search_map_container::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    pointer-events: none;
    z-index: 5;
    background:
        /* top-left */
        linear-gradient(to right,  var(--radar-phosphor) 0 24px, transparent 24px) top left    / 24px 2px no-repeat,
        linear-gradient(to bottom, var(--radar-phosphor) 0 24px, transparent 24px) top left    / 2px 24px no-repeat,
        /* top-right */
        linear-gradient(to left,   var(--radar-phosphor) 0 24px, transparent 24px) top right   / 24px 2px no-repeat,
        linear-gradient(to bottom, var(--radar-phosphor) 0 24px, transparent 24px) top right   / 2px 24px no-repeat,
        /* bottom-left */
        linear-gradient(to right,  var(--radar-phosphor) 0 24px, transparent 24px) bottom left / 24px 2px no-repeat,
        linear-gradient(to top,    var(--radar-phosphor) 0 24px, transparent 24px) bottom left / 2px 24px no-repeat,
        /* bottom-right */
        linear-gradient(to left,   var(--radar-phosphor) 0 24px, transparent 24px) bottom right/ 24px 2px no-repeat,
        linear-gradient(to top,    var(--radar-phosphor) 0 24px, transparent 24px) bottom right/ 2px 24px no-repeat;
    filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.85));
}

/* Soft phosphor vignette to suggest CRT curvature */
#search_map_container::after {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    z-index: 4;
    border-radius: 16px;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(57, 255, 20, 0.08) 92%,
        rgba(57, 255, 20, 0.22) 100%
    );
}

/* Map UX overlays — match the radar theme */
#map_loading_curtain {
    background: rgba(4, 13, 5, 0.78) !important;
}
.map_loading_spinner {
    border-color: var(--radar-phosphor-dim) !important;
    border-top-color: var(--radar-phosphor) !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}
#over_limit_popup,
#flattener_over_limit_popup,
#no_results_popup,
#no_results_atall_popup {
    color: var(--radar-phosphor);
    text-shadow: 0 0 4px rgba(57, 255, 20, 0.5);
}

/* ============================================================
   Radar-console buttons on /yesnomaybe
   Scoped to #yesnomaybe_buttons_container so the small filter
   buttons that reuse .yes_button / .no_button / .maybe_button
   inside the answer tabs are left untouched.
   ============================================================ */
#yesnomaybe_buttons_container .yesnomaybe_button {
    position: relative;
    border-radius: 14px;
    /* Stacked concentric ring bezels (inner phosphor-dim, dark gap, thin outer
       phosphor) + outer phosphor halo + inset hi/lo for a tactile key-cap. */
    box-shadow:
        0 0 0 2px rgba(14, 77, 35, 0.9),
        0 0 0 4px rgba(4, 13, 5, 1),
        0 0 0 5px rgba(31, 122, 58, 0.65),
        0 0 14px rgba(57, 255, 20, 0.35),
        inset 0 3px 6px rgba(255, 255, 255, 0.28),
        inset 0 -6px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Share Tech Mono', 'Courier New', 'Consolas', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 0 4px rgba(255, 255, 255, 0.22);
    transition: transform 80ms ease, box-shadow 150ms ease, filter 150ms ease;
}

/* Tiny LED indicator dot above each button label */
#yesnomaybe_buttons_container .yesnomaybe_button::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(202, 255, 208, 0.85);
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.85);
    pointer-events: none;
}

/* Preserve identity — keep green/red/orange — but render as a glowing dome */
#yesnomaybe_buttons_container .yes_button {
    background:
        radial-gradient(circle at 35% 30%, #6cff7c 0%, #00c019 55%, #00540b 100%);
    color: #f4fff5;
}
#yesnomaybe_buttons_container .no_button {
    background:
        radial-gradient(circle at 35% 30%, #ff7a7a 0%, #d40000 55%, #5a0000 100%);
    color: #fff4f4;
}
#yesnomaybe_buttons_container .maybe_button {
    background:
        radial-gradient(circle at 35% 30%, #ffd562 0%, #ff9100 55%, #6e3a00 100%);
    color: #fffaf0;
}

/* Hover — outer ring lights up phosphor, halo intensifies */
#yesnomaybe_buttons_container .yesnomaybe_button:hover {
    box-shadow:
        0 0 0 2px rgba(14, 77, 35, 0.9),
        0 0 0 4px rgba(4, 13, 5, 1),
        0 0 0 5px rgba(57, 255, 20, 0.95),
        0 0 22px rgba(57, 255, 20, 0.7),
        inset 0 3px 6px rgba(255, 255, 255, 0.35),
        inset 0 -6px 12px rgba(0, 0, 0, 0.5);
    filter: brightness(1.08);
}

/* Press — sinks in, indicator LED brightens, halo turns bright-phosphor */
#yesnomaybe_buttons_container .yesnomaybe_button:active {
    transform: translateY(1px) scale(0.975);
    box-shadow:
        0 0 0 2px rgba(14, 77, 35, 0.9),
        0 0 0 4px rgba(4, 13, 5, 1),
        0 0 0 5px rgba(202, 255, 208, 1),
        0 0 20px rgba(57, 255, 20, 0.95),
        inset 0 -3px 6px rgba(255, 255, 255, 0.2),
        inset 0 8px 16px rgba(0, 0, 0, 0.55);
}
#yesnomaybe_buttons_container .yesnomaybe_button:active::before {
    background: #caffd0;
    box-shadow: 0 0 10px rgba(202, 255, 208, 1), 0 0 18px rgba(57, 255, 20, 0.85);
}


/* ============================================================
   Radar-console treatment for .action_button / .action_link
   and their *_main variants.
   Uses background-image (NOT shorthand) so the dynamic per-state
   background-color from site_info.php's global CSS still drives
   the identity colors (phosphor-green CTA, amber main CTA) and
   continues to swap on hover / active / disabled.
   Matches the html-body specificity used by the global rules.
   ============================================================ */
html body .action_button,
html body a.action_button,
html body .action_link,
html body .action_button_main,
html body a.action_button_main,
html body .action_link_main,
.webrtc-streamer-button {
    /* dome highlight at top-left, gentle darken at bottom — purely additive */
    background-image: radial-gradient(
        ellipse at 35% 25%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.08) 35%,
        transparent 55%,
        rgba(0, 0, 0, 0.32) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /* concentric bezel rings + outer phosphor halo + key-cap depth */
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.95),
        0 0 0 3px rgba(4, 13, 5, 1),
        0 0 0 4px rgba(31, 122, 58, 0.55),
        0 0 10px rgba(57, 255, 20, 0.30),
        inset 0 2px 4px rgba(255, 255, 255, 0.22),
        inset 0 -4px 8px rgba(0, 0, 0, 0.40);

    font-family: 'Share Tech Mono', 'Courier New', 'Consolas', monospace;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 0 3px rgba(255, 255, 255, 0.18);
    transition: transform 80ms ease, box-shadow 150ms ease, filter 150ms ease;
}

/* Hover — phosphor outer ring lights up, halo intensifies.
   For *_main, the global already applies transform: scale(1.06) on hover,
   which compounds nicely into a "radar-lock pop" — left intact. */
html body .action_button:hover,
html body a.action_button:hover,
html body .action_link:hover,
html body .action_button_main:hover,
html body a.action_button_main:hover,
html body .action_link_main:hover,
.webrtc-streamer-button:hover {
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.95),
        0 0 0 3px rgba(4, 13, 5, 1),
        0 0 0 4px rgba(57, 255, 20, 0.95),
        0 0 18px rgba(57, 255, 20, 0.65),
        inset 0 2px 4px rgba(255, 255, 255, 0.28),
        inset 0 -4px 8px rgba(0, 0, 0, 0.45);
    filter: brightness(1.06);
}

/* Press — sinks, ring snaps to bright phosphor. Overrides the global
   scale(1.06) on *_main:active with a press-down feel instead. */
html body .action_button:active,
html body a.action_button:active,
html body .action_link:active,
html body .action_button_main:active,
html body a.action_button_main:active,
html body .action_link_main:active,
.webrtc-streamer-button:active {
    transform: translateY(1px) scale(0.985);
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.95),
        0 0 0 3px rgba(4, 13, 5, 1),
        0 0 0 4px rgba(202, 255, 208, 1),
        0 0 14px rgba(57, 255, 20, 0.85),
        inset 0 -2px 4px rgba(255, 255, 255, 0.15),
        inset 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Disabled — rings dimmed, button looks "powered down" */
html body .action_button[disabled],
html body a.action_button[disabled],
html body .action_link[disabled],
html body .action_button_main[disabled],
html body a.action_button_main[disabled],
html body .action_link_main[disabled] {
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.5),
        0 0 0 3px rgba(4, 13, 5, 1),
        0 0 0 4px rgba(31, 122, 58, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    filter: brightness(0.7) saturate(0.6);
    background-image: radial-gradient(
        ellipse at 35% 25%,
        rgba(255, 255, 255, 0.10) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.45) 100%
    );
}


/* ============================================================
   Radar-console treatment for .want_input pill toggles
   Same additive-shading approach (background-image gradient + ring
   stack) so the dynamic background-color from site_info.php still
   drives identity (phosphor green default → amber when checked).
   Tuned thinner than action buttons since these are inline pills.
   Applies to both label.want_input (interactive toggles in forms)
   and div.want_input (read-only chips on candidate pages).
   ============================================================ */
.want_input {
    background-image: radial-gradient(
        ellipse at 35% 25%,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.06) 35%,
        transparent 55%,
        rgba(0, 0, 0, 0.30) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /* Thin bezel for pill scale — single dim ring + dark gap + thin phosphor
       outer + soft halo. Less stacked than action buttons since the pill is
       smaller and lines of pills shouldn't visually crowd each other. */
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.85),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 3px rgba(31, 122, 58, 0.5),
        0 0 8px rgba(57, 255, 20, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.22),
        inset 0 -3px 6px rgba(0, 0, 0, 0.35);

    font-family: 'Share Tech Mono', 'Courier New', 'Consolas', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 3px rgba(255, 255, 255, 0.15);
    transition: transform 80ms ease, box-shadow 150ms ease, filter 150ms ease;
}

/* Hover — outer ring lights up phosphor (only on interactive label pills) */
label.want_input:hover {
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.85),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 3px rgba(57, 255, 20, 0.95),
        0 0 14px rgba(57, 255, 20, 0.55),
        inset 0 1px 3px rgba(255, 255, 255, 0.28),
        inset 0 -3px 6px rgba(0, 0, 0, 0.4);
    filter: brightness(1.06);
}

/* Active (mid-click) — sink slightly */
label.want_input:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.85),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 3px rgba(202, 255, 208, 1),
        0 0 12px rgba(57, 255, 20, 0.75),
        inset 0 -1px 3px rgba(255, 255, 255, 0.15),
        inset 0 3px 7px rgba(0, 0, 0, 0.5);
}

/* Checked — "armed/selected" on the radar console. The background already
   flips to amber via $site_colors['background_cta_active'] in the global CSS;
   here we ring it in bright phosphor with a strong halo so the selection
   reads at a glance across a row of pills. */
label.want_input:has(input[type="checkbox"]:checked) {
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.95),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 3px rgba(202, 255, 208, 1),
        0 0 16px rgba(57, 255, 20, 0.7),
        0 0 28px rgba(255, 180, 0, 0.35),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        inset 0 -3px 7px rgba(0, 0, 0, 0.45);
}
/* Hover on a checked pill — brighten further but keep amber identity */
label.want_input:has(input[type="checkbox"]:checked):hover {
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.95),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 3px rgba(202, 255, 208, 1),
        0 0 22px rgba(57, 255, 20, 0.85),
        0 0 34px rgba(255, 180, 0, 0.45),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -3px 7px rgba(0, 0, 0, 0.5);
}

/* Tighter mini variant — proportionally smaller ring stack */
.want_input_mini {
    box-shadow:
        0 0 0 1px rgba(14, 77, 35, 0.85),
        0 0 0 2px rgba(4, 13, 5, 1),
        0 0 0 2px rgba(31, 122, 58, 0.5),
        0 0 5px rgba(57, 255, 20, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* Map controls bar below the radar */
#map_controls {
    color: var(--radar-text);
}
#map_controls #location_search {
    background: var(--radar-surface);
    color: var(--radar-phosphor-bright);
    border: 1px solid var(--radar-phosphor-dim);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
}
#map_controls #location_search:focus {
    border-color: var(--radar-phosphor);
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.55);
}
#map_controls #location_search::placeholder {
    color: var(--radar-phosphor-dim);
}