/* modules/jakes-checkout/jakes-checkout.css */

/* =========================
   Variabelen (Shopify-achtig)
   ========================= */
:root{
  --field-h: 52px;            /* Shopify ~50–52px */
  --radius: 5px;
  --fz: 14px;
  --lbl-big: 14px;
  --lbl-small: 12px;

  --px: 12px;                 
  --gap: 8px;                 
  --gutter: 12px;             

  --bd: #ddd;
  --focus: #c94d19;
  --focus-shadow: rgba(201,77,25,.10);
  --lbl: rgba(0,0,0,.6);
  --lbl-small-c: #6b6b6b;
  --bg: #fff;
}

/* =========================
   Basis styling inputs + select + textarea
   ========================= */

/* Checkout + Account: invoervelden, textarea's en select-boxen */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper input.input-text,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper input.input-text,

body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper textarea,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper textarea,

body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper select,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper select,

body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container .select2-selection,
body.woocommerce-account .woocommerce form
.form-row .select2-container .select2-selection {
  height: var(--field-h);
  width: 100%;
  font-size: var(--fz);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--bg);
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  padding: 28px var(--px) 8px var(--px) !important; /* ruimte boven label, tekst onder label */
}

/* Labels binnen wrapper (floating base-state) */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper > label.jbco-label,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper > label.jbco-label {
  display: block; /* of inline-block */
  top: 18px;       /* i.p.v. 50% */
  transform: none;
  line-height: normal;
}

/* WooCommerce standaard breedte overschrijven zodat grid werkt */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  width: 100% !important;
  float: none !important; /* floats uitschakelen */
  clear: none !important;
  margin: 0 !important;
  padding: 0;
}

/* Select2 container fix */
span#select2-billing_country-container, span#select2-shipping_country-container {
  padding-top: 28px !important;
  line-height: 0;
  padding-bottom: 8px !important;
}
span.woocommerce-input-wrapper.jbco-float.is-filled {
  display: flex !important;
  height: var(--field-h);
}

/* Textarea */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper textarea{
  min-height: 110px;
  height: auto;
  resize: vertical;
  padding-top: calc(var(--lbl-big) + var(--gap) + 12px) !important;
}

/* Select standaard + select2 */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper select,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container .select2-selection{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg);
  padding-right: 32px !important; 
  background-position: right var(--px) center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Geselecteerde tekst binnen select2 */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container--default .select2-selection--single{
  border: none;
  height: 100% !important;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--px) 8px var(--px) !important;
}

/* Geselecteerde tekst binnen select2 */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left: 0 !important;
  margin-left: 0 !important;
  line-height: 1.4;
  color: inherit;
}

/* Pijltje select2 */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 50% !important;
  transform: translateY(-50%);
  right: 10px !important;
}

/* =========================
   Focus states
   ========================= */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper input:focus,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper textarea:focus,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper select:focus,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container--focus .select2-selection{
  outline: none;
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 2px var(--focus-shadow);
}

/* =========================
   Floating labels (Checkout + Account)
   ========================= */
body.woocommerce-checkout .woocommerce form.checkout .form-row .woocommerce-input-wrapper,
body.woocommerce-account .woocommerce form .form-row .woocommerce-input-wrapper {
  position: relative;
  display: inline-flex;
}

body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper > label.jbco-label,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper > label.jbco-label {
  position: absolute;
  left: var(--px);
  right: var(--px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background: transparent;
  color: var(--lbl);
  font-size: var(--lbl-big);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transition:
    top .18s ease,
    transform .18s ease,
    font-size .18s ease,
    color .18s ease,
    background-color .18s ease;
}

body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper.is-active > label.jbco-label,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper.is-filled > label.jbco-label,
body.woocommerce-checkout .woocommerce form.checkout
.form-row .woocommerce-input-wrapper.select2-filled > label.jbco-label,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper.is-active > label.jbco-label,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper.is-filled > label.jbco-label,
body.woocommerce-account .woocommerce form
.form-row .woocommerce-input-wrapper.select2-filled > label.jbco-label {
  top: 12px;
  transform: none;
  font-size: var(--lbl-small);
  color: var(--lbl-small-c);
  padding: 0;
}

/* =========================
   Overige cleanup
   ========================= */
body.woocommerce-checkout .woocommerce form .form-row-wide{ clear: both; }

.jbco-email-notice{
  margin: 3px !important;
  padding: 10px 12px !important;
  border: 1px solid #ffb900 !important;
  background: rgba(255, 185, 0, 0.1) !important;
  border-radius: var(--radius);
  grid-column: span 12 !important;
  font-size: 14px !important;
color: #8a6000 !important;
}
.jbco-email-notice .button{ margin-top: 6px; }

body.woocommerce-checkout .woocommerce .form-row::after{
  content: "";
  display: table;
  clear: both;
}

/* Select2 filled labels */
body.woocommerce-checkout .woocommerce form.checkout 
.form-row .woocommerce-input-wrapper.select2-filled > label.jbco-label {
  top: 12px;
  transform: none;
  font-size: var(--lbl-small);
  color: var(--lbl-small-c);
  background: var(--bg);
  padding: 0;
}

/* =========================
   Grid layout
   ========================= */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}
.woocommerce .form-row { margin: 0; padding: 0; }

.jbco-100 { grid-column: 1 / -1; }
.jbco-50  { grid-column: span 6; }
.jbco-33  { grid-column: span 4; }

.woocommerce .form-row .woocommerce-input-wrapper { width: 100%; }

@media (max-width: 768px) {
  .jbco-50, .jbco-33 { grid-column: 1 / -1; }
}

.jbco-address {
    padding-top: 16px !important;
}

.col-2 .woocommerce-shipping-fields {
    padding: 3px;
    margin: 9px 3px 9px 3px !important;
  border: 1px solid var(--bd) !important;   /* dezelfde border */
  border-radius: var(--radius) !important;  /* dezelfde radius */

}

.jakes-coupon {
    padding: 3px;
    font-size: var(--fz);
    margin: 9px 3px 9px 3px !important;
  border: 1px solid var(--bd) !important;   /* dezelfde border */
  border-radius: var(--radius) !important;  /* dezelfde radius */
}

.jakes-coupon .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0px !important;
    border: 0px !important;
    padding: 12px;
    min-height: 52px;
}

.jakes-coupon p.form-row.form-row-first, .jakes-coupon p.form-row.form-row-last {
    padding: 9px;
}

#add_payment_method .checkout .col-2 h3#ship-to-different-address, .woocommerce-cart .checkout .col-2 h3#ship-to-different-address, .woocommerce-checkout .checkout .col-2 h3#ship-to-different-address, .mfn-be-checkout .woocommerce .create-account {
    border: 0px solid !important;
    margin: 0px !important
}

.col-2 label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
    font-size: var(--lbl-big);
}

/* Zorg dat Land/regio dezelfde border en radius krijgt als de inputs (Checkout + Account) */
body.woocommerce-checkout .woocommerce form.checkout 
.form-row .select2-container--default .select2-selection--single,
body.woocommerce-account .woocommerce form 
.form-row .select2-container--default .select2-selection--single {
  border: 1px solid var(--bd) !important;   /* dezelfde border */
  border-radius: var(--radius) !important;  /* dezelfde radius */
  height: var(--field-h) !important;        /* zelfde hoogte */
  box-sizing: border-box;
  background-color: var(--bg);
  padding: 28px var(--px) 8px var(--px) !important; /* zelfde padding voor floating label */
  display: flex;
  align-items: flex-end;
}

/* Focus state (Checkout + Account) */
body.woocommerce-checkout .woocommerce form.checkout
.form-row .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-account .woocommerce form
.form-row .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 2px var(--focus-shadow);
}

/* Pijltje tonen op de wrapper zodra JS .jbco-has-arrow zet */
.woocommerce .woocommerce-input-wrapper.jbco-float.jbco-has-arrow {
  position: relative; /* referentie voor het arrow-icoon */
}

/* Arrow zoals Select2: rechts, verticaal gecentreerd, 16x16 */
.woocommerce .woocommerce-input-wrapper.jbco-float.jbco-has-arrow::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
  pointer-events: none; /* klik blijft op het select-element */
  opacity: .9;
}

/* Als het select disabled is (geen opties) → arrow verbergen */
.woocommerce .woocommerce-input-wrapper.jbco-addition-disabled::after {
  display: none;
}

span.jbco-addr-error.jbco-100 {
    border: 1px solid #ff0000;
  border-radius: var(--radius);
    padding: 10px 12px;
    margin: 3px;
    font-size: 14px;
    line-height: 1.4;
    color: #a00000;
    background-color: rgba(255, 0, 0, 0.1);
}

.woocommerce ul#shipping_method li {
    padding: 12px;
    border: 1px solid var(--bd);
    margin: 3px 3px 12px 3px !important;
    border-radius: var(--radius);
    font-size: 14px;
    min-height: 52px;
    cursor: pointer;
    line-height: unset !important;
}

.woocommerce ul#shipping_method li input {
    margin: 0px .4375em 0 0 !important;
    vertical-align: middle !important;
    transform: scale(1.2);
}

.woocommerce ul#shipping_method li label {
    cursor: pointer;
}

.woocommerce ul#shipping_method li.is-selected {
    border-color: #75973a;
}

.woocommerce ul#shipping_method .amount {
    float: right;
}

#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {
  border-radius: var(--radius) !important;
}

h3#ship-to-different-address {
  border-radius: var(--radius) !important;
  border-color: var(--bd) !important;
}

.jbco-ship-msg.warning {
    border: 1px solid #ffb900;
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 3px;
    color: #8a6000;
    background-color: rgba(255, 185, 0, 0.1);
}

/* .jbco-ship-msg {
    border: 1px solid #46b450;
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 3px;
    color: #0a4816;
    background-color: rgba(70, 180, 80, 0.1);
} */

.jbco-ship-msg {
    border: 0px solid #46b450;
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 3px;
    color: #2c2c2c;
    background-color: rgba(0, 0, 0, .03);
}

.jbco-ship-msg {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 15px !important;
}

.jbco-ship-msg p.status {
    margin: 0px;
}

.jbco-ship-msg.pickup p {
    margin: 0px;
}

.jbco-ship-msg.verified p {
    margin: 0px;
}

h4.form-section-title {
    margin-top: 20px;
    padding: 3px;
}

.shipping_address {
    padding: 9px;
}

.woocommerce table.shop_table th, .woocommerce table.shop_table td {
    border: 0px !important;
}

tfoot tr.shipping-summary, tfoot tr.order-total {
    border-top: 1px solid var(--bd) !important;
    
}

table.shop_table.woocommerce-checkout-review-order-table, td.product-name {
    font-size: 14px !important;
    font-weight: normal !important;
}

tfoot th, tfoot td {
    padding: 5px 10px !important;
}

.cart-subtotal th, .cart-subtotal td {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    font-weight: 600 !important;
}

.fee th, .fee td {
    padding-bottom: 20px !important;
}

.order-total th, .order-total td, .shipping-summary th, .shipping-summary td {
    padding: 20px 10px !important;
}

#order_review thead {
    display: none !important;
}

td.product-name, td.product-total {
    padding: 10px !important;
}

ul.wc_payment_methods.payment_methods.methods {
    font-size: var(--fz) !important;
}

#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px !important;
}

div#order_review, button#place_order {
    border-radius: var(--radius) !important;
}

a.mfn-woo-cart-link {
    font-size: 14px !important;
}

/* Groen vinkje zoals bij betaalmethodes */
ul#shipping_method li.is-selected::after, ul.shipping_methods li.is-selected::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 10px;
    color: #fff;
    background-color: #75973a;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: 900;
}

ul#shipping_method li,
ul.shipping_methods li {
  position: relative; /* nodig zodat ::after goed werkt */
}

.mfn-payment-check [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 10px !important;
}

.mfn-payment-check .icon-check:before {
    content: '\f00c' !important;
}

/* Verberg radio’s volledig */
.woocommerce ul#shipping_method li input[type="radio"] {
  display: none;
}

/* Haal flex weg van h3 */
.woocommerce h3#ship-to-different-address {
  display: block; /* weer blok zodat styling netjes blijft */
  font-size: 14px;
  font-weight: 500;
  position: relative;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 12px;
}


/* Verberg de echte checkbox */
.woocommerce #ship-to-different-address-checkbox {
  display: none;
}

/* Container van de toggle */
.woocommerce h3#ship-to-different-address .toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: #ccc; /* grijs als uit */
  border-radius: 26px;
  transition: background 0.3s;
  flex-shrink: 0;
}

/* Cirkel binnen toggle */
.woocommerce h3#ship-to-different-address .toggle-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Active state (checkbox aangevinkt) → gebruik ~ ipv + */
.woocommerce #ship-to-different-address-checkbox:checked ~ .toggle-switch {
  background: #46b450; /* groen zoals Jake’s */
}

.woocommerce #ship-to-different-address-checkbox:checked ~ .toggle-switch::after {
  transform: translateX(14px);
}

/* Zet flex op het label binnen h3 */
.woocommerce h3#ship-to-different-address label.woocommerce-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

span.toggle-label {
    font-size: var(--fz);
}

a.button.add_to_cart_button.ajax_add_to_cart.product_type_simple {
    font-size: 0.8em;
}

input, select, textarea {
  line-height: normal;
  font-family: inherit;
  font-size: var(--fz);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Floating label autofill fix voor Safari */
input:-webkit-autofill ~ label.jbco-label {
  top: 12px;
  transform: none;
  font-size: var(--lbl-small);
  color: var(--lbl-small-c);
}

/* Safari media query fallback */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .woocommerce-input-wrapper > label.jbco-label {
      top: 18px !important;
      transform: none !important;
    }
  }
}

#place_order {
    color: #fff !important;
    min-height: 52px;
    background-color: #6ca73f !important;
}

.button.alt:hover,
.woocommerce #payment #place_order:hover {
  background-color: #5c9136 !important;
  border-color: #5c9136 !important;
}

.terms-and-min-age {
    font-size: 14px;
    text-align: center;
    padding: 0px 5px;
    margin: 0px 5px 20px 5px;
    color: var(--lbl);
}

span.jbco-mail-notice.jbco-100.jbco-email-warning {
  border: 1px solid #007cba;             /* WooCommerce blauw */
  background-color: #f0f6fc;             /* Lichte blauwe achtergrond */
  color: #0c5460;                        /* Donkerblauwe tekst */
  padding: 10px 12px;
  border-radius: var(--radius);         /* Past aan op je bestaande design */
  margin: 3px;
  font-size: 14px;
  line-height: 1.5;
  display: block;
}

.jbco-mail-notice-ty {
    border: 1px solid #007cba;
    background-color: #f0f6fc;
    color: #0c5460;
    padding: 10px 12px;
    border-radius: var(--radius);
    margin: 3px;
    font-size: 14px;
    line-height: 1.5;
    display: block;
}

.order-total th {
    font-weight: 600 !important;
    font-size: 18px !important;
}

.order-total .woocommerce-Price-amount.amount bdi {
    font-size: 18px !important;
}

.order-total th {
    vertical-align: top !important;
}

.order-total td, .order-total td * {
    vertical-align: top !important;
}

.includes_tax span.woocommerce-Price-amount.amount {
    color: var(--mfn-woo-text-option-color) !important;
}

.order-total .includes_tax {
    color: var(--mfn-woo-text-option-color) !important;
}

/* =========================
   Mollie creditcard styling – conform adresvelden
   ========================= */

/* Mollie component wrapper (zoals input-wrapper) */
.mollie-component {
  height: var(--field-h);
  width: 100%;
  font-size: var(--fz);
  border: 1px solid var(--bd) !important;
  border-radius: var(--radius);
  background: var(--bg);
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  padding: 28px var(--px) 8px var(--px) !important;
  position: relative;
  z-index: 1;
      box-shadow: none !important;
}

.mollie-components {
display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.mollie-components div#cardHolder, .mollie-components div#cardNumber {
    grid-column: span 12;
}

.mollie-components div#expiryDate, .mollie-components div#verificationCode {
    grid-column: span 6 !important;
    max-width: 100% !important;
}

div.mollie-component--cardHolder.is-invalid + div[role="alert"],
div.mollie-component--cardNumber.is-invalid + div[role="alert"],
div.mollie-component--expiryDate.is-invalid + div[role="alert"],
div.mollie-component--verificationCode.is-invalid + div[role="alert"] {
    border: 1px solid #ff0000;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #a00000;
    background-color: rgba(255, 0, 0, 0.1);
}

body.woocommerce-checkout .woocommerce form.checkout .form-row .woocommerce-input-wrapper input:focus, body.woocommerce-checkout .woocommerce form.checkout .form-row .woocommerce-input-wrapper textarea:focus, body.woocommerce-checkout .woocommerce form.checkout .form-row .woocommerce-input-wrapper select:focus, body.woocommerce-checkout .woocommerce form.checkout .form-row .select2-container--focus .select2-selection {
    outline: none;
    border-color: #75973a !important;
    box-shadow: 0 0 0 2px rgb(117 151 58 / 10%) !important;
}

.mollie-component.mollie-component.has-focus, .mollie-components .mollie-component.is-invalid.has-focus {
    outline: none;
    border-color: #75973a !important;
    box-shadow: 0 0 0 2px rgb(117 151 58 / 10%) !important;
}

.mollie-components .mollie-component.is-invalid {
    box-shadow: 0px 1px 1px 0px rgba(255, 51, 68, 0.1), 0px 1px 3px 0px rgba(255, 51, 68, 0.1) !important;
    border-color: #ff0000 !important;
}

#cardHolder,
#cardNumber,
#expiryDate,
#verificationCode {
    padding: 3px !important;
}

input#expiryDate {
    font-size: 14px !important;
}

/* Mollie floating label */
b.mollie-component-label.jbco-label {
  position: absolute;
  left: var(--px);
  right: var(--px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  background: transparent;
  color: var(--lbl);
  font-size: var(--lbl-big);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transition:
    top .18s ease,
    transform .18s ease,
    font-size .18s ease,
    color .18s ease,
    background-color .18s ease;
}

/* Actieve of ingevulde toestand */
.mollie-component.jbco-float.is-active > b.mollie-component-label.jbco-label,
.mollie-component.jbco-float.is-filled > b.mollie-component-label.jbco-label {
  top: 12px;
  transform: none;
  font-size: var(--lbl-small);
  color: var(--lbl-small-c);
  padding: 0;
}

/* Autofill fix voor Safari */
input:-webkit-autofill ~ b.mollie-component-label.jbco-label {
  top: 12px;
  transform: none;
  font-size: var(--lbl-small);
  color: var(--lbl-small-c);
}

/* Safari fallback */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    b.mollie-component-label.jbco-label {
      top: 18px !important;
      transform: none !important;
    }
  }
}

.mollie-components div + div {
    margin-top: 0px !important;
}

.payment_box select {
    border: 1px solid var(--bd) !important;
    border-radius: var(--radius) !important;
    height: var(--field-h) !important;
    box-sizing: border-box;
    background-color: var(--bg);
    padding: 25px var(--px) 8px var(--px) !important;
    display: flex;
    align-items: flex-end;
    width: 100% !important;
}

.payment_box.payment_method_mollie_wc_gateway_kbc {
    padding: 3px !important;
}

#cardHolder {
    margin-top: 15px !important;
}

.mollie-component.is-invalid {
    margin-bottom: 12px !important;
}

p.mollie-components-description {
    margin-top: 15px;
    font-size: 12px;
    color: var(--lbl);
}

input.jbco-bag-locked {
  background-color: #f3f8f1 !important; /* zachtgroen */
  border-color: #c9e0c2 !important;
  color: #333;
  cursor: default;
}

/* === BAG Gecontroleerde velden (tooltip blijft binnen schermranden) === */

/* Container moet relatieve positie hebben */
.woocommerce-input-wrapper {
  position: relative;
}

/* Groen (readonly) veld */
input.jbco-bag-locked {
  background-color: #f3f8f1 !important;
  border-color: #c9e0c2 !important;
  color: #333;
  cursor: default;
  padding-right: 2.2em; /* ruimte voor het vinkje */
}

/* Vinkje op vaste plek rechts */
.jbco-bag-check {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: help;
  font-size: 0.9em;
  line-height: 1;
  z-index: 3;
}

/* Font Awesome icoon */
.jbco-bag-check::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #6ab04c;
  display: inline-block;
}

/* Tooltip basis */
.jbco-bag-check::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  font-size: 0.75em;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
  max-width: 240px;
  text-align: center;
  pointer-events: none;
}

/* Tooltip zichtbaar bij hover/tap */
.jbco-bag-check:hover::after,
.jbco-bag-check:focus::after {
  opacity: 0.95;
  visibility: visible;
  transform: translate(-50%, -4px);
}

/* Tooltip-pijl */
.jbco-bag-check::before,
.jbco-bag-check::after {
  transition: all 0.15s ease;
}

.jbco-bag-check:hover::before,
.jbco-bag-check:focus::before {
  color: #5c9445; /* iets donkerder groen bij hover */
}

/* Pijl onder tooltip */
.jbco-bag-check:hover::after {
  position: absolute;
}
.jbco-bag-check::after::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

td.product-name, .product-total {
    vertical-align: top !important;
}

form#woocommerce-checkout-form-coupon {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 10px;
}

button.button {
    border-radius: 5px !important;
}

/* Slimme randbeperkingen (zorgt dat tooltip nooit buiten viewport valt) */
@media (max-width: 768px) {
  .jbco-bag-check::after {
    left: auto;
    right: 0;
    transform: none;
    max-width: calc(100vw - 20px);
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* Tooltip zichtbaar bij hover/tap */
.jbco-bag-check:hover::after,
.jbco-bag-check:focus::after {
  opacity: 0.95;
  visibility: visible;
  transform: translate(0%, -4px);
}
}