/*
 * Komponent: Kasa WooCommerce
 * -------------------------------------------
 */

.ka-component-checkout {
    margin: 2rem 0;
    padding: 0;
}

.ka-checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ka-checkout-title {
    font-size: inherit;
    font-weight: inherit;
    margin: 0 0 2rem 0;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-title-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
    text-align: center;
}

.ka-checkout-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Pusty koszyk */
.ka-checkout-empty {
    text-align: center;
    padding: 4rem 2rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-empty-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-radius: var(--ka-checkout-empty-radius, var(--bs-border-radius, 0.375rem));
    margin: 2rem 0;
}

.ka-checkout-empty p {
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-empty-text-color, var(--bs-secondary, var(--wp--preset--color--secondary, #666)));
    margin-bottom: 1.5rem;
}

.ka-checkout-empty .button {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-bg, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    color: var(--ka-checkout-button-color, var(--bs-white, #fff));
    padding: 12px 24px;
    text-decoration: none;
    border-radius: var(--ka-checkout-button-radius, var(--bs-border-radius, 0.375rem));
    font-weight: inherit;
    transition: inherit;
}

.ka-checkout-empty .button:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-hover-bg, var(--bs-primary-hover, var(--bs-dark, #1a5a8a)));
    color: var(--ka-checkout-button-hover-color, var(--bs-white, #fff));
}

/* Fallback dla braku WooCommerce */
.ka-checkout-fallback {
    text-align: center;
    padding: 4rem 2rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-fallback-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-radius: var(--ka-checkout-fallback-radius, var(--bs-border-radius, 0.375rem));
    margin: 2rem 0;
}

.ka-checkout-fallback p {
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-fallback-text-color, var(--bs-secondary, var(--wp--preset--color--secondary, #666)));
    margin-bottom: 1rem;
}

/* Błędy komponentu */
.ka-component-error {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-error-bg, var(--bs-danger-bg-subtle, #f8d7da));
    color: var(--ka-error-color, var(--bs-danger-text, #721c24));
    padding: 1rem;
    border: 1px solid var(--ka-error-border, var(--bs-danger-border-subtle, #f5c6cb));
    border-radius: var(--ka-error-radius, var(--bs-border-radius-sm, 4px));
    margin: 1rem 0;
}

.ka-component-error p {
    margin: 0;
}

/* Style dla formularza WooCommerce */
.ka-checkout-content .woocommerce-checkout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ka-checkout-content .woocommerce-billing-fields,
.ka-checkout-content .woocommerce-shipping-fields,
.ka-checkout-content .woocommerce-additional-fields {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-fields-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    padding: 2rem;
    border-radius: var(--ka-checkout-fields-radius, var(--bs-border-radius, 0.375rem));
    box-shadow: var(--ka-checkout-fields-shadow, var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)));
}

.ka-checkout-content .woocommerce-billing-fields h3,
.ka-checkout-content .woocommerce-shipping-fields h3,
.ka-checkout-content .woocommerce-additional-fields h3 {
    margin: 0 0 1.5rem 0;
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-fields-title-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
}

.ka-checkout-content .form-row {
    margin-bottom: 1rem;
}

.ka-checkout-content .form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-label-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
}

.ka-checkout-content .form-row input,
.ka-checkout-content .form-row select,
.ka-checkout-content .form-row textarea {
    width: 100%;
    padding: 12px;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border: 1px solid var(--ka-checkout-input-border, var(--bs-border-color, #ddd));
    border-radius: var(--ka-checkout-input-radius, var(--bs-border-radius-sm, 4px));
    font-size: inherit;
}

.ka-checkout-content .form-row input:focus,
.ka-checkout-content .form-row select:focus,
.ka-checkout-content .form-row textarea:focus {
    outline: none;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border-color: var(--ka-checkout-input-focus-border, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

/* Podsumowanie zamówienia */
.ka-checkout-content .woocommerce-checkout-review-order {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-review-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    padding: 2rem;
    border-radius: var(--ka-checkout-review-radius, var(--bs-border-radius, 0.375rem));
    box-shadow: var(--ka-checkout-review-shadow, var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)));
}

.ka-checkout-content .woocommerce-checkout-review-order h3 {
    margin: 0 0 1.5rem 0;
    font-size: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-review-title-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
}

.ka-checkout-content .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.ka-checkout-content .woocommerce-checkout-review-order-table th,
.ka-checkout-content .woocommerce-checkout-review-order-table td {
    padding: 0.75rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border-bottom: 1px solid var(--ka-checkout-table-border, var(--bs-border-color, #e1e5e9));
    text-align: left;
}

.ka-checkout-content .woocommerce-checkout-review-order-table th {
    font-weight: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-checkout-table-th-color, var(--bs-body-color, var(--wp--preset--color--foreground, #1d2327)));
}

/* Przycisk zamówienia */
.ka-checkout-content .woocommerce-checkout-payment {
    margin-top: 2rem;
}

.ka-checkout-content .place-order {
    text-align: center;
}

.ka-checkout-content .woocommerce-checkout-payment .button,
/*.ka-checkout-form button[type="submit"],*/
.woocommerce-checkout-payment .button {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-bg, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    color: var(--ka-checkout-button-color, var(--bs-white, #fff));
    padding: 15px 30px;
    border: none;
    border-radius: var(--ka-checkout-button-radius, var(--bs-border-radius, 0.375rem));
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    transition: inherit;
}

.ka-checkout-content .woocommerce-checkout-payment .button:hover,
.ka-checkout-form button[type="submit"]:hover,
.woocommerce-checkout-payment .button:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-hover-bg, var(--bs-primary-hover, var(--bs-dark, #1a5a8a)));
}

/* Metody płatności */
.ka-checkout-content .woocommerce-checkout-payment .payment_methods {
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.ka-checkout-content .woocommerce-checkout-payment .payment_methods li {
    padding: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border: 1px solid var(--ka-checkout-payment-border, var(--bs-border-color, #e1e5e9));
    border-radius: var(--ka-checkout-payment-radius, var(--bs-border-radius-sm, 4px));
    margin-bottom: 0.5rem;
    background: var(--ka-checkout-payment-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
}

.ka-checkout-content .woocommerce-checkout-payment .payment_methods li:last-child {
    margin-bottom: 0;
}

/* Responsywność */
@media (max-width: 768px) {
    .ka-checkout-container {
        padding: 0 10px;
    }
    
    .ka-checkout-title {
        font-size: 2em;
    }
    
    .ka-checkout-content .woocommerce-checkout {
        flex-direction: column;
    }
    
    .ka-checkout-content .woocommerce-billing-fields,
    .ka-checkout-content .woocommerce-shipping-fields,
    .ka-checkout-content .woocommerce-additional-fields,
    .ka-checkout-content .woocommerce-checkout-review-order {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .ka-checkout-title {
        font-size: 1.5em;
    }
    
    .ka-checkout-content .woocommerce-billing-fields,
    .ka-checkout-content .woocommerce-shipping-fields,
    .ka-checkout-content .woocommerce-additional-fields,
    .ka-checkout-content .woocommerce-checkout-review-order {
        padding: 1rem;
    }
    
    .ka-checkout-content .woocommerce-checkout-payment .button,
    .ka-checkout-form button[type="submit"],
    .woocommerce-checkout-payment .button {
        width: 100%;
        padding: 12px 20px;
        font-size: 1.1em;
    }
}

/* Style dla kuponów */
.ka-coupon-form {
    margin: 1rem 0;
    padding: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-coupon-form-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-radius: var(--ka-coupon-form-radius, var(--bs-border-radius-sm, 4px));
}

.ka-coupon-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ka-coupon-input input {
    flex: 1;
    padding: 0.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border: 1px solid var(--ka-checkout-input-border, var(--bs-border-color, #ddd));
    border-radius: var(--ka-checkout-input-radius, var(--bs-border-radius-sm, 4px));
}

.ka-apply-coupon-btn {
    padding: 0.5rem 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-bg, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    color: var(--ka-checkout-button-color, var(--bs-white, #fff));
    border: none;
    border-radius: var(--ka-checkout-button-radius, var(--bs-border-radius-sm, 4px));
    cursor: pointer;
    font-size: inherit;
}

.ka-apply-coupon-btn:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-hover-bg, var(--bs-primary-hover, var(--bs-dark, #1a5a8a)));
}

.ka-apply-coupon-btn:disabled {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-button-disabled-bg, var(--bs-secondary, #ccc));
    cursor: not-allowed;
}

.ka-coupon-messages {
    margin-top: 0.5rem;
}

.ka-coupon-message {
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.ka-coupon-message--success {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-success-bg, var(--bs-success-bg-subtle, #d4edda));
    color: var(--ka-success-color, var(--bs-success-text, #155724));
    border: 1px solid var(--ka-success-border, var(--bs-success-border-subtle, #c3e6cb));
}

.ka-coupon-message--error {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-error-bg, var(--bs-danger-bg-subtle, #f8d7da));
    color: var(--ka-error-color, var(--bs-danger-text, #721c24));
    border: 1px solid var(--ka-error-border, var(--bs-danger-border-subtle, #f5c6cb));
}

.ka-remove-coupon-btn {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-remove-btn-bg, var(--bs-danger, #dc3545));
    color: var(--ka-remove-btn-color, var(--bs-white, #fff));
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ka-remove-btn-radius, var(--bs-border-radius-sm, 3px));
    font-size: inherit;
    cursor: pointer;
    margin-left: 0.5rem;
}

.ka-remove-coupon-btn:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-remove-btn-hover-bg, var(--bs-danger-hover, var(--bs-dark, #c82333)));
}

.ka-applied-coupons {
    margin-top: 1rem;
    padding: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-applied-coupons-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fff)));
    border-radius: var(--ka-applied-coupons-radius, var(--bs-border-radius-sm, 4px));
    border: 1px solid var(--ka-applied-coupons-border, var(--bs-border-color, #e1e5e9));
}

.ka-applied-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-applied-coupon-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border-radius: var(--ka-applied-coupon-radius, var(--bs-border-radius-sm, 3px));
}

.ka-applied-coupon:last-child {
    margin-bottom: 0;
}

.ka-coupon-discounts {
    margin-top: 1rem;
    padding: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-coupon-discounts-bg, var(--bs-success-bg-subtle, #d4edda));
    border-radius: var(--ka-coupon-discounts-radius, var(--bs-border-radius-sm, 4px));
    border: 1px solid var(--ka-coupon-discounts-border, var(--bs-success-border-subtle, #c3e6cb));
}

.ka-coupon-discount {
    padding: 0.25rem 0;
    font-weight: inherit;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-coupon-discount-color, var(--bs-success-text, #155724));
}



/* Dodatkowe style dla kompatybilności z motywem */
.ka-checkout-form {
    max-width: 100%;
    margin: 0;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-form-bg, var(--bs-body-bg, var(--wp--preset--color--background, #fafbfc)));
    padding: 2rem;
    border-radius: var(--ka-checkout-form-radius, var(--bs-border-radius, 0.375rem));
}



.ka-checkout-section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border-bottom: 1px solid var(--ka-checkout-section-border, var(--bs-border-color, #e1e5e9));
}

.ka-checkout-section:last-child {
    border-bottom: none;
}

.ka-checkout-fields input,
.ka-checkout-fields textarea,
.ka-checkout-fields select {
    width: 100%;
}

.ka-checkout-summary {
    width: 100%;
}

.ka-checkout-fields { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
}

.ka-checkout-fields > div { 
    display: flex; 
    flex-direction: column; 
}

.ka-checkout-fields textarea { 
    min-height: 60px; 
}

.ka-checkout-summary th, 
.ka-checkout-summary td { 
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border: 1px solid var(--ka-checkout-summary-border, var(--bs-border-color, #e1e5e9)); 
    padding: 8px; 
    text-align: left; 
}

.ka-checkout-summary th { 
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-summary-th-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa))); 
}

.ka-checkout-payments { 
    margin: 1rem 0; 
}

.ka-checkout-payments label {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    border: 1px solid var(--ka-checkout-payment-border, var(--bs-border-color, #e1e5e9));
    border-radius: var(--ka-checkout-payment-radius, var(--bs-border-radius-sm, 4px));
    cursor: pointer;
}

.ka-checkout-payments label:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-payment-hover-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
}

.ka-checkout-payments input[type="radio"] {
    margin-right: 0.5rem;
}

.ka-checkout-success { 
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-success-bg, var(--bs-success-bg-subtle, #e6ffe6)); 
    border: 1px solid var(--ka-checkout-success-border, var(--bs-success-border-subtle, #b2ffb2)); 
    padding: 2rem; 
    border-radius: var(--ka-checkout-success-radius, var(--bs-border-radius, 0.375rem)); 
    max-width: 100%; 
    margin: 0; 
}

.ka-checkout-title-align--left { text-align: left !important; }
.ka-checkout-title-align--center { text-align: center !important; }
.ka-checkout-title-align--right { text-align: right !important; }

.ka-order-details {
    margin-top: 1rem;
}

.ka-checkout-actions {
    margin-top: 2rem;
    text-align: center;
}

.ka-checkout-actions .button {
    margin: 0 0.5rem;
    padding: 0.75rem 1.5rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-bg, var(--bs-primary, var(--wp--preset--color--primary, #2271b1)));
    color: var(--ka-checkout-button-color, var(--bs-white, #fff));
    text-decoration: none;
    border-radius: var(--ka-checkout-button-radius, var(--bs-border-radius-sm, 4px));
    display: inline-block;
}

.ka-checkout-actions .button:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-checkout-button-hover-bg, var(--bs-primary-hover, var(--bs-dark, #1a5a8a)));
    color: var(--ka-checkout-button-hover-color, var(--bs-white, #fff));
}