/* Location modals — GTM design system */

.loc-modal-overlay .loc-modal {
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}

.loc-modal-overlay.open .loc-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.loc-modal--state {
  width: min(100%, 28rem);
}

.loc-modal--city {
  width: min(100%, 31.25rem);
}

.loc-modal--sightseeing {
  width: min(100%, 56rem);
  max-height: min(95vh, 52rem);
}

.loc-modal-header__subtitle {
  margin: var(--space-base) 0 0;
  font-size: var(--font-size-body-md);
  color: var(--color-on-surface-variant);
  font-weight: 400;
}

.loc-modal-body--scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--color-surface-container-lowest);
}

.loc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  margin-bottom: var(--space-md);
}

.loc-field label {
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  color: var(--color-on-surface-variant);
}

.loc-control,
.loc-field input[type="text"],
.loc-field input[type="number"],
.loc-field input[type="url"],
.loc-field input[type="time"],
.loc-field select,
.loc-field textarea {
  width: 100%;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-low);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  color: var(--color-on-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.loc-control:focus,
.loc-field input:focus,
.loc-field select:focus,
.loc-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
  background: var(--color-surface-container-lowest);
}

.loc-control--uppercase {
  text-transform: uppercase;
}

.loc-select-wrap {
  position: relative;
}

.loc-select-wrap .material-symbols-outlined {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant);
  pointer-events: none;
}

.loc-select-wrap select {
  appearance: none;
  padding-right: calc(var(--space-md) + var(--space-sm));
}

.loc-modal-form-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.loc-modal-form-actions .loc-btn-secondary,
.loc-modal-form-actions .loc-btn-primary {
  flex: 1;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  min-height: 2.75rem;
}

.loc-btn-primary--solid {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.loc-btn-primary--solid:hover {
  opacity: 0.92;
}

.loc-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.loc-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--font-size-label-md);
  color: var(--color-on-surface-variant);
}

.loc-check-box {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-default);
  background: var(--color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.loc-check-item:hover .loc-check-box {
  border-color: var(--color-primary);
}

.loc-check-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.loc-check-item input:checked + .loc-check-box {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.loc-check-item input:checked + .loc-check-box .material-symbols-outlined {
  display: inline-flex;
}

.loc-check-box .material-symbols-outlined {
  display: none;
  font-size: 1.125rem;
}

.loc-chip-field {
  margin-bottom: var(--space-md);
}

.loc-chip-field[hidden] {
  display: none;
}

.loc-section-title {
  font-size: var(--font-size-label-md);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  padding-bottom: var(--space-xs);
  margin: var(--space-md) 0 var(--space-sm);
}

.loc-section-title:first-child {
  margin-top: 0;
}

.loc-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.loc-form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}

.loc-ticket-label {
  display: block;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
  margin-bottom: var(--space-base);
}

.loc-ticket-input {
  text-align: center;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.loc-hours-card {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  overflow: hidden;
}

.loc-hours-card .day-row {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-outline-variant);
}

.loc-hours-card .day-row:last-child {
  border-bottom: none;
}

.loc-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.loc-day-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  color: var(--color-on-surface);
}

.loc-day-label input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}

.loc-add-slot-btn {
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-label-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--space-base);
  cursor: pointer;
}

.loc-add-slot-btn[hidden] {
  display: none;
}

.loc-time-slot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.loc-time-slot-range {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
}

.loc-time-slot-range input[type="time"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  min-height: auto;
}

.loc-time-separator {
  color: var(--color-outline);
  font-size: var(--font-size-body-md);
}

.loc-remove-slot-btn {
  border: none;
  background: transparent;
  color: var(--color-error);
  border-radius: var(--radius-full);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.loc-remove-slot-btn:hover {
  background: var(--color-error-container);
}

.loc-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.loc-dropzone {
  border: 2px dashed var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.loc-dropzone:hover,
.loc-dropzone--active {
  border-color: var(--color-primary);
}

.loc-dropzone__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary-container) 18%, transparent);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-dropzone p {
  margin: 0;
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  color: var(--color-on-surface);
}

.loc-dropzone small {
  font-size: 0.6875rem;
  color: var(--color-on-surface-variant);
}

.loc-url-row {
  display: flex;
  gap: var(--space-xs);
}

.loc-url-row .loc-control {
  flex: 1;
  padding-left: calc(var(--space-md) + var(--space-xs));
}

.loc-url-wrap {
  position: relative;
  flex: 1;
}

.loc-url-wrap .material-symbols-outlined {
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 1.125rem;
}

.loc-url-add-btn {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.loc-gallery-preview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-label-md);
  color: var(--color-on-surface-variant);
}

.loc-gallery-primary {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-high);
  position: relative;
  margin-bottom: var(--space-xs);
}

.loc-gallery-primary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loc-gallery-primary__badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.625rem;
  font-weight: 700;
  padding: var(--space-base) var(--space-xs);
  border-radius: var(--radius-default);
}

.loc-gallery-primary__empty,
.loc-gallery-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-body-md);
}

.loc-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.loc-gallery-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  position: relative;
  background: var(--color-surface-container);
}

.loc-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loc-gallery-thumb__remove {
  position: absolute;
  inset: 0;
  border: none;
  background: color-mix(in srgb, var(--color-inverse-surface) 45%, transparent);
  color: var(--color-on-primary);
  opacity: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.loc-gallery-thumb:hover .loc-gallery-thumb__remove {
  opacity: 1;
}

.loc-gallery-add-tile {
  aspect-ratio: 1;
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-high);
  color: var(--color-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.loc-gallery-add-tile:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.loc-spend-wrap {
  position: relative;
}

.loc-spend-wrap .loc-spend-suffix {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-label-sm);
  font-weight: 700;
  color: var(--color-outline);
  text-transform: uppercase;
}

.loc-modal-footer--sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--color-surface-container-lowest);
  justify-content: flex-end;
  gap: var(--space-sm);
}

.loc-modal-footer--sticky .loc-btn-secondary,
.loc-modal-footer--sticky .loc-btn-primary {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-lg);
}

.loc-btn-primary .material-symbols-outlined {
  font-size: 1.125rem;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-base);
  background: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  padding: var(--space-base) var(--space-xs);
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
}

.chip-remove {
  cursor: pointer;
  color: var(--color-on-surface-variant);
}

@media (max-width: 767px) {
  .loc-form-grid-2,
  .loc-form-grid-4,
  .loc-photos-grid,
  .loc-check-grid {
    grid-template-columns: 1fr;
  }

  .loc-modal-footer--sticky {
    flex-direction: column;
  }

  .loc-modal-footer--sticky .loc-btn-secondary,
  .loc-modal-footer--sticky .loc-btn-primary {
    width: 100%;
  }
}

/* Override legacy sightseeing.css modal field rules */
#stateModal .loc-control,
#cityModal .loc-control,
#sightseeingModal .loc-control,
#sightseeingModal input[type="number"],
#sightseeingModal input[type="time"],
#sightseeingModal textarea,
#sightseeingModal select {
  margin-bottom: 0;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}

#sightseeingModal .loc-modal--sightseeing,
.loc-modal.loc-modal--sightseeing {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sightseeingModal {
  z-index: 1002;
}