/*
 * Plugin Name: My Product Slider
 * Description: Custom styles for the My Product Slider plugin.
 */

.my-product-slider-wrapper {
    position: relative;
    padding: 20px 0; /* Adjust padding as needed */
    overflow: hidden; /* Ensure nothing overflows the wrapper */
    width: 100vw; /* Takes the full width of the viewport */
    left: 50%; /* Shifts the element 50% from the left edge of its nearest positioned ancestor */
    transform: translateX(-50%); /* Shifts the element back by 50% of its OWN width to center it */
    max-width: none; /* Overrides any max-width inherited from parent containers */
    box-sizing: border-box; /* Ensures padding is included in the total width, preventing horizontal scrollbars if you have left/right padding */
}

/* Swiper container specific styles */
.myProductSlider {
    width: 100%;
    /* No explicit height here, let content define it */
}

.swiper-slide.my-product-slide {
    width: 300px; /* Base width for mobile, adjust as needed */
    aspect-ratio: 1 / 1.42349; /* Define the ratio once */
    position: relative;
    overflow: hidden; /* Crucial for background-image and overlay content */
    display: flex;
    align-items: flex-end; /* Align overlay content to the bottom */
    justify-content: flex-start; /* Align overlay content to the left */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin: 0 10px; /* Space between slides, adjust as needed */
    background-color: #f0f0f0; /* Fallback background */
    border-radius: 8px; /* Slightly rounded corners for the slides */
}

.my-product-slide-inner {
    width: 100%;
    height: 100%;
    background-size: cover; /* Cover the entire area */
    background-position: center center; /* Center the background image; transition: transform 0.3s ease-in-out; Smooth transition for zoom */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
    padding: 15px; /* Padding inside the slide for content */
    box-sizing: border-box;
}

/* Zoom effect for active/centered slide
.swiper-slide-active .my-product-slide-inner {
    transform: scale(1.1); 
} */

.my-product-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Below content but above image */
}

.my-product-overlay-content {
    position: relative; /* Make it a positioning context for children if needed */
    z-index: 2; /* Ensure content is above the link overlay */
    width: 100%;
    color: #fff; /* White text for better contrast on image */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Enhance readability */
}

.my-product-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    line-height: 1.2;
}

.my-product-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 5px; /* Gap between grid items */
    margin-bottom: 15px;
    font-size: 0.9em;
}

.my-product-meta-item {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevent breaking lines for single items */
}

.my-product-meta-item svg {
    margin-right: 5px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.my-product-book-now-wrapper {
    width: 100%;
    display: flex; /* Use flexbox to center the button */
    justify-content: center; /* Center the button horizontally */
    margin-top: 10px; /* Space above the button */
    margin-bottom: 15px; 
}

.my-product-book-now-btn {
    display: inline-block;
    background-color: #0073aa; /* WordPress blue, adjust as needed */
    color: #fff;
    padding: 8px 20px; /* Padding for button */
    border-radius: 20px; /* Rounded corners */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    text-align: center;
}

.my-product-book-now-btn:hover {
    background-color: #005177;
    color: #fff; /* Ensure text color stays white on hover */
}

/* Media Queries for Responsiveness */

/* Tablet breakpoint - Example: 768px and up */
@media (min-width: 768px) {
    .swiper-slide.my-product-slide {
        width: 240px;
    }
}

/* Desktop breakpoint - Example: 1024px and up */
@media (min-width: 1024px) {
    .swiper-slide.my-product-slide {
        width: 360px;
    }

    .my-product-title {
        font-size: 1.5em; /* Larger title on desktop */
    }

    .my-product-meta-grid {
        font-size: 1em; /* Larger meta text */
    }
}

/* General improvements */
.swiper-slide {
    display: flex; /* Helps with centering items in the slide */
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent slides from shrinking less than their defined width */
}

/* Add a semi-transparent overlay to the image for better text contrast */
.my-product-slide-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); /* Darker at bottom */
    z-index: 1; /* Below content but above background image */
}