/* Reviews Section Styling */

.fppd-reviews-container {
  background-color: #f8f9fa; /* Light background for the whole section */
  padding: 3rem 0;
}

.fppd-section-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2.2rem;
  color: #333;
  text-transform: uppercase;
  font-weight: 700;
}

/* Review Form Card */
.fppd-review-form-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  padding: 1.5rem !important;
  border-radius: 0.5rem; /* Usar border-radius de Bootstrap por defecto o especificar si se necesita más */
}

.fppd-review-form-card .card-title {
  color: #333;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.5rem !important;
}

/* Form Layout Adjustments */
/* Alineación general dentro del formulario */
#fppd-review-submission-form .col-12 {
    display: flex;
    align-items: center; /* Alinea elementos verticalmente en el centro */
}

/* Primera fila: Calificación y Correo */
#fppd-review-submission-form .fppd-rating-section {
    flex-shrink: 0; /* Evita que el contenedor de estrellas se encoja */
    margin-right: 1rem; /* Espacio entre las estrellas y el email */
}

#fppd-review-submission-form .fppd-email-section {
    flex-grow: 1; /* Permite que el email ocupe el espacio restante */
    min-width: 150px; /* Asegura un ancho mínimo para el email en pantallas pequeñas */
}

/* Segunda fila: Comentario y Media */
#fppd-review-submission-form .fppd-comment-section {
    flex-grow: 1; /* Permite que el comentario ocupe el espacio principal */
    margin-right: 1rem; /* Espacio entre el comentario y la media */
}

.fppd-media-section {
    flex-shrink: 0; /* Evita que la sección de media se encoja */
    width: 150px; /* Ancho fijo para la sección de media */
    display: flex; /* Hacemos este un flex container */
    flex-direction: column; /* Apilamos los elementos verticalmente */
    align-items: center; /* Centramos horizontalmente */
    justify-content: center; /* Centramos verticalmente */
    text-align: center;
    border: 1px dashed #ced4da; /* Borde punteado para previsualización */
    overflow: hidden; /* Asegura que la media no se salga */
    padding: 5px; /* Espacio interno */
    gap: 5px; /* Espacio entre los elementos internos */
}

.fppd-media-section label.btn {
    position: static; /* Cambiado de absolute a static */
    width: calc(100% - 10px); /* Ajusta el ancho con padding */
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    z-index: auto; /* Restablecer z-index */
    margin-top: auto; /* Empuja el botón hacia abajo si hay espacio */
    margin-bottom: 0; /* Asegura que no haya margen inferior */
}

#fppd-media-preview {
    width: 100%;
    height: 100px; /* Altura fija para el área de previsualización */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef; /* Fondo claro para previsualización */
    color: #6c757d;
    font-size: 0.75rem;
    overflow: hidden;
    position: relative; /* Es necesario para el posicionamiento de la imagen/video dentro */
    flex-shrink: 0; /* Evita que se encoja cuando hay mucho texto */
}

#fppd-media-preview img,
#fppd-media-preview video {
    position: absolute; /* Para centrar y controlar el tamaño */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen/video dentro del contenedor sin recortar */
    background-color: #e9ecef; /* Fondo para evitar zonas transparentes si object-fit: contain no llena todo */
}


/* Star Rating Input */
.fppd-star-rating-input {
  display: inline-block;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.fppd-star-rating-input .star {
  color: #ccc;
  transition: color 0.2s ease-in-out;
}

.fppd-star-rating-input .star.selected,
.fppd-star-rating-input .star.hover {
  color: #ffc107;
}

/* Feedback message */
#fppd-review-form-feedback {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

/* Submit button */
#fppd-review-submission-form .btn-primary {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}



.fppd-review-stars {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.fppd-review-stars .star {
  color: #ccc;
}

.fppd-review-stars .star.filled {
  color: #ffc107;
}

/* Ocultar el nombre del autor/email para cumplir la regla "sin datos del cliente" */
.fppd-review-author {
  display: none; /* Oculta el nombre del autor */
}

.fppd-review-comment {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  flex-grow: 1; /* Permite que el comentario ocupe el espacio necesario */
}

.fppd-review-date {
  font-size: 0.8rem;
  color: #777;
  margin-top: 1rem;
}

/* Loading Spinner */
#fppd-reviews-loading .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Responsive Adjustments (solo para el formulario, Masonry maneja el grid) */
@media (max-width: 767.98px) {
  .fppd-section-title {
    font-size: 1.8rem;
  }
  .fppd-review-form-card {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem !important;
  }

  /* Force stacking for form elements on small screens */
  #fppd-review-submission-form .col-12 {
      flex-direction: column; /* Apila los elementos */
      align-items: flex-start; /* Alinea a la izquierda al apilar */
  }

  #fppd-review-submission-form .fppd-rating-section {
      margin-right: 0; /* Sin margen derecho al apilar */
      margin-bottom: 0.5rem; /* Espacio inferior */
  }

  #fppd-review-submission-form .fppd-email-section {
      width: 100%; /* Ancho completo */
      margin-bottom: 1rem;
  }

  #fppd-review-submission-form .fppd-comment-section {
      margin-right: 0; /* Sin margen derecho al apilar */
      width: 100%; /* Ancho completo */
      margin-bottom: 1rem;
  }

  .fppd-media-section {
      width: 100%; /* Ancho completo */
      height: auto; /* Permite que la altura se ajuste */
      min-height: 150px; /* Altura mínima para la sección de media en móvil */
      margin-bottom: 1rem;
      padding: 10px; /* Aumenta el padding para dar más espacio */
  }

  .fppd-media-section label.btn {
      width: 100%; /* Ocupa todo el ancho disponible */
  }

  #fppd-media-preview {
      height: 100px; /* Altura fija para la previsualización en móvil también */
  }


  #fppd-review-form-feedback {
      text-align: center;
      width: 100%;
      margin-top: 1rem;
  }
  #fppd-review-submission-form button[type="submit"] {
      width: 100%; /* Botón de enviar ocupa todo el ancho */
  }

    /* Las reglas de grid de #fppd-reviews-grid para media queries se han eliminado.
       Masonry.js ahora controla el número de columnas a través de JavaScript. */
}

/* Las media queries para tablet y desktop también se han vaciado de reglas de grid. */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablet adjustments: Masonry.js se encargará del layout */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Desktop mediano: Masonry.js se encargará del layout */
}

@media (min-width: 1200px) {
    /* Desktop grande: Masonry.js se encargará del layout */
}




#fppd-reviews-grid {
  position: relative;
}

/* Desktop grande: 4 columnas */
.grid-sizer,
.fppd-review-card {
  width: 25%;
  margin-top:20px
}

/* Tablet/desktop medio: 3 columnas */
@media (max-width: 1199px) {
  .grid-sizer,
  .fppd-review-card {
    width: 25%;
    margin-top:20px
  }
}

/* Tablet pequeño: 2 columnas */
@media (max-width: 991px) {
  .grid-sizer,
  .fppd-review-card {
    width: 45%;
  }
}

/* Móvil: 2 columnas o 1 si quieres */
@media (max-width: 767px) {
  .grid-sizer,
  .fppd-review-card {
    width: 45%;
  }
}