/* ============================================================
   CASA LUNA — Reviews CSS
   ============================================================ */

/* ── RATING SUMMARY ──────────────────────────────────────────── */
.rating-summary {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
}
.rs-score { text-align: center; flex-shrink: 0; }
.rs-num { display: block; font-family: var(--font-display); font-size: 4rem; color: var(--gold-lt); line-height: 1; }
.rs-stars { font-size: 1.4rem; color: var(--gold); letter-spacing: 2px; margin: 0.25rem 0; }
.rs-label { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.rs-divider { width: 1px; height: 80px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.rs-categories { display: flex; flex-direction: column; gap: 0.6rem; min-width: 220px; }
.rc-item { display: flex; align-items: center; gap: 0.75rem; }
.rc-label { font-family: var(--font-ui); font-size: 0.7rem; color: rgba(255,255,255,0.55); min-width: 90px; }
.rc-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.rc-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 1s ease; }
.rc-score { font-family: var(--font-ui); font-size: 0.72rem; color: var(--gold-lt); font-weight: 500; min-width: 24px; }
.rs-platforms { flex-shrink: 0; }
.rsp-logos { display: flex; flex-direction: column; gap: 0.5rem; }
.rsp-btn { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 1.1rem; border-radius: 3px; text-align: center; transition: opacity 0.2s; display: block; }
.rsp-btn:hover { opacity: 0.85; }

/* ── REVIEW CARDS ────────────────────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.review-card {
  background: white; border-radius: 6px; padding: 2rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  transition: transform 0.35s, box-shadow 0.35s;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rv-header { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.75rem; }
.rv-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dk));
  color: white; font-family: var(--font-display); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.rv-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rv-name { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--charcoal); }
.rv-location { font-family: var(--font-ui); font-size: 0.7rem; color: var(--stone); font-weight: 300; }
.rv-date { font-family: var(--font-ui); font-size: 0.68rem; color: var(--stone-lt); }
.rv-stars { font-size: 1rem; color: var(--gold); letter-spacing: 1px; flex-shrink: 0; }
.rv-tag {
  font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--terracotta); font-weight: 500;
  background: rgba(194,113,79,0.08); padding: 0.22rem 0.65rem;
  border-radius: 20px; display: inline-block; margin-bottom: 0.85rem;
}
.rv-text {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--stone-dk);
  line-height: 1.8; font-weight: 300; font-style: italic;
}
.rv-text::before { content: '"'; font-size: 1.5rem; color: var(--gold); line-height: 0; vertical-align: -0.4em; margin-right: 2px; }

/* ── REVIEW FORM ─────────────────────────────────────────────── */
.review-form-wrap { max-width: 800px; margin: 0 auto; }
.review-form { background: white; border-radius: 6px; padding: 2.5rem; box-shadow: var(--shadow); }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.rf-group { display: flex; flex-direction: column; gap: 0.4rem; }
.rf-full { margin-bottom: 1.25rem; }
.rf-group label {
  font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--stone-dk);
}
.rf-group input, .rf-group select, .rf-group textarea {
  font-family: var(--font-ui); font-size: 0.88rem; color: var(--charcoal);
  padding: 0.7rem 1rem; border: 1.5px solid var(--cream-dk); border-radius: 3px;
  background: var(--parchment); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.rf-group input:focus, .rf-group select:focus, .rf-group textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.12); background: white;
}
.rf-group textarea { resize: vertical; min-height: 140px; }
.rf-char-count { font-family: var(--font-ui); font-size: 0.65rem; color: var(--stone); text-align: right; margin-top: 0.25rem; }

/* Star rating input */
.rf-stars-group { margin-bottom: 1.25rem; }
.star-rating { display: flex; gap: 4px; margin: 0.4rem 0 0.25rem; }
.star {
  font-size: 2rem; color: var(--cream-dk); cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
}
.star:hover, .star.active { color: var(--gold); transform: scale(1.15); }
.star-label { font-family: var(--font-ui); font-size: 0.72rem; color: var(--stone); }

.rf-consent {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--stone);
  cursor: pointer; line-height: 1.5; margin-bottom: 1.5rem;
  text-transform: none; letter-spacing: 0; font-weight: 300;
}
.rf-consent input { accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; }

.rv-success {
  text-align: center; padding: 3rem 2rem;
  background: white; border-radius: 6px; box-shadow: var(--shadow);
}
.rv-success span { font-size: 3rem; display: block; margin-bottom: 1rem; }
.rv-success h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--charcoal); margin-bottom: 0.75rem; }
.rv-success p { font-family: var(--font-ui); font-size: 0.88rem; color: var(--stone); font-weight: 300; line-height: 1.7; max-width: 480px; margin: 0 auto; }

/* Dynamic review cards added by JS */
.review-card.rv-new { border-top-color: var(--terracotta); animation: msgIn 0.5s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } .rating-summary { gap: 1.5rem; } .rs-divider { display: none; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } .rf-row { grid-template-columns: 1fr; } }

/* ── BOOK DIRECT BUTTON (replaces platform logos) ─────────── */
.rsp-btn.rsp-direct {
  background: var(--terracotta);
  color: white;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  border-radius: 3px;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.rsp-btn.rsp-direct:hover {
  background: #A05A38;
  transform: translateY(-1px);
}