:root {
  --bg-main: #0f111a;
  --bg-card: #1a1c29;

  --text-main: #f8f8f2;
  --text-sub: #a9b1d6;

  --accent: #7aa2f7;
  --accent-2: #bb9af7;
  --success: #9ece6a;

  --glass: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.08);

  --radius: 18px;
  --radius-sm: 12px;

  --font: "Poppins", sans-serif;
}

/* ==============================
   REVIEWS
============================== */
.reviews {
  margin: 20px 0 0;
  padding: 34px 0 8px;
}

.reviews-container {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(148, 161, 190, 0.16);
  border-radius: 24px;
  background: rgba(17, 23, 35, 0.66);
  box-shadow: 0 20px 48px rgba(2, 8, 20, 0.2);
}

.reviews-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.reviews-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.reviews-heading h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.reviews-heading p,
.reviews-summary {
  color: var(--text-sub);
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(241, 201, 107, 0.16);
  border-radius: 999px;
  background: rgba(241, 201, 107, 0.06);
  font-size: 0.9rem;
}

.average-rating {
  color: #f1c96b;
  font-weight: 700;
}

.reviews-intro {
  max-width: 680px;
  margin: 14px 0 20px;
  color: var(--text-sub);
  font-size: 0.92rem;
  line-height: 1.6;
}

.review-form {
  padding: 18px;
  border: 1px solid rgba(148, 161, 190, 0.14);
  border-radius: 16px;
  background: rgba(5, 10, 19, 0.24);
}

.review-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
}

.stars-input {
  display: flex;
  gap: 8px;
  color: #f1c96b;
}

.stars-input i {
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease;
}

.stars-input i:hover {
  color: #ffe5a5;
  transform: translateY(-1px);
}

.review-form textarea {
  width: 100%;
  min-height: 110px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--text-main);
  margin: 16px 0;
  resize: vertical;
}

.review-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.review-form-actions .btn-product {
  flex: 1;
}

.review-delete {
  border-color: rgba(255, 113, 145, 0.48);
  background: rgba(255, 91, 126, 0.1);
  color: #ffb5c5;
}

.review-delete:hover:not(:disabled) {
  border-color: rgba(255, 113, 145, 0.82);
  background: rgba(255, 91, 126, 0.18);
  color: #fff2f5;
}

.review-delete:disabled {
  cursor: wait;
  opacity: 0.68;
}

/* ==============================
   PAGINATION (MODERNA + MOBILE)
============================== */
.reviews-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.reviews-pagination button {
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.25s ease;
}

.reviews-pagination button:hover {
  background: rgba(122, 162, 247, 0.18);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(122, 162, 247, 0.35);
}

.reviews-pagination button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0d14;
  font-weight: 600;
}

body.ns-plan-tier-starter {
  --bg-main: #0b1117;
  --bg-card: #111b20;
  --text-main: #f4f8f0;
  --text-sub: #aebbaa;
  --accent: #b7d97a;
  --accent-2: #6fc7a5;
  --success: #91c97c;
  --border: rgba(183, 217, 122, 0.14);
}

body.ns-plan-tier-starter .reviews-pagination button:hover {
  background: rgba(183, 217, 122, 0.12);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(111, 199, 165, 0.22);
}

body.ns-plan-tier-starter .reviews-pagination button.active {
  background: linear-gradient(135deg, #b7d97a, #6fc7a5);
  color: #07120b;
}

/* ===============================
   REVIEWS CONTAINER
================================ */
.reviews-section {
  margin-top: 24px;
}

/* ===============================
   LISTA DE REVIEWS
================================ */
.reviews-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===============================
   REVIEW ITEM
================================ */
.review-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  transition: border 0.2s ease;
}

.review-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ===============================
   HEADER (avatar + nome + estrelas)
================================ */
.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Avatar */
.review-header img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #1e1e2e;
}

/* Nome */
.review-header strong {
  font-size: 14px;
  font-weight: 500;
  color: #f8f8f2;
}

/* Estrelas */
.review-header span {
  margin-left: auto;
  font-size: 13px;
  color: #f1fa8c;
  white-space: nowrap;
}

/* ===============================
   TEXTO DO REVIEW
================================ */
.review-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #dcdcdc;
  word-break: break-word;
}

/* ===============================
   PAGINAÇÃO
================================ */
.reviews-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Botões */
.reviews-pagination button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8f8f2;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
}

.reviews-pagination button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Botão desativado */
.reviews-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Info da página */
.page-info {
  font-size: 13px;
  color: #bfbfbf;
  min-width: 90px;
  text-align: center;
}

@media (max-width: 640px) {
  .reviews {
    margin-top: 44px;
    overflow-x: clip;
  }

  .reviews-container {
    width: 100%;
    padding: 18px;
  }

  .reviews-container h2,
  .reviews-summary,
  .review-form,
  .reviews-list,
  .review-item {
    min-width: 0;
    max-width: 100%;
  }

  .reviews-container h2 {
    font-size: 1.45rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .review-form {
    padding: 14px;
    border-radius: 14px;
  }

  .stars-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .review-header {
    align-items: flex-start;
  }

  .review-header strong,
  .review-item p {
    overflow-wrap: anywhere;
  }

  .review-header span {
    margin-left: 0;
  }

  .reviews-pagination {
    gap: 8px;
  }

  .reviews-pagination button {
    padding: 7px 10px;
    font-size: 12px;
  }

  .page-info {
    min-width: auto;
    width: 100%;
    order: -1;
  }
}

@media (max-width: 420px) {
  .reviews-container {
    padding: 16px;
    border-radius: 18px;
  }

  .review-form-actions {
    flex-direction: column;
  }

  .review-form-actions .btn-product {
    width: 100%;
  }

  .reviews-heading {
    align-items: flex-start;
  }

  .reviews-summary {
    width: 100%;
  }
}

body.ns-plan-tier-pro {
  --bg-main: #191426;
  --bg-card: #2a2142;
  --text-main: #f6f8ff;
  --text-sub: #b8aecf;
  --accent: #9b6fe8;
  --accent-2: #50fa7b;
  --success: #91c97c;
  --border: rgba(155, 111, 232, 0.14);
}

body.ns-plan-tier-pro .reviews-pagination button:hover {
  background: rgba(155, 111, 232, 0.075);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(155, 111, 232, 0.12);
}

body.ns-plan-tier-pro .reviews-pagination button.active {
  background: linear-gradient(135deg, #9b6fe8, #50fa7b);
  color: #12091f;
}

/* OPERACAO THEME */
body.ns-plan-tier-growth {
  --bg-main: #11101A;
  --bg-card: #211d2b;
  --text-main: #f8f5f2;
  --text-sub: #bdb0c5;
  --accent: #d7b4ff;
  --accent-2: #f6c177;
  --success: #91c97c;
  --border: rgba(215, 180, 255, 0.14);
}

body.ns-plan-tier-growth .reviews-pagination button:hover {
  background: rgba(215, 180, 255, 0.075);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(215, 180, 255, 0.12);
}

body.ns-plan-tier-growth .reviews-pagination button.active {
  background: linear-gradient(135deg, #d7b4ff, #f6c177);
  color: #160e1f;
}

/* ESCALA THEME */
body.ns-plan-tier-scale {
  --bg-main: #0E121A;
  --bg-card: #191f2d;
  --text-main: #f8f7f0;
  --text-sub: #b8b7c6;
  --accent: #ffd166;
  --accent-2: #fff2b8;
  --success: #91c97c;
  --border: rgba(255, 209, 102, 0.14);
}

body.ns-plan-tier-scale .reviews-pagination button:hover {
  background: rgba(255, 209, 102, 0.075);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.12);
}

body.ns-plan-tier-scale .reviews-pagination button.active {
  background: linear-gradient(135deg, #ffd166, #fff2b8 52%, #8ea7ff);
  color: #171007;
}