/**
 * Midtrans WooCommerce Blocks Checkout Styles
 *
 * Custom styles for payment method icons and layout in block checkout
 *
 * @since 2.33.0
 */

/* Payment method icons container */
.wc-midtrans-payment-icons {
    display: inline-flex !important;
    gap: 0.25em;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0.5em;
    vertical-align: middle;
}

/* Individual payment method icon */
.wc-midtrans-payment-icons img {
    max-height: 2em !important;
    max-width: 4em !important;
    height: auto !important;
    width: auto !important;
    background-color: #ffffffdd !important;
    padding: 0.2em 0.3em !important;
    border-radius: 0.3em !important;
    border: 0.5px solid #ccccccdd !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

/* Payment method label with icon */
.wc-block-components-radio-control__label {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Ensure proper spacing in payment method options */
.wc-block-components-radio-control-accordion-option {
    padding: 1em;
}

/* Payment method description styling */
.wc-block-components-radio-control-accordion-content {
    padding: 1em;
    margin-top: 0.5em;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .wc-midtrans-payment-icons img {
        max-height: 1.8em !important;
        max-width: 3.5em !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wc-midtrans-payment-icons img {
        background-color: #ffffff !important;
        border-color: #999999 !important;
    }
}