/**
 * Checkout Page Styles - Officelicentie Style
 *
 * @package licentie-child
 */

/* ============================================
   Hide Default WooCommerce Coupon Form
   We use a custom coupon form in the order totals
   ============================================ */

.woocommerce-form-coupon-toggle,
.checkout_coupon.woocommerce-form-coupon,
.coupon-wrapper {
    display: none !important;
}

/* ============================================
   Override Parent Theme Layout
   ============================================ */

body.woocommerce-checkout #primary.content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-checkout #secondary {
    display: none !important;
}

body.woocommerce-checkout .site-content > .col-full {
    max-width: 100% !important;
    padding: 0 !important;
}

body.woocommerce-checkout #content.site-content {
    padding: 0 !important;
}

body.woocommerce-checkout .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-checkout .hentry {
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   Checkout Page Background
   ============================================ */

body.woocommerce-checkout {
    background: #fff;
}

body.woocommerce-checkout #content.site-content {
    background: #fff;
}

/* ============================================
   Checkout Progress Bar (Override parent theme)
   ============================================ */

.checkout-wrap {
    max-width: 800px !important;
    margin: 0 !important;
    padding: 0 1rem !important;
}

ul.checkout-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
}

/* Line connecting the circles */
ul.checkout-bar::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 2px !important;
    background: #e0e0e0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}

ul.checkout-bar li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

ul.checkout-bar li:first-child {
    align-items: flex-start !important;
}

ul.checkout-bar li:last-child {
    align-items: flex-end !important;
}

/* Circle - reset parent styles */
ul.checkout-bar li::before {
    content: '' !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 0.5rem 0 !important;
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #e0e0e0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Remove the :after lines from parent */
ul.checkout-bar li:after,
ul.checkout-bar li.active:after,
.woocommerce-checkout ul.checkout-bar li.next:after {
    display: none !important;
    content: none !important;
}

/* Active circle - blue */
ul.checkout-bar li.active::before {
    background: #4A90D9 !important;
}

/* Complete circle - blue */
ul.checkout-bar li.complete::before {
    background: #4A90D9 !important;
}

/* Next/inactive circle - gray */
ul.checkout-bar li.next::before {
    background: #e0e0e0 !important;
}

/* Text styling */
ul.checkout-bar li span {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #767676 !important;
    text-align: center !important;
    visibility: visible !important;
}

ul.checkout-bar li.active span,
ul.checkout-bar li.complete span {
    color: #6b7280 !important;
}

/* Link styling */
ul.checkout-bar li span a,
ul.checkout-bar a {
    color: inherit !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* ============================================
   Checkout Wrapper
   ============================================ */

.checkout-v2-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: #fff;
}

.checkout-v2-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

/* Two column proportional scaling - form styles are in responsive section below */
@media (max-width: 1200px) and (min-width: 1001px) {
    .checkout-v2-content {
        grid-template-columns: 58% 42%;
    }
}

/* ============================================
   Checkout Title
   ============================================ */

.checkout-v2-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f274a;
    margin: 0 0 1.5rem 0;
}

/* ============================================
   Checkout Form Column (Left)
   ============================================ */

.checkout-v2-form {
    background: #fff;
}

/* Form sections */
.checkout-section {
    margin-bottom: 2rem;
}

.checkout-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f274a;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e5e5;
}

/* ============================================
   Form Fields - Horizontal Layout (Magento-style)
   ============================================ */

/* Override default p margin in checkout form */
.checkout-v2-form p {
    padding: 0.3rem 0 !important;
    margin: 0 !important;
}

/* All form rows: flex layout with label left, input right */
.checkout-v2-form p.form-row:not(.checkout-hidden) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Label: fixed width, right-aligned */
.checkout-v2-form p.form-row > label {
    width: 140px !important;
    min-width: 140px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    padding-right: 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1f274a !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Hide required asterisk */
.checkout-v2-form p.form-row > label .required,
.checkout-v2-form p.form-row > label abbr.required {
    display: none !important;
}

/* Optional text styling - on new line */
.checkout-v2-form p.form-row > label .optional {
    display: block !important;
    color: #767676 !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
}

/* Input wrapper: fixed width on desktop */
.checkout-v2-form p.form-row > .woocommerce-input-wrapper {
    width: 390px !important;
    max-width: 390px !important;
    flex: 0 0 390px !important;
}

/* Input styling */
.checkout-v2-form input[type="text"],
.checkout-v2-form input[type="email"],
.checkout-v2-form input[type="tel"],
.checkout-v2-form input[type="number"],
.checkout-v2-form input[type="password"],
.checkout-v2-form select,
.checkout-v2-form textarea {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9375rem !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #1f274a !important;
    transition: border-color 0.15s ease !important;
    box-sizing: border-box !important;
}

.checkout-v2-form input:focus,
.checkout-v2-form select:focus,
.checkout-v2-form textarea:focus {
    outline: none !important;
    border-color: #1bbc9b !important;
}

/* Validated input - green border with checkmark - ONLY when field has value */
.checkout-v2-form p.form-row.woocommerce-validated input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown),
.checkout-v2-form p.form-row.woocommerce-validated select:not([data-empty="true"]) {
    border-color: #1bbc9b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231bbc9b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 18px 18px !important;
    padding-right: 2.5rem !important;
}

/* Invalid input - red border - ONLY after user interaction (touched) */
.checkout-v2-form p.form-row.woocommerce-invalid.field-touched input:not([type="checkbox"]):not([type="radio"]),
.checkout-v2-form p.form-row.woocommerce-invalid.field-touched select {
    border-color: #e74c3c !important;
}

/* Also show invalid after form submit attempt */
.checkout-v2-form.checkout-submitted p.form-row.woocommerce-invalid input:not([type="checkbox"]):not([type="radio"]),
.checkout-v2-form.checkout-submitted p.form-row.woocommerce-invalid select {
    border-color: #e74c3c !important;
}

/* ============================================
   Inline Field Error Messages
   ============================================ */

/* Hide error messages inside form-rows (they get moved by JS) */
.checkout-v2-form p.form-row > .checkout-inline-error-message:not(.error-moved),
.checkout-v2-form p.form-row > p:not(.error-moved) {
    display: none !important;
}

/* Moved error messages - styled and positioned */
.checkout-v2-form .checkout-inline-error-message.error-moved,
.checkout-v2-form p.error-moved {
    display: block !important;
    width: calc(100% - 140px) !important;
    margin: 0.25rem 0 0.5rem 140px !important;
    padding: 0 !important;
    color: #e74c3c !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
}

/* Hide text node errors using font-size trick */
.checkout-v2-form p.form-row.woocommerce-invalid {
    font-size: 0 !important;
}

.checkout-v2-form p.form-row.woocommerce-invalid > * {
    font-size: 0.875rem !important;
}

.checkout-v2-form p.form-row.woocommerce-invalid > label {
    font-size: 0.875rem !important;
}

.checkout-v2-form p.form-row.woocommerce-invalid input,
.checkout-v2-form p.form-row.woocommerce-invalid select,
.checkout-v2-form p.form-row.woocommerce-invalid textarea {
    font-size: 0.9375rem !important;
}

/* ============================================
   Field Pairs - 1 label + 2 inputs (Naam, Adres style)
   Both fields on same line, second input right after first
   ============================================ */

/* Container for paired fields - use CSS to keep them together */
.checkout-v2-form .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    border-top: 1px solid #ddd !important;
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
}

/* First field in pair */
.checkout-v2-form p.form-row.form-row-first:not(.checkout-hidden) {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.checkout-v2-form p.form-row.form-row-first > label {
    width: 140px !important;
    min-width: 140px !important;
}

.checkout-v2-form p.form-row.form-row-first > .woocommerce-input-wrapper {
    width: 200px !important;
    flex: 0 0 200px !important;
}

/* Last field in pair: no label, directly after first with small gap */
.checkout-v2-form p.form-row.form-row-last:not(.checkout-hidden) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 170px !important;
    flex: 0 0 170px !important;
    margin-left: 1rem !important;
}

.checkout-v2-form p.form-row.form-row-last > label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.checkout-v2-form p.form-row.form-row-last > .woocommerce-input-wrapper {
    width: 100% !important;
    flex: 1 !important;
}

/* Full-width rows break to new line */
.checkout-v2-form p.form-row.form-row-wide {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* ============================================
   EU VAT Field - Visibility & Layout
   ============================================ */

/* HIDE by default - only show when business checkbox is checked */
#billing_eu_vat_number_field {
    display: none !important;
}

/* SHOW when business order is active (JS adds this class to body) */
body.licentie-business-active #billing_eu_vat_number_field {
    display: flex !important;
    position: relative !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Label - same as company field */
#billing_eu_vat_number_field > label {
    display: block !important;
    width: 140px !important;
    min-width: 140px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    padding-right: 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1f274a !important;
    line-height: 1.4 !important;
}

/* Input wrapper - same as company field */
#billing_eu_vat_number_field > .woocommerce-input-wrapper {
    width: 390px !important;
    max-width: 390px !important;
    flex: 0 0 390px !important;
}

/* Progress indicator - absolutely positioned so it doesn't break layout */
#billing_eu_vat_number_field #alg_wc_eu_vat_progress {
    position: absolute !important;
    left: 165px !important;
    bottom: 0.25rem !important;
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
}

/* Hide the progress indicator when empty */
#billing_eu_vat_number_field #alg_wc_eu_vat_progress:empty {
    display: none !important;
}

/* Validation success styling */
#billing_eu_vat_number_field.woocommerce-validated #alg_wc_eu_vat_progress {
    color: #1bbc9b !important;
}

/* Validation error styling */
#billing_eu_vat_number_field.woocommerce-invalid #alg_wc_eu_vat_progress {
    color: #e74c3c !important;
}

/* ============================================
   Checkbox fields - Special handling
   ============================================ */

.checkout-v2-form p.form-row.wooccm-type-checkbox {
    display: flex !important;
    align-items: center !important;
}

.checkout-v2-form p.form-row.wooccm-type-checkbox > .woocommerce-input-wrapper {
    width: 65% !important;
    margin-left: 35% !important;
}

.checkout-v2-form p.form-row.wooccm-type-checkbox > .woocommerce-input-wrapper label.checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

.checkout-v2-form p.form-row.wooccm-type-checkbox input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
}

/* Select2 styling */
.checkout-v2-form .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.checkout-v2-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4;
    padding: 0;
    color: #1f274a;
}

.checkout-v2-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

/* ============================================
   Order Review Column (Right)
   ============================================ */

.checkout-v2-sidebar {
    position: sticky;
    top: 2rem;
}

.checkout-v2-order-review {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
}

/* Order items */
.checkout-order-items {
    margin-bottom: 1.5rem;
    max-height: 280px;
    overflow-y: auto;
}

.checkout-order-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.checkout-order-item:last-child {
    border-bottom: none;
}

.checkout-order-item-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.checkout-order-item-image a {
    display: block;
}

.checkout-order-item-image img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    border-radius: 4px;
}

.checkout-order-item-details {
    flex: 1;
    min-width: 0;
}

.checkout-order-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f274a;
    margin: 0;
    line-height: 1.3;
}

.checkout-order-item-qty {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.25rem;
}

.checkout-order-item-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f274a;
    white-space: nowrap;
}

.checkout-order-item-price .tax_label {
    display: none;
}

/* Order totals */
.checkout-totals-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e5e5e5;
    padding-top: 1rem;
}

.checkout-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.checkout-totals-label {
    font-weight: 500;
    color: #1f274a;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.checkout-totals-label .label-suffix {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

.checkout-totals-value {
    text-align: right;
    color: #1f274a;
    font-size: 0.9375rem;
}

/* Discount/Coupon row styling */
.checkout-discount {
    background: #f0fdf4;
    margin: 0.25rem -1rem;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
}

.checkout-discount .checkout-totals-label {
    color: #16a34a;
    font-weight: 600;
}

.checkout-discount .checkout-totals-value {
    color: #16a34a;
    font-weight: 600;
}

.checkout-discount .woocommerce-remove-coupon {
    color: #6b7280;
    font-size: 12px;
    text-decoration: none;
    margin-left: 0.5rem;
}

.checkout-discount .woocommerce-remove-coupon:hover {
    color: #dc2626;
}

/* Shipping row - CO2 styling */
.checkout-shipping {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e5e5;
}

.checkout-shipping .co2-icon {
    width: 14px;
    height: 14px;
    margin-right: 2px;
}

.checkout-shipping .co2-label {
    font-size: 12px;
    font-weight: 600;
    color: #1bbc9b;
    margin-right: 4px;
}

.checkout-shipping .shipping-free {
    color: #1bbc9b;
    font-weight: 600;
}

/* Total row */
.checkout-total {
    padding-top: 0.5rem;
}

.checkout-total .checkout-totals-label {
    font-size: 1rem;
    font-weight: 600;
}

.checkout-total .checkout-totals-value {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Hide small text in total */
.checkout-total .checkout-totals-value small,
.checkout-total .includes_tax {
    display: none;
}

/* ============================================
   Payment Methods
   ============================================ */

.checkout-payment-section {
    margin-top: 2rem;
    position: relative;
}

.checkout-payment-header {
    margin-bottom: 1.25rem;
}

.checkout-payment-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f274a;
    margin: 0 0 0.375rem 0;
}

.checkout-payment-subtitle {
    font-size: 0.9375rem;
    color: #4b5563;
    margin: 0;
}

.woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.wc_payment_methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wc_payment_method {
    margin-bottom: 0.75rem !important;
    position: relative;
}

/* Payment method label - the card */
.wc_payment_method > label {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0.875rem 1.25rem !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: auto !important;
}

.wc_payment_method > label:hover {
    border-color: #d1d5db !important;
}

/* Hide the radio button */
.wc_payment_method input[type="radio"] {
    display: none !important;
}

/* Selected state - blue border and light blue background */
.wc_payment_method input[type="radio"]:checked + label {
    border-color: #3b82f6 !important;
    border-bottom: 3px solid #3b82f6 !important;
    background: #eff6ff !important;
}

/* Payment method icon/logo */
.wc_payment_method label img {
    width: 50px !important;
    height: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
}

/* Payment method info block (name + fee) */
.wc_payment_method label .payment-method-info {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wc_payment_method label .payment-method-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f274a;
    display: block;
    line-height: 1.2;
}

.wc_payment_method label .payment-method-fee {
    font-size: 0.8125rem;
    color: #767676;
    display: block;
    margin-top: 0.125rem;
}

/* Popular badge - orange, positioned under logo */
.wc_payment_method .payment-method-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: #f59e0b;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 3px;
    position: absolute;
    left: 1.25rem;
    top: 3.5rem;
}

/* Make label position relative for badge positioning */
.wc_payment_method > label {
    position: relative !important;
}

/* Add padding bottom when badge is present */
.wc_payment_method:has(.payment-method-badge) > label {
    padding-bottom: 2.25rem !important;
}

/* Inline content (terms + button) - only for selected method */
.payment-method-inline-content {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-left: auto;
}

.wc_payment_method input[type="radio"]:checked + label .payment-method-inline-content {
    display: flex;
}

/* Terms text in the middle */
.payment-method-terms {
    font-size: 0.6rem;
    font-weight: 400;
    color: #6b7280;
    flex: 1;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

.payment-method-terms a {
    color: #3b82f6;
    text-decoration: none;
}

.payment-method-terms a:hover {
    text-decoration: underline;
}

/* Green action button on the right */
.payment-method-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #1bbc9b;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #1bbc9b;
    border-bottom: 3px solid #17a387;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.payment-method-action-btn:hover {
    background-color: #17a387;
    border-color: #17a387;
}

.payment-method-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Hide payment box when using inline layout - except for credit card (Mollie Components) */
.checkout-payment-section .wc_payment_method .payment_box {
    display: none !important;
}

/* ========================================
   MOLLIE CREDIT CARD - Inside Label
   ======================================== */

/* Hide original payment_box */
.checkout-payment-section .wc_payment_method.payment_method_mollie_wc_gateway_creditcard .payment_box {
    display: none !important;
}

/* Hide secure payment text only - cardHolder must stay visible for Mollie */
.checkout-payment-section .mollie-components-description {
    display: none !important;
}

/* Credit card label - allow wrapping */
.checkout-payment-section .wc_payment_method.payment_method_mollie_wc_gateway_creditcard > label {
    flex-wrap: wrap !important;
}

/* Mollie components - hidden by default */
.checkout-payment-section .wc_payment_method label .mollie-components {
    display: none !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    flex: 0 0 100% !important;
    max-width: 50% !important;
    padding: 0.75rem 0 0 0 !important;
    margin: 0 !important;
    order: 99 !important;
}

/* Mollie components - show only when payment method is selected */
.checkout-payment-section .wc_payment_method input[type="radio"]:checked + label .mollie-components {
    display: flex !important;
}

/* All field wrappers */
.checkout-payment-section label .mollie-components > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Card holder & Card number - side by side */
.checkout-payment-section label #cardHolder,
.checkout-payment-section label #cardNumber {
    width: calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    flex: 0 0 calc(50% - 0.25rem) !important;
}

/* Expiry & CVC - side by side */
.checkout-payment-section label #expiryDate,
.checkout-payment-section label #verificationCode {
    width: calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    flex: 0 0 calc(50% - 0.25rem) !important;
    padding: 0 !important;
}

/* Labels */
.checkout-payment-section label .mollie-component-label {
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.25rem !important;
}

/* Input containers */
.checkout-payment-section label .mollie-component {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    min-height: 36px !important;
    padding: 0.5rem !important;
}

/* Ensure iframe fills the component */
.checkout-payment-section label .mollie-component iframe {
    min-height: 20px !important;
}

.checkout-payment-section label .mollie-component.has-focus {
    border-color: #3b82f6 !important;
}

.checkout-payment-section label .mollie-component.is-invalid {
    border-color: #ef4444 !important;
}

/* Error messages - smaller font */
.checkout-payment-section label [role="alert"],
.checkout-payment-section label #cardHolder-errors,
.checkout-payment-section label #cardNumber-errors,
.checkout-payment-section label #expiryDate-errors,
.checkout-payment-section label #verificationCode-errors {
    font-size: 0.75rem !important;
    color: #ef4444 !important;
    margin-top: 0.25rem !important;
}

/* Hide default place order visually but keep it functional */
.checkout-payment-section .place-order {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Payment method - tablet compact layout (1000px - 1200px) */
@media (min-width: 1001px) and (max-width: 1200px) {
    /* Label - compacter padding */
    .wc_payment_method > label {
        padding: 0.75rem 0.875rem !important;
        gap: 0.5rem !important;
    }

    /* Icon smaller */
    .wc_payment_method label img {
        width: 40px !important;
        height: 32px !important;
    }

    /* Info block compacter */
    .wc_payment_method label .payment-method-info {
        gap: 0.25rem !important;
    }

    .wc_payment_method label .payment-method-name {
        font-size: 0.8125rem !important;
    }

    .wc_payment_method label .payment-method-fee {
        font-size: 0.6875rem !important;
    }

    /* Badge smaller */
    .payment-method-badge {
        padding: 0.1rem 0.35rem !important;
        font-size: 0.5625rem !important;
    }

    /* Inline content - 2 rijen zoals mobile */
    .payment-method-inline-content {
        flex-direction: column !important;
        gap: 0.125rem !important;
        align-items: flex-end !important;
    }

    /* Button bovenaan */
    .payment-method-action-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
        gap: 0.35rem !important;
        order: 1 !important;
    }

    .payment-method-action-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Terms onder button */
    .payment-method-terms {
        font-size: 0.5rem !important;
        text-align: right !important;
        order: 2 !important;
        white-space: nowrap !important;
    }
}

/* Payment method - mobile friendly compact layout */
@media (max-width: 1000px) {
    /* Payment method container - relative for badge positioning */
    .wc_payment_method {
        position: relative !important;
    }

    /* Label - alles op 1 rij, verticaal gecentreerd */
    .wc_payment_method > label {
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 0.75rem 0.625rem !important;
        gap: 0.375rem !important;
        overflow: hidden !important;
    }

    /* Override badge padding - niet nodig op mobile */
    .wc_payment_method:has(.payment-method-badge) > label {
        padding-bottom: 0.75rem !important;
    }

    /* Icon on mobile - groter, zelfde hoogte als iDEAL + Gratis */
    .wc_payment_method label img {
        width: 44px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    /* Payment method info - wrap zodat naam+badge op 1 rij, fee eronder */
    .wc_payment_method label .payment-method-info {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: flex-start !important;
        margin-left: 0.375rem !important;
        gap: 0.125rem 0.375rem !important;
    }

    .wc_payment_method label .payment-method-name {
        font-size: 0.875rem !important;
    }

    .wc_payment_method label .payment-method-fee {
        font-size: 0.6875rem !important;
        flex-basis: 100% !important;
    }

    /* Badge - naast iDEAL tekst (binnen info container) */
    .payment-method-badge {
        position: static !important;
        margin: 0 !important;
        padding: 0.125rem 0.35rem !important;
        font-size: 0.5rem !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: fit-content !important;
    }

    /* Inline content - rechts, button boven terms eronder */
    .payment-method-inline-content {
        flex-direction: column !important;
        gap: 0.125rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        align-items: flex-end !important;
        align-self: center !important;
        margin-left: auto !important;
    }

    /* Button - bovenaan */
    .payment-method-action-btn {
        width: auto !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    /* Button icon */
    .payment-method-action-btn svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Terms - onder button */
    .payment-method-terms {
        text-align: right !important;
        white-space: nowrap !important;
        font-size: 0.5rem !important;
        color: #767676 !important;
        line-height: 1.2 !important;
        order: 2 !important;
    }
}

/* Small mobile screens - stacked layout (iPhone, etc.) */
@media (max-width: 480px) {
    /* Payment method card - wrap content */
    .wc_payment_method > label {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 0.875rem 0.75rem !important;
        gap: 0.5rem !important;
    }

    /* Mollie credit card fields - full width on mobile */
    .checkout-payment-section .wc_payment_method label .mollie-components {
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    .checkout-payment-section label #cardHolder,
    .checkout-payment-section label #cardNumber,
    .checkout-payment-section label #expiryDate,
    .checkout-payment-section label #verificationCode {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Logo */
    .wc_payment_method label img.mollie-gateway-icon {
        width: 44px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-top: 2px !important;
    }

    /* Payment info container - next to logo */
    .wc_payment_method label .payment-method-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.125rem !important;
        min-width: 0 !important;
    }

    /* Name + badge on same row */
    .wc_payment_method label .payment-method-name {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
    }

    /* Fee below name */
    .wc_payment_method label .payment-method-fee {
        font-size: 0.75rem !important;
        color: #6b7280 !important;
    }

    /* Badge - inline with name */
    .wc_payment_method .payment-method-badge {
        position: static !important;
        display: inline-block !important;
        margin-left: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
        font-size: 0.5625rem !important;
        vertical-align: middle !important;
    }

    /* Inline content - full width below, stacked vertically */
    .wc_payment_method input[type="radio"]:checked + label .payment-method-inline-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-top: 0.625rem !important;
        padding-left: 52px !important;
        gap: 0.625rem !important;
    }

    /* Terms text - above button */
    .payment-method-terms {
        text-align: left !important;
        white-space: normal !important;
        font-size: 0.6875rem !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
        order: 1 !important;
    }

    .payment-method-terms a {
        color: #3b82f6 !important;
    }

    /* Action button - full width at bottom */
    .payment-method-action-btn {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        order: 2 !important;
        white-space: nowrap !important;
    }

    .payment-method-action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Extra small mobile (iPhone 13 mini, SE, etc.) */
@media (max-width: 390px) {
    .wc_payment_method > label {
        padding: 0.75rem 0.625rem !important;
    }

    .wc_payment_method label img.mollie-gateway-icon {
        width: 40px !important;
        height: 30px !important;
    }

    .wc_payment_method label .payment-method-name {
        font-size: 0.875rem !important;
    }

    .wc_payment_method label .payment-method-fee {
        font-size: 0.6875rem !important;
    }

    .wc_payment_method input[type="radio"]:checked + label .payment-method-inline-content {
        padding-left: 48px !important;
    }

    .payment-method-terms {
        font-size: 0.625rem !important;
    }

    .payment-method-action-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ============================================
   Place Order Button
   ============================================ */

.checkout-payment-section .place-order {
    margin-top: 1rem;
}

.checkout-payment-section #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background-color: #1bbc9b;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid #1bbc9b;
    border-bottom: 3px solid #17a387;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none !important;
    text-shadow: none;
    transition: background 0.1s linear;
    margin-bottom: 3px;
}

.checkout-payment-section #place_order:hover {
    background-color: #17a387;
    border-color: #17a387;
}

/* Terms and conditions */
.checkout-payment-section .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem;
}

.checkout-payment-section .woocommerce-privacy-policy-text {
    font-size: 0.8125rem;
    color: #6b7280;
}

.checkout-payment-section .woocommerce-privacy-policy-text a {
    color: #3b82f6;
}

/* ============================================
   Payment Logos
   ============================================ */

.checkout-payment-logos {
    margin-top: 1.5rem;
    text-align: center;
}

.checkout-payment-logos-title,
.cart-payment-title {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* SSL Lock Icon */
.ssl-lock-icon {
    color: #10b981;
    flex-shrink: 0;
}

/* SSL Info Trigger */
.ssl-info-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.ssl-info-icon {
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.ssl-info-trigger:hover .ssl-info-icon {
    transform: scale(1.1);
}

/* SSL Tooltip */
.ssl-info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #1f2937;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

.ssl-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}

.ssl-info-trigger:hover .ssl-info-tooltip {
    opacity: 1;
    visibility: visible;
}

.ssl-info-tooltip strong {
    display: block;
    color: #10b981;
    font-weight: 600;
    margin-bottom: 4px;
}

.ssl-info-tooltip span {
    display: block;
    color: #d1d5db;
}

.checkout-payment-logos-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.checkout-payment-logos-item img {
    height: 28px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
}

/* ============================================
   Hide Default Elements
   ============================================ */

/* Hide default WooCommerce order review table header */
.woocommerce-checkout-review-order-table thead {
    display: none;
}

/* Coupon form visibility is controlled via Customizer → Checkout Pagina */

/* Custom Coupon Form in Totals */
.checkout-coupon-toggle {
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 1rem;
}

.checkout-coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
    user-select: none;
}

.checkout-coupon-title {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.checkout-coupon-arrow {
    color: #666;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.checkout-coupon-toggle.is-open .checkout-coupon-arrow {
    transform: rotate(180deg);
}

.checkout-coupon-content {
    padding-top: 1rem;
}

.checkout-coupon-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkout-coupon-field {
    position: relative;
    display: flex;
    align-items: center;
}

.checkout-coupon-input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-coupon-input:focus {
    border-color: #27509a;
    box-shadow: 0 0 0 2px rgba(39, 80, 154, 0.1);
}

.checkout-coupon-input.has-error {
    border-color: #dc3545;
}

.checkout-coupon-input::placeholder {
    color: #999;
}

.checkout-coupon-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.checkout-coupon-clear:hover {
    opacity: 1;
}

.checkout-coupon-error {
    font-size: 13px;
    margin-top: -0.25rem;
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff5f5;
    color: #dc3545;
}

.checkout-coupon-error.is-success {
    background: #f0fff4;
    color: #22c55e;
}

.checkout-coupon-error.is-error {
    background: #fff5f5;
    color: #dc3545;
}

.checkout-coupon-submit {
    background: #3bb29b;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: flex-end;
}

.checkout-coupon-submit:hover {
    background: #32a08b;
}

.checkout-coupon-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.checkout-coupon-submit.is-loading {
    position: relative;
    color: transparent;
}

.checkout-coupon-submit.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hide payment section in sidebar (we show it in left column) */
.checkout-v2-sidebar #payment,
.checkout-v2-sidebar .woocommerce-checkout-payment {
    display: none !important;
}

/* Hide duplicate place order buttons */
.checkout-v2-sidebar .place-order,
.checkout-v2-sidebar #place_order {
    display: none !important;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Large screens - wrapper scales, columns stay proportional */
@media (max-width: 1200px) {
    .checkout-v2-wrapper {
        padding: 2rem 1.5rem;
    }

    .checkout-v2-content {
        gap: 1.5rem;
    }

    /* Smaller form field widths for proportional columns */
    .checkout-v2-form p.form-row > label {
        width: 100px !important;
        min-width: 100px !important;
        font-size: 0.8125rem !important;
        padding-right: 1rem !important;
    }

    .checkout-v2-form p.form-row > .woocommerce-input-wrapper {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    .checkout-v2-form p.form-row.form-row-first > label {
        width: 100px !important;
        min-width: 100px !important;
    }

    .checkout-v2-form p.form-row.form-row-first > .woocommerce-input-wrapper {
        width: 140px !important;
        flex: 0 0 140px !important;
    }

    .checkout-v2-form p.form-row.form-row-last {
        width: 130px !important;
        flex: 0 0 130px !important;
        margin-left: 0.5rem !important;
    }

    .checkout-v2-form p.form-row.wooccm-type-checkbox > .woocommerce-input-wrapper {
        width: auto !important;
        margin-left: 100px !important;
    }
}

/* Single column layout */
@media (max-width: 1000px) {
    .checkout-v2-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 650px;
        margin: 0 auto;
    }

    .checkout-v2-sidebar {
        position: static;
        max-width: 100%;
    }

    .checkout-v2-order-review {
        padding: 1.5rem;
    }

    /* Form fields - stack vertically */
    .checkout-v2-form p.form-row:not(.checkout-hidden) {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .checkout-v2-form p.form-row > label {
        width: 100% !important;
        min-width: unset !important;
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 0.375rem !important;
    }

    .checkout-v2-form p.form-row > .woocommerce-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Full-width fields like E-mail, Bedrijfsnaam */
    .checkout-v2-form p.form-row.form-row-wide > .woocommerce-input-wrapper {
        width: 100% !important;
    }

    /* Paired fields - stay side by side, fill width together */
    .checkout-v2-form p.form-row.form-row-first:not(.checkout-hidden) {
        width: auto !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    .checkout-v2-form p.form-row.form-row-last:not(.checkout-hidden) {
        width: auto !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        margin-left: 0.5rem !important;
        margin-right: 0 !important;
    }

    .checkout-v2-form p.form-row.form-row-first > .woocommerce-input-wrapper,
    .checkout-v2-form p.form-row.form-row-last > .woocommerce-input-wrapper {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Show label for last field too */
    .checkout-v2-form p.form-row.form-row-last > label {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Checkbox alignment */
    .checkout-v2-form p.form-row.wooccm-type-checkbox > .woocommerce-input-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .checkout-v2-wrapper {
        padding: 1.5rem 1rem;
    }

    .checkout-v2-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .checkout-section-title {
        font-size: 1rem;
    }

    .checkout-v2-form .woocommerce-billing-fields__field-wrapper,
    .checkout-v2-form .woocommerce-shipping-fields__field-wrapper,
    .checkout-v2-form .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .checkout-v2-form .form-row-first,
    .checkout-v2-form .form-row-last {
        grid-column: 1;
    }

    .checkout-payment-logos-item img {
        height: 24px;
        max-width: 44px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .checkout-v2-wrapper {
        padding: 1rem 0.75rem;
    }

    .checkout-v2-title {
        font-size: 1rem;
    }

    .checkout-section {
        margin-bottom: 1.5rem;
    }

    .checkout-section-title {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
    }

    .checkout-v2-order-review {
        padding: 1rem;
        border-radius: 8px;
    }

    .order-review-title {
        font-size: 1rem;
    }

    .order-item-name {
        font-size: 0.8125rem;
    }

    .order-item-price {
        font-size: 0.875rem;
    }

    .order-totals-label,
    .order-totals-value {
        font-size: 0.875rem;
    }

    .order-total .order-totals-value {
        font-size: 1rem;
    }

    .checkout-payment-logos-list {
        gap: 0.5rem;
    }

    .checkout-payment-logos-item img {
        height: 22px;
        max-width: 40px;
    }
}

/* Extra small mobile */
@media (max-width: 380px) {
    .checkout-v2-wrapper {
        padding: 0.75rem 0.5rem;
    }

    .checkout-v2-form input[type="text"],
    .checkout-v2-form input[type="email"],
    .checkout-v2-form input[type="tel"],
    .checkout-v2-form select {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .checkout-v2-order-review {
        padding: 0.75rem;
    }
}

/* ============================================
   Override Default WooCommerce Checkout Styles
   ============================================ */

body.woocommerce-checkout .woocommerce-checkout {
    max-width: 100%;
}

body.woocommerce-checkout .col2-set {
    width: 100% !important;
    float: none !important;
}

body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
}

body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading {
    width: 100% !important;
    float: none !important;
}

/* Override Shoptimizer styles */
body.woocommerce-checkout .shoptimizer-checkout-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Payment section overrides */
body.woocommerce-checkout .checkout-payment-section .woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.woocommerce-checkout .checkout-payment-section .wc_payment_methods {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.woocommerce-checkout .checkout-payment-section .wc_payment_method {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    background: transparent !important;
}

body.woocommerce-checkout .checkout-payment-section .wc_payment_method > label {
    margin: 0 !important;
    box-shadow: none !important;
}

body.woocommerce-checkout .checkout-payment-section .wc_payment_method > label::before,
body.woocommerce-checkout .checkout-payment-section .wc_payment_method > label::after {
    display: none !important;
}

body.woocommerce-checkout .checkout-payment-section #place_order {
    float: none !important;
    width: 100% !important;
}

/* Override any theme radio button styling */
body.woocommerce-checkout .checkout-payment-section input[type="radio"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* WOOCCM conditional fields inherit the same styling from above */

/* ============================================
   Billing Fields - Hide section title
   ============================================ */

.checkout-v2-form .woocommerce-billing-fields h3 {
    display: none;
}

/* ============================================
   Business Section - Gray Background
   ============================================ */

/* Zakelijke bestelling checkbox */
#billing_wooccm11_field {
    display: block !important;
    padding: 0.5rem 0 0.25rem 140px !important;
    margin: 0 !important;
}

#billing_wooccm11_field > label,
#billing_wooccm11_field .woocommerce-input-wrapper,
#billing_wooccm11_field .woocommerce-input-wrapper label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    margin: 0 !important;
    width: auto !important;
}

/* Clean up label text */
#billing_wooccm11_field .woocommerce-input-wrapper label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1f274a !important;
}

/* Hide "(optioneel)" text */
#billing_wooccm11_field .woocommerce-input-wrapper label .optional {
    display: none !important;
}

/* Remove the   spacing after text */
#billing_wooccm11_field .woocommerce-input-wrapper label {
    white-space: nowrap !important;
}

/* Modern checkbox styling - 25px rounded */
#billing_wooccm11_field input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

#billing_wooccm11_field input[type="checkbox"]:hover {
    border-color: #3bb29b !important;
}

#billing_wooccm11_field input[type="checkbox"]:checked {
    background: #3bb29b !important;
    border-color: #3bb29b !important;
}

#billing_wooccm11_field input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;
    top: 3px !important;
    width: 6px !important;
    height: 12px !important;
    border: solid #fff !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

#billing_wooccm11_field input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 178, 155, 0.2) !important;
}

/* Hide conditional fields via class (JS adds/removes this class) */
.checkout-hidden,
.checkout-v2-form .checkout-hidden,
.checkout-v2-form p.form-row.checkout-hidden,
p.form-row.checkout-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide by default before JS loads */
.checkout-v2-form:not(.checkout-initialized) #billing_company_field,
.checkout-v2-form:not(.checkout-initialized) #billing_eu_vat_number_field,
.checkout-v2-form:not(.checkout-initialized) #billing_address_1_field,
.checkout-v2-form:not(.checkout-initialized) #billing_address_2_field,
.checkout-v2-form:not(.checkout-initialized) #billing_house_number_field,
.checkout-v2-form:not(.checkout-initialized) #billing_postcode_field,
.checkout-v2-form:not(.checkout-initialized) #billing_city_field,
.checkout-v2-form:not(.checkout-initialized) #billing_country_field,
.checkout-v2-form:not(.checkout-initialized) #billing_phone_field {
    display: none !important;
}

/* ============================================
   Zakelijke Bestelling Fields - All 9 fields
   ============================================ */

/* Bedrijfsnaam - gray background top */
#billing_company_field {
    align-items: center !important;
    width: calc(100% + 3rem) !important;
    background: #f5f5f5 !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    padding: 0.75rem 1.5rem !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e0e0e0 !important;
    padding-top: 1.25rem !important;
    margin-top: 1rem !important;
}

/* BTW-nummer - gray background bottom */
#billing_eu_vat_number_field {
    align-items: center !important;
    width: calc(100% + 3rem) !important;
    background: #f5f5f5 !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    padding: 0.75rem 1.5rem !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1rem !important;
}

/* All zakelijke fields - base flex layout */
/* NOTE: #billing_eu_vat_number_field uses separate rule - visibility controlled by JS */
#billing_company_field,
#billing_address_1_field,
#billing_house_number_field,
#billing_postcode_field,
#billing_city_field,
#billing_country_field,
#billing_phone_field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* BTW-nummer veld - flex layout alleen wanneer zakelijke bestelling actief */
body.licentie-business-active #billing_eu_vat_number_field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Address fields - normal white background */
#billing_address_1_field,
#billing_house_number_field,
#billing_postcode_field,
#billing_city_field,
#billing_country_field,
#billing_phone_field {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0.3rem 0 !important;
    margin: 0 !important;
}

/* All zakelijke fields - label styling */
#billing_company_field > label,
#billing_eu_vat_number_field > label,
#billing_address_1_field > label,
#billing_house_number_field > label,
#billing_postcode_field > label,
#billing_city_field > label,
#billing_country_field > label,
#billing_phone_field > label {
    display: block !important;
    width: 140px !important;
    min-width: 140px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    padding-right: 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1f274a !important;
    line-height: 1.4 !important;
}

/* All zakelijke fields - input wrapper styling */
#billing_company_field > .woocommerce-input-wrapper,
#billing_eu_vat_number_field > .woocommerce-input-wrapper,
#billing_address_1_field > .woocommerce-input-wrapper,
#billing_house_number_field > .woocommerce-input-wrapper,
#billing_postcode_field > .woocommerce-input-wrapper,
#billing_city_field > .woocommerce-input-wrapper,
#billing_country_field > .woocommerce-input-wrapper,
#billing_phone_field > .woocommerce-input-wrapper {
    width: 390px !important;
    max-width: 390px !important;
    flex: 0 0 390px !important;
}

/* Address + House number on same row */
#billing_address_1_field {
    width: auto !important;
    flex: 0 0 auto !important;
}

#billing_address_1_field > .woocommerce-input-wrapper {
    width: 250px !important;
    flex: 0 0 250px !important;
}

#billing_house_number_field {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: 0.5rem !important;
}

#billing_house_number_field > label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

#billing_house_number_field > .woocommerce-input-wrapper {
    width: 120px !important;
    flex: 0 0 120px !important;
}

/* ============================================
   Zakelijke Fields - Mobile Override (MUST be after base styles)
   ============================================ */
@media (max-width: 1000px) {
    /* All zakelijke fields - stack vertically, full width */
    #billing_company_field,
    #billing_address_1_field,
    #billing_house_number_field,
    #billing_postcode_field,
    #billing_city_field,
    #billing_country_field,
    #billing_phone_field {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.5rem 0 !important;
        box-sizing: border-box !important;
    }

    /* BTW-nummer - mobile layout alleen wanneer zakelijke bestelling actief */
    body.licentie-business-active #billing_eu_vat_number_field {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.5rem 0 !important;
        box-sizing: border-box !important;
        background: #f5f5f5 !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border-bottom: 1px solid #e0e0e0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Bedrijfsnaam - gray background with rounded top corners */
    #billing_company_field {
        background: #f5f5f5 !important;
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-top: 1px solid #e0e0e0 !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* All labels - left aligned, full width */
    #billing_company_field > label,
    #billing_address_1_field > label,
    #billing_house_number_field > label,
    #billing_postcode_field > label,
    #billing_city_field > label,
    #billing_country_field > label,
    #billing_phone_field > label {
        width: 100% !important;
        min-width: unset !important;
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 0.375rem !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        left: auto !important;
    }

    /* BTW-nummer label - alleen wanneer zakelijke bestelling actief */
    body.licentie-business-active #billing_eu_vat_number_field > label {
        width: 100% !important;
        min-width: unset !important;
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 0.375rem !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        left: auto !important;
    }

    /* All input wrappers - full width */
    #billing_company_field > .woocommerce-input-wrapper,
    #billing_address_1_field > .woocommerce-input-wrapper,
    #billing_house_number_field > .woocommerce-input-wrapper,
    #billing_postcode_field > .woocommerce-input-wrapper,
    #billing_city_field > .woocommerce-input-wrapper,
    #billing_country_field > .woocommerce-input-wrapper,
    #billing_phone_field > .woocommerce-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* BTW-nummer input wrapper - alleen wanneer zakelijke bestelling actief */
    body.licentie-business-active #billing_eu_vat_number_field > .woocommerce-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}