.wc_payment_method.payment_method_ {
    display: none;
}

.payment_method_buckaroo_ideal fieldset {
    background-color: white;
}

input[type='password'].error,
input[type='text'].error {
    border-color: red;
}

input[type='password'].validated,
input[type='text'].validated {
    border-color: green;
}

.capture-form {
    background: white;
    background-color: #e4e4e4;
    /* width: fit-content; */
    position: absolute;
    margin: 0 auto;
    right: 342px;
    display: none;
}

.capture input {
    width: 70px;
    vertical-align: middle;
    text-align: right;
}

.capture .capture_order_item_qty {
    text-align: center !important;
    width: 50px !important;
}

.woocommerce_order_items_wrapper table.woocommerce_order_items thead th {
    text-align: left;
    padding: 1em;
    font-weight: 400;
    color: #999;
    background: #f8f8f8;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* .thumbs div::before {
    font-family: WooCommerce;
    speak: none;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    margin: 0;
    text-indent: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    content: "";
    color: #ccc;
} */

#woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items tbody tr:first-child td {
    border-top: 8px solid #f8f8f8;
}

table.woocommerce_order_items tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

table.woocommerce_order_items {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

table.woocommerce_order_items tbody tr:first-child td {
    border-bottom: 1px solid #dfdfdf;
}

.wc-order-capture-totals-items .wc-order-totals {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: right;
}

#woocommerce_buckaroo_creditcard_AllowedProvider,
#woocommerce_buckaroo_creditcard_show_in_checkout {
    width: 400px;
    margin: 0;
    box-sizing: border-box;
    height: 220px;
    line-height: 32px;
    vertical-align: top;
}

.buckaroo-idin.buckaroo-idin-passed p,
.buckaroo-idin-cart p {
    margin: 0;
}

#buckaroo_idin .buckaroo_idin_logo,
#buckaroo_idin_cart .buckaroo_idin_logo {
    width: 3em;
    float: left;
}

.buckaroo-idin .buckaroo_idin_prompt {
    padding-left: 3.5em;
}

.buckaroo-idin-cart .buckaroo_idin_prompt {
    padding-top: 0.5em;
    padding-left: 3.5em;
}

#buckaroo-report table {
    table-layout: auto;
    width: 100%;
}

/* Classic checkout: icon flush right, vertically centred.
   `#payment ul.payment_methods` scoping is needed to beat core's
   `margin: -2px 0 0 .5em` on payment icons. */
#payment ul.payment_methods li.wc_payment_method[class*='payment_method_buckaroo'] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#payment ul.payment_methods li.wc_payment_method[class*='payment_method_buckaroo'] > label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* a flex row has no line box, so `line-height` no longer sets the row
       height; without this the row shrinks to the icon and icons touch */
    padding: 4px 0;
}

#payment ul.payment_methods li.wc_payment_method[class*='payment_method_buckaroo'] > .payment_box {
    flex: 0 0 100%;
}

#payment ul.payment_methods li.wc_payment_method[class*='payment_method_buckaroo'] > label img {
    flex: 0 0 auto;
    max-height: 25px;
    width: 32px;
    height: auto;
    float: none;
    margin: 0;
}

/* Test mode badge, in the settings status pill colours. margin-left keeps it
   beside the icon in the space-between label rows. */
.buckaroo-testmode-badge {
    display: inline-block;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 8px;
    background: #fde9b0;
    color: #7a5500;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* paybybank */

.bk-toggle-down {
    background-image: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 9.293a1 1 0 0 1 1.414 0L12 14.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414z' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
}

.bk-toggle-up {
    background-image: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.293 7.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l6-6z' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
}

.bk-toggle {
    height: 20px;
    width: 20px;
}

.bk-toggle-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .bk-paybybank-selector .bank-method-label img {
        max-width: 25px;
    }

    .bk-paybybank-selector .bank-control {
        display: flex;
    }

    .bk-paybybank-selector .bank-method-label {
        flex: 1;
    }
}

@media screen and (min-width: 768px) {
    .bk-paybybank-toggle-list {
        display: flex;
        justify-content: center;
        height: 20px;
        margin: 10px 0;
    }

    .bk-toggle-text {
        margin-left: 10px;
        font-weight: bold;
    }

    .bk-paybybank-selector {
        display: flex;
        flex-wrap: wrap;
    }

    .bk-paybybank-selector .radio-group-required {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .bk-paybybank-selector .bank-control {
        flex: 25% 0;
        min-width: 55px;
    }

    .bk-paybybank-selector .bank-method-input:checked + .bank-method-label {
        background-color: #ededed;
        color: #000;
        border-radius: 5px;
    }

    .bk-paybybank-selector .bank-method-label {
        padding-bottom: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        padding-top: 5px;
        text-align: center;
    }

    .bk-paybybank-selector .bank-method-label strong {
        display: block;
        text-align: center;
        font-size: 12px;
        flex: 100% 0 0;
    }

    .bk-paybybank-selector .bank-method-label img {
        padding: 10px 20px;
        max-width: 120px;
    }

    .bk-paybybank-selector .bank-method-input {
        display: none;
    }
}

/* end paybybank */

/** in3 logo input **/

.bk-in3-logo-wrap {
    border: 1px solid #8c8f94;
    margin: 5px 0;
    padding: 5px 10px;
    width: 400px;
    box-sizing: border-box;
    border-radius: 3px;
}

.form-table td fieldset label.bk-in3-logo {
    display: flex;
    align-items: center;
    max-width: 70px;
}

label.bk-in3-logo img {
    width: 100%;
    height: auto;
}

/* Blocks checkout label row: title left, icon right, vertically centred. */
.buckaroo_method_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.buckaroo_method_block_img {
    flex: 0 0 auto;
    max-height: 25px;
    width: 32px;
    height: auto;
}

/** end in3 logo input **/

/* Style for the select element */
.buckaroo-custom-select {
    padding: 10px;
    border: 2px solid #aaa;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.buckaroo-custom-select::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #aaa;
    pointer-events: none;
}

.buckaroo-custom-select:hover {
    border-color: #888;
}

.buckaroo-custom-select:focus {
    outline: none;
    border-color: #555;
}

.buckaroo-custom-select::-ms-expand {
    display: none;
}

.wc-buckaroo-action-button.email::after {
    content: '\f465';
}

.wc-buckaroo-action-button.links::after {
    content: '\f103';
}

/* Credit Card Form Styling */

/* Input Fields */
.cardHolderName,
.cardNumber,
.expirationDate,
.cvc {
    width: 100%;
    height: 3rem;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 1rem;
    color: #4a5568;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s ease-in-out;
}

/* Error Styling */
.cardHolderName + .input-error,
.cardNumber + .input-error,
.expirationDate + .input-error,
.cvc + .input-error {
    color: #f56565;
}

.woocommerce-error:empty {
    display: none;
}

.woocommerce-page.woocommerce-checkout #payment .buckaroo-creditcard-fieldset div.form-row {
    margin: 0 0 1em;
    padding: 3px;
}

/* -------------------------------------------------------------------------
 * Express payment buttons (Apple Pay, Google Pay, PayPal)
 *
 * 40px is the only height all three render natively: Apple Pay defaults to 30px,
 * Google Pay refuses to go under 40px, PayPal picks 35/45/55px from its container
 * width. Each SDK fills a 40px box its own way -- Apple Pay via the custom
 * property below, Google Pay via buttonSizeMode "fill", PayPal via the
 * style.height forced in paypal_express.js.
 * ------------------------------------------------------------------------- */
.buckaroo-express-payments {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 12px !important;
    margin: 15px 0 !important;
}

/* Only the stacked layout needs a cap; the block row shares its width instead. */
.buckaroo-express-payments > * {
    max-width: 400px !important;
}

.buckaroo-express-payments:empty,
.wc-block-components-express-payment:empty {
    display: none !important;
}

/* Cart: match the width of Proceed to checkout above it and keep the same 12px
   gap. The sibling test leaves carts without express buttons on theme spacing. */
.cart_totals .buckaroo-express-payments > * {
    max-width: none !important;
}

.cart_totals .buckaroo-express-payments {
    margin-top: 12px !important;
}

.cart_totals .wc-proceed-to-checkout:has(+ .buckaroo-express-payments) {
    padding-bottom: 0 !important;
}

.cart_totals .wc-proceed-to-checkout:has(+ .buckaroo-express-payments) > * {
    margin-bottom: 0 !important;
}

/* Block checkout row. WooCommerce uses auto-fit columns, which strand a third
   button part-width at some widths. Flex items that grow but never shrink wrap
   instead of squeezing, and the buttons on each line share it. */
.wc-block-components-express-payment__event-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.wc-block-components-express-payment__event-buttons > li {
    flex: 1 0 170px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.applepay-button-container,
.googlepay-button-container,
.buckaroo-paypal-express,
.wc-block-components-express-payment__event-buttons > li {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    /* Anchors the focus ring overlay; 4px matches the radius all three draw. */
    position: relative;
    border-radius: 4px;
    /* Guard: a wallet that ignores the heights must not overlap the next button. */
    overflow: hidden !important;
    cursor: pointer;
}

.applepay-button-container,
.googlepay-button-container,
.buckaroo-paypal-express {
    width: 100% !important;
}

.applepay-button-container apple-pay-button {
    --apple-pay-button-height: 40px;
    --apple-pay-button-border-radius: 4px;
    display: block;
    width: 100% !important;
}

/* Google does not size its button to the element it is handed: the signed-in build
   renders wider than its slot and gets clipped, so every box down to the button is
   forced onto ours. min-width overrides Google's own floor. */
.googlepay-button-container > *,
.googlepay-button-container .gpay-card-info-container-fill,
.googlepay-button-container button.gpay-card-info-container,
.googlepay-button-container button.gpay-button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Google ships two builds, picked by the shopper's Google session. The signed-in
   one positions its iframe and button at left: 30px, its own side padding, while
   sizing them to the full wrapper width, so they hang past the right edge and the
   wordmark lands off centre. It also caps the wordmark at 42.5% (17px) where Apple
   Pay draws 20px; 55% matches it, and the padding has to go or the box has no
   content height to size against.

   Scoped to .gpay-card-info-container: the signed-out build shares
   .gpay-button-fill and sizes its wordmark from the padding these rules drop. */
.googlepay-button-container .gpay-card-info-container > .gpay-card-info-iframe,
.googlepay-button-container .gpay-card-info-container > .gpay-button-fill {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.googlepay-button-container .gpay-card-info-container .gpay-button-fill > .gpay-button {
    height: 55% !important;
    padding: 0 !important;
}

/* Hover and press use opacity, not colour -- brightness() cannot shade pure black.
   Google Pay's own grey hover is pinned back to its base fill below so it does not
   shade twice. PayPal is out of reach: the pointer entering its cross-origin iframe
   fires neither :hover nor any mouse event here, so it keeps its own tint. Only
   focus reaches all three. */
.applepay-button-container,
.googlepay-button-container {
    transition: opacity 0.15s ease-in-out;
}

.applepay-button-container:hover,
.googlepay-button-container:hover {
    opacity: 0.9;
}

.applepay-button-container:active,
.googlepay-button-container:active {
    opacity: 0.8;
}

/* An overlay, not an outline: the block row clips overflow, and PayPal's iframe
   and Apple Pay's shadow root both paint over an inset outline. */
.applepay-button-container:focus-within::after,
.googlepay-button-container:focus-within::after,
.buckaroo-paypal-express:focus-within::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #2271b1;
    border-radius: 4px;
    pointer-events: none;
    /* Above the z-index 100 PayPal puts on its iframe. */
    z-index: 1000;
}

.googlepay-button-container button.gpay-button.black.hover,
.googlepay-button-container button.gpay-button.black.active {
    background-color: #000 !important;
}

.googlepay-button-container button.gpay-button.white.hover,
.googlepay-button-container button.gpay-button.white.active {
    background-color: #fff !important;
}

.googlepay-button-container button.gpay-button.focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Payment method card list */
.buckaroo-payment-cards {
    column-count: 3;
    column-gap: 10px;
    margin: 16px 0;
}

@media (max-width: 1024px) {
    .buckaroo-payment-cards {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .buckaroo-payment-cards {
        column-count: 1;
    }
}
.buckaroo-payment-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 16px;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    break-inside: avoid;
    margin-bottom: 10px;
}
.buckaroo-payment-card-icon {
    width: 64px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
}
.buckaroo-payment-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}
.buckaroo-payment-card-info {
    flex: 1;
    min-width: 0;
}
.buckaroo-payment-card-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buckaroo-payment-card-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}
.bk-meta-sep {
    color: #ccc;
    font-weight: 300;
}
.bk-meta-divider {
    color: #d0d0d0;
    margin: 0 3px;
    font-weight: 300;
}

.bk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.bk-status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.bk-status-pill.bk-status--live {
    background: #c6f0d4;
    color: #0f5c28;
    font-weight: 700;
}
.bk-status-pill.bk-status--live .bk-status-pill-dot {
    background: #1a8c3c;
}

.bk-status-pill.bk-status--test {
    background: #fde9b0;
    color: #7a5500;
    font-weight: 600;
}
.bk-status-pill.bk-status--test .bk-status-pill-dot {
    background: #c47d00;
}

.bk-status-pill.bk-status--disabled {
    background: #ebebeb;
    color: #888;
    font-weight: 500;
}
.bk-status-pill.bk-status--disabled .bk-status-pill-dot {
    background: transparent;
    border: 1.5px solid #999;
    width: 7px;
    height: 7px;
}
.buckaroo-payment-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.buckaroo-payment-card-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    color: #555;
    text-decoration: none;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
    flex-shrink: 0;
}
.buckaroo-payment-card-settings:hover {
    background: #e8e9ea;
    border-color: #b5b5b5;
    color: #1a1a2e;
}
.buckaroo-payment-card-settings svg {
    width: 15px;
    height: 15px;
}

/* Payment Methods list page - full-width single-column cards */
.buckaroo-gateway-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
.buckaroo-gateway-list__card {
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
.buckaroo-gateway-list__header {
    display: flex;
    align-items: center;
    padding: 0 16px 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
}
.buckaroo-gateway-list__header-method {
    flex: 1;
}
.buckaroo-gateway-list__header-enabled {
    width: 80px;
    text-align: center;
    flex-shrink: 0;
}
.buckaroo-gateway-list__header-actions {
    width: 40px;
    flex-shrink: 0;
}
.buckaroo-gateway-list .buckaroo-payment-card {
    break-inside: auto;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.buckaroo-gateway-list .buckaroo-payment-card-actions {
    align-items: center;
    gap: 10px;
}
.buckaroo-gateway-list .wc-payment-gateway-method-toggle-enabled {
    display: inline-flex;
    width: 80px;
    justify-content: center;
}

/* Gateway settings page summary card */
.bk-gateway-summary-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px 20px;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}
.bk-gateway-summary-card__icon {
    width: 80px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
}
.bk-gateway-summary-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bk-gateway-summary-card__icon-placeholder {
    width: 80px;
    height: 56px;
    border-radius: 8px;
    background: #1a2340;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}
.bk-gateway-summary-card__info {
    flex: 1;
    min-width: 0;
}
.bk-gateway-summary-card__title {
    font-size: 1.2em;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.bk-gateway-summary-card__desc {
    font-size: 13px;
    color: #646970;
    margin-bottom: 8px;
    line-height: 1.5;
}
.bk-gateway-summary-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bk-tag {
    display: inline-block;
    background: #f0f0f0;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #dcdcde;
}
.bk-gateway-summary-card__status {
    flex-shrink: 0;
    margin-left: auto;
}
.bk-intro-hero {
    text-align: center;
    padding: 32px 24px 28px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.bk-intro-hero__logo {
    margin-bottom: 14px;
}
.bk-intro-hero__logo-img {
    height: 36px;
    width: auto;
    display: inline-block;
}
.bk-intro-hero__desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 20px;
}
.bk-intro-hero__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bk-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s,
        opacity 0.15s;
    cursor: pointer;
}
.bk-hero-btn:hover {
    text-decoration: none;
}
.bk-hero-btn--docs {
    background: #c8f135;
    color: #1a2340;
    border: 2px solid #c8f135;
}
.bk-hero-btn--docs:hover {
    background: #1a2340;
    color: #c8f135;
    border: 2px solid #c8f135;
    opacity: 1;
}
.bk-hero-btn--contact {
    background: #1a2340;
    color: #fff;
    border: 2px solid #1a2340;
}
.bk-hero-btn--contact:hover {
    background: transparent;
    color: #1a2340;
    opacity: 1;
}

/* API Credentials section */
.bk-creds-card {
    margin: 0;
    padding: 0;
}
.bk-creds-table {
    width: 100%;
    margin: 0 !important;
}
.bk-creds-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bk-key-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    align-self: stretch;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    background: #f6f7f7;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s;
    color: #555;
}
.bk-key-btn:active {
    opacity: 0.8;
}
.bk-key-btn--toggle:hover {
    background: #e8e9ea;
    color: #1a1a2e;
}

/* General Options section */
.bk-general-options-card {
    margin: 0;
    padding: 0;
}
.bk-general-options-card h3:empty,
.bk-general-options-card h3 {
    display: none;
}
.bk-general-options-card .form-table {
    width: 100%;
    margin: 0;
}

.buckaroo-payment-card-icon-placeholder {
    width: 64px;
    height: 44px;
    border-radius: 8px;
    background: #1a2340;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}

.bk-cc-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.bk-cc-icon {
    height: 14px;
    width: auto;
    border-radius: 2px;
    opacity: 0.85;
}
body.woocommerce_page_wc-settings .form-table td textarea,
body.woocommerce_page_wc-settings .form-table td textarea.wide-input,
body.woocommerce_page_wc-settings .form-table td textarea.large-text,
body.woocommerce_page_wc-settings .form-table td textarea.input-text {
    width: 29em !important;
    max-width: 29em !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------
 * BNPL birthdate datepicker (classic checkout)
 *
 * WordPress core registers the jquery-ui-datepicker script but ships no
 * widget CSS. These rules style the calendar that the Buckaroo BNPL methods
 * (Riverty, Riverty Old, Billink, In3) attach to their birthdate field so it
 * is visible and interactive. Scope is limited to the datepicker widget so it
 * cannot leak into the surrounding theme.
 * ------------------------------------------------------------------------- */
.ui-datepicker {
    width: 18em;
    padding: 0.2em 0.2em 0;
    background: #fff;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 9999 !important;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0.4em 0;
    background: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 600;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
    display: inline-block;
    width: auto;
    margin: 1px 2px;
    font-size: 0.9em;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 0.3em;
    width: 1.8em;
    height: 1.8em;
    cursor: pointer;
    text-align: center;
    line-height: 1.8em;
    color: #555;
    user-select: none;
}
.ui-datepicker .ui-datepicker-prev {
    left: 0.3em;
}
.ui-datepicker .ui-datepicker-next {
    right: 0.3em;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}
.ui-datepicker .ui-datepicker-prev:before {
    content: '\2039';
}
.ui-datepicker .ui-datepicker-next:before {
    content: '\203A';
}
.ui-datepicker table {
    width: 100%;
    margin: 0.4em 0 0;
    border-collapse: collapse;
    font-size: 0.9em;
}
.ui-datepicker th {
    padding: 0.4em 0.2em;
    text-align: center;
    font-weight: 600;
    border: 0;
}
.ui-datepicker td {
    padding: 1px;
    border: 0;
}
.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: 0.35em;
    text-align: center;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
}
.ui-datepicker td a:hover {
    background: #e6f0ff;
}
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
    background: #0073aa;
    color: #fff;
}

/** redirect notice shown under redirect-based payment methods **/
.buckaroo-redirect-notice {
    display: flex;
    /* keeps the icon on the first line when the text wraps */
    align-items: flex-start;
    gap: 8px;
    color: #646970;
}

.buckaroo-redirect-notice::before {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5H5.5C4.67157 5 4 5.67157 4 6.5V14C4 14.8284 4.67157 15.5 5.5 15.5H13C13.8284 15.5 14.5 14.8284 14.5 14V12.5' stroke='%23808992' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 5H15V10' stroke='%23808992' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5L8.5 11.5' stroke='%23808992' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}