/* ==========================================================================
   Urbexology — Refactored Stylesheet
   Notes:
   - Grouped by components.
   - Uses CSS variables for theme tokens.
   - Removes duplicates and consolidates repeated patterns.
   - Keeps original selectors to avoid breaking HTML/JS.
   ========================================================================== */

/* ==========================================================================
   Theme Tokens
   ========================================================================== */
   





/* in style.css */

/* ==========================================================================
   Custom Tooltips
   ========================================================================== */
.maplibregl-tooltip-custom.ai-tooltip {
  /* Reset default tooltip box styles */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  
  /* Positioning to center the emoji above the marker */
  left: 50% !important;
  top: 0 !important;
  transform: translate(-50%, -110%) !important; /* Center horizontally and place just above the icon */
  
  /* Visual styling for the emoji */
  font-size: 1.5em;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}





   
   














   :root {
    /* Colors */
    --brand-green: #aedc59;
    --brand-green-dark: #43be80;
    --brand-blue: #2A81CB;
    --brand-gray-0: #fff;
    --brand-gray-50: #f9f9f9;
    --brand-gray-100: #f1f1f1;
    --brand-gray-200: #eaeaea;
    --brand-gray-300: #e0e0e0;
    --brand-gray-400: #ccc;
    --brand-gray-500: #b0b0b0;
    --brand-gray-600: #818181;
    --brand-gray-700: #666;
    --brand-gray-800: #333;
    --brand-black: #000;
  
    /* Shadows / Radii */
    --shadow-light: 0 0 4px 2px rgba(0,0,0,0.1);
    --shadow-soft: 0 4px 8px rgba(0,0,0,0.1);
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
  
    /* Typography */
    --font-body: 'DM Sans', sans-serif;
  }
  
  /* ==========================================================================
     Base
     ========================================================================== */
  html {
    overflow: hidden;
    overscroll-behavior: none;
    font-family: var(--font-body);
  }
  
  body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: var(--brand-gray-0);
    color: var(--brand-gray-800);
    margin: 0;
  }

  /* Allow text selection inside the comments/info panel so users can copy messages
     while keeping the rest of the UI non-selectable. */
  #info-panel,
  #info-comments-section,
  #info-comments-container,
  #info-comments-container .message,
  .message,
  #info-comments-container p,
  #info-comments-container a {
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    cursor: text;
    white-space: pre-wrap; /* preserve line breaks for easy copying */
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-light);
    padding: 1px 1px;
    border-radius: var(--radius-sm);
    background: transparent;
  }
  
  input[type="number"] {
    border: none;
    cursor: pointer;
  }
  
  /* Utilities */
  .btn-small-margin { margin: 3px; }
  .text-center { text-align: center; }
  .flex { display: flex; }
  .flex-col { display: flex; flex-direction: column; }
  .flex-row { display: flex; flex-direction: row; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  
  /* ==========================================================================
     Emoji Radio / Modes
     ========================================================================== */
  .emoji-radio {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    min-width: fit-content;
  }
  
  .radio { display: none; }
  
  .emoji-radio .emoji {
    font-size: small;
    padding: 2px 10px;
    cursor: pointer;
    display: block;
  }
  
  #mode-1:checked ~ .emoji-1,
  #mode-2:checked ~ .emoji-2,
  #mode-3:checked ~ .emoji-3 {
    background-color: var(--brand-green);
  }
  
  .transparent { background-color: transparent; }
  
  /* Color toggles visual state for unchecked */
  .emoji-input:not(:checked) + .emoji-color-label {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.856);
    transition: all 0.05s ease-in-out;
    filter: grayscale(30%);
  }
  
  /* Generic emoji label grayscale when not selected */
  .emoji-input:not(:checked) + .emoji-label {
    text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
    transition: all 0.05s ease-in-out;
    filter: grayscale(100%);
  }
  
  /* ==========================================================================
     Discord link (quiet hover — was a double neon glow + halo ring)
     ========================================================================== */
  .discord_link svg {
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  
  .discord_link {
    border-radius: 50%;
    opacity: 0.92;
  }
  
  .discord_link:hover { opacity: 1; }
  .discord_link:hover svg { transform: translateY(-1px) scale(1.05); }
  
  /* ==========================================================================
     Sticky Scroll Emoji
     ========================================================================== */
  .scroll-emoji-container {
    position: sticky;
    bottom: 0;
  }
  
  /* ==========================================================================
     Menu
     ========================================================================== */
  #menu {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-100%, 0%);
    width: 250px;
    border-radius: var(--radius-sm);
    border: none;
    padding: 5px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.95);


  }
  
  /* ==========================================================================
     Leaflet / Map
     ========================================================================== */
  #map {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  
  .leaflet-popup-content-wrapper {
    background-color: rgba(238, 229, 216, 0.94);
  }
  
  .leaflet-popup-content {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    min-width: 250px;
  }
  
  .leaflet-popup-content p { margin: 0; }
  
  .leaflet-popup-tip {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
  }
  
  /* ==========================================================================
     Simple Animations / Effects
     ========================================================================== */
  .zoom-effect { animation: zoom-in-zoom-out 1.1s ease infinite; }
  
  @keyframes zoom-in-zoom-out {
    0%   { transform: scale(1, 1); }
    50%  { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
  }
  
  @keyframes fadeInOut {
    0%, 70% { opacity: 0; }
    70%     { opacity: 1; }
    100%    { opacity: 0; }
  }
  
  .error-div { animation: errorAnimation 0.4s infinite alternate; }
  @keyframes errorAnimation {
    0%   { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.2) rotate(5deg); }
  }
  
  /* Loading alternation for counters / logos */
  @keyframes showProRatio { 0%, 100% { display: block; } 50% { display: none; } }
  @keyframes showLoadingLogo { 0%, 100% { display: none; } 50% { display: block; } }
  @keyframes showLoading { 0%, 100% { display: none; } 50% { display: inline-block; } }
  
  /* IDs used by app logic */
  #pro_ratio { animation: showProRatio 4s infinite; }
  #proLoadingLogo { animation: showLoadingLogo 4s infinite; }
  #pro_counter_loading { display: none; }
  /* Preserve legacy selector behavior */
  #pro_counter:nth-child(odd) { animation: showProRatio 4s infinite; }
  #pro_counter:nth-child(even) { animation: showLoading 4s infinite; }
  
  /* ==========================================================================
     Range / Filters / Sliders
     ========================================================================== */
  .range_div {
    display: flex;
    flex-direction: row;
    margin: 4em 3em;
    margin-bottom: 4em;
  }
  
  .range {
    width: 100%;
    margin: 5px;
  }
  
  /* Toggle Switch */
  .switch { position: relative; display: inline-block; width: 45px; height: 21px; }
  .switch input { opacity: 0; width: 0; height: 0; }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 40px;
    background-color: #ccc;
    box-shadow: var(--shadow-light);
    transition: .4s;
    text-shadow: 0 0 4px rgba(0,0,0,0.1);
    border-radius: var(--radius-sm);
  }
  
  .slider:before {
    position: absolute;
    content: attr(data-off);
    width: 26px;
    left: -3px;
    bottom: 0;
    transition: .4s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  input:checked + .slider { background-color: var(--brand-green-dark); }
  input:checked + .slider:before {
    transform: translateX(19px);
    content: attr(data-on);
  }
  input:not(:checked) + .slider:before { filter: grayscale(100%); }
  
  /* ==========================================================================
     Overlay
     ========================================================================== */
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0; left: 0;
    background-color: rgba(255, 255, 255, 0.953);
    overflow: hidden;          /* clip both axes when collapsed — noUi sliders
                                  inside used to leak out the bottom because
                                  only horizontal overflow was hidden */
    /* Belt-and-braces: even with overflow:hidden, some mobile browsers still
       composite absolute/transformed descendants (noUiSlider handles, tooltips)
       outside the parent's paint box. `contain: strict` enforces layout AND
       paint containment so the overlay CANNOT paint outside its 0×100% box
       when closed. `visibility: hidden` is the final safety net — descendants
       with `visibility: inherit` (the default) become non-rendered entirely.
       When JS opens the overlay (sets width: 100% inline), the `visibility`
       attribute selector below flips it back to visible. */
    contain: strict;
    visibility: hidden;
    pointer-events: none;
    transition: width 0.5s, visibility 0s linear 0.5s;
  }
  /* When JS sets `style="width: 100%"` on open, restore full rendering.
     The attribute selector matches any inline width that's non-zero. */
  .overlay[style*="width: 100%"],
  .overlay[style*="width:100%"] {
    visibility: visible;
    pointer-events: auto;
    transition: width 0.5s, visibility 0s;
  }
  
  .overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: var(--brand-gray-600);
    display: block;
    transition: 0.3s;
  }
  
  .overlay a:hover,
  .overlay a:focus { color: #f1f1f1; }
  
  .overlay .closebtn {
    position: absolute;
    right: 45px;
    font-size: 60px;
  }
  
  @media screen and (max-height: 450px) {
    .overlay a { font-size: 20px; }
    .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }
  }
  
  /* ==========================================================================
     Header Notch
     ========================================================================== */
  .header-notch {
    z-index: 1;
    width: 25%;
    min-width: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-gray-800);
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 0; left: 0; right: 0;
    margin: auto;
    height: 25px;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  
  .header-notch .close-button {
    position: absolute;
    right: 10px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
  }
  
  /* ==========================================================================
     Modals
     ========================================================================== */
  .modal { position: fixed; }
  
  .modal-content {
    background-color: #fefefefd;
    padding: 2px;
    border: 1px solid #888;
    border-radius: var(--radius-lg);
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    overflow-y: scroll;
    max-height: 80%;
    /* Was `popIn 1s` — a full second is a UX drag AND lets the map bleed
       through translucent panels (info-panel, no_ask etc.) mid-animation.
       Snappy 0.25s ease-out matches addSpot's own override (addspot-pop 0.22s).
       Individual modals can still override with a custom animation. */
    animation: popIn 0.25s ease-out;
  }

  /* -- Comment modal specific -- */
  #commentModal .modal-content {
    padding: 20px 24px;
    width: 90%;
    max-width: 420px;
    border: none;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  }
  #commentModal #commentModalTitle {
    font-size: 1.15em;
    margin: 0 0 14px 0;
    color: var(--brand-gray-800);
  }
  #commentModal textarea {
    width: 100%;
    border: 1px solid var(--brand-gray-300);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.92em;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
    line-height: 1.5;
    min-height: 80px;
  }
  #commentModal textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(42,129,203,0.12);
  }
  #commentModal .char-counter {
    text-align: right;
    font-size: 0.75em;
    color: var(--brand-gray-400);
    margin-top: 4px;
    margin-bottom: 4px;
    transition: color 0.2s;
  }
  #commentModal .char-counter.near-limit {
    color: #e67e22;
  }
  #commentModal .char-counter.at-limit {
    color: #c0392b;
    font-weight: 600;
  }
  #commentModal .preview {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #commentModal .preview img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--brand-gray-200);
  }
  #commentModal .comment-submit-btn {
    margin-top: 12px;
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--brand-gray-800);
    color: #fff;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  #commentModal .comment-submit-btn:hover {
    background: var(--brand-black);
  }
  #commentModal .comment-submit-btn:active {
    transform: scale(0.98);
  }
  
  @keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  
  .pro-modal-content {
    /* Opaque parchment (was 25% white over a 50px blur — glassmorphism look
       had become a strong AI-template signal). Border + clean shadow only. */
    background: rgb(238, 229, 216);
    border: 1px solid rgba(62, 44, 24, 0.34);
    box-shadow: 0 12px 40px rgba(20, 14, 6, 0.35);

    overflow-y: auto;
    scrollbar-gutter: stable;
  }



  /* .pro-modal-content {
    background: linear-gradient(145deg, #1e1e1e, #2d2d2d);
    color: #ffffff;
  } */
  
  .upgradeFrame {
    position: absolute;
    z-index: 9999;
    overflow: hidden;
    top: 2%;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
  }
  
  .modal form { display: flex; flex-direction: column; }
  
  /* ==========================================================================
     Draggable Marker / Map UI bits
     ========================================================================== */
  .draggable-marker {
    width: 20px;
    margin: 12px;
    cursor: pointer;
    position: relative;
  }
  .draggable-marker:active { filter: brightness(1.5); }
  
  .marker-menu { position: relative; text-align: center; }
  .add-spot-text {
    margin: 0;
    font-size: small;
    mix-blend-mode: difference;
    filter: invert(1);
  }
  
  /* Confetti canvas */
  #confetti-canvas {
    position: fixed;
    z-index: 999;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
  }
  
  /* ==========================================================================
     Pro Tables / Buttons (within .pro-modal-content)
     ========================================================================== */
  .pro-modal-content .pro { background-color: #ecf0f1; font-weight: bold; }
  
  h4 { margin: 5px 0; align-items: center; }
  
  .pro-modal-content h1,
  .pro-modal-content h2 { text-align: center; color: #444; margin-top: 50px; }
  .pro-modal-content h1 { font-size: 2em; }
  
  .pro-modal-content table {
    max-width: 500px;
    margin: 0 auto;
    border-collapse: separate;
    border: 1px solid black;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
  }
  
  .pro-modal-content th,
  .pro-modal-content td {
    padding: 20px;
    text-align: center;
    border-left: 1px solid black;
    border-top: 1px solid black;
  }
  
  .pro-modal-content th {
    background-color: #2c3e50;
    color: #fff;
  }
  
  .pro-modal-content td { border: 1px solid var(--brand-gray-200); }
  
  .pro-modal-content button {
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    background-color : #2c3e50;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);
  }
  
  .pro-modal-content .proBtn:hover {
    transform: scale(1.1);
    background-color: #34495e;
  }
  
  /* Request Form */
  .requestForm {
    background-color: var(--brand-gray-50);
    padding: 20px;
    border-radius: 8px;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
  .email {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--brand-gray-400);
    border-radius: 5px;
    margin-bottom: 15px;
    box-sizing: border-box;
  }
  
  #login_email {
    width: 100%;
    max-width: 400px;
    padding: 15px 20px;
    font-size: 16px;
    border: 2px solid var(--brand-gray-300);
    border-radius: 12px;
    background-color: #ffffff;
    box-sizing: border-box;
    margin: 15px 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: inherit;
    color: #333;
  }
  
  #login_email:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(42, 129, 203, 0.1), 0 4px 12px rgba(0,0,0,0.15);
    background-color: #fafafa;
  }
  
  #login_email:hover {
    border-color: var(--brand-gray-500);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
  
  #login_email::placeholder { color: #888; opacity: 0.8; font-style: italic; }
  #login_email:invalid { border-color: #e74c3c; }
  #login_email:invalid:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1), 0 4px 12px rgba(0,0,0,0.15);
  }
  
  @media (max-width: 468px) {
    #login_email {
      max-width: 100%;
      padding: 12px 16px;
      font-size: 16px;
    }
  }
  
  button#sendRequestBtn {
    width: 100%;
    background-color: #2c3e50;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  button#sendRequestBtn:hover { background-color: #34495e; }
  
  #requestMsg {
    display: none;
    margin-top: 10px;
    color: #e74c3c;
    text-align: center;
  }
  
  /* ==========================================================================
     Headings / Hero
     ========================================================================== */
  .urbex-header {
    font-family: 'IM Fell Double Pica', serif;
    font-size: 2.5em;
    background: -webkit-linear-gradient(45deg, #4CAF50, #FFC107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .urbex-header:hover { transform: scale(1.05); }
  .urbex-header:before {
    content: "";
    position: absolute;
    top: 0; left: -50%;
    width: 50%; height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-45deg);
    transition: 0.7s;
  }
  .urbex-header:hover:before { left: 150%; }
  
  /* Header section with background image */
  .headerSection {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 0;
    overflow: hidden;
  }
  .backgroundImg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.5;
  }
  .headerContent { position: relative; z-index: 1; display: flex; align-items: center; }
  .headerTitle {
    font-family: 'IM Fell Double Pica', serif;
    flex: 1;
    font-size: 2em;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    margin-right: 20px;
    position: relative;
    font-weight: bold;
  }
  .headerTitle:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: #f36d33;
    bottom: -8px;
    left: 0;
  }
  .headerImg { width: 60px; height: auto; }
  
  .subtitle {
    color: var(--brand-gray-700);
    font-size: 1.4em;
    margin: 20px 0 30px;
    font-style: italic;
    font-weight: bold;
  }
  .quickStart { font-size: 1.5em; color: #333; display: flex; align-items: center; }
  .quickStartEmoji { margin-right: 10px; }
  
  /* Coupon badge */
  .coupon-container {
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  .coupon-text { font-weight: 600; color: #333; }
  .coupon-code {
    font-size: 2em;
    background: linear-gradient(90deg, #fe6b8b 30%, #ff8e53 90%);
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Courier New', monospace;
    margin-left: 5px;
  }
  
  /* ==========================================================================
     Onboarding Blocks
     ========================================================================== */
  .onboardingSteps .onboardingBox {
    display: flex;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .onboardingSteps .onboardingBox:nth-child(even) { flex-direction: row-reverse; }
  
  .onboardingSteps .onboardingContent { flex: 1; display: flex; flex-direction: column; }
  .onboardingSteps .emoji { margin-right: 10px; }
  .onboardingSteps h4 {
    color: #444;
    font-size: 1.4em;
    display: flex;
    align-items: center;
  }
  .onboardingSteps p { color: #666; }
  .onboardingSteps img,
  .onboardingSteps iframe {
    border-radius: 8px;
    max-width: 100%;
  }
  
  @media (max-width: 468px) {
    .onboardingSteps .onboardingBox,
    .onboardingSteps .onboardingBox:nth-child(even) { flex-direction: column; }
    .onboardingSteps img, .onboardingSteps iframe { width: 100%; height: auto; }
  }
  
  /* ==========================================================================
     Forms / Inputs / Textareas / Previews
     ========================================================================== */
  #addSpotContent { background-color: rgba(238, 229, 216, 0.94); }
  
  #preview { margin-top: 10px; display: flex; flex-wrap: wrap; }
  #preview img {
    max-width: 100px;
    max-height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--brand-gray-400);
    border-radius: 5px;
    box-sizing: border-box;
  }
  
  /* ==========================================================================
     Notification Banners
     ========================================================================== */
  .notification-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e3dcce;
    box-shadow: var(--shadow-light);
    display: none;
    font-weight: bold;
    color: #000;
    text-align: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  .notification-banner.show { display: block; opacity: 1; }
  
  /* ==========================================================================
     Discord / Social Buttons
     ========================================================================== */
  .discord-account-button {
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #7289da;
    border-radius: 5px;
    margin: 10px 0;
    color: #7289da;
    transition: background-color 0.3s, color 0.3s;
  }
  .discord-account-button:hover {
    background-color: #7289da;
    color: #ffffff;
  }
  
  .discord-logo { width: 30px; height: 30px; margin-right: 10px; }
  .discord-content { display: flex; flex-direction: column; }
  .legend { font-size: 16px; font-weight: bold; }
  .points-tag { font-size: 14px; color: #555; }

.discord_link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.discord_link::after {
  content: "+78k!";
  display: block;
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  text-align: center;
}

  
  /* ==========================================================================
     Messages / Chat list
     ========================================================================== */
  .message {
    border: 1px solid var(--brand-gray-200);
    margin: 0 0 10px 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background-color: var(--brand-gray-0);
    overflow-wrap: break-word;
    word-break: break-word;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
  }
  .message:hover {
    border-color: var(--brand-gray-300);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .message:last-child {
    margin-bottom: 0;
  }

  /* -- Message header (avatar + username + date) -- */
  .message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .message-header .message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--brand-gray-200);
  }
  .message-header .message-username {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--brand-gray-800);
    line-height: 1;
  }
  .message-header .message-date {
    margin-left: auto;
    font-size: 0.75em;
    color: var(--brand-gray-500);
    white-space: nowrap;
  }

  /* -- Message text -- */
  .message-text {
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--brand-gray-700);
    margin-bottom: 4px;
  }
  .message-text a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s;
  }
  .message-text a:hover {
    text-decoration-color: var(--brand-blue);
  }

  /* -- Legacy selectors kept for backwards compat -- */
  .message img.profile {
    max-width: 28px;
    height: auto;
    border-radius: 50%;
    margin-right: 5px;
    cursor: default;
  }
  .message .user { font-weight: bold; }

  /* -- Message images -- */
  .message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .message-images img,
  .message img:not(.profile):not(.message-avatar) {
    max-width: 100%;
    max-height: 220px;
    height: auto;
    border-radius: var(--radius-sm);
    cursor: pointer;
    object-fit: cover;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .message-images img:hover,
  .message img:not(.profile):not(.message-avatar):hover {
    transform: scale(1.02);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }
  .message img.enlarged {
    max-width: 100%;
    max-height: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }

  /* -- Reactions -- */
  .message .reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 0;
  }
  .reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--brand-gray-100);
    border: 1px solid var(--brand-gray-200);
    font-size: 0.82rem;
    color: var(--brand-gray-700);
    line-height: 1.4;
  }

  /* -- Message container -- */
  .message-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 400px;
    width: 100%;
    padding: 4px 2px;
    scroll-behavior: smooth;
  }
  .message-container::-webkit-scrollbar {
    width: 5px;
  }
  .message-container::-webkit-scrollbar-track {
    background: transparent;
  }
  .message-container::-webkit-scrollbar-thumb {
    background: var(--brand-gray-300);
    border-radius: 999px;
  }
  .message-container::-webkit-scrollbar-thumb:hover {
    background: var(--brand-gray-400);
  }

  /* -- Comments section header -- */
  .comments-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--brand-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .comments-header .comment-count {
    background: var(--brand-gray-200);
    color: var(--brand-gray-700);
    font-size: 0.8em;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 700;
  }

  /* -- Loading & empty states -- */
  .comments-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
    color: var(--brand-gray-400);
    gap: 10px;
  }
  .comments-loading .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--brand-gray-200);
    border-top-color: var(--brand-gray-500);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .comments-loading span {
    font-size: 0.85em;
  }
  .comments-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--brand-gray-400);
    font-size: 0.88em;
  }
  .comments-empty .empty-icon {
    font-size: 1.8em;
    margin-bottom: 6px;
  }
  .comments-error {
    text-align: center;
    padding: 16px 12px;
    color: #c0392b;
    font-size: 0.85em;
  }
  .loading { font-size: 5em; }
  .logged-as { font-size: 14px; margin-top: 10px; }
  
  /* ==========================================================================
     Misc
     ========================================================================== */
  #pro_counter_loading { display: none; }
  
  /* Keep original selector for consistency (used by scripts) */
  #pro_counter:nth-child(odd) { animation: showProRatio 4s infinite; }
  #pro_counter:nth-child(even) { animation: showLoading 4s infinite; }

/* ==========================================================================
   Additional utilities and components from old.html inline styles
   These classes replicate the inline styling previously defined directly
   within the HTML markup. They facilitate toggling visibility, sizing,
   spacing, colouring and button states while allowing JavaScript to
   override inline styles where necessary.
   ========================================================================== */

/* Visibility helpers */
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.block         { display: block; }

/* Typography helpers */
.text-small    { font-size: small; }
.text-xxs      { font-size: xx-small; }
.fancy-serif   { font-family: 'IM Fell Double Pica', serif; }
.fw-bold       { font-weight: bold; }

/* Margin and padding helpers */
.m-0   { margin: 0; }
.m-01  { margin: 0.1em; }
.m-05  { margin: 0.5em; }
.mb-05 { margin-bottom: 0.5em; }
.mb-1  { margin-bottom: 1em; }
.mt-1  { margin-top: 1em; }
.mt-3  { margin-top: 3em; }
.mr-05 { margin-right: 0.5em; }
.mr-3 { margin-right: 3px; }
.mr-5 { margin-right: 5px; }
.ml-5 { margin-left: 5px; }

/* Width / sizing helpers */
.w-2em    { width: 2em; }
.w-4em    { width: 4em; }
.w-95     { width: 95%; }
.maxw-100    { max-width: 100%; }
.maxw-100px  { max-width: 100px; }
.maxw-800    { max-width: 800px; }

/* fit up to the container */
.showcase-img { max-width: 100%; height: auto; }
.reviews-img  { max-width: 100%; height: auto;}
.promo-gif   { max-width: 100%; height: auto; }
/* Layout helpers */
.centered-row { display: flex; justify-content: center; align-items: center; }
.centered-col { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.min-h-1      { min-height: 1em; }
.space-between { display: flex; justify-content: space-between; }
.space-around  { display: flex; justify-content: space-around; }

/* Icon sizing */
.icon-1em   { width: 1em; height: auto; }
.icon-1_5em { width: 1.5em; height: auto; }
.icon-20    { width: 20px; height: 20px; }
.icon-25    { width: 25px; height: 25px; }

/* Image helpers */
.img-100  { width: 100%; height: auto; }
.img-150  { width: 150px; height: auto; }
.img-250  { width: 250px; height: auto; }
.img-rounded { border-radius: var(--radius-md); }
.invert   { filter: invert(1); }
.drop-shadow { filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

/* Cursor helper */
.cursor-pointer { cursor: pointer; }

/* Colour swatches (used for colour selectors) */
.bg-blue   { background-color: #3388FF; }
.bg-none   { background-color: #f4efe6; }
.bg-red    { background-color: #CB2B3E; }
.bg-green  { background-color: #2AAD27; }
.bg-orange { background-color: #CB8427; }
.bg-gold   { background-color: #FFD326; }
.bg-violet { background-color: #9C2BCB; }
.bg-black  { background-color: #313131; }


/* Brand colour accent */
.brand-blue { color: var(--brand-blue); }

/* Site title (header) */
.site-title {
  font-size: large;
  font-weight: 900;
  font-family: 'IM Fell Double Pica', serif;
}

/* Reminder paragraph */
.reminder {
  color: rgba(255, 0, 0, 0.9);
  font-weight: bold;
}

/* Compact horizontal rule */
.hr-compact { margin: 5px 0; border: none; border-top: 1px solid var(--brand-gray-300); }

/* Buttons */
.icon-btn {
  border: none;
  box-shadow: none;
  padding: 0;
}
.top-right {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0%, 0%);
}
.btn-strong {
  font-weight: bold;
  font-size: medium;
}
.btn-pro-cta {
  background-color: var(--brand-green);
  font-weight: bold;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  box-shadow: var(--shadow-light);
  cursor: pointer;
  color: #000;
}
.btn-dark {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-upload {
  cursor: pointer;
  margin: 0.8em 0;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--brand-gray-300);
  color: var(--brand-gray-600);
  background: var(--brand-gray-50);
  font-size: 0.88em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-upload:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: #f0f6ff;
}
.groupingButton { margin: 3px; }
.proBtn { margin-top: 1em; margin-bottom: 1em; }

/* Form / preview container */
.preview {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.preview img {
  max-width: 100px;
  max-height: 100px;
}



/* Checkbox / checklist helpers */
.checkbox-label { margin: 0.25em 0; display: inline-flex; align-items: center; }
.checklist { display: inline-block; text-align: left; }
.lefted { text-align: left; }

/* Range slider container */
.range-box { display: flex; justify-content: space-between; align-items: center; }
.slider-row { display: flex; justify-content: space-between; align-items: center; }

/* AI slider sizing */
.aiSlider { display: flex; justify-content: center; font-size: large; }
.aiSliderInput { width: 80%; max-width: 500px; }

/* Lightbox overlay */
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
 /* display: none; */
  justify-content: center;
  align-items: center;
  z-index: 1002;
}
.lightbox.show { display: flex; }
.lightbox_bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

/* Store / social links */
.social-link-row {
  display: flex;
  align-items: center;
  text-align: right;
  margin-left: 0.5em;
}
.store-link {
  display: flex;
  align-items: center;
  font-size: small;
  text-align: right;
}

/* Notch badge for Pro label */
.notch-badge {
  cursor: pointer;
  font-size: small;
  font-weight: bold;
  word-break: break-all;
  text-align: center;
  margin-inline: 5px;
  background-color: var(--brand-green);
  border-radius: 5px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tagline / login helpers */
.tagline-login { font-size: small; text-align: center; }

/* Warning boxes */
.warning-box {
  background-color: #fff2e5;
  border: 1px solid #ffa726;
  padding: 10px;
  border-radius: var(--radius-md);
  margin: 1em 0;
  box-shadow: var(--shadow-light);
}
.warning-title { font-weight: bold; color: #e65100; margin-bottom: 0.5em; }
.warning-list { list-style: none; padding-left: 0; margin: 0; color: #bf360c; }

/* Discord disclaimer */
.discord-disclaimer {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 1em 0;
  text-align: left;
}
.discord-disclaimer .disclaimer-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}
.discord-disclaimer .disclaimer-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.discord-disclaimer .disclaimer-label {
  font-weight: bold;
  color: #495057;
  display: block;
  margin-bottom: 4px;
}
.discord-disclaimer .disclaimer-confirm {
  color: #28a745;
  font-size: 0.9em;
}

/* Border radius shortcut */
.radius-8 { border-radius: 8px; }

/* Shadow variant */
.shadow-soft { box-shadow: var(--shadow-soft); }

/* Underlined links */
.link-underline { text-decoration: underline; }

/* Colour input checkboxes hidden */
.color-input,
.emoji-input { display: none; }

/* Enlarged emoji */
.emoji-2em { font-size: 2em; }













/* Main container for the search control */
.maplibregl-ctrl-search {
  position: relative;
  width: 30px; /* Explicit size */
  height: 30px; /* Explicit size */
  background: #fff; /* Force solid background */
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

/* State when the search bar is expanded */
.maplibregl-ctrl-search.expanded {
  width: 260px;
  z-index: 5;
  overflow: visible;
}

/* The search icon button, positioned to fill the container */
.maplibregl-ctrl-search .maplibregl-ctrl-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, visibility 0.2s;
}

/* Hide the icon when the bar is expanded */
.maplibregl-ctrl-search.expanded .maplibregl-ctrl-icon {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Wrapper for the input field, also positioned to fill the container */
.maplibregl-ctrl-search .maplibregl-ctrl-search-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 5px;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0.1s;
}

/* When expanded, fade in the input container */
.maplibregl-ctrl-search.expanded .maplibregl-ctrl-search-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Style for the search input field */
.maplibregl-ctrl-search input[type="text"] {
  width: 100%;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
}

/* Style for the dropdown results */
.maplibregl-ctrl-search .maplibregl-ctrl-search-results {
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  border-radius: 4px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
  display: none; /* Managed by JS */
}

.maplibregl-ctrl-search .maplibregl-ctrl-search-results div {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}

.maplibregl-ctrl-search .maplibregl-ctrl-search-results div:hover {
  background: #f0f0f0;
}





/* ==========================================================================
   Info Panel (Replaces Leaflet Popups)
   ========================================================================== */
   #info-panel {
    position: fixed;
    top: 70px;
    right: 10px;
    width: 300px;
    max-width: 90vw;
    z-index: 1001; /* Above map controls but below overlays */
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--brand-gray-400);
    box-shadow: var(--shadow-soft);
    padding: 15px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .ai-tutorial-image {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .ai-tutorial-step {
    text-align: center;
    margin-bottom: 15px;
  }

  .ai-tutorial-step-number {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
  }
  
  #info-panel.hidden {
    display: none; /* Keep it in the DOM for transitions */
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
  }
  
  #info-panel .info-panel-section {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--brand-gray-200);
    padding-bottom: 12px;
    text-align: center;
  }

  #info-comments-section {
    text-align: left;
  }

  #info-add-comment-btn,
  #info-create-thread-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9em;
    transition: background 0.2s, transform 0.1s;
  }
  #info-add-comment-btn:active,
  #info-create-thread-btn:active {
    transform: scale(0.97);
  }
  
  #info-panel .info-panel-section:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
  }
  
  #info-panel #info-note-textarea {
    width: 100%;
  }
  
  #info-panel .icon-btn[data-color] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  }
  
  #info-panel-close {
    transform: translate(50%, -50%); /* Adjust close button position */
  }

/* ==========================================================================
   Login Prompt (colorLoginModal) – lightweight card overlay
   ========================================================================== */
#colorLoginModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* Dark scrim only — the blur(4px) backdrop was the last glassmorphism
     holdout (the pro modal already dropped its "25% white over 50px blur"
     for the same reason: AI-template signal). */
  background: rgba(20, 14, 6, 0.45);
  animation: clm-fade-in 0.25s ease;
}
@keyframes clm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#colorLoginModal .clm-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Opaque parchment matching .pro-modal-content — the white card +
     radius-xl + 20/60px floating mega-shadow + overshoot bounce easing
     read as a stock Material/dribbble template dropped into a site whose
     whole language is warm paper, hairline browns and tight radii. */
  background: rgb(238, 229, 216);
  border: 1px solid rgba(62, 44, 24, 0.34);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(20, 14, 6, 0.35);
  padding: 26px 28px 22px;
  width: 92%;
  max-width: 360px;
  text-align: center;
  animation: clm-pop 0.22s ease-out;
}
@keyframes clm-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#colorLoginModal .clm-icon {
  /* Retired: the oversized hero-emoji block above a bold title + gray
     subtitle is the canonical AI empty-state template. No other modal on
     the site leads with a floating emoji. */
  display: none;
}
#colorLoginModal .clm-title {
  /* Serif headline — same voice as the mail_loginModal / pro modal
     headlines (IM Fell), not a generic sans-serif card title. */
  font-family: 'IM Fell Double Pica', serif;
  font-size: 1.45em;
  font-weight: 400;
  color: #1d150c;
  margin: 0 0 6px;
  line-height: 1.15;
}
#colorLoginModal .clm-subtitle {
  font-size: 0.88em;
  color: rgba(62, 44, 24, 0.75);
  margin: 0 0 18px;
  line-height: 1.4;
}
#colorLoginModal .clm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
#colorLoginModal .clm-form input[type="email"] {
  width: 100%;
  padding: 11px 14px;
  /* Warm hairline — the cool 1.5px gray border was the one cold element
     on an otherwise warm card. */
  border: 1px solid rgba(54, 38, 20, 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  font-family: var(--font-body);
  color: #1d150c;
  background: rgba(255, 252, 246, 0.95);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
#colorLoginModal .clm-form input[type="email"]:focus {
  border-color: #2e7d32;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}
#colorLoginModal .clm-form input[type="email"]::placeholder {
  color: var(--brand-gray-400);
  font-style: italic;
}
#colorLoginModal .clm-cta {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: 1px solid rgba(54, 38, 20, 0.46);
  border-radius: var(--radius-md);
  /* Flat parchment chip (was a 4-stop gradient with a 6s drift animation —
     classic AI-template "look at me" CTA). Sits in the same family as the
     other v2 buttons. */
  background: rgba(248, 241, 229, 0.98);
  color: #1d150c;
  font-weight: 700;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(22, 14, 7, 0.18);
}
#colorLoginModal .clm-cta:hover {
  background: rgba(255, 249, 238, 0.99);
}
#colorLoginModal .clm-cta:active {
  box-shadow: inset 0 1px 2px rgba(22, 14, 7, 0.22);
}
#colorLoginModal .clm-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
#colorLoginModal .clm-error {
  color: #e74c3c;
  font-size: 0.84em;
  margin: 4px 0 0;
  line-height: 1.3;
}
#colorLoginModal .clm-success {
  color: #2e7d32;
  font-size: 0.84em;
  margin: 4px 0 0;
  line-height: 1.3;
}
#colorLoginModal .clm-dismiss {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.88em;
  color: rgba(62, 44, 24, 0.65);
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s, border-bottom-color 0.2s;
  border: none;
  background: none;
  padding: 4px 8px;
  border-bottom: 1px dashed rgba(62, 44, 24, 0.35);
}
#colorLoginModal .clm-dismiss:hover {
  color: #1d150c;
  border-bottom-color: rgba(62, 44, 24, 0.65);
}

/* Notification System Styles */
.notification-active {
    animation: notification-pulse 2s infinite;
    background-color: #ff4444 !important;
    border-radius: 50%;
    color: white !important;
}

@keyframes notification-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.notification-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 350px;
    max-height: 500px;
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.notification-header h3 {
    margin: 0;
    font-size: 16px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0;
}

.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    background: white;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: #f8f8f8;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-content {
    flex: 1;
    margin-right: 10px;
}

.notification-reason {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
}

.notification-location {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

.notification-time {
    font-size: 11px;
    color: #999;
}

.notification-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.btn-small {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-small:hover {
    background-color: #f0f0f0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .notification-panel {
        width: 90%;
        right: 5%;
        left: 5%;
        top: 10px;
    }
    
    .notification-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .notification-actions {
        margin-top: 8px;
        width: 100%;
        justify-content: flex-end;
    }
}



















@media (max-width: 768px) {
    .notification-panel {
        width: 90%;
        right: 5%;
        left: 5%;
        top: 10px;
    }
    
    .notification-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .notification-actions {
        margin-top: 8px;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Relief Video Overlay (Updated)
   ========================================================================== */
.relief-overlay {
  position: fixed;
  /* Position near the top-left map controls */
  top: 10px;
  left: 10px;
  z-index: 9999;
  /* Animation properties for a scale-up effect */
  transform: scale(0);
  transform-origin: top left; /* Animate from the top-left corner */
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); /* Bouncy pop-up effect */
  pointer-events: none;
  /* Styling for the container */
  background-color: black;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Let the container size be determined by the video */
  width: auto;
  height: auto;
}

.relief-overlay.show {
  transform: scale(1);
}

.relief-overlay video {
  display: block;
  /* Set a fixed width for the video; height will adjust automatically */
  width: 278px;
  height: auto;
  border-radius: 8px;
}


















/* ==========================================================================
   Add Spot Modal - Enhanced Styles
   ========================================================================== */

/* 1. Main Modal Container Styling */
#addSpotContent {
  background-color: var(--brand-gray-0); /* Use a clean white background */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Create consistent vertical spacing */
  padding: 1.5rem;
  max-width: 500px;
  width: 90vw;
  border: 1px solid var(--brand-gray-200);
  box-shadow: var(--shadow-soft);
}

/* 2. Typography and Headers */
#addSpotContent h3 {
  font-family: 'IM Fell Double Pica', serif;
  font-size: 1.8em;
  color: var(--brand-gray-800);
  text-align: center;
  margin: 0 0 0.5rem 0;
  border-bottom: 2px solid var(--brand-green);
  padding-bottom: 0.5rem;
}

#main-title {
  font-family: 'IM Fell Double Pica', serif;
  font-size: 1.2em;
  color: var(--brand-gray-900);
  text-align: center;
}

#addSpotContent h4 {
  font-size: 0.9em;
  font-weight: normal;
  line-height: 1.4;
  color: var(--brand-gray-700);
  background-color: var(--brand-gray-50);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--brand-blue);
  margin: 0;
}

/* 3. "Logged in as" Section */
#addSpotContent #logged-as {
  font-size: 0.9em;
  padding: 0.5rem 1rem;
  background-color: #e7f3ff;
  border-radius: var(--radius-md);
  color: #005a9e;
  text-align: center;
}

#addSpotContent #clean_discord {
  margin-left: 0.5rem;
  font-weight: bold;
  color: #d9534f;
  opacity: 0.7;
  transition: opacity 0.2s;
}
#addSpotContent #clean_discord:hover {
  opacity: 1;
}

/* 4. Form and Input Elements */
#addSpotForm {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Increase spacing between form elements */
}

#addSpotForm #description {
  min-height: 80px;
  border: 1px solid var(--brand-gray-300);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1em;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#addSpotForm #description:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(42, 129, 203, 0.15);
}

/* 5. Custom File Upload Button and Preview */
#addSpotForm label[for="fileToUpload"] {
  display: block;
  text-align: center;
  padding: 1rem;
  background-color: var(--brand-gray-100);
  border: 2px dashed var(--brand-gray-400);
  border-radius: var(--radius-sm);
  color: var(--brand-gray-600);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

#addSpotForm label[for="fileToUpload"]:hover {
  background-color: var(--brand-gray-200);
  border-color: var(--brand-blue);
}

#addSpotForm .preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

#addSpotForm .preview img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-light);
}

/* 6. "Pro Only" Checkbox Section */
#addSpotForm div:has(> #pro_only_checkbox) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #fffbe6;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid #ffe58f;
}

#addSpotForm #pro_only_checkbox {
  width: 1.2em;
  height: 1.2em;
  accent-color: var(--brand-green);
}

/* 7. Action Buttons */
#addSpotForm button[type="submit"] {
  background-color: var(--brand-green-dark);
  color: white;
  border: none;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  transition: background-color 0.2s, transform 0.2s;
}

#addSpotForm button[type="submit"]:hover {
  background-color: #3aa870; /* Slightly lighter green */
  transform: translateY(-2px);
}

/* 8. Discord Button Consistency */
#addSpotContent #discord-account-button-2 {
  background-color: #5865F2;
  color: white;
  border: none;
  transition: background-color 0.2s;
}
#addSpotContent #discord-account-button-2:hover {
  background-color: #4752c4;
}

@media screen and (max-width: 480px) {
  /* In the login modal, stack social icons vertically on small screens */
  #mail_loginModal .flex.space-around.items-center {
    flex-direction: column;
    gap: 1rem; /* Add space between the stacked items */
  }
}












/* --- Final CSS for a responsive, single-line form --- */

/* --- Final, Consolidated CSS for the Join/Email Form --- */

.join-form-container {
  /* This centers the group using its parent's "text-align: center" */
  display: inline-flex;
  
  /* These rules align the items and set a default width */
  align-items: stretch;
  gap: 8px;
  width: 90%;
  max-width: 500px;
}

.join-form-container #login_email {
  /* These rules make the input flexible and prevent overflow */
  flex: 1;
  min-width: 0;
  margin: 0;
  width: auto;
}

.join-form-container #mail_login_submit {
  /* This prevents the button from getting squished */
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Responsive styles for small screens --- */
@media screen and (max-width: 480px) {
  .join-form-container {
    /* Reduce space between elements */
    gap: 4px; 
    /* Increase width to reduce side margins */
    width: 95%; 
  }

  /* Adjust padding and font for a better fit on mobile */
  .join-form-container #login_email,
  #mail_login_submit.discord-account-button {
    padding: 10px 8px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Satellite Timeline
   ========================================================================== */
#satellite-timeline-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(10px);
  padding: 12px 16px;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  /* Shadow lives only when .visible — when the panel is translated off-screen,
     transforms don't clip box-shadow, so the -4px/20px upward shadow was
     leaking a ~20px darkened band into the viewport bottom (visible as a
     "rectangle at the bottom" on both mobile and desktop). Moving box-shadow
     onto .visible-only keeps the visual depth when the panel is open, without
     the perpetual bleed when it's closed. */
}

#satellite-timeline-panel.visible {
  transform: translateY(0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* the closed panel is only translated off-screen, still rendered: its
   placeholder spinner would otherwise animate forever on the compositor */
#satellite-timeline-panel:not(.visible) *,
#satellite-timeline-panel:not(.visible) {
  animation-play-state: paused !important;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.timeline-header h4 {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.timeline-header .current-date {
  color: var(--brand-green);
  font-weight: 600;
  margin-left: 10px;
}

#timeline-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: none;
}

#timeline-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.timeline-container {
  position: relative;
  width: 100%;
}

.timeline-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-green) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
  user-select: none;
}

.timeline-track::-webkit-scrollbar {
  height: 8px;
}

.timeline-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.timeline-track::-webkit-scrollbar-thumb {
  background: var(--brand-green);
  border-radius: 4px;
}

.timeline-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  min-width: 70px;
}

.timeline-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.timeline-item.active {
  background: rgba(174, 220, 89, 0.2);
  border-color: var(--brand-green);
}

.timeline-item .year {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.timeline-item .month {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.timeline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
}

.timeline-loading .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--brand-green);
  border-radius: 50%;
  animation: timeline-spin 0.8s linear infinite;
  margin-right: 10px;
}

@keyframes timeline-spin {
  to { transform: rotate(360deg); }
}

/* Mobile responsive */
@media screen and (max-width: 600px) {
  #satellite-timeline-panel {
    padding: 10px 12px;
  }
  
  .timeline-item {
    min-width: 60px;
    padding: 5px 8px;
  }
  
  .timeline-item .year {
    font-size: 12px;
  }
}