/* ── Content tables ──────────────────────────────────────── */
.review_content table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius_md);
  overflow: hidden;
  font-family: var(--font_body);
  font-size: var(--text_sm);
  margin: var(--sp_5) 0;
  box-shadow: 0 2px 12px rgba(29, 23, 42, 0.08);
}

.review_content thead {
  background-color: var(--color_primary);
  color: #fff;
}

.review_content thead th {
  padding: var(--sp_3) var(--sp_4);
  text-align: left;
  font-weight: var(--fw_semibold);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: none;
}

.review_content tbody tr {
  background-color: #fff;
  border-bottom: 1px solid var(--color_border);
  transition: background-color var(--t_fast);
}

.review_content tbody tr:last-child {
  border-bottom: none;
}

.review_content tbody tr:nth-child(even) {
  background-color: var(--color_surface2);
}

.review_content tbody tr:hover {
  background-color: #EEF3FF;
}

.review_content tbody td {
  padding: var(--sp_3) var(--sp_4);
  color: var(--text_primary);
  vertical-align: middle;
  border: none;
}

.review_content tbody td:first-child {
  font-weight: var(--fw_semibold);
  color: var(--text_primary);
}

/* Responsive scroll wrapper — auto-added via JS below */
.table_scroll_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp_5) 0;
  border-radius: var(--radius_md);
  border: 1px solid var(--color_border);
}

.table_scroll_wrap table {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  min-width: 480px;
}

/* ── Review Header card ──────────────────────────────────── */
.review_header {
  display: flex;
  align-items: center;
  gap: var(--sp_5);
  margin-top: var(--sp_5);
  flex-wrap: wrap;
}

/* Logo / initials circle */
.review_logo_wrap {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius_lg);
  background: var(--color_surface);
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review_logo_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review_logo_initials {
  font-family: var(--font_heading);
  font-size: var(--text_h3);
  font-weight: var(--fw_bold);
  color: var(--color_primary);
}

/* Info block */
.review_header_info {
  flex: 1;
  min-width: 0;
}

.review_header_top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp_3);
  margin-bottom: var(--sp_2);
}

.review_title {
  color: #fff;
  margin-bottom: 0;
}

.review_badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  background: var(--color_accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: var(--fw_semibold);
  border-radius: var(--radius_full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Rating row */
.review_rating_row {
  display: flex;
  align-items: center;
  gap: var(--sp_3);
  flex-wrap: wrap;
  margin-bottom: var(--sp_3);
}

.review_score {
  font-family: var(--font_heading);
  font-size: var(--text_h2);
  font-weight: var(--fw_bold);
  color: #fff;
  line-height: 1;
}

.review_score_max {
  font-size: var(--text_sm);
  color: rgba(255, 255, 255, 0.4);
  align-self: flex-end;
  margin-bottom: 2px;
}

.review_stars {
  color: var(--color_gold);
  font-size: 1rem;
  display: flex;
  gap: 2px;
}

.review_reviews_count {
  font-size: var(--text_sm);
  color: rgba(255, 255, 255, 0.45);
}

.review_verified {
  display: inline-flex;
  align-items: center;
  gap: var(--sp_2);
  font-size: var(--text_sm);
  color: var(--color_accent);
  font-weight: var(--fw_medium);
}

/* CTA block */
.review_header_cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp_2);
  flex-shrink: 0;
  min-width: 170px;
}

@media (max-width: 767px) {
  .review_header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .review_header_cta {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .review_header_cta .btn {
    flex: 1;
  }
}

.review_tc_link {
  font-size: var(--text_caption);
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-decoration: none;
  transition: color var(--t_fast);
}

.review_tc_link:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Review Meta Bar ─────────────────────────────────────── */
.review_meta_bar {
  background: var(--color_surface);
  border-bottom: 1px solid var(--color_border);
}

.review_meta_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp_1);
  padding-block: var(--sp_3);
}

.review_meta_inner .date_component {
  background: transparent;
  border: none;
  padding: 0;
}

/* Author link */
.review_meta_author {
  display: inline-flex;
  align-items: center;
  gap: var(--sp_2);
  text-decoration: none;
  color: var(--text_secondary);
  font-size: var(--text_sm);
  transition: color var(--t_fast);
}

.review_meta_author:hover {
  color: var(--color_primary);
}

.review_meta_avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review_meta_avatar_initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_primary);
  color: #fff;
  font-family: var(--font_heading);
  font-size: 0.6875rem;
  font-weight: var(--fw_bold);
}

.review_meta_author_label strong {
  color: var(--text_primary);
}

/* ── Review Body ─────────────────────────────────────────── */
.review_section {
  background: var(--color_surface2);
  padding: var(--sp_5) 0px;
}

.review_section img {
  width: 100%;
  border-radius: var(--radius_md);
}

.review_layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp_6);
}

@media (min-width: 1024px) {
  .review_layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp_7);
  }
}

/* Main article column */
.review_main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp_5);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.review_sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp_4);
}

@media (min-width: 1024px) {
  .review_sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
  }
}

/* Shared sidebar card shell */
.sidebar_card {
  background: var(--color_surface);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_lg);
  overflow: hidden;
  box-shadow: var(--shadow_card);
}

.sidebar_card_title {
  font-family: var(--font_heading);
  font-size: var(--text_sm);
  font-weight: var(--fw_semibold);
  color: var(--text_muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--sp_3) var(--sp_4);
  border-bottom: 1px solid var(--color_border);
  background: var(--color_surface2);
}

/* Quick Facts */
.sidebar_facts_list {
  padding: var(--sp_1) 0;
}

.sidebar_fact_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp_3);
  padding: var(--sp_2) var(--sp_4);
  border-bottom: 1px solid var(--color_surface2);
}

.sidebar_fact_row:last-child {
  border-bottom: none;
}

.sidebar_fact_label {
  font-size: var(--text_sm);
  color: var(--text_muted);
  display: flex;
  align-items: center;
  gap: var(--sp_2);
  white-space: nowrap;
}

.sidebar_fact_label i {
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
  color: var(--color_primary);
  flex-shrink: 0;
}

.sidebar_fact_value {
  font-size: var(--text_sm);
  font-weight: var(--fw_medium);
  color: var(--text_primary);
  text-align: right;
}

/* Pros & Cons */
.sidebar_proscons {
  padding: var(--sp_3) var(--sp_4);
  display: flex;
  flex-direction: column;
  gap: var(--sp_3);
}

.sidebar_proscons_group_label {
  font-size: 0.6875rem;
  font-weight: var(--fw_semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp_2);
}

.sidebar_proscons_group_label.pros {
  color: var(--color_success, #16b8a0);
}

.sidebar_proscons_group_label.cons {
  color: var(--color_danger, #ef4444);
}

.sidebar_proscons_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp_2);
}

.sidebar_proscons_list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp_2);
  font-size: var(--text_sm);
  color: var(--text_secondary);
  line-height: 1.4;
}

.sidebar_proscons_list li i {
  font-size: 0.7rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.sidebar_proscons_list.pros li i {
  color: var(--color_success, #16b8a0);
}

.sidebar_proscons_list.cons li i {
  color: var(--color_danger, #ef4444);
}

.sidebar_proscons_divider {
  height: 1px;
  background: var(--color_border);
  margin: 0;
}

/* Sidebar CTA */
.sidebar_cta {
  padding: var(--sp_4);
  display: flex;
  flex-direction: column;
  gap: var(--sp_2);
  text-align: center;
}

.sidebar_cta_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp_2);
  font-size: var(--text_sm);
  font-weight: var(--fw_semibold);
  color: var(--text_primary);
  margin-bottom: var(--sp_1);
}

.sidebar_cta_logo_circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius_md);
  background: var(--color_primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font_heading);
  font-size: var(--text_sm);
  font-weight: var(--fw_bold);
}

.sidebar_cta_score {
  font-size: var(--text_caption);
  color: var(--text_muted);
}

.sidebar_cta_score strong {
  color: var(--color_primary);
}

.sidebar_cta_tc {
  font-size: var(--text_caption);
  color: var(--text_disabled);
  text-align: center;
  text-decoration: none;
}

.sidebar_cta_tc:hover {
  color: var(--text_muted);
  text-decoration: underline;
}

/* ── Table of Contents ───────────────────────────────────── */
.toc_box {
  background: var(--color_surface);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_md);
  margin-bottom: var(--sp_5);
  overflow: hidden;
}

.toc_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp_3) var(--sp_4);
  background: var(--color_surface2);
  border: none;
  border-bottom: 1px solid var(--color_border);
  font-family: var(--font_heading);
  font-size: var(--text_sm);
  font-weight: var(--fw_semibold);
  color: var(--text_primary);
  cursor: pointer;
  text-align: left;
  gap: var(--sp_3);
}

.toc_toggle_inner {
  display: flex;
  align-items: center;
  gap: var(--sp_2);
}

.toc_toggle_inner i {
  color: var(--color_primary);
  font-size: 0.875rem;
}

.toc_chevron {
  color: var(--text_muted);
  font-size: 0.75rem;
  transition: transform var(--t_fast);
}

.toc_toggle[aria-expanded="false"] .toc_chevron {
  transform: rotate(-90deg);
}

#toc-list {
  margin: 0;
  padding: var(--sp_3) var(--sp_4);
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: opacity var(--t_fast);
}

#toc-list.collapsed {
  display: none;
}

#toc-list li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  gap: var(--sp_2);
}

#toc-list li::before {
  content: counter(toc);
  flex-shrink: 0;
  width: 18px;
  font-size: 0.6875rem;
  font-weight: var(--fw_semibold);
  color: var(--text_muted);
  text-align: right;
}

#toc-list a {
  font-size: var(--text_sm);
  color: var(--text_secondary);
  text-decoration: none;
  padding: 3px 0;
  border-left: 2px solid transparent;
  padding-left: var(--sp_2);
  transition:
    color var(--t_fast),
    border-color var(--t_fast);
  line-height: 1.4;
}

#toc-list a:hover {
  color: var(--color_primary);
}

#toc-list a.active {
  color: var(--color_primary);
  border-left-color: var(--color_primary);
  font-weight: var(--fw_medium);
}

/* ── Sticky Bonus CTA ────────────────────────────────────── */
.sticky_bonus {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky_bonus.is_visible {
  transform: translateY(0);
}

.sticky_bonus_inner {
  display: flex;
  align-items: center;
  padding: var(--sp_3) var(--sp_4);
  background: var(--color_surface);
  border-top: 1px solid var(--color_border);
  box-shadow: 0 -4px 24px rgba(29, 23, 42, 0.12);
  max-width: 1200px;
  margin: 0 auto;
}

.sticky_bonus_info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.sticky_bonus_name {
  font-family: var(--font_heading);
  font-size: var(--text_sm);
  font-weight: var(--fw_semibold);
  color: var(--text_primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky_bonus_offer {
  font-size: var(--text_caption, 0.75rem);
  color: var(--text_muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky_bonus_btn {
  flex-shrink: 0;
  background-color: var(--color_success);
}

.sticky_bonus_close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text_muted);
  cursor: pointer;
  transition:
    background var(--t_fast),
    color var(--t_fast);
}

.sticky_bonus_close:hover {
  background: var(--color_surface2);
  color: var(--text_primary);
}

/* Desktop: floating card in bottom-right corner */
@media (min-width: 1024px) {
  .sticky_bonus {
    left: auto;
    bottom: var(--sp_6);
    right: var(--sp_6);
    width: 300px;
    border-radius: var(--radius_lg);
    box-shadow: 0 8px 32px rgba(29, 23, 42, 0.16);
    transform: translateY(calc(100% + var(--sp_6)));
  }

  .sticky_bonus_inner {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp_4);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_lg);
    box-shadow: none;
    position: relative;
  }

  .sticky_bonus_info {
    gap: var(--sp_1);
  }

  .sticky_bonus_btn {
    width: 100%;
    justify-content: center;
  }

  .sticky_bonus_close {
    position: absolute;
    top: var(--sp_2);
    right: var(--sp_2);
  }
}