/*
 * Matches the footwear theme: labels like the variant labels (_variants.scss), inputs shaped like
 * the quantity box and variant selects (48px pills, #e5e5e5 border, primary focus colour).
 */

/*
 * In displayProductActions the fields sit inside the theme's `.product-quantity` flex row, which
 * does not wrap. Let that row wrap only when it holds the fields, and put them on their own
 * full-width line above the quantity and add-to-cart button.
 */
.product-quantity:has(> .bantpc) {
  flex-wrap: wrap;
}

.product-quantity > .bantpc {
  order: -1;
  flex: 0 0 100%;
  width: 100%;
}

.bantpc {
  margin: 0 0 15px;
}

.bantpc-field {
  margin-bottom: 15px;
}

.bantpc-field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
}

.bantpc-field__required {
  color: #ff4c4c;
}

.bantpc-field__price {
  margin-left: 4px;
  color: #00008a;
  font-weight: 700;
  text-transform: none;
  white-space: nowrap;
}

.bantpc-field__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid #00008a;
  border-radius: 50%;
  background: transparent;
  color: #00008a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.bantpc-field__info[aria-expanded="true"],
.bantpc-field__info:hover {
  background: #00008a;
  color: #fff;
}

.bantpc .form-control {
  height: 48px;
  padding: 0 20px;
  border: 1px solid #e5e5e5;
  border-radius: 25px;
  background-color: #fafafa;
  font-size: 15px;
  font-weight: 300;
  color: inherit;
}

.bantpc textarea.form-control {
  height: auto;
  min-height: 96px;
  padding: 12px 20px;
  border-radius: 20px;
  resize: vertical;
}

.bantpc .form-control:focus {
  border-color: #00008a;
  outline: none;
  box-shadow: none;
}

.bantpc-field__checkbox label {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
  cursor: pointer;
}

.bantpc-field__counter,
.bantpc-field__help,
.bantpc-field__note,
.bantpc-field__error {
  display: block;
  margin-top: 5px;
  padding: 0 20px;
  font-size: 13px;
}

.bantpc-field__counter,
.bantpc-field__help {
  color: #464a4c;
}

.bantpc-field__note {
  color: #00008a;
}

.bantpc-field__note[hidden] {
  display: none;
}

.bantpc-field__error {
  color: #ff4c4c;
}

.bantpc-field--invalid .form-control {
  border-color: #ff4c4c;
}

.bantpc__error {
  margin: 0;
}