/*
Theme Name: SimpleMag Child
Template: simplemag
Description: A child theme for the SimpleMag theme.
Version: 1.0
Author: Roberto Sanchez
*/
/* Custom CSS goes bellow */

/* Added 12/13/2023 :Roberto S.*/
@media only screen and (min-width: 300px){
  .title-with-sep {
    display: grid;
    grid-template-columns: 1fr fit-content(85%) 1fr;
    align-items: center;
    text-align: center;
    grid-gap: 0.9375rem;
    width: 100%;
  }
}

/* Added 3/7/2025 :Roberto S. */
.rating-total-indicator {
    position: relative; /* Needed for positioning the number */
    display: inline-block; /* Or your preferred display */
}

.rating-total-indicator .show-total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the number */
    font-size: 1em; /* Adjust as needed */
    /* Add any other styling for the number */
}

.rating-total-indicator .progress-ring {
    display: block; /* Ensure SVG takes full width */
    width: 100%; /* Make SVG responsive */
    height: auto;
}

.rating-total-indicator .progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: 0.35s stroke-dashoffset;
    stroke-width: 15px; /* Adjust as needed for initial size */
    stroke: black; /* Or your desired color */
    fill: transparent;
}

@media (max-width: 768px) {
    .rating-total-indicator .progress-ring__circle {
        stroke-width: 15px; /* Adjust stroke width for mobile */
    }
}

/* Carousel css */
.woocommerce-product-gallery__wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    max-width: 500px; /* Adjust for responsiveness */
    position: relative;
    margin: auto;
}

.woocommerce-product-gallery__image {
    min-width: 100%;
    transition: transform 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Navigation buttons */
.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: background 0.3s ease-in-out;
}

.carousel-prev:hover, .carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 5px;
}

.carousel-next {
    right: 5px;
}

/* Responsive design */
@media (max-width: 768px) {
    .woocommerce-product-gallery__wrapper {
        max-width: 100%;
    }

    .carousel-prev, .carousel-next {
        padding: 8px 12px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .carousel-prev, .carousel-next {
        padding: 6px 10px;
        font-size: 16px;
    }
}
/* Hide the selectors and fix the form */
/* Hide left and right arrows on desktop */
@media (min-width: 1024px) { 
    .carousel-arrow {
        display: none !important;
    }
}

/* Show arrows only on iPhones and iPads */
@media (max-width: 1024px) { 
    .carousel-arrow {
        display: block !important;
    }
}

/*@media (max-width: 1024px) {
    .carousel-prev, .carousel-next {
        display: none;
    }
}*/

/* Ensure "Color" and "Size" selection blocks appear in a uniform box layout */
.selection-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc; /* Add a border for consistency */
    padding: 10px;
    width: 100%;
    max-width: 300px; /* Adjust based on design */
    text-align: center;
}

/* Ensure dropdowns inside the selection boxes have a consistent size */
.selection-box select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
}

.single_add_to_cart_button {
    color: #000; /* Change to the theme color */
    background-color: #fff; /* Adjust to match the theme */
    border: 2px solid #000; /* Ensure visibility */
    font-weight: bold;
    padding: 12px 20px;
    width: 100%;
    text-align: center;
}

/* Ensure it’s visible on mobile */
@media (max-width: 768px) {
    .single_add_to_cart_button {
        color: #000 !important;
        background-color: #fff !important;
        border-color: #000 !important;
    }
}

/** Table for size and color **/
/* Make the variations table responsive */
@media (max-width: 768px) {
    .variations {
        width: 100%;
        display: block;
    }

    .variations tbody {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .variations tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px; /* Add spacing between selections */
    }

    .variations th.label {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        border: none;
    }

    .variations td.value {
        display: flex;
        justify-content: none;
        width: 100%;
	grid-template-columns: none;
    }

    .variations select {
        width: 100%;
        max-width: 300px; /* Adjust for better mobile layout */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        background-color: white;
    }

    .reset_variations {
        display: block;
        text-align: center;
        margin-top: 5px;
        font-size: 14px;
    }
}

@media (max-width: 768px) { /* Apply styles only on mobile */
    .variations {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .variations th.label label {
        border: none !important;
        background: none;
        padding: 0;
        margin: 0;
        font-weight: bold;
        display: block;
        text-align: center;
    }

    .variations td.value {
        width: 100%;
        text-align: center;
	display: block;
    }

    .variations select {
        width: 90%; /* Ensures uniform width */
        max-width: 300px; /* Prevents oversized dropdowns */
        padding: 10px;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
    }
}