/*
 * CSS for the Inventory Presser Single Vehicle Widget
 * Adjust styles as needed for your theme
 */

/* Basic clearfix */
.invp-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Outer wrapper for the widget content - applies background color */
/* Use the wrapper class for general styling */
/* Added ID specificity to help override theme styles if needed */
div[id$="-wrapper"].invp-single-vehicle-widget-wrapper {
    /* Padding inside the colored box */
    padding: 15px; /* Increased padding slightly */
    margin-bottom: 20px; /* Space below the entire widget */
    overflow: hidden; /* Helps contain floated elements */
    box-sizing: border-box; /* Include padding/border in width */
    /* Ensure default border is off if background is used */
    border: none;
}

/* Styling for the Headline */
/* Selectors are now more specific */
div[id$="-wrapper"].invp-single-vehicle-widget-wrapper .invp-headline {
    font-size: 1.8em; /* Increased headline size slightly */
    font-weight: bold;
    margin: 0 0 15px 0; /* Top, Right, Bottom, Left margin */
    padding: 0;
    color: #000; /* Match text color */
    /* Consider font-family if you know the theme's font - example: */
    /* font-family: "Arial", sans-serif; */
    line-height: 1.2;
    text-align: center; /* Center the headline */
}

/* Container for the image and details columns */
/* Use the unique ID (generated from widget instance ID) for high specificity */
/* The ID will be like #invp-single-vehicle-widget-X-content */
div[id$="-content"].invp-single-vehicle-content {
    margin: 0 auto; /* Center the container if it has a max-width */
    padding: 0; /* Remove padding as wrapper has it */
     overflow: hidden; /* Helps contain floated elements */
     box-sizing: border-box;
}

/* Image Column - Added styles for border classes */
/* Use more specific class */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column {
    float: left; /* Float one column left */
    width: 48%; /* Adjust width as needed (e.g., 50% for equal width) */
    margin-right: 4%; /* Add space between columns (adjust if widths change) */
    box-sizing: border-box; /* Include padding/border in width calculation */
    overflow: hidden; /* Needed for border-radius to clip image */
}

/* Styles for the image column based on border style option */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column.invp-photo-rounded {
    border-radius: 10px; /* Adjust radius as needed */
}

div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column.invp-photo-circle {
    border-radius: 50%;
    /* To make a perfect circle from a potentially non-square image,
       the container should ideally be square, and the image should use object-fit.
       This border-radius will clip the image into an oval if it's rectangular.
       For a perfect circle, you might need more complex CSS or JS,
       or ensure source images are square. Let's stick to simple border-radius for now. */
}


/* Details Column */
/* Use more specific class */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column {
    float: left; /* Float the other column left */
    width: 48%; /* Adjust width as needed */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* Ensure image is responsive and doesn't overflow its container */
/* This ensures the image fills the space *within* the potentially rounded/circled column */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
    width: 100%; /* Explicitly make image fill the container width */
    /* Add border or box-shadow if needed */
}


/* Styling for the Year Make Model heading (now in details column) */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column h3.invp-vehicle-title {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 5px; /* Space below the title */
    font-size: 1.5em; /* Increased title font size */
    line-height: 1.3;
    font-weight: bold; /* Make it bold */
    color: #0b356a; /* Example color (dark blue from previous title bar) */
    padding: 0;
}

/* Style for the link inside the title heading */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column h3.invp-vehicle-title a {
    color: inherit; /* Inherit color from parent h3 */
    text-decoration: none; /* Remove underline */
}


/* Style for the details text blocks in the right column */

/* Style for the Price */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-price {
     margin-top: 0; /* Ensure no extra space above price */
     margin-bottom: 10px; /* Space below price */
     font-size: 1.5em; /* Match price size from screenshot */
     font-weight: bold;
     color: #2196f3; /* Example blue color from screenshot */
     line-height: 1.2;
}

/* Style for the Description section */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-description-section {
     margin-top: 10px; /* Space above description */
     margin-bottom: 0; /* No margin below if it's the last item */
     font-size: 0.95em; /* Adjust font size */
     line-height: 1.5;
     color: #333; /* Example dark grey text */
}

/* Style for paragraphs within the description section */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-description-section p {
    margin: 0 0 10px 0; /* Adjust paragraph spacing within description */
    padding: 0;
}

/* Remove bottom margin from the last paragraph in description */
div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-description-section p:last-child {
     margin-bottom: 0;
}


/* Optional: Responsive adjustments for smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column,
    div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column {
        float: none; /* Remove float, stack columns */
        width: 100%; /* Make columns full width */
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 20px; /* Add vertical space between stacked columns */
    }

    /* Remove bottom margin from the last stacked column */
    div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column:last-child {
        margin-bottom: 0;
    }

     /* Center image column when stacked (important for circle/rounded) */
    div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column {
        text-align: center;
        /* If making a circle image stacked, make the container square */
         /* aspect-ratio: 1; */ /* Add this and maybe object-fit to the img if perfect circle is needed */
    }
    div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-image-column img {
        display: inline-block; /* Change to inline-block to allow centering */
        max-width: 100%; /* Re-ensure responsiveness */
        height: auto;
         width: auto; /* Allow height auto to work correctly with inline-block */
         max-height: 300px; /* Optional: limit height on small screens */
         /* object-fit: cover; */ /* Needed if container is square and image isn't */
    }


     /* Adjust spacing on small screens */
     div[id$="-wrapper"].invp-single-vehicle-widget-wrapper .invp-headline {
         margin-bottom: 15px;
     }

     div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column h3.invp-vehicle-title {
         margin-bottom: 10px; /* More space below title when stacked */
     }

     div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-price {
         margin-bottom: 15px; /* More space below price when stacked */
     }

     div[id$="-content"].invp-single-vehicle-content .invp-single-vehicle-details-column .invp-vehicle-description-section {
         margin-top: 15px; /* More space above description when stacked */
     }
}