/* ====================================================================
   VM Sport — tuotearvostelut (design: ProductDetail.jsx ReviewsBlock,
   pdp.css "Reviews" + "Review UGC photos" -osiot → --vm-* tokenit)
   ==================================================================== */

.vm-rev-stars { display: inline-flex; gap: 1px; color: var(--vm-brand, #2D5C87); }

/* ---------- Head: iso arvosana ---------- */
.vm-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--vm-border-subtle, #dedede);
}
.vm-reviews-big { display: flex; align-items: center; gap: 16px; }
.vm-reviews-big .value {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  color: var(--vm-brand-deep, #0d2b3c);
}
.vm-reviews-count {
  display: block;
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #555);
  margin-top: 4px;
}

/* ---------- Kortit ---------- */
.vm-reviews-snips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.vm-review {
  background: var(--vm-bg, #fff);
  border: 1px solid var(--vm-border-subtle, #dedede);
  padding: 18px;
}
.vm-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.vm-review-meta { font-size: var(--vm-fs-12, 0.75rem); color: var(--vm-fg-muted, #555); }
.vm-review-title {
  font-weight: 700;
  font-size: var(--vm-fs-15, 0.9375rem);
  margin: 0 0 6px;
  color: var(--vm-fg, #000);
}
.vm-review p {
  font-size: var(--vm-fs-14, 0.875rem);
  line-height: 1.55;
  color: var(--vm-fg, #000);
  margin: 0 0 8px;
}
.vm-review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--vm-fs-12, 0.75rem);
  color: var(--vm-stock-in, #1c7a3a);
  font-weight: 600;
}
.vm-review-video {
  display: inline-flex;
  gap: 6px;
  font-size: var(--vm-fs-13, 0.8125rem);
  font-weight: 600;
  color: var(--vm-brand, #2D5C87);
  margin: 0 0 8px;
}
.vm-reviews-empty { color: var(--vm-fg-muted, #555); }

/* ---------- UGC-kuvat ---------- */
.vm-review-photos { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.vm-review-photo {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--vm-border, #d1d1d1);
  background: var(--vm-bg-card, #f0f0f0);
  cursor: zoom-in;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.vm-review-photo:hover { border-color: var(--vm-brand, #2D5C87); transform: translateY(-1px); }
.vm-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Lightbox ---------- */
.vm-review-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.vm-review-lightbox[hidden] { display: none; }
.vm-review-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vm-review-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vm-review-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ---------- Lomake (PDP + kutsusivu) ---------- */
.vm-review-form-wrap { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--vm-border-subtle, #dedede); max-width: 640px; }
.vm-review-form-title {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--vm-brand-deep, #0d2b3c);
  margin-bottom: 12px;
}
.vm-review-incentive {
  background: var(--vm-bg-card, #f0f0f0);
  border-left: 3px solid var(--vm-brand, #2D5C87);
  padding: 10px 14px;
  font-size: var(--vm-fs-14, 0.875rem);
  font-weight: 600;
}
.vm-review-form input[type="text"],
.vm-review-form input[type="email"],
.vm-review-form input[type="url"],
.vm-review-form textarea {
  width: 100%;
  border: 1px solid var(--vm-border, #d1d1d1);
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--vm-fs-14, 0.875rem);
  background: var(--vm-bg, #fff);
}
.vm-review-form input:focus,
.vm-review-form textarea:focus { outline: 2px solid var(--vm-brand, #2D5C87); outline-offset: -1px; }
.vm-review-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.vm-review-form p { margin: 0 0 12px; }

/* Tähtivalinta */
.vm-review-form-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.vm-review-form-stars .label { font-weight: 600; font-size: var(--vm-fs-14, 0.875rem); margin-right: 10px; }
.vm-review-form-stars label { cursor: pointer; color: var(--vm-border, #d1d1d1); transition: color 100ms; }
.vm-review-form-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vm-review-form-stars label.is-on { color: var(--vm-brand, #2D5C87); }
.vm-review-form-stars label.is-on svg { fill: currentColor; }
.vm-review-form-stars input:focus-visible + svg { outline: 2px solid var(--vm-brand, #2D5C87); }

/* Upload */
.vm-review-upload { margin-bottom: 14px; }
.vm-review-upload-btn {
  display: inline-block;
  border: 1px dashed var(--vm-border, #d1d1d1);
  padding: 10px 16px;
  font-size: var(--vm-fs-14, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  color: var(--vm-brand, #2D5C87);
}
.vm-review-upload-btn:hover { border-color: var(--vm-brand, #2D5C87); }
.vm-review-upload-btn input { display: none; }
.vm-review-upload-previews { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vm-review-upload-previews img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--vm-border, #d1d1d1);
}
.vm-review-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: var(--vm-fs-13, 0.8125rem);
  color: var(--vm-fg-muted, #555);
  cursor: pointer;
}
.vm-review-consent input { margin-top: 2px; }
.vm-review-form-note { font-size: var(--vm-fs-12, 0.75rem); color: var(--vm-fg-muted, #555); }

/* ---------- Kutsusivu ---------- */
.vm-arvostele-inner { max-width: 720px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 24px; }
.vm-arvostele-head { margin-bottom: 32px; }
.vm-arvostele-head h1 {
  font-family: "parabolica", "Big Shoulders Display", "Saira Condensed", Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: var(--vm-brand-deep, #0d2b3c);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 8px 0;
}
.vm-arvostele-card {
  border: 1px solid var(--vm-border-subtle, #dedede);
  padding: 20px;
  margin-bottom: 20px;
  background: var(--vm-bg, #fff);
}
.vm-arvostele-card.is-done { opacity: 0.75; }
.vm-arvostele-product { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.vm-arvostele-product img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--vm-border-subtle, #dedede); }
.vm-arvostele-product-name { font-weight: 700; }
.vm-arvostele-done { color: var(--vm-stock-in, #1c7a3a); font-weight: 600; font-size: var(--vm-fs-14, 0.875rem); }
.vm-arvostele-notice {
  padding: 14px 18px;
  margin-bottom: 24px;
  font-weight: 600;
}
.vm-arvostele-notice.is-success { background: #e7f5ec; color: #1c7a3a; border: 1px solid #b5dfc4; }
.vm-arvostele-notice.is-error { background: #fdecea; color: #b72a00; border: 1px solid #f3c1b8; }

/* ---------- Mobiili ---------- */
@media (max-width: 820px) {
  .vm-reviews-snips { grid-template-columns: 1fr; }
  .vm-reviews-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vm-review-form-row { grid-template-columns: 1fr; }
}

/* Napit — moduuli itsenäinen, ei riippuvuutta etusivulohkojen tyyleihin */
.vm-reviews .vm-btn,
.vm-arvostele .vm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--vm-fs-14, 0.875rem);
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.vm-reviews .vm-btn--primary,
.vm-arvostele .vm-btn--primary {
  background: var(--vm-brand, #2D5C87);
  color: #fff;
}
.vm-reviews .vm-btn--primary:hover,
.vm-arvostele .vm-btn--primary:hover { background: var(--vm-brand-deep, #0d2b3c); }
.vm-reviews .vm-btn--secondary {
  background: transparent;
  color: var(--vm-brand-deep, #0d2b3c);
  border: 1px solid var(--vm-border, #d1d1d1);
}
.vm-reviews .vm-btn--secondary:hover { border-color: var(--vm-brand, #2D5C87); color: var(--vm-brand, #2D5C87); }