/* /css/main.css */
/* v1.1 - Adds styles for authentication forms and hotspots. */

/* ========== MAIN GLOBAL STYLES ========== */

body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #2d3748;
  margin: 0;
  padding: 0;
}
.site-header {
  background: #fff;
  padding: 1.5rem 0 0 0;
  border-bottom: 1px solid #d1d5db;
}

/* ========== HEADER 3-COL FLEX LAYOUT (v2.0) ========== */
.header-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.header-col-left,
.header-col-middle,
.header-col-right {
  width: 100%;
  max-width: 100%;
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .header-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
  }
  .header-col-left {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
  }
  .header-col-middle {
    flex: 2;
    min-width: 320px;
    max-width: 450px;
  }
  .header-col-right {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
  }
}

/* Tablet: Left + Middle in a row, Right below */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-row {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }
  .header-col-left {
    width: 48%;
    max-width: 48%;
  }
  .header-col-middle {
    width: 48%;
    max-width: 48%;
  }
  .header-col-right {
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
  }
}

/* Mobile: Stack all vertically (default) */
@media (max-width: 767px) {
  .header-row {
    flex-direction: column;
    gap: 1rem;
  }
  /* No specific widths needed, they default to 100% */
}


/* --- Static Map & Location Selector Styling --- */
.header-col-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#map-container-static {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: #f9f9f9;
  width: 100%;
  max-width: 420px; /* Controls the size of the static map */
  margin: 0 auto;
}

#static-map-wrapper .img-map {
  max-width: 100%;
  height: auto;
}

.location-selector-container {
    position: relative;
    z-index: 1001; /* Higher than Leaflet's map panes */
    width: 100%;
    max-width: 420px;
}


/* --- Your Corner Mini Footer --- */
.mini-footer {
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
}

.mini-footer a {
  color: #666;
  text-decoration: none;
  padding: 0 0.5rem;
}

.mini-footer a:hover {
  text-decoration: underline;
}

/* ========== LOGO, MENU, AND TRANSLATE ========== */
.logo-img {
  height: 176px;
  width: 300px;
  border-radius: 10px;
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
}
.menu-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  outline: none;
}
.menu-btn:focus {
  outline: none;
}
#main-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.5rem;
  width: 16rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  border: 1px solid #e5e7eb;
  z-index: 50;
  display: none;
}
#main-menu ul { padding: 0.5rem 0; margin: 0; list-style: none; }
#main-menu li { margin: 0; border: none; }
#main-menu a { display: block; padding: 0.5rem 1rem; color: #374151; text-decoration: none; }
#main-menu a:hover { background: #f3f4f6; }
.border-t { border-top: 1px solid #e5e7eb; }
#google_translate_element { display: inline-block; vertical-align: middle; }
.goog-te-gadget-simple {
  background-color: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  font-size: 10pt !important;
  display: inline-block;
  padding: 5px 8px !important;
  cursor: pointer;
  border-radius: 6px;
}
.goog-te-gadget-icon { display: none !important; }

/* ========== CARD STYLES ========== */
.card {
  background-color: #ffffff;
  border: 1px solid #d1fae5; /* Light green border */
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
}
.card-header {
  cursor: pointer;
  border-bottom: 1px solid #d1fae5;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-body { padding: 1rem; }
.card-body.collapsed { display: none; }

.toggle-icon {
  user-select: none;
  font-size: 1.5rem;
}

/* ========== MAP + CENTERING ========== */
.map-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}


#static-map-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 230px;
}

.map-center {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#map-container {
  min-height: 450px;
  background-color: #f0f4f8;
  width: 100%;
}

#map {
  width: 100%;
  min-height: 350px;
  height: 450px;
  max-width: 100%;
  border-radius: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.img-map {
  width: 400px !important;
  height: 209px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

#map:focus, .img-map:focus, .logo-img:focus,
#map:active, .img-map:active, .logo-img:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ========== BUTTONS ========== */
.btn-corporate-green {
  background-color: #008000;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-corporate-green:hover {
  background-color: #006400;
}
.btn-reset-map {
  background: #e5e7eb;
  color: #374151;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-reset-map:hover {
  background: #d1d5db;
}
.btn-user-profile {
  background-color: #008000;
  transition: background-color 0.2s ease-in-out;
}
.btn-user-profile:hover {
  background-color: #006400;
}

/* New secondary button style for Join/Login */
.btn-secondary {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-secondary:hover {
    background-color: #e5e7eb;
}
/* ========== FORM AND AUTOCOMPLETE ========== */
.textarea-main {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.label-country-search {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
}
.input-country-search {
  margin-top: 0.25rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}
#autocomplete-results {
  position: absolute;
  background: white;
  z-index: 10;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
}
#autocomplete-results div {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none
}
#autocomplete-results div:hover {
   background-color: #f3f4f6;
}

/* ========== TICKER/EVENTS ========== */
.ticker-wrapper {
  overflow: hidden;
  background-color: #008000;
}
.ticker-content {
  display: inline-block;
  white-space: nowrap;
}
.ticker-content.animate {
  animation: tickerMove 120s linear infinite;
}
.ticker-content a {
  color: #ffffff;
  text-decoration: none;
  margin-right: 100px;
  font-weight: bold;
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========== TABS AND CONTENT ========== */
.tabs {
    border-bottom: 2px solid #ddd;
    display: flex;
    margin-bottom: 1rem;
}

.tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    color: #666;
    border-bottom: 3px solid transparent;
    transform: translateY(2px);
    transition: all 0.2s ease-in-out;
}

.tab.active {
    color: #005a00; /* Darker Corporate Green for text */
    border-bottom-color: #008000; /* Corporate Green for underline */
    font-weight: 700;
}

.tab:hover {
    color: #005a00;
}

.list-content {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  min-height: 300px;

  height: auto;
  max-height: none;
  overflow: visible;
}


/* ========== UTILITY & TEXT CLASSES ========== */
.text-lg { font-size: 1.125rem; }
.text-md { font-size: 1rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: bold; }
.font-semibold { font-weight: 600; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #2d3748; }
.text-gray-900 { color: #111827; }
.text-corporate-green { color: #008000; }

.rounded-lg { border-radius: 0.75rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-t-lg { border-radius: 0.75rem 0.75rem 0 0; }
.rounded-b-lg { border-radius: 0 0 0.75rem 0.75rem; }
.rounded-full { border-radius: 9999px; }

.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.inline-block { display: inline-block; }
.align-middle { vertical-align: middle; }
.w-full { width: 100%; }
.w-24 { width: 6rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.relative { position: relative; }


/* ========== FOOTER ========== */
.site-footer {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #6b7280;
}
.site-footer a { color: #6b7280; text-decoration: underline; }
.site-footer a:hover { color: #008000; }

/* ========== ANNOUNCEMENT ========== */
.announcement-ticker {
  color: #fff;
  border-radius: 0 0 0.75rem 0.75rem;
}

/* ========== LISTING CARDS (Pals & Hotspots) ========== */
#user-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.user-card {
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s;
}
.user-card:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#hotspot-list-container .hotspot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.hotspot-card {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 1rem;
}

/* Prevent blue "click" highlights on image links */
a img, button img {
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
}

/* [BLOCK 2.2.4 START] - AUTHENTICATION FORM STYLES */
.input-auth {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.error-message {
  color: #dc2626; /* red-600 */
  background-color: #fee2e2; /* red-100 */
  border: 1px solid #fca5a5; /* red-300 */
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
/* [BLOCK 2.2.4 END] */
/* [BLOCK 3.1.1 START] - CUSTOM LOCATION SELECTOR STYLES */
.location-selector-container {
    padding: 0 0.5rem;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: #374151;
    cursor: pointer;
    user-select: none; /* This prevents text cursor/highlighting */
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-select-trigger::after {
    content: '▼';
    font-size: 0.6rem;
    color: #6b7280;
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.custom-select-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none; /* This prevents text cursor/highlighting */
}

.custom-select-option:hover {
    background-color: #f3f4f6;
}
/* [BLOCK 3.1.1 END] */

/* --- Utility Classe --- */
.hidden {
  display: none !important;
}

/* --- Interactive Map Modal Styling (Corrected) --- */
#map-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9998; /* High z-index to cover everything */
  /* display: flex; is removed from here to allow .hidden to work */
  align-items: center;
  justify-content: center;
}

/* This new rule applies the flex display only when the modal is NOT hidden */
#map-modal:not(.hidden) {
  display: flex;
}

#modal-map-container {
  width: 90%;
  height: 90%;
  border: 2px solid white;
  border-radius: 0.5rem;
  background-color: #f9f9f9;
  position: relative; /* Needed for positioning the close button */
}

/* --- Map Control Buttons --- */
.map-control-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000; /* Ensure it's above the map tiles */
  background-color: white;
  color: #333;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.map-control-button:hover {
  background-color: #f4f4f4;
}

/* --- Main Logo Menu Styling --- */
#main-menu {
  display: none; /* Hidden by default, shown by JavaScript */
  position: absolute;
  top: calc(100% + 5px); /* Position it right below the logo button with a small gap */
  left: 0;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000; /* A very high value to ensure it's on top of everything */
  min-width: 220px;
  border: 1px solid #ddd;
  padding: 0.5rem 0;
}

#main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-menu li a {
  display: block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

#main-menu li a:hover {
  background-color: #f5f5f5;
}

#main-menu .border-t {
  border-top: 1px solid #eee;
  margin: 0.5rem 0;
}

/* --- Continent Label Styling --- */
.continent-label {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #777;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.continent-label:hover {
  background-color: #008000; /* Corporate green */
  color: white;
}

.compliance-text {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 1rem;
    line-height: 1.4;
}
.compliance-text ul {
    margin: 0.5rem 0 0 1rem;
    padding-left: 1rem;
}

/* --- Modal Styles --- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000; /* Always top layer */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
}
.modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}
.modal-body {
    line-height: 1.6;
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #6b7280;
    cursor: pointer;
    border: none;
    background: none;
}
.modal-actions {
    text-align: right;
    margin-top: 1.5rem;
}

.location-selector-container-inline { 
  display: flex; gap: 0.5rem; flex-wrap: wrap; 
}

/* Capitalize first and last name inputs */
#register-form input[name="firstname"],
#register-form input[name="lastname"],
#onboard-firstname,
#onboard-lastname {
    text-transform: capitalize;
}

/* This creates "blank lines" at the bottom of the dropdown list.
   It ensures that even the last item (e.g., Zimbabwe) can be scrolled 
   to the very top of the viewing window for clear visibility. */
.custom-select-options::after {
    content: "";
    display: block;
    height: 170px; /* Close to the max-height of 200px */
    pointer-events: none;
}

/* --- end of /css/main.css --- */