/* ==========================================================================
   MODULE: Product Reviews UI
   TRIGGER: .is-style-vortex-reviews
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESTRUCTURA DE LISTA (El Separador)
   -------------------------------------------------------------------------- */

/* 
   El <li> actúa solo como espaciador vertical.
   Le quitamos borde y fondo para que sea invisible.
*/
.is-style-vortex-reviews .review {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    /* ESTO SEPARA LAS PASTILLAS */
    list-style: none;
}

/* --------------------------------------------------------------------------
   2. LA PASTILLA (El Contenedor Interno)
   -------------------------------------------------------------------------- */

/* 
   Apuntamos a la columna interna que contiene la info.
   Esta es la que se ve visualmente como "tarjeta".
*/
.is-style-vortex-reviews .review .wp-block-column {
    background-color: none;
    /* Fondo Pastilla */
    border: 2px solid var(--wp--preset--color--accent-3);
    /* Borde Pastilla */
    border-radius: 20px;

    /* Padding interno: separa el texto del borde de la pastilla */
    padding: 1rem !important;
    margin-right: 20px !important;

    /* Animación suave */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    will-change: transform;

    /* Asegurar que ocupe el ancho disponible */
    width: 100%;
    box-sizing: border-box;
}

/* 
   HOVER: Aplicado a la pastilla interna, no al hueco.
*/
.is-style-vortex-reviews .review .wp-block-column:hover {
    transform: scale(1.01);
    /* Crece un poco */
    border-color: var(--wp--preset--color--accent-5);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   3. FORMULARIO DE RESEÑAS (Inputs & Typography)
   -------------------------------------------------------------------------- */

/* Labels */
.is-style-vortex-reviews label {
    font-weight: 700;
    color: var(--wp--preset--color--custom-blanco-suave, #f0f0f0);
    margin-bottom: 0.5rem;
    display: block;
}

/* Inputs y Textarea (Fondo Negro, Letra Blanca) */
.is-style-vortex-reviews textarea,
.is-style-vortex-reviews input[type="text"],
.is-style-vortex-reviews input[type="email"] {
    background-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--custom-blanco-suave, #fff) !important;
    font-weight: 600;
    border: 2px solid var(--wp--preset--color--accent-3);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus State */
.is-style-vortex-reviews textarea:focus,
.is-style-vortex-reviews input:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-5, #8c4bf7);
    box-shadow: 0 0 0 2px rgba(140, 75, 247, 0.2);
}

.is-style-vortex-reviews textarea:hover,
.is-style-vortex-reviews input:hover {
    outline: none;
    border-color: var(--wp--preset--color--accent-5, #8c4bf7);
    box-shadow: 0 0 0 2px rgba(140, 75, 247, 0.2);
}

/* --------------------------------------------------------------------------
   4. ESTRELLAS (Interactivas y Estáticas)
   -------------------------------------------------------------------------- */

/* Contenedor de estrellas */
.is-style-vortex-reviews .stars-wrapper {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

/* Botones de estrellas (SVG) */
.is-style-vortex-reviews .stars-wrapper button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--wp--preset--color--custom-blanco-suave, #fff);
    /* Blanco por defecto */

    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

/* SVG hereda color */
.is-style-vortex-reviews .stars-wrapper button svg {
    stroke: currentColor;
    fill: transparent;
    width: 28px;
    height: 28px;
    transition: fill 0.2s ease;
}

/* Estado Relleno (Seleccionado o Hover JS) */
.is-style-vortex-reviews .stars-wrapper button[aria-checked="true"] svg,
.is-style-vortex-reviews .stars-wrapper button.is-hovered svg {
    fill: currentColor;
}

/* HOVER: Crece */
.is-style-vortex-reviews .stars-wrapper button:hover {
    transform: scale(1.3);
}

/* CLICK: Se encoge (Feedback táctil) */
.is-style-vortex-reviews .stars-wrapper button:active {
    transform: scale(0.9);
}

/* Estrellas estáticas en la lista (Blanco) */
.is-style-vortex-reviews .wc-block-product-review-rating__stars {
    color: var(--wp--preset--color--custom-blanco-suave, #fff);
    font-size: 1rem;
}


/* --------------------------------------------------------------------------
   5. BOTÓN DE SUBMIT (Estilo Personalizado)
   -------------------------------------------------------------------------- */

/* Estado Base: Blanco (Inverso) para destacar */
.is-style-vortex-reviews input[type="submit"]#submit {
    background-color: var(--wp--preset--color--custom-blanco-suave, #f0f0f0) !important;
    color: var(--wp--preset--color--base, #000) !important;
    border: 1px solid var(--wp--preset--color--custom-blanco-suave, #f0f0f0) !important;

    /* Tipografía */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;

    /* Forma */
    border-radius: 50px !important;
    /* Pill total */
    padding: 1rem 3rem !important;
    margin-top: 1rem;

    /* Animación */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease !important;
    cursor: pointer;
}

/* Hover: Crece y brilla */
.is-style-vortex-reviews input[type="submit"]#submit:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    background-color: #fff !important;
    color: #000 !important;
}

/* Active: Click */
.is-style-vortex-reviews input[type="submit"]#submit:active {
    transform: scale(0.95) !important;
    box-shadow: none !important;
}