/* Modal aditional css */
.cod_scroll_hidden{
    overflow: hidden;
}
.is-invalid {
    border-color: red;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

.invalid-feedback {
    display: none;
    color: red;
    font-size: 0.875em;
}

/* Apply animations to button classes */
.shake {
    animation: codshake 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

.bounce {
    animation: codbounce 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

.pulse {
    animation: codpulse 3s infinite !important; /* Repetir cada 4 segundos y ser infinita */
}

/* Define button animations */
@keyframes codshake {
    0% { transform: rotate(0); }
    2% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    4% { transform: translateY(2px) rotate(2deg); transform-origin: center;}
    6% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    8% { transform: translateY(2px) rotate(2deg); transform-origin: center;}
    10% { transform: translateY(-2px) rotate(-2deg); transform-origin: center;}
    12% { transform: rotate(0); transform-origin: center;}
}

@keyframes codbounce {
    0%  { transform: translateY(0); }
    5% { transform: translateY(-8px); }
    10%  { transform: translateY(0); }
    15% { transform: translateY(-8px); }
    20%  { transform: translateY(0); }
}

@keyframes codpulse {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}



#checkout_form{direction:rtl}.cod_table.subtotal-total{background:#f4f4f4;border-radius:12px;padding:10px;margin-bottom:15px}.subtotal-total .cod_td{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ddd;font-size:22px;font-weight:700}.subtotal-total .cod_td:last-child{border-bottom:0}.subtotal-total .total{font-size:28px}.form-group{position:relative;margin-bottom:14px}.form-group label{display:none!important}.form-control{height:58px;border:1px solid #d8d8d8;border-radius:8px;padding:0 18px;font-size:18px;background:#fff}.cod-modal-button{width:100%;height:60px;border-radius:40px!important;background:#002d6b!important;color:#fff!important;font-size:28px!important;font-weight:700;border:none!important}.form-group:after{position:absolute;left:16px;top:18px;font-size:20px;color:#111}.form-group:has(#first_name):after{content:"👤"}.form-group:has(#phone):after{content:"📞"}.form-group:has(#address):after,.form-group:has(#city):after{content:"📍"}


/* FIXED RTL MOBILE FORM UI */
#checkout_form .form-group{position:relative!important;margin-bottom:14px!important;}
#checkout_form .form-control{width:100%!important;height:56px!important;border:1px solid #d9d9d9!important;border-radius:6px!important;padding:0 55px 0 15px!important;font-size:18px!important;text-align:right!important;box-sizing:border-box!important;background:#fff!important;}
#checkout_form .form-group::after{position:absolute!important;right:18px!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;font-size:18px!important;line-height:1!important;}
#checkout_form .form-group:has(#first_name)::after{content:"👤"!important;}
#checkout_form .form-group:has(#phone)::after{content:"📞"!important;}
#checkout_form .form-group:has(#address)::after,#checkout_form .form-group:has(#city)::after{content:"📍"!important;}