.btn.btn--white{ --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); }
.btn.btn--light{ --clr: var(--clr-dark); --bg-clr: var(--clr-light); --border: 1px solid transparent; --box-shadow: none; --hover-clr: #fff; --hover-bg-clr: var(--clr-dark); --hover-border: 1px solid var(--clr-dark); }

.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; padding-bottom: 8rem; }

.woocommerce-checkout__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }

.woocommerce-checkout-section .woocommerce-checkout-section__header { display: flex; align-items: center; column-gap: .8rem; font-size: 1.8rem; font-weight: 500; margin-bottom: 2.4rem; }
.woocommerce-checkout-section .woocommerce-checkout-section__header span { --size: 2.1rem; width: var(--size); height: var(--size); min-width: var(--size); text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1.2; border-radius: 50%; border: .2rem solid var(--clr-dark); }

.woocommerce-checkout-section--contracts .woocommerce-checkout-section__header span { border-color: var(--clr-primary); background-color: var(--clr-primary); }
.woocommerce-checkout-section--company-info { display: flex; flex-direction: column; }
.woocommerce-checkout-section--company-info .kvk-message{ order: -1; font-size: clamp(1.4rem, 1.5vw, 1.8rem); font-weight: 500; line-height: 1.2; padding-bottom: 2.4rem; }
.woocommerce-checkout-section--company-info .woocommerce-checkout-section__header{ order: -2; }
.woocommerce-checkout-section--company-info :is(#company_name_field, #company_kvk_field, #company_legal_form_field) { transition: var(--ts-duration) var(--ts-function); }
.woocommerce-checkout-section--company-info .woocommerce-checkout-section__footer {display: none;}
.woocommerce-checkout-section--company-info.is-unregistered .woocommerce-checkout-section__body { opacity: .25; }
.woocommerce-checkout-section--company-info.disabled .woocommerce-checkout-section__body { display: none; }
.woocommerce-checkout-section--company-info.disabled .woocommerce-checkout-section__footer {padding: 12px; margin-top: 16px; background-color: var(--clr-light); display: flex; flex-direction: column;}
/* .woocommerce-checkout-section--company-info.is-unregistered { user-select: none; } */
.woocommerce-checkout-section--company-info.disabled #company_kvk_registered_field{ display: none; }

.woocommerce-checkout__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

.woocommerce-contracts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }

.woocommerce-checkout-overview { position: sticky; top: 6.4rem; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main { transition: opacity var(--ts-duration) var(--ts-function); }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main h3 { margin-bottom: 1rem; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main .blockUI { display: none!important; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main:has(.blockUI) { opacity: .5; pointer-events: none; user-select: none; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main:has(.blockUI)::before { content: ''; position: absolute; top: 1rem; right: 1rem; width: 1.6rem; height: 1.6rem; border: .2rem solid var(--clr-text); border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table { display: block; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table :is(tbody, tfoot, tr, td, th) { display: block; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table > * + * { border-top: 1px solid var(--clr-border); padding-top: 1.2rem; margin-top: 1.2rem; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table tr { display: flex; justify-content: space-between; column-gap: 2rem; }  
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table tr th { font-weight: 400; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table tr th + * { font-weight: 700; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table tr + tr { margin-top: .5rem; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table .order-total td { font-size: 2rem; } 
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table .order-total td small { display: none; } 
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table .cart-subtotal td,
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table .order-vat td { font-weight: 400; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main table .cart_item .subscription-details { display: none; }
.woocommerce-checkout-overview .woocommerce-checkout-overview__main .woocommerce-checkout-place-order { margin-top: 2rem; }

@keyframes rotation { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg); } }


.wpb-contract { --p: 1.8rem; --bg-clr: #F0F0F0; display: flex; flex-direction: column; background-color: var(--bg-clr); }
.wpb-contract .contract-title{ font-size: 2rem; font-weight: 700; padding-top: 1.2rem; }
.wpb-contract .contract-price{ --clr: var(--clr-primary); font-size: 1.6rem; font-weight: 700; color: var(--clr); padding-top: .6rem; }
.wpb-contract .contract-price span.del{ color: rgb(var(--clr-text-rgb), .65); font-weight: 500; position: relative; }
.wpb-contract .contract-price span.del::before{ content: ''; position: absolute; --overlap: -.5rem; top: var(--overlap); right: var(--overlap); left: var(--overlap); bottom: var(--overlap); width: 100%; height: 1px; background-color: #8b8b8b; margin: auto; transform: rotate(-45deg); }
.wpb-contract .contract-price-ex{ font-size: 1.4rem; font-weight: 400; color: rgb(var(--clr-text-rgb), .5); }
.wpb-contract .wpb-contract__usps{ list-style: none; }
.wpb-contract .wpb-contract__usps li{ display: flex; font-size: 1.4rem; font-weight: 700; gap: .8rem; }
.wpb-contract .wpb-contract__usps li i{ opacity: .5; padding-top: .3em; font-size: 1.2rem; }
.wpb-contract .wpb-contract__body { padding: var(--p); flex-grow: 1; }
.wpb-contract .wpb-contract__body + .wpb-contract__body { border-top: .2rem solid #DEDEDE; }
.wpb-contract .wpb-contract__footer { padding: 0 var(--p) var(--p) var(--p); }
.wpb-contract .wpb-contract__footer .btn { width: 100%; }

.quantity { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem; }
.quantity input { font-size: 1.6rem; font-weight: 700; text-align: center; padding: 0; -moz-appearance: textfield; border: none; background-color: #fff; border-top: .2rem solid var(--clr-dark); border-bottom: .2rem solid var(--clr-dark); min-height: unset!important; }
.quantity input:focus { outline: none!important; }
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity button { cursor: pointer; width: 4.6rem; height: 4.6rem; border: none; background-color: var(--clr-dark); color: #fff; font-size: 2rem; outline: none; }  
.quantity button i { pointer-events: none; }

.form-row.form-row--buttons .woocommerce-input-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.form-row--buttons .woocommerce-input-wrapper input { opacity: 0; position: absolute; }
.form-row.form-row--buttons .woocommerce-input-wrapper label { font-size: 1.6rem; cursor: pointer; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 4.6rem; background: var(--clr-light); transition-property: color, background-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
.form-row.form-row--buttons .woocommerce-input-wrapper label::before { content: ''; opacity: 0; display: inline-block; width: 1.2rem; height: 1.2rem; background: url('/app/themes/checkout/assets/icons/check.svg') no-repeat center/contain; margin-left: -1.2rem; margin-right: .4rem; transition: opacity var(--ts-duration) var(--ts-function); }
.form-row.form-row--buttons .woocommerce-input-wrapper input:checked + label { background-color: var(--clr-primary); color: #fff; }
.form-row.form-row--buttons .woocommerce-input-wrapper input:checked + label::before { opacity: 1; }
.form-row.form-row--radios .woocommerce-input-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); }
.form-row.form-row--radios .woocommerce-input-wrapper input { opacity: 0; position: absolute; }
.form-row.form-row--radios .woocommerce-input-wrapper label { cursor: pointer; display: flex; align-items: center; column-gap: .6rem; }
.form-row.form-row--radios .woocommerce-input-wrapper label::before { content: ''; outline: .2rem solid #fff; outline-offset: -.3rem; display: inline-block; width: 1.8rem; height: 1.8rem; min-width: 1.8rem; border-radius: 50%; border: .1rem solid var(--clr-border); transition-property: background-color, outline; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); }
.form-row.form-row--radios .woocommerce-input-wrapper input:checked + label::before { background-color: var(--clr-primary); }

.woocommerce-checkout-payment-gateways { background: transparent!important; }
.woocommerce-checkout-payment-gateways ul { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; border: none; list-style: none; }
.woocommerce-checkout-payment-gateways ul li:not(.woocommerce-notice)::before,
.woocommerce-checkout-payment-gateways ul li:not(.woocommerce-notice)::after { display: none; }
.woocommerce-checkout-payment-gateways ul li input { width: 0; height: 0; opacity: 0; position: absolute; left: -999rem; }
.woocommerce-checkout-payment-gateways ul li label { margin: 0; cursor: pointer; position: relative; display: flex; align-items: center; gap: .8rem; justify-content: start; font-size: 1.6rem; padding: 1.6rem; border: 1px solid var(--clr-border); transition: var(--ts-duration) var(--ts-function); }
.woocommerce-checkout-payment-gateways ul li label::before { content: ''; outline: .2rem solid #fff; outline-offset: -.3rem; display: inline-block; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--clr-border); transition: var(--ts-duration) var(--ts-function); }
.woocommerce-checkout-payment-gateways ul li label :is(img, svg) { margin-left: auto; height: 2.8rem; width: auto; }
.woocommerce-checkout-payment-gateways ul li label:hover { border-color: var(--clr-primary); }
.woocommerce-checkout-payment-gateways ul li input:checked + label::before { background-color: var(--clr-primary); }

.woocommerce-checkout-payment-gateways .payment_box { border: 1px solid var(--clr-border); background-color: #f7f7f7; border-top: 0; padding: 2rem; }
.woocommerce-checkout-payment-gateways .payment_box p { font-size: 1.4rem; line-height: 1.4; }
.woocommerce-checkout-payment-gateways .payment_box select { width: 100%; border: 1px solid var(--clr-border); min-height: 4rem; padding: 0 1.7rem 0 1.7rem; }
.woocommerce-checkout-payment-gateways .payment_box .mollie-components .mollie-component { display: flex; align-items: center; border-radius: 0; padding: 0 1.6rem; box-shadow: none; border: 1px solid var(--clr-border); } 

.checkout-inline-error-message { font-size: .8em; opacity: .7; margin-top: .5rem; }

.woocommerce-input-wrapper input, 
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea {background-color: transparent;}
.woocommerce-input-wrapper.password-input .show-password-input {display: none;}
#password-strength-indicator .password-requirements {margin-top: 1.4rem;}
#password-strength-indicator .password-requirements .requirement {opacity: .65; font-weight: 500; font-size: 1.4rem;}
#password-strength-indicator .password-requirements .requirement.valid {opacity: 1; color: var(--clr-success);}
#password-strength-indicator .password-strength-bar {margin-top: 1.2rem; height: 4px; display: flex; align-items: center; gap: 2px;}
#password-strength-indicator .password-strength-bar .password-strength-fill {height: 4px; width: 36px; background-color: #cbcbcb;}
#password-strength-indicator .password-strength-bar.bad .password-strength-fill:nth-child(-n+1) {background-color: var(--clr-error);}
#password-strength-indicator .password-strength-bar.good .password-strength-fill:nth-child(-n+2) {background-color: var(--clr-warning);}
#password-strength-indicator .password-strength-bar.very-good .password-strength-fill:nth-child(-n+3) {background-color: var(--clr-success);}
#password-strength-indicator .password-strength-bar .password-strength-text {margin-left: .6rem; font-weight: 600; font-size: 1.4rem;}


.woocommerce-error:has(+ .woocommerce form[name="checkout"]){ margin-bottom: 2.4rem; }

@media (max-width: 767.98px){
    form[name="checkout"] .woocommerce-checkout__main button[type="submit"]{ display: none; }
}

@media (min-width: 567px) {
    .woocommerce-checkout-overview__main { border: 1px solid var(--clr-border); padding: 2rem; }
}

@media (min-width: 768px) {
    .woocommerce-checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
    .woocommerce-checkout-section .woocommerce-checkout-section__header { font-size: 2rem; }
    .woocommerce-NoticeGroup { grid-column: span 2; }
}

@media (min-width: 992px) {
    .woocommerce-checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 35.7rem) }

    .woocommerce-checkout-section .woocommerce-checkout-section__header { font-size: 2.2rem; }
    .woocommerce-checkout-section--company-info .woocommerce-checkout__fields { row-gap: 2.8rem; }

    .woocommerce-checkout__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .form-row.form-row--buttons .woocommerce-input-wrapper { max-width: calc(50% - .8rem); }
    .form-row.form-row-wide { grid-column: span 2; }
}

@media (min-width: 1200px) {
    .woocommerce-checkout { gap: 6.4rem; }
    .woocommerce-checkout__main { gap: 4.8rem; }
    .woocommerce-checkout-section .woocommerce-checkout-section__header { font-size: 2.4rem; }
    .woocommerce-checkout-section .woocommerce-checkout-section__header span { --size: 3.2rem; font-size: 1.8rem; line-height: 2.8rem; }

    .woocommerce-contracts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .woocommerce-checkout-section--payment-methods, .woocommerce-checkout-place-order { max-width: 50rem; }


    .woocommerce-checkout-overview .woocommerce-checkout-overview__main { padding: 2.4rem; }
}

.woocommerce-order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; padding-bottom: 4.8rem; }
.woocommerce-order .wpb-text p { opacity: .65; } 
.woocommerce-order .wpb-text h1 { font-size: clamp(3.2rem, 4vw, 6.4rem); font-weight: 400; --mt: .25em; }
.woocommerce-order .wpb-text h1 strong { font-weight: 700; }
.woocommerce-order .wpb-text p.sub-title { opacity: 1; font-size: 1.8rem; } 
.woocommerce-order ul.steps { position: relative; list-style: none; font-size: 2rem; --mt: 2em; } 
.woocommerce-order ul.steps::before { content: ''; position: absolute; top: 0; left: 1.5rem; bottom: 0; border-right: .2rem dashed rgba(var(--clr-text-rgb), .2); z-index: -1; }
.woocommerce-order ul.steps .step { display: flex; align-items: center; column-gap: 1.2rem; } 
.woocommerce-order ul.steps .step span { width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: #f5f5f5; font-size: 2rem; font-weight: 500; text-align: center; line-height: 3.2rem; }
.woocommerce-order ul.steps .step span i { font-size: 1.6rem; }
.woocommerce-order ul.steps .step + .step { margin-top: 4.2rem; }
.woocommerce-order ul.steps .step--done { color: rgba(var(--clr-text-rgb), .5); }
.woocommerce-order ul.steps .step--done span { background: #959595; color: #fff; }
.woocommerce-order ul.steps .step--active span { background: var(--clr-primary); color: #fff; }
.woocommerce-order .woocommerce-order-details { border: 1px solid var(--clr-border); padding: 2rem; }
.woocommerce-order .woocommerce-order-details h2 { font-size: 2rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
.woocommerce-order .woocommerce-order-details h2 small{ opacity: .8; font-size: 1.2rem; font-weight: 400; }
.woocommerce-order .woocommerce-order-details table { display: block; }
.woocommerce-order .woocommerce-order-details table :is(tbody, tfoot, tr, td, th) { display: block; }
.woocommerce-order .woocommerce-order-details table > * + * { border-top: 1px solid var(--clr-border); padding-top: 1.2rem; margin-top: 1.2rem; }
.woocommerce-order .woocommerce-order-details table tr { display: flex; justify-content: space-between; column-gap: 2rem; }  
.woocommerce-order .woocommerce-order-details table tr th { font-weight: 400; }
.woocommerce-order .woocommerce-order-details table tr th + * { font-weight: 700; }
.woocommerce-order .woocommerce-order-details table tr + tr { margin-top: .5rem; }
.woocommerce-order .woocommerce-customer-details { margin-top: 3.2rem; }
.woocommerce-order .woocommerce-customer-details > * + * { margin-top: 1em; }
.woocommerce-order .woocommerce-customer-details small { font-size: 1.4rem; opacity: .5; display: block; width: 100%; margin-bottom: .5em; }

@media (min-width: 768px) {
    .woocommerce-order { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}

@media (min-width: 992px) {
    body:has(.woocommerce-order) .wpb-navigation { margin-bottom: 6.4rem; }
    .woocommerce-order { grid-template-columns: minmax(0, 1fr) minmax(0, 35.7rem); padding-bottom: 6.4rem; }
    .woocommerce-order .wpb-text { font-size: 1.8rem; }
    .woocommerce-order .wpb-text p.sub-title { font-size: 2rem; }
    .woocommerce-order ul.steps { font-size: 2.4rem; }
}

@media (min-width: 1200px) {
    .woocommerce-order { padding-bottom: 10rem; }
}


.modal.modal--wc-login .modal-dialog__body { padding-top: 0; }
.modal.modal--wc-login form { display: grid!important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.modal.modal--wc-login form p { grid-column: span 12; }
.modal.modal--wc-login form p.form-row { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.modal.modal--wc-login form p.form-row-first,
.modal.modal--wc-login form p.form-row-last,
.modal.modal--wc-login form p.form-row-last .password-input { display: grid; grid-template-columns: minmax(0, 1fr); }
.modal.modal--wc-login form p.form-row-first input,
.modal.modal--wc-login form p.form-row-last .password-input { margin-top: auto; }
.modal.modal--wc-login form .clear { display: none; }

@media (min-width: 992px) {    
    .modal.modal--wc-login form p.form-row-first,
    .modal.modal--wc-login form p.form-row-last { grid-column: span 6; }  
}