/***********************************************************
   map-view.css
   (Consolidated from surveys.css & phillymap.css)
************************************************************/

/* ── Hide Mapbox controls until the map has finished loading ───────── */
html.pre-map .mapboxgl-ctrl           { opacity: 0 !important; pointer-events:none; }
html.pre-map .mapboxgl-ctrl-group,
html.pre-map .mapboxgl-ctrl button    {          /* kill white flashes */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Once the class is gone we can fade them in nicely                   */
.mapboxgl-ctrl { transition: opacity .25s ease; }

/***********************************************************
  1) Base Reset / Box-Sizing
************************************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hide every Mapbox control until JS re-enables them */
.mapboxgl-ctrl         { opacity: 0 !important; pointer-events: none; }
.map-ready .mapboxgl-ctrl {          /* class added once the style loads */
  opacity: 1 !important;
  pointer-events: auto;
  transition: opacity .2s ease;      /* nice fade-in */
}


/***********************************************************
  2) Fullscreen Map Layout
************************************************************/
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrolling for a true fullscreen map */
  font-family: Arial, sans-serif;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
  bottom: 0;
  z-index: 1; /* behind UI elements */
  background-color: #f0f0f0;
}



/***********************************************************
  3) From surveys.css
************************************************************/

/* Hidden utility class */
.hidden {
  display: none !important;
}

/* Category display order hidden by default */
#cat-display-order {
  display: none;
}


/* Responsive adjustments for .container, .header, forms, etc. */
@media (max-width: 768px) {
  .container {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
  }
  .header h2 {
    font-size: 1.25rem;
  }
 input[type="text"],
textarea,
select {
  padding: 0.5rem;
  border: 1px solid #ccc; 
  border-radius: 4px;
  font-size: 1rem;
}
  .save-button,
  .close-button {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }
}

/* ADVANCED SECTION */
.advanced-section {
  margin: 1em 0;
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 6px;
  background-color: #f9f9f9;
}
#advanced-toggle {
  cursor: pointer;
  font-weight: 600;
  margin-top: 1em;
  color: #007bff;
}
#advanced-toggle:hover {
  text-decoration: underline;
}

/* SURVEY BUILDER / SURVEYS-SPECIFIC */

/* Surveys list */
#surveys-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.2rem;
}
#surveys-list li {
  background: #f5f5f5;
  margin-bottom: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#surveys-list li strong {
  margin-right: 1rem;
}
#surveys-list button {
  margin-left: 0.4rem;
}

/* Survey builder container */
#survey-builder {
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  margin-top: 1.2rem;
}
#survey-builder-title {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

/* Each question row */
.survey-question-row {
  margin-bottom: 1rem;
  padding: 0.8rem;
  background-color: #fff;
  border-bottom: 0px solid #ccc; /* Changed from 1 */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}


.survey-question-label {
  font-weight: bold;
  margin-bottom: 0.3rem; /* spacing under label */
}

.survey-input {
  padding: 0.5rem;       /* space between text and boundary */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}


/* The first row with type/label/required, smaller select width */
.survey-question-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.survey-question-header select {
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100px;
}
.survey-question-header input[type="text"] {
  min-width: 240px;
  font-weight: bold; 
  font-size: 1.05rem;
}

.survey-question-row img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
}

.question-options-panel {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px dashed #ccc;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.question-options-panel ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0;
}
.question-options-panel li {
  margin-bottom: 0.4rem;
}
.question-options-panel button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  margin-right: 0.5rem;
  font-size: 0.8rem;
}
.question-options-panel button:hover {
  background: #ddd;
}

/* Move up/down/remove row controls */
.question-row-controls {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  justify-content: flex-end;
}
.question-row-controls button {
  background: #ddd;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.question-row-controls button:hover {
  background: #ccc;
}

/* "Create New Survey" */
#create-survey-button {
  background: #28a745;
  border: none;
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 1rem;
}
#create-survey-button:hover {
  background: #218838;
}

/* "Save Survey" / "Cancel" in builder */
#save-survey-button,
#cancel-survey-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  border-radius: 5px;
  margin-right: 0.8rem;
  cursor: pointer;
}
#save-survey-button:hover,
#cancel-survey-button:hover {
  background-color: #0056b3;
}
#cancel-survey-button {
  background-color: #6c757d;
}
#cancel-survey-button:hover {
  background-color: #5a6268;
}

/* Smaller screens for survey questions */
@media (max-width: 768px) {
  .survey-question-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .question-options-panel ul {
    margin-left: 1rem;
  }
  #survey-builder,
  .survey-question-row {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
  }
}



/* Quill or other rich-text images */
.ql-editor img,
#view-survey-questions img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lighter font for instructions or descriptions */
.survey-question-description {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* Required field tag */
.survey-required-badge {
  color: red;
  margin-left: 3px;
  font-weight: normal;
}

/* Buttons in “Preview Survey” */
.preview-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-end;
}
.preview-buttons button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
}
.preview-buttons button:hover {
  background-color: #0056b3;
}


#category-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}
#category-table th,
#category-table td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}
#category-table th {
  background: #f8f8f8;
}

/* Icon buttons */
.geom-icon {
  font-size: 1.2rem;
  cursor: default;
  margin-right: 6px;
}
.action-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0 4px;
}
.action-btn i {
  font-size: 1rem;
  color: #555;
}
.action-btn i:hover {
  color: #000;
}

/* Nav buttons wrap on small screens */
.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1em;
}

/* “Surveys” button (yellow) */
.surveys-button {
  background-color: #ffc107;
  color: #111;
  border: none;
  margin: 0 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.surveys-button:hover {
  background-color: #e0a800;
}

/* “Go to Full Map” button => green */
.go-map-button {
  background-color: #28a745;
  color: #fff;
  border: none;
  margin-right: 10px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.go-map-button:hover {
  background-color: #218838;
}


/* Example small icon styling */
.icon-button {
  background-color: #ddd;
  border: none;
  border-radius: 4px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-button:hover {
  background-color: #ccc;
}
.icon-button-yellow {
  background-color: #FFD700;
  color: #333;
}
.icon-button-yellow:hover {
  background-color: #FFC400;
}

/* The map area */
#initial-map {
  width: 100%;
  min-height: 400px;
  box-sizing: border-box;
}

/***********************************************************
   Additional question-unit styling & photo-block
************************************************************/
.question-unit {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0.75rem;
  background-color: #fdfdfd; /* subtle background */
}

.question-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #333;
}

.question-instructions {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.photo-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
  border-radius: 4px;
}

.survey-input.error {
  border: 2px solid red;    /* highlight in red */
  background-color: #ffe6e6; /* optional subtle red background */
}

/* Comments container scroll area */
.comments-scroll {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

/* Truncate .comment-text to 2 lines, until .expanded is toggled */
.comment-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  margin-bottom: 0.5rem;
}
.comment.expanded .comment-text {
  -webkit-line-clamp: unset;
}

/* Expand link: small style */
.comment-info a.expand-link {
  margin-left: 1rem;
  font-size: 0.85rem;
  text-decoration: underline;
  color: #007bff;
}
.comment-info a.expand-link:hover {
  color: #0056b3;
}

/* Feature modal layout */
#feature-modal .modal-content {
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  max-width: 90vw;
  box-sizing: border-box;
}

/* Feature Comments Section */
#feature-modal-comments-list {
  max-height: 250px;       
  overflow-y: auto;        
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}
.feature-comment-item {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.feature-comment-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.feature-comment-item p {
  margin: 0.3rem 0;
}
.feature-comment-item strong {
  font-weight: 600;
  margin-right: 0.3rem;
}
#feature-modal-new-comment {
  width: 100%;
  min-height: 60px;
  resize: vertical;         /* Let user drag to resize if desired */
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 1rem;
  font-family: Arial, sans-serif; /* Matches site fonts */
}


/***********************************************************
  4) From phillymap.css
************************************************************/

/* Banner styles */
/* Default (non-Bootstrap) => narrower width for text-only banner */
/* Common base style for both banners */
.banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* text-based banner => narrower width */
.banner--text {
  width: 50%;
  max-width: 500px;
}

/* image-based banner => automatically fits the image size (inline-block) */
.banner--image {
  display: inline-block;  /* so width matches image + padding */
  /* no forced width => let the image define it */
}

/* ensure the image can scale if needed */
.banner--image img {
  display: block;
  max-width: 100%; 
}


/* 
   If .bootstrap-active => apply 
   a wider width for the banner 
*/
.bootstrap-active .banner {
  display: block;   /* or inline-block, but set width below */
  width: 80%;       /* bigger banner area */
  max-width: 1200px;  
  /* You can keep absolute centering if you want: */
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------
   MOBILE phones: make the text banner a bit slimmer
   --------------------------------------------------*/
@media (max-width: 600px) {

  /* non‑Bootstrap layout → 50 % → keep */
  /* Bootstrap layout   → shrink from 80 % to ~65 % */
  .bootstrap-active .banner--text {
    width: 65%;        /* ≈ 235 px on a 360 px device          */
    max-width: 320px;  /* never get wider than this            */
    padding: 8px 6px;  /* slightly tighter side padding        */
    font-size: 0.95rem;/* optional: slightly smaller headline  */
  }
}

/* Position the Bootstrap panel below the banner so it doesn't overlap */
#button-panel {
  top: 120px; /* Increase from 70px to, say, 120px */
  left: 10px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 10px;
  position: absolute;
}

/* For a horizontal menu on wide screens, vertical on small: */
#button-panel .menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 500px) {
  #button-panel .menu-buttons {
    flex-direction: column; /* vertical on small screens */
  }
}
@media (min-width: 501px) {
  #button-panel .menu-buttons {
    flex-direction: row;    /* horizontal on bigger screens */
  }
}


/* -- new vertical buttons --*/
/* Place the button panel below the banner, on the left side */
#button-panel {
  position: absolute;
  top: 120px; /* Adjust to be below your banner’s vertical space */
  left: 10px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 10px;
  /* No width defined, so it auto-sizes around content. If you want a fixed width, add width: 200px */
}

/* Force the Bootstrap “menu-buttons” to be vertical in all screen sizes */
#button-panel .menu-buttons {
  display: flex;
  flex-direction: column; /* always vertical */
  gap: 0.5rem; /* spacing between buttons */
}

/* Example: each .gbtn can be full width if you like: */
#button-panel .menu-buttons .gbtn {
  width: 100%; /* have each button fill the container’s width */
  justify-content: flex-start; /* keep icon/text aligned left (if needed) */
  font-size: 1rem;
  font-weight: normal;
  padding: 6px;
  height: auto;
}

/* ^^^ new vertical buttons ^^^ */

.menu-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Vertical below 500px */
@media (max-width: 500px) {
  .menu-buttons {
    flex-direction: column;
  }
}

/* Horizontal above 500px */
@media (min-width: 501px) {
  .menu-buttons {
    flex-direction: row;
  }
}


/* Controls styles */
.controls {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 101;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.controls button {
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.controls button i {
  margin: auto;
  display: block;
}
.controls button:hover {
  background-color: #0056b3;
}

/* Mapbox control adjustments */
.mapboxgl-ctrl-top-right {
  position: fixed;
  top: 10px !important;
  right: 10px !important;
  z-index: 5;
}

/* Point form styles */
#point-form {
  display: flex;
  flex-direction: column;
}
#point-form label,
#point-form input,
#point-form button {
  margin-top: 5px;
}
#point-form button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
#point-form button:hover {
  background-color: #0056b3;
}

/* Button styles for edit/delete/close */
.edit-btn,
.delete-btn,
.close-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin: 5px 0;
  width: 100%;
}
.edit-btn:hover,
.delete-btn:hover,
.close-btn:hover {
  background-color: #0056b3;
}

/* new modal (phillymap custom)
.modal {
  Overlapping definitions, used for different modals with different z-indices, etc. 
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 10px;
}  */

.modal-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* if you also want to center it */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    max-width: 90%;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .controls {
    top: 10px;
    left: 10px;
    flex-direction: column;
    gap: 10px;
  }
  .controls button {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

@media (min-width: 992px) {
  .modal-content.form-modal-content {
    max-width: 600px; /* or 70%, 80%, etc. */
    width: 80%;
    margin: 0 auto;  /* center horizontally */
  }
}


.rounded-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  display: inline-block;
}
.rounded-button:hover {
  background-color: #0056b3;
}

/* Alternative text based buttons */
.generic-panel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  z-index: 9999;  /* ensure above map */
  flex-direction: column;
  gap: 0.5rem;
}

/* Basic generic button look. Adjust as desired: */
.gbtn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: #666;
  border: none;
  border-radius: 0;   /* remove rounding */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-bottom: 0.3rem;
}

.gbtn:hover {
  opacity: 0.85;
}

.gbtn:active {
  opacity: 0.75;
}

/* Additional color variants */
.gbtn-primary   { background-color: #007bff; }
.gbtn-success   { background-color: #28a745; }
.gbtn-warning   { background-color: #ffc107; color: #000; }
.gbtn-info      { background-color: #17a2b8; }
.gbtn-danger    { background-color: #dc3545; }
.gbtn-secondary { background-color: #6c757d; }
.gbtn-dark      { background-color: #343a40; }
.gbtn-outline   {
  background-color: transparent;
  color: #333;
  border: 1px solid #333;
}

/* Simple dropdown for your generic version. Similar to "round" style. */
.gbtn-dropdown {
  position: relative;
  display: inline-block;
}

.gbtn-dropdown-content {
  display: none;
  position: absolute;
  min-width: 120px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 4px;
  z-index: 9999;
}

/* Show on hover, or manage via JS. */
.gbtn-dropdown:hover .gbtn-dropdown-content {
  display: block;
}

.gbtn-dropdown-content a {
  color: #333;
  padding: 4px;
  text-decoration: none;
  display: block;
}

.gbtn-dropdown-content a:hover {
  background-color: #ddd;
}


.tag-filter-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
#tag-checkboxes .tag-checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Comment styling */
#comments-container {
  margin-top: 20px;
  max-height: 200px;
  overflow-y: auto;
}
.comment {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.comment p {
  margin: 0;
}
.comment small {
  color: #777;
}

/* Toggle Language button */
#toggle-language {
  width: 50px;
  height: 50px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 1;
}

/* Toggle I'm Here button 
#click-point {
  width: 50px;
  height: 50px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;     /* center text horizontally */
  white-space: normal;    /* allow text to wrap 
} */

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Mapbox control layering */
.mapboxgl-ctrl {
  z-index: 10; /* Ensure controls are above the map */
  position: relative; /* Avoid inheritance issues */
}
.mapboxgl-ctrl-top-right {
  margin-top: 10px;
  margin-right: 10px;
  z-index: 15;
}
.mapboxgl-ctrl .mapboxgl-ctrl-button {
  width: 40px;
  height: 40px;
}
.mapboxgl-ctrl .mapboxgl-ctrl-icon {
  line-height: 40px;
}

/* ======================================== */
/* Toast Version 2 fadeInOut, black text, white bg*/
/* ======================================== */

/* Container for all toasts */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Base .toast class => immediate display, plus transition for fade-out */
.toast {
  background: rgba(0, 0, 0, 0.8); /* or gray, or white, your choice */
  color: #fff;                    /* text color */
  padding: 0.8rem 1.2rem;
  margin-top: 0.5rem;
  border-radius: 4px;
  font-size: 1rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: auto;
}

/* Variation for “success” => override background if you like */
.toast-success {
  background: rgba(40, 167, 69, 0.9); /* greenish */
}

/* Variation for “error” => override background if you like */
.toast-error {
  background: rgba(220, 53, 69, 0.9); /* red */
}

/* Fade-out class => triggered by your setTimeout in toast.js */
.toast.toast-fade-out {
  opacity: 0;
  transform: translateY(20px);
}

.toast.toast-icon {
  background: #6c757d; /* or any color */
  color: #fff;
}
/* fadeInOut animation */
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(10px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

/* All submit-type buttons */
.save-button,
.close-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  margin-right: 10px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;    
  display: flex;
  align-items: center;
  gap: 6px;           
}

.save-button:hover,
.close-button:hover {
  background-color: #0056b3;
}

/* Make the close button red but remove the extra 1.2rem font-size */
.close-button {
  background: #dc3545; 
}

.close-button:hover {
  background-color: #c82333;
}

.form-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px; 
}

/* Mapbox attribution block */
.mapboxgl-ctrl-attribution {
  font-size: 12px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 5px;
}
.mapbox-credits {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;
  z-index: 100;
}
/* Fixes to welcome survey */
.survey-question-row.html-question {
  background-color: #fff !important; 
  padding: 1rem !important;
}

/* Ensure bullet list is clearly inside the question area */
li[data-list="bullet"] {
  margin-left: 1.2em; 
}
/*li[data-list="bullet"] .ql-ui {
  margin-right: 0.5em;
}
*/

h3 {
  margin-bottom: .7rem; 
}

.banner-img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}

.banner-fallback {
  width: 90%;
  min-height: 50px;
  padding: 0.5rem;
  color: #fff;
  box-sizing: border-box;
}

#banner-area > div.banner.banner--text.banner--mobile {
  display: none; /* hide by default */
}

@media (max-width: 600px) {
  #banner-area > div.banner.banner--text.banner--mobile {
    display: block; /* show on smaller screens */
  }
}

.generic-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  z-index: 999;
}

.gbtn {
  /* your button styling, e.g. background, border, etc. */
  margin: 2px;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.gbtn-primary { background-color: #007bff; color:#fff; }
/* etc. for gbtn-success, gbtn-warning, gbtn-info, etc. */

/* Increase font size for .gbtn when in bootstrap mode */
.bootstrap-active .gbtn {
  font-size: 16px; /* or 15px, etc. */
  /* optionally adjust padding if you like */
  padding: 0.5rem 1rem;
}

/* The banner (image or text) is absolute at top:10px. 
   Let's assume its approximate height is around 60px. 
   We'll place the .menu-buttons/panel at top: (10px + 60px + 5px) = 75px 
*/
.bootstrap-active #button-panel {
  position: absolute;
  left: 10px;
  top: 180px; /* place it ~5px below the ~60px banner */
  /* adjust if your banner is bigger/smaller */
}

.ql-editor img { max-width: 100%; height: auto; } 

.modal-content .ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;  /* or inline-block */
  margin: 0 auto;  /* center them if you want */
}

/* Hide .banner--mobile by default; show .banner--image */
.banner--image {
  z-index: 600;
  display: inline-block;
  display: none;
}
.banner--mobile {
  display: none;
}

/* Hide the text fallback banner on large screens if it’s in .banner--mobile */
.banner--mobile {
  display: none;
}

/* On smaller screens, hide the image & show the fallback text */
@media (max-width: 500px) {
  .banner--image {
    display: none !important;
  }
  .banner--mobile {
    display: block !important;
  }
}

.mapboxgl-popup-content {
  white-space: normal;        /* allow wrapping */
}

window.map.on('mouseenter', lyr, e => {
  lastId = null;               // force rebuild once
  handleHover(e);              // build + show immediately
  window.map.on('mousemove', lyr, throttle(handleHover, 70));
});
window.map.on('mouseleave', lyr, () => {
  hoverPopup?.remove();
  window.map.off('mousemove', lyr, handleHover);
});

/* highest priority modal – sits on top of the feature-info modal */
#edit-response-modal {
  position: fixed;
  z-index: 12000;        /* feature-modal is ~10000, Draw controls ~999 */
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ─── language picker (inside controls / button panel) ─── */
#language-picker-wrapper{
  margin-top: 6px;          /* small gap below Logout */
  font-size: 0.85rem;
}

/* ─── Language-picker width fix ─────────────────────────── */
.language-picker{
  width: 100%;          /* stays as narrow as its parent (.controls / .menu-buttons) */
  max-width: 120px;     /* hard cap so long labels never widen the column  */
  font-size: .85rem;
  padding: 4px 6px;
}

/* hide long labels once the <select> is closed (only the chosen one shows) */
.language-picker option{ white-space:nowrap; }

/* survey look for the feature-description textarea */
textarea.survey-input {
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  resize: vertical;
}

.legend-item   {display:flex; align-items:center; gap:8px; margin:4px 0;}
.legend-swatch {width:18px; height:18px; flex:0 0 auto;}

/* extra helpers for dashed / dotted lines */
.legend-line-dashed {background-image:linear-gradient(to right,
                           currentColor 0 50%, transparent 50% 100%);
                     background-size:6px 100%;}
.legend-line-dotted {background-image:radial-gradient(currentColor 30%,
                           transparent 31%);
                     background-size:4px 4px;}

#banner-area{
  position:relative;          /* create a stacking context */
  z-index:100;                 /* above the map (0 / 1)      */
  display:flex;
  flex-direction:column;
  align-items:center;
}


.zoom-select{
  max-width:240px;
}

/* banner holder stays as is 
#banner-controls{
  position:relative;
  display:flex;
  justify-content:center;
  margin-top:0px;
  z-index:110;
} */

/* ────────────────────────────────────────────────────────────────
   1)  Zoom-to  ► styling  +  initial positioning
   ──────────────────────────────────────────────────────────────── */

/* holder row – absolutely centred inside #banner-area */
#banner-controls{
  position:absolute;           /* out of normal flow            */
  left:50%;                    /* centre horizontally           */
  transform:translateX(-50%);
  top:60px;                    /* ⚠️ fallback until JS overwrites */
  z-index:110;
  display:flex;
  justify-content:center;
}

/* the <select> itself – one definition only */
#banner-controls .zoom-select{
  width:220px;                 /* desktop & tablet */
  max-width:90vw;              /* never explode    */
  font-size:0.95rem;
  padding:0.45rem 0.75rem;
  border:1px solid #777;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  box-sizing:border-box;
}

/* a touch smaller on tiny phones */
@media (max-width:480px){
  #banner-controls .zoom-select{ width:180px; font-size:0.88rem; }
}

/* ────────────────────────────────────────────────────────────────
   2)  Text banner (“no image”) – let content set the width
   ──────────────────────────────────────────────────────────────── */
.banner--text{
  display:inline-block;
  width:auto;                  /* ≈ text-width */
  max-width:90vw;              /* safety cap   */
  padding:10px 40px;
  white-space:nowrap;
}

/* keep the wide image banner only for Bootstrap flavour */
.bootstrap-active .banner--image{
  width:80%;
  max-width:1200px;
}

/* ────────────────────────────────────────────────────────────────
   3)  Responsive switch  (image → text below 400 px)
   ──────────────────────────────────────────────────────────────── */
.banner--image { display:inline-block; }
.banner--mobile{ display:none; }

@media (max-width:400px){      /* your cut-off */
  .banner--image { display:none !important; }
  .banner--mobile{ display:block !important; }
}




/* ────────────────────────────────────────────────────────────────
   1) Global knobs – tweak once, both UIs follow the change
   ──────────────────────────────────────────────────────────────── */
:root{
  /* horizontal / vertical padding for text buttons  */
  --pad-x : clamp(0.55rem, 1.6vw, 0.80rem);   /* <-- adjust to taste */
  --pad-y : clamp(0.32rem, 0.9vw, 0.46rem);

  /* size & icon font for round buttons              */
  --round-size : clamp(46px, 6vw, 54px);       /* diameter            */
  --round-font : clamp(21px, 2.4vw, 25px);     /* icon size           */
}

/* ────────────────────────────────────────────────────────────────
   2) Bootstrap panel (#button-panel → .gbtn)
   ──────────────────────────────────────────────────────────────── */
.bootstrap-active #button-panel .gbtn{
  padding   : var(--pad-y) var(--pad-x);
  font-size : clamp(0.85rem, 2.3vw, 0.95rem);
  line-height:1;                 /* keeps vertical centring crisp   */
}

/* ────────────────────────────────────────────────────────────────
   3) Round icon panel (.controls)
   ──────────────────────────────────────────────────────────────── */
.controls{
  padding : calc(var(--pad-y) + 4px);  /* a hair more white-space   */
}

.controls button{
  width      : var(--round-size);
  height     : var(--round-size);
  font-size  : var(--round-font);
  /* keep existing styles (bg-color, border-radius, etc.) intact   */
}

/* fine-tune on very small phones if you like */
@media(max-width:400px){
  :root{
    --pad-x: 0.5rem;
    --pad-y: 0.28rem;
    --round-size: 44px;
    --round-font: 20px;
  }
}


/* -----------------------------------------------------------------
   Bootstrap layout → swap image banner for text banner on phones
   ----------------------------------------------------------------- */
@media (max-width:500px){

  /* force-hide the image banner */
  body.bootstrap-active .banner--image{
    display:none !important;     /* ← override everything above */
  }

  /* and show the pre-rendered text fallback */
  body.bootstrap-active .banner--mobile{
    display:inline-block !important;
  }
}


/* -------------------------------------------------------------
   Bootstrap layout + TEXT-only banner  →  keep it pleasantly
   narrow instead of stretching to 80 % of the page
   ------------------------------------------------------------- */
body.bootstrap-active .banner--text:not(.banner--mobile){
  /* let the text decide the width, but cap it on large screens */
  width: auto;                 /* shrink-to-fit the heading    */
  max-width: 50vw;             /* never wider than half screen */
  padding: 10px 40px;          /* same comfy padding you had   */

  /* horizontal centring still comes from the .banner base rule */
}


/* ----------------------------------------------------------
   MOBILE FALL-BACK
   – on phones ( ≤ 480 px CSS width )
     • hide the image banner
     • show the text fallback
   ---------------------------------------------------------- */
@media (max-width:600px){
  /* hide any visible image banner (use !important so nothing resurrects it) */
  .banner--image      { display:none   !important; }

  /* show the text fallback if it exists */
  .banner--mobile,
  .banner--text.banner--mobile{
    display:block     !important;
    width:auto;              /* hug text */
    max-width:90vw;          /* safety cap */
    white-space:nowrap;      /* stay on one line */
    padding:10px 20px;
  }
}

/* if you only want gaps *between* paragraphs */
.modal-body p:first-child { margin-top: 0; }
.modal-body p:last-child  { margin-bottom: 2 em; }

/* public/css/modals.css */
#edit-response-modal        { align-items:flex-start; overflow-y:auto; }
.form-modal-content         { max-height:90vh; overflow-y:auto; }





/* top bar */
.topbar{
  display:flex;align-items:center;gap:.6rem;
  height:44px;padding:0 .75rem;
  background:var(--menu-color,#0d6efd);color:#fff;
  position:fixed;top:0;left:0;right:0;z-index:1000;
}
.hamburger{background:none;border:none;color:inherit;font-size:1.4rem;cursor:pointer}
.topbar-title{font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* sidebar */
.sidebar{
  position:fixed;top:44px;left:-260px;width:260px;height:calc(100% - 44px);
  background:#fff;box-shadow:2px 0 6px rgba(0,0,0,.2);
  transition:left .25s;z-index:999;
}
body.sidebar-open .sidebar{left:0}
.sidebar-inner{display:flex;flex-direction:column;padding:1rem;gap:.5rem}
.sidebar-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;
  font:inherit;padding:.5rem .25rem;text-align:left;cursor:pointer}

/* push the map & banner down */
body[data-ui-theme="sidebar"] #banner-area,
body[data-ui-theme="sidebar"] #map,
body[data-ui-theme="sidebar"] .controls,
body[data-ui-theme="sidebar"] #button-panel{
  top:44px; /* same height as topbar */
}

/* nudge Mapbox top-right controls 20 px below the map edge */
.mapboxgl-ctrl-top-right {
  top: 50px !important;   /* override Mapbox’s default `top:0` */
}


.custom-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: none;                 /* toggled by JS */
  align-items: center; justify-content: center;
  z-index: 1050;
}
.custom-modal-box {
  background:#fff; border-radius:8px; overflow:auto;
  max-width: 90vw; max-height: 90vh;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
  position: relative;
}
.custom-modal-box .modal-close-btn{
  position:absolute; top:6px; right:10px; border:none;
  background:none; font-size:28px; cursor:pointer;
}




/* === custom-modal links – sidebar (hamburger theme) =============== */
#custom-modals-slot {                /* the little “bucket” we add     */
  margin-top: .5rem;                 /* push away from Logout           */
}

#sidebar .custom-modal-link {
  display: block;                    /* one per line                    */
  padding: .25rem 0;
  text-decoration: none;
  color: inherit;                    /* follow your existing menu colour*/
}

#sidebar .custom-modal-link:hover {
  text-decoration: underline;        /* same hover feedback             */
}

#sidebar .custom-modal-link i {      /* font-awesome icon               */
  min-width: 1.25em;                 /* align nicely                    */
  text-align: center;
  margin-right: .25em;
}

/* === pill-bar buttons (classic / text themes) ====================== */
#button-panel .custom-modal-link {   /* we build real <button>s there   */
  margin-top: .25rem;                /* small gap under the previous btn*/
  white-space: nowrap;               /* keep icon + title on one line   */
}


/* shared rules for every “extra modal” link / button */
.custom-modal-link {
  display: flex;
  align-items: center;
  gap: .35rem;               /* icon ↔ label spacing               */
  font-size: inherit;        /* inherit menu font                  */
  line-height: 1.25;
}

/* sidebar version lives in a <li> so we just need block flow */
#sidebar .custom-modal-link {
  padding: .35rem 0;
  text-decoration: none;
  color: inherit;
}
#sidebar .custom-modal-link:hover { text-decoration: underline; }

/* pill-bar buttons already use .btn so nothing extra needed */

/* ═══ Custom info modals – same look as pd-style dialogs ══════════ */

.custom-modal-overlay {
  /* backdrop identical to .modal (darken everything behind) */
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: none;                /* toggled to flex by JS          */
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.custom-modal-box {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  padding: 24px;                /* same inner spacing             */
  max-width: 680px;             /* pd-style’s default             */
  width: auto;                  /* JS still overrides width/height*/
  overflow: auto;               /* enable scroll if content tall  */
}

.custom-modal-box .modal-close-btn{
  position:absolute; top:12px; right:12px;
  font-size:28px; line-height:1;
  background:none; border:0; cursor:pointer;
  color:#000;
}

/* TinyMCE’s content.css now handles all p / ul / ol spacing.       */
/* These two rules only keep first & last blocks from being squished*/
#custom-modal-body p:first-child { margin-top:0; }
#custom-modal-body p:last-child  { margin-bottom:0; }


#zoomto-bar{
  position: absolute;
  top: 52px;             /* just below the blue bar (⤴ adjust if your bar height changes) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;         /* above the map, below any modals */
  width: 260px;          /* matches edit-page preview */
}
body.sidebar-open #zoomto-bar{
  /* keep it centred even when sidebar slides in */
  left: calc(50% + 130px);   /* half the 260-px sidebar width */
}

/* one class that you reuse on every green button */
.menu-btn{
  display:flex;                 /* icon + text on one row            */
  align-items:center;           /* vertically centre them             */
  gap:0.5em;                    /* ←-- equal space between the two    */
  padding:0.65em 1.0em;         /* keeps hit-area comfy               */
  font-size:1.15rem;            /* whatever size you need             */
  border:none;
  border-radius:6px;
  background:#15a544;           /* your green                         */
  color:#fff;
  cursor:pointer;
}
/* make sure the icon never stretches */
.menu-icon{
  flex:none;
  line-height:0;                /* nicer vertical centring for SVG    */
  font-size:1.25em;             /* slight emphasis if you like        */
}

/* generic menu button tidy-ups */
.menu-icon   { flex:0 0 auto; line-height:1; }   /* keeps icon from stretching */
.menu-label  { line-height:1; }                  /* vertically centers text   */


/* ─── minimal dropdown styling (no Bootstrap required) ───────── */
.dropdown, .btn-group { position: relative; }          /* anchor */

.dropdown-menu{
  position: absolute;
  left: 0;                    /* align with toggle */
  top: 100%;                  /* directly below   */
  min-width: 140px;
  display: none;              /* hidden by default */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: .25rem 0;
  z-index: 1000;
}

.dropdown-menu.show{ display: block; }

.dropdown-menu .dropdown-item{
  padding: .25rem .75rem;
  cursor: pointer;
  white-space: nowrap;
  font-size: .9rem;
}

.dropdown-menu .dropdown-item:hover{
  background: #f5f5f5;
}


/* =================================================================
   LANGUAGE DROPDOWN – neutral Bootstrap-ish look (no extra bundle)
   =================================================================*/
.language-dropdown{
  min-width:180px;
  padding:4px 0;
  margin:0;
  border:1px solid #d0d0d0;
  border-radius:4px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  list-style:none;                /* remove bullets (just in case)   */
  font-family:inherit;            /* keep site’s font                */
}

.language-dropdown .dropdown-item{
  display:block;                  /* full-width click target         */
  width:100%;
  padding:6px 16px;
  color:#212529;                  /* neutral dark text               */
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}

/* hover / focus */
.language-dropdown .dropdown-item:hover,
.language-dropdown .dropdown-item:focus{
  background:#0d6efd;             /* same blue as other UI bits      */
  color:#fff;
}

/* optional: make the “🌐 Language” row look disabled */
.language-dropdown .dropdown-item.is-header{
  font-weight:600;
  cursor:default;
  background:#f8f9fa;
  color:#495057;
  pointer-events:none;            /* not clickable                   */
}

/* put this in your main CSS bundle */
.mapboxgl-canvas + div[role="note"]{
  z-index: 5;            /* above the canvas */
}

/* make sure the navigation footer is visible */
.modal-footer{
  display:flex;
  justify-content:center;
  gap:.75rem;
  padding-top:1rem;
  border-top:1px solid #e0e0e0;   /* optional – visual separation */
}