/* Basic styling for your product items */
.my-product-enquiry-wrapper {
    display: grid;
    gap: 20px; /* Gap between grid items */
    /* Default to 3 columns, overridden by specific classes */
    grid-template-columns: repeat(3, 1fr);
}

/* Column specific styles */
.my-product-enquiry-columns-2 .my-product-enquiry-wrapper {
    grid-template-columns: repeat(2, 1fr);
}

.my-product-enquiry-columns-3 .my-product-enquiry-wrapper {
    grid-template-columns: repeat(3, 1fr);
}

.my-product-enquiry-columns-4 .my-product-enquiry-wrapper {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive adjustments for columns */
@media (max-width: 1024px) {
    .my-product-enquiry-columns-4 .my-product-enquiry-wrapper {
        grid-template-columns: repeat(3, 1fr); /* 4 columns become 3 on tablet */
    }
    .my-product-enquiry-columns-3 .my-product-enquiry-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 3 columns become 2 on tablet */
    }
}

@media (max-width: 767px) {
    .my-product-enquiry-wrapper {
        grid-template-columns: repeat(1, 1fr); /* All columns become 1 on mobile */
    }
}


.my-product-enquiry-item {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff; /* Default background */
    border-radius: 5px; /* Default border radius */
    overflow: hidden; /* Ensures image corners are rounded correctly */
}
/* Product Image Wrapper */
.my-product-enquiry-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3; /* Modern way: keeps consistent ratio; adjust as needed */
    overflow: hidden;
    margin-bottom: 15px;
}

/* Images inside wrapper */
.my-product-enquiry-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures image covers full box without distortion */
    backface-visibility: hidden;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    will-change: opacity, transform;
}

/* Default image */
.my-product-enquiry-image-wrapper .my-product-image-default {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* Hover image */
.my-product-enquiry-image-wrapper.has-hover-image .my-product-image-hover {
    opacity: 0;
    transform: scale(1.1);
    z-index: 2;
}

/* Hover effect */
.my-product-enquiry-image-wrapper.has-hover-image:hover .my-product-image-default {
    opacity: 0;
    transform: scale(1.1);
}

.my-product-enquiry-image-wrapper.has-hover-image:hover .my-product-image-hover {
    opacity: 1;
    transform: scale(1);
}

/* Fallback: if no hover image exists */
.my-product-enquiry-image-wrapper:not(.has-hover-image) .my-product-image-hover {
    display: none !important;
}
.my-product-enquiry-name {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333; /* Default color */
}

.my-product-enquiry-price {
    font-size: 1.2em;
    color: #007bff; /* Default color */
    margin-bottom: 15px;
}

.my-product-enquiry-button {
    background-color: #28a745; /* Default button color */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.my-product-enquiry-button:hover {
    background-color: #218838;
}

/* Popup styling */
.my-product-enquiry-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Higher z-index to ensure it's on top */
}

.my-product-enquiry-popup-content {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    position: relative;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow-y: auto; /* Enable scroll if content is too long */
    max-height: 90vh; /* Limit height */
}

.my-product-enquiry-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px; /* Slightly larger for easier clicking */
    cursor: pointer;
    color: #555;
    line-height: 1; /* Adjust line height for better alignment */
}

.my-product-enquiry-popup-close:hover {
    color: #000;
}

/* Form Styling within Popup */
.my-product-enquiry-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.my-product-enquiry-form input[type="text"],
.my-product-enquiry-form input[type="email"],
.my-product-enquiry-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.my-product-enquiry-form input[type="text"]:focus,
.my-product-enquiry-form input[type="email"]:focus,
.my-product-enquiry-form textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.my-product-enquiry-form button[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    width: auto; /* Override 100% width if set elsewhere */
    transition: background-color 0.3s ease;
}

.my-product-enquiry-form button[type="submit"]:hover {
    background-color: #0056b3;
}
.my-product-enquiry-image-wrapper img {
    object-fit: cover;  /* Fills the box, crops overflow */
    width: 100%;
    height: 100%;
}