/* Plan (pseudocode):
   - Allow the map to receive pointer events through empty header areas by disabling pointer events on #button-container.
   - Re-enable pointer events for interactive elements (buttons, search input, slider) so they still work.
   - Make decorative side stripes non-interactive so dragging the map works under them.
*/

#button-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;         /* override prior 10vh */
    min-height: 56px;     /* reasonable minimum for small screens */
    background: transparent;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
    box-shadow: none;

    /* Let pointer events pass through empty areas to the map */
    pointer-events: none;
}

/* Interactive elements (kept for clarity; harmless if pointer-events is auto) */
#button-container a,
#button-container button,
#search-bar,
#rbslider,
#suggestions,
#suggestions *,
#mobile-level-inputs,
#mobile-level-inputs *,
#button-container select,      /* and any future selects in the header */
#button-container .form-select /* bootstrap select class */
{
    pointer-events: auto;
}

#search-container {
    position: relative; /* Ensure it stays within the button container */
    margin-top: 20px; /* Add spacing below the buttons */
    text-align: center; /* Center-align the search bar and slider */
    width: 100%; /* Ensure it spans the full width */
    box-shadow: none; /* Remove aura from the container */
    animation: none; /* Disable animation for the container */
    /* Removed side padding that displaced child elements */
}

/* Ensure sizing includes padding/borders */
#search-wrapper,
#search-bar,
#suggestions,
#slider-container,
#mobile-level-inputs {
    box-sizing: border-box;
}

/* Wrapper anchors the dropdown relative to the input and centers both.
   Keep it within the gap between the side panels:
   - Gap = 100vw - (15vw + 15vw) = 70vw.
   - Subtract a 32px total gutter for breathing room.
   - Also cap to 600px for aesthetics.
*/
#search-wrapper {
    position: relative;
    width: 100%;
    /* Match the previous selector’s cap while still respecting the side-panel gap */
    max-width: min(320px, calc(100vw - 30vw - 32px));
    margin: 0 auto;
}

/* Input fills the wrapper width */
#search-wrapper #search-bar {
    width: 100%;
}

#search-bar {
    width: 100%;                  /* Fill wrapper, no overflow */
    max-width: none;              /* Let wrapper control sizing */
    margin: 0;                    /* Centering handled by wrapper */
    padding: 0.25rem 0.5rem;      /* Match Bootstrap -sm controls */
    font-size: .875rem;           /* Match form-select-sm */
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

/* Suggestions dropdown */
#suggestions {
    position: absolute;
    top: calc(100% + 6px); /* below the input */
    left: 0;
    right: 0;
    display: none;
    text-align: left;
    background: rgba(255, 255, 255, 0.98);
    color: #111;
    border: 1px solid #ccc;
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    z-index: 1500; /* above stripes (1001) and header (1000) */
}

.suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: #f0f6ff;
}

/* Keep slider area centered and inside side-panel gap */
#slider-container {
    width: 100%;
    /* Never exceed 30% of viewport width; also stay inside the side-panel gap */
    max-width: min(30vw, calc(100vw - 30vw - 32px));
    margin: 12px auto 0;
}

/* Make the values and the slider fill the capped container width */
#slider-container #slider-values,
#slider-container #rbslider {
    width: 100%;
    max-width: 100%;
}

/* Mobile-only inputs: keep centered and within the gap */
#mobile-level-inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: calc(100vw - 30vw - 32px);
    margin: 8px auto 0;
}

/* Optional: give numeric inputs a reasonable width on small screens */
#mobile-level-inputs input[type="number"],
#mobile-level-inputs select {
    width: 80px;
}

#left-stripe, #right-stripe {
    background-image: url('/images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
    animation: dark-pulsating-aura 2s infinite;

    /* Stripes are decorative; don't block map dragging */
    pointer-events: none;
}

#left-stripe {
    position: fixed;
    top: 10%;
    left: 0;
    height: 80%;
    width: 15%;
    z-index: 1001;

    contain: paint;
}

#right-stripe {
    position: fixed;
    top: 10%;
    right: 0;
    height: 80%;
    width: 15%;
    z-index: 1001;

    contain: paint;
}

#map-stage { position: relative; }
.marker_flag { position: absolute; }

/* Footer: clan note */
#clan-note {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 1500; /* above stripes (1001) and header (1000), below hints (2000) */
    pointer-events: auto;

    display: inline-block;
    padding: 8px 12px;
    text-align: center;
    color: #fff;
    background: rgba(8, 16, 28, 0.92);
    border: 1px solid rgba(255, 140, 0, 0.65);
    border-color: rgba(170, 215, 255, 0.85);
    border-radius: 10px;

    /* Keep inside the gap between the side panels */
    max-width: calc(100vw - 30vw - 32px);
    font-size: clamp(12px, 1.6vw, 14px);
    line-height: 1.3;
    white-space: normal;
}

#clan-note a {
    color: #ffd27a;
    text-decoration: underline;
}

/* --- Mobile flicker fixes and compositor hints --- */

/* Avoid dynamic 10vh height causing relayout on mobile URL bar show/hide */
#button-container {
  height: auto;         /* override prior 10vh */
  min-height: 56px;     /* reasonable minimum for small screens */
}

/* Stop non-essential animations on touch devices (prevents flicker) */
@media (hover: none), (pointer: coarse) {
  /* Decorative stripes and UI controls */
  #left-stripe, #right-stripe,
  #search-bar, #rbslider .noUi-handle,
  #min-value, #max-value,
  #clan-note,
  #map-hint-arrows .arrow {
    animation: none !important;
  }
}

/* Isolate paint for large decorative stripes over the map */
#left-stripe, #right-stripe {
  contain: paint;
}

/* --- Stabilize header on mobile --- */

/* Keep header on the main layer (avoid 3D text flicker), isolate its paint */
#button-container {
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  will-change: auto;
  isolation: isolate;
  contain: paint;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: disable all header animations/transitions (buttons, select, search, slider) */
@media (hover: none), (pointer: coarse) {
  #button-container,
  #button-container * {
    animation: none !important;
    transition: none !important;
  }
}

/* Map selector: match search field cap and allow shrinking inside flex containers */
#button-container #map-select {
    display: block;
    width: 100%;
    max-width: min(320px, calc(100vw - 30vw - 32px));
    margin: 0 auto;

    /* flex-friendly: allow it to shrink and not impose intrinsic min-width */
    flex: 0 1 auto;
    min-width: 0;
}