/* =========================================================================
   Product Questions — adaptado al estilo de la web
   Tipografía Poppins, titulares azul marino, acentos verdes, tarjetas
   blancas con borde verde suave y esquinas redondeadas.
   Se mantienen todos los selectores originales: el módulo no necesita
   cambios en sus plantillas.
   ========================================================================= */

:root {
    --pq-navy: #1b2d52;        /* titulares */
    --pq-navy-dark: #12203d;
    --pq-green: #1fa34a;       /* acentos, iconos, botón principal */
    --pq-green-dark: #178a3d;
    --pq-green-soft: #eef8f1;  /* fondo de respuestas y avisos */
    --pq-green-line: #d6ecdd;  /* borde de tarjetas */
    --pq-text: #1f2937;
    --pq-muted: #6b7280;
    --pq-line: #e3e8ee;
    --pq-input-line: #d3dbe4;
    --pq-error: #c62828;
    --pq-error-soft: #fdecec;
    --pq-radius: 12px;
    --pq-radius-sm: 8px;
    --pq-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Listado de preguntas ---------- */

.item-questions {
    border-bottom: 1px solid var(--pq-line);
    margin-bottom: 0;
    padding: 22px 0;
    font-family: var(--pq-font);
}
.item-questions:last-of-type { border-bottom: 0; }

/* Autor y fecha */
.answBox .answInf {
    padding: 0 0 8px;
    font-family: var(--pq-font);
    font-size: 13px;
    color: var(--pq-muted);
}
.answBox .answInf b {
    color: var(--pq-navy);
    font-weight: 600;
}
.answBox .answInf strong {
    color: var(--pq-green);
    font-weight: 600;
}
.answBox .answInf span {
    color: #c3cad3;
    padding: 0 6px;
}

/* Pregunta */
.answBox-question {
    font-family: var(--pq-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--pq-navy);
}

/* Respuesta de la tienda: bloque verde suave con filete a la izquierda */
.answBox-response {
    margin: 14px 0 4px 28px;
    padding: 14px 18px;
    background: var(--pq-green-soft);
    border-left: 3px solid var(--pq-green);
    border-radius: 0 var(--pq-radius-sm) var(--pq-radius-sm) 0;
    font-family: var(--pq-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pq-text);
}

.answBox-question a,
.answBox-response a {
    color: var(--pq-green-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.answBox-question a:hover,
.answBox-response a:hover { color: var(--pq-navy); }

/* ---------- Formulario "Haz una pregunta" ---------- */

#add-question-form {
    display: none; /* lo abre el módulo */
    margin-top: 24px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--pq-green-line);
    border-radius: var(--pq-radius);
    overflow: hidden;
    font-family: var(--pq-font);
}

#add-question-form .title-rev {
    padding: 18px 24px 4px;
    border-bottom: 0;
    font-family: var(--pq-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pq-navy);
}

#add-question-form .form-right { width: 80%; }

#add-question-form .form-right .input-custom,
#add-question-form .form-right .textarea-custom {
    margin-left: 0 !important;
    width: 80% !important;
}
#add-question-form .form-right .textarea-custom { height: 120px; }

#body-add-prodquestions-form { padding: 8px 24px 16px; }

#body-add-prodquestions-form label,
#body-add-prodquestions-form .label-span {
    display: inline-block;
    margin: 16px 0 6px;
    font-family: var(--pq-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--pq-navy);
    text-align: left;
}

#body-add-prodquestions-form input,
#body-add-prodquestions-form textarea {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    border: 1px solid var(--pq-input-line);
    border-radius: var(--pq-radius-sm);
    background: #fff;
    font-family: var(--pq-font);
    font-size: 14px;
    color: var(--pq-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#body-add-prodquestions-form input {
    height: 44px;
    padding: 0 14px;
}
#body-add-prodquestions-form textarea {
    height: 160px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

#body-add-prodquestions-form input:focus,
#body-add-prodquestions-form textarea:focus {
    outline: none;
    border-color: var(--pq-green);
    box-shadow: 0 0 0 3px rgba(31, 163, 74, .18);
}

/* Campos rellenados automáticamente (cliente identificado) */
#body-add-prodquestions-form .form-control {
    display: block;
    width: 100%;
    border-radius: var(--pq-radius-sm);
    background: #f5f7f9;
    color: #8a93a0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    vertical-align: middle;
    cursor: not-allowed;
}
#body-add-prodquestions-form .cursor-active {
    background: #fff;
    color: var(--pq-text) !important;
    cursor: auto !important;
}

#body-add-prodquestions-form input#inpCaptchaReviewQuestion,
#body-add-prodquestions-form input#inpCaptchaAbuse {
    min-width: 20% !important;
    width: 20% !important;
}

#body-add-prodquestions-form .required,
.prodquestions-req { color: var(--pq-error); }

#body-add-prodquestions-form .avatar-guid {
    margin-top: 6px;
    font-size: 12px;
    color: var(--pq-muted);
}

#footer-add-prodquestions-form-prodquestions {
    padding: 16px 24px 24px;
    text-align: center;
}

/* ---------- Botones ---------- */

.btn-custom,
#footer-add-prodquestions-form-prodquestions .btn-success:hover,
#footer-add-prodquestions-form-prodquestions .btn-success:focus,
#footer-add-prodquestions-form-prodquestions .btn-success:active,
#footer-add-prodquestions-form-prodquestions .btn-success.active {
    display: inline-block;
    margin-bottom: 0;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: var(--pq-radius-sm);
    font-family: var(--pq-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-custom b { color: #fff; font-weight: 600; }

/* Botón principal: verde de la web */
#footer-add-prodquestions-form-prodquestions .btn-success,
.btn-success-custom,
.btn-success-custom:focus {
    background-color: var(--pq-green) !important;
    border-color: var(--pq-green) !important;
    color: #fff !important;
    font-weight: 600;
}
#footer-add-prodquestions-form-prodquestions .btn-success:hover,
.btn-success-custom:hover {
    background-color: var(--pq-green-dark) !important;
    border-color: var(--pq-green-dark) !important;
}

/* Botón secundario: azul marino de los titulares */
.btn-primary-prodquestions {
    background-color: var(--pq-navy) !important;
    border-color: var(--pq-navy) !important;
    color: #fff !important;
}
.btn-primary-prodquestions:hover {
    background-color: var(--pq-navy-dark) !important;
    border-color: var(--pq-navy-dark) !important;
}

.btn-custom:focus-visible,
.btn-success-custom:focus-visible,
.btn-primary-prodquestions:focus-visible {
    outline: 3px solid rgba(31, 163, 74, .35);
    outline-offset: 2px;
}

.no-reg-button-custom { margin: 0 auto !important; }
.cancel-button-custom { float: right; margin-bottom: 0 !important; }
.add-button-custom { margin: 8px auto 0 !important; }

/* ---------- Paginación ---------- */

.pages {
    height: auto;
    margin-top: 24px;
    padding: 0 0 10px;
    font-family: var(--pq-font);
    font-size: 14px;
    line-height: 1.2;
}
.pages span, .pages b, .pages a { font-weight: 600; }
.pages a { color: var(--pq-navy); }
.pages span { color: #b8c0ca; padding: 0 8px 0 0; }
.pages span.nums { padding: 0 10px 0 4px; }

.pages span.nums b,
.pages span.nums a {
    display: inline-block;
    min-width: 34px;
    margin-right: 6px;
    padding: 8px 10px;
    border-radius: var(--pq-radius-sm);
    background: #f1f4f7;
    text-align: center;
    text-decoration: none;
}
.pages span.nums a:hover { background: var(--pq-navy); color: #fff; }
.pages span.nums b { background: var(--pq-green); color: #fff; }

/* ---------- Avisos ---------- */

.no-registered {
    margin: 12px;
    font-family: var(--pq-font);
    font-weight: 600;
    color: var(--pq-navy);
    text-align: center;
}

#succes-question {
    display: none; /* lo muestra el módulo */
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid var(--pq-green-line);
    border-radius: var(--pq-radius-sm);
    background: var(--pq-green-soft);
    font-family: var(--pq-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--pq-green-dark);
    text-align: center;
}

.error_testimonials_form { background-color: #fffbea; }

.errorTxtAdd {
    padding: 4px 0;
    font-family: var(--pq-font);
    font-size: 12px;
    color: var(--pq-error);
}
.error-current-input {
    background-color: var(--pq-error-soft) !important;
    border-color: var(--pq-error) !important;
}
.error-label, .error-label p { color: var(--pq-error) !important; }

.inpCaptchaReviewQuestion {
    min-height: 18px;
    margin-top: 2px;
    margin-left: 10px;
    font-size: 13px;
}

/* ---------- Utilidades del módulo (sin cambios de comportamiento) ---------- */

.float-left { float: left; }
.float-right { float: right; }
.clr { clear: both; display: block; font-size: 0; line-height: 0; overflow: hidden; }
.clear { clear: both; }
.id-margin-top { margin-top: 10px !important; }
.text-align-center-custom { text-align: center !important; }
.align_center { text-align: center; }
.margin-top-10 { margin-top: 10px; }

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
    .answBox-response { margin-left: 12px; padding: 12px 14px; }
    #add-question-form .form-right,
    #add-question-form .form-right .input-custom,
    #add-question-form .form-right .textarea-custom { width: 100% !important; }
    #add-question-form .title-rev { padding: 16px 16px 4px; font-size: 18px; }
    #body-add-prodquestions-form { padding: 8px 16px 12px; }
    #footer-add-prodquestions-form-prodquestions { padding: 14px 16px 20px; }
    #body-add-prodquestions-form input#inpCaptchaReviewQuestion,
    #body-add-prodquestions-form input#inpCaptchaAbuse { width: 40% !important; min-width: 40% !important; }
    .cancel-button-custom { float: none; display: block; margin: 10px auto 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-custom, #body-add-prodquestions-form input, #body-add-prodquestions-form textarea { transition: none; }
}