/* 🌍 P2V — The Places to Visit (TheP2V.com)
   Final unified CSS — Clean, Responsive, Polished
*/

/* ---------- General Layout ---------- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  color: #000;
}

#map {
  position: relative;
  flex: 1;
  height: 50vh;
}

#filter-bar,
#filter-toggle {
  position: absolute;
  right: 10px;
}


/* ---------- Splash Screen ---------- */
#splash-screen {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#splash-screen img {
  width: 96px;
  height: 96px;
  border-radius: 50%; /* changed from 20% */
  margin-bottom: 18px;
  animation: breath 2.4s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#splash-loader {
  width: 40px;
  height: 40px;
  border: 3px solid #00A3A3;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 14px;
}
#splash-screen p {
  margin: 0;
  color: #333;
  font-weight: 600;
  font-size: 15px;
}
#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------- Locate Me Button ---------- */
#locate-me {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 1000;
  background-color: #00A3A3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
#locate-me:hover { background-color: #008080; transform: scale(1.05); }
#locate-me.active {
  background-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}



#popularityFilterGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
#popularityFilterGroup label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 13px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 10px;
  color: #000;
  cursor: pointer;
}

#popularityFilterGroup input[type=checkbox] {
  accent-color: #00A3A3;
  margin-right: 6px;
}

/* 🎯 Colored icons for popularity categories */
.pop-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* 🔹 Match map marker colors */
.pop-icon.priority { background: #e74c3c; }  /* Red */
.pop-icon.tier1   { background: #e67e22; }  /* Orange */
.pop-icon.tier2   { background: #f1c40f; }  /* Yellow */
.pop-icon.tier3   { background: #27ae60; }  /* Green */
.pop-icon.tier4   { background: #3498db; }  /* Blue */
.pop-icon.tier5   { background: #9b59b6; }  /* Purple */

/* Align and balance inside the label */
#popularityFilterGroup label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #000;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#popularityFilterGroup label:hover {
  background-color: #f2faff;
}


/* ---------- Table Styling ---------- */
#table-container {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  color: #000;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
th {
  background-color: #00A3A3;
  color: #fff;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}
tr:hover { background-color: #eaf4ff; }

/* ✅ Clickable rows (no text selection) */
#places-table tr {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  transition: background-color 0.2s ease;
}
#places-table tr:active {
  transform: scale(0.99);
  background-color: #d9ecff;
}
#places-table select {
  user-select: auto;
  cursor: default;
}

/* ---------- Feedback Modal ---------- */
#feedback-modal {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 4000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#feedback-modal.show {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: #fff;
  padding: 16px 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
#feedback-text {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: none;
}
#feedback-btn {
  background: #00A3A3;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
#feedback-btn:hover {
  background: #008080;
  color: #fff;
}

/* Textarea + sending state */
#feedback-text {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #000;
  background: #fff;
}
#submit-feedback[disabled] {
  background: #008080 !important;
  color: #fff !important;
  opacity: 0.8;
}


#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(173, 240, 240);
  color: #000;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 5000;
  animation: fadeInOut 2.2s ease forwards;
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}


/* ---------- Reset Button ---------- */
.reset-btn {
  background: #f44336;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}
.reset-btn:hover { background: #d32f2f; }

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme: dark) {
  body { background: #0d1117; color: #e6e6e6; }
  #filter-bar { background: rgba(20, 20, 20, 0.97); }
  #popularityFilterGroup label { color: #fff !important; background: #1e1e1e !important; }
  th { background-color: #008080; }
  #toast, #feedback-btn { color: #fff; }
}


/* ✅ Floating Update Toast */
#update-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #00A3A3;
  color: #000;
  padding: 10px 18px;
  border-radius: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 9999;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#update-toast.show {
  opacity: 1;
  pointer-events: auto;
}
#update-toast button {
  background: #fff;
  color: #00A3A3;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
#update-toast button:hover {
  background: #e6f0ff;
}

/* 🔧 Fix: Make Auto-follow toast text more readable */
#toast {
  background: #e0f7f7 !important;  /* light teal */
  color: #000 !important;          /* black text for contrast */
  border: 1px solid rgba(0, 163, 163, 0.3);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ✨ Themed feedback modal heading (teal and bold) */
#feedback-modal h3 {
  color: #00A3A3 !important;   /* brand teal */
  font-weight: 700 !important; /* strong emphasis */
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

/* 📱 Fix table layout for mobile screens */
#table-container {
  width: 100%;
  overflow-x: hidden;
}
#places-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
#places-table th, #places-table td {
  padding: 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
@media (max-width: 600px) {
  #places-table th:nth-child(1), #places-table td:nth-child(1) { width: 42%; }
  #places-table th:nth-child(2), #places-table td:nth-child(2) { width: 20%; }
  #places-table th:nth-child(3), #places-table td:nth-child(3) { width: 18%; }
  #places-table th:nth-child(4), #places-table td:nth-child(4) { width: 20%; }
}


/* 🔧 Keep overlay functional (dark background when active) */
#filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  display: none;
}
#filter-overlay.show {
  display: block;
}




/* 🧭 Keep Send Feedback button clearly visible */
#feedback-btn {
  display: block;
  margin-top: 12px;
  width: 100%;
  text-align: center;
}





/* 🌍 Final layout: wrapped Distance label + fixed Status width */
#places-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* ✅ Allow wrapping only for Name and Distance columns */
#places-table th:nth-child(1),
#places-table td:nth-child(1),
#places-table th:nth-child(3) {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}

/* 🚫 Keep Popularity and Status single-line */
#places-table th:nth-child(2),
#places-table td:nth-child(2),
#places-table th:nth-child(4),
#places-table td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🎯 Adjusted column widths for perfect balance */
#places-table th:nth-child(1),
#places-table td:nth-child(1) { width: 38%; }   /* Place name */
#places-table th:nth-child(2),
#places-table td:nth-child(2) { width: 20%; }   /* Popularity */
#places-table th:nth-child(3),
#places-table td:nth-child(3) { width: 16.5%; } /* Distance (km) */
#places-table th:nth-child(4),
#places-table td:nth-child(4) { width: 25.5%; } /* Status dropdown */

/* 🧭 Header styling */
#places-table th {
  font-size: 13px;
  padding: 6px 4px;
  line-height: 1.3;
  background-color: #00A3A3;
  color: #fff;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #ccc;
}

/* 🪶 Dropdown styling for Status */
#places-table td:nth-child(4) select {
  width: 100%;
  min-width: 130px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 13px;
  background: #fff;
  color: #000;
}

/* 📱 Mobile optimization */
@media (max-width: 600px) {
  #places-table th, #places-table td {
    font-size: 12.5px;
    padding: 5px 3px;
  }
  #places-table th:nth-child(1),
  #places-table td:nth-child(1) { width: 40%; }  /* slightly reduce place width */
  #places-table th:nth-child(3),
  #places-table td:nth-child(3) { width: 16.5%; } /* keep Distance readable */
  #places-table th:nth-child(4),
  #places-table td:nth-child(4) { width: 26%; }   /* fixed Status width */
  #places-table td:nth-child(4) select {
    min-width: 115px;
    font-size: 12.5px;
  }
}




#filter-bar.show {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

/* Reduce height of dropdowns, inputs */
#filter-bar select,
#filter-bar input[type="number"] {
  padding: 4px 6px;
  height: 32px;
  font-size: 13px;
  border-radius: 6px;
}


/* 🎯 Make only Distance and Status labels black */
#filter-bar label[for="distanceFilter"],
#filter-bar label[for="statusFilter"] {
  color: #000 !important;
  font-weight: 600;
}



/* Filter panel — slide out from left */
#filter-bar {
  position: fixed;       /* instead of absolute */
  top: 50px;
  right: 25px;
  background: rgba(255, 255, 255, 0.97);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 3500;         /* ⬆️ higher than leaflet controls */
  width: 260px;
  max-width: 90vw;
  transition: transform 0.3s ease;
}



/* Overlay (to dim background when filter panel open) */
#filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 999;
}
#filter-overlay.show {
  display: block;
}




/* 📜 About Modal */
#about-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#about-modal.show {
  display: flex;
  opacity: 1;
}

.about-content {
  background: #fff;
  color: #000;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.about-content h3 {
  color: #00A3A3;
  margin-top: 0;
}
#close-Btn {
  margin-top: 12px;
  background: #00A3A3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#close-Btn:hover {
  background: #008080;
}


/* ===========================
   🧭 FINAL MAP BUTTON POSITIONS
   =========================== */

/* 📍 Locate Me — bottom-left */
#locate-me {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: auto;
  top: auto;
  z-index: 1100;
  background-color: #00A3A3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
#locate-me:hover {
  background-color: #008080;
  transform: scale(1.05);
}

/* 🎛️ Filter Button — top-right */
#filter-toggle {
  position: absolute;
  top: 10px;
  right: 15px;
  left: auto;
  bottom: auto;
  z-index: 1100;
  background-color: #00A3A3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
#filter-toggle:hover {
  background-color: #008080;
  transform: scale(1.05);
}

/* ℹ️ Info Button — bottom-right, above Leaflet watermark */
#info-btn {
  position: absolute;
  bottom: 20px;    /* sits above the watermark */
  right: 15px;
  left: auto;
  top: auto;
  z-index: 1100;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#info-btn img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#info-btn:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ✖️ Close "X" button for About modal */
#close-about-top {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
  z-index: 10;
}
#close-about-top:hover {
  color: #00A3A3;
  transform: scale(1.1);
}

/* ensure the dialog is the containing block for the absolute button */
.about-content {
  position: relative; /* IMPORTANT for absolute-positioned close button */
}

/* Top-right close button */
#close-about-top {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 20px;
  line-height: 20px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
  z-index: 20;
  padding: 0;
}
#close-about-top:hover {
  background: rgba(0,163,163,0.12);
  color: #00A3A3;
  transform: scale(1.03);
}

/* ensure the bottom Close button is styled consistently */
.modal-close-btn {
  background: #00A3A3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}

#seo-footer {
  text-align: center;
  font-size: 5px;
  color: #333;
  background: #f8fafa;
  padding: 0px 2%;
  border-top: 0px solid rgba(0, 163, 163, 0.25);
  line-height: 1.4;
}

#seo-footer strong {
  color: #00A3A3;
}

#seo-footer em {
  font-style: normal;
  font-weight: 500;
  color: #007a7a;
}

@media (prefers-color-scheme: dark) {
  #seo-footer {
    background: #0d1117;
    color: #ccc;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  #seo-footer strong, #seo-footer em {
    color: #00d5d5;
  }
}