/* ==========================================================================
   CAR RENTAL CARD - MOBILE OPTIMIZATION
   Mobile-specific styles for car rental cards (320px - 768px)
   
   IMPORTANT: This file should NOT be cached by browsers.
   Cache-busting query parameters are added in PHP templates.
   
   CRITICAL: This file MUST load AFTER car-rental-card.css to override
   desktop styles. Check load order in home.php and services/index.php
   ========================================================================== */

/* ==========================================================================
   TABLET AND BELOW (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* ================================================
       NUCLEAR FIX - REMOVE ALL SIDE SPACES
       Force card and image to have ZERO horizontal padding
       This MUST be at the top to override everything
       ================================================ */

    /* Card must have ZERO padding - Force edges */
    .car-rental-card,
    a.car-rental-card,
    .home-category-section .car-rental-card,
    .car-rental-section .car-rental-card,
    .services-grid .car-rental-card {
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
    }

    /* Image container - Force to card edges with ZERO padding */
    .car-rental-card-image-container,
    .car-rental-card .car-rental-card-image-container,
    a.car-rental-card .car-rental-card-image-container,
    .home-category-section .car-rental-card .car-rental-card-image-container,
    .services-grid .car-rental-card .car-rental-card-image-container {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
    }

    /* Image - Force to container edges with ABSOLUTE positioning */
    .car-rental-card-image-container img,
    .car-rental-card-image-container .car-rental-card-image,
    img.car-rental-card-image,
    .car-rental-card .car-rental-card-image-container img,
    .car-rental-card .car-rental-card-image-container .car-rental-card-image,
    a.car-rental-card .car-rental-card-image-container img,
    a.car-rental-card .car-rental-card-image-container .car-rental-card-image {
        position: relative !important;
        /* Changed from absolute to relative for object-fit */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        object-fit: cover !important;
        /* Fill container, may crop edges */
        object-position: center !important;
        display: block !important;
        box-sizing: border-box !important;
        border: none !important;
    }

    /* Remove any wrapper padding from first child */
    .car-rental-card>*:first-child,
    a.car-rental-card>*:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove padding from any parent wrappers */
    .car-rental-card-content,
    .car-rental-card .car-rental-card-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ================================================
       FULL-WIDTH CAR RENTAL CARDS - MOBILE
       ================================================ */

    /* Card Container - Full Width - High Specificity - FORCE OVERRIDE DESKTOP CSS */
    .car-rental-card,
    a.car-rental-card,
    .home-category-section .car-rental-card,
    .car-rental-section .car-rental-card,
    .services-grid .car-rental-card,
    .services-page-container .services-grid .car-rental-card,
    .container .services-grid .car-rental-card {
        width: calc(100% - 32px) !important;
        /* Full width minus 16px padding each side */
        max-width: none !important;
        /* Remove max-width constraint */
        margin: 0 16px 16px 16px !important;
        /* Horizontal: 16px, Vertical bottom: 16px - CRITICAL: This creates spacing */
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        /* Force bottom margin for spacing */
        margin-left: 16px !important;
        margin-right: 16px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        background: white !important;
        padding: 0 !important;
        /* No padding on card - image should be edge-to-edge */
        display: block !important;
        /* Ensure block display */
        height: auto !important;
        /* CRITICAL: Override height: 100% from desktop CSS - allows margin-bottom to work */
        min-height: auto !important;
        /* Remove min-height constraints */
        max-height: none !important;
        /* Remove max-height constraints */
        position: relative !important;
        /* Ensure proper positioning */
    }

    /* Ensure last card doesn't have extra bottom margin */
    .services-grid .car-rental-card:last-child,
    .home-category-section .services-grid .car-rental-card:last-child,
    .car-rental-section .services-grid .car-rental-card:last-child {
        margin-bottom: 16px !important;
        /* Keep spacing even for last card */
    }

    /* ================================================
       WINE TASTING & TOUR CARDS - MOBILE SPACING
       Force margin-bottom for all card types
       ================================================ */

    /* Wine Tasting Cards - Force 32px spacing - MAXIMUM SPECIFICITY */
    /* CRITICAL: Must change to block for margin-bottom to work in grid */
    /* Flex items in grid don't respect margin-bottom properly */
    .wine-tasting-card,
    a.wine-tasting-card,
    .home-category-section .wine-tasting-card,
    .wine-experiences-section .wine-tasting-card,
    .services-grid .wine-tasting-card,
    .home-category-wine .services-grid .wine-tasting-card,
    .home-category-section .services-grid .wine-tasting-card,
    .home-category-wine .home-category-section .services-grid .wine-tasting-card {
        margin-bottom: 16px !important;
        /* Force 16px spacing */
        margin-top: 0 !important;
        display: block !important;
        /* CRITICAL: Override flex - margin-bottom only works with block in grid */
        position: relative !important;
        height: auto !important;
        /* Override height: 100% from desktop CSS */
    }

    /* Wine card content wrapper - Ensure flex layout inside */
    .wine-tasting-card .wine-card-content,
    a.wine-tasting-card .wine-card-content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Tour Cards - Force 32px spacing - MAXIMUM SPECIFICITY */
    /* CRITICAL: Must change to block for margin-bottom to work in grid */
    /* Flex items in grid don't respect margin-bottom properly */
    .tour-card,
    a.tour-card,
    .home-category-section .tour-card,
    .tours-section .tour-card,
    .services-grid .tour-card,
    .home-category-tours .services-grid .tour-card,
    .home-category-section .services-grid .tour-card,
    .home-category-tours .home-category-section .services-grid .tour-card {
        margin-bottom: 16px !important;
        /* Force 16px spacing */
        margin-top: 0 !important;
        display: block !important;
        /* CRITICAL: Override flex - margin-bottom only works with block in grid */
        position: relative !important;
        height: auto !important;
        /* Override height: 100% from desktop CSS */
    }

    /* Tour card content wrapper - Ensure flex layout inside */
    .tour-card .tour-card-content,
    a.tour-card .tour-card-content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Service Cards (fallback) - Force 32px spacing - MAXIMUM SPECIFICITY */
    .service-card,
    a.service-card,
    .home-category-section .service-card,
    .services-grid .service-card,
    .home-category-section .services-grid .service-card {
        margin-bottom: 16px !important;
        /* Force 16px spacing */
        margin-top: 0 !important;
        display: block !important;
        /* CRITICAL: Override flex to allow margin-bottom in grid */
        position: relative !important;
        height: auto !important;
        /* Override height: 100% from desktop CSS */
    }

    /* Grid Layout Adjustment - Single Column - FORCE OVERRIDE DESKTOP CSS */
    .car-rental-section .services-grid,
    .home-category-section .services-grid,
    .services-container .services-grid,
    .home-category-car-rental .services-grid,
    .home-category-wine .services-grid,
    .home-category-tours .services-grid,
    .services-page-container .services-grid,
    .container .services-grid,
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Single column */
        gap: 0 !important;
        /* No gap, cards have their own margins - OVERRIDE desktop gap */
        row-gap: 0 !important;
        /* No row gap - CRITICAL: This allows margin-bottom to work */
        column-gap: 0 !important;
        /* No column gap */
        align-items: start !important;
        /* Start alignment - CRITICAL: allows margin-bottom to work */
        align-content: start !important;
        /* Start content alignment */
        justify-items: stretch !important;
        /* Stretch items horizontally */
        justify-content: start !important;
        /* Start justification */
        /* CRITICAL: align-items: start allows margin-bottom to work in grid */
        /* If align-items: stretch, margin-bottom is ignored */
        padding: 0 !important;
        /* Remove container padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Section container - Remove horizontal padding */
    .car-rental-section,
    .home-category-section,
    .home-category-car-rental,
    .home-category-wine,
    .home-category-tours {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* Home page Wine Experiences section - restore inner padding so cards
       visually დამაგდეს ზუსტად ისე, როგორც services listing გვერდზე */
    .home-category-wine .services-grid {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
    }

    /* Home page Tours & Experiences section - same inner padding */
    .home-category-tours .services-grid {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
    }

    /* ================================================
       CAR IMAGE - 260px HEIGHT + FULL WIDTH - MOBILE
       ================================================ */

    /* Image Container - Full Width, 260px Height - Maximum Specificity */
    /* Override desktop CSS @media (max-width: 767px) which sets height: 170px */
    /* CRITICAL: Must override desktop CSS that loads AFTER this file */
    .car-rental-card-image-container,
    .car-rental-card .car-rental-card-image-container,
    a.car-rental-card .car-rental-card-image-container,
    .home-category-section .car-rental-card .car-rental-card-image-container,
    .services-grid .car-rental-card .car-rental-card-image-container,
    .car-rental-section .car-rental-card .car-rental-card-image-container,
    div.car-rental-card div.car-rental-card-image-container,
    a.car-rental-card>.car-rental-card-image-container,
    .car-rental-card>.car-rental-card-image-container {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        /* Increased from 220px - OVERRIDE desktop 170px */
        min-height: 260px !important;
        max-height: 260px !important;
        position: relative !important;
        overflow: hidden !important;
        background: #f8f9fa !important;
        /* Light gray background */
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        /* Top corners only */
        box-sizing: border-box !important;
    }

    /* Image Element - Full Width, Contain to Show Full Car - Maximum Specificity */
    /* Target ALL possible image selectors to override desktop CSS */
    img.car-rental-card-image,
    .car-rental-card-image,
    .car-rental-card-image-container .car-rental-card-image,
    .car-rental-card .car-rental-card-image-container .car-rental-card-image,
    .car-rental-card-image-container img,
    .car-rental-card-image-container img.car-rental-card-image,
    .car-rental-card .car-rental-card-image-container img,
    .car-rental-card .car-rental-card-image-container img.car-rental-card-image,
    a.car-rental-card .car-rental-card-image-container img,
    a.car-rental-card .car-rental-card-image-container .car-rental-card-image,
    .home-category-section .car-rental-card .car-rental-card-image-container img,
    .home-category-section .car-rental-card .car-rental-card-image-container .car-rental-card-image,
    .services-grid .car-rental-card .car-rental-card-image-container img,
    .services-grid .car-rental-card .car-rental-card-image-container .car-rental-card-image,
    .car-rental-section .car-rental-card .car-rental-card-image-container img,
    div.car-rental-card div.car-rental-card-image-container img,
    div.car-rental-card div.car-rental-card-image-container img.car-rental-card-image {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        /* Fill container completely, may crop edges */
        object-position: center !important;
        /* Center the car */
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: block !important;
        /* Remove inline spacing */
        box-sizing: border-box !important;
    }

    /* Override desktop hover transform */
    .car-rental-card:hover .car-rental-card-image,
    .car-rental-card:hover img.car-rental-card-image,
    a.car-rental-card:hover .car-rental-card-image-container img {
        transform: none !important;
        /* Disable desktop scale on hover */
    }

    /* Smooth fade-in when image loads */
    .car-rental-card-image {
        animation: fadeInImage 0.3s ease-in;
    }

    @keyframes fadeInImage {
        from {
            opacity: 0;
            transform: scale(0.98);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* GPU acceleration for smooth rendering */
    .car-rental-card-image {
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Remove any wrapper padding/margin */
    .car-rental-card-image-wrapper,
    .car-rental-card-image-container>div:not(.img-badge-no-deposit),
    .car-rental-card-image-container>a {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block;
    }



    /* Ensure image container has no padding that creates side spaces - Maximum Override */
    .car-rental-card-image-container,
    .car-rental-card .car-rental-card-image-container,
    a.car-rental-card .car-rental-card-image-container,
    .home-category-section .car-rental-card .car-rental-card-image-container,
    .services-grid .car-rental-card .car-rental-card-image-container,
    .car-rental-section .car-rental-card .car-rental-card-image-container,
    div.car-rental-card div.car-rental-card-image-container {
        padding: 0 !important;
        /* All sides */
        margin: 0 !important;
        /* All sides */
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Ensure image itself has no side spaces - Full width - Maximum Override */
    .car-rental-card-image-container img,
    .car-rental-card-image-container .car-rental-card-image,
    .car-rental-card .car-rental-card-image-container img,
    .car-rental-card .car-rental-card-image-container .car-rental-card-image,
    a.car-rental-card .car-rental-card-image-container img,
    a.car-rental-card .car-rental-card-image-container .car-rental-card-image,
    .home-category-section .car-rental-card .car-rental-card-image-container img,
    .services-grid .car-rental-card .car-rental-card-image-container img,
    div.car-rental-card div.car-rental-card-image-container img {
        padding: 0 !important;
        /* All sides */
        margin: 0 !important;
        /* All sides */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        /* Force full width */
        height: 100% !important;
        object-fit: cover !important;
        /* Fill container completely, may crop edges */
        object-position: center !important;
        /* Center the car */
        box-sizing: border-box !important;
        display: block !important;
        /* Remove inline spacing */
    }

    /* Remove any parent padding that might create side spaces */
    .car-rental-card>*,
    .car-rental-card>div:first-child,
    a.car-rental-card>div:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Force card to have no internal padding */
    .car-rental-card,
    a.car-rental-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Card Title */
    .car-rental-title {
        font-size: 17px;
        font-weight: 600;
        color: #1a1a1a;
        padding: 14px 16px 12px;
        margin: 0;
        line-height: 1.3;
    }

    /* ===================================
       COMPACT CAR SPECS SECTION - MOBILE
       Inline layout: icon + text on same line
       2 rows × 3 columns grid for space efficiency
       =================================== */

    /* Specs Container - Compact 3-Column Grid */
    .car-rental-card .car-specs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 6px 8px !important;
        padding: 12px !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        margin: 12px 0 !important;
    }

    /* Individual Spec Item - Inline Icon + Text */
    .car-rental-card .car-specs .car-spec-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        background: #f9fafb !important;
        border-radius: 6px !important;
        min-height: 32px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;
    }

    .car-rental-card .car-specs .car-spec-item:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-1px) !important;
    }

    /* Icon Styling - Compact Size, Inline with Text */
    .car-rental-card .car-specs .car-spec-item .car-spec-icon {
        font-size: 14px !important;
        min-width: 18px !important;
        text-align: center !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Fuel Type Icon - Green */
    .car-rental-card .car-specs .car-spec-item:nth-child(1) .car-spec-icon {
        color: #059669 !important;
        /* Green */
    }

    /* Year Icon - Indigo */
    .car-rental-card .car-specs .car-spec-item:nth-child(2) .car-spec-icon {
        color: #4f46e5 !important;
        /* Indigo */
    }

    /* Capacity Icon - Pink */
    .car-rental-card .car-specs .car-spec-item:nth-child(3) .car-spec-icon {
        color: #db2777 !important;
        /* Pink */
    }

    /* Spec Text - Compact, Inline with Icon */
    .car-rental-card .car-specs .car-spec-item .car-spec-text {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
    }

    /* ===================================
       MODERN FOOTER SECTION - MOBILE
       =================================== */

    /* Footer Container - Force Flex Layout - Maximum Priority */
    .car-rental-card-footer,
    .car-rental-card .car-rental-card-footer,
    .home-category-section .car-rental-card .car-rental-card-footer,
    .services-grid .car-rental-card .car-rental-card-footer,
    div.car-rental-card div.car-rental-card-footer {
        display: flex !important;
        flex-direction: row !important;
        /* Force horizontal layout */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px !important;
        border-top: 2px solid #e5e7eb !important;
        background: white !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        gap: 12px !important;
        /* Space between items */
        flex-wrap: nowrap !important;
        /* Prevent wrapping */
        border-radius: 0 !important;
    }

    /* Add subtle gradient accent at top */
    .car-rental-card-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    }

    /* Location Section - Left Side - High Priority */
    .car-rental-location,
    .car-rental-card-footer .car-rental-location,
    .car-rental-card .car-rental-card-footer .car-rental-location {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        background: #f3f4f6 !important;
        border-radius: 6px !important;
        transition: all 0.2s ease;
        font-size: 14px !important;
        color: #4b5563 !important;
        flex-shrink: 0 !important;
        /* Don't shrink */
        order: 1 !important;
        /* Force to left */
        margin: 0 !important;
        width: auto !important;
    }

    .car-rental-location:hover {
        background: #e5e7eb;
    }

    .car-rental-location-icon,
    .car-rental-location .car-rental-location-icon {
        font-size: 14px !important;
        color: #2563eb !important;
        animation: pulse 2s ease-in-out infinite;
        margin: 0 !important;
        padding: 0 !important;
    }

    .car-rental-location span {
        font-size: 14px !important;
        color: #4b5563 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Price Section - Right Side - High Priority */
    .car-rental-price,
    .car-rental-card-footer .car-rental-price,
    .car-rental-card .car-rental-card-footer .car-rental-price {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 4px !important;
        padding: 8px 14px !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
        flex-shrink: 0 !important;
        /* Don't shrink */
        order: 2 !important;
        /* Force to right */
        margin: 0 !important;
        width: auto !important;
    }

    .car-rental-price-amount,
    .car-rental-price .car-rental-price-amount {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: white !important;
        letter-spacing: -0.5px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .car-rental-price-unit,
    .car-rental-price .car-rental-price-unit {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove any potential wrapper that might break layout */
    .car-rental-card-footer>div {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Rent Now Button */
    .btn-rent-now {
        width: 100%;
        padding: 14px;
        background: #0066cc;
        color: white;
        border: none;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
        min-height: 44px;
        /* Touch-friendly */
        border-radius: 0;
        margin-top: 0;
    }

    .btn-rent-now:hover {
        background: #0052a3;
    }

    /* Card Content adjustments */
    .car-rental-card-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

/* ==========================================================================
   LARGE MOBILE (max-width: 414px) - iPhone XR, etc.
   ========================================================================== */
@media (max-width: 414px) {

    /* Override desktop CSS @media (max-width: 767px) and @media (max-width: 575px) */
    .car-rental-card-image-container,
    .car-rental-card .car-rental-card-image-container,
    a.car-rental-card .car-rental-card-image-container,
    .home-category-section .car-rental-card .car-rental-card-image-container,
    .services-grid .car-rental-card .car-rental-card-image-container {
        height: 260px !important;
        /* Keep 260px on large mobile - OVERRIDE desktop 170px/160px */
        min-height: 260px !important;
        max-height: 260px !important;
    }

    .car-rental-title {
        font-size: 16px;
        padding: 12px 14px 10px;
    }

    /* Compact Car Specs - Large Mobile */
    .car-rental-card .car-specs {
        gap: 5px 7px !important;
        padding: 12px !important;
    }

    .car-rental-card .car-specs .car-spec-item {
        padding: 6px 8px !important;
        min-height: 32px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-text {
        font-size: 12px !important;
    }

    .car-rental-card-footer {
        padding: 12px 14px;
    }

    .car-rental-price-amount {
        font-size: 18px;
    }

    /* Increased spacing for large mobile */
    .car-rental-card,
    a.car-rental-card,
    .home-category-section .car-rental-card,
    .car-rental-section .car-rental-card,
    .services-grid .car-rental-card {
        margin: 0 16px 32px 16px !important;
        /* Maintain consistent 32px spacing on large mobile */
    }

    /* Wine & Tour Cards - Large Mobile */
    .wine-tasting-card,
    a.wine-tasting-card,
    .tour-card,
    a.tour-card,
    .service-card,
    a.service-card {
        margin-bottom: 32px !important;
    }
}

/* ==========================================================================
   STANDARD MOBILE (max-width: 375px) - iPhone X, etc.
   ========================================================================== */
@media (max-width: 375px) {
    .car-rental-card-image-container {
        height: 240px !important;
        /* Slightly shorter on standard mobile */
    }

    .car-rental-title {
        font-size: 15px;
        padding: 12px 12px 10px;
    }

    /* Compact Car Specs - Standard Mobile */
    .car-rental-card .car-specs {
        gap: 4px 6px !important;
        padding: 10px !important;
    }

    .car-rental-card .car-specs .car-spec-item {
        padding: 5px 6px !important;
        min-height: 30px !important;
        gap: 5px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-icon {
        font-size: 13px !important;
        min-width: 16px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-text {
        font-size: 11px !important;
    }

    .car-rental-card-footer {
        padding: 10px 12px;
    }

    .car-rental-location {
        font-size: 13px;
    }

    .car-rental-price-amount {
        font-size: 17px;
    }

    .car-rental-price-unit {
        font-size: 12px;
    }

    .btn-rent-now {
        padding: 12px;
        font-size: 15px;
    }
}

/* ==========================================================================
   VERY SMALL MOBILE (max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {

    /* Even tighter margins on very small screens */
    .car-rental-card,
    a.car-rental-card,
    .home-category-section .car-rental-card,
    .car-rental-section .car-rental-card,
    .services-grid .car-rental-card {
        width: calc(100% - 24px) !important;
        /* Tighter margins */
        margin: 0 12px 32px 12px !important;
        /* Maintain consistent 32px spacing on very small screens */
    }

    /* Wine & Tour Cards - Very Small Mobile */
    .wine-tasting-card,
    a.wine-tasting-card,
    .tour-card,
    a.tour-card,
    .service-card,
    a.service-card {
        margin-bottom: 32px !important;
    }

    .car-rental-card-image-container {
        height: 240px !important;
        /* Slightly shorter on very small screens */
    }

    /* Compact Car Specs - Very Small Mobile */
    .car-rental-card .car-specs {
        gap: 3px 5px !important;
        padding: 10px !important;
    }

    .car-rental-card .car-specs .car-spec-item {
        padding: 5px 6px !important;
        min-height: 28px !important;
        gap: 4px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-text {
        font-size: 11px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-icon {
        font-size: 12px !important;
        min-width: 15px !important;
    }

    .car-rental-card-footer {
        padding: 14px;
    }
}

/* ==========================================================================
   SMALL MOBILE (max-width: 320px) - iPhone SE, etc.
   ========================================================================== */
@media (max-width: 320px) {

    /* Full width on smallest screens */
    .car-rental-card,
    a.car-rental-card,
    .home-category-section .car-rental-card,
    .car-rental-section .car-rental-card,
    .services-grid .car-rental-card {
        width: calc(100% - 20px) !important;
        /* Even tighter margins */
        margin: 0 10px 28px 10px !important;
        /* Slight reduction to 28px on smallest screens (acceptable compromise) */
        border-radius: 8px !important;
    }

    /* Wine & Tour Cards - Smallest Mobile */
    .wine-tasting-card,
    a.wine-tasting-card,
    .tour-card,
    a.tour-card,
    .service-card,
    a.service-card {
        margin-bottom: 28px !important;
        /* Slight reduction for tiny screens */
    }

    .car-rental-card-image-container {
        height: 220px !important;
        /* Compact on smallest screens */
    }

    .car-rental-title {
        font-size: 14px;
        padding: 10px 10px 8px;
    }

    /* Compact Car Specs - Smallest Mobile */
    .car-rental-card .car-specs {
        gap: 3px 4px !important;
        padding: 8px !important;
    }

    .car-rental-card .car-specs .car-spec-item {
        padding: 4px 5px !important;
        min-height: 28px !important;
        gap: 4px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-icon {
        font-size: 12px !important;
        min-width: 14px !important;
    }

    .car-rental-card .car-specs .car-spec-item .car-spec-text {
        font-size: 10px !important;
    }

    .car-rental-card-footer,
    .car-rental-card .car-rental-card-footer {
        padding: 8px 10px !important;
        flex-wrap: nowrap !important;
        /* Keep on same line */
        gap: 8px !important;
        flex-direction: row !important;
        /* Force horizontal */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .car-rental-location {
        font-size: 12px !important;
        width: auto !important;
        /* Don't force full width */
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .car-rental-price {
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    .car-rental-price {
        width: auto !important;
        /* Don't force full width */
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    .car-rental-price-amount {
        font-size: 16px;
    }

    .car-rental-price-unit {
        font-size: 11px;
    }

    .btn-rent-now {
        padding: 12px;
        font-size: 14px;
        min-height: 44px;
    }
}

/* Subtle pulse animation for location pin */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ==========================================================================
   DESKTOP - NO CHANGES (min-width: 769px)
   Keep existing desktop styles from car-rental-card.css
   ========================================================================== */
@media (min-width: 769px) {
    /* Desktop styles remain unchanged */
    /* All desktop styles are in /public/assets/css/components/car-rental-card.css */
}
/* ==========================================================================
   NO DEPOSIT BADGE FIX - Prevent badge from stretching to full image size
   CRITICAL: Must load after all other rules to override conflicts
   ========================================================================== */
@media screen and (max-width: 768px) {
    .car-rental-card-image-container > .img-badge-no-deposit,
    .car-rental-card .car-rental-card-image-container .img-badge-no-deposit,
    .services-grid .car-rental-card .car-rental-card-image-container .img-badge-no-deposit {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: fit-content !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        background-color: #28a745 !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        z-index: 5 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .car-rental-card-image-container > .img-badge-no-deposit i {
        font-size: 10px !important;
    }
}

@media screen and (max-width: 480px) {
    .car-rental-card-image-container > .img-badge-no-deposit,
    .car-rental-card .car-rental-card-image-container .img-badge-no-deposit,
    .services-grid .car-rental-card .car-rental-card-image-container .img-badge-no-deposit {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        gap: 3px !important;
    }

    .car-rental-card-image-container > .img-badge-no-deposit i {
        font-size: 9px !important;
    }
}