/* --- Submit form --- */

.routes-submit {
  max-width: 720px;
  margin: 0 auto;
}

.routes-submit-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}

/* Class selector beats the UA stylesheet's [hidden]{display:none}, so we
   reassert it here for when submit.js toggles the hidden attribute. */
.routes-submit-form[hidden] {
  display: none;
}

.routes-submit-form input[type="text"],
.routes-submit-form input[type="url"],
.routes-submit-form input[type="number"],
.routes-submit-form input[type="search"],
.routes-submit-form textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  width: 100%;
}

.routes-submit-form textarea {
  resize: vertical;
}

/* Custom <select> styling: strip the OS chrome and draw our own caret so the
   surface/amenity dropdowns match the rest of the dark form. */
.routes-submit-form select {
  background-color: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 36px 8px 12px;
  font: inherit;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 14px, calc(100% - 12px) 14px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 120ms;
}

.routes-submit-form select:hover,
.routes-submit-form select:focus {
  border-color: var(--accent-dim);
  outline: none;
}

.routes-submit-form select:focus-visible {
  border-color: var(--accent);
}

/* Region autocomplete field needs relative positioning so the listbox
   anchors underneath the input. */
.routes-region-field {
  position: relative;
}

.routes-region-field .autocomplete-results {
  top: calc(100% + 2px);
}

/* Radio groups for driving style + distance — render like clickable chips
   that flow onto multiple rows rather than squeezing text within each
   button on narrow viewports. */
.routes-radio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.routes-radio-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}

.routes-radio-options label:hover {
  border-color: var(--accent-dim);
}

.routes-radio-options input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
}

.routes-radio-options label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Make the checklist dropdown look more deliberate inside the form than on
   the filters bar (a little taller, with label spacing). */
.routes-submit-form .routes-checklist > summary {
  padding: 10px 28px 10px 12px;
  font-size: 14px;
}

.routes-hint {
  margin: 4px 0 0;
  font-size: 12px;
}

.routes-ratings,
.routes-masks,
.routes-amenities-fs {
  margin: 0;
  padding: 14px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.routes-ratings legend,
.routes-masks legend,
.routes-amenities-fs legend {
  padding: 2px 8px;
  margin-left: -4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.routes-ratings legend span.muted {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  margin-left: 6px;
}
.routes-mask-options,
.routes-amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px 14px;
  margin-top: 10px;
}

.routes-mask-options label,
.routes-amenities-grid label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}

.routes-mask-options label:hover,
.routes-amenities-grid label:hover {
  border-color: var(--accent-dim);
}

.routes-mask-options input[type="checkbox"],
.routes-amenities-grid input[type="checkbox"] {
  accent-color: var(--accent);
}

.routes-amenity-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
}

.routes-amenity-icon svg {
  display: block;
}