/* Sahhelha Animated Icons v1.0 */

/* === Hero Badge Animation === */
.sahhelha-hero .hero-badge {
    animation: badgePulse 3s ease-in-out infinite;
}
.sahhelha-hero .hero-badge i {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    animation: iconSpin 8s linear infinite;
}

/* === Feature Cards / Service Cards === */
.feature-card .feature-icon,
.related-card i,
.country-link i {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon,
.related-card:hover i {
    transform: scale(1.15);
}

/* === Category Color Mapping === */

/* صيانة منزلية - Home Maintenance - Teal */
.fa-wrench, .fa-bolt, .fa-snowflake, .fa-hammer, .fa-paint-roller,
.fa-border-all, .fa-window-maximize, .fa-layer-group, .fa-shield-halved,
.fa-fire, .fa-screwdriver-wrench, .fa-house-crack, .fa-toolbox,
.fa-faucet-drip, .fa-kitchen-set, .fa-door-open, .fa-filter,
.fa-house-circle-check, .fa-helmet-safety, .fa-square,
.fa-paintbrush, .fa-ruler-combined {
    background: linear-gradient(135deg, #E1F5EE, #9FE1CB) !important;
    color: #0F6E56 !important;
    -webkit-background-clip: unset !important;
    border-radius: 50%;
    animation: iconFloat 3s ease-in-out infinite;
}

/* تنظيف - Cleaning - Blue */
.fa-broom, .fa-couch, .fa-droplet, .fa-building,
.fa-soap, .fa-spray-can-sparkles, .fa-rug,
.fa-clock, .fa-house-user, .fa-wind {
    background: linear-gradient(135deg, #E6F1FB, #B5D4F4) !important;
    color: #185FA5 !important;
    border-radius: 50%;
    animation: iconWipe 2s ease-in-out infinite;
}

/* مكافحة حشرات - Pest Control - Red */
.fa-bug, .fa-shield-virus {
    background: linear-gradient(135deg, #FCEBEB, #F7C1C1) !important;
    color: #A32D2D !important;
    border-radius: 50%;
    animation: iconShake 1.5s ease-in-out infinite;
}

/* نقل - Moving - Amber */
.fa-truck, .fa-warehouse, .fa-plane {
    background: linear-gradient(135deg, #FAEEDA, #FAC775) !important;
    color: #854F0B !important;
    border-radius: 50%;
    animation: iconSlide 2s ease-in-out infinite;
}

/* أجهزة - Appliance Repair - Purple */
.fa-temperature-low, .fa-fire-burner, .fa-plate-wheat,
.fa-temperature-high, .fa-tv, .fa-fan,
.fa-temperature-arrow-down {
    background: linear-gradient(135deg, #EEEDFE, #CECBF6) !important;
    color: #534AB7 !important;
    border-radius: 50%;
    animation: iconPulse 2s ease-in-out infinite;
}

/* تقنية - Tech - Gray/Dark */
.fa-video, .fa-camera, .fa-wifi, .fa-house-signal,
.fa-satellite-dish, .fa-lock, .fa-phone-volume,
.fa-bell, .fa-bars-staggered, .fa-elevator,
.fa-solar-panel, .fa-mobile-screen {
    background: linear-gradient(135deg, #F1EFE8, #D3D1C7) !important;
    color: #444441 !important;
    border-radius: 50%;
    animation: iconBlink 3s ease-in-out infinite;
}

/* حدائق - Garden/Outdoor - Green */
.fa-leaf, .fa-water-ladder, .fa-seedling,
.fa-tractor, .fa-water, .fa-dove, .fa-umbrella-beach,
.fa-person-swimming {
    background: linear-gradient(135deg, #EAF3DE, #C0DD97) !important;
    color: #3B6D11 !important;
    border-radius: 50%;
    animation: iconSway 2.5s ease-in-out infinite;
}

/* صحة - Health - Pink */
.fa-user-nurse, .fa-heart-pulse, .fa-user-doctor,
.fa-x-ray, .fa-flask, .fa-pills {
    background: linear-gradient(135deg, #FBEAF0, #F4C0D1) !important;
    color: #993556 !important;
    border-radius: 50%;
    animation: iconHeartbeat 1.5s ease-in-out infinite;
}

/* تجميل - Beauty - Pink/Coral */
.fa-scissors, .fa-spa, .fa-face-kiss-wink-heart {
    background: linear-gradient(135deg, #FAECE7, #F5C4B3) !important;
    color: #993C1D !important;
    border-radius: 50%;
    animation: iconSnip 1.5s ease-in-out infinite;
}

/* سيارات - Automotive - Amber */
.fa-car, .fa-car-battery, .fa-motorcycle {
    background: linear-gradient(135deg, #FAEEDA, #FAC775) !important;
    color: #854F0B !important;
    border-radius: 50%;
    animation: iconDrive 2s ease-in-out infinite;
}

/* بناء وتشطيب - Construction - Coral */
.fa-house-circle-xmark, .fa-industry,
.fa-building-user, .fa-shop, .fa-store, .fa-dungeon {
    background: linear-gradient(135deg, #FAECE7, #F5C4B3) !important;
    color: #993C1D !important;
    border-radius: 50%;
    animation: iconBuild 2s ease-in-out infinite;
}

/* بيع وشراء - Buy/Sell - Amber */
.fa-chair, .fa-recycle, .fa-table-cells, .fa-circle {
    background: linear-gradient(135deg, #FAEEDA, #FAC775) !important;
    color: #854F0B !important;
    border-radius: 50%;
    animation: iconBounce 2s ease-in-out infinite;
}

/* عقارات - Real Estate - Blue */
.fa-house-circle-check {
    background: linear-gradient(135deg, #E6F1FB, #B5D4F4) !important;
    color: #185FA5 !important;
    border-radius: 50%;
    animation: iconFloat 3s ease-in-out infinite;
}

/* مهني - Professional - Purple */
.fa-scale-balanced, .fa-shield {
    background: linear-gradient(135deg, #EEEDFE, #CECBF6) !important;
    color: #534AB7 !important;
    border-radius: 50%;
    animation: iconPulse 2.5s ease-in-out infinite;
}

/* مطاعم - Food - Coral */
.fa-bread-slice, .fa-drumstick-bite, .fa-mug-hot {
    background: linear-gradient(135deg, #FAECE7, #F5C4B3) !important;
    color: #993C1D !important;
    border-radius: 50%;
    animation: iconFloat 2s ease-in-out infinite;
}

/* الموقع - Location Pin */
.fa-location-dot {
    background: linear-gradient(135deg, #E1F5EE, #9FE1CB) !important;
    color: #0F6E56 !important;
    border-radius: 50%;
    animation: iconBounce 2s ease-in-out infinite;
}

/* الكرة الأرضية - Globe */
.fa-globe {
    background: linear-gradient(135deg, #E6F1FB, #B5D4F4) !important;
    color: #185FA5 !important;
    border-radius: 50%;
    animation: iconSpin 8s linear infinite;
}

/* === ANIMATIONS === */

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes iconWipe {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(3px) rotate(5deg); }
    75% { transform: translateX(-3px) rotate(-5deg); }
}

@keyframes iconShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-2px); }
    20% { transform: translateX(2px); }
    30% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    50%, 100% { transform: translateX(0); }
}

@keyframes iconSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes iconBlink {
    0%, 40%, 100% { opacity: 1; }
    20% { opacity: 0.5; }
}

@keyframes iconSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes iconHeartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70%, 100% { transform: scale(1); }
}

@keyframes iconSnip {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.85); }
}

@keyframes iconDrive {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(3px) rotate(1deg); }
    75% { transform: translateX(-1px) rotate(-1deg); }
}

@keyframes iconBuild {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-3px); }
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.2); }
    50% { box-shadow: 0 0 0 12px rgba(8, 145, 178, 0); }
}

/* === Feature Card Enhancements === */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* === Related Card Enhancements === */
.related-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* === City Link Enhancements === */
.city-link {
    transition: transform 0.2s ease, background 0.2s ease;
}
.city-link:hover {
    transform: scale(1.03);
}

/* === Country Link Enhancements === */
.country-link {
    transition: transform 0.2s ease;
}
.country-link:hover {
    transform: translateY(-2px);
}

/* === Steps Enhancement === */
.step {
    transition: transform 0.3s ease;
}
.step:hover {
    transform: scale(1.05);
}
.step-number {
    animation: iconPulse 3s ease-in-out infinite;
}

/* === FAQ Enhancement === */
.faq-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
    transform: translateX(-4px);
    box-shadow: 4px 0 0 #0891B2;
}