/* --- Global & Wrapper Styles --- */
/* The overall wrapper to hold the image and the price box side-by-side */
.hero-content-wrapper {
    display: flex;
    justify-content: flex-start; /* Aligns content to the left */
    /* FIX: Change alignment to center the price box vertically relative to the image */
    align-items: center; 
    margin-bottom: 20px; /* Space above the table */
    padding: 20px;
}

/* --- Left Section: Car Image Container --- */
.car-image-display {
    position: relative;
    /* Dimensions from previous requests: 487px wide, 334px tall */
    width: 487px; 
    height: 334px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Adds depth like in the screenshot */
    overflow: hidden;
}

.main-car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* --- Right Section: Standalone Price Box --- */
.price-box-standalone {
  /* Positioned to the right of the car image */
    margin-left: 20px;
    /* FIX: Add a positive top margin to push the box down below the center line. */
    margin-top: 170px; 
    
    width: 150px; 
    height: 160px; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Black Top Section */
.price-box-top-black {
    flex-basis: 70%; /* Takes up roughly 70% of the height */
    background-color: #000;
    color: white;
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative; /* To position AC status */
}

.price-text-names {
    line-height: 1;
    margin-top: 5px;
}

.price-box-top-black .car-model-swift {
    font-size: 1.1em;
    font-weight: 700;
    color: #ffcc00; 
    margin: 0;
}

.price-box-top-black .car-model-dzire {
    font-size: 1.9em;
    font-weight: 900;
    color: #fff;
    margin: -5px 0 0 0;
}

.ac-status-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
}

/* Yellow Bottom Section */
.price-box-bottom-yellow {
    flex-grow: 1; /* Takes up the remaining height (30%) */
    background-color: #ffcc00;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
    padding: 8px 15px;
    box-sizing: border-box;
}

.price-box-bottom-yellow .service-type {
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 2px;
}

.price-box-bottom-yellow .price-amount {
    font-size: 1.8em; /* Adjusted font size for a tight fit */
    font-weight: 900; 
    line-height: 1;
    text-align: right; 
}

/* --- Section 2: Promotional Headline & Summary Styles --- */
.promotional-section {
    max-width: 900px; 
   margin: 40px auto 40px 20px;
    padding: 0 20px;
    /* FIX: Align the content to the right side of the container */
    text-align: left; 
}

.promotional-headline {
    /* Keep the original styling but it will now align to the right */
    font-family: 'Playfair Display', serif;
    font-size: 1.8em;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.promotional-summary {
    /* Keep the original styling but it will now align to the right */
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- Section 3: Why Choose the Swift Dzire for Your Trip? Styles --- */
.dzire-features-section {
    max-width: 900px;
    margin: 30px auto 40px 20px; 
    padding: 0 20px;
    text-align: left;
}

.features-headline {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.features-intro {
    font-size: 1.1em;
    color: #444;
    margin-bottom: 15px;
}

/* Updated styles for standard bullet list */
.standard-bullets-list {
    list-style-type: disc; /* Ensures standard bullet points are used */
    padding-left: 20px; /* Standard padding for list indentation */
    margin-top: 0;
}

.standard-bullets-list li {
    font-size: 1.0em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #333;
    /* Removed custom bullet styling */
    list-style-position: outside; 
    padding-left: 0; 
}

/* --- Important Information Section Styles (Desktop) --- */
.important-info-section {
    max-width: 900px;
    /* Aligns the block to the left, matching the promotional sections */
    margin: 40px auto 40px 20px; 
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    text-align: left;
    color: #444;
}

.info-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4em;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.info-list {
    list-style-type: square;
    padding-left: 25px; 
    margin: 0;
}

.info-list li {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 8px;
}

.info-list li a {
    color: #ffcc00;
    text-decoration: underline;
    font-weight: bold;
}



/* ========================================================================= */
/* --- MEDIA QUERIES FOR MOBILE COMPATIBILITY (Screens up to 768px wide) --- */
/* ========================================================================= */
@media (max-width: 768px) {
    
    /* 1. Reset the Main Wrapper to Stack Vertically */
    .hero-content-wrapper {
        flex-direction: column; /* Stack the image and price box vertically */
        align-items: center; /* Center the stacked items horizontally */
        padding: 10px;
    }

    /* 2. Make the Car Image Container Responsive */
    .car-image-display {
        width: 95%; /* Image takes nearly full width of the screen */
        height: auto; /* Allow height to adjust proportionally */
        max-width: 487px; /* Prevent it from getting too large on tablets */
        margin-bottom: 20px; /* Space below the image before the price box */
    }

    .main-car-image {
        /* Ensure the image scales properly */
        width: 100%;
        height: auto;
    }

    /* 3. Adjust the Standalone Price Box to be Full-Width and Aligned */
    .price-box-standalone {
        width: 95%; /* Price box takes nearly full width on mobile */
        height: 120px; /* Reduced height for smaller vertical space */
        margin: 0 auto 20px auto; /* Center the box and add bottom space */
        /* Overriding the fixed margin-top: 170px for mobile stacking */
        margin-top: 0 !important; 
    }
    
    /* Adjust internal elements of the price box for smaller height */
    .price-box-top-black {
        flex-basis: 60%; /* Adjusted ratio for less text space, more price space */
    }
    
    .price-box-bottom-yellow {
        flex-grow: 1;
        padding: 5px 15px; /* Reduced vertical padding */
    }
    
    .price-box-top-black .car-model-dzire {
        font-size: 1.5em; /* Reduced size */
    }
    
    .price-box-bottom-yellow .price-amount {
        font-size: 1.6em; /* Reduced size */
    }

    /* 4. Ensure Text Sections (Promotional/Features) are Centered for Mobile Readability */
    .promotional-section,
    .dzire-features-section {
        /* FIX: Reset horizontal alignment for mobile content blocks */
        max-width: 100%; 
        margin: 30px auto; /* Center the block and add vertical spacing */
        padding: 0 15px; /* Add internal padding */
        text-align: left; /* Text remains left-aligned for easy reading */
    }

    /* Ensures the list indentation is correct on mobile */
    .standard-bullets-list {
        padding-left: 20px;
    }

    .important-info-section {
        /* Reset fixed left alignment and center the block */
        max-width: 100%; 
        margin: 30px auto; 
        padding: 15px; /* Reduce padding on mobile */
    }

    .info-title {
        font-size: 1.2em;
    }

    .info-list {
        padding-left: 15px; /* Reduce indentation */
    }

    .info-list li {
        font-size: 0.9em; /* Slightly reduce font size for smaller screens */
    }
}