/* SQFT-CUSTOM - tier buttons of the public step booking form. */

/*
 * Site themes and page builders style every <button> with selectors stronger than a single class
 * (e.g. ".elementor-kit-5 button"), so the tier buttons repeat their class and use !important to keep their look.
 */
.amelia-sqft-booking { margin: 0 0 16px; width: 100%; }
.amelia-sqft-booking__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--am-c-main-text, inherit);
}
.amelia-sqft-booking .amelia-sqft-booking__options {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px;
  width: 100%;
}
.amelia-sqft-booking .amelia-sqft-booking__btn.amelia-sqft-booking__btn {
  appearance: none;
  cursor: pointer;
  display: block !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 2px solid #000 !important;
  border-radius: 6px !important;
  background: #000 !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.amelia-sqft-booking .amelia-sqft-booking__btn.amelia-sqft-booking__btn:hover {
  border-color: #333 !important;
  background: #333 !important;
  color: #fff !important;
}
.amelia-sqft-booking .amelia-sqft-booking__btn.amelia-sqft-booking__btn:focus-visible {
  outline: 3px solid var(--am-c-primary, #1246d6) !important;
  outline-offset: 2px;
}
.amelia-sqft-booking .amelia-sqft-booking__btn.amelia-sqft-booking__btn.is-selected {
  border-color: #000 !important;
  background: #000 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.amelia-sqft-booking__btn.is-selected::before { content: "\2713\00a0"; }
.amelia-sqft-booking__label { white-space: normal; }
.amelia-sqft-booking .amelia-sqft-booking__error {
  display: block !important;
  position: static !important;
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #b4190f !important;
  border-radius: 6px;
  background: #fdecea !important;
  color: #b4190f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left;
  visibility: visible !important;
  opacity: 1 !important;
}
.amelia-sqft-booking__error::before { content: "\26A0\00a0"; }

/* Compact "Square footage" block inside the Payments / Your Information / confirmation steps. */
.amelia-sqft-booking-summary {
  margin: 12px 0;
  padding: 8px 0;
  color: var(--am-c-pay-text, var(--am-c-main-text, inherit));
  font-size: 14px;
  line-height: 1.5;
}
.amelia-sqft-booking-summary__heading { margin: 0 0 4px; font-weight: 600; }
.amelia-sqft-booking-summary__line { margin: 0; }

/*
 * Focused fields of the booking form: Amelia paints their border with the primary colour, which is black on this
 * site. They keep the softer border they already show on hover instead.
 */
.amelia-v2-booking #amelia-container .am-input-wrapper .am-input .el-input__wrapper.is-focus {
  --am-c-input-border: var(--am-c-inp-text-op40) !important;
}
.amelia-v2-booking #amelia-container .el-input-number .el-input__wrapper.is-focus {
  --am-c-inp-number-border: var(--am-c-inp-text-op40) !important;
}
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper:focus,
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper.is-focused {
  --am-c-select-border: var(--am-c-select-text-op40) !important;
}
.amelia-v2-booking #amelia-container .am-input-wrapper .am-textarea .el-textarea__inner.is-focus {
  --am-c-input-border: var(--am-c-inp-text-op40) !important;
}
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number .m-input-wrapper.--border:focus-within {
  --am-c-ph-inp-border: var(--am-c-inp-text-op40) !important;
}
.amelia-v2-booking .el-input__wrapper.is-focus {
  --el-input-focus-border-color: var(--am-c-inp-text-op40, #c0c4cc) !important;
}

/* The page builder adds its own focus border to every text field; inside the form the wrapper already shows it. */
.amelia-v2-booking #amelia-container .el-input__wrapper .el-input__inner:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}