/**
 * Estilos para el sistema de valoraciones, estrellas y productos recomendados
 * Ebenezer Abarrotes
 */

/* ==========================================================
   1. Estrellas en la cabecera del producto (Product Summary)
   ========================================================== */
.woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
    margin: 12px auto 18px auto !important;
    width: 100%;
    text-align: center;
    line-height: 1;
}

.woocommerce-product-rating a.woocommerce-review-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    cursor: pointer;
}

.woocommerce-product-rating .star-rating,
.woocommerce .star-rating {
    overflow: hidden;
    position: relative;
    height: 1.4em;
    line-height: 1.4;
    font-size: 1.7rem !important; /* Estrellas más grandes */
    width: 5.6em;
    letter-spacing: 4px;
    display: inline-block;
    margin: 0 auto !important;
}

/* Por defecto todas las estrellas amarillas si no hay valoraciones */
.woocommerce-product-rating.no-ratings .star-rating::before {
    content: "★★★★★";
    color: #ffb800 !important;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    font-family: inherit;
    letter-spacing: 4px;
}

/* Cuando ya existen valoraciones reales: fondo gris para estrellas vacías */
.woocommerce-product-rating.has-ratings .star-rating::before {
    content: "★★★★★";
    color: #d8d8d8 !important;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    font-family: inherit;
    letter-spacing: 4px;
}

.woocommerce-product-rating .star-rating span,
.woocommerce .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
}

.woocommerce-product-rating .star-rating span::before,
.woocommerce .star-rating span::before {
    content: "★★★★★";
    top: 0;
    position: absolute;
    left: 0;
    color: #ffb800 !important;
    font-family: inherit;
    letter-spacing: 4px;
}

/* Ocultar texto auxiliar de valoraciones */
.woocommerce-product-rating .woocommerce-review-link .sin-valoraciones,
.woocommerce-product-rating .woocommerce-review-link .count {
    display: none !important;
}

/* ==========================================================
   2. Sección de Valoración en la Ficha (Solo Logueados)
   ========================================================== */
.valoraciones-producto-seccion {
    margin-top: 35px;
    margin-bottom: 75px !important; /* Aumenta el espacio con También te recomendamos */
    padding-top: 25px;
    padding-bottom: 30px;
    border-top: 1px solid #e2e8f0;
    clear: both;
}

.valoraciones-producto-seccion .woocommerce-Reviews {
    max-width: 900px;
}

.valoraciones-producto-seccion .woocommerce-Reviews-title {
    color: #00075f;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 25px;
    border-bottom: 2px solid #00075f;
    padding-bottom: 8px;
    display: inline-block;
}

/* Ocultar bloque de comentarios en cualquier versión */
#reviews #comments,
.woocommerce-Reviews #comments,
.valoraciones-producto-seccion #comments,
.woocommerce-noreviews,
.commentlist {
    display: none !important;
}

/* ==========================================================
   3. Formulario para Añadir Valoración
   ========================================================== */
#review_form_wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 10px;
}

#review_form #reply-title {
    color: #00075f;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 18px;
    display: block;
}

/* Selector Interactivo de Estrellas */
#review_form .comment-form-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 18px;
}

#review_form .comment-form-rating label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0;
}

#review_form .comment-form-rating p.stars {
    margin: 0;
    line-height: 1;
}

#review_form .comment-form-rating p.stars span {
    display: inline-flex;
    gap: 6px;
}

#review_form .comment-form-rating p.stars a {
    display: inline-block;
    font-size: 1.6rem;
    color: #d8d8d8;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    line-height: 1;
}

#review_form .comment-form-rating p.stars a::before {
    content: "★";
}

#review_form .comment-form-rating p.stars:hover a {
    color: #ffb800;
}

#review_form .comment-form-rating p.stars a:hover ~ a {
    color: #d8d8d8;
}

#review_form .comment-form-rating p.stars.selected a.active {
    color: #ffb800;
}

#review_form .comment-form-rating p.stars.selected a.active ~ a {
    color: #d8d8d8;
}

#review_form .comment-form-rating p.stars.selected a:not(.active) {
    color: #ffb800;
}

/* Inputs y Textareas */
#review_form .comment-form-author,
#review_form .comment-form-email,
#review_form .comment-form-comment {
    margin-bottom: 16px;
}

#review_form label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: 'Roboto', sans-serif;
    color: #1f2937;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus {
    border-color: #00075f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 7, 95, 0.12);
}

/* Botón de Enviar Valoración */
#review_form .form-submit {
    margin-top: 15px;
    margin-bottom: 0;
}

#review_form .form-submit input[type="submit"] {
    background-color: #00075f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#review_form .form-submit input[type="submit"]:hover {
    background-color: #d00016;
}

#review_form .form-submit input[type="submit"]:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    #review_form_wrapper {
        padding: 18px;
    }
}

/* ==========================================================
/* ==========================================================
   4. Espaciado y Rejilla de Productos Recomendados
      Aplica EXCLUSIVAMENTE cuando el slider NO está activo (.no-slider)
   ========================================================== */
.single-product .related.products,
.single-product .upsells.products,
.single-product .up-sells.products {
    margin-top: 60px !important;
    padding-top: 30px !important;
    clear: both !important;
    width: 100% !important;
}

.single-product .upsells.products h2,
.single-product .up-sells.products h2 {
    margin-bottom: 25px !important;
    text-align: center !important;
}

/* Modo rejilla SIN slider (<= 5 productos) */
.single-product .related.products ul.products.no-slider,
.single-product .upsells.products ul.products.no-slider,
.single-product .up-sells.products ul.products.no-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.single-product .related.products ul.products.no-slider::before,
.single-product .related.products ul.products.no-slider::after,
.single-product .upsells.products ul.products.no-slider::before,
.single-product .upsells.products ul.products.no-slider::after,
.single-product .up-sells.products ul.products.no-slider::before,
.single-product .up-sells.products ul.products.no-slider::after {
    display: none !important;
    content: none !important;
}

.single-product .related.products ul.products.no-slider li.product,
.single-product .upsells.products ul.products.no-slider li.product,
.single-product .up-sells.products ul.products.no-slider li.product {
    flex: 0 0 calc(25% - 15px) !important;
    width: calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (max-width: 995px) {
    .single-product .related.products ul.products.no-slider li.product,
    .single-product .upsells.products ul.products.no-slider li.product,
    .single-product .up-sells.products ul.products.no-slider li.product {
        flex: 0 0 calc(33.333% - 14px) !important;
        width: calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 767px) {
    .single-product .related.products ul.products.no-slider li.product,
    .single-product .upsells.products ul.products.no-slider li.product,
    .single-product .up-sells.products ul.products.no-slider li.product {
        flex: 0 0 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .single-product .related.products ul.products.no-slider li.product,
    .single-product .upsells.products ul.products.no-slider li.product,
    .single-product .up-sells.products ul.products.no-slider li.product {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}