/* Territories: booking form. Uses Amelia's own CSS variables so it follows the form's customization. */

/* ------------------------------------------------------------ address search ("Your Information") */

/* The address takes the whole row, whatever width the custom field has in Amelia, and its suggestion
   list is drawn above the fields that follow. The item is matched by an attribute because Vue rewrites
   its class list on every re-render. */
.amelia-v2-booking [data-amt-address] {
  display: flex !important;
  flex: 0 0 100% !important;
  flex-direction: column;
  grid-column: 1 / -1;
  position: relative;
  z-index: 30;
  width: 100% !important;
  max-width: 100% !important;
}

/* Amelia's own label and input stay in the form (they carry the value) but are not shown.
   Its validation message stays visible. */
.amelia-v2-booking [data-amt-address] > .el-form-item__label,
.amelia-v2-booking [data-amt-address] > .el-form-item__label-wrap,
.amelia-v2-booking [data-amt-address] > .el-form-item__content > :not(.el-form-item__error) {
  display: none !important;
}

.amelia-v2-booking [data-amt-address] > .amt-search {
  order: 1;
}

.amelia-v2-booking [data-amt-address] > .el-form-item__content {
  order: 2;
  min-height: 0;
}

.amt-search {
  position: relative;
  width: 100%;
  font-family: var(--am-font-family, inherit);
}

.amt-search__label {
  display: block;
  margin-bottom: 4px;
  color: var(--am-c-main-text, #1a1c21);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
}

.amt-search__required {
  color: var(--am-c-error, #b4190f);
}

/* Same box as Amelia's inputs: 1px ring in the input border color, soft shadow, same radius and height. */
.amelia-v2-booking .amt-search__box,
.amt-search__box {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: var(--am-h-inp, 40px);
  min-height: 40px;
  padding: 0 12px !important;
  border: 0;
  border-radius: var(--am-rad-inp, 6px);
  background-color: var(--am-c-inp-bgr, #fff);
  box-shadow: 0 0 0 1px var(--am-c-inp-border, #d1d5d7), 0 2px 2px var(--am-c-inp-text-op05, rgba(26, 44, 55, 0.05));
  color: var(--am-c-inp-text, #1a1c21);
  transition: box-shadow 0.3s ease;
}

.amelia-v2-booking .amt-search__box:hover,
.amt-search__box:hover {
  box-shadow: 0 0 0 1px var(--am-c-inp-text-op40, rgba(26, 44, 55, 0.4)), 0 2px 2px var(--am-c-inp-text-op05, rgba(26, 44, 55, 0.05));
}

.amelia-v2-booking .amt-search__box:focus-within,
.amt-search__box:focus-within {
  box-shadow: 0 0 0 1px var(--am-c-primary, #265cf2), 0 2px 2px var(--am-c-inp-text-op05, rgba(26, 44, 55, 0.05));
}

.amelia-v2-booking .amt-search.is-invalid .amt-search__box,
.amt-search.is-invalid .amt-search__box {
  box-shadow: 0 0 0 1px var(--am-c-error, #b4190f);
}

.amelia-v2-booking .amt-search.is-valid .amt-search__box,
.amt-search.is-valid .amt-search__box {
  box-shadow: 0 0 0 1px var(--am-c-success, #019719);
}

.amt-search__icon {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0.7;
}

/* The site theme styles every text input; the box above already draws the border. */
.amelia-v2-booking .amt-search input.amt-search__input,
.amt-search input.amt-search__input,
.amt-search input.amt-search__input:hover,
.amt-search input.amt-search__input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  font-size: var(--am-fs-inp, 15px);
}

.amt-search__clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--am-c-inp-text, #1a1c21);
  cursor: pointer;
}

.amt-search__clear[hidden],
.amt-search__list[hidden] {
  display: none;
}

.amt-search__clear:focus-visible,
.amt-modal__close:focus-visible,
.amt-modal__button:focus-visible {
  outline: 2px solid var(--am-c-primary, #265cf2);
  outline-offset: 2px;
}

.amelia-v2-booking .amt-search__list,
.amt-search__list {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 60;
  max-height: 232px;
  margin: 4px 0 0;
  padding: 4px 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18), 0 0 0 1px rgba(16, 24, 40, 0.1);
  list-style: none;
}

.amelia-v2-booking .amt-search__option,
.amt-search__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.1);
  background-color: #fff;
  color: #1a1c21;
  line-height: 1.3;
  cursor: pointer;
}

.amt-search__option:last-child {
  border-bottom: 0;
}

.amelia-v2-booking .amt-search__option:hover,
.amelia-v2-booking .amt-search__option.is-active,
.amt-search__option:hover,
.amt-search__option.is-active {
  background-color: #eef2fe;
}

.amt-search__pin {
  display: inline-flex;
  flex: 0 0 auto;
  color: #1a1c21;
}

.amt-search__pin svg {
  width: 18px;
  height: 18px;
}

/* One horizontal line per suggestion: street in bold, then city and state. */
.amt-search__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.amt-search__text strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700 !important;
  text-overflow: ellipsis;
}

.amt-search__text span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: #5b6170;
  font-size: 13px;
  text-overflow: ellipsis;
}

.amt-search__status {
  min-height: 0;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.amt-search__status:empty {
  display: none;
}

.amt-search__status--ok {
  color: var(--am-c-success, #019719);
  font-weight: 500;
}

.amt-search__status--error {
  color: var(--am-c-error, #b4190f);
}

.amt-zip-hint {
  order: 3;
  margin: 4px 0 0;
  color: var(--am-c-error, #b4190f);
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------ "Zip Code" shown read-only */

/* The ZIP comes from the chosen address: the select keeps Amelia's look but cannot be opened. */
.amelia-v2-booking [data-amt-zip] .el-select__wrapper,
.amelia-v2-booking [data-amt-zip] .el-select .el-input__wrapper {
  background-color: var(--am-c-inp-text-op05, #f4f5f6) !important;
  cursor: default !important;
}

.amelia-v2-booking [data-amt-zip] .el-select__suffix,
.amelia-v2-booking [data-amt-zip] .el-select__caret,
.amelia-v2-booking [data-amt-zip] .el-input__suffix {
  display: none !important;
}

/* Hides the "Select" placeholder: there is nothing to select. */
.amelia-v2-booking [data-amt-zip] .el-select__placeholder.is-transparent {
  visibility: hidden;
}

.amt-zip-note {
  margin: 4px 0 0;
  color: var(--am-c-main-text-op60, #6b7280);
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------ theme-proof buttons */

/* Site themes color every <button> on hover and focus. These keep their own colors in every state. */
.amt-search button.amt-search__clear,
.amt-search button.amt-search__clear:hover,
.amt-search button.amt-search__clear:focus,
.amt-search button.amt-search__clear:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--am-c-inp-text, #1a1c21) !important;
}

.amt-modal button.amt-modal__close,
.amt-modal button.amt-modal__close:focus,
.amt-modal button.amt-modal__close:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1a1c21 !important;
}

.amt-modal button.amt-modal__close:hover {
  border: 0 !important;
  background: #f0f1f3 !important;
  box-shadow: none !important;
  color: #1a1c21 !important;
}

.amt-modal button.amt-modal__button,
.amt-modal button.amt-modal__button:focus,
.amt-modal button.amt-modal__button:active {
  border: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.amt-modal button.amt-modal__button:hover {
  border: 0 !important;
  background: #23262d !important;
  box-shadow: none !important;
  color: #fff !important;
}

.amt-search button.amt-search__clear:focus-visible,
.amt-modal button.amt-modal__close:focus-visible,
.amt-modal button.amt-modal__button:focus-visible {
  outline: 2px solid #1a1c21 !important;
  outline-offset: 2px;
}

/* ------------------------------------------------------------ modals */

.amt-modal-open {
  overflow: hidden;
}

.amt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 16, 0.62);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.amt-modal *,
.amt-modal *::before,
.amt-modal *::after {
  box-sizing: border-box;
}

.amt-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow: hidden;
  border-radius: 12px;
  outline: 0;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: #1a1c21;
}

.amt-modal__dialog--alert {
  max-width: 560px;
}

.amt-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1a1c21;
  cursor: pointer;
}

.amt-modal__close:hover {
  background: #f0f1f3;
}

.amt-modal__title {
  margin: 0 44px 12px 0;
  padding: 0;
  color: #1a1c21;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.amt-modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
}

.amt-modal__text {
  margin: 0;
  color: #3d4250;
  font-size: 15px;
  line-height: 1.5;
}

.amt-modal__map {
  flex: 0 0 auto;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 10px;
  background: #e8eaed;
}

.amt-map-error {
  margin: 0;
  padding: 24px;
  color: #6b7280;
  text-align: center;
}

.amt-modal__button {
  align-self: flex-end;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.amt-modal__button:hover {
  background: #23262d;
}

/* ------------------------------------------------------------ coverage modal */

.amt-coverage {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  min-height: 0;
}

.amt-coverage__map {
  width: 100%;
  height: min(62vh, 560px);
  min-height: 320px;
  overflow: hidden;
  border-radius: 10px;
  background: #e8eaed;
}

.amt-coverage__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  max-height: min(62vh, 560px);
}

.amt-coverage__heading {
  margin: 0;
  color: #1a1c21;
  font-size: 17px;
  font-weight: 700;
}

.amt-coverage__search {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5d7;
  border-radius: 8px;
  background: #fff;
  color: #1a1c21;
  font: inherit;
  font-size: 14px;
}

.amt-coverage__search:focus {
  border-color: #265cf2;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(38, 92, 242, 0.2);
}

.amt-coverage__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.amt-coverage__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 2px;
  border-bottom: 1px solid #eceef1;
}

.amt-coverage__item strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.amt-coverage__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.amt-coverage__item span {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.amt-coverage__empty {
  margin: 0;
  padding: 12px 2px;
  color: #6b7280;
  font-size: 14px;
}

/* ------------------------------------------------------------ "Territories" entry */

/* Sidebar: Amelia's own step classes give it the look of the other steps. Only behavior is added here. */
.am-fs-sb .amt-territories-btn--side {
  cursor: pointer;
  outline: 0;
  box-shadow: none;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.am-fs-sb .amt-territories-btn--side .am-fs-sb__step-inner {
  justify-content: flex-start !important;
  min-height: 24px;
}

.am-fs-sb .amt-territories-btn--side .am-fs-sb__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--am-c-sb-text, #fff);
}

.am-fs-sb .amt-territories-btn--side .am-fs-sb__step-heading {
  color: var(--am-c-sb-text, #fff);
}

.am-fs-sb .amt-territories-btn--side:hover {
  background-color: var(--am-c-sb-text-op10, rgba(255, 255, 255, 0.1));
}

.am-fs-sb .amt-territories-btn--side:focus-visible {
  box-shadow: inset 0 0 0 2px var(--am-c-sb-text, #fff);
}

/* Collapsed sidebar: icon only. */
.am-fs-sb.am-collapsed .amt-territories-btn--side .am-fs-sb__step-inner {
  justify-content: center;
}

.am-fs-sb.am-collapsed .amt-territories-btn--side .am-fs-sb__step-heading {
  display: none;
}

/* Form footer, shown when the sidebar is not on screen (narrow layouts). Every state sets its own colors
   so the site theme's button styles cannot show through. */
.amelia-v2-booking button.amt-territories-btn--inline,
.amelia-v2-booking button.amt-territories-btn--inline:hover,
.amelia-v2-booking button.amt-territories-btn--inline:focus,
.amelia-v2-booking button.amt-territories-btn--inline:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  margin: 0 auto 0 0;
  padding: 0 14px;
  border: 1px solid var(--am-c-main-text, #1a1c21) !important;
  border-radius: 999px;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--am-c-main-text, #1a1c21) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.amelia-v2-booking button.amt-territories-btn--inline:hover {
  background: rgba(26, 28, 33, 0.08) !important;
}

.amelia-v2-booking button.amt-territories-btn--inline:focus-visible {
  box-shadow: 0 0 0 2px var(--am-c-main-text, #1a1c21) !important;
}

.amt-territories-btn[hidden] {
  display: none;
}

/* ------------------------------------------------------------ responsive */

/* Narrow forms: the street keeps one line and the city goes under it. */
@media (max-width: 520px) {
  .amt-search__text {
    flex-direction: column;
    gap: 0;
  }

  .amt-search__text span {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .amt-modal {
    padding: 8px;
  }

  .amt-modal__dialog {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px;
  }

  .amt-modal__title {
    font-size: 19px;
  }

  .amt-coverage {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .amt-coverage__map {
    flex: 0 0 auto;
    height: 300px;
    min-height: 0;
  }

  .amt-coverage__panel {
    max-height: none;
  }

  .amt-coverage__list {
    overflow: visible;
  }

  .amt-modal__button {
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amt-search__box,
  .am-fs-sb .amt-territories-btn--side {
    transition: none;
  }
}