/**
 * تنسيقات فلتر نوع الوقود والألوان
 * تصميم حديث وجذاب لعرض أنواع الوقود بالأيقونات والألوان بشكل مرئي
 */

/* ==================== فلتر نوع الوقود ==================== */

/* بطاقة نوع الوقود */
.fuel-type-card {
    display: block;
    position: relative;
}

/* إطار نوع الوقود */
.fuel-type-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85px;
    padding: 0.75rem 0.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* تأثيرات التمرير */
.fuel-type-card:hover .fuel-type-wrapper {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

/* الحالة المحددة */
.fuel-type-wrapper.fuel-type-selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* الأيقونة */
.fuel-type-icon {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.fuel-type-card:hover .fuel-type-icon {
    transform: scale(1.1);
}

.fuel-type-selected .fuel-type-icon {
    transform: scale(1.15);
}

/* اسم النوع */
.fuel-type-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
}

.fuel-type-selected .fuel-type-name {
    color: #1e40af;
}

/* شارة صديق للبيئة */
.fuel-eco-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    z-index: 10;
    animation: eco-pulse 2s ease-in-out infinite;
}

@keyframes eco-pulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.6);
    }
}

/* علامة الاختيار */
.fuel-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    z-index: 10;
}

.fuel-checkmark-visible {
    opacity: 1;
    transform: scale(1);
}

/* تأثير النبض للعنصر المحدد */
@keyframes fuel-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

.fuel-type-selected {
    animation: fuel-pulse 2s ease-in-out infinite;
}

/* تحسين التركيز */
.fuel-radio:focus + .fuel-type-wrapper {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* تأثير الضغط */
.fuel-type-card:active .fuel-type-wrapper {
    transform: scale(0.98);
}


/* ==================== فلتر الألوان ==================== */

/* بطاقة اللون */
.color-card {
    display: block;
    position: relative;
}

/* إطار اللون */
.color-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* تأثيرات التمرير */
.color-card:hover .color-wrapper {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

/* الحالة المحددة */
.color-wrapper.color-selected {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* دائرة اللون */
.color-circle {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-card:hover .color-circle {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.color-selected .color-circle {
    transform: scale(1.15);
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.2);
}

/* اللون المعدني */
.color-circle.color-metallic {
    background-image: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.3) 0%, 
            transparent 50%, 
            rgba(0, 0, 0, 0.1) 100%
        );
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* اسم اللون */
.color-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-selected .color-name {
    color: #1e40af;
}

/* علامة الاختيار */
.color-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-checkmark-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.color-checkmark svg {
    color: #10b981;
}

/* شارة معدني */
.color-metallic-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
    z-index: 5;
}

/* تأثير النبض للعنصر المحدد */
@keyframes color-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

.color-selected {
    animation: color-pulse 2s ease-in-out infinite;
}

/* تحسين التركيز */
.color-radio:focus + .color-wrapper {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* تأثير الضغط */
.color-card:active .color-wrapper {
    transform: scale(0.98);
}


/* ==================== الاستجابة للشاشات ==================== */

/* Mobile */
@media (max-width: 640px) {
    .fuel-type-wrapper {
        min-height: 80px;
        padding: 0.625rem 0.375rem;
    }
    
    .fuel-type-icon {
        height: 28px;
    }
    
    .fuel-type-name {
        font-size: 0.65rem;
    }
    
    .color-circle {
        width: 32px;
        height: 32px;
    }
    
    .color-name {
        font-size: 0.6rem;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1023px) {
    .fuel-type-wrapper {
        min-height: 85px;
    }
    
    .color-circle {
        width: 34px;
        height: 34px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .fuel-type-wrapper {
        min-height: 90px;
    }
    
    .fuel-type-icon {
        height: 36px;
    }
    
    .color-circle {
        width: 38px;
        height: 38px;
    }
}



/* ==================== تحسينات إضافية ==================== */

/* حالة التحميل */
.fuel-type-wrapper.loading,
.color-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* حالة التعطيل */
.fuel-type-card.disabled,
.color-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* تحسين الطباعة */
@media print {
    .fuel-type-wrapper,
    .color-wrapper {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    .fuel-checkmark,
    .color-checkmark {
        display: none;
    }
}