/**
 * Jalali Date Picker - Frontend Styles
 *
 * CSS styles for Jalali date picker in frontend forms.
 */

/* Common date picker styles */
input[data-jdp] {
    direction: rtl;
    text-align: center;
}

/* Style for date fields created by our plugin */
.jdp-date-field {
    direction: rtl;
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    max-width: 200px;
}

/* RTL support */
.rtl input[data-jdp],
.rtl .jdp-date-field {
    direction: rtl;
    text-align: center;
}

/* WooCommerce form fields */
.woocommerce form .form-row input[data-jdp],
.woocommerce-page form .form-row input[data-jdp],
.woocommerce form .form-row .jdp-date-field,
.woocommerce-page form .form-row .jdp-date-field {
    padding: 10px;
    width: 100%;
    line-height: 1.5;
}

/* Custom styling for JalaliDatePicker elements */
.jdp-container {
    z-index: 100000; /* Make sure it appears above theme elements */
}

/* Adjust date picker position */
.jdp-container.jdp-container--fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Responsive styles */
@media (max-width: 480px) {
    .jdp-date-field {
        width: 100%;
        max-width: 100%;
    }
}