/* -------------------------------------------------------
   GLOBAL RESET
-------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: auto;
    min-height: 100%;
    background: #1e1e2f;
    color: white;
    font-family: system-ui, sans-serif;
    overflow-x: hidden;
}

/* Smooth fade-in after loader */
#app.shown {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}


/* -------------------------------------------------------
   TOPBAR & AVATAR
-------------------------------------------------------- */

.topbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    position: relative;
    z-index: 5000;
}

#topAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #1e88e5;
    transition: 0.2s ease;
}

#topAvatar:hover {
    opacity: 0.8;
}


/* -------------------------------------------------------
   BUTTONS (Shared)
-------------------------------------------------------- */

.button-main,
.btn,
button {
    background: #1e88e5;
    border: none;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.15s ease-in-out;
}

.button-main:hover,
.btn:hover,
button:hover {
    background: #227ad4;
}

button:disabled {
    background: #666;
    opacity: 0.5;
    cursor: default;
}


/* BACK button (grey style) */
.btn-grey,
#backBtn {
    background: #888;
    color: black !important;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
}

.btn-grey:hover,
#backBtn:hover {
    background: #9b9b9b;
}


/* RED button (logout, delete etc.) */
.btn-red {
    background: #c0392b;
}

.btn-red:hover {
    background: #a12f23;
}


/* -------------------------------------------------------
   INPUT FIELDS
-------------------------------------------------------- */

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 14px;
    border: none;
    border-radius: 8px;
    background: #2f2f41;
    color: white;
    font-size: 15px;
}

textarea {
    min-height: 90px;
    resize: vertical;
}


/* -------------------------------------------------------
   PAGE TITLES
-------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    font-size: 28px;
    margin-top: 15px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}


/* -------------------------------------------------------
   INDEX PAGE STYLE
-------------------------------------------------------- */

.title-box {
    text-align: center;
    margin-top: 60px;
}

.title-box h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.title-box p {
    opacity: 0.7;
    margin-bottom: 25px;
    font-size: 15px;
}


/* -------------------------------------------------------
   PROFILE PAGE
-------------------------------------------------------- */

.avatar-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

#profileAvatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #1e88e5;
    object-fit: cover;
    cursor: pointer;
    transition: 0.25s;
}

#profileAvatar:hover {
    opacity: 0.8;
}


/* -------------------------------------------------------
   FLOATING ADD BUTTON (Cruise Page)
-------------------------------------------------------- */

#addPinBtn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #1e88e5;
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 30px;
    cursor: pointer;
    z-index: 5000;
    display: none;
    /* only visible when whitelisted */
    transition: 0.15s;
}

#addPinBtn:hover {
    background: #227ad4;
}


/* -------------------------------------------------------
   MODAL STYLE (Shared)
-------------------------------------------------------- */

#addModal,
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: flex-start;
    /* prevent going under top bar */
    justify-content: center;
    padding-top: 80px;
    /* create space under the topbar */
    overflow-y: auto;
    /* allow scrolling if needed */
    z-index: 6000;
}

.modal-content {
    background: #2b2b3c;
    padding: 20px;
    width: 90%;
    max-width: 350px;
    max-height: calc(100vh - 120px);
    /* fits on screen */
    overflow-y: auto;
    /* scroll inside modal if needed */
    border-radius: 12px;
    color: white;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.modal-buttons button {
    flex: 1;
}


/* -------------------------------------------------------
   MAP (Leaflet)
-------------------------------------------------------- */

#map {
    width: 100%;
    height: calc(100vh - 0px);
    position: relative;
    z-index: 0;
}

.leaflet-control {
    border-radius: 6px !important;
    overflow: hidden;
}

#centerPointer {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #1e88e5;
    border: 3px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 6000;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#mapTypeToggle {
    position: fixed;
    top: 70px;
    left: 10px;
    z-index: 6000;
    background: #1e1e2f;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #1e88e5;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    opacity: 0.9;
}

#mapTypeToggle:hover {
    opacity: 1;
}

/* -------------------------------------------------------
   SCROLLBAR
-------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1e1e2f;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* -------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------- */

@media (max-width: 480px) {
    #addPinBtn {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    #profileAvatar {
        width: 100px;
        height: 100px;
    }
}

/* Floating FAB Menu */
#fabMenu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 6000;
}

#fabMain {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1e88e5;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .25s ease;
    position: relative;
}

#fabMain span,
#fabMain span::before,
#fabMain span::after {
    content: "";
    width: 28px;
    height: 3px;
    background: white;
    position: absolute;
    transition: .25s ease;
    border-radius: 3px;
}

#fabMain span::before {
    transform: translateY(-8px);
}

#fabMain span::after {
    transform: translateY(8px);
}

/* Open state (hamburger → X) */
#fabMenu.open #fabMain span {
    background: transparent;
}

#fabMenu.open #fabMain span::before {
    transform: rotate(45deg);
}

#fabMenu.open #fabMain span::after {
    transform: rotate(-45deg);
}

/* Menu items container */
#fabItems {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}


/* Individual buttons */
.fabItem {
    background: #2b2b3c;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #1e88e5;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: transform .2s ease, opacity .2s ease;
}

#fabMenu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999999;
    /* Forces it above all UI */
}

#fabItems,
#fabMain {
    z-index: 999999;
}

/* ============= FAB MENU FIX ============= */
#fabMenu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999999;
}

#fabMain {
    width: 60px;
    height: 60px;
    background: #1e88e5;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    transition: 0.25s ease;
    z-index: 999999;
}

/* Hamburger bars */
#fabMain .bar1,
#fabMain .bar2,
#fabMain .bar3 {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: 0.25s ease;
}

/* FAB Animation: open -> transform into X */
#fabMenu.open #fabMain .bar1 {
    transform: rotate(45deg) translate(5px, 5px);
}

#fabMenu.open #fabMain .bar2 {
    opacity: 0;
}

#fabMenu.open #fabMain .bar3 {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Dropdown items */
#fabItems {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition: opacity .25s ease, transform .25s ease;
    z-index: 999999;
}

#fabMenu.open #fabItems {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fabItem {
    background: #2d2d3c;
    color: white;
    padding: 12px 14px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    min-width: 130px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

/* SITE TITLE */
#siteTitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

#siteLogo {
    height: 38px;
    width: 38px;
    border-radius: 8px;
    object-fit: contain;
}

#siteTitle span {
    font-size: 24px;
    /* bigger title */
    font-weight: 700;
    color: white;
    letter-spacing: 0.7px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* TOP BAR — consistent across all pages */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(20, 20, 35, 0.65);
    backdrop-filter: blur(10px);
    z-index: 9999;
}

/* HOME BUTTON — bright blue, bigger, clean */
#homeBtn {
    width: 48px;
    height: 48px;
    background: #1e88e5;
    /* bright blue */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    /* bigger icon */
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    transition: 0.15s ease;
}

#homeBtn:hover {
    transform: scale(1.05);
    background: #2196f3;
}

/* TITLE + LOGO — always aligned RIGHT */
#siteTitle {
    display: flex;
    align-items: center;
    gap: 10px;
}

#siteLogo {
    height: 36px;
    width: 36px;
    border-radius: 8px;
    object-fit: contain;
}

#siteTitle span {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .4px;
}

#map {
    position: fixed;
    top: 60px;
    /* height of your topbar */
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 60px);
    /* full height minus topbar */
    width: 100%;
}

/* Move Leaflet zoom buttons downward */
.leaflet-top.leaflet-left {
    top: 20px !important;
    /* Push below topbar */
}

#app {
    padding-top: 70px !important;
    /* 60px topbar + 30px visual spacing */
}

#fabMain {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1e88e5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

#fabMain:active {
    transform: scale(0.92);
}

#fabMain img {
    width: 32px;
    height: 32px;
    filter: invert(1);
    pointer-events: none;
}

.fabMapBtn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    background: #1e88e5;
    border-radius: 50%;
    color: white;
    font-size: 34px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform .2s ease, background .2s ease;
}

.fabMapBtn:active {
    transform: scale(0.92);
}

#pinListBtn {
    width: 46px;
    height: 46px;
    background: #1e88e5;
    border-radius: 10px;
    border: none;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

/* --- Clean DSKY Panel --- */
.sidePanel {
    position: fixed;
    top: 70px;
    /* sits PERFECTLY under your 70px topbar */
    right: -360px;
    /* hidden by default */
    width: 340px;
    height: calc(100vh - 70px);
    background: #2b2b3c;
    border-left: 2px solid #1e88e5;
    border-top-left-radius: 14px;
    /* rounded corner */
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.35);
    transition: right .30s ease;
    z-index: 99999;
    overflow-y: auto;
}

/* When open → slide in */
.sidePanel.open {
    right: 0;
}

/* Tab bar (top of panel) */
.panelTabs {
    display: flex;
    background: #1f1f2b;
    border-top-left-radius: 14px;
    overflow: hidden;
}

/* Tab buttons */
.panelTabs button {
    flex: 1;
    padding: 14px 0;
    border: none;
    color: white;
    background: #1f1f2b;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}

.panelTabs button.active {
    background: #1e88e5;
}


/* --- CSS FIX START (Paste at bottom of styles.css) --- */

#map {
    height: 100vh !important;
    width: 100% !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1 !important;
}

.topbar {
    z-index: 5000 !important;
}


/* HIDE Admin button by default - JS will show it if you are admin */
#adminPinBtn {
    display: none;
    z-index: 5000 !important;
}

/* --- CSS FIX END --- */

/* --- PASTE THIS SECURE BLOCK AT THE BOTTOM --- */

/* 1. Force Map to background */
#map {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1 !important;
}

/* 2. Floating Buttons (Add & Map Type) are always visible */
#addPinBtn,
.fabMapBtn {
    z-index: 6000 !important;
    display: flex;
}

/* 3. Admin Button is HIDDEN by default (JS enables it for admins) */
#adminPinBtn {
    z-index: 6000 !important;
}

/* 4. Delete Button inside Modal is HIDDEN by default */
#editModal .btn-red {
    display: none;
}

.topbar {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* this stays */
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}

.topbar-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    /* spacing between home and admin buttons */
}

.iconBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #1e88e5;
    border-radius: 12px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.iconBtn i {
    pointer-events: none;
}

/* FINAL FIX – move zoom buttons below the 70px topbar */
.leaflet-top.leaflet-left {
    top: 80px !important;
    /* 70px topbar + 10px spacing */
}


.iconBtn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s;
}

.iconBtn:hover {
    background: #166fce;
    transform: translateY(-2px);
}

/* Current Location Recenter Button */
.fabLocateBtn {
    position: fixed;
    bottom: 110px;
    /* Above the satellite button */
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #1e88e5;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 6000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: 0.15s ease;
}

.fabLocateBtn:hover {
    background: #2196f3;
    transform: scale(1.05);
}

.fabLocateBtn:active {
    transform: scale(0.92);
}

/* Base style for both floating buttons (makes alignment identical) */
.fabBtn {
    position: fixed;
    right: 25px;
    /* SAME for both → ensures perfect centering */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: #1e88e5;
    color: white;
    cursor: pointer;
    z-index: 6000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: 0.15s ease;
}

/* Satellite button (bottom) */
.fabMapBtn {
    bottom: 25px;
    width: 56px;
    height: 56px;
    font-size: 26px;
    /* centered better */
}

/* Location button (above satellite) */
.fabLocateBtn {
    bottom: calc(25px + 56px + 12px);
    /* 12px spacing above map button */
    width: 56px;
    /* NOW SAME SIZE → PERFECT ALIGNMENT */
    height: 56px;
    font-size: 22px;
    /* slightly smaller icon inside */
}

/* Hover effect */
.fabBtn:hover {
    background: #2196f3;
    transform: scale(1.05);
}

.fabBtn:active {
    transform: scale(0.92);
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

/* TAB SYSTEM */
.tab {
    display: none;
    /* hide everything by default */
}

.tab.active {
    display: block;
    /* ONLY the active one shows */
}

.panelTabs {
    display: flex;
    background: #1f1f2b;
    border-top-left-radius: 14px;
    overflow: hidden;
}

.panelTabs button {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: #1f1f2b;
    color: white;
    cursor: pointer;
}

.panelTabs button.active {
    background: #1e88e5;
}

/* Fix tab buttons being unclickable under H2 */
.modal-content h2 {
    margin-bottom: 12px;
    position: relative;
    z-index: 10;
}

.panelTabs {
    margin-top: 10px;
    position: relative;
    z-index: 20;
}

#modalTabsContainer {
    margin-top: 15px;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

/* FULLSCREEN USER EDIT MODAL */
.user-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 999999;
    justify-content: center;
    align-items: flex-start;
    padding-top: 70px;
    overflow-y: auto;
}

.user-modal-content {
    background: #2b2b3c;
    width: 94%;
    max-width: 600px;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 40px;
}

.user-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.user-modal-header h2 {
    margin: 0;
}

.closeUserModal {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}

.user-section {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #3c3c4d;
}

.user-section h3 {
    margin-bottom: 15px;
}

.perm-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delete-zone h3 {
    color: #ff6b6b;
}

.delete-zone p {
    margin-bottom: 10px;
    color: #ff6b6b;
}

.pinItem {
    background: #2b2b3c;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    color: white !important;
}

/* Fix modal section title alignment */
.user-section h3 {
    text-align: left !important;
}

.user-modal-header h2 {
    text-align: left !important;
}

.title-box .button-main {
    margin-top: 20px;
}

.admin-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    color: #d3d3d3;
}

/* Pending user badge */
.pending-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-register {
    width: 100%;
    padding: 14px;
    border: none;
    background: #2f6fcf;
    color: white;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 18px;
    /* spacing below login button */
}

.btn-register:hover {
    background: #3b7be0;
}

.perm-line input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.country-dropdown {
    position: relative;
}

.country-menu {
    position: absolute;
    top: 45px;
    right: 0;
    background: #2b2b3c;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 5px 0;
    width: 160px;
    display: none;
    z-index: 9999;
}

.country-item {
    padding: 8px 12px;
    cursor: pointer;
}

.country-item:hover {
    background: #1e88e5;
}

.smallBtn {
    padding: 8px 10px !important;
    font-size: 16px !important;
}

.country-menu {
    max-height: 300px;
    overflow-y: auto;
    background: #2b2b3c;
    border: 1px solid #1e88e5;
    border-radius: 8px;
    padding: 5px 0;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
}

.country-item:hover {
    background: #1e88e5;
}

.flagIcon {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.type-dropdown {
    position: relative;
    display: inline-block;
}

#typeToggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-menu {
    position: absolute;
    right: 0;
    top: 45px;
    background: #2b2b3c;
    border: 1px solid #1e88e5;
    border-radius: 8px;
    padding: 8px 0;
    display: none;
    min-width: 160px;
    z-index: 99999;
}

.type-dropdown.open .type-menu {
    display: block;
}

.type-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.type-item:hover {
    background: #1e88e5;
}

.type-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Match the iconBtn size */
#typeToggle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circle icon for current filter color */
#typeColorCircle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Dropdown */
.type-dropdown {
    position: relative;
    display: inline-block;
}

.type-dropdown.open .type-menu {
    display: block;
}

/* Items */
.type-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.type-item:hover {
    background: #1e88e5;
}

.type-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* COUNTRY MENU — align left to button and attach to top bar */
.country-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    /* small spacing under button */
    z-index: 99999;
}

/* TYPE MENU — align left to button and attach to top bar */
.type-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* directly under button */
    left: 0;
    /* align left edge with button */
    background: #2b2b3c;
    border-radius: 10px;
    padding: 10px 0;

    min-width: 150px;
    max-width: 90vw;
    /* NEVER exceed screen width */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 99999;

    overflow: hidden;
}


.type-dropdown {
    --menu-width: 180px;
}

.type-menu {
    width: var(--menu-width);
}

/* Auto-shift if not enough space on the right */
@media (max-width: 480px) {
    .type-dropdown {
        position: relative;
    }

    .type-dropdown .type-menu {
        left: -80px;
        right: 0;
        /* anchor menu's right edge to button's right edge */
        max-width: 80vw;
    }
}

.amenityGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0 14px;
}

.amenityGrid label {
    background: #242436;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.amenityGrid input {
    width: auto;
    margin: 0;
}

.popupAmenities {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.popupAmenities span {
    background: #222;
    color: white;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 12px;
}

.popupWarning {
    margin-top: 8px;
    background: #5c2f00;
    color: #ffd18a;
    padding: 6px;
    border-radius: 6px;
    font-size: 12px;
}

.popupInfo {
    margin-top: 6px;
    background: #20283a;
    color: #dbeafe;
    padding: 6px;
    border-radius: 6px;
    font-size: 12px;
}

.height-warning-marker {
    background: transparent !important;
    border: none !important;
}

.height-sign {
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    border: 6px solid #d00000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.5px;
    line-height: 1;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.height-sign span {
    display: block;
    max-width: 42px;
    transform: translateY(1px);
    white-space: nowrap;
    text-align: center;
}

/* Streamlined bus-driver pin detail UI */
.pinPopup {
    min-width: 245px;
    max-width: 330px;
    color: #f8fafc;
    background: #151827;
    border-radius: 12px;
    padding: 10px;
    margin: -8px;
}

.pinPopup .popupTitle {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 3px;
}

.pinPopup .popupCategory {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.pinPopup .popupDescription {
    background: #202438;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.35;
}

.popupUser {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    opacity: .85;
    margin-top: 9px;
}

.popupUser img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.popupActions {
    display: flex;
    gap: 6px;
    margin-top: 9px;
}

.popupActions a,
.popupActions button {
    flex: 1;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: white !important;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.popupActions .danger,
.popupActions button.danger {
    background: #dc2626;
}

.pinItem {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
}

.pinItem:hover {
    background: rgba(255, 255, 255, .06);
}

.pinItemAmenities {
    margin-top: 5px;
    letter-spacing: 2px;
}

.pinItemWarning {
    display: block;
    color: #fbbf24;
    margin-top: 4px;
}

/* Leaflet popup override: remove default white wrapper/border around custom pin cards */
.park-popup .leaflet-popup-content-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.park-popup .leaflet-popup-content {
    margin: 0 !important;
    width: auto !important;
}

.park-popup .leaflet-popup-tip-container {
    margin-top: -1px;
}

.park-popup .leaflet-popup-tip {
    background: #151827 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.park-popup a.leaflet-popup-close-button {
    color: rgba(255, 255, 255, .72) !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    font-size: 20px !important;
    text-shadow: none !important;
    background: transparent !important;
}

.pinIcon {
    display: inline-flex;
    width: 1.2em;
    min-width: 1.2em;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.pinListIcon {
    margin-right: 7px;
}

.popupInfo,
.popupWarning,
.popupAmenities span,
.pinItem b,
.pinItemWarning,
.amenityGrid label {
    display: flex;
    align-items: center;
}

/* Icon based map markers: no plain colored dots */
.coach-pin-marker,
.coach-pin-marker * {
    background: transparent !important;
    border: 0 !important;
}

.coach-pin {
    width: 38px;
    height: 38px;
    border-radius: 15px 15px 15px 4px;
    background: var(--pin-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38), inset 0 0 0 2px rgba(255, 255, 255, .22);
}

.coach-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 17px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.coach-pin-marker.warning .coach-pin {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38), 0 0 0 4px rgba(220, 38, 38, .28), inset 0 0 0 2px rgba(255, 255, 255, .25);
}

/* Two-part filter menu: pin type + facilities */
#typeToggle {
    position: relative;
    gap: 0;
}

#typeFilterIcon {
    font-size: 18px;
}

#typeFilterCount {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.type-dropdown {
    --menu-width: 310px;
}

.type-menu {
    width: var(--menu-width) !important;
    max-height: min(72vh, 620px);
    overflow-y: auto !important;
    padding: 10px !important;
    background: #151827 !important;
    border: 1px solid rgba(96, 165, 250, .35) !important;
    border-radius: 14px !important;
}

.filter-section-title {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 8px 6px;
}

.filter-row {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e5e7eb;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
}

.filter-row i {
    width: 20px;
    min-width: 20px;
    text-align: center;
}

.filter-row:hover {
    background: rgba(37, 99, 235, .22);
}

.filter-row.active {
    background: rgba(37, 99, 235, .38);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35);
}

@media (max-width: 480px) {
    .type-dropdown .type-menu {
        left: auto !important;
        right: 0 !important;
        width: min(92vw, 310px) !important;
        max-width: 92vw !important;
    }
}


/* Final fixes: height restriction signs + filter menu viewport safety */
.height-warning-marker,
.height-warning-marker * {
    background: transparent !important;
    border: 0 !important;
}

.height-sign {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 7px solid #d00000 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #050505 !important;
    font-weight: 950 !important;
    font-size: 13px !important;
    letter-spacing: -0.8px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-align: center !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .42) !important;
}

.height-sign span {
    display: block !important;
    max-width: 48px !important;
    white-space: nowrap !important;
    transform: translateY(1px) !important;
}

.type-dropdown.open .type-menu {
    position: fixed !important;
    top: 76px !important;
    right: 12px !important;
    left: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 96px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 999999 !important;
}

@media (max-width: 700px) {
    .type-dropdown.open .type-menu {
        top: 68px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 84px) !important;
    }
}

/* Keep Leaflet popups above all custom pin/sign markers */
.leaflet-popup-pane {
    z-index: 3000 !important;
}

.leaflet-tooltip-pane {
    z-index: 3100 !important;
}

/* Final restriction marker system: same pin style as other markers */
.height-warning-marker,
.height-sign {
    display: none !important;
}

.coach-pin-marker.restriction-marker .coach-pin {
    width: 38px !important;
    height: 38px !important;
    border-radius: 15px 15px 15px 4px !important;
    color: #fff !important;
    font-size: 17px !important;
}

.coach-pin-marker.height-restriction .coach-pin {
    background: #dc2626 !important;
}

.coach-pin-marker.other-restriction .coach-pin {
    background: #f97316 !important;
}

.coach-pin-marker.restriction-marker .coach-pin i {
    color: #fff !important;
}

.height-arrows {
    transform: rotate(45deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #fff;
    line-height: .75;
    font-weight: 950;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.height-arrows i {
    font-size: 10px !important;
    line-height: .65 !important;
    color: #fff !important;
    transform: none !important;
}

.height-arrows b {
    display: block;
    font-size: 11px;
    letter-spacing: -0.8px;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
}

/* Restriction popup spacing + compact value markers */
.pinPopup {
    padding: 12px 34px 12px 12px !important;
}

.park-popup a.leaflet-popup-close-button {
    right: 10px !important;
    top: 10px !important;
    z-index: 5 !important;
}

.restriction-value {
    transform: rotate(45deg);
    color: #fff;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    display: flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
}

.restriction-value b {
    font-size: 15px;
    color: #fff;
    letter-spacing: -0.8px;
}

.restriction-value em {
    color: #fff;
    font-style: normal;
    font-size: 9px;
    margin-left: 1px;
    text-transform: uppercase;
}

.emission-value {
    font-size: 11px;
    letter-spacing: -0.6px;
}

/* 2026-05 UI polish: consistent dark modal-style controls and panels */
:root {
    --park-bg: #151827;
    --park-card: #1b2033;
    --park-card-2: #202438;
    --park-border: rgba(148, 163, 184, .18);
    --park-blue: #2563eb;
    --park-blue-hover: #1d4ed8;
    --park-red: #dc2626;
    --park-red-hover: #b91c1c;
    --park-text: #f8fafc;
    --park-muted: #94a3b8;
}

.button-main,
.btn,
button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
.iconBtn,
.fabBtn,
.popupActions a,
.popupActions button,
.panelTabs button.active,
.btn-save {
    background: var(--park-blue) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .24) !important;
}

.button-main:hover,
.btn:hover,
button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
.iconBtn:hover,
.fabBtn:hover,
.popupActions a:hover,
.popupActions button:hover,
.btn-save:hover {
    background: var(--park-blue-hover) !important;
    transform: translateY(-1px);
}

.btn-red,
.btn-cancel,
.popupActions .danger,
.popupActions button.danger,
button.danger {
    background: var(--park-red) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .22) !important;
}

.btn-red:hover,
.btn-cancel:hover,
.popupActions .danger:hover,
.popupActions button.danger:hover,
button.danger:hover {
    background: var(--park-red-hover) !important;
}

.country-menu,
.type-menu,
.sidePanel {
    background: rgba(21, 24, 39, .96) !important;
    border: 1px solid var(--park-border) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
    backdrop-filter: blur(14px);
}

.sidePanel {
    border-left: 0 !important;
    border-top-left-radius: 18px !important;
    padding: 10px !important;
}

.panelTabs {
    background: var(--park-card) !important;
    border-radius: 14px !important;
    padding: 5px !important;
    gap: 5px;
    margin-bottom: 10px;
}

.panelTabs button {
    background: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--park-muted) !important;
}

.panelTabs button.active {
    color: #fff !important;
}

.pinItem {
    background: linear-gradient(180deg, rgba(32, 36, 56, .98), rgba(24, 28, 45, .98)) !important;
    border: 1px solid var(--park-border) !important;
    border-radius: 14px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

.pinItem:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, .22), rgba(24, 28, 45, .98)) !important;
    border-color: rgba(96, 165, 250, .38) !important;
    transform: translateY(-1px);
}

.pinItemTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.pinItemTop span {
    color: var(--park-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.pinItem b {
    line-height: 1.25;
}

.pinItem small {
    display: block;
    margin-top: 3px;
}

.country-item,
.filter-row {
    border-radius: 10px !important;
    margin: 2px 4px !important;
}

.country-item:hover,
.filter-row:hover,
.filter-row.active {
    background: rgba(37, 99, 235, .28) !important;
}

.google-location-marker {
    background: transparent !important;
    border: 0 !important;
}

.google-location-marker span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a73e8;
    border: 3px solid #fff;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(26, 115, 232, .25);
}

/* === FINAL POLISH: unified topbar, dropdowns above map, popups, avatars === */
:root {
    --park-bg: #151827;
    --park-card: #1b2033;
    --park-card-2: #202438;
    --park-border: rgba(148, 163, 184, .18);
    --park-blue: #2563eb;
    --park-blue-hover: #1d4ed8;
    --park-red: #dc2626;
    --park-text: #f8fafc;
    --park-muted: #94a3b8;
}

.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 16px !important;
    overflow: visible !important;
    background: rgba(21, 24, 39, .88) !important;
    border-bottom: 1px solid var(--park-border) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 900000 !important;
}

#siteTitle {
    height: 72px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
}

#siteTitle:hover {
    opacity: .94;
}

#siteLogo {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .32));
}

#siteTitle span {
    display: block !important;
    color: #fff !important;
    font-size: clamp(21px, 4vw, 28px) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    padding-bottom: 2px !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#homeBtn,
.home-btn {
    display: none !important;
}

.topbar-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.iconBtn,
.smallBtn,
.popupActions a,
.popupActions button,
.button-main,
.btn-save,
.panelTabs button.active,
#adminPinBtn,
#countryToggle,
#typeToggle {
    background: linear-gradient(180deg, var(--park-blue), var(--park-blue-hover)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.iconBtn:hover,
.smallBtn:hover,
.popupActions a:hover,
.popupActions button:hover,
.button-main:hover,
.btn-save:hover,
#adminPinBtn:hover,
#countryToggle:hover,
#typeToggle:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px);
}

#topAvatar,
.user-avatar,
.profile-avatar,
.pin-user-avatar,
.sidebar-user-avatar,
.popupUser img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

#topAvatar {
    cursor: pointer !important;
    border: 2px solid rgba(96, 165, 250, .85) !important;
}

/* Keep map controls/dropdowns above the map, never below/behind it */
#map {
    top: 0 !important;
    z-index: 1 !important;
}

.country-dropdown,
.type-dropdown {
    position: static !important;
}

.country-menu,
.type-menu {
    position: fixed !important;
    top: 78px !important;
    right: 14px !important;
    max-height: min(72vh, 560px) !important;
    overflow: auto !important;
    z-index: 950000 !important;
    background: rgba(21, 24, 39, .98) !important;
    border: 1px solid var(--park-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .52) !important;
    backdrop-filter: blur(14px) !important;
}

.country-menu {
    width: min(260px, calc(100vw - 28px)) !important;
}

.type-menu {
    width: min(360px, calc(100vw - 28px)) !important;
    padding: 10px !important;
}

.type-dropdown.open .type-menu {
    display: block !important;
}

.country-item,
.filter-row {
    border-radius: 12px !important;
    background: transparent !important;
}

.country-item:hover,
.filter-row:hover,
.filter-row.active {
    background: rgba(37, 99, 235, .25) !important;
}

/* Pin popup has no X; click map/outside or press Escape to close */
.park-popup a.leaflet-popup-close-button,
.leaflet-popup-close-button {
    display: none !important;
}

.park-popup .leaflet-popup-content-wrapper,
.park-popup .leaflet-popup-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pinPopup {
    margin: 0 !important;
    padding: 14px !important;
    min-width: 260px !important;
    max-width: 330px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(26, 30, 48, .98), rgba(16, 20, 35, .98)) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .45) !important;
}

.pinPopup .popupTitle {
    padding-right: 0 !important;
    line-height: 1.25 !important;
}

/* Smaller, cleaner modal close buttons on users/issues pages */
.closeUserModal,
.closeModalBtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .78) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

.closeUserModal:hover,
.closeModalBtn:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    transform: none !important;
}

/* Google Maps style current location marker */
.google-location-marker {
    background: transparent !important;
    border: 0 !important;
}

.google-location-marker span {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #1a73e8 !important;
    border: 3px solid #fff !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 7px rgba(26, 115, 232, .20) !important;
}

@media (max-width: 560px) {
    .topbar {
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        padding: 0 10px !important;
    }

    #siteTitle {
        height: 66px !important;
        gap: 9px !important;
    }

    #siteLogo {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    #siteTitle span {
        font-size: 20px !important;
    }

    .topbar-buttons {
        gap: 7px !important;
    }

    .iconBtn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

    .country-menu,
    .type-menu {
        top: 72px !important;
        right: 8px !important;
    }
}

/* final icon alignment override */
.iconBtn i,
.smallBtn i,
#adminPinBtn i,
#typeToggle i,
#countryToggle i {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: inherit;
    font-size: inherit;
    pointer-events: none;
}

/* === FINAL FIX 2026-05-21: add/edit modal polish, filter reset, modal closing === */
#addModal,
#editModal,
#issueModal,
.user-modal {
    background: rgba(0, 0, 0, .62) !important;
    backdrop-filter: blur(8px) !important;
}

#addModal .modal-content,
#editModal .modal-content,
#issueModal .modal-content,
.user-modal-content {
    background: linear-gradient(180deg, rgba(26, 30, 48, .98), rgba(16, 20, 35, .98)) !important;
    color: var(--park-text, #f8fafc) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    max-height: calc(100vh - 110px) !important;
    overflow: auto !important;
}

#addModal .modal-content input,
#addModal .modal-content textarea,
#addModal .modal-content select,
#editModal .modal-content input,
#editModal .modal-content textarea,
#editModal .modal-content select,
#issueModal .modal-content input,
#issueModal .modal-content textarea,
#issueModal .modal-content select,
.user-modal-content input,
.user-modal-content textarea,
.user-modal-content select {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

#addModal .modal-content input:focus,
#addModal .modal-content textarea:focus,
#addModal .modal-content select:focus,
#editModal .modal-content input:focus,
#editModal .modal-content textarea:focus,
#editModal .modal-content select:focus,
.user-modal-content input:focus,
.user-modal-content textarea:focus,
.user-modal-content select:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, .55) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
}

/* Stop generic button styles from turning every filter option bright blue. */
.country-menu .country-item,
.type-menu .filter-row,
.filter-menu .filter-row,
.filter-row,
.filter-chip,
.filter-option,
.filter-tag {
    background: rgba(255, 255, 255, .045) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    box-shadow: none !important;
}

.country-menu .country-item:hover,
.type-menu .filter-row:hover,
.filter-menu .filter-row:hover,
.filter-chip:hover,
.filter-option:hover,
.filter-tag:hover {
    background: rgba(255, 255, 255, .085) !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
}

.type-menu .filter-row.active,
.filter-menu .filter-row.active,
.filter-row.active,
.filter-chip.active,
.filter-option.active,
.filter-tag.active {
    background: rgba(96, 165, 250, .16) !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, .36) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .12) !important;
}

.filter-row i,
.country-item i {
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep the actual topbar/menu trigger buttons blue, but not menu rows. */
#typeToggle,
#countryToggle,
#adminPinBtn,
.button-main,
.btn-save,
.popupActions a,
.popupActions button {
    background: linear-gradient(180deg, var(--park-blue, #2563eb), var(--park-blue-hover, #1d4ed8)) !important;
    color: #fff !important;
}

.btn-cancel {
    background: rgba(255, 255, 255, .09) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
}

.closeUserModal,
.closeModalBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .055) !important;
    color: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.closeUserModal:hover,
.closeModalBtn:hover {
    background: rgba(255, 255, 255, .11) !important;
    color: #fff !important;
}

#topAvatar,
.user-avatar,
.profile-avatar,
.pin-user-avatar,
.sidebar-user-avatar,
.popupUser img,
#userAvatarPreview,
.user-modal-content img {
    border-radius: 999px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}


/* === FINAL COMPLETE CLEANUP: menu layers, real buttons vs filter pills, modal cards === */
html,
body {
    background: radial-gradient(circle at top, #26304f 0, #151827 45%, #0f1220 100%) !important;
}

#app {
    background: transparent !important;
}

.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: rgba(21, 24, 39, .88) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 1000000 !important;
}

.topbar::before,
.topbar::after {
    pointer-events: none !important;
}

#siteTitle {
    height: 72px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    overflow: hidden !important;
}

#siteTitle:hover {
    opacity: .94 !important;
}

#siteLogo {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    border-radius: 14px !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .32)) !important;
}

#siteTitle span {
    display: block !important;
    color: #fff !important;
    font-size: clamp(21px, 4vw, 28px) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    padding: 0 0 3px 0 !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#homeBtn,
.home-btn {
    display: none !important;
}

#topAvatar,
.user-avatar,
.profile-avatar,
.pin-user-avatar,
.sidebar-user-avatar,
.popupUser img,
#profileAvatar,
#userAvatarPreview {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

.leaflet-container,
.leaflet-map-pane,
.leaflet-pane,
.leaflet-control-container,
#map {
    z-index: 1 !important;
}

.leaflet-popup-pane {
    z-index: 900000 !important;
}

.topbar-buttons,
.country-dropdown,
.type-dropdown {
    position: relative !important;
    z-index: 1000002 !important;
    overflow: visible !important;
}

.country-menu,
.type-menu,
#countryMenu,
#typeMenu {
    position: fixed !important;
    top: 82px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
    z-index: 1000003 !important;
    background: linear-gradient(180deg, rgba(26, 30, 48, .99), rgba(16, 20, 35, .99)) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58) !important;
    backdrop-filter: blur(14px) !important;
}

.country-menu,
#countryMenu {
    width: min(280px, calc(100vw - 28px)) !important;
}

.type-menu,
#typeMenu {
    width: min(380px, calc(100vw - 28px)) !important;
    padding: 10px !important;
}

.type-dropdown.open .type-menu {
    display: block !important;
}

.country-item,
.filter-pill,
.permission-filter-pill,
.country-filter-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 13px !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    background: rgba(30, 41, 59, .86) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .14) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    transition: .14s ease !important;
}

.country-item:hover,
.filter-pill:hover,
.permission-filter-pill:hover,
.country-filter-pill:hover {
    background: rgba(51, 65, 85, .92) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}

.country-item.active,
.filter-pill.active,
.permission-filter-pill.active,
.country-filter-pill.active {
    background: linear-gradient(180deg, #1e3a8a 0%, #172554 100%) !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, .32) !important;
}

.filter-pill.clear,
.permission-filter-pill.clear,
.country-filter-pill.clear {
    background: rgba(69, 26, 26, .86) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, .28) !important;
}

/* Real site buttons stay blue; filter pills are separate divs and never inherit this. */
.iconBtn,
.smallBtn,
.button-main,
.btn-save,
.popupActions a,
.popupActions button,
#adminPinBtn,
#countryToggle,
#typeToggle,
.modal-actions button.primary,
.modal-buttons button.primary {
    background: linear-gradient(180deg, var(--park-blue, #2563eb), var(--park-blue-hover, #1d4ed8)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .25), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

select,
option,
optgroup,
input,
textarea {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
}

#addModal,
#editModal,
#issueModal,
.user-modal,
#issueDetailModal,
#resolveIssueModal {
    background: rgba(0, 0, 0, .62) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 1000004 !important;
}

#addModal .modal-content,
#editModal .modal-content,
#issueModal .modal-content,
.user-modal-content,
.issue-detail-content,
.resolve-content {
    background: linear-gradient(180deg, rgba(26, 30, 48, .98), rgba(16, 20, 35, .98)) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

#userPinsList {
    max-height: 360px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    margin-top: 10px !important;
}

.user-pin-card,
.issue-pin-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.user-pin-card:hover,
.issue-pin-card:hover {
    background: rgba(255, 255, 255, .09) !important;
    transform: translateY(-1px) !important;
}

.user-pin-icon,
.issue-pin-icon {
    width: 38px !important;
    height: 46px !important;
    min-width: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: var(--pin-color, #2563eb) !important;
    border-radius: 18px 18px 18px 4px !important;
    transform: rotate(-45deg) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.user-pin-icon i,
.issue-pin-icon i {
    transform: rotate(45deg) !important;
    font-size: 16px !important;
}

.issue-pin-icon {
    width: 32px !important;
    height: 40px !important;
    min-width: 32px !important;
    border-radius: 15px 15px 15px 4px !important;
}

.issue-pin-icon i {
    font-size: 14px !important;
}

.user-pin-info,
.issue-pin-body {
    min-width: 0 !important;
    flex: 1 !important;
}

.user-pin-info b,
.issue-pin-body strong {
    display: block !important;
    color: #fff !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.user-pin-info small,
.issueMeta {
    color: #94a3b8 !important;
}

.user-pin-arrow {
    color: #60a5fa !important;
    opacity: .8 !important;
}

.closeUserModal,
.closeModalBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .055) !important;
    color: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

@media (max-width: 560px) {
    .topbar {
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        padding: 0 10px !important;
    }

    #siteTitle {
        height: 66px !important;
        gap: 9px !important;
    }

    #siteLogo {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    #siteTitle span {
        font-size: 20px !important;
    }

    .country-menu,
    .type-menu,
    #countryMenu,
    #typeMenu {
        top: 74px !important;
        right: 8px !important;
    }
}

/* FINAL DELIVERABLE PATCH: country filters, edit-user avatar, permission grid */
.country-menu,
#countryMenu,
.type-menu,
#typeMenu {
    position: fixed !important;
    top: 82px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    max-height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
}

.leaflet-container,
.leaflet-map-pane,
.leaflet-pane,
.leaflet-control-container,
#map {
    z-index: 1 !important;
}

.country-menu .country-item,
#countryMenu .country-item,
.country-filter-pill,
.filter-pill,
.permission-filter-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 13px !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    background: rgba(30, 41, 59, .86) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .14) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    transition: .14s ease !important;
}

.country-menu .country-item:hover,
#countryMenu .country-item:hover,
.country-filter-pill:hover,
.filter-pill:hover,
.permission-filter-pill:hover {
    background: rgba(51, 65, 85, .92) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}

.country-menu .country-item.active,
#countryMenu .country-item.active,
.country-filter-pill.active,
.filter-pill.active,
.permission-filter-pill.active {
    background: linear-gradient(180deg, #1e3a8a 0%, #172554 100%) !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, .32) !important;
}

.edit-user-avatar,
#userAvatarPreview.edit-user-avatar {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
    border: 3px solid rgba(96, 165, 250, .55) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#userAvatarWrapper {
    gap: 14px !important;
    align-items: center !important;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.avatar-actions button {
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
}

.permission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 10px !important;
    margin: 12px 0 18px !important;
}

.perm-line {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    color: #e5e7eb !important;
}

.perm-line input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #1e3a8a !important;
}

/* =========================================================
   FINAL HARD FIXES 2026-05-21
   - filter items are pills/divs, not site buttons
   - country/type menus float above Leaflet
   - edit-user avatars/user pins/profile popup sizing
   ========================================================= */

#map,
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane,
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom {
    z-index: 1 !important;
}

#countryMenu,
#typeMenu,
.country-menu,
.type-menu {
    position: fixed !important;
    top: 82px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2147483000 !important;
    max-width: min(420px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg, rgba(10, 15, 35, .98), rgba(15, 23, 42, .98)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45) !important;
    padding: 10px !important;
}

.country-filter-pill,
.filter-pill,
.permission-filter-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 13px !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    background: rgba(30, 41, 59, .86) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .14) !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    transition: .14s ease !important;
}

.country-filter-pill:hover,
.filter-pill:hover,
.permission-filter-pill:hover {
    background: rgba(51, 65, 85, .92) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}

.country-filter-pill.active,
.filter-pill.active,
.permission-filter-pill.active {
    background: linear-gradient(180deg, #1e3a8a 0%, #172554 100%) !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, .32) !important;
}

.country-filter-pill img {
    width: 24px !important;
    height: 18px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

#userAvatarPreview.edit-user-avatar,
.edit-user-avatar {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
    border: 3px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#userAvatarWrapper {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#userPinsList {
    max-height: 360px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

.user-pin-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    margin: 8px 0 !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, .72) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    cursor: pointer !important;
    transition: .14s ease !important;
}

.user-pin-card:hover {
    transform: translateY(-1px) !important;
    background: rgba(30, 41, 59, .92) !important;
}

.user-pin-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: var(--pin-color, #2563eb) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
}

.user-pin-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.user-pin-info b,
.user-pin-info small {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.user-pin-info small {
    opacity: .72 !important;
    margin-top: 3px !important;
}

.user-pin-arrow {
    opacity: .55 !important;
    flex-shrink: 0 !important;
}

.popupUser {
    gap: 7px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    opacity: .78 !important;
}

.popupUser img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
}

.issue-pin-icon,
.reported-issue-icon,
.issueEntry .pinIcon,
.issue-card .pinIcon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
}

.locked-field {
    opacity: .72 !important;
    cursor: not-allowed !important;
}

@media (max-width: 720px) {

    #countryMenu,
    #typeMenu,
    .country-menu,
    .type-menu {
        top: 76px !important;
        right: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 92px) !important;
    }

    #userAvatarPreview.edit-user-avatar,
    .edit-user-avatar {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
    }
}


/* FINAL: edit-pin delete button and smaller popup submitter avatar */
.btn-delete-pin,
#editDeletePinBtn {
    border: 1px solid rgba(248, 113, 113, .32) !important;
    background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important;
    color: #fecaca !important;
    border-radius: 14px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.btn-delete-pin:hover,
#editDeletePinBtn:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.pinPopup .popupUser,
.leaflet-popup-content .popupUser {
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    opacity: .82 !important;
}

.pinPopup .popupUser img,
.leaflet-popup-content .popupUser img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
}

#editPinDeleteBtn.delete-btn {
    background: #b91c1c !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

#editPinDeleteBtn.delete-btn:hover {
    background: #991b1b !important;
}

#editPinDeleteBtn.delete-btn i,
#editPinDeleteBtn.delete-btn svg {
    display: none !important;
}

/* =========================================================
   CRUISE RECOVERY PATCH 2026-06-18
   Preserves the full uploaded stylesheet and fixes the broken pieces only.
   ========================================================= */
.topbar #siteTitle #siteLogo,
#siteTitle > #siteLogo {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)) !important;
}
.topbar #siteTitle { overflow: visible !important; }
#typeFilterIcon {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
.type-menu .filter-row .pinIcon,
#typeMenu .filter-row .pinIcon,
.popupAmenities .pinIcon,
.amenityGrid .pinIcon,
.pinItem .pinIcon,
.pinPopup .pinIcon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}
.country-filter-pill,
.country-menu .country-item,
#countryMenu .country-filter-pill,
.type-menu .filter-row,
#typeMenu .filter-row,
select,
option {
    cursor: pointer !important;
}
#countryMenu,
.country-menu,
#typeMenu,
.type-menu {
    position: fixed !important;
    top: 82px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 98px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 2147483000 !important;
}
#countryMenu,
.country-menu { width: min(280px, calc(100vw - 24px)) !important; }
#typeMenu,
.type-menu { width: min(360px, calc(100vw - 24px)) !important; }
@media (max-width: 700px) {
    #countryMenu,
    .country-menu,
    #typeMenu,
    .type-menu {
        top: 74px !important;
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 88px) !important;
    }
    #countryMenu,
    .country-menu { width: min(280px, calc(100vw - 16px)) !important; }
    #typeMenu,
    .type-menu { width: min(340px, calc(100vw - 16px)) !important; }
}
.height-warning-marker {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    background: transparent !important;
    border: 0 !important;
}
.height-warning-marker,
.height-warning-marker * { box-sizing: border-box !important; }
.height-warning-marker .height-sign,
.height-sign {
    display: flex !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 7px solid #d00000 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #050505 !important;
    font-weight: 950 !important;
    font-size: 13px !important;
    letter-spacing: -0.8px !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .42) !important;
    overflow: hidden !important;
}
.height-warning-marker .height-sign span,
.height-sign span {
    display: block !important;
    color: #050505 !important;
    background: transparent !important;
    border: 0 !important;
    max-width: 48px !important;
    white-space: nowrap !important;
    transform: translateY(1px) !important;
}
.coach-pin-marker:not(.height-warning-marker) .coach-pin i { color: #fff !important; }
.leaflet-popup-pane { z-index: 900000 !important; }
.leaflet-tooltip-pane { z-index: 910000 !important; }

/* =========================================================
   CRUISE PATCH 2026-06-18
   Filter panel uses the same side-panel animation as Pin List.
   Restores delete button inside Edit Pin modal.
   Fixes issue report textarea ID styling remains unchanged.
   ========================================================= */

/* Filter now lives in a sidePanel, not as a floating dropdown */
#filterPanel.sidePanel {
    top: 70px !important;
    right: -360px !important;
    width: 340px !important;
    height: calc(100vh - 70px) !important;
    transition: right .30s ease !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
}

#filterPanel.sidePanel.open {
    right: 0 !important;
}

#filterPanel #typeMenu,
#filterPanel .type-menu {
    position: static !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 20px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
}

#filterPanel .panelTabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

#filterPanel #clearFiltersBtn {
    color: #fecaca !important;
}

#filterPanel #clearFiltersBtn:hover {
    background: rgba(220, 38, 38, .18) !important;
    color: #fff !important;
}

/* The topbar filter button should not show or reserve the old dropdown */
#typeDropdown > #typeMenu {
    display: none !important;
}

/* Restore and protect the Edit Pin delete button */
#editModal #editPinDeleteBtn,
#editModal #editPinDeleteBtn.btn-red,
#editModal #editPinDeleteBtn.delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #b91c1c !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    min-height: 42px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#editModal #editPinDeleteBtn:hover {
    background: #991b1b !important;
}

/* Keep three edit buttons fitting on smaller screens */
#editModal .modal-buttons {
    display: flex !important;
    gap: 10px !important;
}

#editModal .modal-buttons button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

@media (max-width: 700px) {
    #filterPanel.sidePanel,
    #filterPanel.sidePanel.open {
        top: 66px !important;
        height: calc(100dvh - 66px) !important;
        width: min(340px, calc(100vw - 16px)) !important;
    }

    #filterPanel.sidePanel {
        right: calc(-1 * min(340px, calc(100vw - 16px)) - 12px) !important;
    }

    #filterPanel.sidePanel.open {
        right: 8px !important;
    }
}


/* =========================================================
   CRUISE PATCH 2026-06-18
   Country filter now uses the same side-panel animation as Pin List and Filters.
   ========================================================= */
#countryPanel.sidePanel {
    top: 70px !important;
    right: -360px !important;
    width: 340px !important;
    height: calc(100vh - 70px) !important;
    transition: right .30s ease !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
}

#countryPanel.sidePanel.open {
    right: 0 !important;
}

#countryPanel #countryMenu,
#countryPanel .country-menu {
    position: static !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 20px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
}

#countryPanel .panelTabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

#countryPanel #clearCountryBtn {
    color: #bfdbfe !important;
}

#countryPanel #clearCountryBtn:hover {
    background: rgba(37, 99, 235, .22) !important;
    color: #fff !important;
}

/* Old topbar country dropdown should not be positioned as a floating menu anymore. */
#countryDropdown > #countryMenu {
    display: none !important;
}

@media (max-width: 700px) {
    #countryPanel.sidePanel,
    #countryPanel.sidePanel.open {
        top: 66px !important;
        height: calc(100dvh - 66px) !important;
        width: min(340px, calc(100vw - 16px)) !important;
    }

    #countryPanel.sidePanel {
        right: calc(-1 * min(340px, calc(100vw - 16px)) - 12px) !important;
    }

    #countryPanel.sidePanel.open {
        right: 8px !important;
    }
}


/* =========================================================
   CRUISE PATCH 2026-06-18B
   Side-panel filters/countries: no fake tab buttons, reliable mobile opening.
   ========================================================= */
#filterPanel .panelTabs,
#countryPanel .panelTabs {
    display: none !important;
}

.panelHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    margin: 0 0 10px 0 !important;
    border-radius: 14px !important;
    background: var(--park-card, #1b2033) !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.22) !important;
}

.panelHeader span {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* Use the same slide-in panel behavior for all right-side panels. */
#pinPanel.sidePanel,
#filterPanel.sidePanel,
#countryPanel.sidePanel {
    top: 70px !important;
    right: 0 !important;
    width: 340px !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 70px) !important;
    transform: translateX(calc(100% + 18px)) !important;
    transition: transform .30s ease !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 999999 !important;
    display: block !important;
}

#pinPanel.sidePanel.open,
#filterPanel.sidePanel.open,
#countryPanel.sidePanel.open {
    transform: translateX(0) !important;
}

/* Ensure menu contents live inside panels, not old floating dropdowns. */
#filterPanel #typeMenu,
#filterPanel .type-menu,
#countryPanel #countryMenu,
#countryPanel .country-menu {
    position: static !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
}

/* Remove/neutralize the old dropdown behavior completely. */
#typeDropdown.open #typeMenu,
#countryDropdown.open #countryMenu,
#typeDropdown > #typeMenu,
#countryDropdown > #countryMenu {
    display: none !important;
}

#typeToggle,
#countryToggle,
#adminPinBtn {
    touch-action: manipulation !important;
    cursor: pointer !important;
}

@media (max-width: 700px) {
    #pinPanel.sidePanel,
    #filterPanel.sidePanel,
    #countryPanel.sidePanel {
        top: 66px !important;
        right: 8px !important;
        width: min(340px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 66px) !important;
        transform: translateX(calc(100% + 16px)) !important;
        border-radius: 18px 0 0 18px !important;
    }

    #pinPanel.sidePanel.open,
    #filterPanel.sidePanel.open,
    #countryPanel.sidePanel.open {
        transform: translateX(0) !important;
    }
}


/* =========================================================
   HOMEPAGE MAP / EXPLORER RENAME PATCH
   ========================================================= */
#explorerBtn i { font-size: 18px !important; }
.topbar-avatar,
#topAvatar.topbar-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    border: 2px solid rgba(96, 165, 250, .85) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.3) !important;
}
.topbar-buttons { overflow: visible !important; }
@media (max-width: 560px) {
    .topbar-avatar,
    #topAvatar.topbar-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}


/* =========================================================
   FINAL TOPBAR ORDER PATCH: avatar always furthest right
   ========================================================= */
.topbar-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

#countryDropdown { order: 10 !important; }
#typeDropdown { order: 20 !important; }
#explorerBtn { order: 30 !important; }
#adminPinBtn { order: 40 !important; }
#topAvatar.topbar-avatar {
    order: 999 !important;
    margin-left: 2px !important;
    flex: 0 0 auto !important;
}


/* =========================================================
   FINAL PATCH: Country filters merged into the Filters panel
   ========================================================= */
#countryDropdown,
#countryToggle,
#countryPanel {
    display: none !important;
}

#filterPanel #countryMenu,
#filterPanel .country-menu {
    position: static !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 0 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: auto !important;
}

#filterPanel .country-filter-title {
    margin-top: 8px !important;
}

#filterPanel .country-filter-pill {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 3px 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    text-align: left !important;
}

#filterPanel .country-filter-pill:hover {
    background: rgba(255, 255, 255, .085) !important;
    color: #fff !important;
}

#filterPanel .country-filter-pill.active {
    background: rgba(96, 165, 250, .16) !important;
    color: #fff !important;
    border-color: rgba(96, 165, 250, .36) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .12) !important;
}

#filterPanel .country-filter-pill img,
#filterPanel .country-filter-pill .flagIcon {
    width: 24px !important;
    height: 16px !important;
    min-width: 24px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
}

#filterPanel.sidePanel {
    overflow-y: auto !important;
}


/* =========================================================
   CRUISE SITE PATCH
   ========================================================= */
.age-check-row {
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin: 8px 0 14px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
}
.age-check-row input { width:18px !important; height:18px !important; margin:2px 0 0 !important; flex:0 0 auto !important; }
.age-check-row label { margin:0 !important; line-height:1.35 !important; font-size:13px !important; }
.legal-note { font-size:12px; opacity:.72; line-height:1.35; margin: 0 0 12px; }


/* =========================================================
   CRUISE PERMISSIONS UPDATE
   - Better permission spacing
   - Cleaner user pin list without double bottom lines
   ========================================================= */
.permission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) !important;
    gap: 12px !important;
    margin: 12px 0 18px !important;
}

.perm-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
    margin: 0 !important;
    min-height: 78px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .055) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
}

.perm-line input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 2px 0 0 0 !important;
    accent-color: #2563eb !important;
}

.perm-line span {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    line-height: 1.25 !important;
}

.perm-line strong {
    color: #fff !important;
    font-size: 14px !important;
}

.perm-line small {
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.admin-perm {
    border-color: rgba(96, 165, 250, .36) !important;
    background: rgba(37, 99, 235, .14) !important;
}

#savePermBtn {
    margin-top: 4px !important;
}

#userPinsList {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
}

#userPinsList .pinLink,
#userPinsList .user-pin-card {
    border-bottom: 0 !important;
    margin: 0 !important;
}

.user-pin-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, .72) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    cursor: pointer !important;
    transition: .14s ease !important;
}

.user-pin-card:hover {
    transform: translateY(-1px) !important;
    background: rgba(30, 41, 59, .92) !important;
}

.user-pin-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.user-pin-info b,
.user-pin-info small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.user-pin-info small {
    opacity: .72 !important;
    margin-top: 4px !important;
}

.user-pin-arrow {
    opacity: .55 !important;
    flex-shrink: 0 !important;
    color: #60a5fa !important;
    font-size: 24px !important;
}

/* Audit log page styles are mostly embedded in audit.html. */


/* Cruise comments + pin info modal */
.pin-info-content { max-width: 760px !important; width: min(94vw, 760px) !important; }
.pin-info-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.pin-info-header h2 { margin:0!important; text-align:left!important; }
.pin-info-close { width:36px!important; height:36px!important; min-width:36px!important; border-radius:999px!important; padding:0!important; background:rgba(255,255,255,.08)!important; box-shadow:none!important; font-size:22px!important; }
.pin-info-card,.pin-comments-section,.pin-comment { background:rgba(255,255,255,.055); border:1px solid rgba(148,163,184,.14); border-radius:16px; padding:14px; }
.pin-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:12px; }
.pin-info-grid div { background:rgba(15,23,42,.55); border-radius:12px; padding:10px; }
.pin-info-grid strong,.pin-info-grid span { display:block; }
.pin-info-grid strong { color:#93c5fd; font-size:12px; margin-bottom:5px; }
.pin-comments-section { margin-top:14px; }
.pin-comments-section h3 { text-align:left!important; margin-bottom:12px!important; }
.pin-comments-list { display:grid; gap:10px; }
.pin-comment { display:flex; gap:12px; }
.pin-comment > img { width:42px!important; height:42px!important; min-width:42px!important; border-radius:999px; object-fit:cover; border:2px solid rgba(96,165,250,.45); }
.pin-comment-body { flex:1; min-width:0; }
.pin-comment-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.pin-comment-top span { color:#94a3b8; font-size:12px; white-space:nowrap; }
.pin-comment-text { margin-top:8px; line-height:1.4; word-break:break-word; }
.pin-comment-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pin-comment-actions button { padding:7px 10px!important; border-radius:10px!important; font-size:12px!important; }
.comment-compose { margin-top:14px; }
.comment-compose textarea { min-height:90px; }
.empty-comments { color:#94a3b8; padding:12px; text-align:center; }
.perm-line.default-perm { border-color:rgba(96,165,250,.38)!important; background:rgba(37,99,235,.14)!important; }
.perm-line.default-perm strong::after { content:" default"; color:#93c5fd; font-size:11px; font-weight:800; text-transform:uppercase; margin-left:6px; }


/* === Popup action button layout fix === */
.pinPopup .popupActions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 9px !important;
    width: 100% !important;
}

.pinPopup .popupActionsTop {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

.pinPopup .popupActionsFull {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

.pinPopup .popupActions a,
.pinPopup .popupActions button {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.15 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.pinPopup .popupActionsFull button,
.pinPopup .popupActionsFull a {
    min-height: 38px !important;
    height: 38px !important;
}

.pinPopup .popupActions + .popupActions {
    margin-top: 8px !important;
}






/* === REPORT CARD VISUAL FIX === */
.report-card,
.issueItem.report-card,
.comment-report-card,
.spot-report-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(32,36,56,.98), rgba(24,28,45,.98)) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
}

.report-card:hover,
.issueItem.report-card:hover {
    background: linear-gradient(180deg, rgba(37,99,235,.22), rgba(24,28,45,.98)) !important;
    border-color: rgba(96,165,250,.38) !important;
    transform: translateY(-1px);
}

.issue-pin-icon.report-icon,
.report-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--pin-color, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.20) !important;
}

.issue-pin-icon.report-icon i,
.report-icon i {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.report-card-body {
    min-width: 0 !important;
    flex: 1 !important;
}

.report-preview {
    font-size: 13px !important;
    margin-top: 5px !important;
    opacity: .9 !important;
    line-height: 1.35 !important;
}

.report-sub-preview {
    font-size: 12px !important;
    margin-top: 4px !important;
    opacity: .68 !important;
    line-height: 1.35 !important;
}

.comment-report-card .issueTitleLine,
.spot-report-card .issueTitleLine {
    align-items: center !important;
}

.comment-report-card .issueTitleLine strong,
.spot-report-card .issueTitleLine strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* === FULL SCREEN REPORTS PAGE FIX === */
body:has(.reportsGrid) {
    min-height: 100dvh !important;
    overflow: hidden !important;
}

body:has(.reportsGrid) #app {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    padding: 88px 18px 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body:has(.reportsGrid) #app > h1 {
    margin: 0 0 6px !important;
}

body:has(.reportsGrid) #app > p {
    margin: 0 0 14px !important;
}

.reportsGrid {
    width: 100% !important;
    height: calc(100dvh - 165px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.reportsColumn {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, rgba(32,36,56,.98), rgba(24,28,45,.98)) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    border-radius: 22px !important;
    padding: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
}

.reportsColumn h2 {
    text-align: left !important;
    margin: 0 0 14px !important;
    font-size: 20px !important;
    flex: 0 0 auto !important;
}

#issuesList,
#commentReportsList {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-right: 4px !important;
}

@media (max-width: 850px) {
    body:has(.reportsGrid) {
        overflow: auto !important;
    }

    body:has(.reportsGrid) #app {
        height: auto !important;
        min-height: 100dvh !important;
    }

    .reportsGrid {
        height: auto !important;
        grid-template-columns: 1fr !important;
    }

    .reportsColumn {
        min-height: 45dvh !important;
    }
}

/* === Cruise image/help/required-field update === */
.required-star { color:#ef4444; font-weight:900; margin-left:3px; }
.hidden-coordinate-fields { display:none !important; }
.image-upload-block { margin: 12px 0 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.16); border-radius: 14px; padding: 12px; }
.image-upload-block label { margin-top:0 !important; font-weight:800; }
.image-upload-block small { display:block; color: var(--park-muted,#94a3b8); font-size: 12px; line-height:1.35; margin-top: 6px; }
.image-upload-block input[type="file"] { margin-bottom: 0 !important; }
.spot-image-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(94px,1fr)); gap:10px; margin:12px 0; }
.spot-image-card, .comment-image-wrap { position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(148,163,184,.18); background:#0f1220; }
.spot-image-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.comment-image-wrap { display:inline-block; max-width:min(260px,100%); margin-top:10px; }
.comment-image-wrap img { display:block; max-width:100%; max-height:260px; object-fit:cover; }
.image-remove-btn { position:absolute; top:6px; right:6px; width:30px !important; height:30px !important; min-width:30px !important; padding:0 !important; display:flex !important; align-items:center; justify-content:center; border-radius:999px !important; background:#dc2626 !important; color:#fff !important; font-size:20px !important; line-height:1 !important; box-shadow:0 8px 18px rgba(0,0,0,.35) !important; }
.spot-image-manager { margin: 8px 0 10px; }
.help-modal-content { max-width: 620px !important; }
.help-content h3 { text-align:left !important; margin:16px 0 8px !important; }
.help-content p { color:#dbeafe; line-height:1.5; margin:0 0 10px; }
.legend-list { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.legend-list span { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.055); border:1px solid rgba(148,163,184,.14); border-radius:12px; padding:10px; font-weight:700; }
.legend-list i { width:22px; text-align:center; }


/* Image fullscreen viewer */
.spot-image-card img,
.comment-image-wrap img {
    cursor: zoom-in;
}

.image-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(10px);
}

.image-viewer-modal img {
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
    cursor: zoom-out;
}

.image-viewer-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    line-height: 1 !important;
    background: rgba(15, 23, 42, .85) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}

body.image-viewer-open {
    overflow: hidden;
}


/* Help modal legend explainers */
.legend-explainer-list {
    display: grid;
    gap: 10px;
    margin: 10px 0 18px;
}

.legend-explainer-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    padding: 10px;
}

.legend-explainer-item i {
    width: 28px;
    min-width: 28px;
    text-align: center;
    font-size: 17px;
    margin-top: 2px;
}

.legend-explainer-item strong {
    display: block;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.25;
}

.legend-explainer-item span {
    display: block;
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.4;
}

.help-modal-content {
    max-width: 760px !important;
}


/* === UI consistency patch 2026-07-30b === */
/* Profile and user-management avatars must not inherit the 42px topbar rule. */
.modern-admin #profileAvatar {
    width: 184px !important;
    height: 184px !important;
    min-width: 184px !important;
    min-height: 184px !important;
    max-width: 184px !important;
    max-height: 184px !important;
}
.modern-admin #userAvatarPreview {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
    max-width: 132px !important;
    max-height: 132px !important;
}

/* All map information/report/confirmation dialogs use the same surface. */
#pinInfoModal,
#issueModal,
#commentReportModal,
#commentDeleteConfirmModal {
    background: rgba(0, 0, 0, .62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
#pinInfoModal .modal-content,
#issueModal .modal-content,
#commentReportModal .modal-content,
#commentDeleteConfirmModal .modal-content {
    background: linear-gradient(180deg, rgba(26, 30, 48, .99), rgba(16, 20, 35, .99)) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
#commentDeleteConfirmModal { z-index: 1000010 !important; }
.cruise-confirm-content { width: min(92vw, 460px) !important; max-width: 460px !important; overflow: hidden !important; }
.cruise-confirm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cruise-confirm-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(220, 63, 76, .15); color: #fda4af; font-size: 18px; }
.cruise-confirm-head h2 { margin: 0 !important; text-align: left !important; }
.cruise-confirm-content p { color: #b7c3d7; line-height: 1.55; }

@media (max-width: 640px) {
    .modern-admin #profileAvatar {
        width: 156px !important;
        height: 156px !important;
        min-width: 156px !important;
        min-height: 156px !important;
        max-width: 156px !important;
        max-height: 156px !important;
    }
}


/* === Map modal/panel polish 2026-07-30d === */
/* Help & Legend uses the same dark modal shell as pin information and reports. */
#helpModal.modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 84px 16px 24px !important;
  background: rgba(4, 7, 16, .76) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#helpModal .help-modal-content {
  width: min(94vw, 760px) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 112px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: linear-gradient(170deg, #232a44, #171c31) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  clip-path: inset(0 round 22px);
}
#helpModal .pin-info-header {
  flex: 0 0 auto;
  min-height: 66px;
  margin: 0 !important;
  padding: 14px 17px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(28, 34, 56, .96) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  border-radius: 22px 22px 0 0 !important;
}
#helpModal .pin-info-header h2 {
  margin: 0 !important;
  text-align: left !important;
  color: #f8fafc !important;
  font-size: 19px !important;
}
#helpModal .pin-info-close {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #e8eef8 !important;
  box-shadow: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
#helpModal .pin-info-close:hover {
  background: rgba(255, 255, 255, .10) !important;
}
#helpModal .help-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  padding: 17px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
  border-radius: 0 0 22px 22px !important;
}
#helpModal .help-content > h3 {
  min-height: 36px;
  margin: 17px 0 8px !important;
  padding: 0 11px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  color: #dce9f8;
  font-size: 12px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
#helpModal .help-content > h3:first-child { margin-top: 0 !important; }
#helpModal .help-content p {
  color: #b9c6d9 !important;
  line-height: 1.55;
}
#helpModal .legend-explainer-item,
#helpModal .legend-list span {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(148, 163, 184, .13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

/* Filters continue to use the same dark shell/card rhythm as the Pins panel. */
#filterPanel.sidePanel {
  background: rgba(21, 24, 39, .97) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 10px !important;
}
#filterPanel .panelHeader {
  min-height: 50px !important;
  margin: 0 0 10px !important;
  border: 1px solid rgba(148, 163, 184, .13) !important;
  border-radius: 14px !important;
  background: rgba(31, 36, 56, .96) !important;
  box-shadow: none !important;
}
#filterPanel .filter-section-title,
#filterPanel .country-filter-title {
  margin: 15px 4px 8px !important;
  padding: 0 4px !important;
  color: #91a0b7 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#filterPanel .filter-row,
#filterPanel .country-filter-pill {
  min-height: 48px !important;
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(32, 36, 56, .98), rgba(24, 28, 45, .98)) !important;
  color: #e8eef8 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
}
#filterPanel .filter-row:hover,
#filterPanel .country-filter-pill:hover {
  background: linear-gradient(180deg, rgba(37, 99, 235, .20), rgba(24, 28, 45, .98)) !important;
  border-color: rgba(96, 165, 250, .36) !important;
}
#filterPanel .filter-row.active,
#filterPanel .country-filter-pill.active {
  background: linear-gradient(180deg, rgba(37, 136, 230, .25), rgba(24, 28, 45, .98)) !important;
  border-color: rgba(96, 165, 250, .54) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #2588e6, 0 10px 24px rgba(0, 0, 0, .18) !important;
}

/* === Cruise map surface and brand consistency 2026-07-30e === */
#siteTitle .map-brand-copy {
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#siteTitle .map-brand-copy strong,
#siteTitle .map-brand-copy small {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
#siteTitle .map-brand-copy strong { color:#fff;font-size:16px;line-height:1.1;font-weight:800;letter-spacing:.1px; }
#siteTitle .map-brand-copy small { color:#a7b4c8;font-size:10px;line-height:1.1;font-weight:600; }
#siteTitle > span.map-brand-copy { font-size:inherit !important;text-shadow:none !important; }

#pinInfoModal .modal-content,
#issueModal .modal-content,
#commentReportModal .modal-content,
#commentDeleteConfirmModal .modal-content,
#helpModal .help-modal-content {
  background: linear-gradient(160deg, rgba(35,42,68,.99), rgba(25,30,50,.99)) !important;
  border-color: rgba(148,163,184,.16) !important;
}
#pinInfoModal .pin-info-body,
#pinInfoModal .pin-comments-section,
#helpModal .help-content { background: transparent !important; }
#pinInfoModal .pin-info-card,
#pinInfoModal .comment-item,
#helpModal .legend-explainer-item,
#helpModal .legend-list span {
  background: rgba(8,12,24,.34) !important;
}
#helpModal .help-modal-content {
  border-radius: 22px !important;
  overflow: hidden !important;
  clip-path: none !important;
  contain: paint;
  transform: translateZ(0);
}
#helpModal .pin-info-header { border-radius: 22px 22px 0 0 !important; }
#helpModal .help-content { border-radius: 0 0 22px 22px !important; }

#pinPanel.sidePanel,
#filterPanel.sidePanel {
  background: linear-gradient(160deg, rgba(35,42,68,.98), rgba(25,30,50,.98)) !important;
  border-color: rgba(148,163,184,.16) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48) !important;
}
#filterPanel .panelHeader,
#pinPanel .panelTabs {
  background: rgba(28,34,56,.96) !important;
}
#filterPanel .filter-row,
#filterPanel .country-filter-pill,
#pinPanelContent .pinCard,
#pinPanelContent .adminPinItem {
  background: rgba(8,12,24,.34) !important;
}


/* === Cruise map and panel consistency round 5 === */
/* Map topbar is the exact shared Explorer/Admin topbar component. */
.map-modern-topbar.modern-topbar {
  height: 70px !important;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important;
  background: rgba(15, 18, 34, .80) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}
.map-modern-topbar .modern-brand { gap: 11px !important; }
.map-modern-topbar .modern-brand img,
.map-modern-topbar #siteLogo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  filter: none !important;
}
.map-modern-topbar .modern-brand-copy strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.map-modern-topbar .modern-brand-copy small {
  margin-top: 4px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
}
.map-modern-topbar .modern-topbar-actions { gap: 9px !important; }
.map-modern-topbar .modern-icon-button,
.map-modern-topbar .modern-avatar-button,
.map-modern-topbar #typeToggle,
.map-modern-topbar #explorerBtn,
.map-modern-topbar #adminPinBtn,
.map-modern-topbar #helpBtn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  transform: none !important;
}
.map-modern-topbar .modern-avatar-button { border-radius: 50% !important; overflow: hidden !important; }
.map-modern-topbar .modern-avatar-button img,
.map-modern-topbar #topAvatar {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  object-fit: cover !important;
}
.map-modern-topbar .modern-icon-button:hover,
.map-modern-topbar .modern-avatar-button:hover {
  background: rgba(37, 136, 230, .18) !important;
  border-color: rgba(96, 165, 250, .34) !important;
  transform: translateY(-1px) !important;
}

/* Filters restored to the restrained, flat rows used before the gradient overhaul. */
#filterPanel.sidePanel {
  padding: 10px !important;
  background: rgba(17, 22, 38, .985) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
}
#filterPanel .panelHeader {
  min-height: 48px !important;
  margin: 0 0 10px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(148, 163, 184, .13) !important;
  border-radius: 14px !important;
  background: rgba(35, 42, 68, .78) !important;
  box-shadow: none !important;
}
#filterPanel .filter-row,
#filterPanel .country-filter-pill {
  min-height: 42px !important;
  margin: 3px 0 !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .045) !important;
  background-image: none !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
  transform: none !important;
}
#filterPanel .filter-row:hover,
#filterPanel .country-filter-pill:hover {
  background: rgba(255, 255, 255, .085) !important;
  border-color: rgba(148, 163, 184, .18) !important;
  box-shadow: none !important;
}
#filterPanel .filter-row.active,
#filterPanel .country-filter-pill.active {
  background: rgba(96, 165, 250, .16) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(96, 165, 250, .36) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .12) !important;
}

/* All Spots / Pending use the same fully rounded pill tabs as Reports. */
#pinPanel.sidePanel {
  padding: 10px !important;
  background: rgba(17, 22, 38, .985) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 18px 0 0 18px !important;
}
#pinPanel .map-page-tabs.panelTabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: visible !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 24, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}
#pinPanel .map-page-tabs.panelTabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8f9db5 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transform: none !important;
}
#pinPanel .map-page-tabs.panelTabs button:hover {
  background: rgba(255, 255, 255, .055) !important;
  color: #e2e8f0 !important;
}
#pinPanel .map-page-tabs.panelTabs button.active {
  background: rgba(37, 136, 230, .16) !important;
  color: #a9d5ff !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .20) !important;
}
#pinPanelContent .pinItem,
#pinPanelContent .pinCard,
#pinPanelContent .adminPinItem {
  background: linear-gradient(160deg, rgba(35, 42, 68, .96), rgba(25, 30, 50, .96)) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  box-shadow: none !important;
}

/* Dark modal containers with lighter information/comment entries. */
#pinInfoModal .modal-content,
#issueModal .modal-content,
#commentEditorModal .modal-content,
#commentReportModal .modal-content,
#commentDeleteConfirmModal .modal-content,
#helpModal .help-modal-content {
  background: rgba(8, 12, 24, .96) !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
#pinInfoModal .pin-info-card,
#pinInfoModal .pin-comment,
#helpModal .legend-explainer-item,
#helpModal .legend-list span {
  background: linear-gradient(160deg, rgba(35, 42, 68, .96), rgba(25, 30, 50, .96)) !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
#pinInfoModal .pin-comments-section {
  background: rgba(8, 12, 24, .52) !important;
  border-color: rgba(148, 163, 184, .14) !important;
}

/* Neutral, low-glare amenity tags in the map popup and More Info modal. */
.popupAmenities span {
  padding: 5px 9px !important;
  border: 1px solid rgba(96, 165, 250, .18) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, .10) !important;
  background-image: none !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

/* Comments are list-only until the dedicated editor is opened. */
.pin-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pin-comments-header h3 { margin: 0 !important; }
.pin-comments-add {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #e8eef8 !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
.pin-comments-add:hover { background: rgba(255, 255, 255, .10) !important; }
#commentEditorModal { z-index: 1000005 !important; }
#commentEditorModal .comment-editor-content {
  width: min(92vw, 580px) !important;
  max-width: 580px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
#commentEditorModal .pin-info-header {
  min-height: 64px;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: rgba(35, 42, 68, .78) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}
#commentEditorModal .pin-info-header h2 { margin: 0 !important; text-align: left !important; }
#commentEditorModal .comment-editor-body { padding: 17px; }
#commentEditorModal label {
  display: block;
  margin: 0 0 7px;
  color: #dbe5f4;
  font-size: 12px;
  font-weight: 760;
}
#commentEditorModal textarea,
#commentEditorModal input[type="file"],
#addModal input, #addModal textarea, #addModal select,
#editModal input, #editModal textarea, #editModal select,
#issueModal textarea,
#commentReportModal textarea {
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(8, 12, 24, .58) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}
#commentEditorModal textarea { min-height: 120px !important; resize: vertical !important; }
#commentEditorModal textarea:focus,
#addModal input:focus, #addModal textarea:focus, #addModal select:focus,
#editModal input:focus, #editModal textarea:focus, #editModal select:focus,
#issueModal textarea:focus,
#commentReportModal textarea:focus {
  outline: none !important;
  border-color: rgba(96, 165, 250, .68) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .12) !important;
}

@media (max-width: 640px) {
  .map-modern-topbar.modern-topbar { height: 64px !important; }
  #pinPanel.sidePanel, #filterPanel.sidePanel { top: 64px !important; height: calc(100dvh - 64px) !important; }
}

/* =====================================================================
   Cruise map consistency round 6 — shared topbar, opaque modals and editors
   ===================================================================== */
:root {
  --cruise-bg: #101426;
  --cruise-panel: #181e33;
  --cruise-panel-elevated: #1b2238;
  --cruise-entry: #202840;
  --cruise-entry-hover: #252f4a;
  --cruise-field: #11172a;
  --cruise-border: rgba(148, 163, 184, .17);
  --cruise-border-soft: rgba(148, 163, 184, .11);
}

/* Exact same topbar proportions and finish as Explorer/Profile/Users. */
body #app > .map-modern-topbar.modern-topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: linear-gradient(90deg, rgba(13, 17, 31, .98), rgba(20, 24, 43, .97)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
body #app > .map-modern-topbar .modern-brand {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body #app > .map-modern-topbar #siteLogo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}
body #app > .map-modern-topbar .modern-brand-copy strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
body #app > .map-modern-topbar .modern-brand-copy small {
  margin-top: 4px !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}
body #app > .map-modern-topbar .modern-topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  overflow: visible !important;
}
body #app > .map-modern-topbar #typeDropdown { order: 10 !important; }
body #app > .map-modern-topbar #explorerBtn { order: 20 !important; }
body #app > .map-modern-topbar #adminPinBtn { order: 30 !important; }
body #app > .map-modern-topbar #helpBtn { order: 40 !important; }
body #app > .map-modern-topbar .modern-avatar-button { order: 50 !important; }
body #app > .map-modern-topbar .modern-icon-button,
body #app > .map-modern-topbar .modern-avatar-button,
body #app > .map-modern-topbar #typeToggle,
body #app > .map-modern-topbar #explorerBtn,
body #app > .map-modern-topbar #adminPinBtn,
body #app > .map-modern-topbar #helpBtn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(148, 163, 184, .17) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  transform: none !important;
}
body #app > .map-modern-topbar .modern-avatar-button {
  border-radius: 50% !important;
  overflow: hidden !important;
}
body #app > .map-modern-topbar #topAvatar {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

/* Opaque shared modal shell. */
.modal {
  padding: 88px 14px 30px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: rgba(5, 8, 18, .78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.modal .modal-content,
#helpModal .help-modal-content,
#pinInfoModal .pin-info-content {
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--cruise-panel) !important;
  background-image: none !important;
  border: 1px solid var(--cruise-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52) !important;
  color: #f8fafc !important;
}
.pin-info-header,
.spot-modal-header {
  width: 100% !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: var(--cruise-panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cruise-border) !important;
  border-radius: 0 !important;
}
.spot-modal-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.spot-modal-title-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(37, 136, 230, .16);
  color: #91c9ff;
}
.spot-modal-title-copy { min-width: 0; }
.spot-modal-title-copy h2,
.pin-info-header h2 {
  margin: 0 !important;
  color: #f8fafc !important;
  text-align: left !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}
.spot-modal-title-copy p {
  margin: 4px 0 0 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.pin-info-close,
.closeModalBtn,
.image-viewer-close {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 11px !important;
  background: rgba(37, 99, 235, .92) !important;
  color: white !important;
  font-size: 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.pin-info-close:hover,
.closeModalBtn:hover,
.image-viewer-close:hover { background: #1d6fe0 !important; }

/* Add/Edit Spot now use page space and the More Info modal language. */
#addModal .spot-editor-content,
#editModal .spot-editor-content {
  width: min(1040px, calc(100vw - 28px)) !important;
  max-width: 1040px !important;
  max-height: calc(100dvh - 118px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.spot-editor-body {
  min-height: 0;
  padding: 18px !important;
  overflow-y: auto !important;
  background: var(--cruise-panel) !important;
}
.spot-editor-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 14px !important;
}
.spot-editor-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.spot-editor-field.full { grid-column: 1 / -1 !important; }
.spot-editor-field > label,
.spot-editor-body > label {
  display: block !important;
  margin: 0 !important;
  color: #dbe5f4 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}
#addModal input,
#addModal textarea,
#addModal select,
#editModal input,
#editModal textarea,
#editModal select,
.spot-simple-body input,
.spot-simple-body textarea,
.spot-simple-body select,
#commentEditorModal input,
#commentEditorModal textarea {
  width: 100% !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .19) !important;
  border-radius: 12px !important;
  background: var(--cruise-field) !important;
  background-image: none !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
#addModal textarea,
#editModal textarea { min-height: 100px !important; resize: vertical !important; }
#addModal input:focus,
#addModal textarea:focus,
#addModal select:focus,
#editModal input:focus,
#editModal textarea:focus,
#editModal select:focus,
.spot-simple-body textarea:focus,
#commentEditorModal textarea:focus {
  outline: none !important;
  border-color: rgba(96, 165, 250, .68) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .12) !important;
}
.spot-editor-footer,
.spot-simple-footer,
.comment-editor-actions {
  min-height: 68px;
  padding: 8px 18px 18px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  background: var(--cruise-panel) !important;
  background-image: none !important;
  border: 0 !important;
}
.spot-editor-footer button,
.spot-simple-footer button,
.comment-editor-actions button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.amenityGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 13px !important;
  border: 1px solid var(--cruise-border-soft) !important;
  border-radius: 15px !important;
  background: var(--cruise-panel-elevated) !important;
}
.amenityGrid label {
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--cruise-border-soft) !important;
  border-radius: 12px !important;
  background: var(--cruise-entry) !important;
  color: #e9eff8 !important;
  line-height: 1.25 !important;
}
.amenityGrid label input { width: 17px !important; min-width: 17px !important; height: 17px !important; min-height: 17px !important; padding: 0 !important; }
.image-upload-block,
.hidden-coordinate-fields {
  padding: 13px !important;
  border: 1px solid var(--cruise-border-soft) !important;
  border-radius: 15px !important;
  background: var(--cruise-panel-elevated) !important;
}
.hidden-coordinate-fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
.hidden-coordinate-fields label { grid-column: 1 / -1; }

/* Simple report/confirmation modals use the same header/body/footer. */
.spot-simple-content { width: min(580px, calc(100vw - 28px)) !important; max-width: 580px !important; }
.spot-simple-body {
  padding: 18px !important;
  background: var(--cruise-panel) !important;
  color: #cbd5e1 !important;
}
.spot-simple-body > p:first-child { margin-top: 0 !important; }

/* More Info, comments and Help use the same opaque, moderate-contrast surface. */
#pinInfoModal .pin-info-content { width: min(860px, calc(100vw - 28px)) !important; max-width: 860px !important; }
#pinInfoModal .pin-info-body,
#pinInfoModal .pin-comments-section,
#helpModal .help-content,
#commentEditorModal .comment-editor-body {
  background: var(--cruise-panel) !important;
  background-image: none !important;
}
#pinInfoModal .pin-info-body,
#helpModal .help-content { padding: 18px !important; }
#pinInfoModal .pin-comments-section { margin: 0 18px 18px !important; padding: 14px !important; }
#pinInfoModal .pin-info-card,
#pinInfoModal .pin-comment,
#helpModal .legend-explainer-item,
#helpModal .legend-list span,
#commentEditorModal .image-upload-block {
  background: var(--cruise-entry) !important;
  background-image: none !important;
  border-color: var(--cruise-border-soft) !important;
  box-shadow: none !important;
}
#helpModal .help-modal-content { width: min(900px, calc(100vw - 28px)) !important; max-width: 900px !important; }
#helpModal .help-content { max-height: calc(100dvh - 190px) !important; overflow-y: auto !important; }

/* Comment editor is fully opaque and only has the right-aligned Post/Save action. */
#commentEditorModal .comment-editor-content {
  width: min(580px, calc(100vw - 28px)) !important;
  max-width: 580px !important;
  background: var(--cruise-panel) !important;
  opacity: 1 !important;
}
#commentEditorModal .comment-editor-body { padding: 18px !important; }
#commentEditorModal .comment-editor-actions { margin: 4px -18px -18px !important; }
#commentEditorModal .comment-editor-actions #commentEditorSaveBtn { padding-inline: 16px !important; }
.pin-comments-add {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 11px !important;
}

/* Side panels keep restrained flat filter rows; Filters starts immediately at Pin type. */
#filterPanel.sidePanel,
#pinPanel.sidePanel {
  padding: 10px !important;
  background: #151a2d !important;
  background-image: none !important;
  border: 1px solid var(--cruise-border) !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
}
#filterPanel .filterPanelContent { padding-top: 0 !important; }
#filterPanel .filter-row,
#filterPanel .country-filter-pill {
  min-height: 42px !important;
  margin: 3px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--cruise-border-soft) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .045) !important;
  background-image: none !important;
  box-shadow: none !important;
}
#filterPanel .filter-row:hover,
#filterPanel .country-filter-pill:hover { background: rgba(255, 255, 255, .08) !important; }
#filterPanel .filter-row.active,
#filterPanel .country-filter-pill.active {
  background: rgba(96, 165, 250, .15) !important;
  background-image: none !important;
  border-color: rgba(96, 165, 250, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .10) !important;
}
#pinPanelContent .pinItem,
#pinPanelContent .pinCard,
#pinPanelContent .adminPinItem { background: var(--cruise-entry) !important; background-image: none !important; }

/* Low-glare amenity tags in both the popup and More Info content. */
.popupAmenities span,
#pinInfoModal .popupAmenities span,
#pinInfoModal .amenityTag,
#pinInfoModal .pinAmenityTag {
  border: 1px solid rgba(96, 165, 250, .17) !important;
  background: rgba(37, 99, 235, .09) !important;
  background-image: none !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

@media (max-width: 880px) {
  .amenityGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  body #app > .map-modern-topbar.modern-topbar { height: 64px !important; min-height: 64px !important; padding-inline: 10px !important; }
  body #app > .map-modern-topbar #siteLogo { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  body #app > .map-modern-topbar .modern-brand-copy strong { font-size: 14px !important; }
  body #app > .map-modern-topbar .modern-brand-copy small { font-size: 10px !important; }
  body #app > .map-modern-topbar .modern-icon-button,
  body #app > .map-modern-topbar .modern-avatar-button,
  body #app > .map-modern-topbar #typeToggle,
  body #app > .map-modern-topbar #explorerBtn,
  body #app > .map-modern-topbar #adminPinBtn,
  body #app > .map-modern-topbar #helpBtn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 11px !important;
  }
  .modal { padding: 64px 0 0 !important; align-items: stretch !important; }
  .modal .modal-content,
  #addModal .spot-editor-content,
  #editModal .spot-editor-content,
  #pinInfoModal .pin-info-content,
  #helpModal .help-modal-content,
  #commentEditorModal .comment-editor-content,
  .spot-simple-content {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .pin-info-header,
  .spot-modal-header { min-height: 64px !important; padding: 13px 14px !important; }
  .spot-editor-body,
  #pinInfoModal .pin-info-body,
  #helpModal .help-content,
  .spot-simple-body,
  #commentEditorModal .comment-editor-body { padding: 14px !important; }
  .spot-editor-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .spot-editor-field.full { grid-column: auto !important; }
  .amenityGrid { grid-template-columns: 1fr 1fr !important; padding: 10px !important; }
  .spot-editor-footer,
  .spot-simple-footer,
  .comment-editor-actions { padding: 8px 14px 14px !important; }
  #commentEditorModal .comment-editor-actions { margin: 4px -14px -14px !important; }
  #pinPanel.sidePanel,
  #filterPanel.sidePanel { top: 64px !important; height: calc(100dvh - 64px) !important; width: min(92vw, 380px) !important; }
}
@media (max-width: 390px) {
  body #app > .map-modern-topbar .modern-topbar-actions { gap: 6px !important; }
  body #app > .map-modern-topbar .modern-brand-copy { max-width: 104px; }
  .amenityGrid { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   Cruise map alignment round 7 — exact topbar, modal contrast and editors
   ===================================================================== */
:root {
  --cruise-modal-header: #202840;
  --cruise-modal-body: #181e33;
}

/* Match the Explorer brand weight exactly. */
body #app > .map-modern-topbar .modern-brand-copy strong {
  font-weight: 700 !important;
}

/* Help is the left-most action; the spot list remains immediately before
   the profile control on the right. */
body #app > .map-modern-topbar #helpBtn { order: 10 !important; }
body #app > .map-modern-topbar #explorerBtn { order: 20 !important; }
body #app > .map-modern-topbar #typeDropdown { order: 30 !important; }
body #app > .map-modern-topbar #adminPinBtn { order: 40 !important; }
body #app > .map-modern-topbar .modern-avatar-button { order: 50 !important; }

/* The same outlined profile control is used throughout the entire site. */
body #app > .map-modern-topbar .modern-avatar-button {
  border: 2px solid rgba(96, 165, 250, .72) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .11) !important;
  background: #11172a !important;
  overflow: hidden !important;
}
body #app > .map-modern-topbar .modern-avatar-button:hover {
  border-color: rgba(125, 190, 255, .92) !important;
  box-shadow: 0 0 0 4px rgba(37, 136, 230, .15) !important;
}

/* Modal chrome: light header, darker opaque content. */
.modal .modal-content,
#helpModal .help-modal-content,
#pinInfoModal .pin-info-content,
#commentEditorModal .comment-editor-content,
.spot-simple-content {
  background: var(--cruise-modal-body) !important;
  opacity: 1 !important;
}
.pin-info-header,
.spot-modal-header {
  background: var(--cruise-modal-header) !important;
}
.spot-editor-body,
.spot-editor-footer,
.spot-simple-body,
.spot-simple-footer,
#pinInfoModal .pin-info-body,
#pinInfoModal .pin-comments-section,
#helpModal .help-content,
#commentEditorModal .comment-editor-body,
#commentEditorModal .comment-editor-actions {
  background: var(--cruise-modal-body) !important;
  opacity: 1 !important;
}

/* All footer/action rows default to the left. */
.spot-editor-footer,
.spot-simple-footer,
.comment-editor-actions {
  justify-content: flex-start !important;
}

/* Add/Edit use the same measured field language as User Management. */
#addModal .spot-editor-content,
#editModal .spot-editor-content {
  width: min(1080px, calc(100vw - 32px)) !important;
  max-width: 1080px !important;
}
.spot-editor-body {
  padding: 20px !important;
}
.spot-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 16px !important;
}
.spot-editor-field {
  gap: 10px !important;
}
.spot-editor-field > label,
.spot-editor-body > label {
  line-height: 1.35 !important;
}
#addModal input,
#addModal textarea,
#addModal select,
#editModal input,
#editModal textarea,
#editModal select {
  min-height: 44px !important;
  border-radius: 12px !important;
  background: #11172a !important;
}

/* Amenity choices remain compact and readable instead of becoming giant
   inherited form controls. */
.amenityGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
}
.amenityGrid label {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 9px !important;
  gap: 7px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.amenityGrid label input[type="checkbox"] {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.amenityGrid label .pinIcon {
  width: 15px !important;
  flex: 0 0 15px !important;
  text-align: center !important;
}

/* Add only needs Save. Edit keeps equally sized Save and Delete. */
#addModal .spot-editor-footer .btn-save,
#editModal .spot-editor-footer .btn-save,
#editModal .spot-editor-footer #editPinDeleteBtn {
  width: 104px !important;
  min-width: 104px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 12px !important;
}

/* Toolbar plus/refresh controls are rounded squares like close buttons. */
.ui-toolbar-icon-button,
.ui-add-user-button,
.pin-comments-add,
#issuesRefreshBtn,
#refreshReportsBtn {
  border-radius: 11px !important;
}

/* Pull filter content up without changing the restrained row styling. */
#filterPanel.sidePanel {
  padding-top: 4px !important;
}
#filterPanel .filterPanelContent {
  padding-top: 0 !important;
  margin-top: -1px !important;
}
#filterPanel .filter-section-title:first-child {
  margin-top: 0 !important;
  padding-top: 4px !important;
}

@media (max-width: 880px) {
  .amenityGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .spot-editor-grid {
    grid-template-columns: 1fr !important;
  }
  .amenityGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .spot-editor-footer,
  .spot-simple-footer,
  .comment-editor-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 390px) {
  .amenityGrid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   Cruise map polish round 8 — exact fields, info spacing and round avatar
   ===================================================================== */

/* Add/Edit Spot fields use the exact dark field surface used by the
   Profile Information form in User Management. */
#addModal input,
#addModal textarea,
#addModal select,
#editModal input,
#editModal textarea,
#editModal select {
  background-color: #11172a !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, .19) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
  opacity: 1 !important;
}

#addModal input:focus,
#addModal textarea:focus,
#addModal select:focus,
#editModal input:focus,
#editModal textarea:focus,
#editModal select:focus {
  border-color: rgba(96, 165, 250, .68) !important;
  box-shadow: 0 0 0 3px rgba(37, 136, 230, .12) !important;
}

/* More Info now uses the same outer width allowance and body spacing as
   Add/Edit Spot instead of sitting tighter against its content. */
#pinInfoModal .pin-info-content {
  width: min(860px, calc(100vw - 32px)) !important;
}
#pinInfoModal .pin-info-body {
  padding: 20px !important;
}
#pinInfoModal .pin-comments-section {
  margin: 0 20px 20px !important;
  padding: 16px !important;
}

/* Never let the profile image inherit the rounded-square mobile action
   radius used by normal map buttons. */
body #app > .map-modern-topbar .modern-avatar-button,
body #app > .map-modern-topbar .modern-avatar-button #topAvatar,
body #app > .map-modern-topbar #topAvatar {
  border-radius: 50% !important;
}

@media (max-width: 640px) {
  body #app > .map-modern-topbar .modern-avatar-button,
  body #app > .map-modern-topbar .modern-avatar-button #topAvatar,
  body #app > .map-modern-topbar #topAvatar {
    border-radius: 50% !important;
  }

  /* Match the mobile editor's inner spacing while preserving its
     full-height sheet behavior. */
  #pinInfoModal .pin-info-body {
    padding: 14px !important;
  }
  #pinInfoModal .pin-comments-section {
    margin: 0 14px 14px !important;
    padding: 14px !important;
  }
}

/* =====================================================================
   Cruise map polish round 9 — mobile gutters, panels and field parity
   ===================================================================== */
:root {
  --cruise-field: #0f172a;
}

/* Spot editors use the exact input shade from User Management. */
#addModal input,
#addModal textarea,
#addModal select,
#editModal input,
#editModal textarea,
#editModal select {
  background-color: #0f172a !important;
  background-image: none !important;
}

/* The avatar control cannot be compressed into a rounded square. */
body #app > .map-modern-topbar .modern-avatar-button {
  flex: 0 0 42px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body #app > .map-modern-topbar .modern-avatar-button #topAvatar,
body #app > .map-modern-topbar #topAvatar {
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  body #app > .map-modern-topbar .modern-avatar-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 999px !important;
  }

  /* Every map modal, including More Info and Help, keeps the same uniform
     outer gutter as the spot editor instead of becoming an edge-to-edge sheet. */
  .modal {
    padding: 78px 14px 14px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .modal .modal-content,
  #addModal .spot-editor-content,
  #editModal .spot-editor-content,
  #pinInfoModal .pin-info-content,
  #helpModal .help-modal-content,
  #commentEditorModal .comment-editor-content,
  .spot-simple-content {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 92px) !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }

  /* Match More Info's internal spacing to the editor on every side. */
  #pinInfoModal .pin-info-body,
  #helpModal .help-content {
    padding: 16px !important;
  }
  #pinInfoModal .pin-comments-section {
    margin: 0 16px 16px !important;
    padding: 16px !important;
  }

  /* The slide-in menus remain attached to the physical right edge. */
  #pinPanel.sidePanel,
  #filterPanel.sidePanel,
  #countryPanel.sidePanel {
    right: 0 !important;
    width: min(92vw, 380px) !important;
    max-width: 100vw !important;
    transform: translateX(calc(100% + 2px)) !important;
    border-right: 0 !important;
    border-radius: 18px 0 0 18px !important;
  }
  #pinPanel.sidePanel.open,
  #filterPanel.sidePanel.open,
  #countryPanel.sidePanel.open {
    right: 0 !important;
    transform: translateX(0) !important;
  }
}

/* =====================================================================
   Cruise map polish round 10 — exact Profile fields and equal modal gutters
   ===================================================================== */
:root {
  --cruise-shared-field: #0f172a;
}

/* Use the exact same field surface, border and focus language as Profile and
   User Management. The explicit background properties prevent older global
   form rules and native colour schemes from lightening these controls. */
#addModal input,
#addModal textarea,
#addModal select,
#editModal input,
#editModal textarea,
#editModal select {
  background: var(--cruise-shared-field) !important;
  background-color: var(--cruise-shared-field) !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, .19) !important;
  color: #f8fafc !important;
  color-scheme: dark;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
}

/* All map dialogs receive equal viewport gutters. Smaller dialogs are centred;
   larger editors use the same space above and below and scroll internally. */
.modal {
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.modal .modal-content,
#addModal .spot-editor-content,
#editModal .spot-editor-content,
#pinInfoModal .pin-info-content,
#helpModal .help-modal-content,
#commentEditorModal .comment-editor-content,
.spot-simple-content {
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .modal {
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .modal .modal-content,
  #addModal .spot-editor-content,
  #editModal .spot-editor-content,
  #pinInfoModal .pin-info-content,
  #helpModal .help-modal-content,
  #commentEditorModal .comment-editor-content,
  .spot-simple-content {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
}


/* =====================================================================
   Cruise map polish round 11 — mobile popup fit, scrolling and checkboxes
   ===================================================================== */

/* Every modal is above the fixed website topbar. This keeps its own header
   visible while retaining the same viewport gutter on all four sides. */
.modal {
  z-index: 1000000 !important;
}
#pinInfoModal,
#helpModal,
#addModal,
#editModal,
#issueModal,
#commentEditorModal,
#commentReportModal,
#commentDeleteConfirmModal {
  z-index: 1000001 !important;
}

/* More Info is a bounded, internally scrollable dialog. Its modal header
   remains visible while long information and comment lists scroll below it. */
#pinInfoModal .pin-info-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - 48px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
#pinInfoModal .pin-info-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  flex: 0 0 auto !important;
}
#pinInfoModal .pin-info-body,
#pinInfoModal .pin-comments-section {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Uniform square, rounded checkboxes on Safari/iOS, Chromium and Firefox.
   Empty controls are white; checked controls use the site blue and a white tick. */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border: 1.5px solid rgba(226, 232, 240, .95) !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
  color-scheme: light !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}
input[type="checkbox"]:checked {
  border-color: #2588e6 !important;
  background-color: #2588e6 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M3.1 8.2 6.4 11.3 13 4.7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}
input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(37, 136, 230, .25) !important;
  outline-offset: 2px !important;
}
input[type="checkbox"]:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

/* The compact amenity grid keeps the same checkbox dimensions instead of
   inheriting older 15px/17px variants. */
.amenityGrid label input[type="checkbox"],
.ui-permission input[type="checkbox"],
.perm-line input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-basis: 18px !important;
}

@media (max-width: 640px) {
  .modal {
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  #pinInfoModal .pin-info-content {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 20px !important;
  }
  #pinInfoModal .pin-info-header {
    border-radius: 20px 20px 0 0 !important;
  }

  /* Keep the full marker visible beneath tall mobile speech bubbles. */
  .leaflet-popup.park-popup {
    margin-bottom: 6px !important;
  }
}


/* =====================================================================
   Cruise map polish round 13 — GPS stability, panel alignment and Help fit
   ===================================================================== */

/* Help uses the same uniform viewport gutter as the other dialogs. Its body
   receives the remaining height and scrolls, preventing a large artificial
   gap above the dialog on mobile. */
#helpModal {
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#helpModal .help-modal-content {
  display: flex !important;
  flex-direction: column !important;
  width: min(900px, calc(100vw - 48px)) !important;
  max-width: 900px !important;
  max-height: calc(100dvh - 48px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#helpModal .pin-info-header {
  flex: 0 0 auto !important;
}
#helpModal .help-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* A restrained location-ready notice replaces automatic map recentering. */
.gps-ready-notice {
  position: fixed;
  left: max(14px, calc(env(safe-area-inset-left, 0px) + 10px));
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  z-index: 850000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(290px, calc(100vw - 28px));
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 12px;
  background: #182036;
  color: #eaf4ff;
  box-shadow: 0 12px 32px rgba(2, 6, 23, .42);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.gps-ready-notice i { color: #7cc3ff; }
.gps-ready-notice.visible {
  opacity: 1;
  transform: translateY(0);
}
.gps-ready-notice.leaving {
  opacity: 0;
  transform: translateY(6px);
}

@media (max-width: 700px) {
  /* Both right-side menus use the same small clearance below the 64px mobile
     topbar. This deliberately matches the previous Filters panel position. */
  #pinPanel.sidePanel,
  #filterPanel.sidePanel,
  #countryPanel.sidePanel {
    top: 70px !important;
    height: calc(100dvh - 70px) !important;
  }

  #helpModal {
    padding: 14px !important;
  }
  #helpModal .help-modal-content {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 20px !important;
  }

  .gps-ready-notice {
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
}

/* =====================================================================
   Cruise polish round 14 — reliable uniform selection controls
   ===================================================================== */
#addModal input[type="checkbox"],
#editModal input[type="checkbox"],
#userModal input[type="checkbox"],
.ui-modal input[type="checkbox"],
.email-preference-row input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid rgba(226, 232, 240, .95) !important;
  border-radius: 5px !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  color-scheme: light !important;
}
#addModal input[type="checkbox"]:checked,
#editModal input[type="checkbox"]:checked,
#userModal input[type="checkbox"]:checked,
.ui-modal input[type="checkbox"]:checked,
.email-preference-row input[type="checkbox"]:checked {
  border-color: #2588e6 !important;
  background-color: #2588e6 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M3.1 8.2 6.4 11.3 13 4.7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}
#addModal .amenityGrid label,
#editModal .amenityGrid label,
.email-preference-row {
  cursor: pointer !important;
  user-select: none !important;
}
#addModal .amenityGrid label > *,
#editModal .amenityGrid label > * {
  pointer-events: none;
}
#addModal .amenityGrid label input[type="checkbox"],
#editModal .amenityGrid label input[type="checkbox"] {
  pointer-events: auto !important;
}

/* Profile notification tab and permission-aware email settings. */
.profile-tab-panel { display: none; }
.profile-tab-panel.active { display: block; }
.profile-tab-shell { padding: 5px !important; }
.profile-page-tabs { width: fit-content; max-width: 100%; }
.profile-notification-title { margin: 8px 0 6px !important; text-align: left !important; font-size: 20px !important; }
.email-preference-groups { display: grid; gap: 14px; margin-top: 18px; }
.email-preference-group {
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 16px;
  background: rgba(10, 15, 29, .48);
  overflow: hidden;
}
.email-preference-group > h3 {
  margin: 0 !important;
  padding: 12px 14px !important;
  text-align: left !important;
  font-size: 13px !important;
  color: #93c5fd;
  background: rgba(32, 41, 66, .72);
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}
.email-preference-list { display: grid; }
.email-preference-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .10);
  background: rgba(255, 255, 255, .025);
}
.email-preference-row:last-child { border-bottom: 0; }
.email-preference-row:hover { background: rgba(96, 165, 250, .07); }
.email-preference-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #60a5fa;
  background: rgba(37, 136, 230, .12);
}
.email-preference-copy { min-width: 0; display: grid; gap: 3px; }
.email-preference-copy strong { font-size: 14px; color: #f8fafc; }
.email-preference-copy small { font-size: 12px; line-height: 1.35; color: #94a3b8; }
@media (max-width: 520px) {
  .email-preference-row { grid-template-columns: 34px minmax(0, 1fr) 18px; padding: 11px 12px; }
  .email-preference-icon { width: 32px; height: 32px; border-radius: 10px; }
}

/* ===== Pending review, Help editor and content-validation additions ===== */
#spotPendingCount,
#typeFilterCount {
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  border:2px solid #111426;
  font-size:10px;
  font-weight:900;
  line-height:1;
  z-index:3;
}
#adminPinBtn,#typeToggle{position:relative!important}
#pinPanel .panelTabs{gap:6px!important;padding:9px!important;overflow-x:auto!important}
#pinPanel .panelTabs button{white-space:nowrap!important;min-width:max-content!important;display:inline-flex!important;align-items:center!important;gap:7px!important}
#pinPanel .panelTabs button[hidden]{display:none!important}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:900}
#pinPanel .panelTabs button.active .tab-count{background:rgba(255,255,255,.22)}
.pinItemMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.pin-review-badge,.popupPendingBadge{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;letter-spacing:.02em;border:1px solid rgba(96,165,250,.28)}
.pin-review-badge.new,.popupPendingBadge.new{background:rgba(37,136,230,.14);color:#bfdbfe}
.pin-review-badge.edit,.popupPendingBadge.edit{background:rgba(168,85,247,.14);color:#e9d5ff;border-color:rgba(168,85,247,.28)}
.pin-edit-submitter{margin-top:6px;color:#94a3b8;font-size:11px}
.review-spot-name{padding:12px 14px;margin-bottom:14px;border-radius:12px;background:#171b30;border:1px solid #343c59;font-weight:800;color:#fff}

.readonly-coordinate-fields input,
.hidden-coordinate-fields input[readonly]{background:#151a2c!important;color:#7f8aa8!important;border-color:#2a324c!important;cursor:not-allowed!important;opacity:.88!important}

/* Uniform amenity checkboxes: independent rounded squares on every platform. */
#addModal .amenityGrid label,
#editModal .amenityGrid label{cursor:pointer!important;user-select:none!important}
#addModal .amenityGrid input[type="checkbox"],
#editModal .amenityGrid input[type="checkbox"]{
  appearance:none!important;-webkit-appearance:none!important;
  width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;
  border-radius:5px!important;border:2px solid #dbeafe!important;background:#fff!important;
  display:inline-grid!important;place-content:center!important;margin:0!important;padding:0!important;flex:0 0 18px!important;
}
#addModal .amenityGrid input[type="checkbox"]::before,
#editModal .amenityGrid input[type="checkbox"]::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-2px}
#addModal .amenityGrid input[type="checkbox"]:checked,
#editModal .amenityGrid input[type="checkbox"]:checked{background:#2588e6!important;border-color:#60a5fa!important}
#addModal .amenityGrid input[type="checkbox"]:checked::before,
#editModal .amenityGrid input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}

.modal-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.help-loading{padding:30px;text-align:center;color:#94a3b8}
.help-copy-section+.help-copy-section{margin-top:24px}
.legend-entry-button{width:100%;text-align:left;cursor:pointer!important;border:1px solid rgba(148,163,184,.16)!important;background:#20263d!important;color:#fff!important}
.legend-entry-button:hover{background:#252d49!important;border-color:rgba(96,165,250,.38)!important;transform:none!important}
.legend-entry-button>div{min-width:0;flex:1}
.legend-entry-chevron{margin-left:auto!important;width:auto!important;color:#64748b!important;font-size:12px!important}
.help-editor-content{width:min(760px,calc(100vw - 28px))!important;max-width:760px!important;max-height:calc(100dvh - 28px)!important;overflow:hidden!important;background:#20263d!important}
.help-editor-body{padding:18px!important;overflow-y:auto!important;display:grid;gap:16px}
.help-editor-section{padding:15px;border-radius:14px;background:#181d31;border:1px solid #303852;display:grid;gap:12px}
.help-editor-section textarea{min-height:125px!important}
.legend-entry-content{width:min(560px,calc(100vw - 28px))!important;max-width:560px!important;background:#20263d!important}
.legend-entry-body{padding:20px!important}
.legend-entry-hero{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:20px}.legend-entry-hero i{width:32px;text-align:center}.legend-entry-long{margin-top:16px;padding:15px;border-radius:14px;background:#171b30;border:1px solid #303852;white-space:pre-wrap;line-height:1.65;color:#dbe4f4}.legend-long-text{min-height:180px!important}

.content-filter-error{margin:-7px 0 10px;color:#fecaca;font-size:12px;font-weight:750;line-height:1.4}
.content-filter-error[hidden]{display:none!important}
.content-filter-invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}

@media(max-width:640px){
  #pinPanel .panelTabs{padding:8px!important}
  #pinPanel .panelTabs button{font-size:12px!important;padding:8px 11px!important}
  .help-editor-content,.legend-entry-content{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
}

/* Pending image additions shown when a user reopens an existing pending edit. */
.pending-image-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
}
.pending-image-label i { color: #a78bfa; }

/* Native hidden state must win over component display declarations. */
[hidden] { display: none !important; }


/* =====================================================================
   Help & Legend modal permission, stacking and scrolling corrections
   ===================================================================== */
/* Detail and editor dialogs must stack above the Help & Legend window. */
#helpModal { z-index: 1000001 !important; }
#legendEntryModal { z-index: 1000020 !important; }
#helpLegendEditorModal { z-index: 1000030 !important; }
#legendEntryEditorModal { z-index: 1000040 !important; }

/* Editor controls are injected only after both the signed-in user's local
   permission and the protected API response confirm access. */
.legend-permission-edit {
  flex: 0 0 auto !important;
}

/* Rows remain clickable for every user, but no navigation chevron is shown. */
.legend-entry-button {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  padding-right: 14px !important;
}
.legend-entry-chevron { display: none !important; }

/* Every nested Help dialog is a bounded, opaque flex shell. The header and
   footer remain visible while the body itself scrolls on desktop and mobile. */
#helpLegendEditorModal,
#legendEntryModal,
#legendEntryEditorModal {
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#helpLegendEditorModal .help-editor-content,
#legendEntryEditorModal .help-editor-content,
#legendEntryModal .legend-entry-content {
  display: flex !important;
  flex-direction: column !important;
  width: min(760px, calc(100vw - 48px)) !important;
  max-width: 760px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 48px) !important;
  overflow: hidden !important;
  background: #20263d !important;
  opacity: 1 !important;
}
#legendEntryModal .legend-entry-content {
  width: min(560px, calc(100vw - 48px)) !important;
  max-width: 560px !important;
}
#helpLegendEditorModal .pin-info-header,
#legendEntryModal .pin-info-header,
#legendEntryEditorModal .pin-info-header,
#helpLegendEditorModal .spot-simple-footer,
#legendEntryEditorModal .spot-simple-footer {
  flex: 0 0 auto !important;
}
#helpLegendEditorModal .help-editor-body,
#legendEntryEditorModal .help-editor-body,
#legendEntryModal .legend-entry-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* The editor shows the exact icon and colour used by the public entry modal. */
.legend-editor-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid #303852;
  border-radius: 14px;
  background: #181d31;
}
.legend-editor-preview i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #20263d;
  border: 1px solid rgba(148,163,184,.16);
  font-size: 20px;
}
.legend-editor-preview div { min-width: 0; display: grid; gap: 3px; }
.legend-editor-preview small { color: #94a3b8; font-size: 11px; font-weight: 750; }
.legend-editor-preview strong { color: #f8fafc; font-size: 16px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  #helpLegendEditorModal,
  #legendEntryModal,
  #legendEntryEditorModal {
    padding: 14px !important;
  }
  #helpLegendEditorModal .help-editor-content,
  #legendEntryEditorModal .help-editor-content,
  #legendEntryModal .legend-entry-content {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 20px !important;
  }
}


/* Help & Legend icon tiles — one identical preview style everywhere. */
.legend-icon-tile {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 12px !important;
  background: #181d31 !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}
.legend-icon-tile i {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.legend-entry-button {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
}
.legend-entry-hero {
  align-items: center !important;
  gap: 13px !important;
}
.legend-entry-hero > i,
.legend-editor-preview > i {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
}


/* Spot list tabs: compact, non-overlapping, and permission-aware. */
#pinPanel .map-page-tabs.panelTabs[hidden],
#pinPanel .spot-list-title[hidden] {
  display: none !important;
}

#pinPanel .map-page-tabs.panelTabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow: hidden !important;
}

#pinPanel .map-page-tabs.panelTabs button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#pinPanel .map-page-tabs .tab-count {
  flex: 0 0 auto !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
}

#pinPanel .spot-list-title {
  position: sticky;
  top: 0;
  z-index: 4;
  display: block;
  margin: 0 0 8px;
  padding: 6px 4px 10px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
}

@media (max-width: 640px) {
  #pinPanel .map-page-tabs.panelTabs {
    gap: 3px !important;
    padding: 4px !important;
  }

  #pinPanel .map-page-tabs.panelTabs button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  #pinPanel .spot-list-title {
    padding: 5px 3px 9px;
    font-size: 17px;
  }
}

/* Spot-list tabs and permission-gated drag review */
#pinPanel,
#pinPanelContent {
  overflow-x: hidden !important;
}

#pinPanel .map-page-tabs.panelTabs {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overscroll-behavior-x: none;
}

#pinPanel .map-page-tabs.panelTabs button {
  position: relative;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 36px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#pinPanel .map-page-tabs .tab-count {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  max-width: 28px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#pinPanel .spot-list-title {
  margin: 0 !important;
  padding: 8px 6px 12px !important;
}

.pin-list-empty {
  padding: 22px 16px;
  text-align: center;
  opacity: .68;
}

.pinItem.review-draggable {
  cursor: grab;
}

.pinItem.review-draggable:active {
  cursor: grabbing;
}

.pinItem.dragging {
  opacity: .48 !important;
  transform: scale(.985);
}

.pin-item-trailing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.pin-drag-handle {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 9px;
  background: rgba(15,23,42,.78);
  color: #94a3b8;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pin-drag-handle:active {
  cursor: grabbing;
  color: #fff;
  border-color: rgba(96,165,250,.55);
  background: rgba(37,99,235,.26);
}

#pinPanel .map-page-tabs button.spot-drop-target {
  border-color: rgba(96,165,250,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.18) !important;
}

#pinPanel .map-page-tabs button.spot-drop-allowed {
  color: #fff !important;
  background: rgba(37,99,235,.38) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,.22), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.pin-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000030;
  display: inline-flex;
  max-width: min(260px, calc(100vw - 32px));
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid rgba(96,165,250,.48);
  border-radius: 12px;
  background: rgba(15,23,42,.96);
  color: #f8fafc;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  pointer-events: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
}

.pin-drag-ghost span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-drag-ghost i {
  color: #60a5fa;
}

@media (max-width: 640px) {
  #pinPanel .map-page-tabs.panelTabs {
    gap: 4px !important;
    padding: 4px !important;
  }

  #pinPanel .map-page-tabs.panelTabs button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  #pinPanel .map-page-tabs .tab-count {
    min-width: 17px !important;
    max-width: 25px !important;
    height: 17px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
  }

  .pin-drag-handle {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
}

/* Pending review details and notification alignment */
.report-notify-choice {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .72) !important;
  cursor: pointer !important;
  text-align: left !important;
}

.report-notify-choice > input[type="checkbox"] {
  grid-column: 1 !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  align-self: start !important;
}

.report-notify-choice > span {
  grid-column: 2 !important;
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  text-align: left !important;
}

.report-notify-choice strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.report-notify-choice small {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.pinPopup .popupReviewStatus {
  display: flex;
  justify-content: flex-start;
  margin: 7px 0 9px;
}

.pinPopup .popupPendingBadge {
  position: static !important;
  margin: 0 !important;
}

.pinPopup .popup-review-details {
  margin: 9px 0 11px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 12px;
  background: rgba(15, 23, 42, .74);
  color: #dbeafe;
}

.pinPopup .popup-review-details-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.pinPopup .popup-review-details-title i {
  color: #60a5fa;
}

.pinPopup .popup-review-details p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.48;
}

.pinPopup .popup-change-list {
  display: flex;
  max-height: 190px;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.pinPopup .popup-change-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 9px;
  background: rgba(2, 6, 23, .38);
}

.pinPopup .popup-change-label {
  color: #e2e8f0;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.pinPopup .popup-change-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  min-width: 0;
}

.pinPopup .popup-change-values i {
  padding-top: 3px;
  color: #64748b;
  font-size: 9px;
  text-align: center;
}

.pinPopup .popup-change-before,
.pinPopup .popup-change-after {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 10px;
  line-height: 1.4;
}

.pinPopup .popup-change-before {
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pinPopup .popup-change-after {
  color: #86efac;
}

.pinPopup .popup-change-added,
.pinPopup .popup-change-removed {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.pinPopup .popup-change-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
}

.pinPopup .popup-change-added .popup-change-status {
  background: rgba(34, 197, 94, .15);
  color: #86efac;
}

.pinPopup .popup-change-removed .popup-change-status {
  background: rgba(239, 68, 68, .15);
  color: #fca5a5;
}

.pinPopup .popup-change-empty {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.4;
}

.pinPopup .popup-review-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, .15);
}

.pinPopup .popup-review-note strong {
  color: #bfdbfe;
  font-size: 10px;
}

.pinPopup .popup-review-note span {
  color: #e2e8f0;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.pinPopup .popupActionsReview {
  margin-top: 8px !important;
}

@media (max-width: 640px) {
  .pinPopup .popup-change-list {
    max-height: 150px;
  }

  .pinPopup .popup-review-details {
    padding: 9px;
  }
}


/* Help & Legend: smaller, consistent top clearance on desktop and mobile. */
#helpModal {
  padding: 10px 24px 10px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
#helpModal .help-modal-content {
  max-height: calc(100dvh - 20px) !important;
}
@media (max-width: 700px) {
  #helpModal {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-right: 12px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
  }
  #helpModal .help-modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)) - 8px) !important;
  }
}


/* Public comment login prompt + profile tab proportion fixes. */
.comment-login-hint {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-top:14px !important;
  padding:13px 14px !important;
  border:1px solid rgba(96,165,250,.18) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,rgba(30,136,229,.11),rgba(30,41,59,.44)) !important;
}
.comment-login-hint[hidden] { display:none !important; }
.comment-login-message {
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
}
.comment-login-icon {
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  color:#7dd3fc !important;
  background:rgba(30,136,229,.16) !important;
  border:1px solid rgba(125,211,252,.12) !important;
}
.comment-login-copy {
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  line-height:1.25 !important;
}
.comment-login-copy strong { display:block !important; margin:0 !important; color:#f8fafc !important; font-size:13px !important; }
.comment-login-copy small { display:block !important; margin:0 !important; color:#94a3b8 !important; font-size:11.5px !important; }
#commentLoginHint .comment-login-button {
  width:auto !important;
  min-width:88px !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:9px 15px !important;
  margin:0 !important;
  border:1px solid rgba(125,211,252,.22) !important;
  border-radius:11px !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2196f3 0%,#1e88e5 48%,#2563eb 100%) !important;
  box-shadow:0 8px 20px rgba(30,136,229,.24), inset 0 1px 0 rgba(255,255,255,.13) !important;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease !important;
}
#commentLoginHint .comment-login-button:hover {
  filter:brightness(1.08) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(30,136,229,.30), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
#commentLoginHint .comment-login-button:active { transform:translateY(0) scale(.98) !important; }
.profile-page-tabs { width:100% !important; display:flex !important; }
.profile-page-tabs button { flex:1 1 0 !important; min-width:0 !important; padding-inline:14px !important; }
@media (max-width:520px) {
  .profile-tab-shell { padding:5px !important; }
  .profile-page-tabs { gap:4px !important; }
  .profile-page-tabs button { padding-inline:10px !important; gap:6px !important; }
  .comment-login-hint { gap:12px !important; padding:12px !important; }
  .comment-login-message { align-items:flex-start !important; }
  #commentLoginHint .comment-login-button { width:auto !important; min-width:84px !important; padding:9px 13px !important; }
}

/* -------------------------------------------------------
   PUBLIC VISITED COUNTER
-------------------------------------------------------- */
.pin-visit-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:9px;
  margin:11px 0 10px;
}
.pin-visit-indicator {
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(56,189,248,.18);
  border-radius:999px;
  background:rgba(14,165,233,.075);
  color:#cfefff;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.pin-visit-indicator > i { color:#38bdf8; font-size:12px; }
.pin-visit-indicator strong { color:#fff; font-weight:850; font-variant-numeric:tabular-nums; }
.pin-visit-button {
  width:auto !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  min-height:32px !important;
  margin:0 !important;
  padding:7px 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid rgba(56,189,248,.28) !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(37,99,235,.18)) !important;
  color:#effaff !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,opacity .15s ease !important;
}
.pin-visit-button:hover:not(:disabled) {
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.52) !important;
  background:linear-gradient(135deg,rgba(14,165,233,.27),rgba(37,99,235,.25)) !important;
}
.pin-visit-button > i { color:#38bdf8; font-size:12px; }
.pin-visit-button.active {
  border-color:rgba(34,197,94,.28) !important;
  background:rgba(34,197,94,.09) !important;
  color:#d1fae5 !important;
}
.pin-visit-button.active > i { color:#4ade80; }
.pin-visit-button.loading { opacity:.62 !important; cursor:wait !important; }
.pin-visit-button:disabled { opacity:.78 !important; cursor:default !important; }
.pinPopup .pin-visit-row { justify-content:flex-start; margin-top:10px; }
.pin-info-card .pin-visit-row { margin-top:13px; margin-bottom:12px; }
@media (max-width:520px) {
  .pin-visit-row { gap:8px; }
  .pin-visit-indicator { min-height:29px; padding:6px 9px; }
  .pin-visit-button { width:auto !important; padding:7px 10px !important; }
}

/* -------------------------------------------------------
   PIN SHARE ACTION
-------------------------------------------------------- */
.pinPopup .popupActionsPrimary {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.pinPopup .popupActionsPrimary a,
.pinPopup .popupActionsPrimary button {
  gap:7px !important;
}
.pinPopup .popupActionsPrimary i {
  font-size:12px;
  opacity:.95;
}
.pinPopup .pin-share-button {
  background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(14,165,233,.92)) !important;
  border:1px solid rgba(125,211,252,.22) !important;
  box-shadow:0 8px 18px rgba(14,165,233,.12) !important;
}
.pinPopup .pin-share-button:hover {
  background:linear-gradient(135deg,rgba(29,78,216,.98),rgba(2,132,199,.96)) !important;
}
.pin-info-share-row {
  display:flex;
  justify-content:flex-start;
  margin:-2px 0 12px;
}
#pinInfoModal .pin-info-share-button {
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  margin:0 !important;
  padding:8px 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid rgba(96,165,250,.28) !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.16)) !important;
  color:#eaf6ff !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#pinInfoModal .pin-info-share-button i {
  color:#60a5fa;
  font-size:12px;
}
#pinInfoModal .pin-info-share-button:hover {
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.5) !important;
  background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(14,165,233,.23)) !important;
}

/* =====================================================================
   Requested post-backup map additions only — 2026-08-17
   ===================================================================== */

/* Wider pin bubble while preserving the backup's existing card styling. */
.park-popup .leaflet-popup-content-wrapper,
.park-popup .leaflet-popup-content,
.park-popup .leaflet-popup-content.leaflet-popup-scrolled{
  max-height:none!important;overflow:visible!important;border-bottom:0!important;
}
.park-popup .leaflet-popup-content{width:100%!important;max-width:none!important}
.park-popup .pinPopup{
  width:min(410px,calc(100vw - 28px))!important;
  min-width:min(300px,calc(100vw - 28px))!important;
  max-width:410px!important;
  max-height:min(720px,calc(100dvh - 132px))!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent;
}
.park-popup .pinPopup::-webkit-scrollbar{width:6px}.park-popup .pinPopup::-webkit-scrollbar-track{background:transparent}.park-popup .pinPopup::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);border-radius:999px}
.park-popup .popupAmenities span{white-space:nowrap}
@media(max-width:480px){.park-popup .pinPopup{width:calc(100vw - 28px)!important;min-width:0!important;max-height:calc(100dvh - 112px)!important}}

/* Activity uses the same information footprint as the other details. */
.popup-activity-info{align-items:flex-start!important;gap:7px!important}
.popup-activity-info>.pinIcon{margin-top:2px!important;flex:0 0 auto!important}
.popup-info-content{min-width:0;flex:1}.popup-info-content>strong{display:block;margin-bottom:4px;font-size:12px;color:#dbeafe}
.activity-meter{min-width:0;width:100%;display:block!important}
.activity-meter-head{display:flex!important;align-items:center!important;justify-content:center!important;margin-bottom:5px!important;color:#e2e8f0!important;font-size:11px!important;font-weight:800!important}
.activity-meter-track{position:relative!important;display:block!important;width:100%!important;height:7px!important;border-radius:999px!important;background:linear-gradient(90deg,#dc2626 0%,#f97316 25%,#eab308 50%,#84cc16 75%,#16a34a 100%)!important;overflow:visible!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}
.activity-meter-marker{position:absolute!important;display:block!important;top:50%!important;width:12px!important;height:12px!important;border-radius:999px!important;background:#fff!important;border:2px solid #0f172a!important;transform:translate(-50%,-50%)!important;box-shadow:0 2px 7px rgba(0,0,0,.42)!important}
.activity-meter-ends{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-top:5px!important;color:#94a3b8!important;font-size:9px!important;line-height:1!important}
.activity-meter-ends span{display:block!important}.activity-meter-ends span:first-child{text-align:left!important}.activity-meter-ends span:last-child{text-align:right!important;margin-left:auto!important}
.activity-meter.compact{max-width:240px!important}.activity-meter.compact .activity-meter-head{font-size:10px!important;margin-bottom:4px!important}.activity-meter.compact .activity-meter-track{height:6px!important}.activity-meter.compact .activity-meter-ends{font-size:8px!important;margin-top:4px!important}

/* More Info keeps the existing grid; each requested entry gets a subtle
   matching accent and icon without spanning across the grid. */
#pinInfoModal .pin-info-grid>.pin-detail-card{border:1px solid color-mix(in srgb,var(--detail-color) 26%,transparent)!important;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--detail-color) 74%,transparent)!important}
#pinInfoModal .pin-detail-card>strong{display:flex!important;align-items:center!important;gap:6px!important;color:color-mix(in srgb,var(--detail-color) 78%,white)!important}
#pinInfoModal .pin-detail-card>strong .pinIcon{margin:0!important;flex:0 0 auto!important}
#pinInfoModal .pin-detail-activity .activity-meter{margin-top:3px;max-width:240px!important}

/* Neighboring countries use the exact same Cruise teardrop silhouette as spot
   pins, with the flag as its icon and an external spot-count badge. */
.cruise-country-marker{overflow:visible!important}
.cruise-country-marker .cruise-country-pin{
  --pin-color:#2563eb;
  position:relative!important;
  width:38px!important;height:38px!important;border-radius:15px 15px 15px 4px!important;
  background:var(--pin-color)!important;box-shadow:0 8px 18px rgba(0,0,0,.38),inset 0 0 0 2px rgba(255,255,255,.22)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transform:rotate(-45deg)!important;overflow:visible!important;
}
.cruise-country-marker .cruise-country-pin>img{width:23px!important;height:16px!important;object-fit:cover!important;border-radius:3px!important;transform:rotate(45deg)!important;box-shadow:0 1px 4px rgba(0,0,0,.35)!important;background:#fff!important}
.cruise-country-marker .cruise-country-count{position:absolute!important;top:-11px!important;right:-13px!important;transform:rotate(45deg)!important;min-width:21px!important;height:21px!important;padding:0 5px!important;border-radius:999px!important;background:#ef4444!important;color:#fff!important;border:2px solid #fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:9px!important;font-weight:900!important;line-height:1!important;box-sizing:border-box!important;box-shadow:0 3px 9px rgba(0,0,0,.35)!important;white-space:nowrap!important}

/* Zoomed-out selected-country groups. */

/* Audit detail owns scrolling while open; background stays fixed. */
html.audit-modal-open,body.audit-modal-open{overflow:hidden!important;overscroll-behavior:none!important}
#auditDetailModal{overscroll-behavior:contain!important;touch-action:pan-y!important}
#auditDetailModal .modal-content,#auditDetailModal .audit-modal-content{overscroll-behavior:contain!important;touch-action:pan-y!important}

/* 2026-08-17: requested map-list stability refinements. */
#pinPanel .map-page-tabs.panelTabs,
#pinPanel .spot-list-title{
  position:sticky!important;
  top:0!important;
  z-index:12!important;
  background:#151a2d!important;
  opacity:1!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#pinPanel .map-page-tabs.panelTabs{box-shadow:0 8px 14px rgba(21,26,45,.94)!important}
#pinPanel .spot-list-title{box-shadow:0 8px 14px rgba(21,26,45,.94)!important}

/* Keep the neighboring-country count beside the flag pin instead of sitting
   on top of it. The pin silhouette itself remains unchanged. */
.cruise-country-marker .cruise-country-count{
  top:9px!important;
  right:-24px!important;
}

/* The backup's legacy `.pin-info-grid div` rule intentionally styled the old
   one-level cards, but the activity meter contains nested divs. Keep those
   nested meter pieces clean so Activity has the same footprint as every other
   More Info card. */
#pinInfoModal .pin-detail-card .activity-meter,
#pinInfoModal .pin-detail-card .activity-meter-head,
#pinInfoModal .pin-detail-card .activity-meter-ends{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
}
#pinInfoModal .pin-detail-card .activity-meter-track{
  padding:0!important;
}


/* =====================================================================
   2026-08-17 latest-source scoped fixes
   ===================================================================== */

/* Spot details: preview and More Info share one compact visual language. */
.activity-meter-ends{display:none!important}
.activity-meter{margin:0!important;min-width:0!important;width:100%!important}
.activity-meter-head{justify-content:flex-start!important;margin:0 0 4px!important;font-size:10px!important;line-height:1.1!important;color:#dbe5f4!important}
.activity-meter-track{height:5px!important}
.activity-meter-marker{width:10px!important;height:10px!important;border-width:2px!important}
.activity-meter.compact{max-width:none!important}.activity-meter.compact .activity-meter-head{font-size:10px!important;margin-bottom:4px!important}.activity-meter.compact .activity-meter-track{height:5px!important}

.park-popup .popup-detail-grid,
#pinInfoModal .pin-info-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  margin:9px 0 0!important;
}
.park-popup .popup-detail-grid .pin-detail-card,
#pinInfoModal .pin-info-grid>.pin-detail-card{
  min-width:0!important;
  min-height:0!important;
  padding:7px 9px!important;
  border-radius:11px!important;
  background:rgba(15,23,42,.55)!important;
  border:1px solid color-mix(in srgb,var(--detail-color) 24%,rgba(148,163,184,.10))!important;
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--detail-color) 70%,transparent)!important;
}
.park-popup .popup-detail-grid .pin-detail-card>strong,
#pinInfoModal .pin-info-grid>.pin-detail-card>strong{
  display:flex!important;align-items:center!important;gap:5px!important;
  margin:0 0 3px!important;font-size:10px!important;line-height:1.15!important;
  color:color-mix(in srgb,var(--detail-color) 78%,white)!important;
}
.park-popup .popup-detail-grid .pin-detail-card>strong .pinIcon,
#pinInfoModal .pin-info-grid>.pin-detail-card>strong .pinIcon{margin:0!important;font-size:10px!important;flex:0 0 auto!important}
.park-popup .popup-detail-grid .pin-detail-card>span,
#pinInfoModal .pin-info-grid>.pin-detail-card>span{
  display:block!important;margin:0!important;color:#e2e8f0!important;font-size:11px!important;line-height:1.3!important;overflow-wrap:anywhere!important;
}
.park-popup .popup-detail-grid .pin-detail-activity .activity-meter,
#pinInfoModal .pin-detail-activity .activity-meter{max-width:none!important;margin:0!important}
@media(max-width:390px){.park-popup .popup-detail-grid,#pinInfoModal .pin-info-grid{grid-template-columns:1fr!important}}

/* Add/Edit facilities: a persistent multi-select dropdown. Selecting an item
   never closes the list, while the stored checkboxes and public tags stay the same. */
#addModal .amenityGrid.amenity-picker-host,
#editModal .amenityGrid.amenity-picker-host{
  display:block!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;
}
.amenity-picker{position:relative;width:100%}
.amenity-picker-toggle{
  width:100%!important;min-height:44px!important;margin:0!important;padding:9px 11px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto 14px!important;align-items:center!important;gap:9px!important;
  border:1px solid rgba(148,163,184,.18)!important;border-radius:12px!important;background:#0f172a!important;color:#f8fafc!important;
  box-shadow:none!important;text-align:left!important;
}
.amenity-picker-title{min-width:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}.amenity-picker-title i{color:#7dbfff}
.amenity-picker-summary{font-size:10px;color:#94a3b8;font-weight:750;white-space:nowrap}.amenity-picker.has-selection .amenity-picker-summary{color:#9ed0ff}
.amenity-picker-chevron{font-size:10px;color:#94a3b8;transition:transform .16s ease}.amenity-picker-toggle[aria-expanded="true"] .amenity-picker-chevron{transform:rotate(180deg)}
.amenity-picker-menu{
  position:absolute;z-index:1000020;left:0;right:0;top:calc(100% + 6px);max-height:min(330px,45dvh);overflow-y:auto;
  padding:7px;border:1px solid rgba(96,165,250,.24);border-radius:13px;background:#11192b;box-shadow:0 18px 46px rgba(0,0,0,.48);
}
.amenity-picker-menu[hidden]{display:none!important}
#addModal .amenityGrid .amenity-picker-option,
#editModal .amenityGrid .amenity-picker-option{
  width:100%!important;min-height:39px!important;margin:0 0 4px!important;padding:8px 9px!important;
  display:grid!important;grid-template-columns:18px 18px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;
  border:1px solid transparent!important;border-radius:10px!important;background:rgba(255,255,255,.025)!important;color:#e2e8f0!important;cursor:pointer!important;
}
#addModal .amenityGrid .amenity-picker-option:last-child,#editModal .amenityGrid .amenity-picker-option:last-child{margin-bottom:0!important}
#addModal .amenityGrid .amenity-picker-option:hover,#editModal .amenityGrid .amenity-picker-option:hover{background:rgba(37,136,230,.10)!important;border-color:rgba(96,165,250,.18)!important}
#addModal .amenityGrid .amenity-picker-option:has(input:checked),#editModal .amenityGrid .amenity-picker-option:has(input:checked){background:rgba(37,136,230,.14)!important;border-color:rgba(96,165,250,.28)!important}
#addModal .amenityGrid .amenity-picker-option input,#editModal .amenityGrid .amenity-picker-option input{margin:0!important}
#addModal .amenityGrid .amenity-picker-option .pinIcon,#editModal .amenityGrid .amenity-picker-option .pinIcon{margin:0!important;width:18px!important;text-align:center!important}
#addModal .amenityGrid .amenity-picker-option span,#editModal .amenityGrid .amenity-picker-option span{min-width:0;font-size:11px;font-weight:700}

/* Pin overview must remain genuinely opaque while its sticky header is moving. */
#pinPanel.sidePanel{background:#151a2d!important;background-image:none!important;isolation:isolate!important}
#pinPanelContent{background:#151a2d!important;min-height:100%!important}
#pinPanel .map-page-tabs.panelTabs,#pinPanel .spot-list-title{
  background:#151a2d!important;background-image:none!important;opacity:1!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(148,163,184,.13)!important;box-shadow:0 8px 14px rgba(21,26,45,.96)!important;
}

/* Neighboring-country count sits beside the flag pin, never above it. */
.cruise-country-marker .cruise-country-count{top:10px!important;right:-27px!important}

/* =====================================================================
   Cruise map UX refresh — 2026-08-17
   Add/Edit Spot, popup, More Info, automatic-country UI and clustering
   ===================================================================== */

/* The shared unread-count runtime appends its badge to the avatar link.
   Keep the circular avatar itself unchanged, but allow the badge to overlap. */
body #app > .map-modern-topbar .modern-avatar-button {
  overflow: visible !important;
}
body #app > .map-modern-topbar .modern-avatar-button #topAvatar {
  border-radius: 999px !important;
  overflow: hidden !important;
}
body.map-page #cruiseAvatarUnreadBadge {
  z-index: 50005 !important;
}

/* ---------- Add/Edit Spot: cleaner editor ---------- */
#addModal .spot-editor-content,
#editModal .spot-editor-content {
  width: min(780px, calc(100vw - 32px)) !important;
  max-width: 780px !important;
}
#addModal .spot-editor-grid,
#editModal .spot-editor-grid {
  gap: 13px !important;
}
#addModal .spot-editor-field,
#editModal .spot-editor-field {
  gap: 6px !important;
}
#addModal .spot-editor-field > label,
#editModal .spot-editor-field > label {
  color: #dbe5f3 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
#addModal #pinType,
#editModal #editPinType {
  display: none !important;
}
#addModal .spot-notes-field textarea,
#editModal .spot-notes-field textarea {
  height: 88px !important;
  min-height: 88px !important;
  max-height: 180px !important;
  resize: vertical !important;
}

/* Single-choice Spot Type dropdown. It deliberately mirrors the facilities
   dropdown proportions, but has no checkboxes because only one type is valid. */
.spot-type-picker {
  position: relative !important;
  width: 100% !important;
}
.spot-type-picker-toggle {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 14px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  text-align: left !important;
}
.spot-type-picker-current {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.spot-type-picker-current > span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.spot-type-picker-chevron {
  color: #94a3b8 !important;
  font-size: 10px !important;
  transition: transform .16s ease !important;
}
.spot-type-picker-toggle[aria-expanded="true"] .spot-type-picker-chevron {
  transform: rotate(180deg) !important;
}
.spot-type-picker-menu {
  position: absolute !important;
  z-index: 1000030 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  max-height: min(350px, 48dvh) !important;
  overflow-y: auto !important;
  padding: 7px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 13px !important;
  background: #11192b !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.48) !important;
}
.spot-type-picker-menu[hidden] { display: none !important; }
.spot-type-picker-option {
  width: 100% !important;
  min-height: 39px !important;
  margin: 0 0 4px !important;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.024) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  text-align: left !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
.spot-type-picker-option:last-child { margin-bottom: 0 !important; }
.spot-type-picker-option:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(148,163,184,.14) !important;
}
.spot-type-picker-option.selected {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(148,163,184,.24) !important;
}
.spot-type-pin-mini {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 8px 8px 8px 3px !important;
  background: var(--pin-color) !important;
  transform: rotate(-45deg) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.26) !important;
}
.spot-type-pin-mini i {
  color: #fff !important;
  font-size: 8px !important;
  transform: rotate(45deg) !important;
}

/* Facilities / warnings: same compact dropdown mechanics, but neutral rather
   than the previous bright-blue selected surface. */
.amenity-picker-toggle {
  border-color: rgba(148,163,184,.18) !important;
  background: #0f172a !important;
}
.amenity-picker-title i { color: #aeb8cc !important; }
.amenity-picker.has-selection .amenity-picker-summary { color: #cbd5e1 !important; }
.amenity-picker-menu {
  border-color: rgba(148,163,184,.22) !important;
  background: #11192b !important;
}
#addModal .amenityGrid .amenity-picker-option:hover,
#editModal .amenityGrid .amenity-picker-option:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(148,163,184,.14) !important;
}
#addModal .amenityGrid .amenity-picker-option:has(input:checked),
#editModal .amenityGrid .amenity-picker-option:has(input:checked) {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(148,163,184,.24) !important;
}

/* Activity editor slider. */
.activity-editor-field { align-self: stretch !important; }
.activity-editor {
  width: 100% !important;
  min-height: 72px !important;
  padding: 9px 11px 8px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 12px !important;
  background: #0f172a !important;
}
.activity-editor-value {
  margin-bottom: 5px !important;
  color: #eaf2ff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: center !important;
}
#addModal input.activity-editor-range,
#editModal input.activity-editor-range {
  --activity-percent: 50%;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}
#addModal input.activity-editor-range::-webkit-slider-runnable-track,
#editModal input.activity-editor-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #334155 0%, #475569 25%, #64748b 50%, #3b82f6 75%, #16a34a 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important;
}
#addModal input.activity-editor-range::-webkit-slider-thumb,
#editModal input.activity-editor-range::-webkit-slider-thumb {
  width: 16px !important;
  height: 16px !important;
  margin-top: -5px !important;
  border: 3px solid #0f172a !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.5) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#addModal input.activity-editor-range::-moz-range-track,
#editModal input.activity-editor-range::-moz-range-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #334155 0%, #475569 25%, #64748b 50%, #3b82f6 75%, #16a34a 100%) !important;
}
#addModal input.activity-editor-range::-moz-range-thumb,
#editModal input.activity-editor-range::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #0f172a !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.5) !important;
}
.activity-editor-scale {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 3px !important;
  color: #7f8ba1 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* ---------- Pin preview + More Info shared visual language ---------- */
.pin-description-block {
  margin: 9px 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 12px !important;
  background: rgba(15,23,42,.62) !important;
}
.pin-description-block.compact { padding: 8px 9px !important; }
.pin-description-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
  color: #9fb0c7 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.pin-description-label i { color: #60a5fa !important; }
.pin-description-block .popupDescription {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #edf4ff !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.pin-quick-facts {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 7px !important;
  margin: 9px 0 0 !important;
}
.pin-quick-card {
  flex: 0 1 auto !important;
  min-width: 118px !important;
  max-width: min(240px,100%) !important;
  padding: 6px 8px !important;
  border: 1px solid color-mix(in srgb,var(--detail-color) 22%,rgba(148,163,184,.10)) !important;
  border-radius: 10px !important;
  background: rgba(15,23,42,.55) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb,var(--detail-color) 66%,transparent) !important;
}
.pin-quick-card > strong {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 3px !important;
  color: color-mix(in srgb,var(--detail-color) 78%,white) !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}
.pin-quick-card > span {
  display: block !important;
  margin: 0 !important;
  color: #e2e8f0 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
.pin-quick-card.pin-detail-activity { width: 150px !important; }
.pin-quick-best-time { max-width: 190px !important; }
.pin-quick-approach { max-width: 180px !important; }

.pin-quick-card .activity-meter { width: 100% !important; margin: 0 !important; }
.pin-quick-card .activity-meter-head { margin: 0 0 3px !important; font-size: 9px !important; }
.pin-quick-card .activity-meter-track { height: 5px !important; }
.pin-quick-card .activity-meter-marker { width: 10px !important; height: 10px !important; }
.pin-quick-card .activity-meter-ends {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  color: #718096 !important;
  font-size: 7.5px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}
.pin-quick-card .activity-meter-ends span:last-child { margin-left: auto !important; }

.park-popup .popup-detail-grid,
#pinInfoModal .pin-info-grid {
  margin-top: 8px !important;
}

/* Popup is intentionally compact even for admins with every action available. */
.park-popup .leaflet-popup-content-wrapper {
  border-radius: 16px !important;
}
.park-popup .leaflet-popup-content {
  width: min(360px, calc(100vw - 42px)) !important;
  margin: 11px !important;
}
.pinPopup .popupTitle {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}
.pinPopup .popupCategory { font-size: 10px !important; }
.pinPopup .popupAmenities { margin-top: 8px !important; }
.pinPopup .popup-footer-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 9px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(148,163,184,.11) !important;
}
.pinPopup .popup-footer-meta .popupUser {
  min-width: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}
.pinPopup .popup-footer-meta .popupUser span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.pin-visit-indicator.compact {
  min-height: 27px !important;
  padding: 5px 8px !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
}
.pin-visit-indicator.compact strong { font-size: 10px !important; }

.popup-action-dock {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin-top: 9px !important;
}
.popup-main-actions {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 39px !important;
  gap: 6px !important;
}
.pinPopup .popup-more-info-button,
.pinPopup .popup-navigate-button,
.pinPopup .popup-mini-action {
  margin: 0 !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.pinPopup .popup-more-info-button {
  min-height: 39px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-color: rgba(96,165,250,.30) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg,#277fdb,#2563eb) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.pinPopup .popup-navigate-button {
  width: 39px !important;
  min-width: 39px !important;
  height: 39px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: rgba(37,99,235,.13) !important;
  color: #93c5fd !important;
}
.popup-mini-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.pinPopup .popup-mini-action {
  width: 33px !important;
  min-width: 33px !important;
  height: 33px !important;
  min-height: 33px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  color: #c7d5e7 !important;
  font-size: 11px !important;
}
.pinPopup .popup-mini-action:hover,
.pinPopup .popup-navigate-button:hover {
  background: rgba(37,136,230,.16) !important;
  border-color: rgba(96,165,250,.28) !important;
  color: #eaf4ff !important;
}
.popup-action-dock.pending { justify-content: flex-end !important; }
.popup-action-dock.pending .popup-mini-actions { order: -1 !important; }
.pinPopup .popupActionsReview { margin-top: 7px !important; }

/* More Info header action and visit placement. */
.pin-info-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
#pinInfoModal .pin-info-share-header {
  color: #93c5fd !important;
}
#pinInfoModal .pin-info-card > .pin-quick-facts .pin-quick-card {
  max-width: 270px !important;
}
#pinInfoModal .pin-info-card > .pin-quick-facts .pin-detail-activity {
  width: 180px !important;
}
#pinInfoModal .pin-info-visit-wrap {
  margin-top: 11px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(56,189,248,.12) !important;
  border-radius: 12px !important;
  background: rgba(14,165,233,.045) !important;
}
#pinInfoModal .pin-info-visit-wrap .pin-visit-row {
  margin: 0 !important;
  justify-content: flex-start !important;
}
#pinInfoModal .pin-info-author {
  margin-top: 10px !important;
  padding-top: 9px !important;
  border-top: 1px solid rgba(148,163,184,.11) !important;
}

/* Help & Legend keeps the same physical gap above and below the card.
   Size the card from the modal's padded content box instead of 100dvh so
   browser viewport rounding cannot consume the bottom gutter. */
#helpModal {
  padding: 12px 24px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}
#helpModal .help-modal-content {
  max-height: 100% !important;
  margin: 0 !important;
}
@media (max-width:700px) {
  #helpModal {
    padding: 12px !important;
  }
  #helpModal .help-modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 100% !important;
  }
}

/* Country presentation: flags in the list and a count badge that overlaps
   roughly half-way onto the neighboring-country pin edge. */
.pin-list-country-flag {
  width: 19px !important;
  height: 13px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.28) !important;
}
.cruise-country-marker .cruise-country-count {
  top: 8px !important;
  right: -10px !important;
}

@media (max-width:520px) {
  .popup-action-dock { flex-wrap: wrap !important; }
  .popup-main-actions { flex: 1 1 185px !important; }
  .popup-mini-actions { margin-left: auto !important; }
  .pin-quick-card { min-width: 108px !important; }
  .pin-quick-card.pin-detail-activity { width: 145px !important; }
}

/* =====================================================================
   2026-08-17 map polish follow-up
   ===================================================================== */

/* Add/Edit spot: modern neutral field language with icons. */
#addModal .spot-editor-content,
#editModal .spot-editor-content {
  width: min(760px, calc(100vw - 28px)) !important;
  max-width: 760px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: linear-gradient(180deg,#1c2235 0%,#151a2b 100%) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.52) !important;
}
#addModal .spot-editor-body,
#editModal .spot-editor-body { padding-top: 4px !important; }
#addModal .spot-editor-grid,
#editModal .spot-editor-grid { gap: 12px 14px !important; }
#addModal .spot-editor-field,
#editModal .spot-editor-field { min-width: 0 !important; }
#addModal .spot-field-label,
#editModal .spot-field-label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  color: #d9e2ef !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
#addModal .spot-field-label > i,
#editModal .spot-field-label > i {
  width: 14px !important;
  color: #8fa0b7 !important;
  text-align: center !important;
  font-size: 10px !important;
}
#addModal .spot-editor-section-heading,
#editModal .spot-editor-section-heading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 2px 0 -5px !important;
  color: #d9e2ef !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}
#addModal .spot-editor-section-heading i,
#editModal .spot-editor-section-heading i { color: #8fa0b7 !important; font-size: 10px !important; }

#addModal input:not([type="range"]):not([type="hidden"]),
#addModal textarea,
#editModal input:not([type="range"]):not([type="hidden"]),
#editModal textarea,
#addModal select,
#editModal select {
  border: 1px solid rgba(148,163,184,.17) !important;
  background: rgba(255,255,255,.045) !important;
  color: #f3f6fb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#addModal input:focus,
#addModal textarea:focus,
#editModal input:focus,
#editModal textarea:focus {
  border-color: rgba(96,165,250,.45) !important;
  outline: 2px solid rgba(37,99,235,.16) !important;
}

/* Spot Type and Facilities deliberately stay neutral; only the actual pin or
   facility icon carries color. */
#addModal .spot-type-picker-toggle,
#editModal .spot-type-picker-toggle,
#addModal .amenity-picker-toggle,
#editModal .amenity-picker-toggle {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(148,163,184,.17) !important;
  color: #eef3f9 !important;
}
#addModal .spot-type-picker-toggle:hover,
#editModal .spot-type-picker-toggle:hover,
#addModal .amenity-picker-toggle:hover,
#editModal .amenity-picker-toggle:hover {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(148,163,184,.27) !important;
}
#addModal .spot-type-picker-menu,
#editModal .spot-type-picker-menu,
#addModal .amenity-picker-menu,
#editModal .amenity-picker-menu {
  background: #202638 !important;
  border-color: rgba(148,163,184,.18) !important;
}
#addModal .spot-type-picker-option,
#editModal .spot-type-picker-option,
#addModal .amenity-picker-option,
#editModal .amenity-picker-option {
  background: transparent !important;
  border-color: transparent !important;
  color: #e8edf5 !important;
}
#addModal .spot-type-picker-option:hover,
#editModal .spot-type-picker-option:hover,
#addModal .amenity-picker-option:hover,
#editModal .amenity-picker-option:hover,
#addModal .spot-type-picker-option.selected,
#editModal .spot-type-picker-option.selected,
#addModal .amenity-picker-option:has(input:checked),
#editModal .amenity-picker-option:has(input:checked) {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(148,163,184,.14) !important;
}
#addModal .amenity-picker-title i,
#editModal .amenity-picker-title i,
#addModal .amenity-picker-chevron,
#editModal .amenity-picker-chevron,
#addModal .amenity-picker-summary,
#editModal .amenity-picker-summary { color: #aeb8c7 !important; }

/* Activity now uses the same neutral surface as the surrounding fields. */
#addModal .activity-editor,
#editModal .activity-editor {
  min-height: 72px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(148,163,184,.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
#addModal .activity-editor-value,
#editModal .activity-editor-value { color: #e8edf5 !important; }

/* Popup visit data is one quiet summary strip rather than three competing cards. */
.pin-visit-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 9px 0 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.025) !important;
}
.pin-visit-fact {
  flex: 1 1 115px !important;
  min-width: 105px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-right: 1px solid rgba(148,163,184,.11) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pin-visit-fact:last-child { border-right: 0 !important; }
.pin-visit-fact > strong {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 3px !important;
  color: #aab6c8 !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
}
.pin-visit-fact > strong .pinIcon { margin: 0 !important; font-size: 9px !important; }
.pin-visit-fact > span {
  display: block !important;
  color: #edf2f8 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
.pin-visit-activity { min-width: 135px !important; }
.pin-visit-activity .activity-meter-head { color: #edf2f8 !important; }
.pin-visit-activity .activity-meter-ends {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  color: #7f8ca0 !important;
  font-size: 7.5px !important;
}

/* Access can grow naturally with its content, up to the full available width. */
.park-popup .popup-detail-grid,
#pinInfoModal .pin-info-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 7px !important;
}
.park-popup .popup-detail-grid .pin-detail-card,
#pinInfoModal .pin-info-grid > .pin-detail-card {
  flex: 0 1 auto !important;
  width: fit-content !important;
  min-width: 125px !important;
  max-width: 100% !important;
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(148,163,184,.13) !important;
  box-shadow: none !important;
}
.park-popup .popup-detail-grid .pin-detail-access,
#pinInfoModal .pin-info-grid > .pin-detail-access {
  flex: 0 1 auto !important;
  width: fit-content !important;
  min-width: min(160px,100%) !important;
  max-width: 100% !important;
}
.park-popup .popup-detail-grid .pin-detail-access > span,
#pinInfoModal .pin-info-grid > .pin-detail-access > span {
  display: block !important;
  max-width: 46ch !important;
  white-space: normal !important;
}

/* Small attached-image preview in the first popup. */
.popup-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 9px !important;
}
.popup-title-copy { min-width: 0 !important; flex: 1 1 auto !important; }
.popup-image-preview {
  position: relative !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 62px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 8px !important;
  background: #0f1422 !important;
  box-shadow: none !important;
}
.popup-image-preview img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 62px !important;
  max-height: 46px !important;
  object-fit: contain !important;
}
.popup-image-more {
  position: absolute !important;
  right: 3px !important;
  bottom: 3px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.90) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
}

/* More Info images preserve the original aspect ratio while remaining thumbnail-sized. */
#pinInfoModal .spot-image-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#pinInfoModal .spot-image-card {
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  max-height: 120px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f1422 !important;
}
#pinInfoModal .spot-image-card img {
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  max-height: 120px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
#pinInfoModal .pin-info-share-header,
#pinInfoModal .pin-info-share-header i { color: #fff !important; }

/* Popup width stays compact on phones and is horizontally centered by the map. */
.park-popup .leaflet-popup-content {
  width: min(340px, calc(100vw - 36px)) !important;
  max-width: min(340px, calc(100vw - 36px)) !important;
  margin: 0 !important;
}
.park-popup .pinPopup {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 340px !important;
  box-sizing: border-box !important;
}
@media(max-width:480px) {
  .park-popup .leaflet-popup-content {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }
  .park-popup .pinPopup {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 122px) !important;
    padding: 12px !important;
  }
  .pin-visit-fact { flex-basis: 50% !important; min-width: 0 !important; }
  .pin-visit-fact:nth-child(2n) { border-right: 0 !important; }
}

/* Restore a connected speech-bubble tail under the custom dark popup card. */
.park-popup .leaflet-popup-tip-container {
  width: 34px !important;
  height: 20px !important;
  margin: -1px auto 0 !important;
  overflow: visible !important;
}
.park-popup .leaflet-popup-tip {
  width: 18px !important;
  height: 18px !important;
  margin: -10px auto 0 !important;
  background: #121827 !important;
  border-right: 1px solid rgba(148,163,184,.16) !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}

/* More Info remains the only large CTA. Navigate now matches Share/Report/Edit. */
.popup-action-dock {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.pinPopup .popup-more-info-button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
}
.popup-mini-actions,
.popup-review-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
}
.pinPopup .popup-mini-action,
.pinPopup .popup-navigate-button,
.pinPopup .popup-review-action {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-self: auto !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  color: #c9d4e4 !important;
  box-shadow: none !important;
}
.pinPopup .popup-navigate-button:hover,
.pinPopup .popup-mini-action:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.popup-review-actions { justify-content: flex-end !important; margin-top: 8px !important; }
.pinPopup .popup-review-action.approve { color: #86efac !important; border-color: rgba(34,197,94,.24) !important; }
.pinPopup .popup-review-action.reject { color: #fca5a5 !important; border-color: rgba(239,68,68,.24) !important; }
.pinPopup .popup-review-action.approve:hover { background: rgba(34,197,94,.12) !important; }
.pinPopup .popup-review-action.reject:hover { background: rgba(239,68,68,.12) !important; }

/* Country-summary marker sizing. */
.cruise-country-marker .cruise-country-pin {
  width: 46px !important;
  height: 46px !important;
  border-radius: 18px 18px 18px 5px !important;
}
.cruise-country-marker .cruise-country-count {
  top: -9px !important;
  right: -9px !important;
  min-width: 23px !important;
  height: 23px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  border: 2px solid #fff !important;
}
.cruise-country-marker .cruise-country-count { background: #ef4444 !important; color: #fff !important; }

/* =====================================================================
   Cruise map refinement — smooth map movement + compact editor/popup
   ===================================================================== */

/* Add/Edit body gets breathing room below its sticky/header bar. */
#addModal .spot-editor-body,
#editModal .spot-editor-body {
  padding-top: 15px !important;
}

/* Field-label icons are deliberately color-coded for quicker recognition. */
#addModal .spot-field-label > i,
#editModal .spot-field-label > i,
#addModal .spot-editor-section-heading > i,
#editModal .spot-editor-section-heading > i { width: 16px !important; text-align: center !important; }
#addModal .spot-field-label .fa-heading,#editModal .spot-field-label .fa-heading { color:#60a5fa !important; }
#addModal .spot-field-label .fa-location-dot,#editModal .spot-field-label .fa-location-dot { color:#f87171 !important; }
#addModal .spot-field-label .fa-align-left,#editModal .spot-field-label .fa-align-left { color:#a78bfa !important; }
#addModal .spot-editor-section-heading .fa-list-check,#editModal .spot-editor-section-heading .fa-list-check { color:#2dd4bf !important; }
#addModal .spot-field-label .fa-clock,#editModal .spot-field-label .fa-clock { color:#fbbf24 !important; }
#addModal .spot-field-label .fa-chart-simple,#editModal .spot-field-label .fa-chart-simple { color:#4ade80 !important; }
#addModal .spot-field-label .fa-person-walking,#editModal .spot-field-label .fa-person-walking { color:#818cf8 !important; }
#addModal .spot-field-label .fa-road,#editModal .spot-field-label .fa-road { color:#38bdf8 !important; }
#addModal .spot-field-label .fa-layer-group,#editModal .spot-field-label .fa-layer-group { color:#c084fc !important; }
#addModal .spot-field-label .fa-note-sticky,#editModal .spot-field-label .fa-note-sticky { color:#facc15 !important; }
#addModal .spot-field-label .fa-image,#editModal .spot-field-label .fa-image { color:#fb7185 !important; }

/* Spot type and Facilities use one neutral dropdown language: no blue field
   glow, no blue selected entry, no focus halo. Colored pin/facility icons stay. */
#addModal .spot-type-picker-toggle,
#editModal .spot-type-picker-toggle,
#addModal .amenity-picker-toggle,
#editModal .amenity-picker-toggle,
#addModal .spot-type-picker-menu,
#editModal .spot-type-picker-menu,
#addModal .amenity-picker-menu,
#editModal .amenity-picker-menu,
#addModal .spot-type-picker-option,
#editModal .spot-type-picker-option,
#addModal .amenity-picker-option,
#editModal .amenity-picker-option {
  box-shadow: none !important;
  outline: none !important;
}
#addModal .spot-type-picker-toggle,
#editModal .spot-type-picker-toggle,
#addModal .amenity-picker-toggle,
#editModal .amenity-picker-toggle {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(148,163,184,.17) !important;
}
#addModal .spot-type-picker-toggle:hover,
#editModal .spot-type-picker-toggle:hover,
#addModal .amenity-picker-toggle:hover,
#editModal .amenity-picker-toggle:hover,
#addModal .spot-type-picker-toggle:focus,
#editModal .spot-type-picker-toggle:focus,
#addModal .amenity-picker-toggle:focus,
#editModal .amenity-picker-toggle:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.23) !important;
  box-shadow: none !important;
  outline: none !important;
}
#addModal .spot-type-picker-menu,
#editModal .spot-type-picker-menu,
#addModal .amenity-picker-menu,
#editModal .amenity-picker-menu { background:#171d2d !important; border-color:rgba(148,163,184,.16) !important; }
#addModal .spot-type-picker-option,
#editModal .spot-type-picker-option,
#addModal .amenity-picker-option,
#editModal .amenity-picker-option { background:transparent !important; border-color:transparent !important; }
#addModal .spot-type-picker-option:hover,
#editModal .spot-type-picker-option:hover,
#addModal .amenity-picker-option:hover,
#editModal .amenity-picker-option:hover { background:rgba(255,255,255,.055) !important; border-color:rgba(148,163,184,.11) !important; }
#addModal .spot-type-picker-option.selected,
#editModal .spot-type-picker-option.selected,
#addModal .amenity-picker-option:has(input:checked),
#editModal .amenity-picker-option:has(input:checked) { background:rgba(255,255,255,.075) !important; border-color:rgba(148,163,184,.16) !important; box-shadow:none !important; }

/* Facilities toggle shows the currently selected facility icons instead of
   repeating the word Facilities, which is already the section title. */
.amenity-picker-toggle {
  grid-template-columns:minmax(0,1fr) auto 14px !important;
}
.amenity-picker-selected-icons {
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  overflow:hidden !important;
}
.amenity-picker-selected-icon {
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(148,163,184,.11) !important;
}
.amenity-picker-selected-icon .pinIcon { margin:0 !important; font-size:11px !important; }
.amenity-picker-empty { color:#8e9bae !important; font-size:11px !important; font-weight:700 !important; }
.amenity-picker-summary { color:#8e9bae !important; font-size:9px !important; }
.amenity-picker.has-selection .amenity-picker-summary { color:#b6c0cf !important; }

/* Activity occupies its own row and is intentionally short/tight. */
#addModal .activity-editor-field,
#editModal .activity-editor-field { grid-column:1 / -1 !important; }
#addModal .activity-editor,
#editModal .activity-editor {
  min-height: 58px !important;
  padding: 6px 10px 5px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(148,163,184,.17) !important;
  box-shadow:none !important;
}
#addModal .activity-editor-value,
#editModal .activity-editor-value { margin-bottom:1px !important; font-size:10px !important; line-height:1.05 !important; }
#addModal input.activity-editor-range,
#editModal input.activity-editor-range { height:15px !important; }
.activity-editor-scale { margin-top:0 !important; font-size:8px !important; line-height:1 !important; }

/* Map popup always outranks Leaflet controls/FABs but remains below real modals. */
.leaflet-popup-pane { z-index: 950000 !important; }
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom,
.fabLocateBtn,
.fabMapBtn,
#locateBtn,
#mapTypeBtn { z-index: 100 !important; }
.modal { z-index:1000000 !important; }
#pinInfoModal,#addModal,#editModal,#helpModal,#issueModal { z-index:1000001 !important; }

/* Compact popup width, centered speech-bubble tail and safe mobile height. */
.park-popup .leaflet-popup-content-wrapper { overflow:visible !important; }
.park-popup .leaflet-popup-content {
  width:min(326px,calc(100vw - 40px)) !important;
  max-width:min(326px,calc(100vw - 40px)) !important;
}
.park-popup .pinPopup { width:100% !important; max-width:326px !important; }
.park-popup .leaflet-popup-tip-container {
  width:36px !important;
  height:18px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}
.park-popup .leaflet-popup-tip {
  width:18px !important;
  height:18px !important;
  margin:-10px auto 0 !important;
  background:#121827 !important;
  border-right:1px solid rgba(148,163,184,.16) !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
  box-shadow:none !important;
  transform:rotate(45deg) !important;
}

/* More Info stays the single large CTA; Navigate is compact and uses the same
   site-blue action surface rather than looking like a different control. */
.pinPopup .popup-more-info-button { height:35px !important; min-height:35px !important; }
.pinPopup .popup-navigate-button {
  width:35px !important;
  min-width:35px !important;
  height:35px !important;
  min-height:35px !important;
  background:#2563eb !important;
  border-color:rgba(96,165,250,.42) !important;
  color:#fff !important;
}
.pinPopup .popup-navigate-button:hover { background:#1d4ed8 !important; color:#fff !important; }
.pinPopup .popup-review-action { width:35px !important; min-width:35px !important; height:35px !important; min-height:35px !important; }

/* More Info header now owns the pin identity and all secondary actions. */
#pinInfoModal .pin-info-main-header { gap:10px !important; }
#pinInfoModal .pin-info-header-title {
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
#pinInfoModal .pin-info-header-title h2 {
  min-width:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:left !important;
}
#pinInfoModal .pin-info-header-pin {
  --pin-color:#2563eb;
  width:27px !important;
  height:27px !important;
  flex:0 0 27px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px 10px 10px 4px !important;
  background:var(--pin-color) !important;
  transform:rotate(-45deg) !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.66) !important;
}
#pinInfoModal .pin-info-header-pin i { color:#fff !important; font-size:10px !important; transform:rotate(45deg) !important; }
#pinInfoModal .pin-info-header-actions { flex:0 0 auto !important; gap:5px !important; }
#pinInfoModal .pin-info-header-tool,
#pinInfoModal .pin-info-header-tool i,
#pinInfoModal .pin-info-share-header,
#pinInfoModal .pin-info-share-header i { color:#fff !important; }
#pinInfoModal .pin-info-header-tool { background:rgba(255,255,255,.055) !important; box-shadow:none !important; }
#pinInfoModal .pin-info-card { padding-top:2px !important; }

/* Count badges overlap the upper-right edge like the unread-message avatar
   badge: roughly half on the marker, half outside, never centered above it. */
.cruise-country-marker .cruise-country-count {
  top:5px !important;
  right:-10px !important;
}

@media (max-width:640px) {
  /* Equal horizontal gutters, less width, and enough vertical room to retain
     the pin under the bubble. */
  .park-popup .leaflet-popup-content {
    width:min(312px,calc(100vw - 44px)) !important;
    max-width:min(312px,calc(100vw - 44px)) !important;
  }
  .park-popup .pinPopup {
    max-width:312px !important;
    max-height:min(520px,calc(100dvh - 190px)) !important;
    padding:11px !important;
    overflow-y:auto !important;
  }
  /* Long secondary notes do not make the first popup tower over the pin. */
  .park-popup .popup-detail-grid .pin-detail-access > span,
  .park-popup .popup-detail-grid .pin-detail-terrain > span,
  .park-popup .popup-detail-grid .pin-detail-notes > span {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-height:2.7em !important;
  }
  .park-popup .pin-visit-summary { margin-top:7px !important; }
  .park-popup .pin-visit-fact { padding:6px 7px !important; }
  .park-popup .pin-description-block.compact { margin:7px 0 !important; }
  #pinInfoModal .pin-info-main-header { padding-left:12px !important; padding-right:12px !important; }
  #pinInfoModal .pin-info-header-title { gap:7px !important; }
  #pinInfoModal .pin-info-header-title h2 { font-size:16px !important; }
  #pinInfoModal .pin-info-header-actions { gap:3px !important; }
  #pinInfoModal .pin-info-header-actions .pin-info-close { width:32px !important; height:32px !important; min-width:32px !important; }
}

@media (max-height:670px) and (max-width:640px) {
  .park-popup .pinPopup { max-height:calc(100dvh - 205px) !important; font-size:96% !important; }
  .park-popup .popupDescription { -webkit-line-clamp:3 !important; }
}

/* Final alignment corrections for the speech-bubble tail and long modal title. */
.park-popup .leaflet-popup-tip-container {
  left:50% !important;
  margin-left:-18px !important;
  transform:none !important;
}
@media (max-width:640px) {
  #pinInfoModal .pin-info-header-title h2 {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.15 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
  }
}

/* =========================================================
   Cluster drill-down + Facilities dropdown finishing pass
   ========================================================= */

/* Give the long Facilities menu a visually complete bottom edge. The final
   option always has dark breathing room below it instead of ending flush at
   the scroll boundary. */
#addModal .amenity-picker-menu,
#editModal .amenity-picker-menu {
  box-sizing: border-box !important;
  max-height: min(340px, 46dvh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding: 7px 7px 13px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-bottom-color: rgba(148,163,184,.26) !important;
  border-radius: 13px !important;
  background: #171d2d !important;
  background-clip: padding-box !important;
}
#addModal .amenity-picker-menu::after,
#editModal .amenity-picker-menu::after {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  pointer-events: none;
}
#addModal .amenity-picker-option:last-of-type,
#editModal .amenity-picker-option:last-of-type {
  margin-bottom: 2px !important;
}

/* =========================================================
   Clusterless viewport map + deterministic popup placement
   ========================================================= */

/* The JS reserves this exact vertical envelope before a popup is opened.
   Keeping the popup scrollable inside that envelope guarantees that both the
   complete pin and popup remain on-screen without Leaflet auto-panning. */
.park-popup .pinPopup {
    max-height: var(--cruise-popup-safe-height, 520px) !important;
    overflow-y: auto !important;
}

/* The map now renders real spot markers only. Old cluster styling is retained
   nowhere in the active marker path; country summaries remain the sole count
   marker at European overview zoom. */

/* Match the closed Spot Type and Facilities controls to the same subtle
   light-gray field stroke used by the regular Add/Edit text inputs. */
#addModal .spot-type-picker-toggle[aria-expanded="false"],
#editModal .spot-type-picker-toggle[aria-expanded="false"],
#addModal .amenity-picker-toggle[aria-expanded="false"],
#editModal .amenity-picker-toggle[aria-expanded="false"] {
    border: 1px solid rgba(148,163,184,.17) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* =========================================================
   Country/detail refinement + venue fields + dropdown scroll polish
   ========================================================= */

/* Cruising Bar exposes venue-specific fields as one compact editor group. */
#addModal .spot-editor-custom-grid,
#editModal .spot-editor-custom-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
  padding: 12px !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
}
#addModal .spot-editor-custom-grid[hidden],
#editModal .spot-editor-custom-grid[hidden],
#addModal #pinApproachField[hidden],
#editModal #editApproachField[hidden],
#addModal #pinTerrainField[hidden],
#editModal #editTerrainField[hidden] { display:none !important; }
@media (max-width:700px) {
  #addModal .spot-editor-custom-grid,
  #editModal .spot-editor-custom-grid { grid-template-columns:1fr !important; }
}

/* Venue links stay readable inside the compact map cards. */
.park-popup .pin-venue-detail-grid a,
#pinInfoModal .pin-venue-detail-grid a {
  color:#93c5fd !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
.park-popup .pin-venue-detail-grid a:hover,
#pinInfoModal .pin-venue-detail-grid a:hover { text-decoration:underline !important; }

/* Keep both custom dropdown scrollbars entirely inside their rounded field.
   The track is inset vertically and the thumb is narrow/soft like the site. */
#addModal .spot-type-picker-menu,
#editModal .spot-type-picker-menu,
#addModal .amenity-picker-menu,
#editModal .amenity-picker-menu {
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(148,163,184,.50) transparent !important;
  scrollbar-gutter:stable !important;
  background-clip:padding-box !important;
  clip-path:inset(0 round 12px) !important;
}
#addModal .spot-type-picker-menu::-webkit-scrollbar,
#editModal .spot-type-picker-menu::-webkit-scrollbar,
#addModal .amenity-picker-menu::-webkit-scrollbar,
#editModal .amenity-picker-menu::-webkit-scrollbar { width:7px !important; }
#addModal .spot-type-picker-menu::-webkit-scrollbar-track,
#editModal .spot-type-picker-menu::-webkit-scrollbar-track,
#addModal .amenity-picker-menu::-webkit-scrollbar-track,
#editModal .amenity-picker-menu::-webkit-scrollbar-track {
  background:transparent !important;
  margin:8px 0 !important;
}
#addModal .spot-type-picker-menu::-webkit-scrollbar-thumb,
#editModal .spot-type-picker-menu::-webkit-scrollbar-thumb,
#addModal .amenity-picker-menu::-webkit-scrollbar-thumb,
#editModal .amenity-picker-menu::-webkit-scrollbar-thumb {
  min-height:28px !important;
  border:2px solid transparent !important;
  border-radius:999px !important;
  background:rgba(148,163,184,.52) !important;
  background-clip:padding-box !important;
}
#addModal .spot-type-picker-menu::-webkit-scrollbar-thumb:hover,
#editModal .spot-type-picker-menu::-webkit-scrollbar-thumb:hover,
#addModal .amenity-picker-menu::-webkit-scrollbar-thumb:hover,
#editModal .amenity-picker-menu::-webkit-scrollbar-thumb:hover {
  background:rgba(203,213,225,.68) !important;
  background-clip:padding-box !important;
}

/* The popup JS now measures the natural card height before map travel. It can
   consume the unused space below the marker instead of forcing early scrolling. */
.park-popup .pinPopup {
  max-height:var(--cruise-popup-safe-height, 640px) !important;
  overflow-y:auto !important;
}

/* =========================================================
   Dynamic country handoff + balanced popup/image/header pass
   ========================================================= */
.park-popup .pinPopup {
  max-height: var(--cruise-popup-safe-height, 640px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
@media (max-width:640px), (max-height:670px) {
  .park-popup .pinPopup { max-height: var(--cruise-popup-safe-height, 520px) !important; }
}

.image-viewer-modal {
  padding: 18px !important;
  align-items: center !important;
  justify-content: center !important;
}
.image-viewer-card {
  width: min(1420px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 18px !important;
  background: #171d2d !important;
  box-shadow: 0 26px 90px rgba(0,0,0,.72) !important;
}
.image-viewer-header {
  flex: 0 0 auto !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(148,163,184,.16) !important;
  background: linear-gradient(180deg,rgba(31,39,61,.98),rgba(23,29,45,.98)) !important;
}
.image-viewer-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.image-viewer-title h2 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 15px !important;
}
.image-viewer-body {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 12px !important;
  overflow: auto !important;
  background: #0d1220 !important;
}
.image-viewer-modal .image-viewer-body img {
  max-width: 100% !important;
  max-height: calc(100dvh - 126px) !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(203,213,225,.24) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.58) !important;
  cursor: default !important;
}
.image-viewer-modal .image-viewer-close {
  position: static !important;
  inset: auto !important;
  flex: 0 0 38px !important;
}
@media (max-width:640px) {
  .image-viewer-modal { padding: 10px !important; }
  .image-viewer-card {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }
  .image-viewer-modal .image-viewer-body img { max-height: calc(100dvh - 108px) !important; }
}

#pinInfoModal .pin-info-header-actions .pin-info-close {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
}
#pinInfoModal .pin-info-overflow-wrap {
  position: relative !important;
  display: none !important;
  flex: 0 0 auto !important;
}
#pinInfoModal .pin-info-header-more { display: none !important; }
#pinInfoModal .pin-info-main-header.pin-info-actions-overflow .pin-info-header-tool { display: none !important; }
#pinInfoModal .pin-info-main-header.pin-info-actions-overflow .pin-info-overflow-wrap { display: block !important; }
#pinInfoModal .pin-info-main-header.pin-info-actions-overflow .pin-info-header-more { display: grid !important; }
#pinInfoModal .pin-info-header-menu {
  position: absolute !important;
  z-index: 8 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 168px !important;
  padding: 6px !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 12px !important;
  background: #171d2d !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.42) !important;
}
#pinInfoModal .pin-info-header-menu[hidden] { display: none !important; }
#pinInfoModal .pin-info-header-menu button {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #e5edf8 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-align: left !important;
}
#pinInfoModal .pin-info-header-menu button:hover { background: rgba(37,136,230,.14) !important; }
#pinInfoModal .pin-info-header-menu button + button { margin-top: 2px !important; }
@media (max-width:640px) {
  #pinInfoModal .pin-info-header-actions .pin-info-close {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}
#pinInfoModal .pin-info-header-menu button[hidden] { display:none !important; }

/* =========================================================
   Compact popup summary + strict permission/FAB finishing pass
   ========================================================= */

/* The first map popup is a compact summary, not a second More Info modal.
   JS decides whether scrolling is genuinely unavoidable after measuring the
   compact content. In the normal case the bubble has no internal scrollbar. */
.park-popup .pinPopup {
  max-height: var(--cruise-popup-safe-height, 640px) !important;
  overflow-x: hidden !important;
  overflow-y: var(--cruise-popup-overflow-y, hidden) !important;
  overscroll-behavior: contain !important;
}

/* Keep long prose useful in the first popup without allowing a deliberately
   overfilled test spot to turn the bubble into a page. The complete text is
   still available in More Info. */
.park-popup .pin-description-block.compact .popupDescription {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width:640px), (max-height:700px) {
  .park-popup .pin-description-block.compact .popupDescription {
    -webkit-line-clamp: 2 !important;
  }
}

/* Facilities are capped in the map bubble. A final compact chip tells the
   user exactly how many additional facilities are available in More Info. */
.park-popup .popupAmenitiesCompact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
}
.park-popup .popup-summary-more {
  width: auto !important;
  min-width: 0 !important;
  min-height: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 1px dashed rgba(148,163,184,.28) !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.07) !important;
  box-shadow: none !important;
  color: #b8c5d6 !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.park-popup .popup-summary-more:hover {
  background: rgba(37,136,230,.14) !important;
  border-color: rgba(96,165,250,.38) !important;
  color: #dbeafe !important;
}
.park-popup .popup-detail-grid > .popup-summary-more {
  flex: 1 1 100% !important;
  width: 100% !important;
  height: 27px !important;
  min-height: 27px !important;
}

/* Long-form descriptive fields get the whole available row. Smaller factual
   cards can still share a row; if only one factual card exists it expands. */
.park-popup .popup-detail-grid > .pin-detail-access,
.park-popup .popup-detail-grid > .pin-detail-terrain,
.park-popup .popup-detail-grid > .pin-detail-notes,
#pinInfoModal .pin-info-grid > .pin-detail-access,
#pinInfoModal .pin-info-grid > .pin-detail-terrain,
#pinInfoModal .pin-info-grid > .pin-detail-notes {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
#pinInfoModal .pin-info-grid > .pin-detail-card {
  flex-grow: 1 !important;
}
#pinInfoModal .pin-info-grid > .pin-detail-card:only-child {
  flex: 1 1 100% !important;
  width: 100% !important;
}
.park-popup .popup-detail-grid > .pin-detail-access > span,
.park-popup .popup-detail-grid > .pin-detail-terrain > span,
.park-popup .popup-detail-grid > .pin-detail-notes > span,
#pinInfoModal .pin-info-grid > .pin-detail-access > span,
#pinInfoModal .pin-info-grid > .pin-detail-terrain > span,
#pinInfoModal .pin-info-grid > .pin-detail-notes > span {
  max-width: none !important;
  width: 100% !important;
}

/* These controls now live inside #map so they share Leaflet's stacking
   context: above spot markers (pane 1000), below the popup pane (3000+). */
#map > .fabLocateBtn,
#map > .fabMapBtn,
#map > #locateBtn,
#map > #mapTypeBtn {
  z-index: 2000 !important;
}

/* Privileged More Info actions are hidden at markup level and JS only removes
   hidden after a permission/session check for the loaded spot. */
#pinInfoEditHeader[hidden],
#pinInfoReportHeader[hidden],
#pinInfoEditMenu[hidden],
#pinInfoReportMenu[hidden] {
  display: none !important;
}

/* =========================================================
   Popup facility overflow polish + popup-only full-width prose
   ========================================================= */

/* The +N Facilities overflow item is intentionally styled exactly like the
   facility pills around it. No fixed height or mobile override: this keeps
   every item in every wrapped row the same natural height. */
.park-popup .popup-facility-more {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(96,165,250,.17) !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.09) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #dbeafe !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  white-space: nowrap !important;
}
.park-popup .popup-facility-more:hover {
  border-color: rgba(96,165,250,.22) !important;
  background: rgba(37,99,235,.12) !important;
  color: #dbeafe !important;
}

/* Access, Terrain and Notes are long-form popup information and must always
   occupy an entire row in the MAP POPUP itself. This final rule intentionally
   outranks the older fit-content card rules. */
.park-popup .pinPopup .popup-detail-grid > .pin-detail-access,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-terrain,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-notes {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.park-popup .pinPopup .popup-detail-grid > .pin-detail-access > span,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-terrain > span,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-notes > span {
  width: 100% !important;
  max-width: none !important;
  white-space: normal !important;
}

/* In the first map popup, Facilities are the ONLY information that may be
   collapsed. All normal prose/details remain complete; if the entire popup is
   genuinely too tall, the popup's viewport-safe scrolling handles it. */
.park-popup .pinPopup .pin-description-block.compact .popupDescription {
  display: block !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.park-popup .pinPopup .popup-detail-grid > .pin-detail-access > span,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-terrain > span,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-notes > span {
  display: block !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}


/* =========================================================
   Compact popup section labels
   ========================================================= */
.park-popup .pinPopup .popup-section {
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}
.park-popup .pinPopup .popup-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  color: rgba(226,232,240,.72);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.park-popup .pinPopup .popup-section-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(148,163,184,.13);
}
.park-popup .pinPopup .popup-section .popupAmenities,
.park-popup .pinPopup .popup-section .pin-info-grid,
.park-popup .pinPopup .popup-section .pin-visit-summary {
  margin-top: 0 !important;
}
.park-popup .pinPopup .popup-details-section {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .park-popup .pinPopup .popup-section {
    margin-top: 8px;
  }
  .park-popup .pinPopup .popup-section-heading {
    margin-bottom: 6px;
    font-size: 9.5px;
  }
}


/* =========================================================
   Popup vs. floating-map-controls stacking safeguard
   =========================================================
   Leaflet/iOS can place transformed panes in separate stacking contexts, so
   z-index alone is not a reliable guarantee. cruise.js marks a control only
   when its on-screen rectangle intersects the open pin popup. The control is
   then visually removed until the overlap is gone; non-overlapping controls
   remain visible and usable. */
#map .fabLocateBtn.popup-control-occluded,
#map .fabMapBtn.popup-control-occluded,
#map #locateBtn.popup-control-occluded,
#map #mapTypeBtn.popup-control-occluded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   Popup dividers + More Info section headings
   ========================================================= */

/* The compact map popup uses separators only. Section names belong in the
   full More Info modal, not in the speech bubble. */
.park-popup .pinPopup .popup-section {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148,163,184,.20) !important;
}
.park-popup .pinPopup .popup-section-heading {
  display: none !important;
}
.park-popup .pinPopup .popup-section .popupAmenities,
.park-popup .pinPopup .popup-section .pin-info-grid,
.park-popup .pinPopup .popup-section .pin-visit-summary {
  margin-top: 0 !important;
}

/* Give every compact-popup information box the same physical separation.
   Activity remains first/left-most, then Best Time, then Approach. */
.park-popup .pinPopup .pin-visit-summary {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.park-popup .pinPopup .pin-visit-fact {
  min-width: 0 !important;
  width: 100% !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 11px !important;
  background: rgba(15,23,42,.55) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.park-popup .pinPopup .popup-detail-grid,
.park-popup .pinPopup .pin-venue-detail-grid {
  gap: 7px !important;
  margin-top: 7px !important;
}
.park-popup .pinPopup .popup-details-section > .pin-info-grid:first-child,
.park-popup .pinPopup .popup-details-section > .pin-visit-summary:first-child {
  margin-top: 0 !important;
}
.park-popup .pinPopup .popup-detail-grid > .pin-detail-card {
  margin: 0 !important;
}

/* Access, Terrain and Notes are full-width rows in the map popup and use the
   same 7px vertical rhythm as every other detail box. */
.park-popup .pinPopup .popup-detail-grid > .pin-detail-access,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-terrain,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-notes {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Full More Info modal: visible, larger section headings for scanning. */
#pinInfoModal .pin-info-section {
  width: 100% !important;
  margin-top: 18px !important;
}
#pinInfoModal .pin-info-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  color: #f1f5f9 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
}
#pinInfoModal .pin-info-section-title::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(148,163,184,.18) !important;
}
#pinInfoModal .pin-info-section > .popupAmenities,
#pinInfoModal .pin-info-section > .pin-info-grid,
#pinInfoModal .pin-info-section > .pin-visit-summary {
  margin-top: 0 !important;
}
#pinInfoModal .pin-info-details-section > .pin-info-grid + .pin-visit-summary,
#pinInfoModal .pin-info-details-section > .pin-visit-summary + .pin-info-grid,
#pinInfoModal .pin-info-details-section > .pin-info-grid + .pin-info-grid {
  margin-top: 8px !important;
}

@media (max-width: 640px) {
  .park-popup .pinPopup .popup-section {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top-color: rgba(148,163,184,.24) !important;
  }
  .park-popup .pinPopup .pin-visit-summary {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .park-popup .pinPopup .pin-visit-fact {
    padding: 7px 8px !important;
  }
  #pinInfoModal .pin-info-section {
    margin-top: 16px !important;
  }
  #pinInfoModal .pin-info-section-title {
    margin-bottom: 9px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 390px) {
  .park-popup .pinPopup .pin-visit-summary {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Final popup rhythm correction
   - Restore the original connected Activity / Best Time / Approach strip.
   - Only add breathing room between that strip and the long-form rows below.
   - Keep More Info section headings identical on mobile and desktop.
   ========================================================= */

/* One connected summary strip again: no detached cards and no gaps between
   Activity, Best Time and Approach. */
.park-popup .pinPopup .pin-visit-summary,
.park-popup .pinPopup .pin-visit-summary.compact {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.025) !important;
}
.park-popup .pinPopup .pin-visit-fact {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-right: 1px solid rgba(148,163,184,.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.park-popup .pinPopup .pin-visit-fact:last-child {
  border-right: 0 !important;
}
.park-popup .pinPopup .pin-visit-activity {
  flex-grow: 1.12 !important;
  min-width: 0 !important;
}

/* This is the spacing the screenshot was missing: keep the connected strip
   intact, then give Access/Terrain a clear visual break underneath it. */
.park-popup .pinPopup .pin-visit-summary + .popup-detail-grid {
  margin-top: 12px !important;
}
.park-popup .pinPopup .popup-detail-grid {
  row-gap: 8px !important;
}

/* The compact popup no longer renders Notes; Access and Terrain remain full
   width and keep their normal, even spacing. */
.park-popup .pinPopup .popup-detail-grid > .pin-detail-access,
.park-popup .pinPopup .popup-detail-grid > .pin-detail-terrain {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* More Info: section headings must look the same on phones and desktop. */
#pinInfoModal .pin-info-section-title {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  color: #f1f5f9 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
}
#pinInfoModal .pin-info-section-title::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 28px !important;
  height: 1px !important;
  background: rgba(148,163,184,.24) !important;
}

@media (max-width: 640px) {
  /* Undo the earlier mobile-only stacked popup summary. It stays the same
     connected three-part strip on phones. */
  .park-popup .pinPopup .pin-visit-summary,
  .park-popup .pinPopup .pin-visit-summary.compact {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }
  .park-popup .pinPopup .pin-visit-fact {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 7px 8px !important;
    border-right: 1px solid rgba(148,163,184,.11) !important;
  }
  .park-popup .pinPopup .pin-visit-fact:last-child {
    border-right: 0 !important;
  }

  /* Restore real breathing room around the first section heading when the
     Facilities section is the first content inside the More Info card. */
  #pinInfoModal .pin-info-card {
    padding-top: 14px !important;
  }
  #pinInfoModal .pin-info-section {
    margin-top: 18px !important;
  }
  #pinInfoModal .pin-info-card > .pin-info-section:first-child {
    margin-top: 2px !important;
  }
  #pinInfoModal .pin-info-section-title {
    width: 100% !important;
    justify-content: flex-start !important;
    margin: 0 0 10px !important;
    font-size: 16px !important;
    text-align: left !important;
  }
  #pinInfoModal .pin-info-section-title::after {
    min-width: 28px !important;
    height: 1px !important;
    background: rgba(148,163,184,.24) !important;
  }
}

@media (max-width: 390px) {
  .park-popup .pinPopup .pin-visit-summary,
  .park-popup .pinPopup .pin-visit-summary.compact {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}
\n\n/* =========================================================\n   Adaptive compact visit facts\n   Keep the familiar connected Activity / Best Time / Approach strip while\n   values are short. If Best Time or Approach is text-heavy, switch only the\n   small map popup to separate natural-height rows so Activity never inherits\n   a tall empty area from another field.\n   ========================================================= */\n.park-popup .pinPopup .pin-visit-summary.pin-visit-summary-adaptive,\n.park-popup .pinPopup .pin-visit-summary.compact.pin-visit-summary-adaptive {\n  display: grid !important;\n  grid-template-columns: 1fr !important;\n  align-items: start !important;\n  gap: 7px !important;\n  overflow: visible !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n}\n.park-popup .pinPopup .pin-visit-summary.pin-visit-summary-adaptive .pin-visit-fact {\n  display: block !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: auto !important;\n  min-height: 0 !important;\n  align-self: start !important;\n  padding: 7px 9px !important;\n  border: 1px solid rgba(148,163,184,.13) !important;\n  border-radius: 11px !important;\n  background: rgba(15,23,42,.55) !important;\n  box-sizing: border-box !important;\n}\n.park-popup .pinPopup .pin-visit-summary.pin-visit-summary-adaptive .pin-visit-fact:last-child {\n  border-right: 1px solid rgba(148,163,184,.13) !important;\n}\n.park-popup .pinPopup .pin-visit-summary.pin-visit-summary-adaptive .pin-visit-activity {\n  flex: none !important;\n}\n\n@media (max-width: 640px) {\n  .park-popup .pinPopup .pin-visit-summary.pin-visit-summary-adaptive .pin-visit-fact {\n    padding: 7px 8px !important;\n  }\n}\n
/* =========================================================
   Sauna / Cruising Bar external links in author footer
   ========================================================= */
.venue-footer-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.venue-footer-link {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(255,255,255,.055) !important;
  color: #cbd5e1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
}
.venue-footer-link i {
  font-size: 14px !important;
  line-height: 1 !important;
}
.venue-footer-link:hover,
.venue-footer-link:focus-visible {
  background: rgba(96,165,250,.12) !important;
  border-color: rgba(96,165,250,.35) !important;
  color: #dbeafe !important;
  transform: translateY(-1px) !important;
}
.venue-footer-link.maps:hover,
.venue-footer-link.maps:focus-visible {
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.30) !important;
  color: #dcfce7 !important;
}
.venue-footer-links.compact .venue-footer-link {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  border-radius: 8px !important;
}
.venue-footer-links.compact .venue-footer-link i { font-size: 12px !important; }

.pinPopup .popup-footer-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#pinInfoModal .pin-info-footer-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148,163,184,.13) !important;
}
#pinInfoModal .pin-info-footer-meta .pin-info-author {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#pinInfoModal .pin-info-footer-meta .pin-info-author span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .venue-footer-link {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
  }
  .venue-footer-links.compact .venue-footer-link {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  #pinInfoModal .pin-info-footer-meta { gap: 8px !important; }
}

/* =========================================================
   Compact popup visit layout
   Activity gets a full-width row. Best Time and Approach sit below in
   independent natural-height cards, so long text can never stretch Activity.
   ========================================================= */
.park-popup .pinPopup .pin-visit-summary.compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-fact {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.025) !important;
  box-sizing: border-box !important;
}

.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-fact:last-child {
  border-right: 1px solid rgba(148,163,184,.13) !important;
}

.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-activity {
  grid-column: 1 / -1 !important;
}

/* If only Best Time or only Approach exists beneath Activity, let it use the
   whole second row instead of leaving an empty half-column. */
.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-best-time:last-child:nth-child(2),
.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-approach:last-child:nth-child(2) {
  grid-column: 1 / -1 !important;
}

.park-popup .pinPopup .pin-visit-summary.compact .pin-visit-activity .activity-meter {
  width: 100% !important;
  max-width: none !important;
}

.park-popup .pinPopup .pin-visit-summary.compact + .popup-detail-grid {
  margin-top: 12px !important;
}

@media (max-width: 640px) {
  .park-popup .pinPopup .pin-visit-summary.compact {
    gap: 7px !important;
  }
  .park-popup .pinPopup .pin-visit-summary.compact .pin-visit-fact {
    padding: 7px 8px !important;
  }
}


/* =========================================================
   Venue links: More Info footer only
   Keep one divider above the footer and make external-link actions distinct,
   separated blue icon buttons. The compact map popup never renders them.
   ========================================================= */
#pinInfoModal .pin-info-footer-meta {
  border-top: 1px solid rgba(148,163,184,.13) !important;
  padding-top: 11px !important;
}
#pinInfoModal .pin-info-footer-meta .pin-info-author {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#pinInfoModal .pin-info-footer-meta .venue-footer-links {
  gap: 12px !important;
  margin-left: 12px !important;
}
#pinInfoModal .pin-info-footer-meta .venue-footer-link {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(59,130,246,.42) !important;
  background: rgba(37,99,235,.16) !important;
  color: #60a5fa !important;
  box-shadow: none !important;
}
#pinInfoModal .pin-info-footer-meta .venue-footer-link i {
  font-size: 15px !important;
  color: inherit !important;
}
#pinInfoModal .pin-info-footer-meta .venue-footer-link:hover,
#pinInfoModal .pin-info-footer-meta .venue-footer-link:focus-visible,
#pinInfoModal .pin-info-footer-meta .venue-footer-link.maps:hover,
#pinInfoModal .pin-info-footer-meta .venue-footer-link.maps:focus-visible {
  background: rgba(37,99,235,.26) !important;
  border-color: rgba(96,165,250,.7) !important;
  color: #93c5fd !important;
}
@media (max-width: 520px) {
  #pinInfoModal .pin-info-footer-meta .venue-footer-links {
    gap: 10px !important;
    margin-left: 10px !important;
  }
  #pinInfoModal .pin-info-footer-meta .venue-footer-link {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}


/* =========================================================
   Venue detail -> Activity spacing + smooth More Info -> Edit handoff
   ========================================================= */
/* Sauna type/access and Cruising Bar entry policy must never visually run
   into the Activity row. Keep the same vertical rhythm used by the other
   popup detail groups. */
.park-popup .pinPopup .popup-details-section > .pin-venue-detail-grid + .pin-visit-summary,
.park-popup .pinPopup .popup-details-section > .pin-venue-detail-grid + .pin-visit-summary.compact {
  margin-top: 12px !important;
}
.park-popup .pinPopup .pin-venue-detail-grid {
  margin-bottom: 0 !important;
}

/* More Info -> Edit is a true stacked-modal handoff. More Info remains open
   underneath for the entire Edit session; Edit stays above it until Edit is
   closed. This prevents flashing and guarantees that closing Edit reveals the
   same More Info modal instead of closing or recreating it. */
#editModal.edit-modal-handoff {
  z-index: 1000004 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease-out !important;
}
#editModal.edit-modal-handoff.edit-modal-handoff-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================================================
   More Info accordions + intentionally compact map popup
   2026-08-18
   ========================================================= */

/* The map popup is now a quick-glance card. Keep Description, Facilities and
   Visit information visually separated by the existing thin dividers, with no
   section headings inside the popup itself. */
.park-popup .pinPopup .popup-essential-details-section {
  margin-top: 0 !important;
}
.park-popup .pinPopup .popup-essential-details-section .popup-essential-visit {
  margin-top: 0 !important;
}
.park-popup .pinPopup .popup-section + .popup-section {
  border-top: 1px solid rgba(148,163,184,.16) !important;
}

/* Activity is always the first and full-width quick fact. Best Time and
   Approach remain below it, using the compact layout already used by Cruise. */
.park-popup .pinPopup .popup-essential-visit {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.park-popup .pinPopup .popup-essential-visit .pin-visit-activity {
  grid-column: 1 / -1 !important;
}
.park-popup .pinPopup .popup-essential-visit .pin-visit-fact {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}
.park-popup .pinPopup .popup-essential-visit .pin-visit-best-time:last-child:nth-child(2),
.park-popup .pinPopup .popup-essential-visit .pin-visit-approach:last-child:nth-child(2) {
  grid-column: 1 / -1 !important;
}
.park-popup .pinPopup .popup-essential-visit .pin-visit-activity .activity-meter {
  width: 100% !important;
  max-width: none !important;
}

/* More Info: use the same Cruise card palette, but organize the content into
   independent expandable panels. Native <details> means users can keep any
   number of sections open at once. */
#pinInfoModal .pin-info-card.pin-info-card-accordions {
  padding: 12px !important;
  overflow: visible !important;
}
#pinInfoModal .pin-info-accordion-list {
  display: grid !important;
  gap: 9px !important;
  width: 100% !important;
}
#pinInfoModal .pin-info-accordion {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(32,36,56,.82), rgba(24,28,45,.82)) !important;
  box-shadow: none !important;
}
#pinInfoModal .pin-info-accordion > summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  user-select: none !important;
  color: var(--park-text,#f8fafc) !important;
  background: rgba(255,255,255,.018) !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
#pinInfoModal .pin-info-accordion > summary::-webkit-details-marker {
  display: none !important;
}
#pinInfoModal .pin-info-accordion > summary::marker {
  display: none !important;
  content: '' !important;
}
#pinInfoModal .pin-info-accordion > summary:hover {
  background: rgba(37,99,235,.08) !important;
}
#pinInfoModal .pin-info-accordion-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  letter-spacing: .01em !important;
}
#pinInfoModal .pin-info-accordion-title > i {
  width: 18px !important;
  flex: 0 0 18px !important;
  text-align: center !important;
  color: #60a5fa !important;
  font-size: 13px !important;
}
#pinInfoModal .pin-info-accordion-chevron {
  flex: 0 0 auto !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  transition: transform .18s ease !important;
}
#pinInfoModal .pin-info-accordion[open] > summary {
  background: rgba(37,99,235,.065) !important;
  border-bottom: 1px solid rgba(148,163,184,.12) !important;
}
#pinInfoModal .pin-info-accordion[open] > summary .pin-info-accordion-chevron {
  transform: rotate(180deg) !important;
}
#pinInfoModal .pin-info-accordion-body {
  padding: 12px 14px 14px !important;
  color: var(--park-text,#f8fafc) !important;
  text-align: left !important;
}

/* Facilities are the one panel opened by default and remain pills, matching
   the current map/filter visual language. */
#pinInfoModal .pin-info-accordion-facilities .pin-info-accordion-body {
  padding-top: 11px !important;
}
#pinInfoModal .pin-info-all-facilities {
  margin: 0 !important;
  padding: 0 !important;
}

/* About panel: remove the old outer section spacing because the accordion now
   owns the border and padding. */
#pinInfoModal .pin-info-accordion-about .pin-description-block {
  margin: 0 !important;
}
#pinInfoModal .pin-info-accordion-about .pin-description-block + * {
  margin-top: 12px !important;
}

/* More Info's fact cards stay recognizably Cruise but no longer create one
   giant colored wall. Each panel gets a restrained grid and natural heights. */
#pinInfoModal .pin-info-accordion-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 0 !important;
}
#pinInfoModal .pin-info-accordion-grid > .pin-detail-card,
#pinInfoModal .pin-info-accordion-body > .pin-detail-card,
#pinInfoModal .pin-info-visit-activity-card {
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 11px !important;
  background: rgba(15,23,42,.42) !important;
  box-shadow: none !important;
  text-align: left !important;
}
#pinInfoModal .pin-info-accordion-grid > .pin-detail-card > strong,
#pinInfoModal .pin-info-accordion-body > .pin-detail-card > strong,
#pinInfoModal .pin-info-visit-activity-card > strong {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: color-mix(in srgb,var(--detail-color,#60a5fa) 76%,white) !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
}
#pinInfoModal .pin-info-accordion-grid > .pin-detail-card > span,
#pinInfoModal .pin-info-accordion-body > .pin-detail-card > span {
  display: block !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}
#pinInfoModal .pin-info-visit-activity-card {
  grid-column: 1 / -1 !important;
  --detail-color: #60a5fa !important;
}
#pinInfoModal .pin-info-visit-activity-card .activity-meter {
  width: 100% !important;
  max-width: none !important;
}
#pinInfoModal .pin-info-access-grid > .pin-detail-card,
#pinInfoModal .pin-info-accordion-notes .pin-detail-notes {
  grid-column: 1 / -1 !important;
}

/* Venue renderer already produces its own grid. Neutralize its legacy outer
   margins so it sits cleanly inside the accordion body. */
#pinInfoModal .pin-info-accordion-venue .pin-info-grid {
  margin: 0 !important;
  gap: 9px !important;
}

/* Keep visit counter/action and author footer outside the accordions so the
   primary interaction and venue links remain easy to reach. */
#pinInfoModal .pin-info-card-accordions > .pin-info-visit-wrap {
  margin-top: 12px !important;
}
#pinInfoModal .pin-info-card-accordions > .pin-info-footer-meta {
  margin-top: 12px !important;
}

@media (max-width: 640px) {
  .park-popup .pinPopup .popup-essential-visit {
    gap: 7px !important;
  }
  #pinInfoModal .pin-info-card.pin-info-card-accordions {
    padding: 10px !important;
  }
  #pinInfoModal .pin-info-accordion-list {
    gap: 8px !important;
  }
  #pinInfoModal .pin-info-accordion > summary {
    min-height: 46px !important;
    padding: 11px 12px !important;
  }
  #pinInfoModal .pin-info-accordion-title {
    font-size: 14px !important;
    text-align: left !important;
  }
  #pinInfoModal .pin-info-accordion-body {
    padding: 11px 12px 12px !important;
  }
  #pinInfoModal .pin-info-accordion-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #pinInfoModal .pin-info-visit-activity-card {
    grid-column: 1 !important;
  }
}

/* =========================================================
   Refined compact popup + More Info hierarchy
   2026-08-18
   ========================================================= */

/* More Info: Description and images are permanent content above the
   accordions. They are never collapsible. */
#pinInfoModal .pin-info-fixed-about {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 2px 2px 13px !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
}
#pinInfoModal .pin-info-fixed-about .pin-description-block {
  margin: 0 !important;
}
#pinInfoModal .pin-info-fixed-about .pin-description-block + * {
  margin-top: 0 !important;
}

/* Venue links live inside Venue Information, not in the footer. */
#pinInfoModal .pin-info-venue-stack {
  display: grid !important;
  gap: 11px !important;
  width: 100% !important;
}
#pinInfoModal .pin-info-venue-links {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-top: 1px !important;
  padding-top: 11px !important;
  border-top: 1px solid rgba(148,163,184,.12) !important;
}
#pinInfoModal .pin-info-venue-link {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(59,130,246,.30) !important;
  border-radius: 12px !important;
  background: rgba(37,99,235,.10) !important;
  color: #dbeafe !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease,border-color .15s ease,transform .15s ease !important;
}
#pinInfoModal .pin-info-venue-link:hover,
#pinInfoModal .pin-info-venue-link:focus-visible {
  background: rgba(37,99,235,.18) !important;
  border-color: rgba(96,165,250,.52) !important;
  transform: translateY(-1px) !important;
}
#pinInfoModal .pin-info-venue-link-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: rgba(37,99,235,.20) !important;
  color: #60a5fa !important;
  font-size: 13px !important;
}
#pinInfoModal .pin-info-venue-link-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
}
#pinInfoModal .pin-info-venue-link-copy strong {
  color: #eff6ff !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}
#pinInfoModal .pin-info-venue-link-copy small {
  color: #94a3b8 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
#pinInfoModal .pin-info-venue-link-arrow {
  flex: 0 0 auto !important;
  color: #60a5fa !important;
  font-size: 10px !important;
}

/* Visit information: on desktop Activity is the same width as Best Time.
   If Activity is the only fact, it may use the full row. Mobile stays one
   column naturally. */
#pinInfoModal .pin-info-visit-grid {
  align-items: start !important;
}
#pinInfoModal .pin-info-visit-activity-card {
  grid-column: auto !important;
}
#pinInfoModal .pin-info-visit-grid.only-activity .pin-info-visit-activity-card {
  grid-column: 1 / -1 !important;
}

/* A slightly clearer Activity marker without making it visually loud. */
.activity-meter-marker {
  width: 12px !important;
  height: 12px !important;
  background: #f8fafc !important;
  border: 2px solid #0f172a !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,.34),0 2px 8px rgba(0,0,0,.48) !important;
}
.park-popup .pin-visit-activity .activity-meter-head,
#pinInfoModal .pin-info-visit-activity-card .activity-meter-head {
  margin-bottom: 6px !important;
}
.park-popup .pin-visit-activity .activity-meter-ends,
#pinInfoModal .pin-info-visit-activity-card .activity-meter-ends {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  color: #7f8ca0 !important;
  font-size: 8px !important;
  line-height: 1 !important;
}
#pinInfoModal .pin-info-visit-activity-card .activity-meter {
  width: 100% !important;
  max-width: none !important;
}

/* More Info footer: author on the left, the visited counter itself is the
   click target on the right. No separate bright action button. */
#pinInfoModal .pin-info-footer-meta {
  align-items: center !important;
  gap: 12px !important;
}
#pinInfoModal .pin-info-visit-footer-button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 31px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56,189,248,.20) !important;
  background: rgba(14,165,233,.075) !important;
  color: #cfefff !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
#pinInfoModal .pin-info-visit-footer-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(56,189,248,.42) !important;
  background: rgba(14,165,233,.12) !important;
}
#pinInfoModal .pin-info-visit-footer-button > i {
  color: #38bdf8 !important;
  font-size: 11px !important;
}
#pinInfoModal .pin-info-visit-footer-button > strong {
  color: #fff !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
}
#pinInfoModal .pin-info-visit-footer-button.active {
  border-color: rgba(34,197,94,.25) !important;
  background: rgba(34,197,94,.08) !important;
  color: #d1fae5 !important;
}
#pinInfoModal .pin-info-visit-footer-button.active > i {
  color: #4ade80 !important;
}
#pinInfoModal .pin-info-visit-footer-button:disabled {
  cursor: default !important;
  opacity: .82 !important;
}

/* The map popup only shows Activity + Best Time now. Best Time should use the
   whole row beneath Activity rather than leaving an empty second column. */
.park-popup .pinPopup .popup-essential-visit .pin-visit-best-time {
  grid-column: 1 / -1 !important;
}

/* Give the primary More Info action a little more breathing room from the
   bottom edge of the popup. */
.park-popup .pinPopup .popup-action-dock {
  margin-bottom: 4px !important;
}

/* Image viewer width follows the rendered image instead of always stretching
   to desktop maximum width. JS sets an exact safe width after image load. */
.image-viewer-card {
  max-width: calc(100vw - 36px) !important;
}

@media (max-width: 640px) {
  #pinInfoModal .pin-info-fixed-about {
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding: 1px 1px 11px !important;
  }
  #pinInfoModal .pin-info-venue-links {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-top: 10px !important;
  }
  #pinInfoModal .pin-info-venue-link {
    padding: 9px 10px !important;
  }
  #pinInfoModal .pin-info-visit-activity-card {
    grid-column: 1 !important;
  }
  #pinInfoModal .pin-info-footer-meta {
    gap: 9px !important;
  }
  #pinInfoModal .pin-info-visit-footer-button {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .image-viewer-card {
    max-width: calc(100vw - 20px) !important;
  }
}

/* =========================================================
   Popup divider rhythm + More Info About accordion
   2026-08-18
   ========================================================= */

/* Facilities -> Activity divider rhythm. The divider belongs to the Activity
   section, so margin-top creates real space between the last facility pill
   and the line; padding-top mirrors that distance below the line. */
.park-popup .pinPopup .popup-facilities-section {
  padding-bottom: 0 !important;
}
.park-popup .pinPopup .popup-facilities-section + .popup-essential-details-section {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(148,163,184,.16) !important;
}

/* Description + photos are a normal More Info accordion that starts open. */
#pinInfoModal .pin-info-accordion-about .pin-info-accordion-body {
  display: grid !important;
  gap: 12px !important;
}
#pinInfoModal .pin-info-accordion-about .pin-description-block,
#pinInfoModal .pin-info-accordion-about .pin-image-gallery {
  margin: 0 !important;
}
#pinInfoModal .pin-info-accordion-about .pin-description-block + * {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  .park-popup .pinPopup .popup-facilities-section + .popup-essential-details-section {
    margin-top: 11px !important;
    padding-top: 11px !important;
  }
  #pinInfoModal .pin-info-accordion-about .pin-info-accordion-body {
    gap: 10px !important;
  }
}

/* =========================================================
   Popup heading scale refinement
   2026-08-18
   ========================================================= */
/* Keep the quick popup compact, but give its identity block slightly more
   visual weight than the detail text beneath it. */
.park-popup .pinPopup .popupTitle {
  font-size: 16px !important;
  line-height: 1.22 !important;
  margin-bottom: 3px !important;
}
.park-popup .pinPopup .popupTitle > .pinIcon {
  font-size: 16px !important;
  margin-right: 2px !important;
}
.park-popup .pinPopup .popupCategory {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}

@media (max-width: 640px) {
  .park-popup .pinPopup .popupTitle {
    font-size: 15.5px !important;
  }
  .park-popup .pinPopup .popupTitle > .pinIcon {
    font-size: 15.5px !important;
  }
  .park-popup .pinPopup .popupCategory {
    font-size: 11px !important;
  }
}

/* =========================================================
   2026-08-20 Help & Legend equal edge spacing correction
   The older #helpModal.modal selector is more specific than the later
   #helpModal overrides, so override that exact selector here. Keep the
   top and bottom gutters deliberately identical.
   ========================================================= */
#helpModal.modal {
  padding: 10px 24px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
#helpModal.modal .help-modal-content {
  max-height: calc(100dvh - 20px) !important;
  margin: 0 !important;
}
@media (max-width:700px) {
  #helpModal.modal {
    padding: 8px 12px !important;
  }
  #helpModal.modal .help-modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}



/* =========================================================
   iOS Home Screen / standalone safe-area topbar
   The dark bar background is allowed behind the status area, but the actual
   brand/buttons are always laid out below the camera / Dynamic Island.
   navigator.standalone is mirrored to .cruise-standalone in <head> because
   older iOS Home Screen apps are not always covered reliably by display-mode.
   ========================================================= */
@supports (padding-top: env(safe-area-inset-top)) {
  html.cruise-standalone,
  html.cruise-standalone body {
    background: #0d111f !important;
  }

  html.cruise-standalone body #app > .map-modern-topbar.modern-topbar {
    top: 0 !important;
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 0 !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    background: linear-gradient(90deg, rgba(13, 17, 31, .98), rgba(20, 24, 43, .97)) !important;
  }

  html.cruise-standalone #pinPanel.sidePanel,
  html.cruise-standalone #filterPanel.sidePanel {
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)) !important;
  }
}

/* =========================================================
   iOS Home Screen: keep Leaflet zoom controls below the camera-safe top bar.
   Do not alter the map frame or the lower-right floating controls here.
   ========================================================= */
@supports (padding-top: env(safe-area-inset-top)) {
  html.cruise-standalone #map .leaflet-top.leaflet-left {
    top: calc(64px + env(safe-area-inset-top, 0px) + 12px) !important;
  }
}