/* ═══════════════════════════════════════════════════════════════
   HyperPay / OppWa payment widget global overrides
   Must be global (not Blazor-scoped) — widget DOM is injected
   by an external script and won't carry the scope attribute.

   Colours, radii and type come from the design-system tokens (--ds-*) so the chrome
   (labels, borders, brand strip, submit button, hints) follows the
   theme. The card inputs themselves are OPPWA iframes whose text
   colour this page cannot set, so their face stays light in every
   theme (--pw-control-*) to keep the typed digits readable.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --pw-control-bg: #ffffff;
    --pw-control-text: #212529;
    --pw-control-error-bg: #fffafa;
    --pw-control-placeholder: #8a939b;
}

/* ── Shake keyframe (for error state) ───────────────────────────── */
@keyframes wpwl-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-8px); }
    75%       { transform: translateX(8px); }
}

/* ── Container ──────────────────────────────────────────────────── */
.wpwl-container {
    background: transparent !important;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    width: 100%;
}

.wpwl-form {
    max-width: 100%;
    margin: 0;
}

/* Remove default card background image */
.wpwl-form-card {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Flexbox layout to reorder fields side-by-side */
    display: flex;
    flex-flow: row wrap;
    gap: 0;
    align-items: flex-start;
}

/* ── Labels ─────────────────────────────────────────────────────── */
.wpwl-label {
    display: block;
    font-size: var(--ds-sizeBody3);
    font-weight: var(--ds-weightMedium);
    color: var(--ds-textMainBodyDefault);
    margin-bottom: 0.5rem;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.wpwl-label::after {
    content: ' *';
    color: var(--ds-actionDangerFillDefaultSolid);
    font-weight: var(--ds-weightMedium);
}

/* ── Input wrapper ──────────────────────────────────────────────── */
.wpwl-wrapper {
    margin-bottom: 1rem;
    width: 100%;
}

/* ── Input controls ─────────────────────────────────────────────── */
.wpwl-control,
.wpwl-control-cardHolder,
.wpwl-control-cardNumber,
.wpwl-control-expiry,
.wpwl-control-cvv {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pw-control-text);
    background-color: var(--pw-control-bg) !important;
    background-clip: padding-box;
    border: 1px solid var(--ds-listingItemOutlineDefault);
    border-radius: var(--ds-inputRadius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    box-shadow: var(--hr-gap-shadowTooltip);
    position: relative;
}

.wpwl-control:hover,
.wpwl-control-cardHolder:hover,
.wpwl-control-cardNumber:hover,
.wpwl-control-expiry:hover,
.wpwl-control-cvv:hover {
    border-color: var(--ds-infoNeutralOutline);
}

.wpwl-control:focus,
.wpwl-control-cardHolder:focus,
.wpwl-control-cardNumber:focus,
.wpwl-control-expiry:focus,
.wpwl-control-cvv:focus {
    color: var(--pw-control-text);
    background-color: var(--pw-control-bg) !important;
    border-color: var(--ds-actionPrimaryFillDefaultSolid);
    outline: 0;
    box-shadow: 0 0 0 3px var(--hr-gap-focusHalo);
}

.wpwl-control::placeholder,
.wpwl-control-cardHolder::placeholder,
.wpwl-control-cardNumber::placeholder,
.wpwl-control-expiry::placeholder,
.wpwl-control-cvv::placeholder {
    color: var(--pw-control-placeholder);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.wpwl-control:focus::placeholder,
.wpwl-control-cardHolder:focus::placeholder,
.wpwl-control-cardNumber:focus::placeholder,
.wpwl-control-expiry:focus::placeholder,
.wpwl-control-cvv:focus::placeholder {
    opacity: 0.5;
}

/* Autofill background fix */
.wpwl-control:-webkit-autofill,
.wpwl-control:-webkit-autofill:hover,
.wpwl-control:-webkit-autofill:focus,
.wpwl-control:-webkit-autofill:active,
.wpwl-control-cardHolder:-webkit-autofill,
.wpwl-control-cardHolder:-webkit-autofill:hover,
.wpwl-control-cardHolder:-webkit-autofill:focus,
.wpwl-control-cardNumber:-webkit-autofill,
.wpwl-control-cardNumber:-webkit-autofill:hover,
.wpwl-control-cardNumber:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--pw-control-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--pw-control-bg) inset !important;
    -webkit-text-fill-color: var(--pw-control-text) !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: var(--pw-control-bg) !important;
}

/* Error state */
.wpwl-control.wpwl-has-error,
.wpwl-control-cardHolder.wpwl-has-error,
.wpwl-control-cardNumber.wpwl-has-error,
.wpwl-control-expiry.wpwl-has-error,
.wpwl-control-cvv.wpwl-has-error {
    border-color: var(--ds-actionDangerFillDefaultSolid);
    background-color: var(--pw-control-error-bg) !important;
    animation: wpwl-shake 0.4s ease-in-out;
}

.wpwl-control.wpwl-has-error:focus,
.wpwl-control-cardHolder.wpwl-has-error:focus,
.wpwl-control-cardNumber.wpwl-has-error:focus,
.wpwl-control-expiry.wpwl-has-error:focus,
.wpwl-control-cvv.wpwl-has-error:focus {
    box-shadow: 0 0 0 3px var(--ds-infoDangerFill);
}

/* ── Field group ordering (side-by-side layout) ─────────────────── */
.wpwl-group-brand {
    order: 1;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--ds-infoNeutralFill);
    border-radius: var(--ds-inputRadius);
    border: 1px solid var(--ds-infoNeutralOutline);
}

.wpwl-group-brand .wpwl-label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem;
    font-size: var(--ds-sizeBody3);
    font-weight: var(--ds-weightMedium);
    color: var(--ds-textMainBodyDefault);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Brand logo label: no asterisk */
.wpwl-group-brand .wpwl-label::after {
    content: none;
}

/* Dropdown wrapper inline-block */
.wpwl-group-brand .wpwl-wrapper-brand {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-inline-end: 0.75rem !important;
    width: auto !important;
}

/* Brand dropdown */
.wpwl-group-brand .wpwl-wrapper-brand select.wpwl-control-brand {
    width: auto;
    min-width: 140px;
    max-width: 200px;
    height: 48px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ds-listingItemOutlineDefault);
    border-radius: var(--ds-inputRadius);
    background-color: var(--ds-contentDefaultFill);
    color: var(--ds-textMainHeadingDefault);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-weight: var(--ds-weightMedium);
}

.wpwl-group-brand .wpwl-wrapper-brand select.wpwl-control-brand:hover {
    border-color: var(--ds-infoNeutralOutline);
}

.wpwl-group-brand .wpwl-wrapper-brand select.wpwl-control-brand:focus {
    outline: none;
    border-color: var(--ds-actionPrimaryFillDefaultSolid);
    box-shadow: 0 0 0 3px var(--ds-listingItemFillActive);
}

/* Brand logo sits inline next to dropdown */
.wpwl-group-brand .wpwl-brand,
.wpwl-group-brand .wpwl-brand-card,
.wpwl-group-brand .wpwl-brand-MADA {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Card number: 58% width, paired with expiry */
.wpwl-group-cardNumber {
    order: 2;
    width: 58%;
    padding-inline-end: 10px;
    display: block;
}

.wpwl-group-expiry {
    order: 3;
    width: 42%;
    display: block;
}

/* Card holder: 58% width, paired with CVV */
.wpwl-group-cardHolder {
    order: 4;
    width: 58%;
    padding-inline-end: 10px;
    display: block;
    margin-inline-end: 0;
}

.wpwl-group-cvv {
    order: 5;
    width: 42%;
    display: block;
}

/* Submit button group */
.wpwl-group-submit {
    order: 99;
    width: 100%;
    margin-top: 1rem;
}

/* Hide unused field groups */
.wpwl-group-mobilePhoneCountryCode,
.wpwl-group-mobilePhoneNumber,
.wpwl-group-birthDate,
.wpwl-group-clickToPayConfirmation,
.wpwl-group-visaInstallmentConfirmation {
    order: 98;
    display: none !important;
}

/* ── CVV wrapper: flex row (icon + input) ───────────────────────── */
.wpwl-wrapper-cvv {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
}

.wpwl-wrapper-cvv .wpwl-control-cvv,
.wpwl-wrapper-cvv .wpwl-control-iframe {
    flex: 1 !important;
    min-width: 0 !important;
}

.wpwl-wrapper-cvv .wpwl-icon {
    flex-shrink: 0 !important;
}

.wpwl-wrapper-cvv .wpwl-popover {
    display: none;
}

.wpwl-wrapper-cvv .wpwl-icon:hover + .wpwl-popover {
    display: block;
}

/* ── Submit button ──────────────────────────────────────────────── */
.wpwl-button {
    display: inline-block;
    width: 100%;
    min-height: 48px;
    font-weight: var(--ds-weightMedium);
    line-height: 1.5;
    color: var(--ds-textMainPrimaryInverse);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background: var(--ds-actionPrimaryFillDefaultSolid);
    border: none;
    padding: var(--ds-contentGapMd) var(--ds-contentPaddingXXlg);
    font-size: var(--ds-sizeBody2);
    border-radius: var(--ds-inputRadius);
    transition: background-color 160ms var(--hr-gap-easeOut), box-shadow 160ms var(--hr-gap-easeOut);
    margin-top: var(--ds-contentPaddingXXlg);
    text-transform: none;
    font-family: inherit;
}

.wpwl-button:hover:not(:disabled) {
    background: var(--ds-actionPrimaryFillHoverSolid);
    box-shadow: var(--hr-gap-shadowCardHover);
}

.wpwl-button:active:not(:disabled) {
    background: var(--ds-actionPrimaryFillPressedSolid);
}

.wpwl-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--hr-gap-focusHalo);
}

.wpwl-button:disabled {
    pointer-events: none;
    background: var(--ds-dividerDefault);
    box-shadow: none;
    cursor: not-allowed;
}

.wpwl-button i {
    margin-inline-end: 0.5rem;
}

/* ── Error / warning hints ──────────────────────────────────────── */
.wpwl-hint-error,
.wpwl-hint-warning {
    color: var(--ds-actionDangerFillDefaultSolid);
    font-size: var(--ds-sizeBody3);
    margin-top: 0.25rem;
    display: block;
    font-weight: var(--ds-weightRegular);
}

/* Hide CVV hint text (icon tooltip is used instead) */
.wpwl-hint-cvv {
    display: none;
}

/* ── Clearfix ───────────────────────────────────────────────────── */
.wpwl-clearfix::after {
    content: "";
    display: table;
    clear: both;
}