/* This stylesheet is needed in order to align the Recurly inputs appearance with the component library inputs */
/* This is due to Recurly's very limited `styles` api which prevents most component level styling we need */

/* General Input Styles */
.recurly-element-number,
.recurly-element-month,
.recurly-element-year,
.recurly-element-cvv,
.recurly-element-card {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-right: 0px;
  border-left: 0px;
  border-top: 0px;
  border-radius: 0px;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 2.4rem;
  background-color: transparent;
  padding: 0rem;
  margin: 0rem;
  height: 3.3rem;
}

@property --recurly-border-color {
  syntax: '<color>';
  inherits: false;
}

@property --recurly-error-hover {
  syntax: '<color>';
  inherits: false;
}

@property --recurly-error-color {
  syntax: '<color>';
  inherits: false;
}

@media (prefers-color-scheme: light) {
  :root {
    --recurly-border-color: #27292d;
    --recurly-error-color: #a82700;
    --recurly-border-hover: #288bd3;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --recurly-border-color: #dadfe3;
    --recurly-error-color: #f69166;
    --recurly-border-hover: #3ca2dd;
  }
}

.recurly-element-number,
.recurly-element-month,
.recurly-element-year,
.recurly-element-cvv,
.recurly-element-card {
  border-color: var(--recurly-border-color);
}

/* Error Border Colors */
.input-error > .recurly-element-number,
.input-error > .recurly-element-month,
.input-error > .recurly-element-year,
.input-error > .recurly-element-cvv,
.input-error > .recurly-element-card {
  border-color: var(--recurly-error-color);
}

/* Hover Border Styles */
.recurly-element-number:hover,
.recurly-element-month:hover,
.recurly-element-year:hover,
.recurly-element-cvv:hover,
.recurly-element-card:hover {
  border-color: var(--recurly-border-hover);
}

/* Focus Border Styles  */
.recurly-element-focus {
  border-color: var(--recurly-border-hover) !important;
}

.grecaptcha-badge {
  visibility: hidden;
}