/* paymob-custom.css - PayMob specific styles */

/* SaveCard checkbox styling */
input[type="checkbox"].paymob-savecard-checkbox,
[data-paymob-field="saveCard"],
.paymob-savecard,
.paymob-save-card-checkbox,
.paymob-checkbox,
[data-paymob="saveCard"],
#paymob-payment-container input[type="checkbox"],
#paymob-elements input[type="checkbox"],
.paymob-form input[type="checkbox"] {
    accent-color: #8452df !important;
}

input[type="checkbox"].paymob-savecard-checkbox:checked,
[data-paymob-field="saveCard"]:checked,
.paymob-savecard:checked,
.paymob-save-card-checkbox:checked,
.paymob-checkbox:checked,
[data-paymob="saveCard"]:checked,
#paymob-payment-container input[type="checkbox"]:checked,
#paymob-elements input[type="checkbox"]:checked,
.paymob-form input[type="checkbox"]:checked {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-color: #8452df !important;
    background-size: 80% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-color: #8452df !important;
    position: relative !important;
}

/* Use accent-color as fallback */
.paymob-form input[type="checkbox"] {
    accent-color: #8452df !important;
}