/* ==========================================================================
   Reviorum — pages/review.css  (review.html — "Write a review" form)
   ========================================================================== */

/* ---------- Header band ---------- */
.rv-write-head { background: var(--rv-lavender); }
.rv-write-head .rv-breadcrumbs { padding-bottom: 0; }
.rv-write-head__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-block: var(--rv-s-4) 28px; }
.rv-write-head .rv-logo--xl { width: 60px; height: 60px; border-radius: 14px; font-size: 1.25rem; }
.rv-write-head__title { flex: 1; min-width: 240px; }
.rv-write-head__title h1 { margin-top: 2px; font-size: 1.75rem; font-weight: 800; }
.rv-write-head__domain { color: var(--rv-muted); font-size: var(--rv-fs-lg); font-weight: 500; letter-spacing: 0; }

/* Steps */
.rv-write-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-s-2); margin: 0; padding: 0; list-style: none; }
.rv-write-steps__item { display: inline-flex; align-items: center; gap: var(--rv-s-2); color: var(--rv-muted); font-size: var(--rv-fs-sm); font-weight: 600; }
.rv-write-steps__item + .rv-write-steps__item::before { content: ""; width: 24px; height: 2px; margin-right: 0; background: #d5d9e3; }
.rv-write-steps__item.is-done + .rv-write-steps__item::before { background: #c7cbf9; }
.rv-write-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid #d5d9e3;
  border-radius: 50%;
  background: var(--rv-surface);
  font-size: var(--rv-fs-xs);
}
.rv-write-steps__item.is-current { color: var(--rv-ink); }
.rv-write-steps__item.is-current .rv-write-steps__num { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }
.rv-write-steps__item.is-done .rv-write-steps__num { background: #e2f4e7; border-color: #e2f4e7; color: var(--rv-pos); }
.rv-write-steps__mobile { display: none; }

/* ---------- Layout ---------- */
.rv-write-layout { gap: 28px; padding-block: 28px var(--rv-s-section); }

.rv-write-form { display: flex; flex-direction: column; gap: var(--rv-s-6); padding: 28px; }
.rv-write-summary__title { font-weight: 700; }
.rv-write-summary__list { margin: 6px 0 0; padding-left: 1.1em; }
.rv-body .rv-write-summary__list a { color: #7f1d1d; text-decoration: underline; }
.rv-write-success { align-items: flex-start; }
.rv-write-success svg { flex: none; color: var(--rv-accent); margin-top: 1px; }

.rv-write-label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--rv-s-2); }
.rv-write-label .rv-field__hint { font-size: var(--rv-fs-xs); font-weight: 500; }
.rv-field__error::before { content: "⚠ "; }

/* Rating */
.rv-write-rating .rv-fieldset__legend { font-weight: 700; }
.rv-write-rating__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-s-4); }
.rv-write-rating .rv-rate__label { width: 52px; height: 52px; border: 1.5px solid #d5d9e3; border-radius: 12px; background: var(--rv-surface); color: #d8dce4; }
.rv-write-rating .rv-rate__label svg { width: 28px; height: 28px; }
.rv-write-rating .rv-rate:has(.rv-rate__input:checked) .rv-rate__label,
.rv-write-rating .rv-rate:hover .rv-rate__label { border-color: var(--rv-rate-on); background: var(--rv-rate-on); color: #fff; }
.rv-write-rating .rv-rate__input:checked + .rv-rate__label ~ .rv-rate__label,
.rv-write-rating .rv-rate:hover .rv-rate__label:hover ~ .rv-rate__label { border-color: #d5d9e3; background: var(--rv-surface); color: #d8dce4; }
.rv-write-rating.is-invalid .rv-rate__label { border-color: var(--rv-neg); }
.rv-write-rating__word { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-write-rating__word--pos { color: var(--rv-pos); }
.rv-write-rating__word--warn { color: var(--rv-warn); }
.rv-write-rating__word--neg { color: var(--rv-neg); }

.rv-write-tip { display: flex; align-items: center; gap: 6px; color: var(--rv-muted); font-size: var(--rv-fs-sm); }
.rv-write-tip svg { flex: none; color: var(--rv-pos); }

.rv-write-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-4); }

/* Upload */
.rv-write-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1.5px dashed #c7cbf9;
  border-radius: 12px;
  background: #f8f8ff;
  cursor: pointer;
}
.rv-write-upload:hover { border-color: var(--rv-accent); }
.rv-write-upload:focus-within { box-shadow: var(--rv-focus); }
.rv-write-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--rv-r-md);
  background: var(--rv-accent-soft);
  color: var(--rv-accent);
}
.rv-write-upload__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rv-write-upload__title { font-weight: 600; }
.rv-write-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rv-upload { display: flex; flex-wrap: wrap; gap: var(--rv-s-2); margin: 0; padding: 0; list-style: none; }
.rv-upload:empty { display: none; }
.rv-upload__item img { width: 72px; height: 72px; border-radius: var(--rv-r-md); border: 1px solid var(--rv-line); object-fit: cover; }

/* Confirmation */
.rv-write-confirm { display: flex; flex-direction: column; gap: var(--rv-s-3); padding-top: 22px; border-top: 1px solid var(--rv-line); }

/* Actions */
.rv-write-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--rv-s-3); }
.rv-write-actions__cancel { font-size: var(--rv-fs-md); font-weight: 600; }
.rv-write-actions__buttons { display: flex; gap: 10px; }

/* ---------- Aside ---------- */
.rv-write-aside { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-write-preview { display: flex; flex-direction: column; gap: var(--rv-s-3); padding: var(--rv-s-5); }
.rv-write-preview__eyebrow { color: var(--rv-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.rv-write-preview__title { font-weight: 700; overflow-wrap: anywhere; }
.rv-write-preview__text { color: var(--rv-ink-2); font-size: var(--rv-fs-sm); line-height: 1.55; overflow-wrap: anywhere; }
.rv-write-tips { display: flex; flex-direction: column; gap: var(--rv-s-3); padding: var(--rv-s-5); border-radius: 16px; background: var(--rv-warm); }
.rv-write-tips__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-write-tips__list { display: flex; flex-direction: column; gap: var(--rv-s-3); margin: 0; padding: 0; list-style: none; counter-reset: rv-tip; }
.rv-write-tips__list li { display: flex; gap: 10px; color: var(--rv-ink-2); font-size: var(--rv-fs-md); line-height: 1.5; counter-increment: rv-tip; }
.rv-write-tips__list li::before { content: counter(rv-tip); color: #c2410c; font-weight: 800; }
.rv-write-next { display: flex; flex-direction: column; gap: var(--rv-s-2); padding: 18px var(--rv-s-5); }
.rv-write-next__title { font-size: var(--rv-fs-md); font-weight: 700; }
.rv-write-next p { color: var(--rv-ink-2); font-size: var(--rv-fs-sm); line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-write-aside { order: -1; }
  .rv-write-preview { display: none; }
  .rv-write-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 768px) {
  .rv-write-aside { grid-template-columns: minmax(0, 1fr); }
  .rv-write-tips { padding: var(--rv-s-4); }
}

@media (max-width: 640px) {
  .rv-write-head__inner { gap: var(--rv-s-3); padding-bottom: var(--rv-s-5); }
  .rv-write-head .rv-logo--xl { width: 44px; height: 44px; font-size: var(--rv-fs-md); border-radius: 11px; }
  .rv-write-head__title { min-width: 0; }
  .rv-write-head__title h1 { font-size: 1.25rem; }
  .rv-write-head__domain { display: block; font-size: var(--rv-fs-sm); }

  /* Steps become a 4-segment progress bar */
  .rv-write-steps { order: 5; flex-basis: 100%; flex-wrap: nowrap; gap: 6px; }
  .rv-write-steps__item { flex: 1; height: 4px; border-radius: 99px; background: #d5d9e3; overflow: hidden; }
  .rv-write-steps__item.is-done,
  .rv-write-steps__item.is-current { background: var(--rv-accent); }
  .rv-write-steps__item + .rv-write-steps__item::before { display: none; }
  .rv-write-steps__num,
  .rv-write-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rv-write-steps__mobile { display: block; order: 6; flex-basis: 100%; margin-top: -4px; color: var(--rv-muted); font-size: var(--rv-fs-sm); }

  .rv-write-layout { padding-top: var(--rv-s-4); }
  .rv-write-aside { order: 2; }
  .rv-write-form { padding: var(--rv-s-4); gap: var(--rv-s-5); border-radius: var(--rv-r-lg); }
  .rv-write-rating .rv-rate { gap: 6px; }
  .rv-write-rating .rv-rate__label { width: 48px; height: 48px; }
  .rv-write-two { grid-template-columns: minmax(0, 1fr); }

  /* Sticky action bar */
  .rv-write-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(var(--rv-s-4) * -1) calc(var(--rv-s-4) * -1);
    padding: var(--rv-s-3) var(--rv-s-4);
    border-top: 1px solid var(--rv-line);
    border-radius: 0 0 var(--rv-r-lg) var(--rv-r-lg);
    background: var(--rv-surface);
  }
  .rv-write-actions__cancel { display: none; }
  .rv-write-actions__buttons { width: 100%; }
  .rv-write-actions__buttons .rv-btn { flex: 1; }
}

@media (max-width: 360px) {
  .rv-write-rating .rv-rate__label { width: 44px; height: 44px; }
}