/* Order tracking page - START */
.template-order-tracking-section {
  overflow-x: hidden;
  overflow-x: clip;
}

.order-tracking-page__container {
  width: min(100%, 430px);
  margin-inline: auto;
}

.order-tracking-page__header {
  margin-bottom: calc(2rem * var(--body-scale));
}

.order-tracking-page__header h1 {
  margin-bottom: calc(0.75rem * var(--body-scale));
}

.order-tracking-page__description {
  color: rgb(var(--text-color));
}

.order-tracking-page__description :first-child {
  margin-top: 0;
}

.order-tracking-page__description :last-child {
  margin-bottom: 0;
}

.order-tracking-form form,
.order-tracking-form__panes {
  display: grid;
  gap: calc(1rem * var(--body-scale));
}

.order-tracking-form__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(2rem * var(--body-scale));
  margin-bottom: calc(2rem * var(--body-scale));
}

.order-tracking-form__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: rgb(var(--text-color));
  cursor: pointer;
  transition: color 200ms ease-in-out;
}

.order-tracking-form__tab::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(-0.5rem * var(--body-scale));
  width: 0;
  height: 1px;
  content: "";
  background-color: currentColor;
  transition: width 200ms ease-in-out;
}

.order-tracking-form__tab.is-active::after,
.order-tracking-form__tab:hover::after {
  width: 100%;
}

.order-tracking-form__tab:focus-visible {
  outline: none;
}

.order-tracking-form__tab:focus-visible::after {
  width: 100%;
}

.order-tracking-form__field,
.order-tracking-form__field-group {
  display: block;
}

.order-tracking-form__label {
  display: block;
  margin-bottom: calc(0.5rem * var(--body-scale));
  font-size: var(--text-size-sm);
  font-weight: 500;
  letter-spacing: calc(var(--preheading-letter-spacing) * 1px);
  text-transform: uppercase;
  color: rgb(var(--heading-color));
}

.order-tracking-form__field input,
.order-tracking-form__field select {
  width: 100%;
  min-width: 0;
}

.order-tracking-form__phone-fields {
  display: grid;
  grid-template-columns: minmax(80px, 100px) minmax(0, 1fr);
  gap: calc(0.75rem * var(--body-scale));
}

.order-tracking-form__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.875rem;
  border-width: calc(var(--input-border-width) * 1px);
  border-style: solid;
  border-radius: calc(0.24px * var(--input-radius));
  background-color: rgb(var(--input-background));
  color: rgb(var(--input-text));
  border-color: rgb(var(--input-border) / var(--input-border-opacity));
  box-shadow:
    calc(var(--input-shadow-horizontal-offset) * 1px) calc(var(--input-shadow-vertical-offset) * 1px) calc(var(--input-shadow-blur) * 1px) rgba(0, 0, 0, var(--input-shadow-opacity));
}

.order-tracking-form__select-wrap .country-select__dropdown {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

.order-tracking-form__select-wrap:has(.country-select__dropdown:focus-visible) {
  background-color: rgb(var(--input-focus-background));
  border-color: rgb(var(--input-focus-border) / var(--input-border-opacity));
  color: rgb(var(--input-focus-text));
  outline: calc(var(--input-border-width) * 1px) solid rgb(var(--input-focus-border) / var(--input-border-opacity));
}

.order-tracking-form__select-wrap .country-select__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.order-tracking-form__select-wrap .country-select__label {
  font-size: 14px;
}

.order-tracking-form__select-wrap .country-select__trigger svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

.order-tracking-form__error {
  display: none;
  margin: 0;
  font-size: var(--text-size-sm);
  color: #c43f3f;
}

.order-tracking-form__error:not(:empty) {
  display: block;
  margin-top: calc(-0.25rem * var(--body-scale));
}

.order-tracking-form__field.is-error input,
.order-tracking-form__field-group.is-error input,
.order-tracking-form__field-group.is-error select,
.order-tracking-form__field.is-error select {
  border-color: #c43f3f;
}

.order-tracking-form__field-group.is-error .order-tracking-form__select-wrap,
.order-tracking-form__field.is-error .order-tracking-form__select-wrap {
  border-color: #c43f3f;
}

.order-tracking-form__submit {
  width: 100%;
  justify-content: center;
  gap: calc(0.625rem * var(--body-scale));
  margin-top: calc(0.5rem * var(--body-scale));
}

.order-tracking-form__submit.loading {
  pointer-events: none;
}

.order-tracking-form__submit.loading .order-tracking-form__spinner {
  display: inline-block;
}

.order-tracking-form__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: order-tracking-spin 0.75s linear infinite;
}

@keyframes order-tracking-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 639px) {
  .order-tracking-form__tabs {
    gap: calc(1.5rem * var(--body-scale));
  }
}

/* Order tracking page - END */