/* ==========================================================================
   ZIP Code to Lat Long - Tool-Specific Styles (2026-10-11)
   Layout, sections, buttons, map box and phone rules are zip-mapper.css's,
   copied rather than shared so neither page changes when the other does
   (zip-mapper is under an SEO review until late October). See that file
   for why the container uses !important (global.css's grid rule loads
   after this file).
   ========================================================================== */
.tool-container {
  display: flex !important;
  height: 700px !important;
  max-height: 700px !important;
  overflow: hidden !important;
  background-color: var(--bg);
}

.tool-sidebar {
  width: 380px;
  background-color: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.sidebar-content {
  padding: 20px;
}

.sidebar-content label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  margin-top: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.tool-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.tool-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tool-section h3 {
  font-size: 15px;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Info Box
   -------------------------------------------------------------------------- */
.tool-info {
  background-color: var(--glass);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin: 12px 0;
  border: 1px solid var(--border);
}

.tool-item {
  font-size: 13px;
  color: var(--text);
  padding: 6px 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}


/* --------------------------------------------------------------------------
   Mode toggle: one ZIP / a list or CSV
   -------------------------------------------------------------------------- */
.zll-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.zll-mode-btn {
  background: var(--bg);
  color: var(--text);
  border: none;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.zll-mode-btn + .zll-mode-btn {
  border-left: 1px solid var(--border);
}

.zll-mode-btn.active {
  background: var(--primary);
  color: #fff;
}

.zll-row {
  display: flex;
  gap: 8px;
}

.zll-row input {
  flex: 1;
  min-width: 0;
  font-size: 16px; /* no zoom-on-focus on iPhone */
}

.zll-row .btn {
  flex-shrink: 0;
}

#bulkInput {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.zll-file {
  margin-top: 10px;
  font-size: 13px;
}

.zll-file input[type="file"] {
  max-width: 100%;
  font-size: 13px;
}

.zll-muted {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.zll-error {
  font-size: 13px;
  color: var(--danger);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.zll-notice {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid #d97706;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Single result */
.zll-single {
  margin-top: 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.zll-single-zip {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.zll-single-place {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.zll-coords {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

.zll-coords dt {
  color: var(--text-muted);
  font-weight: 600;
}

.zll-coords dd {
  margin: 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

/* Bulk results */
.zll-summary p {
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--text);
}

.zll-bad-count {
  color: var(--danger);
}

.zll-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 10px;
}

.zll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.zll-table th,
.zll-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.zll-table th {
  position: sticky;
  top: 0;
  background: var(--card);
  color: var(--text-muted);
  font-weight: 600;
}

.zll-table td:first-child,
.zll-table th:first-child {
  color: var(--text-muted);
  width: 1%;
  white-space: nowrap;
}

.zll-table tr.zll-ok {
  cursor: pointer;
}

.zll-table tr.zll-ok:hover {
  background: var(--hover-bg);
}

.zll-table tr.zll-bad td:last-child {
  color: var(--danger);
}

.zll-popup-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Related links
   -------------------------------------------------------------------------- */
.related-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.related-link {
  display: block;
  padding: 10px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.related-link:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

.related-link strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.related-link span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Map Container
   -------------------------------------------------------------------------- */
.map-container {
  max-height: calc(100vh - 120px);
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  max-height: 700px;
}

.map {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

#map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

/* --------------------------------------------------------------------------
   FAB
   -------------------------------------------------------------------------- */
.fab {
  display: none;
  width: 56px;
  height: 56px;
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9999;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tool-container {
    flex-direction: column;
    /* No scroll box of its own on a phone (2026-10-11): capped at the screen height, it hid the lower part of
       the map under the page text below it, and the map's focus on the first tap scrolled it (the page jump). */
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  .tool-sidebar {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    transition: max-height 0.3s ease;
  }

  .tool-sidebar.collapsed {
    max-height: 0;
    overflow: hidden;
  }

  .map-container {
    flex: none;
    height: 500px;
    min-height: 400px;
    max-height: 500px;
  }

  .map {
    min-height: 400px;
    height: 500px;
  }

  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 600px) {
  .sidebar-content {
    padding: 16px;
  }

  .tool-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .map-container {
    height: 400px;
    min-height: 350px;
    max-height: 450px;
  }

  .map {
    min-height: 350px;
    height: 400px;
  }
}