/*
 * Adyen card bridge — styles for the Adyen-rendered chrome (labels, borders,
 * error text, icons). The secure fields themselves are iframes styled only via
 * the `styles` object the parent passes in `init.card.styles`.
 *
 * Plain-CSS port of the `#adyen-card-container` rules in
 * modules/CreditCardForm/src/styles.scss. Collage tokens are replaced by
 * `--bridge-*` custom properties that the parent may override through
 * `init.cssVariables` (light-mode defaults below). The page background stays
 * transparent so the parent's background — light or dark — shows through.
 */

:root {
    --bridge-font-family: "GraphikEtsy", "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bridge-font-size: 16px;
    --bridge-text-primary: #312b36;
    --bridge-text-secondary: #665e5c;
    --bridge-text-critical: #c7102f;
    --bridge-text-placeholder: #736b68;
    --bridge-input-background: transparent;
    --bridge-input-border: #928681;
    --bridge-input-border-hover: #2314109e;
    --bridge-input-border-active: #312b36;
    --bridge-input-border-critical: #c7102f;
    --bridge-input-border-width: 1px;
    --bridge-input-border-radius: 6px;
    --bridge-input-height: 48px;
    --bridge-error-background: #fdecef;
    --bridge-icon-color: #222222;
    --bridge-challenge-background: #ffffff;
    --bridge-challenge-max-height: 520px;
    --bridge-popover-background: #ffffff;
    --bridge-popover-text: #312b36;
    --bridge-popover-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

html,
body {
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: var(--bridge-font-family);
    font-size: var(--bridge-font-size);
    color: var(--bridge-text-primary);
    -webkit-font-smoothing: antialiased;
}

#adyen-card-container {
    /* — Borders — */
    --adyen-sdk-border-width-s: var(--bridge-input-border-width);
    --adyen-sdk-border-radius-s: 0;
    --adyen-sdk-border-radius-m: var(--bridge-input-border-radius);
    --adyen-sdk-color-outline-primary: var(--bridge-input-border);
    --adyen-sdk-color-outline-primary-hover: var(--bridge-input-border-hover);
    --adyen-sdk-color-outline-primary-active: var(--bridge-input-border-active);
    --adyen-sdk-color-outline-critical: var(--bridge-input-border-critical);
    --adyen-sdk-color-outline-disabled: var(--bridge-input-border);

    /* — Backgrounds — */
    --adyen-sdk-color-background-primary: var(--bridge-input-background);

    /* — Label / text colors — */
    --adyen-sdk-color-label-primary: var(--bridge-text-primary);
    --adyen-sdk-color-label-secondary: var(--bridge-text-secondary);
    --adyen-sdk-color-label-critical: var(--bridge-text-critical);
    --adyen-sdk-color-label-disabled: var(--bridge-text-placeholder);

    /* — Typography — */
    --adyen-sdk-text-body-font-size: var(--bridge-font-size);

    /* — Sizing — */
    --adyen-sdk-spacer-110: var(--bridge-input-height);
}

/* Error-state background: Adyen v6 flags the field grandparent and the input. */
#adyen-card-container .adyen-checkout__field--error .adyen-checkout__input-wrapper,
#adyen-card-container .adyen-checkout__input-wrapper:has(.adyen-checkout__input--invalid),
#adyen-card-container .adyen-checkout__input--invalid {
    background-color: var(--bridge-error-background);
}

#adyen-card-container .adyen-checkout__label__text {
    font-weight: 700;
    color: var(--bridge-text-primary);
}

/* Keep labels dark in error state; only the message below turns red. */
#adyen-card-container .adyen-checkout__field--error .adyen-checkout__label__text {
    color: var(--bridge-text-primary);
}

#adyen-card-container .adyen-checkout-form-instruction,
#adyen-card-container .adyen-checkout__card__brands {
    display: none;
}

/* Expiry + CVC share one flex row; let it wrap into a single column when narrow. */
#adyen-card-container .adyen-checkout__field-wrapper {
    flex-wrap: wrap;
    gap: var(--adyen-sdk-spacer-070, 16px);
    margin-bottom: var(--adyen-sdk-spacer-070, 16px);
}

#adyen-card-container .adyen-checkout__field-wrapper:last-of-type {
    margin-bottom: 0;
}

#adyen-card-container .adyen-checkout__field-wrapper > .adyen-checkout__field {
    flex: 1 1 150px;
    width: auto;
    margin: 0;
}

/* Error text below fields: body size, red circle "!" icon before the text. */
#adyen-card-container .adyen-checkout-contextual-text--error,
#adyen-card-container .adyen-checkout__error-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bridge-font-size);
    color: var(--bridge-text-critical);
}

#adyen-card-container .adyen-checkout-contextual-text--error::before,
#adyen-card-container .adyen-checkout__error-text::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bridge-text-critical);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M11 6V14H13V6zM12 15.25A1.25 1.25 0 1 0 12 17.75 1.25 1.25 0 0 0 12 15.25'/%3E%3C/svg%3E");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Holder name is a real <input>; make its placeholder red in error state. */
#adyen-card-container .adyen-checkout__field--error .adyen-checkout__input--invalid::placeholder {
    color: var(--bridge-text-critical);
}

/* Hide Adyen's contextual hints under expiry and security code. */
#adyen-card-container .adyen-checkout__card__exp-date .adyen-checkout-contextual-text,
#adyen-card-container .adyen-checkout__field--expiryDate .adyen-checkout-contextual-text,
#adyen-card-container .adyen-checkout__field--encryptedExpiryDate .adyen-checkout-contextual-text,
#adyen-card-container .adyen-checkout__field--securityCode .adyen-checkout-contextual-text,
#adyen-card-container .adyen-checkout__field--encryptedSecurityCode .adyen-checkout-contextual-text {
    display: none;
}

/*
 * Card number field icons: generic card icon on the left, lock on the right.
 * Rendered with CSS masks so --bridge-icon-color can theme them (the SCSS
 * original bakes the fill into the data URI and ships a white dark-mode copy).
 */
#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper::before,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper::before,
#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper::after,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper::after {
    content: "";
    align-self: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--bridge-icon-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper::before,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper::before {
    margin-left: 12px;
    /* etsy-icon/clg/core/creditcard.svg */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 18A2 2 0 0 1 20 20H4A2 2 0 0 1 2 18V10.5A.5.5 0 0 1 2.5 10H21.5A.5.5 0 0 1 22 10.5zM4.5 15A.5.5 0 0 0 4 15.5V16.5A.5.5 0 0 0 4.5 17H11.5A.5.5 0 0 0 12 16.5V15.5A.5.5 0 0 0 11.5 15z'/%3E%3Cpath d='M20 4A2 2 0 0 1 22 6V7.5A.5.5 0 0 1 21.5 8H2.5A.5.5 0 0 1 2 7.5V6A2 2 0 0 1 4 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 18A2 2 0 0 1 20 20H4A2 2 0 0 1 2 18V10.5A.5.5 0 0 1 2.5 10H21.5A.5.5 0 0 1 22 10.5zM4.5 15A.5.5 0 0 0 4 15.5V16.5A.5.5 0 0 0 4.5 17H11.5A.5.5 0 0 0 12 16.5V15.5A.5.5 0 0 0 11.5 15z'/%3E%3Cpath d='M20 4A2 2 0 0 1 22 6V7.5A.5.5 0 0 1 21.5 8H2.5A.5.5 0 0 1 2 7.5V6A2 2 0 0 1 4 4z'/%3E%3C/svg%3E");
}

#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper::after,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper::after {
    margin-right: 12px;
    /* etsy-icon/clg/core/lock.svg */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1A6.5 6.5 0 0 1 18.5 7.5V9H20.5A.5.5 0 0 1 21 9.5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V9.5A.5.5 0 0 1 3.5 9H5.5V7.5A6.5 6.5 0 0 1 12 1M11.5 12A.5.5 0 0 0 11 12.5V17.5A.5.5 0 0 0 11.5 18H12.5A.5.5 0 0 0 13 17.5V12.5A.5.5 0 0 0 12.5 12zM12 3.5A4 4 0 0 0 8 7.5V9H16V7.5A4 4 0 0 0 12 3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1A6.5 6.5 0 0 1 18.5 7.5V9H20.5A.5.5 0 0 1 21 9.5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V9.5A.5.5 0 0 1 3.5 9H5.5V7.5A6.5 6.5 0 0 1 12 1M11.5 12A.5.5 0 0 0 11 12.5V17.5A.5.5 0 0 0 11.5 18H12.5A.5.5 0 0 0 13 17.5V12.5A.5.5 0 0 0 12.5 12zM12 3.5A4 4 0 0 0 8 7.5V9H16V7.5A4 4 0 0 0 12 3.5'/%3E%3C/svg%3E");
}

/*
 * Adyen's brand icon replaces the generic icon on the LEFT once a real brand
 * is detected (data-detected-brand set by bridge.ts from onBrand; "card" is
 * Adyen's generic placeholder state). Hidden by default.
 */
#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper > .adyen-checkout__card__cardNumber__brandIcon,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper > .adyen-checkout__card__cardNumber__brandIcon,
#adyen-card-container .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper > .adyen-checkout-brand-wrapper,
#adyen-card-container .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper > .adyen-checkout-brand-wrapper {
    display: none;
    order: -1;
    margin-left: 12px;
    margin-right: 0;
    box-shadow: none;
}

#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper > .adyen-checkout__card__cardNumber__brandIcon,
#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper > .adyen-checkout__card__cardNumber__brandIcon {
    display: block;
}

#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper > .adyen-checkout-brand-wrapper,
#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper > .adyen-checkout-brand-wrapper {
    display: flex;
}

#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--cardNumber .adyen-checkout__input-wrapper::before,
#adyen-card-container[data-detected-brand]:not([data-detected-brand="card"]) .adyen-checkout__field--encryptedCardNumber .adyen-checkout__input-wrapper::before {
    display: none;
}

/* Hide Adyen's gray hint icons inside the expiry and security code fields. */
#adyen-card-container .adyen-checkout__field__exp-date_hint_wrapper,
#adyen-card-container .adyen-checkout__field__exp-date_hint,
#adyen-card-container .adyen-checkout__card__cvc__hint__wrapper,
#adyen-card-container .adyen-checkout__card__cvc__hint {
    display: none;
}

/*
 * 3DS challenge: centre it and cap its height. The inner iframe is served by
 * the issuing bank and assumes a light background, so force one regardless of
 * the parent's theme.
 */
.adyen-checkout__threeds2__challenge {
    margin-left: auto;
    margin-right: auto;
    max-height: var(--bridge-challenge-max-height);
    overflow-y: auto;
}

.adyen-checkout__threeds2__challenge,
.adyen-checkout__iframe {
    background-color: var(--bridge-challenge-background);
}

/*
 * CVC "?" help popover, injected by bridge.ts after Adyen's "Security code"
 * label text (copy comes from init.cvcHelp). Plain-DOM stand-in for the
 * control's WtPopover helpIcon trigger.
 */
#adyen-card-container .adyen-checkout__field--securityCode .adyen-checkout__label__text,
#adyen-card-container .adyen-checkout__field--encryptedSecurityCode .adyen-checkout__label__text {
    /* Adyen's label text is display:block, which would push the icon onto its own line. */
    display: inline-block;
    vertical-align: middle;
}

.bridge-cvc-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
}

.bridge-cvc-help__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--bridge-text-primary);
    font: 700 12px/1 var(--bridge-font-family);
    cursor: pointer;
}

.bridge-cvc-help__trigger:hover,
.bridge-cvc-help__trigger[aria-expanded="true"] {
    background: var(--bridge-text-primary);
    color: var(--bridge-popover-background);
}

.bridge-cvc-help__trigger:focus-visible {
    outline: 2px solid var(--bridge-input-border-active);
    outline-offset: 2px;
}

.bridge-cvc-help__bubble {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 8px;
    background: var(--bridge-popover-background);
    color: var(--bridge-popover-text);
    box-shadow: var(--bridge-popover-shadow);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}

.bridge-cvc-help__bubble::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--bridge-popover-background);
}

.bridge-cvc-help__bubble[hidden] {
    display: none;
}