/**
 * Theme Name: Finch
 * Theme URI: http://www.yootheme.com
 * Description: Finch is the November 2015 theme of the YOOtheme club. It is based on YOOtheme's Warp theme framework. NOTE: It is not free or public. This theme is for members of the YOOtheme club only.
 * Version: 1.0.5
 * Author: YOOtheme
 * Author URI: http://www.yootheme.com
 */

/* Estilos generales de la tabla de reseñas */
.resenas-container {
  width: 100%;
  overflow-x: auto; /* Permite desplazamiento horizontal en pantallas pequeñas */
}

.resenas-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: sans-serif; /* Puedes ajustar la fuente */
}

.resenas-tabla th,
.resenas-tabla td {
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: top;
  text-align: left;
}

.resenas-tabla th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}

/* Estilos de la celda del producto */
.resena-producto-cell {
  width: 150px; /* Ancho fijo para la imagen del producto */
  min-width: 120px; /* Asegura un mínimo */
  text-align: center;
}

.resena-producto-img {
  max-width: 100px; /* Tamaño máximo de la imagen del producto */
  height: auto;
  display: block;
  margin: 0 auto 5px; /* Centra la imagen y añade margen inferior */
  border-radius: 4px; /* Bordes ligeramente redondeados */
}

.resena-producto-name {
  font-size: 0.9em;
  color: #555;
  word-wrap: break-word; /* Permite que el texto largo se rompa */
}

/* Estilos de la celda de contenido de la reseña */
.resena-content-cell {
  text-align: left;
}

.resena-content-wrapper h4 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #222;
}

.resena-content-wrapper p {
  margin-bottom: 5px;
  line-height: 1.5;
  color: #444;
}

/* Estilos para las estrellas de calificación */
.star-rating {
  color: #ffc107; /* Color dorado para las estrellas llenas */
  font-size: 1.2em;
  line-height: 1;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
  .resenas-tabla,
  .resenas-tabla thead,
  .resenas-tabla tbody,
  .resenas-tabla th,
  .resenas-tabla td,
  .resenas-tabla tr {
    display: block; /* Hace que las filas y celdas se apilen */
  }

  .resenas-tabla thead {
    /* Oculta el encabezado de la tabla, ya que las etiquetas se mostrarán con los datos */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .resenas-tabla tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden; /* Para que el borde redondeado se vea bien */
  }

  .resenas-tabla td {
    border: none; /* Elimina los bordes internos */
    position: relative;
    padding-left: 50%; /* Espacio para las etiquetas */
    text-align: right; /* Alinea el contenido a la derecha */
  }

  .resenas-tabla td:before {
    /* Crea etiquetas pseudo-elementos */
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: #555;
  }

  /* Asigna las etiquetas a cada celda */
  .resenas-tabla td.resena-producto-cell:before {
    content: "Producto:";
  }
  .resenas-tabla td.resena-content-cell:before {
    content: "Detalles:";
  }

  .resena-producto-cell,
  .resena-content-cell {
    width: auto; /* Permite que las celdas tomen el ancho completo */
    text-align: left; /* Restaura la alineación para el contenido dentro de la celda */
    padding-bottom: 0;
  }

  .resena-producto-name {
    margin-top: 0; /* Ajusta el margen para móviles */
    text-align: center;
  }
}

/* Estilos para el formulario de reseña de Contact Form 7 */

.wpcf7 {
  /* Resetea los estilos por defecto de CF7 si es necesario */
  margin: 0 auto;
  padding: 0;
  max-width: 600px; /* Limita el ancho del formulario */
}

.review-form-wrapper {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-family: "Arial", sans-serif; /* Puedes usar tu fuente principal */
  color: #333;
}

.form-title {
  font-size: 2em;
  color: #2c3e50;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}

.form-description {
  font-size: 1.1em;
  color: #7f8c8d;
  margin-bottom: 30px;
  text-align: center;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #34495e;
  font-size: 1em;
}

.required-asterisk {
  color: #e74c3c; /* Rojo para el asterisco de requerido */
  margin-left: 4px;
}

.review-form-wrapper input[type="text"],
.review-form-wrapper input[type="email"],
.review-form-wrapper select,
.review-form-wrapper textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none; /* Para personalizar el select en algunos navegadores */
  -moz-appearance: none;
  appearance: none;
  background-color: #f8f8f8;
}

.review-form-wrapper select {
  background-image: url('data:image/svg+xml;utf8,<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Flecha personalizada para el select */
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px; /* Espacio para la flecha */
}

.review-form-wrapper input[type="text"]:focus,
.review-form-wrapper input[type="email"]:focus,
.review-form-wrapper select:focus,
.review-form-wrapper textarea:focus {
  border-color: #3498db; /* Azul al enfocar */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3); /* Sombra suave al enfocar */
  outline: none; /* Elimina el contorno por defecto del navegador */
}

.review-form-wrapper textarea {
  min-height: 120px;
  resize: vertical; /* Permite redimensionar verticalmente */
}

.wpcf7-submit {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background-color: #ffa400; /* Botón verde vibrante */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 20px;
}

.wpcf7-submit:hover {
  background-color: #cc8300; /* Verde más oscuro al pasar el ratón */
  transform: translateY(-2px); /* Efecto de "levantar" */
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  background-color: #d4edda; /* Verde claro para éxito */
  color: #155724;
  border-color: #c3e6cb;
}

.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-validation-errors {
  background-color: #f8d7da; /* Rojo claro para error/validación */
  color: #721c24;
  border-color: #f5c6cb;
}

/* Estilos para la calificación de estrellas (si decides hacerla visualmente en el frontend) */
/* NOTA: Esto solo afectará la visualización si el campo es un select. 
 Para una interacción real de estrellas, se necesitaría JavaScript. */
.calificacion-resena-stars {
  display: inline-block;
  color: #ffc107; /* Color de estrella */
  font-size: 1.5em; /* Tamaño de la estrella */
  margin-left: 5px;
}
.calificacion-resena-stars .star-empty {
  color: #ccc; /* Estrellas vacías */
}

/* Opcional: Estilo para ocultar la flecha por defecto del select en algunos navegadores */
select::-ms-expand {
  display: none;
}