/* Forms — one stylesheet for every form on the site.
   Contact Form 7, WooCommerce (cart, checkout, account, variations), the shop
   search, and the comment form if it ever comes back. Loaded globally from
   inc/enqueue.php: forms turn up inside blocks, in the sidebar and in Woo
   templates, so per-page enqueueing would miss one. */

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.contener-main input[type="text"],
.contener-main input[type="email"],
.contener-main input[type="url"],
.contener-main input[type="tel"],
.contener-main input[type="number"],
.contener-main input[type="password"],
.contener-main input[type="search"],
.contener-main input[type="date"],
.contener-main select,
.contener-main textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--contener-border);
  border-radius: var(--contener-radius);
  background: var(--contener-card-bg);
  color: var(--contener-heading);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s var(--contener-ease), box-shadow .15s var(--contener-ease);
  appearance: none;
}

.contener-main textarea { min-height: 140px; resize: vertical; }

.contener-main select {
  padding-right: 2.4em;
  /* The arrow is inline so it inherits the brand colour without an image request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2354595F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9em center;
  background-size: 12px 8px;
}

.contener-main input::placeholder,
.contener-main textarea::placeholder { color: var(--contener-text-muted); opacity: 1; }

.contener-main input:focus,
.contener-main select:focus,
.contener-main textarea:focus {
  outline: none;
  border-color: var(--contener-brand);
  box-shadow: 0 0 0 3px rgb(4 120 198 / .18);
}

.contener-main label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--contener-heading); }
.contener-main label .required { color: #c92a2a; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.contener-main input[type="submit"],
.contener-main button[type="submit"],
.contener-main .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: .85em 1.8em;
  border: 1px solid transparent;
  border-radius: var(--contener-radius);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s var(--contener-ease);
  appearance: none;
}
.contener-main input[type="submit"]:hover,
.contener-main button[type="submit"]:hover,
.contener-main .wpcf7-submit:hover { background: var(--contener-brand-dark); }

.contener-main input[type="submit"]:disabled,
.contener-main button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Contact Form 7
   -------------------------------------------------------------------------- */

.wpcf7 form .wpcf7-form-control-wrap { display: block; }
.wpcf7 form p { margin: 0 0 16px; }
.wpcf7 form p:last-child { margin-bottom: 0; }

.wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* CF7 5.x+ hides the response box until there is something to say; it is only
   given a border once it carries a status class. */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid currentColor;
  border-radius: var(--contener-radius);
  font-size: .925rem;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output      { color: #1b7a43; background: #eaf7ef; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { color: #8a6100; background: #fdf6e3; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output   { color: #a4262c; background: #fdeded; }

.wpcf7-not-valid { border-color: #c92a2a !important; }
.wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #c92a2a;
  font-size: .85rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   WooCommerce forms
   -------------------------------------------------------------------------- */

.woocommerce form .form-row { display: block; margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { margin-bottom: 6px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

@media (min-width: 640px) {
  .woocommerce form .col2-set .form-row-first,
  .woocommerce form .form-row-first { width: calc(50% - 8px); display: inline-block; margin-right: 8px; }
  .woocommerce form .col2-set .form-row-last,
  .woocommerce form .form-row-last  { width: calc(50% - 8px); display: inline-block; margin-left: 8px; }
}

/* Woo styles its own checkout/account fields with
   `.woocommerce form .form-row input.input-text` — (0,3,2) against the (0,2,1)
   of the generic rules above, so checkout came out at 4px radius and 40px tall
   while every other form on the site was 10px and 47px. Match its selectors so
   one field style covers the whole site. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form .form-row input.input-text {
  padding: .7em .9em;
  border: 1px solid var(--contener-border);
  border-radius: var(--contener-radius);
  background: var(--contener-card-bg);
  color: var(--contener-heading);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
}
.woocommerce form .form-row textarea { min-height: 120px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--contener-brand);
  box-shadow: 0 0 0 3px rgb(4 120 198 / .18);
}

.woocommerce form .form-row .required { color: #c92a2a; text-decoration: none; }
.woocommerce .woocommerce-invalid input.input-text { border-color: #c92a2a; }
.woocommerce .woocommerce-validated input.input-text { border-color: #1b7a43; }

.select2-container .select2-selection--single {
  height: auto;
  padding: .55em .6em;
  border: 1px solid var(--contener-border);
  border-radius: var(--contener-radius);
}

/* Quantity box: narrow, and aligned with the button beside it. */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity input.qty {
  width: 5.5em;
  min-width: 0;
  padding: .7em .5em;
  text-align: center;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid var(--contener-brand);
  border-radius: var(--contener-radius);
  background: var(--contener-surface-alt);
  list-style: none;
}
.woocommerce-error { border-left-color: #c92a2a; }
.woocommerce-message { border-left-color: #1b7a43; }