/**
 * تنسيقات CSS للقيم الافتراضية في WooCommerce Checkout Field Editor Pro
 * 
 * @package woocommerce-checkout-field-editor-pro
 * @version 1.0.0
 */

/* تنسيق الحقول التي تحتوي على قيم افتراضية */
.woocommerce-checkout [data-default-value],
.woocommerce-checkout [data-dynamic-default] {
    position: relative;
}

/* إضافة أيقونة صغيرة للحقول التي تحتوي على قيم افتراضية */
.woocommerce-checkout [data-default-value]:not([data-default-value=""]):before,
.woocommerce-checkout [data-dynamic-default]:not([data-dynamic-default=""]):before {
    content: "⚡";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #0073aa;
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
    opacity: 0.7;
}

/* إخفاء الأيقونة عندما يكون الحقل مملوءاً */
.woocommerce-checkout [data-default-value]:not(:placeholder-shown):before,
.woocommerce-checkout [data-dynamic-default]:not(:placeholder-shown):before {
    display: none;
}

/* تنسيق خاص للحقول المختارة (select) */
.woocommerce-checkout select[data-default-value]:before,
.woocommerce-checkout select[data-dynamic-default]:before {
    right: 30px;
}

/* تنسيق خاص للحقول النصية الطويلة (textarea) */
.woocommerce-checkout textarea[data-default-value]:before,
.woocommerce-checkout textarea[data-dynamic-default]:before {
    top: 15px;
    transform: none;
}

/* تنسيق للحقول المطلوبة مع قيم افتراضية */
.woocommerce-checkout .required [data-default-value]:before,
.woocommerce-checkout .required [data-dynamic-default]:before {
    color: #d63638;
}

/* تأثير عند التركيز على الحقل */
.woocommerce-checkout [data-default-value]:focus,
.woocommerce-checkout [data-dynamic-default]:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* تنسيق للحقول التي تم ملؤها بقيم افتراضية */
.woocommerce-checkout [data-default-value].thwcfe-filled-default,
.woocommerce-checkout [data-dynamic-default].thwcfe-filled-default {
    background-color: #f0f8ff;
    border-left: 3px solid #0073aa;
}

/* تنسيق للحقول الديناميكية */
.woocommerce-checkout [data-dynamic-default] {
    background-image: linear-gradient(45deg, transparent 40%, rgba(0, 115, 170, 0.1) 50%, transparent 60%);
    background-size: 20px 20px;
    animation: thwcfe-dynamic-bg 3s linear infinite;
}

@keyframes thwcfe-dynamic-bg {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}

/* إيقاف الحركة عند التركيز */
.woocommerce-checkout [data-dynamic-default]:focus {
    animation: none;
    background-image: none;
}

/* تنسيق للحقول المخفية */
.woocommerce-checkout input[type="hidden"][data-default-value],
.woocommerce-checkout input[type="hidden"][data-dynamic-default] {
    display: none;
}

/* تنسيق للحقول من نوع checkbox و radio */
.woocommerce-checkout input[type="checkbox"][data-default-value],
.woocommerce-checkout input[type="radio"][data-default-value] {
    position: relative;
}

.woocommerce-checkout input[type="checkbox"][data-default-value]:before,
.woocommerce-checkout input[type="radio"][data-default-value]:before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: #0073aa;
    border-radius: 50%;
    opacity: 0.7;
}

/* تنسيق للحقول المعطلة */
.woocommerce-checkout [data-default-value]:disabled,
.woocommerce-checkout [data-dynamic-default]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* تنسيق للرسائل التوضيحية */
.thwcfe-default-value-info {
    font-size: 11px;
    color: #666;
    font-style: italic;
    margin-top: 3px;
    display: block;
}

.thwcfe-default-value-info:before {
    content: "💡 ";
    margin-right: 3px;
}

/* تنسيق للأجهزة المحمولة */
@media (max-width: 768px) {
    .woocommerce-checkout [data-default-value]:before,
    .woocommerce-checkout [data-dynamic-default]:before {
        font-size: 10px;
        right: 8px;
    }
    
    .woocommerce-checkout select[data-default-value]:before,
    .woocommerce-checkout select[data-dynamic-default]:before {
        right: 25px;
    }
}

/* تنسيق للطباعة */
@media print {
    .woocommerce-checkout [data-default-value]:before,
    .woocommerce-checkout [data-dynamic-default]:before {
        display: none;
    }
    
    .woocommerce-checkout [data-default-value],
    .woocommerce-checkout [data-dynamic-default] {
        background: none !important;
        border: 1px solid #000 !important;
        animation: none !important;
    }
}

/* تنسيق للوضع المظلم */
@media (prefers-color-scheme: dark) {
    .woocommerce-checkout [data-default-value].thwcfe-filled-default,
    .woocommerce-checkout [data-dynamic-default].thwcfe-filled-default {
        background-color: #1a1a2e;
        border-left-color: #4a9eff;
    }
    
    .woocommerce-checkout [data-default-value]:before,
    .woocommerce-checkout [data-dynamic-default]:before {
        color: #4a9eff;
    }
    
    .thwcfe-default-value-info {
        color: #ccc;
    }
}

/* تنسيق للحقول ذات الأولوية العالية */
.woocommerce-checkout .thwcfe-high-priority [data-default-value],
.woocommerce-checkout .thwcfe-high-priority [data-dynamic-default] {
    border: 2px solid #0073aa;
    background-color: #f8f9fa;
}

/* تأثيرات الحركة */
.woocommerce-checkout [data-default-value],
.woocommerce-checkout [data-dynamic-default] {
    transition: all 0.3s ease;
}

.woocommerce-checkout [data-default-value]:hover,
.woocommerce-checkout [data-dynamic-default]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 115, 170, 0.2);
}