* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-card-image-base-blur: (<length>) Controls the blur radius applied to the base card image layer.
 * @prop --tct-card-image-primary-color: (<color>) Controls the background color of the base layer when bg-primary is applied.
 * @prop --tct-card-image-secondary-color: (<color>) Controls the background color of the base layer when bg-secondary is applied.
 * @prop --tct-card-image-tertiary-color: (<color>) Controls the background color of the base layer when bg-tertiary is applied.
 * @prop --tct-card-image-base-gradient-deg: (<angle>) Controls the angle of the base layer gradient.
 * @prop --tct-card-image-base-gradient-left-color: (<color>) Controls the left color stop of the base layer gradient.
 * @prop --tct-card-image-base-gradient-left-stop: (<percentage>) Controls the position of the left color stop of the base layer gradient.
 * @prop --tct-card-image-base-gradient-middle-color: (<color>) Controls the middle color stop of the base layer gradient.
 * @prop --tct-card-image-base-gradient-middle-stop: (<percentage>) Controls the position of the middle color stop of the base layer gradient.
 * @prop --tct-card-image-base-gradient-right-color: (<color>) Controls the right color stop of the base layer gradient.
 * @prop --tct-card-image-base-gradient-right-stop: (<percentage>) Controls the position of the right color stop of the base layer gradient.
 * @prop --tct-card-image-overlay-opacity: (<number>) Controls the opacity of the overlay layer.
 * @prop --tct-card-image-overlay-mix-blend-mode: (<custom-ident>) Controls the mix-blend-mode of the dot-pattern overlay.
 * @prop --tct-card-image-dot-size: (<length>) Controls the size of dots in the dot-pattern overlay.
 * @prop --tct-card-image-dot-spacing: (<length>) Controls the spacing between dots in the dot-pattern overlay.
 * @prop --tct-card-image-dot-color: (<color>) Controls the color of dots in the dot-pattern overlay.
 * @prop --tct-card-image-font-color: (<color>) Controls the text color of the card number, holder, and other card details.
 * @prop --tct-card-image-text-shadow: (*) Controls the text shadow of the card number, holder, and other card details.
 * @prop --tct-card-image-status-box-shadow: (*) Controls the box shadow of the status banner that straddles the top edge of the card.
 * @prop --tct-card-image-status-background-digital: (<color>) Controls the background color of the status banner when status is digital.
 * @prop --tct-card-image-status-color-digital: (<color>) Controls the text color of the status banner when status is digital.
 * @prop --tct-card-image-status-background-enabled: (<color>) Controls the background color of the status banner when status is enabled.
 * @prop --tct-card-image-status-color-enabled: (<color>) Controls the text color of the status banner when status is enabled.
 * @prop --tct-card-image-status-background-new: (<color>) Controls the background color of the status banner when status is new.
 * @prop --tct-card-image-status-color-new: (<color>) Controls the text color of the status banner when status is new.
 * @prop --tct-card-image-status-background-disabled: (<color>) Controls the background color of the status banner when status is disabled.
 * @prop --tct-card-image-status-color-disabled: (<color>) Controls the text color of the status banner when status is disabled.
 * @prop --tct-card-image-status-background-locked: (<color>) Controls the background color of the status banner when status is locked.
 * @prop --tct-card-image-status-color-locked: (<color>) Controls the text color of the status banner when status is locked.
 * @prop --tct-card-image-status-background-damaged: (<color>) Controls the background color of the status banner when status is damaged.
 * @prop --tct-card-image-status-color-damaged: (<color>) Controls the text color of the status banner when status is damaged.
 * @prop --tct-card-image-status-background-lost: (<color>) Controls the background color of the status banner when status is lost.
 * @prop --tct-card-image-status-color-lost: (<color>) Controls the text color of the status banner when status is lost.
 * @prop --tct-card-image-status-background-stolen: (<color>) Controls the background color of the status banner when status is stolen.
 * @prop --tct-card-image-status-color-stolen: (<color>) Controls the text color of the status banner when status is stolen.
 * @prop --tct-card-image-status-background-lost-or-stolen: (<color>) Controls the background color of the status banner when status is lost-or-stolen.
 * @prop --tct-card-image-status-color-lost-or-stolen: (<color>) Controls the text color of the status banner when status is lost-or-stolen.
 * @prop --tct-card-image-disabled-opacity: (<number>) Controls the opacity of the card image container when disabled.
 * @prop --tct-card-image-max-width: (<length-percentage>) Controls the maximum width of the card image container.
 * @prop --tct-card-image-min-width: (<length>) Controls the minimum width of the card image container.
 * @prop --tct-card-image-width?: (<length-percentage>) Controls the optional explicit width of the card image container.
 * @prop --tct-card-image-base-url?: (<image>) Controls the optional background image of the base layer when bg-custom is applied.
 * @prop --tct-card-image-overlay-url?: (<image>) Controls the optional background image of the overlay layer when bg-custom is applied.
 * @prop --tct-card-image-fi-logo: (<image>) Controls the financial-institution logo image rendered on the card.
 * @prop --tct-card-image-logo-padding: (<length-percentage>+) Controls the inner padding around the financial-institution logo.
 * @prop --tct-card-image-type-color: (<color>) Controls the text color of the card vendor type label.
 * @prop --tct-card-image-type-font-size: (<length-percentage>) Controls the font size of the card vendor type label.
 * @prop --tct-card-image-type-margin-bottom: (<length-percentage>) Controls the bottom margin of the card vendor type label.
 * @prop --tct-card-image-type-margin-right: (<length-percentage>) Controls the right margin of the card vendor type label.
 */
:host {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:host([inline]) {
  display: inline-flex;
}

:host(.horizontal) {
  max-width: var(--tct-card-image-max-width, min(400px, 100%));
  min-width: var(--tct-card-image-min-width, 40px);
  width: var(--tct-card-image-width);
}

:host(.vertical) {
  max-width: var(--tct-card-image-max-width, min(250px, 100%));
  min-width: var(--tct-card-image-min-width, 25px);
  width: var(--tct-card-image-width);
}

:host(.has-action) {
  margin-top: 22px;
  margin-right: 22px;
}

:host(.has-action.has-banner) {
  margin-top: 11px;
}

:host(:hover) .card-image-container.clickable,
:host(:focus-within) .card-image-container.clickable {
  transform: translateY(-8px) scale(1.03);
  box-shadow: var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14));
}

:host(:hover) .card-status-banner.clickable,
:host(:focus-within) .card-status-banner.clickable {
  transform: translateY(-8px) scale(1.03);
}

:host([disabled]:not([disabled=false])) .card-image-container {
  opacity: var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
  cursor: not-allowed;
}
:host([disabled]:not([disabled=false])) .card-status-banner {
  cursor: not-allowed;
}

.card-wrapper > q2-btn {
  --tct-btn-default-double-focus-visible-ring: var(--comp-aesthetic-btn-focus-ring, none);
  --const-double-focus-ring: none;
  --tct-btn-min-height-medium: 0;
  --tct-btn-padding-size-medium: 0;
  --tct-btn-font-size-medium: inherit;
  width: 100%;
  max-width: 100%;
}

.card-wrapper {
  position: relative;
  max-width: 100%;
  --comp-aesthetic-btn-focus-ring: var(--tct-btn-default-double-focus-visible-ring);
}

.card-action {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 5;
}

.card-image-container {
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));
}
.card-image-container.inline {
  display: inline-block;
}
.card-image-container.clickable {
  cursor: pointer;
  will-change: transform;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-image-container.block {
  display: block;
}
.card-image-container.horizontal {
  aspect-ratio: 8/5;
  border-radius: 3%/4.8%;
  width: var(--tct-card-image-width, 100%);
  max-width: var(--tct-card-image-max-width, 400px);
  min-width: var(--tct-card-image-min-width, 40px);
  flex-shrink: 0;
}
.card-image-container.vertical {
  aspect-ratio: 5/8;
  border-radius: 4.8%/3%;
  width: var(--tct-card-image-width, 100%);
  max-width: var(--tct-card-image-max-width, 250px);
  min-width: var(--tct-card-image-min-width, 25px);
  flex-shrink: 0;
}

.card-image,
.card-image-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-image {
  z-index: 1;
  filter: blur(var(--tct-card-image-base-blur, 0px));
}

.card-image-overlay {
  z-index: 2;
  opacity: var(--tct-card-image-overlay-opacity, 1);
}

.card-image.bg-primary {
  background-color: var(--tct-card-image-primary-color, var(--t-primary, #5446a4));
}
.card-image.bg-secondary {
  background-color: var(--tct-card-image-secondary-color, var(--t-secondary, #2a7de1));
}
.card-image.bg-tertiary {
  background-color: var(--tct-card-image-tertiary-color, var(--t-tertiary, #6b7280));
}

.card-image.bg-gradient {
  background: linear-gradient(var(--tct-card-image-base-gradient-deg, 110.95deg), var(--tct-card-image-base-gradient-left-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-left-stop, 0.54%), var(--tct-card-image-base-gradient-middle-color, var(--t-gray-11, #cccccc)) var(--tct-card-image-base-gradient-middle-stop, 60.22%), var(--tct-card-image-base-gradient-right-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-right-stop, 100%));
}

.card-image-overlay.bg-dot {
  background-image: radial-gradient(circle, var(--tct-card-image-dot-color, rgba(128, 128, 128, 0.5)) var(--tct-card-image-dot-size, 0.5px), transparent var(--tct-card-image-dot-size, 0.5px));
  background-size: var(--tct-card-image-dot-spacing, 2px) var(--tct-card-image-dot-spacing, 2px);
  mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode, normal);
  opacity: var(--tct-card-image-overlay-opacity, 1);
}

.card-image.bg-custom {
  background-image: var(--tct-card-image-base-url);
  background-size: cover;
  background-position: center;
}

.card-image-overlay.bg-custom {
  background-image: var(--tct-card-image-overlay-url);
  background-size: cover;
  background-position: center;
}

.card-status-banner {
  position: relative;
  z-index: 4;
  width: fit-content;
  min-width: 33.33%;
  max-width: 72%;
  height: 22px;
  margin: 0 auto -11px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px/5px;
  box-shadow: var(--tct-card-image-status-box-shadow, var(--app-shadow-3));
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-status-banner.vertical {
  min-width: 60%;
}
.card-status-banner.clickable {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card-status-text {
  font-size: var(--const-px-14, 14px);
  font-family: var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);
  text-transform: uppercase;
  white-space: nowrap;
}

.card-status-banner.status-enabled {
  background-color: var(--tct-card-image-status-background-enabled, var(--const-stoplight-success, #0e8a00));
  color: var(--tct-card-image-status-color-enabled, var(--tct-white, #fff));
}

.card-status-banner.status-new {
  background-color: var(--tct-card-image-status-background-new, var(--const-stoplight-info, #0079c1));
  color: var(--tct-card-image-status-color-new, var(--tct-white, #fff));
}

.card-status-banner.status-disabled {
  background-color: var(--tct-card-image-status-background-disabled, var(--const-stoplight-alert, #d20a0a));
  color: var(--tct-card-image-status-color-disabled, var(--tct-white, #fff));
}

.card-status-banner.status-locked {
  background-color: var(--tct-card-image-status-background-locked, var(--const-stoplight-alert, #d20a0a));
  color: var(--tct-card-image-status-color-locked, var(--tct-white, #fff));
}

.card-status-banner.status-damaged {
  background-color: var(--tct-card-image-status-background-damaged, var(--const-stoplight-warning, #c35500));
  color: var(--tct-card-image-status-color-damaged, var(--tct-white, #fff));
}

.card-status-banner.status-lost {
  background-color: var(--tct-card-image-status-background-lost, var(--const-stoplight-warning, #c35500));
  color: var(--tct-card-image-status-color-lost, var(--tct-white, #fff));
}

.card-status-banner.status-stolen {
  background-color: var(--tct-card-image-status-background-stolen, var(--const-stoplight-warning, #c35500));
  color: var(--tct-card-image-status-color-stolen, var(--tct-white, #fff));
}

.card-status-banner.status-lost-or-stolen {
  background-color: var(--tct-card-image-status-background-lost-or-stolen, var(--const-stoplight-warning, #c35500));
  color: var(--tct-card-image-status-color-lost-or-stolen, var(--tct-white, #fff));
}

.card-status-banner.status-digital {
  background-color: var(--tct-card-image-status-background-digital, var(--tct-black, #000));
  color: var(--tct-card-image-status-color-digital, var(--tct-white, #fff));
}

.card-details-wrapper {
  container-type: inline-size;
  position: relative;
  z-index: 3;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  margin-left: -1px;
  margin-top: -1px;
}

.card-text {
  color: var(--tct-card-image-font-color, var(--t-base, #fff));
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.55px;
  text-shadow: var(--tct-card-image-text-shadow, 0px 0px 1px rgba(0, 0, 0, 0.85));
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card-details-horizontal {
  padding: 2.5cqw;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.horizontal-logo-wrapper {
  padding: 0 1.25cqw;
  margin: 1.25cqw 0 2.5cqw 0;
  width: 70cqw;
  height: 11.25cqw;
}

.horizontal-logo {
  background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  background-origin: content-box;
  padding: var(--tct-card-image-logo-padding, 2.5cqw 0);
  width: 100%;
  height: 100%;
}

.horizontal-chip {
  width: 15cqw;
  height: 10cqw;
  margin-left: 8.75cqw;
}
.horizontal-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.horizontal-card-number {
  padding-top: 2.5cqw;
  text-align: left;
  font-size: 5cqw;
  height: 7.5cqw;
  width: 85cqw;
  margin-left: 5cqw;
}

.horizontal-exp-date-card-type-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 10cqw;
  margin: 1.25cqw 0;
}

.horizontal-exp-date-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 25cqw;
  height: 100%;
  margin-left: 1.25cqw;
}

.horizontal-exp-date-label {
  font-size: 2.5cqw;
  margin-bottom: 1cqw;
}

.horizontal-exp-date-value {
  font-size: 3.5cqw;
}

.horizontal-card-type {
  font-size: var(--tct-card-image-type-font-size, 4cqw);
  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
  margin-right: var(--tct-card-image-type-margin-right, 4.15cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, -10.1cqw);
}
.horizontal-card-type.vendor-mastercard {
  font-size: var(--tct-card-image-type-font-size, 3cqw);
  margin-right: var(--tct-card-image-type-margin-right, 1.25cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);
}
.horizontal-card-type.vendor-visa {
  font-size: var(--tct-card-image-type-font-size, 3cqw);
  margin-right: var(--tct-card-image-type-margin-right, 0.09cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, -6.25cqw);
}

.horizontal-card-holder-vendor-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.horizontal-card-holder-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 73.75cqw;
  height: 10cqw;
  padding: 0 1.25cqw;
  margin-right: 1.25cqw;
  min-width: 0;
}

.horizontal-card-holder-label {
  font-size: 2.5cqw;
  margin-bottom: 1cqw;
}

.horizontal-card-holder-value {
  font-size: 4.5cqw;
}

.horizontal-vendor {
  width: 20cqw;
  height: 12.5cqw;
  flex-shrink: 0;
}
.horizontal-vendor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-details-vertical {
  position: relative;
  z-index: 3;
  padding: 4cqw;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.vertical-chip {
  width: 16cqw;
  height: 24cqw;
  margin: 12cqw 0 30cqw 46cqw;
}
.vertical-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vertical-logo-wrapper {
  padding: 0 2cqw;
  margin-bottom: 4cqw;
  width: 100%;
  height: 18cqw;
}

.vertical-logo {
  background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-origin: content-box;
  padding: var(--tct-card-image-logo-padding, 4cqw 0);
  width: 100%;
  height: 100%;
}

.vertical-card-number {
  text-align: left;
  font-size: 8cqw;
  height: 12cqw;
  width: 100%;
  padding: 0 2cqw;
}

.vertical-card-holder-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 16cqw;
  padding: 0 2cqw;
  min-width: 0;
}

.vertical-card-holder-label {
  font-size: 4cqw;
  margin-bottom: 1.6cqw;
}

.vertical-card-holder-value {
  font-size: 7.2cqw;
}

.vertical-exp-date-card-type-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 16cqw;
}

.vertical-exp-date-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 40cqw;
  height: 100%;
  margin-left: 2cqw;
  padding-bottom: 2cqw;
}

.vertical-exp-date-label {
  font-size: 4cqw;
  margin-bottom: 1.6cqw;
}

.vertical-exp-date-value {
  font-size: 5.6cqw;
}

.vertical-card-type {
  font-size: var(--tct-card-image-type-font-size, 6.4cqw);
  padding-bottom: 2cqw;
  color: var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));
  margin-right: var(--tct-card-image-type-margin-right, 3cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, -19cqw);
}
.vertical-card-type.vendor-mastercard {
  font-size: var(--tct-card-image-type-font-size, 4.8cqw);
  margin-right: var(--tct-card-image-type-margin-right, 2cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);
}
.vertical-card-type.vendor-visa {
  font-size: var(--tct-card-image-type-font-size, 4.8cqw);
  margin-right: var(--tct-card-image-type-margin-right, 0.05625cqw);
  margin-bottom: var(--tct-card-image-type-margin-bottom, -10cqw);
}

.vertical-vendor-row {
  display: flex;
  justify-content: end;
}

.vertical-vendor {
  width: 32cqw;
  height: 20cqw;
  flex-shrink: 0;
}
.vertical-vendor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}