.ods-sal-root {
  --ods-sal-color-surface: #ffffff;
  --ods-sal-color-text: #1f2933;
  --ods-sal-color-border: #d8dde4;
  --ods-sal-color-inside: #1f7a3a;
  --ods-sal-color-inside-bg: #e6f4ea;
  --ods-sal-color-outside: #b3261e;
  --ods-sal-color-outside-bg: #fde7e9;
  --ods-sal-color-info: #1d4e89;
  --ods-sal-color-info-bg: #e3edf8;
  --ods-sal-radius: 8px;
  --ods-sal-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--ods-sal-color-text);
  line-height: 1.5;
  box-sizing: border-box;
}

.ods-sal-root *,
.ods-sal-root *::before,
.ods-sal-root *::after {
  box-sizing: border-box;
}

.ods-sal-lookup {
  background: var(--ods-sal-color-surface);
  padding: 10px;
  border: 1px solid var(--ods-sal-color-border);
  border-radius: var(--ods-sal-radius);
  box-shadow: var(--ods-sal-shadow);
  margin-bottom: 20px;
}

.ods-sal-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ods-sal-root gmp-place-autocomplete {
  display: block;
  flex: 1;
  min-width: 0;
}

/* Locate button — overrides theme `.button` styles defensively. */
.ods-sal-root .ods-sal-locate-btn,
.ods-sal-root button.ods-sal-locate-btn,
.ods-sal-root a.ods-sal-locate-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: auto !important;
  min-width: 44px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  background: var(--ods-sal-color-surface) !important;
  background-image: none !important;
  color: var(--ods-sal-color-info) !important;
  border: 1px solid var(--ods-sal-color-border) !important;
  border-radius: var(--ods-sal-radius) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ods-sal-root .ods-sal-locate-btn:hover:not(:disabled) {
  background: var(--ods-sal-color-info-bg) !important;
  border-color: var(--ods-sal-color-info) !important;
}

.ods-sal-root .ods-sal-locate-btn:focus-visible {
  outline: 2px solid var(--ods-sal-color-info) !important;
  outline-offset: 2px !important;
}

.ods-sal-root .ods-sal-locate-btn:disabled {
  cursor: progress !important;
  opacity: 0.6 !important;
}

.ods-sal-root .ods-sal-locate-icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  vertical-align: middle !important;
  fill: none;
}

.ods-sal-root .ods-sal-locate-btn--loading .ods-sal-locate-icon {
  animation: ods-sal-locate-spin 1s linear infinite;
}

@keyframes ods-sal-locate-spin {
  to { transform: rotate(360deg); }
}

/* Protect Google Maps controls from theme button/img CSS bleeding into the map. */
.ods-sal-map img {
  max-width: none !important;
}

.ods-sal-map .gm-control-active,
.ods-sal-map .gm-fullscreen-control,
.ods-sal-map .gm-style button,
.ods-sal-map button {
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
}

.ods-sal-map .gmnoprint,
.ods-sal-map .gm-bundled-control,
.ods-sal-map .gm-bundled-control-on-bottom,
.ods-sal-map .gmnoprint > div {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ods-sal-banner {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--ods-sal-radius);
  font-weight: 500;
}

.ods-sal-banner--hidden { display: none; }

.ods-sal-banner--inside {
  background: var(--ods-sal-color-inside-bg);
  color: var(--ods-sal-color-inside);
  border: 1px solid var(--ods-sal-color-inside);
}

.ods-sal-banner--outside {
  background: var(--ods-sal-color-outside-bg);
  color: var(--ods-sal-color-outside);
  border: 1px solid var(--ods-sal-color-outside);
}

.ods-sal-banner--info {
  background: var(--ods-sal-color-info-bg);
  color: var(--ods-sal-color-info);
  border: 1px solid var(--ods-sal-color-info);
}

.ods-sal-map-section {
  background: var(--ods-sal-color-surface);
  border: 1px solid var(--ods-sal-color-border);
  border-radius: var(--ods-sal-radius);
  overflow: hidden;
  box-shadow: var(--ods-sal-shadow);
}

.ods-sal-map {
  width: 100%;
  height: var(--ods-sal-map-height, 480px);
}

.ods-sal-warning {
  padding: 12px 16px;
  background: #fff7d6;
  border: 1px solid #f0c14b;
  border-radius: 8px;
  color: #5a4500;
}

/*
 * Google Places autocomplete full-window dialog (mobile).
 * The component renders this <dialog> at the document level (outside
 * .ods-sal-root), so it must be targeted unscoped. As a modal dialog the UA
 * stylesheet centers it vertically with `margin: auto`, which leaves it
 * floating mid-screen on phones. Pin it to the top of the viewport and let it
 * fill the width / available height.
 */
.full-window-autocomplete-dialog[open] {
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: 100dvh !important;
}