/**
 * تنسيقات فلاتر المواصفات التقنية
 * سعات المحرك | أنواع الدفع | المواصفات الإقليمية
 * تصميم حديث وجذاب متناسق مع بقية الفلاتر
 */

/* ==================== فلتر سعات المحرك ==================== */

/* بطاقة سعة المحرك */
.engine-capacity-card {
    display: block;
    position: relative;
}

/* إطار سعة المحرك */
.engine-capacity-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 0.625rem 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;
}

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

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

/* القيمة الرقمية */
.engine-capacity-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.engine-selected .engine-capacity-value {
    color: #1e40af;
}

/* الوحدة */
.engine-capacity-unit {
    font-size: 0.625rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
}

.engine-selected .engine-capacity-unit {
    color: #3b82f6;
}

/* علامة الاختيار */
.engine-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    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;
}

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

/* تأثير النبض */
@keyframes engine-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);
    }
}

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

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


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

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

/* إطار نوع الدفع */
.drive-type-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 0.625rem 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;
}

/* تأثيرات التمرير */
.drive-type-card:hover .drive-type-wrapper {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

/* الحالة المحددة */
.drive-type-wrapper.drive-selected {
    border-color: #10b981;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* الاختصار */
.drive-type-abbr {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.drive-selected .drive-type-abbr {
    color: #047857;
}

/* الاسم الكامل */
.drive-type-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

.drive-selected .drive-type-name {
    color: #059669;
}

/* علامة الاختيار */
.drive-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #10b981;
    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(16, 185, 129, 0.4);
    z-index: 10;
}

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

/* تأثير النبض */
@keyframes drive-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

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

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


/* ==================== فلتر المواصفات الإقليمية ==================== */

/* بطاقة المواصفة الإقليمية */
.regional-spec-card {
    display: block;
    position: relative;
}

/* إطار المواصفة الإقليمية */
.regional-spec-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    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;
}

/* تأثيرات التمرير */
.regional-spec-card:hover .regional-spec-wrapper {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    transform: translateY(-2px);
}

/* الحالة المحددة */
.regional-spec-wrapper.regional-selected {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

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

.regional-spec-card:hover .regional-spec-icon {
    transform: scale(1.1);
}

.regional-selected .regional-spec-icon {
    transform: scale(1.15);
}

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

.regional-selected .regional-spec-name {
    color: #92400e;
}

/* علامة الاختيار */
.regional-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #f59e0b;
    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(245, 158, 11, 0.4);
    z-index: 10;
}

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

/* تأثير النبض */
@keyframes regional-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

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

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


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

/* Mobile */
@media (max-width: 640px) {
    .engine-capacity-wrapper {
        min-height: 65px;
        padding: 0.5rem 0.375rem;
    }
    
    .engine-capacity-value {
        font-size: 1.125rem;
    }
    
    .drive-type-wrapper {
        min-height: 70px;
    }
    
    .drive-type-abbr {
        font-size: 1rem;
    }
    
    .regional-spec-wrapper {
        min-height: 75px;
    }
    
    .regional-spec-icon {
        height: 24px;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1023px) {
    .engine-capacity-wrapper {
        min-height: 70px;
    }
    
    .drive-type-wrapper {
        min-height: 75px;
    }
    
    .regional-spec-wrapper {
        min-height: 80px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .engine-capacity-wrapper {
        min-height: 75px;
    }
    
    .drive-type-wrapper {
        min-height: 80px;
    }
    
    .regional-spec-wrapper {
        min-height: 85px;
    }
    
    .regional-spec-icon {
        height: 32px;
    }
}



/* ==================== فلتر ميزات الأمان ==================== */

/* بطاقة ميزة الأمان */
.safety-feature-card {
    display: block;
    position: relative;
}

/* إطار ميزة الأمان */
.safety-feature-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 0.625rem 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;
}

/* تأثيرات التمرير */
.safety-feature-card:hover .safety-feature-wrapper {
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
    transform: translateY(-2px);
}

/* الحالة المحددة */
.safety-feature-wrapper.safety-selected {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

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

.safety-feature-card:hover .safety-feature-icon {
    transform: scale(1.1);
}

.safety-selected .safety-feature-icon {
    transform: scale(1.15);
}

/* الاسم */
.safety-feature-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
}

.safety-selected .safety-feature-name {
    color: #991b1b;
}

/* شارة قياسي */
.safety-standard-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
}

/* علامة الاختيار */
.safety-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #dc2626;
    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(220, 38, 38, 0.4);
    z-index: 10;
}

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

/* تأثير النبض */
@keyframes safety-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    }
}

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

/* تحسين التركيز */
.safety-checkbox:focus + .safety-feature-wrapper {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}


/* ==================== فلتر التقنيات ==================== */

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

/* إطار التقنية */
.technology-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 0.625rem 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;
}

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

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

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

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

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

/* الاسم */
.technology-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
}

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

/* شارة premium */
.technology-premium-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    background: #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
}

/* علامة الاختيار */
.technology-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    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;
}

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

/* تأثير النبض */
@keyframes technology-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);
    }
}

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

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


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

/* تأثير الضغط */
.engine-capacity-card:active .engine-capacity-wrapper,
.drive-type-card:active .drive-type-wrapper,
.regional-spec-card:active .regional-spec-wrapper {
    transform: scale(0.98);
}

/* حالة التحميل */
.engine-capacity-wrapper.loading,
.drive-type-wrapper.loading,
.regional-spec-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* حالة التعطيل */
.engine-capacity-card.disabled,
.drive-type-card.disabled,
.regional-spec-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

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