/*
 * Theme resets (e.g. Hello Elementor's reset.css, Storefront's style.css) style inputs with
 * element + attribute selectors such as input[type=text], which outrank the box's single-class
 * rules. These rules restore the box values with higher specificity, using the box's own CSS
 * variables, in both checkouts: #payphonebox-classic-container (classic) and
 * #payphonebox-blocks-container (blocks, block-payment/src/Content.js).
 * Selectors are limited to input and select: the box also puts .ppb-form-control on its buttons,
 * which these theme resets do not touch.
 * Height is not restored because the box already sets it with !important; border and radius are
 * restored at the end of this file, for themes that also force them with !important.
 */
/*
 * The box sets its base typography on :root, so inside a page it inherits the theme's (or
 * WooCommerce's payment box) font, size, line height and color instead. The container gets the box
 * values (from its :root rule) so the box looks the same in any theme.
 */
#payphonebox-classic-container,
#payphonebox-blocks-container {
  font-family: Helvetica;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  color: var(--ppb-bs-body-color);
}

/* Themes such as Storefront turn every img into a rounded block; the box keeps the browser defaults. */
#payphonebox-classic-container img,
#payphonebox-blocks-container img {
  display: inline;
  max-width: none;
  border-radius: 0;
}

#payphonebox-classic-container .ppb-img-fluid,
#payphonebox-classic-container .ppb-img-fluid-paypment-box,
#payphonebox-blocks-container .ppb-img-fluid,
#payphonebox-blocks-container .ppb-img-fluid-paypment-box {
  max-width: 100%;
}

#payphonebox-classic-container input.ppb-form-control,
#payphonebox-classic-container select.ppb-form-select,
#payphonebox-blocks-container input.ppb-form-control,
#payphonebox-blocks-container select.ppb-form-select {
  border: var(--ppb-bs-border-width) solid var(--ppb-bs-border-color);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#payphonebox-classic-container input.ppb-form-control,
#payphonebox-blocks-container input.ppb-form-control {
  padding: 0.375rem 0.75rem;
  color: var(--ppb-bs-body-color);
  background-color: var(--ppb-bs-body-bg);
  box-shadow: none;
}

/*
 * Restoring the base padding above with an id outranks the box's own padding variants, so they
 * are restored too, in the same order as in the box stylesheet.
 */
#payphonebox-classic-container input.ppb-form-control-lg,
#payphonebox-blocks-container input.ppb-form-control-lg {
  padding: 0.5rem 1rem;
}

#payphonebox-classic-container .ppb-input-group > input.ppb-form-control,
#payphonebox-blocks-container .ppb-input-group > input.ppb-form-control {
  padding: 0.5rem 1rem;
}

#payphonebox-classic-container .country-selector input,
#payphonebox-blocks-container .country-selector input {
  padding-left: 97px;
}

#payphonebox-classic-container select.ppb-form-select:focus,
#payphonebox-blocks-container select.ppb-form-select:focus {
  border-color: #86b7fe;
}

#payphonebox-classic-container input.ppb-form-control:focus,
#payphonebox-blocks-container input.ppb-form-control:focus {
  color: var(--ppb-bs-body-color);
  background-color: var(--ppb-bs-body-bg);
}

#payphonebox-classic-container input.ppb-form-control::placeholder,
#payphonebox-blocks-container input.ppb-form-control::placeholder {
  color: var(--ppb-bs-secondary-color);
  opacity: 1;
}

#payphonebox-classic-container input.ppb-form-control:disabled,
#payphonebox-blocks-container input.ppb-form-control:disabled {
  background-color: var(--ppb-bs-secondary-bg);
}

@media (prefers-reduced-motion: reduce) {
  #payphonebox-classic-container input.ppb-form-control,
  #payphonebox-classic-container select.ppb-form-select,
  #payphonebox-blocks-container input.ppb-form-control,
  #payphonebox-blocks-container select.ppb-form-select {
    transition: none;
  }
}

/*
 * Some themes (e.g. NewsExo) force border, border-radius and the focus border and shadow on inputs
 * with !important, which only an !important rule can override. Restoring them this way also
 * outranks the box's own !important rules (the focus shadow it removes from
 * .ppb-form-control-paypment-box, and its border utilities), so those are restored below too, in
 * the box order. The radius is restored only through the box's radius utilities: a base
 * !important radius would also round the inner corners that .ppb-input-group squares off where an
 * input meets its icon. Every box input gets each corner from a utility or from the input group,
 * which squares it off like those themes.
 */
#payphonebox-classic-container input.ppb-form-control,
#payphonebox-blocks-container input.ppb-form-control {
  border: var(--ppb-bs-border-width) solid var(--ppb-bs-border-color) !important;
}

#payphonebox-classic-container input.ppb-form-control:focus,
#payphonebox-blocks-container input.ppb-form-control:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#payphonebox-classic-container input.ppb-form-control-paypment-box:focus,
#payphonebox-blocks-container input.ppb-form-control-paypment-box:focus {
  box-shadow: none !important;
}

#payphonebox-classic-container input.ppb-border-radius,
#payphonebox-blocks-container input.ppb-border-radius {
  border-radius: 0.938rem !important;
}

#payphonebox-classic-container input.ppb-border-radius-0,
#payphonebox-blocks-container input.ppb-border-radius-0 {
  border-radius: 0 !important;
}

#payphonebox-classic-container input.ppb-border-radius-te,
#payphonebox-blocks-container input.ppb-border-radius-te {
  border-top-right-radius: 0.938rem !important;
}

#payphonebox-classic-container input.ppb-border-radius-be,
#payphonebox-blocks-container input.ppb-border-radius-be {
  border-bottom-right-radius: 0.938rem !important;
}

#payphonebox-classic-container input.ppb-border-radius-ts,
#payphonebox-blocks-container input.ppb-border-radius-ts {
  border-top-left-radius: 0.938rem !important;
}

#payphonebox-classic-container input.ppb-border-radius-bs,
#payphonebox-blocks-container input.ppb-border-radius-bs {
  border-bottom-left-radius: 0.938rem !important;
}

#payphonebox-classic-container input.ppb-border-radius-te-0,
#payphonebox-blocks-container input.ppb-border-radius-te-0 {
  border-top-right-radius: 0 !important;
}

#payphonebox-classic-container input.ppb-border-radius-be-0,
#payphonebox-blocks-container input.ppb-border-radius-be-0 {
  border-bottom-right-radius: 0 !important;
}

#payphonebox-classic-container input.ppb-border-radius-ts-0,
#payphonebox-blocks-container input.ppb-border-radius-ts-0 {
  border-top-left-radius: 0 !important;
}

#payphonebox-classic-container input.ppb-border-radius-bs-0,
#payphonebox-blocks-container input.ppb-border-radius-bs-0 {
  border-bottom-left-radius: 0 !important;
}

#payphonebox-classic-container input.ppb-border-end-0,
#payphonebox-blocks-container input.ppb-border-end-0 {
  border-right: 0 !important;
}

#payphonebox-classic-container input.ppb-border-start-0,
#payphonebox-blocks-container input.ppb-border-start-0 {
  border-left: 0 !important;
}