/**
 * Service Card Background Colors
 * 
 * Adds distinctive background colors to each service card for better
 * visual identification and improved user experience.
 * 
 * @package BlueMotosSouthampton
 * @since 1.4.0
 * @version 1.0.0
 */

/* =================================================================
   SERVICE CARD COLOR SCHEME
   ================================================================= */

/**
 * Color Strategy:
 * - Each service gets a unique, branded color
 * - Text is white for optimal legibility on colored backgrounds
 * - Hover states slightly darken the background
 * - Selected states add a glow effect
 * - Colors chosen to match service category themes
 * 
 * Categories:
 * - MOT/Main Services: Blue tones (existing - preserved)
 * - Air Conditioning: Green/Yellow (cooling, refreshing)
 * - Brakes: Brown tones (earthy, reliable, safe)
 * - Battery: Electric blue/cyan (electrical, power)
 * - Exhaust: Gray/charcoal (metal, exhaust)
 * - Suspension: Orange (movement, dynamic)
 * - Clutch: Purple (mechanical, premium)
 */

/* =================================================================
   AIR CONDITIONING SERVICES
   ================================================================= */

/**
 * Air Conditioning Re-gas
 * Color: Light mint green (#4ade80 - fresh, cooling)
 */
.bms-service-card-modern[data-service="air_con_regas"],
.enhanced-service-card[data-service="air_con_regas"] {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    border-color: #22c55e !important;
    color: white !important;
}

.bms-service-card-modern[data-service="air_con_regas"] *,
.enhanced-service-card[data-service="air_con_regas"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="air_con_regas"] .service-title,
.bms-service-card-modern[data-service="air_con_regas"] .service-tagline,
.bms-service-card-modern[data-service="air_con_regas"] .price-label,
.bms-service-card-modern[data-service="air_con_regas"] .price-main,
.bms-service-card-modern[data-service="air_con_regas"] .fuel-types,
.bms-service-card-modern[data-service="air_con_regas"] .detail-item,
.enhanced-service-card[data-service="air_con_regas"] .service-title,
.enhanced-service-card[data-service="air_con_regas"] .service-tagline,
.enhanced-service-card[data-service="air_con_regas"] .price-label,
.enhanced-service-card[data-service="air_con_regas"] .price-main,
.enhanced-service-card[data-service="air_con_regas"] .fuel-types,
.enhanced-service-card[data-service="air_con_regas"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.bms-service-card-modern[data-service="air_con_regas"]:hover,
.enhanced-service-card[data-service="air_con_regas"]:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-4px) !important;
}

/**
 * Air Conditioning Full Service
 * Color: Warm yellow (#fbbf24 - bright, service-oriented)
 */
.bms-service-card-modern[data-service="air_con_service"] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    border-color: #f59e0b !important;
    color: white !important;
}

.bms-service-card-modern[data-service="air_con_service"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="air_con_service"] .service-title,
.bms-service-card-modern[data-service="air_con_service"] .service-tagline,
.bms-service-card-modern[data-service="air_con_service"] .price-label,
.bms-service-card-modern[data-service="air_con_service"] .price-main,
.bms-service-card-modern[data-service="air_con_service"] .fuel-types,
.bms-service-card-modern[data-service="air_con_service"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="air_con_service"]:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   BRAKE SERVICES
   ================================================================= */

/**
 * Brake Inspection & Check
 * Color: Light brown/tan (#d97706 - safe, reliable)
 */
.bms-service-card-modern[data-service="brake_check"] {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #b45309 !important;
    color: white !important;
}

.bms-service-card-modern[data-service="brake_check"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="brake_check"] .service-title,
.bms-service-card-modern[data-service="brake_check"] .service-tagline,
.bms-service-card-modern[data-service="brake_check"] .price-label,
.bms-service-card-modern[data-service="brake_check"] .price-main,
.bms-service-card-modern[data-service="brake_check"] .fuel-types,
.bms-service-card-modern[data-service="brake_check"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="brake_check"]:hover {
    background: linear-gradient(135deg, #b45309, #92400e) !important;
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.4) !important;
    transform: translateY(-4px) !important;
}

/**
 * Brake Pad & Disc Service
 * Color: Dark brown (#78350f - strong, dependable)
 */
.bms-service-card-modern[data-service="brake_service"] {
    background: linear-gradient(135deg, #92400e, #78350f) !important;
    border-color: #78350f !important;
    color: white !important;
}

.bms-service-card-modern[data-service="brake_service"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="brake_service"] .service-title,
.bms-service-card-modern[data-service="brake_service"] .service-tagline,
.bms-service-card-modern[data-service="brake_service"] .price-label,
.bms-service-card-modern[data-service="brake_service"] .price-main,
.bms-service-card-modern[data-service="brake_service"] .fuel-types,
.bms-service-card-modern[data-service="brake_service"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bms-service-card-modern[data-service="brake_service"]:hover {
    background: linear-gradient(135deg, #78350f, #451a03) !important;
    box-shadow: 0 8px 24px rgba(120, 53, 15, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   BATTERY SERVICES
   ================================================================= */

/**
 * Battery Test & Health Check
 * Color: Electric cyan (#06b6d4 - electrical, power)
 */
.bms-service-card-modern[data-service="battery_test"] {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    border-color: #0891b2 !important;
    color: white !important;
}

.bms-service-card-modern[data-service="battery_test"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="battery_test"] .service-title,
.bms-service-card-modern[data-service="battery_test"] .service-tagline,
.bms-service-card-modern[data-service="battery_test"] .price-label,
.bms-service-card-modern[data-service="battery_test"] .price-main,
.bms-service-card-modern[data-service="battery_test"] .fuel-types,
.bms-service-card-modern[data-service="battery_test"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="battery_test"]:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4) !important;
    transform: translateY(-4px) !important;
}

/**
 * Battery Replacement Service
 * Color: Deep electric blue (#0369a1 - power, energy)
 */
.bms-service-card-modern[data-service="battery_replacement"] {
    background: linear-gradient(135deg, #0369a1, #075985) !important;
    border-color: #075985 !important;
    color: white !important;
}

.bms-service-card-modern[data-service="battery_replacement"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="battery_replacement"] .service-title,
.bms-service-card-modern[data-service="battery_replacement"] .service-tagline,
.bms-service-card-modern[data-service="battery_replacement"] .price-label,
.bms-service-card-modern[data-service="battery_replacement"] .price-main,
.bms-service-card-modern[data-service="battery_replacement"] .fuel-types,
.bms-service-card-modern[data-service="battery_replacement"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="battery_replacement"]:hover {
    background: linear-gradient(135deg, #075985, #0c4a6e) !important;
    box-shadow: 0 8px 24px rgba(3, 105, 161, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   EXHAUST SERVICES
   ================================================================= */

/**
 * Exhaust System Inspection
 * Color: Steel gray (#64748b - metallic, industrial)
 */
.bms-service-card-modern[data-service="exhaust_check"] {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-color: #475569 !important;
    color: white !important;
}

.bms-service-card-modern[data-service="exhaust_check"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="exhaust_check"] .service-title,
.bms-service-card-modern[data-service="exhaust_check"] .service-tagline,
.bms-service-card-modern[data-service="exhaust_check"] .price-label,
.bms-service-card-modern[data-service="exhaust_check"] .price-main,
.bms-service-card-modern[data-service="exhaust_check"] .fuel-types,
.bms-service-card-modern[data-service="exhaust_check"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="exhaust_check"]:hover {
    background: linear-gradient(135deg, #475569, #334155) !important;
    box-shadow: 0 8px 24px rgba(100, 116, 139, 0.4) !important;
    transform: translateY(-4px) !important;
}

/**
 * Exhaust Repair & Replacement
 * Color: Dark charcoal (#475569 - robust, industrial)
 */
.bms-service-card-modern[data-service="exhaust_repair"] {
    background: linear-gradient(135deg, #475569, #334155) !important;
    border-color: #334155 !important;
    color: white !important;
}

.bms-service-card-modern[data-service="exhaust_repair"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="exhaust_repair"] .service-title,
.bms-service-card-modern[data-service="exhaust_repair"] .service-tagline,
.bms-service-card-modern[data-service="exhaust_repair"] .price-label,
.bms-service-card-modern[data-service="exhaust_repair"] .price-main,
.bms-service-card-modern[data-service="exhaust_repair"] .fuel-types,
.bms-service-card-modern[data-service="exhaust_repair"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bms-service-card-modern[data-service="exhaust_repair"]:hover {
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    box-shadow: 0 8px 24px rgba(71, 85, 105, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   SUSPENSION SERVICES
   ================================================================= */

/**
 * Suspension & Steering Check
 * Color: Vibrant orange (#f97316 - dynamic, movement)
 */
.bms-service-card-modern[data-service="suspension_check"] {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border-color: #ea580c !important;
    color: white !important;
}

.bms-service-card-modern[data-service="suspension_check"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="suspension_check"] .service-title,
.bms-service-card-modern[data-service="suspension_check"] .service-tagline,
.bms-service-card-modern[data-service="suspension_check"] .price-label,
.bms-service-card-modern[data-service="suspension_check"] .price-main,
.bms-service-card-modern[data-service="suspension_check"] .fuel-types,
.bms-service-card-modern[data-service="suspension_check"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="suspension_check"]:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   CLUTCH SERVICES
   ================================================================= */

/**
 * Clutch Inspection & Check
 * Color: Rich purple (#a855f7 - premium, mechanical)
 */
.bms-service-card-modern[data-service="clutch_check"] {
    background: linear-gradient(135deg, #a855f7, #9333ea) !important;
    border-color: #9333ea !important;
    color: white !important;
}

.bms-service-card-modern[data-service="clutch_check"] * {
    color: white !important;
}

.bms-service-card-modern[data-service="clutch_check"] .service-title,
.bms-service-card-modern[data-service="clutch_check"] .service-tagline,
.bms-service-card-modern[data-service="clutch_check"] .price-label,
.bms-service-card-modern[data-service="clutch_check"] .price-main,
.bms-service-card-modern[data-service="clutch_check"] .fuel-types,
.bms-service-card-modern[data-service="clutch_check"] .detail-item {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bms-service-card-modern[data-service="clutch_check"]:hover {
    background: linear-gradient(135deg, #9333ea, #7e22ce) !important;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* =================================================================
   BUTTON STYLING FOR COLORED CARDS
   ================================================================= */

/**
 * Ensure buttons on colored cards remain visible and clickable
 */
.bms-service-card-modern[data-service] .btn-select-service {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
}

.bms-service-card-modern[data-service] .btn-select-service:hover {
    background: white !important;
    color: #0f172a !important;
    border-color: white !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* =================================================================
   PRE-SELECTED SERVICE CARD
   ================================================================= */

/**
 * Pre-selected service cards get enhanced styling
 */
.bms-service-card-modern.preselected-card {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
    border: 3px solid #10b981 !important;
    animation: pulse-preselected 2s ease-in-out infinite;
}

@keyframes pulse-preselected {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
    }
}

/* =================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================================= */

/**
 * Ensure colors work well on mobile devices
 */
@media (max-width: 768px) {
    .bms-service-card-modern[data-service] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .bms-service-card-modern[data-service]:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    }
    
    /* Ensure text remains readable on small screens */
    .bms-service-card-modern[data-service] .service-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    .bms-service-card-modern[data-service] .price-main {
        font-size: 36px !important;
    }
}

/* =================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================= */

/**
 * High contrast mode support
 */
@media (prefers-contrast: high) {
    .bms-service-card-modern[data-service] {
        border-width: 3px !important;
    }
    
    .bms-service-card-modern[data-service] * {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
}

/**
 * Focus states for keyboard navigation
 */
.bms-service-card-modern[data-service]:focus,
.bms-service-card-modern[data-service]:focus-visible {
    outline: 4px solid white !important;
    outline-offset: 4px !important;
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

/**
 * Ensure service cards print with appropriate styling
 */
@media print {
    .bms-service-card-modern[data-service] {
        background: white !important;
        color: black !important;
        border: 2px solid #333 !important;
        page-break-inside: avoid;
    }
    
    .bms-service-card-modern[data-service] * {
        color: black !important;
        text-shadow: none !important;
    }
}

/* =================================================================
   END OF FILE
   ================================================================= */