.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; 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;
} #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%;
} label[for^='payment_method_buckaroo_'] img {
max-height: 25px;
width: 32px;
height: auto;
float: right;
margin: 0;
} #payment ul.payment_methods li label[for^='payment_method_buckaroo_'] img {
margin: 0;
} #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; 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;
} .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;
} .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;
}
}  .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;
} .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;
}  .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';
}  .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;
} .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;
} .buckaroo-express-payments {
width: 100%;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: start !important;
gap: 12px !important;
margin: 15px 0 !important;
} .buckaroo-express-payments > * {
max-width: 400px !important;
}
.buckaroo-express-payments:empty,
.wc-block-components-express-payment:empty {
display: none !important;
} .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;
} .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; position: relative;
border-radius: 4px; 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;
} .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;
} .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;
} .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;
} .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; 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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .buckaroo-redirect-notice {
display: flex; 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");
}:root {
--wcboost-swatches-item-width: 30px;
--wcboost-swatches-item-width: 30px;
--wcboost-swatches-item-padding: 2px;
--wcboost-swatches-item-gap: 1em;
--wcboost-swatches-color-border: rgba(0, 0, 0, 0.2);
--wcboost-swatches-color-border-selected: rgba(0, 0, 0, 0.7);
--wcboost-swatches-color-border-outstock: rgba(252, 56, 56, 0.7);
--wcboost-swatches-color-tooltip: #333;
--wcboost-swatches-color-tooltip-text: #fff;
--wcboost-swatches-button-font-size: 1em;
--wcboost-swatches-label-font-size: 1em;
--wcboost-swatches-invalid-line-color: #ff0000;
--wcboost-swatches-invalid-line-width: calc(100% + 6px);
--wcboost-swatches-invalid-line-height: 2px;
--wcboost-swatches-invalid-line-radius: 1px;
--wcboost-swatches-invalid-opacity: 0.2;
}
.wcboost-variation-swatches > select {
display: none !important;
}
.wcboost-variation-swatches__wrapper {
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wcboost-swatches-item-gap);
}
.wcboost-variation-swatches__item {
transition: 0.3s;
text-align: center;
white-space: nowrap;
width: var(--wcboost-swatches-item-width);
height: var(--wcboost-swatches-item-height);
padding: var(--wcboost-swatches-item-padding);
line-height: 1.1;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
position: relative;
cursor: pointer;
box-shadow: 0 0 0 1px var(--wcboost-swatches-color-border);
}
.wcboost-variation-swatches__name {
display: block;
}
.wcboost-variation-swatches__item:hover,
.wcboost-variation-swatches__item:focus {
box-shadow: 0 0 0 2px var(--wcboost-swatches-color-border);
}
.wcboost-variation-swatches__item.selected {
border-color: var(--wcboost-swatches-color-border-selected);
box-shadow: 0 0 0 2px var(--wcboost-swatches-color-border-selected);
} .wcboost-variation-swatches__item.disabled {
cursor: default;
}
:where(.wcboost-variation-swatches--invalid-hide) .wcboost-variation-swatches__item.is-invalid {
display: none !important;
} :is(.wcboost-variation-swatches--invalid-blur, .wcboost-variation-swatches--invalid-blur_cross, .wcboost-variation-swatches--invalid-blur_slash, .wcboost-variation-swatches--invalid-blur_line) .wcboost-variation-swatches__item.is-invalid {
opacity: var(--wcboost-swatches-invalid-opacity);
} :is(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross, .wcboost-variation-swatches--invalid-slash, .wcboost-variation-swatches--invalid-blur_slash, .wcboost-variation-swatches--invalid-line, .wcboost-variation-swatches--invalid-blur_line) .wcboost-variation-swatches__item.is-invalid {
position: relative;
overflow: visible;
} :is(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross, .wcboost-variation-swatches--invalid-slash, .wcboost-variation-swatches--invalid-blur_slash, .wcboost-variation-swatches--invalid-line, .wcboost-variation-swatches--invalid-blur_line) .wcboost-variation-swatches__item.is-invalid::before,
:is(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross) .wcboost-variation-swatches__item.is-invalid::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--wcboost-swatches-invalid-line-width);
height: var(--wcboost-swatches-invalid-line-height);
border: none;
padding: 0;
margin: 0;
background: var(--wcboost-swatches-invalid-line-color);
z-index: 1;
border-radius: var(--wcboost-swatches-invalid-line-radius);
display: block;
visibility: visible;
opacity: 1;
} :is(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross) .wcboost-variation-swatches__item.is-invalid::before {
transform: translate(-50%, -50%) rotate(45deg);
} :is(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross) .wcboost-variation-swatches__item.is-invalid::after {
transform: translate(-50%, -50%) rotate(-45deg);
} :is(.wcboost-variation-swatches--invalid-slash, .wcboost-variation-swatches--invalid-blur_slash) .wcboost-variation-swatches__item.is-invalid::before {
transform: translate(-50%, -50%) rotate(-45deg);
} :is(.wcboost-variation-swatches--invalid-line, .wcboost-variation-swatches--invalid-blur_line) .wcboost-variation-swatches__item.is-invalid::before {
transform: translate(-50%, -50%) rotate(0deg);
} :where(.wcboost-variation-swatches--invalid-cross, .wcboost-variation-swatches--invalid-blur_cross).wcboost-variation-swatches--button {
--wcboost-swatches-invalid-line-width: calc(var(--wcboost-swatches-item-height) + 6px);
} .wcboost-variation-swatches--button .wcboost-variation-swatches__item {
width: auto !important;
height: auto !important;
min-width: var(--wcboost-swatches-item-width);
min-height: var(--wcboost-swatches-item-height);
padding-left: calc(var(--wcboost-swatches-item-width) / 2);
padding-right: calc(var(--wcboost-swatches-item-width) / 2);
overflow: hidden;
}
:where(.wcboost-variation-swatches--button) .wcboost-variation-swatches__item {
font-size: var(--wcboost-swatches-button-font-size);
}
.wcboost-variation-swatches--button .wcboost-variation-swatches__item.selected {
background-color: rgba(0, 0, 0, 0.1);
} .wcboost-variation-swatches--label .wcboost-variation-swatches__item {
width: auto !important;
min-width: var(--wcboost-swatches-item-width);
}
:where(.wcboost-variation-swatches--label) .wcboost-variation-swatches__item {
font-size: var(--wcboost-swatches-label-font-size);
}
.wcboost-variation-swatches--label .wcboost-variation-swatches__name {
width: 100%;
} .wcboost-variation-swatches--image .wcboost-variation-swatches__name {
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
position: absolute;
margin: -1px;
}
.wcboost-variation-swatches--image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .wcboost-variation-swatches--color .wcboost-variation-swatches__name {
text-indent: -9999em;
width: 100%;
height: 100%;
background-color: var(--wcboost-swatches-item-color);
background-image: var(--wcboost-swatches-item-image);
} .wcboost-variation-swatches--round .wcboost-variation-swatches__item,
.wcboost-variation-swatches--round .wcboost-variation-swatches__item img,
.wcboost-variation-swatches--round.wcboost-variation-swatches--color .wcboost-variation-swatches__name,
.wcboost-variation-swatches--round.wcboost-variation-swatches--button .wcboost-variation-swatches__item {
border-radius: 999em;
}
.wcboost-variation-swatches--rounded .wcboost-variation-swatches__item,
.wcboost-variation-swatches--rounded .wcboost-variation-swatches__item img,
.wcboost-variation-swatches--rounded.wcboost-variation-swatches--color .wcboost-variation-swatches__name {
border-radius: 4px;
} .wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item::before {
content: attr(aria-label);
text-indent: initial;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
position: absolute;
bottom: 100%;
left: 50%;
background: var(--wcboost-swatches-color-tooltip);
z-index: 2;
color: var(--wcboost-swatches-color-tooltip-text);
margin: -10px 0 0 0;
padding: 7px 15px;
opacity: 0;
visibility: hidden;
user-select: none;
border-radius: 4px;
transform: translate(-50%, -10px);
transition: opacity 0.35s;
}
.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: var(--wcboost-swatches-color-tooltip);
margin: 0 0 0 -5px;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s;
}
.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover:before,
.wcboost-variation-swatches--has-tooltip .wcboost-variation-swatches__item:hover:after {
visibility: visible;
opacity: 1;
user-select: auto;
}
.wcboost-variation-swatches--has-tooltip .disabled:before,
.wcboost-variation-swatches--has-tooltip .disabled:after,
.wcboost-variation-swatches--button .wcboost-variation-swatches__item:before,
.wcboost-variation-swatches--button .wcboost-variation-swatches__item:after {
display: none;
} .wcboost-variation-swatches__selected-label::before {
content: ": ";
} .wcboost-variation-swatches__item.is-out-stock {
color: var(--wcboost-swatches-color-border-outstock);
box-shadow: 0 0 0 1px var(--wcboost-swatches-color-border-outstock);
} .et_pb_wc_add_to_cart .wcboost-variation-swatches__name::after {
visibility: hidden;
pointer-events: none;
display: none;
}