/* ==========================================================================
   TuVendes Review Module - Final "Passive" Solution
   Fully Protected for Houzez 4.3.5 Layout Rules
   ========================================================================== */

/* 1. Root Modal Positioning & Layout Isolation */
body #tuvendes-modal-global {
    display: none;
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;       /* MODIFICADO: Cambiado de right a left */
    right: auto !important;      /* MODIFICADO: Desactivado right para forzar la izquierda */
    z-index: 99999999 !important;
    width: 260px !important;     /* MODIFICADO: Reducido de 320px a 260px para hacerlo más pequeño */
    background: #ffffff !important;
    padding: 18px !important;    /* MODIFICADO: Reducido de 25px a 18px para compactar el recuadro */
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16) !important;
    border: 1px solid #e0e0e0 !important;
    text-align: center !important;
    font-family: sans-serif !important;
    /* Reset and lock placement properties against breaking page templates */
    transform: none !important;
    top: auto !important;
    box-sizing: border-box !important;
}

/* 2. Star Rating Container Layout */
body #tuvendes-modal-global .star-rating {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    margin: 15px 0 !important;
    background: none !important;
    padding: 0 !important;
}

/* 3. Safe Hide - Only visually hide the radio, do not remove from DOM */
body #tuvendes-modal-global .star-rating input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none !important;
}

/* 4. Labels - Aesthetic Styling & Color Reset */
body #tuvendes-modal-global .star-rating label {
    font-size: 30px !important; /* MODIFICADO: Reducido de 36px a 30px para que las 5 estrellas quepan alineadas en el nuevo ancho */
    color: #ddd !important; /* Forces uniform baseline gray, removing theme black */
    transition: color 0.15s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 0 2px !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
}

/* 5. Logic - Using sibling selector for yellow stars */
body #tuvendes-modal-global .star-rating input[type="radio"]:checked ~ label,
body #tuvendes-modal-global .star-rating label:hover,
body #tuvendes-modal-global .star-rating label:hover ~ label {
    color: #ffb800 !important; /* Locked gold color for active selection and hover states */
}

/* 6. Theme Overrides - Neutralize Houzez extra wrappers and radio circles */
body #tuvendes-modal-global .star-rating .radio, 
body #tuvendes-modal-global .star-rating .radio-inline,
body #tuvendes-modal-global .star-rating span {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   ADDED: 7. Inner Content Hardening (Protection against Houzez 4.3.5 Form Elements)
   ========================================================================== */

/* Typography resets inside the compact container */
body #tuvendes-modal-global h3 {
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0 0 8px 0 !important;
    color: #333333 !important;
    line-height: 1.3 !important;
}

body #tuvendes-modal-global p {
    font-size: 13px !important;
    margin: 0 0 12px 0 !important;
    color: #666666 !important;
    line-height: 1.4 !important;
}

/* Custom Textarea styling locked against theme row/padding overrides */
body #tuvendes-modal-global textarea#tuvendes-review-text {
    width: 100% !important;
    height: 70px !important;
    max-height: 90px !important;
    padding: 8px !important;
    font-size: 12px !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    background: #fbfbfb !important;
    resize: none !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    color: #333333 !important;
}

/* Button layout control preventing button stretching */
body #tuvendes-modal-global .btn-main {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background: #004274 !important; /* Standardized primary dark tone, replace with your brand hex if needed */
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    margin-top: 5px !important;
}

body #tuvendes-modal-global .btn-main:hover {
    background: #002d52 !important;
}

/* Secondary/Close link style positioning */
body #tuvendes-modal-global .lnk-close {
    display: inline-block !important;
    margin-top: 10px !important;
    font-size: 11px !important;
    color: #999999 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

body #tuvendes-modal-global .lnk-close:hover {
    color: #666666 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   ADDED: 8. Flow/Step Control (Syncs perfectly with transitions in reviews.js)
   ========================================================================== */
body #tuvendes-modal-global #step-form,
body #tuvendes-modal-global #step-thanks {
    display: none;
}