/**
 * Elementor Form Enhancer - Checkbox Styles
 * 
 * Styles for required checkbox validation
 */

/* Error state for checkbox groups */
.elementor-field-type-checkbox.efe-has-error {
    border-left: 3px solid #d63638;
    padding-left: 10px;
    margin-left: -13px;
}

.elementor-field-type-checkbox.efe-has-error .elementor-field-subgroup {
    animation: efe-shake 0.5s ease-in-out;
}

/* Error message styling */
.efe-error-message {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fcf0f1;
    border: 1px solid #d63638;
    border-radius: 4px;
    color: #d63638;
    font-size: 13px;
    line-height: 1.4;
}

.efe-error-message::before {
    content: "⚠ ";
}

/* Required asterisk styling */
.elementor-field-type-checkbox .elementor-mark-required {
    color: #d63638;
    font-weight: bold;
}

/* Shake animation for errors */
@keyframes efe-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Focus state for better accessibility */
.elementor-field-type-checkbox.efe-has-error input[type="checkbox"]:focus {
    outline: 2px solid #d63638;
    outline-offset: 2px;
}

/* Transition for smooth error state changes */
.elementor-field-type-checkbox {
    transition: border-color 0.3s ease, padding-left 0.3s ease, margin-left 0.3s ease;
}

/* Hide error message initially */
.efe-error-message[style*="display: none"],
.efe-error-message:empty {
    display: none !important;
}

/* Ensure error message is visible when shown */
.efe-has-error .efe-error-message {
    display: block !important;
}

select.numInput.flatpickr-minute:active,
select.numInput.flatpickr-minute:focus,
select.numInput.flatpickr-minute:focus-visible,
select.numInput.flatpickr-minute {
    z-index: 1000;
    position: relative;
    border: 0;
    text-align: center;
    outline: none;
}
.flatpickr-time input.flatpickr-hour {
    background: #fff;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .efe-error-message {
        background-color: #2c1b1d;
        border-color: #d63638;
    }
}

/* RTL Support */
[dir="rtl"] .elementor-field-type-checkbox.efe-has-error {
    border-left: none;
    border-right: 3px solid #d63638;
    padding-left: 0;
    padding-right: 10px;
    margin-left: 0;
    margin-right: -13px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .efe-error-message {
        font-size: 12px;
        padding: 6px 10px;
    }
}