/* ============================================================
 * SK Checkout — componenten (optionele-veld-links, e-mailsuggestie,
 * uniforme checkboxes, login-modal, herindeling, kortingscode, mobiel).
 * Geport uit sk-checkout-classic-style.php (BB-staging, bewezen spec).
 * Wordt ná checkout-layout.css ge-enqueued (cascade blijft identiek).
 * ============================================================ */

/* ============ OPTIONELE-VELD-LINKS + E-MAILSUGGESTIE ============ */
.sk-classic-checkout .sk-opt-toggle{
  display:block; clear:both; margin:2px 0 14px; font-size:.9rem; font-weight:600;
  color:var(--sk-co-accent); text-decoration:none; cursor:pointer;
  background:none; border:0; padding:0; text-align:left; font-family:inherit; line-height:inherit; width:auto;
}
.sk-classic-checkout .sk-opt-toggle:hover{ text-decoration:underline; }
.sk-classic-checkout #sk-email-suggest{
  margin-top:7px; font-size:.88rem; color:var(--sk-co-muted);
}
.sk-classic-checkout #sk-email-suggest a{ color:var(--sk-co-accent); font-weight:700; text-decoration:underline; }


/* Postcode + huisnummer + toevoeging op een regel (op ID) */
.sk-classic-checkout #billing_postcode_field,
.sk-classic-checkout #shipping_postcode_field{ float:left !important; width:44% !important; clear:left; }
.sk-classic-checkout #billing_house_number_field,
.sk-classic-checkout #shipping_house_number_field{ float:left !important; width:26% !important; margin-left:2.6% !important; clear:none; }
.sk-classic-checkout #billing_house_number_suffix_field,
.sk-classic-checkout #shipping_house_number_suffix_field{ float:right !important; width:24.8% !important; clear:none; }
.sk-classic-checkout #billing_street_name_field,
.sk-classic-checkout #shipping_street_name_field{ clear:both; }

/* Plaats + Land naast elkaar (op ID; classes worden door andere plugins gehusseld) */
.sk-classic-checkout #billing_city_field,
.sk-classic-checkout #shipping_city_field{ float:left !important; width:48.5% !important; clear:left; }
.sk-classic-checkout #billing_country_field,
.sk-classic-checkout #shipping_country_field{ float:right !important; width:48.5% !important; clear:right; }
.sk-classic-checkout #billing_phone_field{ clear:both; }

/* ============ UNIFORME CHECKBOXES (overal identiek) ============ */
.sk-classic-checkout input[type=checkbox]{
  width:18px !important; height:18px !important; accent-color:var(--sk-co-accent) !important;
  border-radius:4px; margin:0; flex:0 0 18px;
}
.sk-classic-checkout form.checkout label:has(input[type=checkbox]),
.sk-classic-checkout .woocommerce-form__label-for-checkbox{
  display:flex !important; align-items:flex-start; gap:9px;
  font-size:.93rem !important; font-weight:500 !important; line-height:1.5;
  color:var(--sk-co-text) !important; margin:0; cursor:pointer; text-transform:none;
}
/* pixel-gelijk: Woo's 3px row-padding en -2px/8px checkbox-margins overal neutraliseren */
body.sk-classic-checkout form .form-row{ padding:0 !important; }
body.sk-classic-checkout form .form-row input[type=checkbox]{ margin:2px 0 0 0 !important; float:none; }
body.sk-classic-checkout .woocommerce-terms-and-conditions-wrapper{ margin:0; padding:0; }
/* "(optioneel)" is ruis bij checkboxes (losse flex-item rechtsboven); tekst is al duidelijk */
.sk-classic-checkout form.checkout .form-row:has(input[type=checkbox]) .optional{ display:none !important; }
.sk-classic-checkout #ship-to-different-address{ margin:4px 0 2px; font-size:.93rem; }
.sk-classic-checkout .sk-create-account{ margin:2px 0 14px; }
.sk-classic-checkout .form-row.create-account,
.sk-classic-checkout .woocommerce-account-fields{ display:none !important; } /* origineel links; rechts staat de nette versie (vast gedrag) */

/* ============ LOGIN ONDER E-MAIL ============ */
.sk-classic-checkout .sk-login-note{ display:block; margin:8px 0 0; font-size:.88rem; color:var(--sk-co-muted); }
.sk-classic-checkout .sk-login-note a{ color:var(--sk-co-accent); font-weight:600; }
.sk-classic-checkout div.woocommerce > form.login{ display:none !important; } /* core-form blijft definitief dicht */
.sk-login-overlay{
  position:fixed; inset:0; z-index:99990; /* onder wachtwoordmanager-menus (die zitten op max z-index) */
  background:rgba(18,50,67,.45); display:flex; align-items:center; justify-content:center; padding:16px;
}
.sk-login-overlay[hidden]{ display:none; }
body.sk-modal-open{ overflow:hidden; }
.sk-login-modal{
  position:relative; background:#fff; border-radius:18px; padding:30px 30px 26px;
  max-width:430px; width:100%; box-shadow:0 18px 60px rgba(18,50,67,.28); color:var(--sk-co-text);
  max-height:calc(100vh - 40px); overflow:auto;
}
.sk-login-modal h3{ margin:0 0 6px; font-size:1.2rem; font-weight:700; color:var(--sk-co-heading); }
.sk-login-modal .sk-login-sub{ margin:0 0 16px; font-size:.9rem; color:var(--sk-co-muted); }
.sk-login-modal .sk-login-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:50%;
  background:transparent; color:var(--sk-co-muted); font-size:1.05rem; cursor:pointer; line-height:1; padding:0;
}
.sk-login-modal .sk-login-close:hover{ color:var(--sk-co-heading); }
.sk-login-modal form.login{ border:0; margin:0; padding:0; display:block !important; }
.sk-login-modal form.login .form-row{ float:none; width:100%; margin:0 0 13px; }
.sk-login-modal form.login label{ display:block; font-weight:600; font-size:.83rem; color:var(--sk-co-heading); margin-bottom:6px; }
.sk-login-modal form.login label:has(input[type=checkbox]),
.sk-login-modal .woocommerce-form-login__rememberme{
  display:inline-flex !important; align-items:center !important; gap:8px; font-weight:500;
}
.sk-login-modal form.login label:has(input[type=checkbox]) input[type=checkbox]{ margin:0 !important; }
.sk-login-modal input.input-text{
  width:100%; min-height:48px !important; padding:12px 14px !important;
  border:1px solid var(--sk-co-border) !important; border-radius:10px !important; box-sizing:border-box; font-size:1rem;
}
.sk-login-modal button[name=login]{
  width:100%; min-height:50px; border-radius:11px; font-weight:700; font-size:1.02rem; margin-top:2px;
}
.sk-login-modal .lost_password{ text-align:center; font-size:.88rem; margin:12px 0 0; }
@media (max-width:640px){
  .sk-login-overlay{ align-items:flex-end; padding:0; }
  .sk-login-modal{ max-width:none; border-radius:18px 18px 0 0; padding:26px 20px 30px; max-height:88vh; }
}
/* Alle form-rows links uitlijnen (Klaviyo-nieuwsbrief centreert zichzelf) */
.sk-classic-checkout form.checkout .form-row{ text-align:left !important; }
.sk-classic-checkout form.checkout .form-row label{ text-align:left !important; }

/* ============ HERINDELING LINKERKOLOM (pure CSS, geen JS) ============ */
/* col-1/col-2 transparant maken zodat alle blokken één kolom vormen en herordend kunnen worden */
.sk-classic-checkout #customer_details{ display:flex; flex-direction:column; }
.sk-classic-checkout #customer_details .col-1,
.sk-classic-checkout #customer_details .col-2,
.sk-classic-checkout #customer_details .woocommerce-billing-fields{ display:contents; } /* alles opengevouwen tot losse blokken */
.sk-classic-checkout .woocommerce-billing-fields > h3{ order:0; }    /* Contact-kop */
.sk-classic-checkout .woocommerce-billing-fields__field-wrapper{ order:1; } /* contact + adresvelden */
.sk-classic-checkout .woocommerce-shipping-fields{ order:2; margin:0; } /* ander-adres sluit aan op het adres */
.sk-classic-checkout #sk-ship-section{ order:4; }                    /* verzendmethode */
.sk-classic-checkout #mypa-delivery-options-wrapper,
.sk-classic-checkout .wp-block-myparcelcom-delivery-options-block,
.sk-classic-checkout .wp-block-myparcelnl-delivery-options-block{ order:5; } /* sluit aan op bezorg-keuze */
.sk-classic-checkout .woocommerce-additional-fields{ order:6; }      /* opmerking-link onderaan */
.sk-classic-checkout .woocommerce-account-fields{ order:7; }

/* ============ SUBTIELE LAADSTATUS (i.p.v. witte blockUI-deken) ============ */
.sk-classic-checkout .blockUI.blockOverlay{
  background:rgba(255,255,255,.45) !important; opacity:1 !important; cursor:default !important;
}
.sk-classic-checkout .blockUI.blockOverlay::before{
  content:"" !important; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  background:none !important; background-image:none !important;
  border:3px solid var(--sk-co-accent-soft); border-top-color:var(--sk-co-accent); border-radius:50%;
  animation:sk-spin .65s linear infinite;
}
@keyframes sk-spin{ to{ transform:rotate(360deg); } }


/* Verzendregel in het overzicht: label op eigen regel, methode links + prijs rechts (cel spant de volle breedte) */
.sk-classic-checkout tr.woocommerce-shipping-method-label td{ text-align:left !important; padding:11px 0 !important; }
.sk-classic-checkout .sk-ml-label{ display:block; font-weight:500; color:var(--sk-co-muted); margin-bottom:5px; }
.sk-classic-checkout .sk-ml-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sk-classic-checkout .sk-ml-naam{ font-weight:600; color:var(--sk-co-heading); }
.sk-classic-checkout .sk-ml-prijs{ font-weight:700; color:var(--sk-co-heading); white-space:nowrap; }
/* Totaal: boven uitlijnen */
.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{ vertical-align:top; }


/* Strakke kolommen: alles links op de kop-lijn, alle prijzen rechts op de rand */
body.sk-classic-checkout .woocommerce-checkout-review-order-table th,
body.sk-classic-checkout .woocommerce-checkout-review-order-table td{
  padding-left:0 !important; padding-right:0 !important;
}
body.sk-classic-checkout .woocommerce-checkout-review-order-table th{ text-align:left !important; }
body.sk-classic-checkout .woocommerce-checkout-review-order-table td:last-child:not([colspan]){ text-align:right !important; }
body.sk-classic-checkout .woocommerce-checkout-review-order-table td.product-name{ padding-right:12px !important; }


/* Kortingscode-rij (Kadence Shop Kit): default link-kleur; links uitgelijnd + normaal gewicht (i.p.v. de vette, rechtse totaal-opmaak) + rustige celpadding */
.sk-classic-checkout.sk-co-coupon .woocommerce-checkout-review-order-table tr.kt-coupon-checkout td{
  padding-top:6px !important; padding-bottom:4px !important; text-align:left !important;
}
.sk-classic-checkout.sk-co-coupon .woocommerce-checkout-review-order-table tr.kt-coupon-checkout a{ font-weight:400 !important; }
/* couponrij hoort bij de totalen: geen dubbele scheidingslijn onder het overzicht */
.sk-classic-checkout .woocommerce-checkout-review-order-table{ margin-bottom:2px !important; }


/* Totaalrijen strakker: thema forceert 20px celpadding -> terug naar rustige 10px */
body.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot th,
body.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot td{
  padding-top:10px !important; padding-bottom:10px !important;
}
body.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{
  padding-top:13px !important; padding-bottom:2px !important;
}


/* Kadence coupon-modal: compact, gecentreerd, invoer+knop over volle breedte */
body.sk-co-coupon .kadence-coupone-pro-modal .kt-modal-container{
  max-width:420px !important; width:calc(100% - 40px) !important;
  padding:0 !important; border-radius:16px !important;
}
body.sk-co-coupon .kadence-coupone-pro-modal .kt-modal-content{ padding:30px 30px 28px !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .kt-modal-content > p:first-child{
  margin:0 0 18px !important; padding-right:22px; font-size:1rem; line-height:1.5; color:var(--sk-co-muted);
}
body.sk-co-coupon .kadence-coupone-pro-modal .kt_checkout_coupon,
body.sk-co-coupon .kadence-coupone-pro-modal .kt_checkout_coupon .form-row{ width:100% !important; float:none !important; margin:0 0 12px !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .kt_checkout_coupon .form-row:last-of-type{ margin-bottom:0 !important; }
body.sk-co-coupon .kadence-coupone-pro-modal #coupon_code{ width:100% !important; box-sizing:border-box; }
body.sk-co-coupon .kadence-coupone-pro-modal .kt_checkout_coupon button.button{ width:100% !important; margin:0 !important; padding:13px 16px !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .clear{ display:none !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .kt-coupon-modal-close{ top:14px !important; right:14px !important; }
/* succes-notice in de modal nooit tonen (modal sluit toch direct); fout/info blijven zichtbaar */
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-message{ display:none !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-info,
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-error{
  background:#eef5f0 !important; color:#1e5d34 !important; border:1px solid #cfe6d8 !important;
  border-left:3px solid #1e7a3e !important; border-radius:10px !important;
  padding:12px 16px !important; font-size:.95rem !important; box-shadow:none !important;
}
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-error{
  background:#fbecec !important; color:#8a1f1f !important; border-color:#f0cccc !important; border-left-color:#c0392b !important;
}
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-message::before,
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-info::before,
body.sk-co-coupon .kadence-coupone-pro-modal .woocommerce-error::before{ display:none !important; }
body.sk-co-coupon .kadence-coupone-pro-modal .button{
  background:var(--sk-co-accent) !important; border-radius:10px !important; font-weight:600 !important;
}
body.sk-co-coupon .kadence-coupone-pro-modal #coupon_code{ border-radius:10px !important; }

/* Verwijder-link bij een toegepaste coupon: subtiel, klein */
.sk-classic-checkout.sk-co-coupon .woocommerce-remove-coupon{
  display:inline-block; margin-top:2px; font-size:.8rem; font-weight:400;
  color:#8b9aa8 !important; text-decoration:underline;
}
.sk-classic-checkout.sk-co-coupon .woocommerce-remove-coupon:hover{ color:#c0392b !important; }
.sk-classic-checkout.sk-co-coupon tr.cart-discount th{ font-weight:600; }
.sk-classic-checkout.sk-co-coupon tr.cart-discount th,
.sk-classic-checkout.sk-co-coupon tr.cart-discount td{ vertical-align:top !important; }

/* ============ MOBIEL ============ */
@media (max-width:899px){
  .sk-classic-checkout form.checkout{ max-width:600px; }
  .sk-classic-checkout #customer_details{ padding:22px 20px; } /* zijruimte gelijk aan paneel-inhoud */
  /* smallere postcode-kolom op mobiel zodat Huisnummer/Toevoeging-labels passen */
  .sk-classic-checkout #billing_postcode_field,
  .sk-classic-checkout #shipping_postcode_field{ width:33% !important; }
  .sk-classic-checkout #billing_house_number_field,
  .sk-classic-checkout #shipping_house_number_field{ width:29% !important; margin-left:2.5% !important; }
  .sk-classic-checkout #billing_house_number_suffix_field,
  .sk-classic-checkout #shipping_house_number_suffix_field{ width:32.5% !important; }
  .sk-classic-checkout #billing_house_number_suffix_field > label,
  .sk-classic-checkout #billing_house_number_field > label{ font-size:.95rem; }
  /* paneel edge-to-edge, geen afgeronde hoeken op mobiel */
  .sk-classic-checkout #order_review_heading,
  .sk-classic-checkout #order_review{
    border-radius:0 !important; border-left:0; border-right:0;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    width:100vw !important;
  }
  .sk-classic-checkout #order_review_heading{ padding:18px 20px 0; margin-top:18px; }
  .sk-classic-checkout #order_review{ padding:4px 20px 18px; }
  /* compacter ritme in het overzicht op mobiel */
  .sk-classic-checkout .woocommerce-checkout-review-order-table th,
  .sk-classic-checkout .woocommerce-checkout-review-order-table td{ padding-top:9px !important; padding-bottom:9px !important; }
  .sk-classic-checkout .woocommerce-checkout-review-order-table td.product-name{ padding-top:12px !important; padding-bottom:12px !important; }
  .sk-classic-checkout tr.woocommerce-shipping-method-label td{ padding:9px 0 !important; }
  .sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
  .sk-classic-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{ padding-top:11px !important; }
  .sk-classic-checkout .woocommerce-checkout-review-order-table{ margin-bottom:0; }
  .sk-classic-checkout #payment::before{ margin:10px 0 10px; padding-top:14px; }
  .sk-classic-checkout #payment ul.payment_methods li > label{ padding:12px 14px; }
  .sk-classic-checkout .form-row-first,
  .sk-classic-checkout .form-row-last{ float:none; width:100%; }
}