/* ════════════════════════════════════════════════════
   ZIMLINK  —  rate.css
   Brand colours  :  #ffffff  |  rgb(37,189,37)  |  rgb(6,6,24)
   Fonts          :  Cormorant Garamond (headings) + Jost (body)
   Tone           :  Formal, professional, editorial
════════════════════════════════════════════════════ */

/* ── RESET & TOKENS ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --green       : rgb(37, 189, 37);
  --green-dark  : rgb(28, 148, 28);
  --green-5     : rgba(37, 189, 37, 0.05);
  --green-12    : rgba(37, 189, 37, 0.12);
  --green-25    : rgba(37, 189, 37, 0.25);
  --navy        : rgb(6, 6, 24);
  --navy-75     : rgba(6, 6, 24, 0.75);
  --navy-45     : rgba(6, 6, 24, 0.45);
  --navy-15     : rgba(6, 6, 24, 0.15);
  --navy-06     : rgba(6, 6, 24, 0.06);
  --white       : #ffffff;

  /* Surfaces */
  --surface     : #f8faf8;
  --border      : rgba(6, 6, 24, 0.11);
  --border-focus: var(--green);

  /* Star colours */
  --star-on     : rgb(37, 189, 37);
  --star-off    : rgba(6, 6, 24, 0.15);

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body   : 'Jost', sans-serif;

  /* Spacing & shape */
  --radius-sm   : 6px;
  --radius-md   : 10px;
  --radius-lg   : 16px;
  --shadow-card : 0 2px 20px rgba(6, 6, 24, 0.07);
  --shadow-lift : 0 6px 28px rgba(6, 6, 24, 0.11);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background : var(--surface);
  color      : var(--navy);
  min-height : 100vh;
  font-size  : 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── NAVBAR ──────────────────────────────────────── */
.navbar {
  position  : sticky;
  top       : 0;
  z-index   : 300;
  height    : 62px;
  display   : flex;
  align-items     : center;
  justify-content : space-between;
  padding   : 0 36px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}

.nav-logo {
  font-family    : var(--font-display);
  font-size      : 1.55rem;
  font-weight    : 700;
  letter-spacing : -0.3px;
  text-decoration: none;
  line-height    : 1;
}
.logo-zim  { color: var(--navy); }
.logo-link { color: var(--green); }

.nav-right {
  display    : flex;
  align-items: center;
  gap        : 14px;
}

.nav-avatar {
  width      : 34px;
  height     : 34px;
  border-radius: 50%;
  background : var(--green-12);
  border     : 1.5px solid var(--green-25);
  display    : flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size  : 0.95rem;
  color      : var(--green);
  flex-shrink: 0;
}

.nav-username {
  font-size  : 0.82rem;
  font-weight: 500;
  color      : var(--navy-75);
}

.nav-back {
  font-size      : 0.78rem;
  font-weight    : 500;
  color          : var(--navy-45);
  text-decoration: none;
  border         : 1px solid var(--border);
  border-radius  : var(--radius-sm);
  padding        : 5px 12px;
  transition     : border-color 0.15s, color 0.15s;
}
.nav-back:hover { border-color: var(--green); color: var(--green); }

/* ── PAGE HEADER ─────────────────────────────────── */
.page-header {
  background   : var(--navy);
  color        : var(--white);
  padding      : 56px 36px 0;
  position     : relative;
  overflow     : hidden;
}

/* Subtle geometric accent */
.page-header::before {
  content  : '';
  position : absolute;
  top      : -60px;
  right    : -60px;
  width    : 320px;
  height   : 320px;
  border   : 1px solid rgba(37, 189, 37, 0.12);
  border-radius: 50%;
  pointer-events: none;
}
.page-header::after {
  content  : '';
  position : absolute;
  top      : -30px;
  right    : -30px;
  width    : 200px;
  height   : 200px;
  border   : 1px solid rgba(37, 189, 37, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.header-inner {
  max-width: 680px;
  margin   : 0 auto;
  text-align: center;
  position : relative;
  z-index  : 1;
}

.header-label {
  display      : inline-block;
  font-size    : 0.7rem;
  font-weight  : 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color        : var(--green);
  border       : 1px solid var(--green-25);
  border-radius: var(--radius-sm);
  padding      : 4px 12px;
  margin-bottom: 18px;
}

.header-title {
  font-family   : var(--font-display);
  font-size     : clamp(1.9rem, 4vw, 2.8rem);
  font-weight   : 700;
  line-height   : 1.18;
  margin-bottom : 14px;
  letter-spacing: -0.5px;
}

.header-sub {
  font-size  : 0.88rem;
  font-weight: 300;
  color      : rgba(255, 255, 255, 0.60);
  max-width  : 460px;
  margin     : 0 auto 40px;
  line-height: 1.7;
}

/* Aggregate stats bar */
.agg-bar {
  position        : relative;
  z-index         : 1;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0;
  border-top      : 1px solid rgba(255, 255, 255, 0.10);
  margin-top      : 0;
}

.agg-cell {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 4px;
  padding       : 20px 40px;
}

.agg-value {
  font-family   : var(--font-display);
  font-size     : 1.6rem;
  font-weight   : 600;
  color         : var(--green);
  line-height   : 1;
}

.agg-label {
  font-size     : 0.68rem;
  font-weight   : 500;
  color         : rgba(255, 255, 255, 0.40);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agg-sep {
  width     : 1px;
  height    : 40px;
  background: rgba(255, 255, 255, 0.10);
}

/* ── MAIN GRID ───────────────────────────────────── */
.main-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 24px;
  max-width            : 1160px;
  margin               : 32px auto;
  padding              : 0 24px 72px;
}

/* ── CARD BASE ───────────────────────────────────── */
.card {
  background   : var(--white);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow   : var(--shadow-card);
  overflow     : hidden;
}

.card-head {
  padding      : 28px 32px 22px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-family   : var(--font-display);
  font-size     : 1.3rem;
  font-weight   : 700;
  letter-spacing: -0.2px;
  margin-bottom : 4px;
}

.card-desc {
  font-size : 0.8rem;
  color     : var(--navy-45);
  font-weight: 300;
}

/* ── AUTH GATE ───────────────────────────────────── */
.auth-gate {
  padding   : 24px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--navy-06);
}

.gate-line {
  width     : 32px;
  height    : 2px;
  background: var(--green);
  margin-bottom: 12px;
}

.gate-text {
  font-size    : 0.85rem;
  color        : var(--navy-75);
  margin-bottom: 14px;
}

.gate-btn {
  display        : inline-block;
  padding        : 9px 22px;
  background     : var(--navy);
  color          : var(--white);
  font-family    : var(--font-body);
  font-size      : 0.82rem;
  font-weight    : 600;
  border-radius  : var(--radius-sm);
  text-decoration: none;
  letter-spacing : 0.03em;
  transition     : background 0.18s;
}
.gate-btn:hover { background: var(--green); }

/* ── FORM ────────────────────────────────────────── */
form { padding: 28px 32px 32px; }

.field-block { margin-bottom: 26px; }

.field-label {
  display      : block;
  font-size    : 0.78rem;
  font-weight  : 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color        : var(--navy);
  margin-bottom: 10px;
}

.field-optional {
  font-weight   : 400;
  text-transform: none;
  letter-spacing: 0;
  color         : var(--navy-45);
  font-size     : 0.75rem;
  margin-left   : 4px;
}

.req { color: var(--green); }

/* Textarea & Select */
.field-ta,
.field-select {
  width      : 100%;
  font-family: var(--font-body);
  font-size  : 0.88rem;
  color      : var(--navy);
  background : var(--surface);
  border     : 1px solid var(--border);
  border-radius: var(--radius-md);
  padding    : 11px 14px;
  outline    : none;
  resize     : none;
  transition : border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.field-ta:focus,
.field-select:focus {
  border-color: var(--border-focus);
  box-shadow  : 0 0 0 3px var(--green-12);
  background  : var(--white);
}

.field-ta--tall { min-height: 130px; }
.field-select   { cursor: pointer; }

.char-count {
  display   : block;
  text-align: right;
  font-size : 0.7rem;
  color     : var(--navy-45);
  margin-top: 5px;
}

/* Split columns */
.split-block {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
}
.split-col { display: flex; flex-direction: column; }

/* Inline columns */
.inline-block {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 20px;
  align-items          : start;
}

/* ── OVERALL STARS ───────────────────────────────── */
.star-row {
  display: flex;
  gap    : 6px;
  margin-bottom: 8px;
}

.star-btn {
  background : none;
  border     : none;
  font-size  : 2rem;
  color      : var(--star-off);
  cursor     : pointer;
  padding    : 0;
  line-height: 1;
  transition : color 0.12s, transform 0.10s;
}
.star-btn:hover,
.star-btn.lit { color: var(--star-on); }
.star-btn:hover { transform: scale(1.15); }

.star-descriptor {
  display    : block;
  font-size  : 0.78rem;
  color      : var(--navy-45);
  font-style : italic;
  min-height : 18px;
  font-weight: 300;
}

/* ── CATEGORY TABLE ──────────────────────────────── */
.category-table {
  border    : 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow  : hidden;
}

.cat-row {
  display    : grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap        : 14px;
  padding    : 11px 16px;
  border-bottom: 1px solid var(--border);
  transition : background 0.15s;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: var(--green-5); }

.cat-label {
  font-size  : 0.83rem;
  font-weight: 500;
  color      : var(--navy-75);
}

.cat-stars {
  display: flex;
  gap    : 3px;
}

.cstar-btn {
  background: none;
  border    : none;
  font-size : 1.15rem;
  color     : var(--star-off);
  cursor    : pointer;
  padding   : 0;
  line-height: 1;
  transition: color 0.12s, transform 0.10s;
}
.cstar-btn:hover,
.cstar-btn.lit { color: var(--star-on); }
.cstar-btn:hover { transform: scale(1.12); }

.cat-score {
  font-size : 0.72rem;
  color     : var(--navy-45);
  min-width : 52px;
  text-align: right;
  font-weight: 500;
}
.cat-score.rated { color: var(--green); }

/* ── TOGGLE ──────────────────────────────────────── */
.toggle-wrap {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin-top : 4px;
}

.toggle-label { position: relative; cursor: pointer; display: inline-block; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-track {
  display      : block;
  width        : 46px;
  height       : 26px;
  background   : var(--navy-15);
  border-radius: 99px;
  transition   : background 0.22s;
  position     : relative;
}
.toggle-input:checked ~ .toggle-track { background: var(--green); }

.toggle-thumb {
  position     : absolute;
  top          : 3px;
  left         : 3px;
  width        : 20px;
  height       : 20px;
  background   : var(--white);
  border-radius: 50%;
  box-shadow   : 0 1px 4px rgba(6,6,24,0.20);
  transition   : transform 0.22s;
}
.toggle-input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

.toggle-text {
  font-size  : 0.83rem;
  font-weight: 600;
  color      : var(--navy-75);
  min-width  : 28px;
}

/* ── FORM NOTICES ────────────────────────────────── */
.form-notice {
  border-radius: var(--radius-sm);
  padding      : 11px 15px;
  font-size    : 0.83rem;
  font-weight  : 500;
  margin-bottom: 16px;
  border-left  : 3px solid transparent;
}

.error-notice {
  background  : rgba(198, 40, 40, 0.06);
  color       : #b71c1c;
  border-color: #c62828;
}

.success-notice {
  background  : var(--green-5);
  color       : rgb(20, 110, 20);
  border-color: var(--green);
}

/* ── SUBMIT BUTTON ───────────────────────────────── */
.submit-btn {
  width          : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 14px 20px;
  background     : var(--navy);
  color          : var(--white);
  font-family    : var(--font-body);
  font-size      : 0.88rem;
  font-weight    : 600;
  letter-spacing : 0.04em;
  text-transform : uppercase;
  border         : none;
  border-radius  : var(--radius-md);
  cursor         : pointer;
  transition     : background 0.20s, box-shadow 0.20s, transform 0.12s;
}
.submit-btn:hover {
  background: var(--green);
  box-shadow: 0 6px 22px var(--green-25);
}
.submit-btn:active  { transform: scale(0.985); }
.submit-btn:disabled {
  background: var(--navy-15);
  color     : var(--navy-45);
  cursor    : not-allowed;
  box-shadow: none;
  transform : none;
}

.btn-spinner {
  width        : 17px;
  height       : 17px;
  border       : 2px solid rgba(255,255,255,0.30);
  border-top-color: var(--white);
  border-radius: 50%;
  animation    : spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.submission-note {
  margin-top : 12px;
  font-size  : 0.72rem;
  color      : var(--navy-45);
  text-align : center;
  line-height: 1.6;
  font-weight: 300;
}

/* ── REVIEWS CARD ────────────────────────────────── */
.reviews-head {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 12px;
}

.sort-select {
  font-family  : var(--font-body);
  font-size    : 0.78rem;
  color        : var(--navy-75);
  background   : var(--surface);
  border       : 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding      : 6px 10px;
  cursor       : pointer;
  outline      : none;
  margin-top   : 4px;
  transition   : border-color 0.15s;
}
.sort-select:focus { border-color: var(--green); }

/* ── RATING BREAKDOWN ────────────────────────────── */
.breakdown {
  padding      : 20px 32px;
  border-bottom: 1px solid var(--border);
  display      : flex;
  flex-direction: column;
  gap          : 9px;
}

.b-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  font-size  : 0.75rem;
}

.b-label {
  width      : 30px;
  text-align : right;
  color      : var(--navy-45);
  font-weight: 500;
  flex-shrink: 0;
}

.b-track {
  flex         : 1;
  height       : 6px;
  background   : var(--navy-06);
  border-radius: 99px;
  overflow     : hidden;
}

.b-fill {
  height       : 100%;
  background   : var(--green);
  border-radius: 99px;
  transition   : width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.b-count {
  width     : 20px;
  color     : var(--navy-45);
  font-size : 0.70rem;
  flex-shrink: 0;
}

/* ── REVIEW CARDS ────────────────────────────────── */
.review-list {
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-card {
  border       : 1px solid var(--border);
  border-radius: var(--radius-md);
  padding      : 20px 22px;
  background   : var(--surface);
  transition   : box-shadow 0.18s;
  animation    : fadeUp 0.30s ease both;
}
.r-card:hover { box-shadow: var(--shadow-lift); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.r-header {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  gap            : 12px;
  margin-bottom  : 14px;
  flex-wrap      : wrap;
}

.r-identity { display: flex; align-items: center; gap: 11px; }

.r-avatar {
  width        : 38px;
  height       : 38px;
  border-radius: 50%;
  background   : var(--green-12);
  border       : 1.5px solid var(--green-25);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-family  : var(--font-display);
  font-weight  : 700;
  font-size    : 1rem;
  color        : var(--green);
  flex-shrink  : 0;
}

.r-name {
  font-size  : 0.87rem;
  font-weight: 600;
  color      : var(--navy);
}

.r-meta {
  font-size : 0.72rem;
  color     : var(--navy-45);
  margin-top: 2px;
}

/* Star display */
.r-stars { display: flex; gap: 2px; }
.rs {
  font-size: 0.95rem;
  color    : var(--star-off);
}
.rs.on { color: var(--star-on); }

/* Category chips */
.r-cats {
  display  : flex;
  flex-wrap: wrap;
  gap      : 6px;
  margin-bottom: 12px;
}

.r-chip {
  font-size    : 0.70rem;
  font-weight  : 500;
  color        : var(--navy-75);
  background   : var(--white);
  border       : 1px solid var(--border);
  border-radius: 4px;
  padding      : 3px 9px;
  letter-spacing: 0.01em;
}

/* Positive / improvement split */
.r-split {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 12px;
  margin-bottom        : 12px;
  padding              : 12px 14px;
  background           : var(--white);
  border               : 1px solid var(--border);
  border-radius        : var(--radius-sm);
}

.r-split-heading {
  font-size    : 0.65rem;
  font-weight  : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color        : var(--navy-45);
  margin-bottom: 4px;
}

.r-split-text {
  font-size : 0.82rem;
  color     : var(--navy-75);
  line-height: 1.55;
}

/* Review body */
.r-body {
  font-size  : 0.85rem;
  color      : var(--navy-75);
  line-height: 1.65;
  margin-bottom: 12px;
  font-weight: 300;
}

/* Footer tags */
.r-footer { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.r-tag {
  font-size    : 0.68rem;
  font-weight  : 600;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding      : 3px 9px;
}

.r-tag--recommend {
  background: var(--green-12);
  color     : var(--green-dark);
  border    : 1px solid var(--green-25);
}

.r-tag--type {
  background: var(--navy-06);
  color     : var(--navy-45);
  border    : 1px solid var(--border);
}

/* ── LOADING & EMPTY ─────────────────────────────── */
.loading-block {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 14px;
  padding       : 40px 0;
  color         : var(--navy-45);
  font-size     : 0.83rem;
}

.spinner {
  width        : 28px;
  height       : 28px;
  border       : 2.5px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation    : spin 0.75s linear infinite;
}

.empty-block {
  padding   : 40px 32px;
  text-align: center;
}

.empty-line {
  width     : 40px;
  height    : 2px;
  background: var(--green-25);
  margin    : 0 auto 16px;
}

.empty-text {
  font-size  : 0.84rem;
  color      : var(--navy-45);
  font-weight: 300;
  line-height: 1.7;
}

/* ── FOOTER ──────────────────────────────────────── */
.page-footer {
  background   : var(--white);
  border-top   : 1px solid var(--border);
  padding      : 20px 36px;
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  flex-wrap    : wrap;
  gap          : 10px;
}

.footer-logo {
  font-family   : var(--font-display);
  font-size     : 1.1rem;
  font-weight   : 700;
}

.footer-copy {
  font-size : 0.75rem;
  color     : var(--navy-45);
  font-weight: 300;
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr; }
  .agg-cell  { padding: 16px 24px; }
}

@media (max-width: 600px) {
  .navbar      { padding: 0 20px; }
  .page-header { padding: 40px 20px 0; }
  .agg-bar     { flex-direction: column; gap: 0; }
  .agg-sep     { width: 60px; height: 1px; }
  .main-grid   { padding: 0 14px 60px; margin-top: 24px; }
  .card-head,
  form,
  .review-list,
  .breakdown   { padding-left: 20px; padding-right: 20px; }
  .split-block,
  .inline-block { grid-template-columns: 1fr; }
  .reviews-head { flex-direction: column; }
  .cat-row     { grid-template-columns: 1fr auto; }
  .cat-score   { display: none; }
  .r-split     { grid-template-columns: 1fr; }
}