/* _location.css — shared map + location card styles */

/* Views — flex layout with gap, [hidden] override */
.location-view { display: flex; flex-direction: column; gap: var(--space-sm); }
.location-view[hidden] { display: none; }

.location-map {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-container);
  z-index: 0;
}

.location-map--picker {
  height: 240px;
  margin-bottom: var(--space-md);
}

.location-map--compact {
  height: 180px;
  cursor: pointer;
}

.location-map--full {
  height: 50vh;
  min-height: 300px;
  border-radius: var(--radius-md);
}

.location-map .leaflet-control-attribution {
  font-size: 10px;
  opacity: 0.6;
}

.location-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.location-picker__toggle {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--surface-container);
}

.location-picker__toggle-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-variant);
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.location-picker__toggle-btn.is-active {
  background: var(--primary);
  color: var(--on-primary);
}

.location-picker__radius {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.location-picker__radius-label {
  display: flex;
  justify-content: space-between;
  font: var(--body-md);
  color: var(--on-surface-variant);
}

.location-picker__radius-value {
  font-weight: 600;
  color: var(--on-surface);
}

.location-picker__radius input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.location-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.location-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.location-card__label {
  font-weight: 600;
  font-size: 1rem;
}

.location-card__badge {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--on-surface-variant);
}

.location-card__address {
  font: var(--body-md);
  color: var(--on-surface-variant);
}

.location-card__distance {
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--on-surface-variant);
}

.location-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.location-row__info {
  flex: 1;
  min-width: 0;
}

.location-row__label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-row__meta {
  font: var(--body-md);
  color: var(--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-row__badge {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--on-surface-variant);
}

.location-row__actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.location-row__btn {
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-default);
  background: var(--surface-container);
  cursor: pointer;
  transition: background 0.15s ease;
}

.location-row__btn:active {
  background: var(--surface-container-high);
}

.location-row__btn img {
  width: 1rem;
  height: 1rem;
}

.location-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-md);
  border: 1px dashed var(--outline);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--on-surface-variant);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.location-create-btn:active {
  border-color: var(--primary);
  color: var(--on-surface);
}

.location-create-btn img {
  width: 1rem;
  height: 1rem;
}

.location-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--on-surface-variant);
  font: var(--body-md);
}

.location-danger {
  padding-top: var(--space-lg);
}

.location-section-label {
  font: var(--label-md);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xs);
}

/* Location list container */
#location-list-items { display: flex; flex-direction: column; gap: var(--space-sm); }
#profile-location-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Form fields — matches .collection-form / .edit-profile-form pattern */
.location-form { display: grid; gap: var(--space-sm); }
.location-form label { font: var(--label-md); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--on-surface-variant); }
.location-form input { padding: var(--space-md); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font: var(--body-lg); color: var(--on-surface); }
.location-form input:focus { outline: none; border-color: var(--primary); }
.location-form .label-optional { text-transform: none; letter-spacing: 0; opacity: 0.5; font-size: 0.75em; }

/* Select mode — clickable rows with selected state */
.location-row--selectable { cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; }
.location-row--selectable:active { transform: scale(0.98); }
.location-row--selected { border-color: var(--primary); border-width: 2px; }
.location-row--none { justify-content: center; font: var(--body-lg); font-weight: 600; color: var(--on-surface-variant); }
.location-row--none.location-row--selected { color: var(--on-surface); }

/* Bottom sheet save button — matches existing pattern */
.bottom-sheet__save { width: 100%; padding: var(--space-lg); border: 0; border-radius: var(--radius-xl); background: var(--primary); color: var(--on-primary); font: var(--label-md); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); cursor: pointer; transition: transform 0.15s ease, opacity 0.2s ease; }
.bottom-sheet__save:active { transform: scale(0.98); }
.bottom-sheet__save:disabled { cursor: not-allowed; }
.bottom-sheet__footer { display: flex; gap: var(--space-sm); }
.bottom-sheet__footer .bottom-sheet__close { flex: 1; background: var(--surface-high); color: var(--on-surface); }
.bottom-sheet__footer .bottom-sheet__save { flex: 1; }

/* Copy address button */
.location-card__copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-full); background: var(--surface-container); cursor: pointer; transition: background 0.15s ease; }
.location-card__copy:active { background: var(--surface-container-high); }
.location-card__copy .icon { width: 1rem; height: 1rem; opacity: 0.6; }
.location-card__copy.is-copied { background: var(--primary); color: var(--on-primary); }
.location-card__copy.is-copied .icon { opacity: 1; }

/* Map links row — Apple Maps, Google Maps, Uber */
.location-map-links { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.location-map-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font: var(--label-md); font-weight: 600; color: var(--on-surface); text-decoration: none; text-align: center; transition: transform 0.15s ease; }
.location-map-link:active { transform: scale(0.98); }
.location-map-link .icon { width: 1.25rem; height: 1.25rem; opacity: 0.7; }

/* Location sheet — compact action rows (actions first, then map) */
.location-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.location-sheet__actions--primary { margin-bottom: var(--space-sm); }
.location-sheet__actions--secondary { margin-top: var(--space-sm); }
.location-sheet__action-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--glass-border); border-radius: var(--radius-full); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font: var(--label-md); font-weight: 600; color: var(--on-surface); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.location-sheet__action-btn:active { transform: scale(0.97); }
.location-sheet__action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.location-sheet__action-btn .icon { width: 1rem; height: 1rem; opacity: 0.7; }
.location-sheet__action-btn.is-copied { background: var(--primary); color: var(--on-primary); }
.location-sheet__action-btn.is-copied .icon { opacity: 1; }

.location-sheet__address { font: var(--body-sm); color: var(--on-surface-variant); margin: 0; padding: 0 var(--space-xs); }

#location-map-sheet .location-map--full { margin-top: var(--space-md); }

/* User geo marker on map */
.location-user-marker { display: flex; align-items: center; justify-content: center; }
.location-user-marker span { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface-container-lowest); box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }