/* Persian Date Input Styling */

.persian-date-formatted {
    direction: ltr;
    text-align: left;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.persian-date-formatted:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

.persian-date-formatted.is-valid {
    border-color: #48bb78 !important;
    background-image: url("/static/check-green.png") !important; /* مسیر برای تیک سبز */
    background-repeat: no-repeat !important;
    background-position: right 0.375rem center !important;
    background-size: 16px 16px !important; /* اندازه آیکون */
    padding-right: 2rem !important;
}

.persian-date-formatted.is-invalid {
    border-color: #f56565 !important;
    background-image: url("/static/error-red.png") !important; /* مسیر برای ضربدر قرمز (جدید) */
    background-repeat: no-repeat !important;
    background-position: right 0.375rem center !important;
    background-size: 16px 16px !important; /* اندازه آیکون */
    padding-right: 2rem !important;
}

.invalid-feedback.persian-date-error {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #f56565;
    font-weight: 500;
}

/* Date input helper text */
.persian-date-helper {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}

/* Animation for successful validation */
@keyframes dateSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.persian-date-formatted.is-valid {
    animation: dateSuccess 0.3s ease-in-out;
}

/* Placeholder styling for better UX */
.persian-date-formatted::placeholder {
    color: #9ca3af;
    font-style: italic;
    font-weight: normal;
}

/* RTL specific adjustments */
[dir="rtl"] .persian-date-formatted {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .persian-date-formatted.is-valid,
[dir="rtl"] .persian-date-formatted.is-invalid {
    background-position: left 0.375rem center !important;
    padding-left: 2rem !important;
    padding-right: 0.75rem !important;
}

/* Form group styling */
.form-group .persian-date-formatted {
    position: relative;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .persian-date-formatted {
        font-size: 16px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .persian-date-formatted {
        background-color: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .persian-date-formatted::placeholder {
        color: #9ca3af;
    }
    
    .invalid-feedback.persian-date-error {
        color: #fca5a5;
    }
}