/* ================================================================
   reviews.css  — Emporium Library review system
   All selectors prefixed with .rev- to prevent collision.
   ================================================================ */

.rev-section-inner {
  width: min(860px, 92%);
  margin: 0 auto;
}

.rev-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #1b2a41;
  margin-bottom: 1.5rem;
}

.rev-summary {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.4rem 1.8rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.rev-avg-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.rev-avg-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 600;
  color: #1b2a41;
  line-height: 1;
}

.rev-avg-stars { margin: 6px 0 4px; }
.rev-avg-count { font-family: 'Poppins', sans-serif; font-size: 12px; color: #6b7280; }
.rev-dist { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.rev-dist-row { display: flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 12px; color: #4b5563; }
.rev-dist-label { min-width: 28px; }
.rev-dist-label .fa-star { color: #f59e0b; font-size: 10px; }
.rev-dist-bar-wrap { flex: 1; height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.rev-dist-bar { height: 100%; background: linear-gradient(90deg, #ff7a18, #ff9f43); border-radius: 99px; transition: width 0.6s ease; }
.rev-dist-count { min-width: 18px; text-align: right; }

.rev-star-display, .rev-strip-stars .fa-star { color: #f59e0b; font-size: 13px; }
.rev-star-display.fa-regular, .rev-strip-stars .fa-regular.fa-star { color: #d1d5db; }

.rev-form-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.5rem 1.8rem; margin-bottom: 2rem; }
.rev-form-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 600; color: #1b2a41; margin-bottom: 1rem; }
.rev-star-picker { display: flex; gap: 6px; margin-bottom: 4px; }
.rev-star-pick { font-size: 1.6rem; color: #f59e0b; cursor: pointer; transition: transform 0.15s ease; }
.rev-star-pick.fa-regular { color: #d1d5db; }
.rev-star-pick:hover { transform: scale(1.2); }
.rev-star-hint { font-family: 'Poppins', sans-serif; font-size: 12px; color: #9ca3af; display: block; margin-bottom: 1rem; }
.rev-textarea { width: 100%; min-height: 100px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #374151; resize: vertical; outline: none; transition: border-color 0.2s ease; box-sizing: border-box; }
.rev-textarea:focus { border-color: #ff7a18; }
.rev-form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.rev-char-count { font-family: 'Poppins', sans-serif; font-size: 12px; color: #9ca3af; }
.rev-form-msg { font-family: 'Poppins', sans-serif; font-size: 13px; margin-top: 8px; min-height: 18px; }
.rev-form-msg--success { color: #16a34a; }
.rev-form-msg--error   { color: #dc2626; }
.rev-auth-note { font-family: 'Poppins', sans-serif; font-size: 14px; color: #6b7280; padding: 1rem 1.2rem; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 10px; margin-bottom: 1.5rem; }
.rev-signin-link { color: #ff7a18; font-weight: 600; text-decoration: none; }
.rev-signin-link:hover { text-decoration: underline; }
.rev-sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 1.2rem; flex-wrap: wrap; }
.rev-sort-label { font-family: 'Poppins', sans-serif; font-size: 13px; color: #6b7280; }
.rev-sort-btn { font-family: 'Poppins', sans-serif; font-size: 13px; padding: 5px 14px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #4b5563; cursor: pointer; transition: all 0.2s ease; }
.rev-sort-btn.active, .rev-sort-btn:hover { border-color: #ff7a18; color: #ff7a18; background: #fff7ed; }
.rev-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.2rem 1.4rem; margin-bottom: 14px; transition: box-shadow 0.2s ease; }
.rev-card:hover { box-shadow: 0 4px 18px rgba(15,23,42,0.07); }
.rev-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rev-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #1b2a41, #2d4a6e); color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rev-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.rev-card-meta { flex: 1; }
.rev-card-name { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #1b2a41; display: block; }
.rev-card-time { font-family: 'Poppins', sans-serif; font-size: 11px; color: #9ca3af; }
.rev-card-stars { margin-left: auto; }
.rev-card-text { font-family: 'Poppins', sans-serif; font-size: 14px; color: #4b5563; line-height: 1.7; margin: 6px 0 10px; }
.rev-card-footer { display: flex; gap: 10px; align-items: center; }
.rev-helpful-btn, .rev-edit-btn { font-family: 'Poppins', sans-serif; font-size: 12px; color: #6b7280; background: none; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; }
.rev-helpful-btn:hover { color: #ff7a18; border-color: #ff7a18; }
.rev-edit-btn:hover    { color: #1b2a41; border-color: #1b2a41; }
.rev-load-more { display: block; margin: 1rem auto 0; }
.rev-no-reviews, .rev-loading, .rev-error { font-family: 'Poppins', sans-serif; font-size: 14px; color: #9ca3af; text-align: center; padding: 2rem; }
.rev-error { color: #ef4444; }
.rev-book-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'Poppins', sans-serif; font-size: 12px; color: #6b7280; margin-top: 4px; }
.rev-book-badge .fa-star { color: #f59e0b; font-size: 11px; }
.rev-strip-section { overflow: hidden; }
.rev-strip-wrap { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.rev-strip-row { display: flex; gap: 16px; width: max-content; animation: rev-scroll-ltr 15s linear infinite; }
.rev-strip-row--rtl { animation: rev-scroll-rtl 15s linear infinite; }
.rev-strip-wrap.rev-paused .rev-strip-row, .rev-strip-wrap.rev-paused .rev-strip-row--rtl { animation-play-state: paused; }
@keyframes rev-scroll-ltr { from { transform: translateX(0); } to   { transform: translateX(-50%); } }
@keyframes rev-scroll-rtl { from { transform: translateX(-50%); } to   { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .rev-strip-row, .rev-strip-row--rtl { animation: none; } }
.rev-strip-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem 1.2rem; min-width: 240px; max-width: 280px; flex-shrink: 0; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.rev-strip-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,0.08); transform: translateY(-2px); }
.rev-strip-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rev-strip-name { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: #1b2a41; }
.rev-strip-text { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #4b5563; line-height: 1.6; font-style: italic; margin: 0 0 8px; }
.rev-strip-book { font-family: 'Poppins', sans-serif; font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-strip-book .fa-book-open { color: #ff7a18; }
@media (max-width: 600px) {
  .rev-summary { flex-direction: column; gap: 1rem; }
  .rev-avg-block { flex-direction: row; align-items: center; gap: 10px; }
  .rev-avg-num { font-size: 2.2rem; }
  .rev-strip-card { min-width: 200px; }
  .rev-strip-row { animation: rev-scroll-ltr 18s linear infinite; }
  .rev-strip-row--rtl { animation: rev-scroll-rtl 18s linear infinite; }
  .rev-strip-wrap.rev-paused .rev-strip-row, .rev-strip-wrap.rev-paused .rev-strip-row--rtl { animation-play-state: running; }
}

/* Skeleton loading cards in homepage strip */
.rev-strip-skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: rev-shimmer 1.4s infinite;
  min-height: 120px;
}
@keyframes rev-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty state for homepage strip */
.rev-strip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 3rem 2rem;
  color: #9ca3af;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  text-align: center;
}
.rev-strip-empty i { font-size: 2rem; color: #d1d5db; }