/* ==========================================================================
   review-detail.css — review/blog detail page (largest, most interactive)
   Markup: common/components/blog/views/frontend/default/view.php
   Notes:  vote buttons keep Bootstrap's own .btn-success/.btn-outline-success/
   .btn-danger/.btn-outline-danger class names — JS toggles these directly
   (view.php inline script), so they're restyled in place, never renamed.
   Same for data-post-id/data-url/.vote-btn/.like-btn/.dislike-btn/
   .likes-count/.dislikes-count and the delete-review-btn/modal/form.
   ========================================================================== */

.otzivi-review-card {
  background: var(--otzivi-surface);
  border: 1px solid var(--otzivi-border);
  border-radius: var(--otzivi-radius-lg);
  box-shadow: var(--otzivi-shadow-md);
  padding: var(--otzivi-space-32);
}

/* .star uses a raw ⭐ emoji glyph — emoji ignore CSS `color` entirely, so a
   filled/empty distinction needs `filter` instead (see company-detail.css
   for the same fix on the company page's star display). */
.review-rating .star.empty { filter: grayscale(1) opacity(.4); }

/* theme/style.css:835 .post-wrapper .blog-content .entry-header h1 (3 classes)
   outranks .otzivi-scope h1 (1 class) on specificity alone; match it here. */
.post-wrapper .blog-content .entry-header h1,
.post-wrapper .blog-content .entry-header h2 {
  color: var(--otzivi-text);
}

.otzivi-review-card .blog-post__info {
  color: var(--otzivi-text-muted);
  font-size: var(--otzivi-fs-body-sm);
}

.otzivi-review-card .post-thumbnail img {
  border-radius: var(--otzivi-radius-md);
  margin-bottom: var(--otzivi-space-16);
}

.otzivi-review-card .entry-content {
  color: var(--otzivi-text);
  font-size: var(--otzivi-fs-body);
  line-height: var(--otzivi-lh-prose);
  max-width: 75ch;
  /* Stored review text uses literal \r\n for paragraph breaks (HtmlPurifier
     passes them through as-is, never converts to <br>/<p>) — plain HTML flow
     collapses that whitespace to nothing, rendering one unbroken wall of
     text. Respect the existing line breaks instead of touching every row's
     stored content. */
  white-space: pre-line;
}

.otzivi-meta-list {
  background: var(--otzivi-surface-soft);
  border-radius: var(--otzivi-radius-sm);
  padding: var(--otzivi-space-16);
  margin-top: var(--otzivi-space-16);
}
.otzivi-meta-list > div {
  padding: var(--otzivi-space-4) 0;
  color: var(--otzivi-text);
}
.otzivi-meta-list b {
  color: var(--otzivi-text-muted);
  font-weight: var(--otzivi-fw-semibold);
}
/* theme/style.css's ".blog-content .entry-content a" (2 classes) paints any
   link inside the review body — including the company-name link in this
   meta list — a legacy orange (#ff6600) that reads poorly on our soft-blue
   meta background. */
.otzivi-meta-list a {
  color: var(--otzivi-primary) !important;
}

/* Vote buttons — restyle Bootstrap's own classes in place, JS swaps these directly */
.post-votes {
  margin-top: var(--otzivi-space-24);
  padding-top: var(--otzivi-space-16);
  border-top: 1px solid var(--otzivi-border);
}
.vote-btn.btn-outline-success,
.vote-btn.btn-outline-danger {
  background: transparent;
  border-radius: var(--otzivi-radius-sm);
}
.vote-btn.btn-outline-success { border: 1px solid var(--otzivi-success); color: var(--otzivi-success); }
.vote-btn.btn-outline-danger  { border: 1px solid var(--otzivi-danger); color: var(--otzivi-danger); }
.vote-btn.btn-success { background: var(--otzivi-success-button); border-color: var(--otzivi-success-button); color: #fff; }
.vote-btn.btn-danger   { background: var(--otzivi-danger-button); border-color: var(--otzivi-danger-button); color: #fff; }
.vote-btn { cursor: pointer; transition: background-color .2s ease, color .2s ease; }

/* .btn-outline-danger isn't a real Bootstrap 3 class (Bootstrap 4+ only),
   so this button had no background/border rule at all and fell back to the
   native button face with legacy .btn's forced color:#fff on top —
   white-on-gray, unreadable. Style it explicitly. */
.delete-review-btn {
  background: transparent !important;
  color: var(--otzivi-danger) !important;
  border: 1px solid var(--otzivi-danger) !important;
  border-radius: var(--otzivi-radius-sm);
  cursor: pointer;
}
.delete-review-btn:hover,
.delete-review-btn:focus {
  background: var(--otzivi-danger) !important;
  color: #fff !important;
}

/* Author / share block — theme/style.css hardcodes a light-blue
   background-color on .post-author-wrapper; override for both themes. */
.post-author-wrapper {
  background-color: var(--otzivi-surface-soft) !important;
  margin-top: var(--otzivi-space-32);
  padding-top: var(--otzivi-space-24);
  border-top: 1px solid var(--otzivi-border);
}
/* theme/style.css:73 catch-all "h1,h2,h3,h4,h5,h6{color:#212121}" wins over
   .otzivi-scope h3 (no h4 rule exists there at all) and isn't inherited by
   the <a> nested in h3. */
.post-author-content h3,
.post-author-content h3 a,
.post-author-content h4 {
  color: var(--otzivi-text);
}
.post-author-social-link a {
  color: var(--otzivi-text-muted);
  transition: color .2s ease;
}
.post-author-social-link a:hover { color: var(--otzivi-primary); }

/* Prev/next navigation */
.post-navigation-wrapper {
  margin-top: var(--otzivi-space-32);
  padding-top: var(--otzivi-space-16);
  border-top: 1px solid var(--otzivi-border);
}
.post-navigation-wrapper h2 { font-size: var(--otzivi-fs-h3); }
.post-navigation-wrapper h2 a { color: var(--otzivi-text); }
.post-navigation-wrapper h2 a:hover { color: var(--otzivi-primary); }
.post-navigation-wrapper .prev-post,
.post-navigation-wrapper .next-post {
  color: var(--otzivi-text-muted);
  font-size: var(--otzivi-fs-label);
  text-transform: uppercase;
}

/* Comments */
.otzivi-comments {
  margin-top: var(--otzivi-space-32);
  background: var(--otzivi-surface);
  border: 1px solid var(--otzivi-border);
  border-radius: var(--otzivi-radius-md);
  padding: var(--otzivi-space-24);
}
.otzivi-comments h3 { margin-top: 0; }
.otzivi-comment-form-section {
  border: 1px solid var(--otzivi-border);
  border-radius: var(--otzivi-radius-sm);
  background: var(--otzivi-surface-soft);
  padding: var(--otzivi-space-16);
  margin-bottom: var(--otzivi-space-24);
}
.otzivi-no-comments {
  color: var(--otzivi-text-muted);
  font-style: italic;
}
.otzivi-comment {
  list-style: none;
  padding: var(--otzivi-space-16) 0;
  border-bottom: 1px solid var(--otzivi-border);
}
.otzivi-comment:last-child { border-bottom: none; }
.otzivi-comment .comment-author h5 {
  margin: 0;
  font-size: var(--otzivi-fs-body);
  color: var(--otzivi-text);
}
.otzivi-comment .blog-comment__date {
  color: var(--otzivi-text-muted);
  font-size: var(--otzivi-fs-label);
}
.otzivi-comment p { color: var(--otzivi-text); margin-top: var(--otzivi-space-8); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .otzivi-review-card { padding: var(--otzivi-space-16); }
  .post-votes { flex-wrap: wrap; gap: var(--otzivi-space-12); }
  .post-votes .delete-review-button { margin-left: 0 !important; width: 100%; }
}