/* =============================================================================
   LOGUETOWN — Mes avis (reviews) premium 2026
   Stat cards · segmented tabs with sliding indicator · gold-star review cards.
   Scoped to .lt-rev-page. Loaded via the premium bundle.
   ============================================================================= */

.lt-rev-page__title {
  font-family: var(--lt-font-display, "Fraunces", Georgia, serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lt-color-primary-strong, #0b0d10);
  margin: 0.35rem 0 0.4rem;
}

/* -----------------------------------------------------------------------------
   Stat cards
   ----------------------------------------------------------------------------- */
.lt-rev-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lt-s-3, 0.75rem);
  margin-bottom: var(--lt-s-6, 1.5rem);
}
.lt-rev-stat {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3, 0.75rem);
  padding: var(--lt-s-4, 1rem) var(--lt-s-5, 1.25rem);
  background: var(--lt-color-surface, #fff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
  border-radius: var(--lt-r-lg, 16px);
  transition: transform var(--lt-dur-base,240ms) var(--lt-ease-out,cubic-bezier(.22,1,.36,1)),
              box-shadow var(--lt-dur-base,240ms) var(--lt-ease-out,cubic-bezier(.22,1,.36,1));
}
.lt-rev-stat:hover { transform: translateY(-2px); box-shadow: var(--lt-elev-2, 0 4px 12px rgba(11,13,16,0.06)); }
.lt-rev-stat__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--lt-r-md, 12px);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lt-gold-wash, rgba(184,132,26,0.08));
  color: var(--lt-color-accent, #b8841a);
}
.lt-rev-stat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lt-rev-stat__value {
  font-family: var(--lt-font-display, "Fraunces", serif);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--lt-color-primary-strong, #0b0d10);
}
.lt-rev-stat__label {
  font-size: var(--lt-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--lt-color-text-muted, #5b6470);
}

/* -----------------------------------------------------------------------------
   Segmented tabs with sliding indicator
   ----------------------------------------------------------------------------- */
.lt-rev-tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: var(--lt-s-5, 1.25rem);
  background: var(--lt-color-surface-muted, #f7f5f1);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
  border-radius: var(--lt-r-pill, 999px);
}
.lt-rev-tab {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.55rem 1.2rem;
  border: 0;
  background: transparent;
  border-radius: var(--lt-r-pill, 999px);
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 600;
  color: var(--lt-color-text-muted, #5b6470);
  cursor: pointer;
  transition: color var(--lt-dur-base, 240ms) var(--lt-ease-out, cubic-bezier(.22,1,.36,1));
}
.lt-rev-tab.is-active { color: #fff; }
.lt-rev-tab__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--lt-r-pill, 999px);
  background: rgba(11,13,16,0.08);
  font-size: 10px; font-weight: 700;
  color: inherit;
}
.lt-rev-tab.is-active .lt-rev-tab__badge { background: rgba(255,255,255,0.25); }
/* Sliding pill indicator — positioned by [data-active] */
.lt-rev-tabs__indicator {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-color-primary-strong, #0b0d10);
  box-shadow: var(--lt-elev-1, 0 1px 3px rgba(11,13,16,0.06));
  transition: transform var(--lt-dur-base, 240ms) var(--lt-ease-spring, cubic-bezier(.34,1.4,.64,1));
  z-index: 0;
}
.lt-rev-tabs[data-active="given"] .lt-rev-tabs__indicator { transform: translateX(100%); }

/* -----------------------------------------------------------------------------
   Panels + list
   ----------------------------------------------------------------------------- */
.lt-rev-panel { display: none; }
.lt-rev-panel.is-active { display: block; }
.lt-rev-list { display: flex; flex-direction: column; gap: var(--lt-s-3, 0.75rem); }
.lt-rev-skeleton { display: flex; flex-direction: column; gap: var(--lt-s-3, 0.75rem); padding: var(--lt-s-2,0.5rem) 0; }
.lt-rev-skeleton .lt-skel--line { height: 64px; border-radius: var(--lt-r-lg, 16px); }

/* -----------------------------------------------------------------------------
   Review card
   ----------------------------------------------------------------------------- */
.lt-rev-card {
  background: var(--lt-color-surface, #fff);
  border: 1px solid var(--lt-color-border, rgba(11,13,16,0.08));
  border-radius: var(--lt-r-lg, 16px);
  padding: var(--lt-s-4, 1rem) var(--lt-s-5, 1.25rem);
  transition: border-color var(--lt-dur-base,240ms) ease, box-shadow var(--lt-dur-base,240ms) ease;
}
.lt-rev-card:hover { border-color: var(--lt-gold-line, rgba(184,132,26,0.22)); box-shadow: var(--lt-elev-1, 0 1px 3px rgba(11,13,16,0.06)); }
.lt-rev-card__head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--lt-s-3, 0.75rem);
}
.lt-rev-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--lt-font-display, "Fraunces", serif);
  font-size: 1.15rem; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.lt-rev-card__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lt-rev-card__name {
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-md, 0.9375rem);
  font-weight: 700;
  color: var(--lt-color-text, #1c2024);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt-rev-card__date {
  flex-shrink: 0;
  font-size: var(--lt-text-xs, 0.75rem);
  color: var(--lt-color-text-subtle, #8b95a3);
  white-space: nowrap;
}
.lt-rev-stars { display: inline-flex; gap: 2px; }
.lt-rev-star { color: rgba(11,13,16,0.14); }
.lt-rev-star.is-on { color: var(--lt-color-accent, #b8841a); }

.lt-rev-card__text {
  margin: var(--lt-s-3, 0.75rem) 0 0;
  font-size: var(--lt-text-md, 0.9375rem);
  line-height: 1.6;
  color: var(--lt-color-text, #1c2024);
}
.lt-rev-card__meta { margin-top: var(--lt-s-3, 0.75rem); }
.lt-rev-card__product {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--lt-text-xs, 0.75rem);
  font-weight: 600;
  color: var(--lt-color-accent, #b8841a);
  background: var(--lt-gold-wash, rgba(184,132,26,0.08));
  border: 1px solid var(--lt-gold-line, rgba(184,132,26,0.22));
  padding: 0.25rem 0.6rem;
  border-radius: var(--lt-r-pill, 999px);
}
.lt-rev-card__footer {
  margin-top: var(--lt-s-3, 0.75rem);
  padding-top: var(--lt-s-3, 0.75rem);
  border-top: 1px solid var(--lt-color-border, rgba(11,13,16,0.06));
  display: flex; justify-content: flex-end;
}
.lt-rev-card__delete {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--lt-r-md, 12px);
  background: transparent;
  border: 1px solid rgba(220,38,38,0.28);
  color: #b91c1c;
  font-family: var(--lt-font-body, "Inter", sans-serif);
  font-size: var(--lt-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--lt-dur-fast,160ms) ease, transform var(--lt-dur-fast,160ms) ease;
}
.lt-rev-card__delete:hover { background: rgba(220,38,38,0.08); transform: translateY(-1px); }
.lt-rev-card__delete:disabled { opacity: 0.5; cursor: not-allowed; }

/* Avatar tints reuse .lt-msg__media--c1..c6 (defined in lt-premium-messages.css).
   Provide local fallbacks so this page works even if that file isn't present. */
.lt-rev-card__avatar.lt-msg__media--c1 { background: linear-gradient(135deg, #b8841a, #9e6f12); }
.lt-rev-card__avatar.lt-msg__media--c2 { background: linear-gradient(135deg, #2f6f6b, #1f4f4c); }
.lt-rev-card__avatar.lt-msg__media--c3 { background: linear-gradient(135deg, #7c5cbf, #5b3fa0); }
.lt-rev-card__avatar.lt-msg__media--c4 { background: linear-gradient(135deg, #c0563a, #9e3f2a); }
.lt-rev-card__avatar.lt-msg__media--c5 { background: linear-gradient(135deg, #3a6ea5, #29527e); }
.lt-rev-card__avatar.lt-msg__media--c6 { background: linear-gradient(135deg, #4f7a3a, #3a5e2a); }

/* -----------------------------------------------------------------------------
   Dark / Grand-Line
   ----------------------------------------------------------------------------- */
[data-theme="dark"] .lt-rev-stat,
[data-theme="dark"] .lt-rev-card,
body.lt26-grain .lt-rev-stat,
body.lt26-grain .lt-rev-card {
  background: var(--lt-color-surface, #0e1a2e);
  border-color: var(--lt-color-border, rgba(240,236,226,0.08));
}
[data-theme="dark"] .lt-rev-tabs,
body.lt26-grain .lt-rev-tabs {
  background: var(--lt-color-surface-muted, #0a1424);
  border-color: var(--lt-color-border, rgba(240,236,226,0.08));
}
[data-theme="dark"] .lt-rev-tab.is-active,
body.lt26-grain .lt-rev-tab.is-active { color: #0a1424; }
[data-theme="dark"] .lt-rev-tabs__indicator,
body.lt26-grain .lt-rev-tabs__indicator { background: var(--lt-color-accent, #d4a017); }
[data-theme="dark"] .lt-rev-star,
body.lt26-grain .lt-rev-star { color: rgba(240,236,226,0.16); }

/* -----------------------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .lt-rev-stats { grid-template-columns: 1fr; }
  .lt-rev-tabs { display: flex; width: 100%; }
  .lt-rev-tab { flex: 1; justify-content: center; }
  .lt-rev-tabs__indicator { width: calc(50% - 4px); }
}
@media (max-width: 480px) {
  .lt-rev-card__head { grid-template-columns: 40px 1fr; }
  .lt-rev-card__date { grid-column: 2; }
  .lt-rev-card__avatar { width: 40px; height: 40px; }
}

/* -----------------------------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lt-rev-stat, .lt-rev-tab, .lt-rev-tabs__indicator, .lt-rev-card, .lt-rev-card__delete { transition: none !important; }
  .lt-rev-stat:hover, .lt-rev-card__delete:hover { transform: none !important; }
}