/**
 * @file ratings-reviews-modal.css
 * Modal "Write a Review" + modal de confirmación de éxito.
 */

/* ══════════════════════════════════════════════════════════════════════════
   MODAL BASE (compartido por write-review y success)
══════════════════════════════════════════════════════════════════════════ */
.rr-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
}
.rr-modal[hidden] { display: none; }

/* Backdrop animado */
.rr-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  cursor: pointer;
  animation: rr-fade-in .2s ease;
}

/* Dialog */
.rr-modal__dialog {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: var(--rr-radius, 6px);
  box-shadow: 0 10px 50px rgba(0,0,0,.22);
  width: 100%; max-width: 800px;
  max-height: 94vh; overflow-y: auto;
  margin: 1rem;
  display: flex; flex-direction: column;
  animation: rr-slide-up .25s cubic-bezier(.4,0,.2,1);
}

@keyframes rr-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.rr-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--rr-primary, #002663); color: #fff;
  padding: .9rem 1.4rem;
  border-radius: var(--rr-radius, 6px) var(--rr-radius, 6px) 0 0;
  position: sticky; top: 0; z-index: 2;
}
.rr-modal__title {
  margin: 0; font-size: .92rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.rr-modal__close {
  background: none; border: none; color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: 0 .25rem; opacity: .85; transition: opacity .15s;
}
.rr-modal__close:hover { opacity: 1; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.rr-modal__body { flex: 1; overflow-y: auto; }

/* Layout 2 columnas */
.rr-modal__layout { display: flex; flex-wrap: wrap; }

/* Columna producto */
.rr-modal__product {
  flex: 0 0 210px;
  padding: 2rem 1.25rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  border-right: 1px solid var(--rr-border, #dee2e6);
  background: #fafafa;
}
.rr-modal__product-img {
  max-width: 78%; height: auto; display: block; margin-bottom: 1rem;
}
.rr-modal__product-label {
  font-size: .78rem; color: var(--rr-gray, #6c757d); margin: 0 0 .3rem;
}
.rr-modal__product-name {
  font-size: .88rem; font-weight: 700;
  color: var(--rr-primary, #002663); margin: 0;
}

/* Columna formulario */
.rr-modal__form-col { flex: 1 1 380px; padding: 1.5rem 1.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════════════════════════════════ */
.rr-form__group { margin-bottom: 1.1rem; position: relative; }
.rr-form__row   { display: flex; gap: 1rem; }
.rr-form__row .rr-form__group { flex: 1 1 0; }

.rr-form__label {
  display: block; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--rr-gray, #6c757d); margin-bottom: .3rem;
}
.rr-form__label--required::after { content: ' *'; color: #d32f2f; }

.rr-form__hint { font-size: .78rem; color: var(--rr-gray, #6c757d); margin: 0 0 .5rem; }

.rr-form__input,
.rr-form__textarea {
  width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--rr-border, #dee2e6);
  border-radius: var(--rr-radius, 6px);
  font-size: .88rem; box-sizing: border-box;
  background: #fff; color: var(--rr-text, #212529);
  transition: border-color .15s, box-shadow .15s;
}
.rr-form__input:focus,
.rr-form__textarea:focus {
  outline: none;
  border-color: var(--rr-primary, #002663);
  box-shadow: 0 0 0 3px rgba(133,179,54,.18);
}
.rr-form__input.is-invalid,
.rr-form__textarea.is-invalid { border-color: #d32f2f; }
.rr-form__textarea { resize: vertical; }

.rr-form__error {
  display: block; font-size: .76rem;
  color: #d32f2f; margin-top: .25rem;
}

/* ── Stars widget ───────────────────────────────────────────────────────── */
.rr-form__group--stars { margin-bottom: 1.3rem; }
.rr-stars-widget {
  display: flex; align-items: center;
  gap: .05rem; flex-wrap: wrap; margin-top: .4rem;
}
.rr-star {
  font-size: 2.1rem; cursor: pointer;
  display: inline-flex; line-height: 1;
  transition: transform .1s;
  user-select: none;
}
/* Estrella inactiva */
.rr-star .fa-star { color: var(--rr-border, #dee2e6); transition: color .12s; }
/* Hover o activa */
.rr-star.is-active .fa-star,
.rr-star.is-hover  .fa-star { color: var(--rr-star, #f5a623); }
.rr-star:active { transform: scale(.88); }
.rr-stars-counter {
  font-size: .95rem; font-weight: 700;
  color: var(--rr-gray, #6c757d); margin-left: .65rem;
}

/* ── Radio YES/NO ───────────────────────────────────────────────────────── */
.rr-radio-group { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.rr-radio-btn {
  padding: .4rem 1.15rem;
  border: 2px solid var(--rr-border, #dee2e6);
  border-radius: var(--rr-radius, 6px);
  font-size: .82rem; font-weight: 700;
  cursor: pointer; letter-spacing: .04em;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
input[type="radio"]:checked + .rr-radio-btn,
.rr-radio-btn:hover {
  background: var(--rr-primary, #002663);
  border-color: var(--rr-primary, #002663); color: #fff;
}

/* ── Acciones ───────────────────────────────────────────────────────────── */
.rr-form__actions { margin: 1.25rem 0 .75rem; }
.rr-btn--submit   { width: 100%; justify-content: center; }

/* ── Términos ───────────────────────────────────────────────────────────── */
.rr-form__terms {
  font-size: .76rem; color: var(--rr-gray, #6c757d);
  margin-top: .75rem; line-height: 1.55;
}
.rr-form__checkbox-label {
  display: flex; gap: .5rem; align-items: flex-start; cursor: pointer;
}

.rr-form__checkbox-label input[type=checkbox] {
  display: block !important
}

.rr-form__checkbox { flex-shrink: 0; margin-top: .18rem; cursor: pointer; accent-color: var(--rr-primary, #002663); }
.rr-form__terms a { color: var(--rr-text, #212529); text-decoration: underline; }
.rr-form__disclaimer {
  font-size: .73rem; color: var(--rr-gray, #6c757d);
  margin-top: .75rem; line-height: 1.5;
}

/* ── Zona de mensajes de error inline ──────────────────────────────────── */
.rr-form__messages { margin-top: .75rem; }
.rr-alert {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem 1rem; border-radius: var(--rr-radius, 6px);
  font-size: .85rem; font-weight: 600; margin-bottom: .5rem;
  animation: rr-fade-in .2s ease;
}
.rr-alert--error   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.rr-alert__icon    { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL DE ÉXITO (success confirmation)
══════════════════════════════════════════════════════════════════════════ */
.rr-success-modal .rr-modal__dialog {
  max-width: 420px; text-align: center;
}
.rr-success-modal .rr-modal__header {
  border-radius: var(--rr-radius, 6px) var(--rr-radius, 6px) 0 0;
}
.rr-success-body {
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
}
.rr-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--rr-primary, #002663);
  display: flex; align-items: center; justify-content: center;
  animation: rr-pop .35s cubic-bezier(.4,0,.2,1);
}
@keyframes rr-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.rr-success-icon .fa-check {
  font-size: 2rem; color: #fff;
}
.rr-success-title {
  font-size: 1.2rem; font-weight: 700;
  color: var(--rr-text, #212529); margin: 0;
}
.rr-success-msg {
  font-size: .9rem; color: var(--rr-gray, #6c757d);
  line-height: 1.6; margin: 0;
}
.rr-success-body .rr-btn { min-width: 140px; justify-content: center; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .rr-modal__dialog   { margin: 0; border-radius: 14px 14px 0 0; max-height: 96vh; align-self: flex-end; }
  .rr-modal__product  { display: none; }
  .rr-modal__form-col { padding: 1.25rem; }
  .rr-form__row       { flex-direction: column; }
  .rr-stars-widget    { gap: .1rem; }
  .rr-star            { font-size: 2.4rem; }
}