/* =========================================================
   EARS ALERTS — CLEAN CONSOLIDATED STYLESHEET
   Current baseline: August 10, 2026

   This replaces the accumulated style.css + patch blocks.
   ========================================================= */


/* =========================================================
   1. GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #03080d;
    color: #f3f6fa;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    background:
        radial-gradient(
            circle at 50% -20%,
            #102132 0,
            #07111a 32%,
            #03080d 70%
        );
}

.shell {
    max-width: 1600px;
    margin: auto;
    padding: 16px;
}

.panel {
    background:
        linear-gradient(
            145deg,
            rgba(8,17,25,.96),
            rgba(4,10,15,.98)
        );

    border: 1px solid #26333e;
    border-radius: 16px;

    box-shadow:
        0 14px 40px rgba(0,0,0,.25);
}


/* =========================================================
   2. HEADER — BRAND + ADSENSE
   ========================================================= */

.topbar.topbar-ad-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 1fr);

    align-items: center;
    gap: 28px;

    min-height: 150px;
    padding: 18px 26px;
}

.topbar-ad-layout .brand {
    width: 50%;
    text-align: center;
}

.topbar-ad-layout .brand img {
    display: block;
    height: 100px;

    object-fit: contain;

    margin: 0 auto;
}

.topbar-ad-layout .subtitle {
    margin-top: -3px;

    font-size: 19px;
    letter-spacing: 4px;
}

.header-ad {
    min-width: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.adsense-placeholder {
    width: 100%;
    min-height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px dashed #3b4b58;
    border-radius: 12px;

    background: rgba(255,255,255,.025);

    color: #6f8191;
    text-align: center;
}

.adsense-placeholder span {
    font-size: 12px;
    letter-spacing: 2px;
}

.adsense-placeholder small {
    margin-top: 5px;
    color: #596b79;
}

/* Retained for app.js compatibility after removing visible LIVE DATA. */
.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   3. MAIN PAGE LAYOUT
   ========================================================= */

.grid {
    display: grid;

    grid-template-columns:
        1.48fr
        .96fr;

    gap: 14px;

    margin-top: 14px;
}

.left,
.right {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================================
   4. MAP
   ========================================================= */

.map-wrap {
    height: 590px;

    position: relative;

    overflow: hidden;
}

.map-wrap #map {
    width: 100%;
    height: 100%;

    background: #07131c;
}

.leaflet-tile {
    filter:
        saturate(.65)
        brightness(.58)
        contrast(1.08);
}

/* The page already supplies enough WDW context. */
.sector-pill {
    display: none !important;
}

.legend {
    position: absolute;

    z-index: 500;

    bottom: 16px;
    left: 16px;

    padding: 12px 18px;

    border: 1px solid #43505b;
    border-radius: 11px;

    background: rgba(5,12,18,.9);

    backdrop-filter: blur(8px);

    line-height: 1.9;

    opacity: .88;
}

.dot {
    display: inline-block;

    width: 12px;
    height: 12px;

    margin-right: 8px;

    border-radius: 50%;
}

.dot.active {
    background: #ff303a;
}

.dot.recent {
    background: #f5a000;
}


/* =========================================================
   5. MAP — CLICK FOCUS
   ========================================================= */

#map.map-focus {
    animation:
        ears-map-focus 1.15s ease;
}

@keyframes ears-map-focus {

    0% {
        box-shadow:
            inset 0 0 0 0 rgba(98,163,255,0);
    }

    35% {
        box-shadow:
            inset 0 0 0 4px rgba(98,163,255,.75);
    }

    100% {
        box-shadow:
            inset 0 0 0 0 rgba(98,163,255,0);
    }
}


/* =========================================================
   6. WDW LANDMARK LAYER
   Supporting context — intentionally quieter than alerts.
   ========================================================= */

.wdw-landmark-icon {
    background: transparent !important;
    border: 0 !important;
}

.wdw-landmark {
    display: flex;
    align-items: center;

    gap: 5px;

    opacity: .42;

    pointer-events: auto;

    white-space: nowrap;

    transition:
        opacity .16s ease;
}

.wdw-landmark:hover {
    opacity: .88;
}

.wdw-landmark-symbol {
    width: 23px !important;
    height: 23px !important;

    flex: 0 0 23px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(5,12,18,.64) !important;

    border:
        1px solid rgba(255,255,255,.30) !important;

    color:
        rgba(255,255,255,.82) !important;

    font-size: 10px !important;

    box-shadow:
        0 1px 4px rgba(0,0,0,.30) !important;
}

/* Hidden at normal WDW overview zoom. */
.wdw-landmark-name {
    display: none !important;

    padding: 3px 6px !important;

    border-radius: 5px !important;

    background:
        rgba(5,12,18,.72) !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    color:
        rgba(255,255,255,.82) !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .15px;

    box-shadow: none !important;

    backdrop-filter: blur(3px);
}

/* Hover reveals only the selected landmark. */
.wdw-landmark:hover .wdw-landmark-name {
    display: inline-block !important;
}

/* At zoom 14+, app.js adds .landmarks-close to the map. */
.leaflet-container.landmarks-close .wdw-landmark-name {
    display: inline-block !important;
}


/* =========================================================
   7. EA LOGO INCIDENT MARKERS
   ========================================================= */

.ea-map-icon {
    z-index: 600 !important;

    background: transparent !important;
    border: 0 !important;
}

.ea-marker {
    position: relative;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    /* White circle at 50% transparency. */
    background:
        rgba(255,255,255,.50);

    border:
        3px solid var(--accent);

    box-shadow:
        0 0 0 3px rgba(0,0,0,.55),
        0 0 15px var(--accent);

    transition:
        transform .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.ea-marker img {
    width: 30px;
    height: 30px;

    display: block;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Active incident marker
   --------------------------------------------------------- */

.ea-marker.active {
    opacity: 1 !important;

    transform:
        scale(1) !important;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.62),
        0 0 9px var(--accent),
        0 0 20px var(--accent);

    animation:
        ea-active-pulse 2.2s ease-in-out infinite;
}

.ea-marker.active::after {
    content: "";

    position: absolute;

    inset: -7px;

    border:
        2px solid var(--accent);

    border-radius: 50%;

    opacity: .34;

    pointer-events: none;

    animation:
        ea-active-ring 2.2s ease-out infinite;
}

@keyframes ea-active-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(0,0,0,.62),
            0 0 8px var(--accent),
            0 0 17px var(--accent);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(0,0,0,.62),
            0 0 13px var(--accent),
            0 0 27px var(--accent);
    }
}

@keyframes ea-active-ring {

    0% {
        transform: scale(.72);
        opacity: .42;
    }

    70% {
        opacity: .08;
    }

    100% {
        transform: scale(1.30);
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   Recent incident marker
   --------------------------------------------------------- */

.ea-marker.recent {
    opacity: .30 !important;

    transform:
        scale(.78) !important;

    filter:
        grayscale(.60)
        saturate(.45) !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.40),
        0 0 4px var(--accent) !important;

    animation: none;
}

.ea-marker.recent:hover {
    opacity: .68 !important;

    transform:
        scale(.90) !important;
}


/* =========================================================
   8. STATS
   ========================================================= */

.stats {
    min-height: 120px;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.35fr;

    align-items: center;
}

.stat {
    height: 75%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    border-right:
        1px solid #33404b;
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    font-size: 38px;
}

.stat div {
    font-size: 17px;
}

.stat small {
    display: block;

    margin-top: 4px;

    color: #98a2ac;
}

.stat-icon {
    font-size: 42px;
}

.red {
    color: #ff303a;
}

.amber {
    color: #f5a000;
}

.blue {
    color: #62a3ff;
}


/* =========================================================
   9. RIGHT-SIDE ALERT PANELS
   ========================================================= */

.alerts-panel {
    min-height: 440px;
    padding: 15px;
}

.history-panel {
    flex: 1;

    min-height: 255px;
    padding: 15px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 4px 10px;

    border-bottom:
        1px solid #27343e;
}

.section-title h2 {
    margin: 0;

    font-size: 21px;
}

.section-title span {
    color: #72aaff;
}

.alerts {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 12px;
}


/* =========================================================
   10. ALERT CARDS
   ========================================================= */

.alert-card {
    position: relative;

    display: grid;

    /* Meta column was removed; only icon + content remain. */
    grid-template-columns:
        70px
        1fr;

    gap: 12px;

    align-items: center;

    min-height: 112px;

    padding: 14px;

    border:
        1px solid #33404b;

    border-left:
        4px solid var(--accent);

    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            color-mix(
                in srgb,
                var(--accent) 8%,
                transparent
            ),
            rgba(255,255,255,.01)
        );
}

.alert-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border:
        2px solid var(--accent);

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--accent) 20%,
            #071019
        );

    color: #fff;

    font-size: 25px;

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--accent) 30%,
            transparent
        );
}

.alert-card h3 {
    margin:
        0 0 5px;

    color: var(--accent);

    font-size: 18px;
}

.alert-card p {
    margin: 3px 0;

    color: #e7ebef;
}

.alert-card small {
    color: #aab3bb;
}

.age {
    margin-top: 12px;

    color: var(--accent);

    font-weight: 700;
}


/* ---------------------------------------------------------
   Click-to-map interaction
   --------------------------------------------------------- */

.alert-card.has-location,
.history-row.history-clickable {
    cursor: pointer;
}

.alert-card.has-location {
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

.alert-card.has-location:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--accent);

    background:
        linear-gradient(
            100deg,
            color-mix(
                in srgb,
                var(--accent) 13%,
                transparent
            ),
            rgba(255,255,255,.025)
        );
}

.alert-card.has-location:focus-visible,
.history-row.history-clickable:focus-visible {
    outline:
        2px solid #62a3ff;

    outline-offset: 3px;
}

.map-hint {
    color: #8fa3b7;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}

.map-hint.unavailable {
    opacity: .42;
}


/* ---------------------------------------------------------
   Active / recent card status
   --------------------------------------------------------- */

.alert-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-bottom: 6px;
    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .85px;
}

.alert-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.alert-status.active {
    color: #baf8c6;

    background:
        rgba(39,223,76,.11);

    border:
        1px solid rgba(39,223,76,.32);
}

.alert-status.active::before {
    background: #27df4c;

    box-shadow:
        0 0 7px #27df4c;
}

.alert-status.recent {
    color: #99a6b1;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.10);
}

.alert-status.recent::before {
    background: #7f8c96;
}

.alert-card.is-recent {
    opacity: .72;

    filter:
        saturate(.75);
}

.alert-card.is-recent:hover {
    opacity: .92;
}


/* =========================================================
   11. WDW LOCATION INTELLIGENCE
   ========================================================= */

.wdw-area {
    margin:
        2px 0 4px;

    color: #e9f2fb;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .15px;
}

.wdw-area-pin {
    margin-right: 5px;

    color: #62a3ff;

    font-size: 10px;
}

.alert-card .ocso-location {
    margin:
        0 0 4px;

    color: #8f9ba6;

    font-size: 13px;
}

.alert-card .ocso-location.no-area {
    color: #d9e0e6;

    font-size: 14px;
}


/* =========================================================
   12. EARLIER TODAY
   ========================================================= */

.history {
    padding: 7px 4px;
}

.history-row {
    display: grid;

    grid-template-columns:
        75px
        1.1fr
        1.5fr
        .65fr;

    gap: 8px;

    padding:
        8px 0;

    border-bottom:
        1px solid rgba(255,255,255,.05);

    color: #c9d0d6;

    font-size: 14px;
}

.history-row:last-child {
    border: 0;
}

.history-row .type {
    color: #e6eaee;
}

.history-row.history-clickable {
    transition:
        background .15s ease;
}

.history-row.history-clickable:hover {
    background:
        rgba(98,163,255,.08);
}

.history-area {
    display: block;

    color: #e7edf2;

    font-weight: 600;
}

.history-road {
    display: block;

    margin-top: 2px;

    color: #8796a3;

    font-size: 11px;
}

.empty {
    padding:
        35px 10px;

    color: #8f9aa5;

    text-align: center;
}


/* =========================================================
   13. BELOW-MAP ADSENSE
   ========================================================= */

.below-map-ad {
    min-height: 118px;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.adsense-placeholder-wide {
    min-height: 92px;
}


/* =========================================================
   14. YOUTUBE FOOTER
   ========================================================= */

.footer.video-footer {
    display: block;

    min-height: 0;

    margin-top: 14px;
    padding: 18px;
}

.video-footer-title {
    margin:
        0 0 14px;

    color: #a9b6c1;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.video-grid {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.video-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid #2c3a45;

    border-radius: 12px;

    background: #071019;

    color: #eef4f8;

    text-decoration: none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.video-card:hover {
    transform:
        translateY(-2px);

    border-color: #4e9bff;

    background: #0a1620;
}

.video-card:focus-visible {
    outline:
        2px solid #62a3ff;

    outline-offset: 3px;
}

.video-thumb {
    position: relative;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background: #02070b;
}

.video-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.video-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    padding-left: 3px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(255,255,255,.72);

    border-radius: 50%;

    background:
        rgba(0,0,0,.72);

    color: #fff;

    font-size: 18px;

    transition:
        transform .18s ease,
        background .18s ease;
}

.video-card:hover .video-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background:
        rgba(255,0,0,.82);
}

.video-label {
    padding:
        10px 12px;

    color: #9fb1c1;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    text-align: center;
}

/* Neutralize legacy footer child styles if old markup remains temporarily. */
.footer.video-footer > div {
    padding: 0;
    border: 0;
    color: inherit;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .video-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 1050px) {

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

    .map-wrap {
        height: 520px;
    }
}


@media (max-width: 900px) {

    .topbar.topbar-ad-layout {
        grid-template-columns:
            1fr;
    }

    .header-ad {
        min-height: 90px;
    }
}


@media (max-width: 720px) {

    .video-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 650px) {

    .shell {
        padding: 8px;
    }

    .topbar.topbar-ad-layout {
        padding: 14px;

        gap: 16px;
    }

    .topbar-ad-layout .brand img {
        height: 72px;
    }

    .topbar-ad-layout .subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .map-wrap {
        height: 430px;
    }

    .stats {
        grid-template-columns:
            1fr;
    }

    .stat {
        padding: 15px;

        border-right: 0;

        border-bottom:
            1px solid #33404b;
    }

    .stat:last-child {
        border-bottom: 0;
    }

    .alert-card {
        grid-template-columns:
            55px
            1fr;
    }

    .history-row {
        grid-template-columns:
            65px
            1fr;
    }

    .history-row span:nth-child(3),
    .history-row span:nth-child(4) {
        grid-column: 2;
    }

    .wdw-landmark {
        opacity: .34;
    }

    .wdw-landmark-symbol {
        width: 21px !important;
        height: 21px !important;

        flex-basis: 21px !important;

        font-size: 9px !important;
    }

    .wdw-landmark-name {
        font-size: 9px !important;
    }
}


@media (max-width: 460px) {

    .video-grid {
        grid-template-columns:
            1fr;
    }

    .below-map-ad {
        min-height: 100px;
    }
}

/* =========================================================
   16. EARS ALERT MAP POPUPS
   ========================================================= */

/*
 * Replace Leaflet's default white popup with an
 * Ears Alert dashboard-style incident card.
 */

.ea-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0;

    overflow: hidden;

    border:
        1px solid #334451;

    border-radius: 14px;

    background:
        rgba(5,12,18,.97);

    color: #eef4f8;

    box-shadow:
        0 14px 38px rgba(0,0,0,.52);

    backdrop-filter:
        blur(10px);
}

.ea-leaflet-popup .leaflet-popup-content {
    width: auto !important;

    margin: 0;

    line-height: 1.35;
}

.ea-leaflet-popup .leaflet-popup-tip {
    background:
        rgba(5,12,18,.97);

    border:
        1px solid #334451;
}

.ea-leaflet-popup .leaflet-popup-close-button {
    top: 8px;
    right: 8px;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    color:
        #9ba9b5 !important;

    font-size: 19px;
    font-weight: 400;

    transition:
        color .15s ease,
        background .15s ease;
}

.ea-leaflet-popup .leaflet-popup-close-button:hover {
    background:
        rgba(255,255,255,.11);

    color:
        #ffffff !important;
}

.ea-popup {
    min-width: 278px;

    padding:
        15px 16px 14px;

    border-top:
        4px solid var(--accent);
}

.ea-popup-top {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 10px;
    padding-right: 27px;
}

.ea-popup-status,
.ea-popup-wdw {
    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
}

.ea-popup-status {
    gap: 5px;

    padding:
        3px 7px;

    border:
        1px solid rgba(255,255,255,.12);
}

.ea-popup-status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.ea-popup-status.active {
    border-color:
        rgba(39,223,76,.34);

    background:
        rgba(39,223,76,.11);

    color:
        #baf8c6;
}

.ea-popup-status.active::before {
    background:
        #27df4c;

    box-shadow:
        0 0 7px #27df4c;
}

.ea-popup-status.recent {
    background:
        rgba(255,255,255,.04);

    color:
        #9aa7b1;
}

.ea-popup-status.recent::before {
    background:
        #7f8c96;
}

.ea-popup-wdw {
    padding:
        3px 7px;

    border:
        1px solid rgba(98,163,255,.25);

    background:
        rgba(98,163,255,.08);

    color:
        #8eb8f4;
}

.ea-popup-title {
    margin-bottom: 6px;

    color:
        var(--accent);

    font-size: 18px;
    font-weight: 800;
}

.ea-popup-area {
    margin-bottom: 4px;

    color:
        #eef4f8;

    font-size: 14px;
    font-weight: 700;
}

.ea-popup-area-icon {
    margin-right: 4px;

    color:
        #62a3ff;

    font-size: 9px;
}

.ea-popup-area-generic {
    color:
        #b9c5ce;
}

.ea-popup-location {
    padding-bottom: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color:
        #8f9ca7;

    font-size: 12px;
}

.ea-popup-details {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    padding:
        11px 0;
}

.ea-popup-detail span {
    display: block;

    margin-bottom: 2px;

    color:
        #657582;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .9px;
}

.ea-popup-detail strong {
    display: block;

    color:
        #e4ebf0;

    font-size: 11px;
    font-weight: 700;
}

.ea-popup-disclaimer {
    padding-top: 9px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color:
        #667784;

    font-size: 9px;
    line-height: 1.45;
}

/* =========================================================
   17. RESET MAP CONTROL
   ========================================================= */

.ea-reset-map {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 6px;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 4px;

    background:
        rgba(7,16,25,.96);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size: 26px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 1px 5px rgba(0,0,0,.45);

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.ea-reset-map:hover {
    background:
        #102131;

    border-color:
        rgba(98,163,255,.55);

    color:
        #62a3ff;
}

.ea-reset-map:focus-visible {
    outline:
        2px solid #62a3ff;

    outline-offset:
        2px;
}

.ea-reset-map[hidden] {
    display: none !important;
}



/* Reset control positioning refinement */
.leaflet-top.leaflet-right .ea-reset-map {
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 7px;
}

/* =========================================================
   WDW INTELLIGENCE V2
   ========================================================= */

.wdw-subarea {
    margin:
        -1px 0 3px 15px;

    color:
        #aab8c4;

    font-size:
        12px;

    font-weight:
        600;
}

.wdw-near {
    margin:
        2px 0 5px 15px;

    color:
        #7f909d;

    font-size:
        11px;
}

.wdw-near strong {
    color:
        #b7c7d4;

    font-weight:
        700;
}

.ea-popup-subarea {
    margin:
        -1px 0 8px 14px;

    color:
        #a5b4c0;

    font-size:
        11px;

    font-weight:
        600;
}

.ea-popup-near {
    margin:
        4px 0 10px;

    padding:
        7px 9px;

    border:
        1px solid rgba(98,163,255,.13);

    border-radius:
        7px;

    background:
        rgba(98,163,255,.045);
}

.ea-popup-near span {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #647a8c;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .9px;
}

.ea-popup-near strong {
    color:
        #dbe8f3;

    font-size:
        11px;

    font-weight:
        700;
}

/* =========================================================
   WDW INTELLIGENCE — CARD DEDUPLICATION / TIGHTER SPACING
   ========================================================= */

.wdw-area {
    margin-bottom: 2px;
}

.wdw-subarea {
    margin:
        0 0 3px 15px;
}

.wdw-near {
    margin:
        1px 0 4px 15px;
}

.alert-card .ocso-location {
    margin-top: 1px;
}

.ea-popup-subarea {
    margin-bottom: 5px;
}

.ea-popup-near {
    margin-top: 3px;
}

/* =========================================================
   EARS ALERTS — LIVE CONNECTION STATUS
   ========================================================= */

.ea-live-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    white-space: nowrap;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;

    transition:
        color .18s ease;
}

.ea-live-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;
}


/* Healthy connection — pulsing green */
.ea-live-status.live {
    color: #45db83;
}

.ea-live-status.live .ea-live-dot {
    background: #35d07f;

    box-shadow:
        0 0 0 0 rgba(53,208,127,.62);

    animation:
        ea-live-pulse 1.8s ease-out infinite;
}


/* Browser is actively fetching */
.ea-live-status.updating {
    color: #f9b321;
}

.ea-live-status.updating .ea-live-dot {
    background: #f9b321;

    animation:
        ea-live-working .9s ease-in-out infinite alternate;
}


/* Slow response or one failed refresh */
.ea-live-status.delayed {
    color: #e98a32;
}

.ea-live-status.delayed .ea-live-dot {
    background: #e98a32;

    box-shadow:
        0 0 7px rgba(233,138,50,.45);
}


/* Repeated API failures */
.ea-live-status.lost {
    color: #e04747;
}

.ea-live-status.lost .ea-live-dot {
    background: #e04747;

    box-shadow:
        0 0 8px rgba(224,71,71,.50);
}


@keyframes ea-live-pulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(53,208,127,.62);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(53,208,127,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(53,208,127,0);
    }
}


@keyframes ea-live-working {

    from {
        opacity: .45;

        transform:
            scale(.82);
    }

    to {
        opacity: 1;

        transform:
            scale(1.08);
    }
}


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

    .ea-live-status.live .ea-live-dot,
    .ea-live-status.updating .ea-live-dot {
        animation: none;
    }
}

/* =========================================================
   EARS ALERTS — WDW PARK ICONS
   ========================================================= */

.wdw-area,
.ea-popup-area {
    display: flex;
    align-items: center;
}

.ea-card-park-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-right: 7px;
    object-fit: contain;
}

.ea-popup-park-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    margin-right: 8px;
    object-fit: contain;
}

.wdw-area:has(.ea-card-park-icon) .wdw-area-pin,
.ea-popup-area:has(.ea-popup-park-icon) .ea-popup-area-icon {
    display: none;
}

.ea-card-park-icon,
.ea-popup-park-icon {
    filter: none;
}

@media (min-width: 900px) {
    .ea-card-park-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
}

/* =========================================================
   DISNEY SPRINGS + GENERIC EARS ALERTS AREA ICONS
   ========================================================= */

.ea-card-park-icon-springs,
.ea-card-park-icon-ears,
.ea-popup-park-icon-springs,
.ea-popup-park-icon-ears {
    object-fit: contain;
}

.ea-card-park-icon-ears {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
}

.ea-popup-park-icon-ears {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
}

/* =========================================================
   EARS ALERTS — ALIGNED LOCATION ICON + COPY LAYOUT
   ========================================================= */

/*
 * Card location content is now a true two-column layout:
 *
 * [ICON]  EPCOT Resort Area
 *         Crescent Lake
 *         Near Walt Disney World Swan & Dolphin
 *         [UNK] EPCOT RESORTS BLVD
 *
 * This also guarantees the generic Ears icon appears
 * on calls that have no recognized WDW area.
 */

.wdw-location-block {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    align-items: start;

    margin-top: 1px;
}

.wdw-location-icon {
    width: 26px;
    min-width: 26px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 1px;
}

.wdw-location-copy {
    min-width: 0;
}

/* Remove the old offset-based alignment. */
.wdw-area,
.wdw-subarea,
.wdw-near,
.alert-card .ocso-location {
    margin-left: 0 !important;
}

.wdw-area {
    display: block !important;

    margin-top: 0 !important;
    margin-bottom: 2px !important;

    line-height: 1.25;
}

.wdw-subarea {
    margin:
        0 0 2px 0 !important;

    line-height: 1.3;
}

.wdw-near {
    margin:
        0 0 2px 0 !important;

    line-height: 1.3;
}

.alert-card .ocso-location {
    margin:
        0 !important;

    line-height: 1.3;
}


/* Card icons */
.ea-card-park-icon {
    width: 23px !important;
    height: 23px !important;

    flex: 0 0 23px !important;

    margin: 0 !important;

    display: block;

    object-fit: contain;
}

.ea-card-park-icon-ears {
    width: 24px !important;
    height: 24px !important;

    flex-basis: 24px !important;
}


/* ---------------------------------------------------------
   MAP POPUP LOCATION ALIGNMENT
   --------------------------------------------------------- */

.ea-popup-location-block {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 9px;

    align-items: start;

    margin-top: 3px;
}

.ea-popup-location-icon {
    width: 29px;
    min-width: 29px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 1px;
}

.ea-popup-location-copy {
    min-width: 0;
}

.ea-popup-area,
.ea-popup-subarea,
.ea-popup-near,
.ea-popup-location {
    margin-left: 0 !important;
}

.ea-popup-area {
    display: block !important;

    margin-bottom: 2px !important;
}

.ea-popup-subarea {
    margin:
        0 0 3px 0 !important;
}

.ea-popup-near {
    margin:
        3px 0 7px 0 !important;
}

.ea-popup-location {
    margin:
        0 !important;
}


/* Popup icons */
.ea-popup-park-icon {
    width: 26px !important;
    height: 26px !important;

    flex: 0 0 26px !important;

    margin: 0 !important;

    display: block;

    object-fit: contain;
}

.ea-popup-park-icon-ears {
    width: 27px !important;
    height: 27px !important;

    flex-basis: 27px !important;
}


/*
 * Old diamond indicators are no longer needed.
 * Every location block now has a real icon.
 */
.wdw-area-pin,
.ea-popup-area-icon {
    display: none !important;
}

/* =========================================================
   EARS ALERTS — CARD CLOCK TIMESTAMP
   ========================================================= */

/*
 * Example:
 * 42 MINUTES AGO • 10:48 am • CLICK TO VIEW ON MAP
 *
 * Clock time intentionally matches the same font size
 * as "CLICK TO VIEW ON MAP".
 */

.card-clock-time,
.card-meta-separator {
    font-size: inherit;
}

.card-clock-time {
    color: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
}

.card-meta-separator {
    opacity: .58;
    margin: 0 4px;
}

/*
 * Explicitly tie clock size to the existing map hint,
 * even if the age text uses a larger size elsewhere.
 */
.map-hint,
.card-clock-time,
.card-meta-separator {
    font-size: 10px !important;
}

/* =========================================================
   EARS ALERTS — MORE VISIBLE RECENT MAP MARKERS
   ========================================================= */

/*
 * Recent calls should stay secondary to active calls,
 * but remain easy to identify on the map.
 */
.ea-marker.recent {
    opacity: .58 !important;

    transform:
        scale(.86) !important;

    filter:
        grayscale(.35)
        saturate(.72) !important;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.48),
        0 0 7px var(--accent) !important;
}

.ea-marker.recent:hover {
    opacity: .88 !important;

    transform:
        scale(.96) !important;

    filter:
        grayscale(.12)
        saturate(.95) !important;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.55),
        0 0 10px var(--accent) !important;
}

/* =========================================================
   EARS ALERTS — ACTIVE CALL VISIBILITY
   ========================================================= */

/* ---------------------------------------------------------
   RIGHT-SIDE CARD
   --------------------------------------------------------- */

.alert-card.is-active {
    /*
     * Keep the incident/category color on the left edge,
     * but add a very subtle red active-state wash.
     */
    box-shadow:
        inset 0 0 0 1px rgba(255,48,58,.06),
        0 3px 12px rgba(0,0,0,.14);
}

.active-call-badge {
    position: absolute;

    top: 10px;
    right: 11px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        4px 8px;

    border:
        1px solid rgba(255,48,58,.55);

    border-radius:
        999px;

    background:
        rgba(255,48,58,.12);

    color:
        #ff626a;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .8px;

    line-height:
        1;
}

.active-call-dot {
    width: 7px;
    height: 7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        #ff303a;

    box-shadow:
        0 0 0 0 rgba(255,48,58,.70);

    animation:
        ea-card-active-pulse 1.7s ease-out infinite;
}

@keyframes ea-card-active-pulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(255,48,58,.70);
    }

    70% {
        box-shadow:
            0 0 0 6px rgba(255,48,58,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(255,48,58,0);
    }
}


/* ---------------------------------------------------------
   MAP — RED MEANS ACTIVE
   --------------------------------------------------------- */

/*
 * Category color remains on the marker's normal border.
 * RED is reserved for the active-state halo.
 */
.ea-marker.active {
    opacity:
        1 !important;

    transform:
        scale(1.05) !important;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.64),
        0 0 9px var(--accent),
        0 0 17px rgba(255,48,58,.42) !important;
}


/*
 * Small solid red status dot attached directly
 * to the active EA marker.
 */
.ea-marker.active::before {
    content:
        "";

    position:
        absolute;

    top:
        -6px;

    right:
        -6px;

    z-index:
        5;

    width:
        12px;

    height:
        12px;

    border:
        2px solid #ffffff;

    border-radius:
        50%;

    background:
        #ff303a;

    box-shadow:
        0 0 8px rgba(255,48,58,.90);

    pointer-events:
        none;
}


/*
 * Red radar ring = ACTIVE.
 * This replaces the older category-colored pulse ring.
 */
.ea-marker.active::after {
    content:
        "";

    position:
        absolute;

    inset:
        -9px;

    z-index:
        1;

    border:
        3px solid #ff303a !important;

    border-radius:
        50%;

    pointer-events:
        none;

    animation:
        ea-active-red-ring 1.8s ease-out infinite !important;
}

@keyframes ea-active-red-ring {

    0% {
        transform:
            scale(.78);

        opacity:
            .78;
    }

    65% {
        opacity:
            .18;
    }

    100% {
        transform:
            scale(1.32);

        opacity:
            0;
    }
}


/*
 * Keep recent calls clearly visible, but without
 * any red state indicator.
 */
.ea-marker.recent::before,
.ea-marker.recent::after {
    content:
        none !important;
}


/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {

    .active-call-dot,
    .ea-marker.active::after {
        animation:
            none !important;
    }
}

/* =========================================================
   EARS ALERTS — NEW ALERT ARRIVAL
   ========================================================= */

.alert-card.is-new-alert {
    animation:
        ea-new-card-arrival .62s cubic-bezier(.2,.85,.25,1),
        ea-new-card-glow 2.1s ease-in-out 3;
}

@keyframes ea-new-card-arrival {
    0% { opacity: 0; transform: translateX(18px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes ea-new-card-glow {
    0%, 100% { filter: brightness(1); }
    50% {
        filter: brightness(1.18);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.10),
            0 0 22px rgba(249,179,33,.30);
    }
}

.new-alert-badge {
    position: absolute;
    top: 10px;
    right: 78px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid rgba(249,179,33,.68);
    border-radius: 999px;
    background: rgba(249,179,33,.14);
    color: rgb(249,179,33);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    line-height: 1;
}

.alert-card.is-new-alert:not(.is-active) .new-alert-badge {
    right: 11px;
}

/* Brief gold burst identifies a just-arrived map marker. */
.ea-marker.new-alert {
    animation: ea-new-marker-pop 1.05s ease-out 3 !important;
}

@keyframes ea-new-marker-pop {
    0%, 100% {
        filter:
            brightness(1)
            drop-shadow(0 0 0 rgba(249,179,33,0));
    }
    45% {
        filter:
            brightness(1.38)
            drop-shadow(0 0 9px rgba(249,179,33,.95));
    }
}

/* Active red radar halo always retains its active meaning. */
.ea-marker.active.new-alert::after {
    animation: ea-active-red-ring 1.8s ease-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .alert-card.is-new-alert,
    .ea-marker.new-alert {
        animation: none !important;
    }
}

/* =========================================================
   EARS ALERTS — SHAREABLE INDIVIDUAL ALERTS
   ========================================================= */

.alert-share-button {
    position: absolute;

    right: 12px;
    bottom: 10px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 7px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:
        6px;

    background:
        rgba(255,255,255,.035);

    color:
        #8799a8;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .6px;

    cursor:
        pointer;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.alert-share-button:hover {
    color:
        #ffffff;

    border-color:
        rgba(249,179,33,.48);

    background:
        rgba(249,179,33,.10);
}

.alert-share-button:focus-visible,
.ea-popup-share-button:focus-visible {
    outline:
        2px solid rgb(249,179,33);

    outline-offset:
        2px;
}


/* Shared/deep-linked card */
.alert-card.shared-alert {
    animation:
        ea-shared-alert-highlight 1.1s ease-in-out 3;

    box-shadow:
        0 0 0 2px rgba(249,179,33,.68),
        0 0 26px rgba(249,179,33,.20) !important;
}

@keyframes ea-shared-alert-highlight {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(249,179,33,.45),
            0 0 14px rgba(249,179,33,.12);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(249,179,33,.82),
            0 0 30px rgba(249,179,33,.28);
    }
}


/* Popup share button */
.ea-popup-share-button {
    width: 100%;

    margin:
        2px 0 11px;

    padding:
        8px 10px;

    border:
        1px solid rgba(249,179,33,.26);

    border-radius:
        7px;

    background:
        rgba(249,179,33,.07);

    color:
        rgb(249,179,33);

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .7px;

    cursor:
        pointer;
}

.ea-popup-share-button:hover {
    background:
        rgba(249,179,33,.14);

    border-color:
        rgba(249,179,33,.52);
}


/* Small copy/share confirmation */
.ea-share-toast {
    position: fixed;

    left: 50%;
    bottom: 24px;

    z-index: 99999;

    transform:
        translate(-50%, 14px);

    padding:
        9px 14px;

    border:
        1px solid rgba(249,179,33,.38);

    border-radius:
        999px;

    background:
        rgba(5,12,18,.96);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .18s ease,
        transform .18s ease;

    box-shadow:
        0 8px 28px rgba(0,0,0,.34);
}

.ea-share-toast.show {
    opacity:
        1;

    transform:
        translate(-50%, 0);
}


@media (max-width: 650px) {

    .alert-share-button {
        position:
            static;

        margin-top:
            7px;
    }
}



/* =========================================================
   22. EARS ALERTS — ADMIN THEME VARIABLES
   Added August 13, 2026

   These variables are intentionally placed at the END of the
   stylesheet so the Theme Admin can preview and save colors
   without rewriting the entire baseline CSS.
   ========================================================= */

:root {
    --ea-page-bg: #373636;
    --ea-surface: #FBFEF9;
    --ea-surface-alt: #F3F5F2;
    --ea-text: #373636;
    --ea-text-muted: #6B6868;
    --ea-border: #D7D9D5;
    --ea-gold: #F9B41E;
    --ea-red: #B9031C;
    --ea-taupe: #5D576B;
    --ea-link: #B9031C;
    --ea-map-brightness: .82;
    --ea-map-saturation: .78;
    --ea-radius: 16px;
    --ea-shadow: 0 12px 32px rgba(0,0,0,.16);
}

/* Theme-variable overrides */
html,
body {
    background: var(--ea-page-bg) !important;
    color: var(--ea-text) !important;
}

body {
    background: var(--ea-page-bg) !important;
}

.panel {
    background: var(--ea-surface) !important;
    color: var(--ea-text) !important;
    border-color: var(--ea-border) !important;
    border-radius: var(--ea-radius) !important;
    box-shadow: var(--ea-shadow) !important;
}

.stat,
.section-title,
.alert-card,
.history-row,
.video-card,
.ea-leaflet-popup .leaflet-popup-content-wrapper {
    color: var(--ea-text);
}

.stat {
    border-color: var(--ea-border) !important;
}

.stat small,
.alert-card small,
.map-hint,
.wdw-subarea,
.wdw-near,
.alert-card .ocso-location,
.history-road,
.empty,
.video-footer-title,
.video-label {
    color: var(--ea-text-muted) !important;
}

.section-title {
    border-color: var(--ea-border) !important;
}

.section-title h2,
.alert-card p,
.wdw-area,
.history-area,
.history-row .type {
    color: var(--ea-text) !important;
}

.alert-card {
    border-color: var(--ea-border);
    background:
        linear-gradient(
            100deg,
            color-mix(in srgb, var(--accent) 8%, transparent),
            var(--ea-surface)
        ) !important;
}

.alert-card.has-location:hover {
    background:
        linear-gradient(
            100deg,
            color-mix(in srgb, var(--accent) 13%, transparent),
            var(--ea-surface-alt)
        ) !important;
}

.history-row {
    border-color: color-mix(in srgb, var(--ea-border) 70%, transparent) !important;
}

.history-row.history-clickable:hover {
    background: var(--ea-surface-alt) !important;
}

.video-card {
    background: var(--ea-surface-alt) !important;
    border-color: var(--ea-border) !important;
}

.video-card:hover {
    background: var(--ea-surface) !important;
    border-color: var(--ea-gold) !important;
}

.leaflet-tile {
    filter:
        saturate(var(--ea-map-saturation))
        brightness(var(--ea-map-brightness))
        contrast(1.04);
}

a {
    color: var(--ea-link);
}

/* Admin live-preview hook. The admin page can inject the same
   variables directly on document.documentElement.style. */
/* Ears Alert page gradient */
html,
body {
    background:
        linear-gradient(
            to top left,
            var(--ea-page-bg-start, #373636) 0%,
            var(--ea-page-bg-end, #575454) 100%
        ) fixed !important;

    color: var(--ea-text, #373636) !important;
}

/*
 * Keep the gradient covering the viewport even when the page
 * has little content.
 */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
}

/* =========================================================
   EARS ALERT — SOCIAL FOLLOW
   ========================================================= */

.ea-social-follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 18px;
    padding: 24px 26px;

    background: var(--ea-surface, #FBFEF9);
    border: 1px solid var(--ea-border, #D7D9D5);
    border-radius: var(--ea-radius, 16px);

    color: var(--ea-text, #373636);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .12);
}

.ea-social-copy {
    flex: 1;
}

.ea-social-kicker {
    margin-bottom: 5px;

    color: var(--ea-red, #B9031C);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.ea-social-copy h2 {
    margin: 0 0 6px;

    color: var(--ea-text, #373636);

    font-size: 22px;
    line-height: 1.1;
}

.ea-social-copy p {
    margin: 0;

    max-width: 95%;

    color: var(--ea-text-muted, #6B6868);

    font-size: 14px;
    line-height: 1.45;
}


/* BUTTON AREA */

.ea-social-buttons {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.ea-social-btn {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 155px;
    padding: 11px 16px;

    border-radius: 10px;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

.ea-social-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .18);
}

.ea-social-btn small {
    display: block;

    margin-bottom: 1px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;

    opacity: .7;
}

.ea-social-btn strong {
    display: block;

    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.ea-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    font-size: 23px;
    font-weight: 800;
}


/* X */

.ea-social-x {
    background: #373636;
    color: #FBFEF9 !important;
}


/* INSTAGRAM */

.ea-social-instagram {
    background: var(--ea-red, #B9031C);
    color: #FBFEF9 !important;
}


/* MOBILE */

@media (max-width: 720px) {

    .ea-social-follow {
        display: block;
        padding: 20px;
    }

    .ea-social-buttons {
        margin-top: 18px;
    }

    .ea-social-btn {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 460px) {

    .ea-social-buttons {
        flex-direction: column;
    }

    .ea-social-btn {
        width: 100%;
    }
}

.alert-card {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   ALERT CARD — PARK SILHOUETTE WATERMARK
   ========================================================= */

/*
 * card_bg.png is a black silhouette on transparency.
 * The cards are currently dark, so invert the silhouette to
 * white and keep it very subtle.
 *
 * IMPORTANT:
 * Do NOT position every direct child of .alert-card.
 * Some controls (including SHARE) are absolutely positioned
 * relative to the card and must keep the card as their
 * containing block.
 */
.alert-card::after {
    content: "";

    position: absolute;

    top: 55%;
    right: -18px;

    width: 56%;
    height: 115%;

    transform: translateY(-50%);

    background-image:
        url("/images/park_icons/card_bg.png");

    background-repeat:
        no-repeat;

    background-position:
        right center;

    background-size:
        contain;

    filter:
        invert(0);

    opacity:
        .99;

    pointer-events:
        none;

    z-index:
        0;
}

/* Keep controls above the watermark. */
.alert-share-button,
.active-call-badge,
.new-alert-badge {
    z-index:
        5;
}

/* Lock SHARE to the lower-right corner of the whole card. */
.alert-share-button {
    position:
        absolute !important;

    right:
        12px !important;

    left:
        auto !important;

    bottom:
        10px !important;
}

/* =========================================================
   FLOATING SOCIAL BUTTONS
   ========================================================= */

.ea-floating-social {
    position: fixed;

    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 9px;

    z-index: 9999;
}

.ea-float-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 0;
    border-radius: 50%;

    text-decoration: none !important;

    font-size: 22px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .25);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.ea-float-button:hover {
    transform: translateX(-3px) scale(1.06);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .32);
}


/* X */

.ea-float-x {
    background: #373636;
    color: #fff;
}


/* Instagram */

.ea-float-instagram {
    background: #B9031C;
    color: #fff;
}


/* Future notifications */

.ea-float-bell {
    background: #F9B321;
    color: #373636;
}


/* Mobile */

@media (max-width: 700px) {

    .ea-floating-social {
        right: 8px;
    }

    .ea-float-button {
        width: 42px;
        height: 42px;

        font-size: 19px;
    }
}
.ea-float-button i {
    font-size: 21px;
    line-height: 1;
}