/* ===================================================
   style.css — how every page LOOKS.
   Both index.html and business.html use this file.
   =================================================== */

/* ---------- The photo background (every page) ---------- */

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Two layers: a see-through dark layer ON TOP of the photo,
     so white text stays easy to read.
     To use your own photo instead, save it in this folder as
     background.jpg and change the url(...) below to url("background.jpg") */
  background-color: #1b2a22;   /* shown while the photo loads, or if it can't */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7)),
    url("https://images.unsplash.com/photo-1712850244310-5765b9373353?fm=jpg&q=70&w=1920&auto=format&fit=crop");
  background-size: cover;       /* stretch the photo to fill the screen */
  background-position: center;
  background-attachment: fixed; /* photo stays still while you scroll */
}

/* ---------- The logo ---------- */

.logo {
  font-family: "Bungee", Impact, sans-serif;
  color: white;
  text-decoration: none;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  margin: 0;
}

.logo span {
  color: #ffb612;              /* SA flag gold */
}

/* ---------- Home page ---------- */

.hero {
  flex: 1;                     /* fills the screen above the footer */
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 22vh 16px 40px;     /* push everything down a bit from the top */
  box-sizing: border-box;
  text-align: center;
}

.hero .logo {
  font-size: clamp(2.5em, 9vw, 4.5em);  /* big, but shrinks on small screens */
  line-height: 1.1;
}

.tagline {
  color: #f4f1ea;
  font-size: 1.2em;
  line-height: 1.5;
  margin: 15px 0 30px;
}

#search {
  width: 100%;
  box-sizing: border-box;      /* stops the box spilling past the edges */
  padding: 16px 20px;
  font-size: 1.15em;
  border: 3px solid #ffb612;
  border-radius: 40px;         /* nice rounded pill shape */
  outline: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#search:focus {
  border-color: #007a4d;
}

.hint {
  color: #ddd;
  font-style: italic;
  margin-top: 15px;
}

#business-list {
  margin-top: 25px;
  text-align: left;
}

.business-item {
  display: block;
  background-color: white;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: inherit;
  text-decoration: none;       /* no underline on the link */
  transition: transform 0.15s;
}

.business-item:hover {
  transform: translateY(-3px); /* lifts a little when you hover */
}

.business-item h3 {
  margin: 0 0 5px;
}

.no-results {
  text-align: center;
  color: white;
  font-size: 1.1em;
}

/* ---------- Business page ---------- */

header {
  padding: 20px;
  text-align: center;
}

.small-logo {
  font-size: 1.8em;
}

.page {
  flex: 1;
  width: 100%;
  max-width: 700px;
  margin: 10px auto 30px;
  padding: 0 16px;
  box-sizing: border-box;
}

.back-link {
  display: inline-block;
  margin-bottom: 15px;
  color: #ffb612;
  font-weight: bold;
}

.business-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.business-card h2 {
  margin-top: 0;
}

.details {
  color: #666;
}

.section-title {
  color: white;
  margin-top: 30px;
}

.review {
  background-color: white;
  border-left: 5px solid #ffb612;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.review-author {
  font-weight: bold;
}

.review-date {
  font-size: 0.85em;
  color: #888;
}

/* Shown instead of a score bar when a business has no reviews */
.no-reviews {
  color: #666;
  font-style: italic;
  margin: 10px 0 0;
}

/* ---------- Account bar, top right (every page) ---------- */

.account-bar {
  position: absolute;
  top: 15px;
  right: 20px;
  color: white;
  font-size: 0.95em;
}

.account-bar a,
.account-bar .link-button {
  color: #ffb612;
  font-weight: bold;
}

/* On phones, put the account bar on its own line above the logo */
@media (max-width: 600px) {
  .account-bar {
    position: static;
    text-align: right;
    padding: 10px 16px 0;
  }
}

/* A button that looks like a link */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #007a4d;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Forms (login page and review box) ---------- */

.form-card {
  max-width: 420px;
  margin: 0 auto;
}

.write-review {
  margin-top: 20px;
}

.write-review h3 {
  margin-top: 0;
}

label {
  display: block;
  font-weight: bold;
  margin: 15px 0 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1em;
  font-family: inherit;
  border: 2px solid #ccc;
  border-radius: 8px;
}

input:focus,
textarea:focus {
  border-color: #007a4d;
  outline: none;
}

/* The gatvol-to-lekker slider */
input[type="range"] {
  width: 100%;
  accent-color: #007a4d;
}

.big-button {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 24px;
  font-size: 1em;
  font-weight: bold;
  color: white;
  background-color: #007a4d;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;
}

.big-button:hover {
  background-color: #005c3a;
}

.big-button:disabled {
  background-color: #999;
  cursor: wait;
}

.form-message {
  margin: 12px 0 0;
}

.form-message.error   { color: #de3831; }
.form-message.success { color: #007a4d; font-weight: bold; }

.switch-mode {
  margin-top: 20px;
  color: #666;
}

/* ---------- Adding businesses ---------- */

/* "Can't find them? Add a business" under the search */
.add-link {
  color: #ddd;
  margin-top: 20px;
}

.add-link a {
  color: #ffb612;
  font-weight: bold;
}

/* The category drop-down */
select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1em;
  font-family: inherit;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: white;
}

/* "Find it on Google" box on the add page */
.google-box {
  background-color: #f4f1ea;
  border-radius: 8px;
  padding: 5px 15px 10px;
  margin-bottom: 10px;
}

/* Google's own search box: make it fill the width */
gmp-place-autocomplete {
  width: 100%;
  color-scheme: light;
}

.small-note {
  font-size: 0.85em;
  color: #666;
  margin: 8px 0 0;
}

/* "Is it one of these?" box on the add page */
.similar {
  font-size: 0.9em;
}

.similar p {
  margin: 8px 0 4px;
  color: #b07d00;
  font-weight: bold;
}

.similar a {
  display: block;
  color: #007a4d;
  margin: 3px 0;
}

/* "Waiting for approval" note */
.pending-badge {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #fff4d6;
  color: #7a5600;
  font-size: 0.9em;
}

.business-card .pending-badge {
  margin: 0 0 10px;
}

/* ---------- Reaction GIFs ---------- */

.reaction-gif {
  margin-top: 15px;
  text-align: center;
}

.reaction-gif iframe {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 200px;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  pointer-events: none;   /* so clicking the GIF doesn't open GIPHY */
}

.reaction-gif a {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.75em;
  color: #888;
}

/* ---------- Claiming and owner responses ---------- */

.claim-line {
  margin: 5px 0 0;
  font-size: 0.9em;
}

.claim-line a {
  color: #007a4d;
  font-weight: bold;
}

.claim-line.claimed {
  color: #007a4d;
  font-weight: bold;
}

.owner-panel {
  margin-top: 20px;
  border: 3px solid #ffb612;
}

.owner-panel h3 {
  margin-top: 0;
}

.owner-panel a {
  color: #007a4d;
  font-weight: bold;
}

/* The business's reply under a review */
.owner-response {
  margin-top: 10px;
  padding: 10px 12px;
  background-color: #eef7f2;
  border-left: 4px solid #007a4d;
  border-radius: 6px;
}

.owner-response-heading {
  font-size: 0.85em;
  font-weight: bold;
  color: #007a4d;
}

.owner-response p {
  margin: 6px 0 0;
}

.email-switch {
  margin: 10px 0;
  align-items: center;
}

.saved-note {
  font-size: 0.85em;
  color: #007a4d;
  margin-left: 6px;
}

.cancel-button {
  margin-left: 15px;
  color: #666;
}

/* Tick box with its text on the same line */
.checkbox-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: normal;
}

.checkbox-label input {
  margin-top: 3px;
}

/* ---------- Tags ---------- */

.tag-pill {
  display: inline-block;
  padding: 3px 10px;
  margin: 3px 4px 3px 0;
  border-radius: 20px;
  font-size: 0.85em;
  background-color: #eee;
}

.tag-pill.gatvol { background-color: #fde3e1; color: #9a1f19; }
.tag-pill.lekker { background-color: #dff1e8; color: #005c3a; }

.tag-row {
  margin-top: 8px;
}

.tag-summary {
  margin-top: 15px;
}

.tag-summary-heading {
  font-size: 0.85em;
  font-weight: bold;
  color: #666;
  margin-bottom: 4px;
}

/* The tag picker in the review form: tick boxes that look like pills */
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-option {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  border: 2px solid #ddd;
  border-radius: 20px;
  font-weight: normal;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
}

/* Hide the real tick box but keep it usable with the keyboard
   (the pill shows whether it's ticked) */
.tag-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tag-option:has(input:focus-visible) {
  outline: 3px solid #ffb612;
}

.tag-option.picked.gatvol { border-color: #de3831; background-color: #fde3e1; }
.tag-option.picked.lekker { border-color: #007a4d; background-color: #dff1e8; }

.tag-option:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- WhatsApp sharing ---------- */

.whatsapp-button {
  display: inline-block;
  margin: 12px 10px 0 0;
  padding: 10px 18px;
  border-radius: 30px;
  background-color: #25d366; /* WhatsApp green */
  color: #073e1d;
  font-weight: bold;
  text-decoration: none;
}

.whatsapp-button:hover {
  background-color: #1ebe5a;
}

.update-verdict-button {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

/* ---------- Comeback Kid ---------- */

.comeback-badge {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fde3e1, #fff4d6, #dff1e8);
  border: 2px solid #007a4d;
  font-weight: bold;
  font-size: 0.9em;
  color: #005c3a;
}

.score-change {
  font-size: 0.85em;
  color: #666;
  margin-top: 6px;
}

.score-change.comeback {
  color: #007a4d;
  font-weight: bold;
}

.reviewer-update {
  margin-top: 10px;
  padding: 10px 12px;
  background-color: #fff8e6;
  border-left: 4px solid #ffb612;
  border-radius: 6px;
}

.reviewer-update-heading {
  font-size: 0.85em;
  font-weight: bold;
  color: #7a5600;
}

.reviewer-update p {
  margin: 6px 0 0;
}

/* ---------- My reviews page ---------- */

.page-intro {
  color: #ddd;
  margin-top: -5px;
}

.my-review-business {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  color: #007a4d;
  margin-bottom: 2px;
}

.my-review.editing label {
  margin-top: 12px;
}

.my-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.my-review-actions .whatsapp-button {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.9em;
}

.big-button.small-button {
  margin-top: 0;
  padding: 8px 16px;
  font-size: 0.9em;
}

.edit-review-link {
  display: inline-block;
  margin: 12px 0 0;
  color: #007a4d;
  font-weight: bold;
}

/* ---------- Contact page ---------- */

.contact-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 15px 0 20px;
}

.contact-topic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid #ddd;
  border-radius: 10px;
  color: #222;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.contact-topic:hover {
  border-color: #007a4d;
  transform: translateY(-2px);
}

.contact-topic span {
  font-size: 0.9em;
  color: #666;
}

.contact-address {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.contact-email {
  font-size: 1.2em;
  font-weight: bold;
  margin: 4px 0;
}

/* ---------- Sorting reviews ---------- */

/* Heading on the left, sort menu on the right (stacks on phones) */
.reviews-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sort-label {
  color: white;
  font-weight: normal;
  margin: 0 0 15px;
}

.sort-label select {
  width: auto;
  padding: 6px 10px;
  margin-left: 6px;
}

/* ---------- Terms and Privacy pages ---------- */

.legal {
  line-height: 1.6;
}

.legal h1 {
  margin-top: 0;
  font-size: 1.8em;
}

.legal h2 {
  font-size: 1.2em;
  margin-top: 28px;
  color: #007a4d;
}

.legal a {
  color: #007a4d;
}

.legal-date {
  color: #888;
  font-size: 0.9em;
  margin-top: -10px;
}

/* Tables scroll sideways on small phones instead of squashing */
.legal-table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9em;
}

.legal-table th,
.legal-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  min-width: 120px;
}

.legal-table th {
  background-color: #f4f1ea;
}

/* The "fill this in" box for your address and phone number */
.legal-todo {
  background-color: #fff4d6;
  border: 2px dashed #ffb612;
  border-radius: 8px;
  padding: 5px 15px;
}

/* ---------- Footer (every page) ---------- */

footer a {
  color: #ddd;
}

footer {
  text-align: center;
  color: #bbb;
  font-size: 0.85em;
  padding: 20px;
}

/* ---------- The score bar (used on both pages) ---------- */

.score-bar {
  margin-top: 15px;
}

/* The line with the number and the word */
.score-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.score-number {
  font-size: 2em;
  font-weight: bold;
}

.verdict {
  font-size: 1.2em;
  font-weight: bold;
}

.verdict-gatvol { color: #de3831; }   /* SA flag red */
.verdict-soso   { color: #b07d00; }   /* darker gold, easier to read */
.verdict-lekker { color: #007a4d; }   /* SA flag green */

/* The coloured bar: red on the left, gold in the middle, green on the right */
.score-track {
  position: relative;          /* lets the dot be placed inside it */
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(to right, #de3831, #ffb612, #007a4d);
}

/* The dot that shows where the score sits on the bar */
.score-marker {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: white;
  border: 4px solid #222;
  box-sizing: border-box;
  transform: translate(-50%, -50%);   /* centres the dot on its spot */
}

/* "Gatvol" under the left end, "Lekker" under the right end */
.score-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  color: #666;
  margin-top: 6px;
}

/* Smaller version for the home page list and for reviews */
.score-bar.small {
  margin-top: 10px;
}

.score-bar.small .score-number {
  font-size: 1.2em;
}

.score-bar.small .verdict {
  font-size: 1em;
}

.score-bar.small .score-track {
  height: 8px;
}

.score-bar.small .score-marker {
  width: 16px;
  height: 16px;
  border-width: 3px;
}

/* ---------- NEW: Spread the love ---------- */

/* Note under the tag picker (e.g. "first names only") */
.tag-note {
  flex-basis: 100%;            /* sits on its own line under the pills */
  margin: 4px 0 0;
  color: #007a4d;
}

/* "Full review" / "Lekker shout-out" switch above the review form */
.mode-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.mode-button,
.quick-score {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 20px;
  background-color: white;
  font-size: 0.95em;
  cursor: pointer;
}

.mode-button.picked,
.quick-score.picked {
  border-color: #007a4d;
  background-color: #dff1e8;
  font-weight: bold;
}

.quick-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* Home page: "Latest lekker shout-outs" */
.lekker-strip {
  margin-top: 30px;
  text-align: left;
}

.lekker-strip h2 {
  color: #f4f1ea;
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 12px;
}

.lekker-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.lekker-card {
  display: block;
  background-color: white;
  border-left: 5px solid #007a4d;
  border-radius: 10px;
  padding: 12px 14px;
  color: #222;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lekker-card:hover {
  transform: translateY(-2px);
}

.lekker-card-name {
  font-weight: bold;
}

.lekker-card-score {
  color: #007a4d;
  font-weight: bold;
  margin: 4px 0;
}

.lekker-card p {
  margin: 6px 0;
  font-size: 0.9em;
}

.lekker-card-who {
  color: #777;
  font-size: 0.8em;
}

/* ---------- NEW: "Add it" prompts in the search results ---------- */
.add-prompt {
  background-color: white;
  border-radius: 10px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.add-prompt p {
  margin: 0 0 12px;
}

.add-line {
  color: #f4f1ea;
  text-align: center;
  margin-top: 10px;
}

.add-line a {
  color: #ffb612;
  font-weight: bold;
}

/* ---------- NEW: business logos and websites ---------- */
.business-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.business-title h2,
.business-title h3 {
  margin: 0;
}

.business-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;         /* never stretch or crop the logo */
  border-radius: 10px;
  border: 1px solid #eee;
  background-color: white;
  flex-shrink: 0;
}

.business-logo.small-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.website-line {
  margin: 4px 0 10px;
}

.website-link {
  color: #007a4d;
  font-weight: bold;
  word-break: break-all;       /* long addresses wrap on phones */
}

/* The owner's logo and website editor */
.profile-editor {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 10px;
}

.profile-editor h4 {
  margin: 0 0 10px;
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-preview {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ccc;
  border-radius: 10px;
  font-size: 0.75em;
  color: #888;
  text-align: center;
  flex-shrink: 0;
}

.logo-preview:has(img) {
  border: none;
}

/* Hide the plain "choose file" box; the button label opens it */
.file-button {
  position: relative;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.file-button:has(input:focus-visible) {
  outline: 3px solid #ffb612;
}

.website-row {
  display: flex;
  gap: 8px;
}

.website-row input {
  flex: 1;
  min-width: 0;
}

.website-row .big-button {
  margin-top: 0;
}

/* ---------- NEW: Gatvol Hot Topics ---------- */

/* The banner at the top of the home page */
.hot-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 0 auto 28px;
  padding: 10px 18px;
  max-width: 600px;
  background-color: #ffb612;
  color: #1e2d24;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}

.hot-banner:hover {
  transform: translateY(-2px);
}

.hot-banner-label {
  background-color: #de3831;
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.85em;
  white-space: nowrap;
}

/* The list of topics */
.topic-card {
  display: block;
  background-color: white;
  color: #222;
  text-decoration: none;
  border-radius: 10px;
  border-left: 5px solid #de3831;
  padding: 16px 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.topic-card:hover {
  transform: translateY(-2px);
}

.topic-card h3 {
  margin: 4px 0 6px;
}

.topic-card p {
  margin: 0 0 10px;
}

.topic-date,
.topic-stats {
  color: #777;
  font-size: 0.85em;
}

.topic-stats {
  margin-top: 6px;
}

/* The article */
.article h2 {
  margin: 6px 0 10px;
  line-height: 1.25;
}

.article-lead {
  font-size: 1.1em;
  font-weight: bold;
  color: #444;
}

.article-body p,
.article-body li {
  line-height: 1.65;
}

.article-body h3 {
  margin: 22px 0 6px;
}

.sources {
  font-size: 0.9em;
  padding-left: 20px;
}

.sources a {
  color: #007a4d;
  word-break: break-word;
}

#topic-cta .big-button,
#topic-share .whatsapp-button {
  margin-top: 12px;
}

/* The gatvol meter */
.meter-card h3 {
  margin-top: 0;
}

.meter-label {
  font-weight: bold;
  margin-bottom: 6px;
}

#meter-vote {
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

/* Comments */
.comment-actions {
  margin-top: 4px;
  font-size: 0.85em;
}

.report-link {
  color: #999;
}

/* The weekly mailer box */
.mailer-box {
  background-color: #1e2d24;
  color: #f4f1ea;
  border: 2px solid #ffb612;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 25px 0;
}

.mailer-box h3 {
  margin: 0 0 6px;
  color: #ffb612;
}

.mailer-box .small-note {
  color: #ddd;
}

.mailer-box .secondary-button {
  background-color: transparent;
  border: 2px solid #ddd;
  color: #ddd;
}

/* The mailer tick box on the sign-up form */
.mailer-opt-in {
  margin-top: 12px;
}

/* Messages are easier to read on the dark mailer box in these colours */
.mailer-box .form-message.success { color: #7ddc9f; }
.mailer-box .form-message.error   { color: #ff8a80; }

/* Space between the cards on the topic page */
.article,
.meter-card,
#comment-form-box {
  margin-bottom: 18px;
}

/* On phones: no arrow in the banner (the whole banner is a link anyway) */
@media (max-width: 600px) {
  .hot-banner-arrow {
    display: none;
  }
  .hot-banner {
    margin-bottom: 20px;
    border-radius: 18px;
  }
}

/* ---------- NEW: profile pictures ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  color: white;
  font-weight: bold;
  background-color: #ddd;
}

.avatar.tiny  { width: 26px;  height: 26px;  font-size: 0.8em; vertical-align: middle; }
.avatar.small { width: 36px;  height: 36px;  font-size: 1em; }
.avatar.big   { width: 96px;  height: 96px;  font-size: 2.4em; }

.author-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
}

.account-avatar {
  margin-right: 6px;
  text-decoration: none;
}

.profile-card {
  margin-bottom: 25px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.profile-name {
  margin: 0 0 4px;
}

.profile-stats {
  margin: 0 0 8px;
  color: #666;
}

/* Line up the date under the name (past the picture) */
.author-line + .review-date {
  margin-left: 46px;
}

/* ---------- NEW: trust features ---------- */
.reviewer-stats {
  margin: -2px 0 6px 46px;     /* lines up under the name, past the picture */
  font-size: 0.8em;
  color: #888;
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.85em;
}

.helpful-button {
  padding: 5px 12px;
  border: 2px solid #ddd;
  border-radius: 20px;
  background-color: white;
  font-size: 1em;
  cursor: pointer;
}

.helpful-button:hover {
  border-color: #007a4d;
}

.helpful-button.voted {
  border-color: #007a4d;
  background-color: #dff1e8;
  font-weight: bold;
}

.helpful-count {
  color: #666;
}

.review-actions .report-link {
  margin-left: auto;          /* push "Report" to the right */
}

.how-scores {
  margin: 6px 0 0;
  font-size: 0.85em;
}

.how-scores a {
  color: #007a4d;
}

.how-it-works h1 {
  margin-top: 0;
}

.how-it-works h2 {
  margin-top: 26px;
}

/* ---------- NEW: reviewer pages, following, badges ---------- */

/* Names on reviews are now links to the reviewer's page */
a.author-line {
  color: inherit;
  text-decoration: none;
}

a.author-line:hover span {
  text-decoration: underline;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  margin: 2px 4px 2px 0;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: bold;
  white-space: nowrap;
  background-color: #f4f1ea;
  color: #1e2d24;
}

.badge-legend  { background-color: #fff2c6; color: #7a5600; }
.badge-regular { background-color: #fde3e1; color: #a3261f; }
.badge-new     { background-color: #e6f2ea; color: #1e5d3a; }
.badge-lekker  { background-color: #dff1e8; color: #007a4d; }

.reviewer-stats .badge {
  font-size: 0.95em;
  padding: 1px 7px;
}

.badge-row {
  margin-top: 4px;
}

.reviewer-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 10px;
  text-align: center;
}

.reviewer-number {
  background-color: #f7f6f2;
  border-radius: 10px;
  padding: 10px 6px;
}

.reviewer-number strong {
  display: block;
  font-size: 1.4em;
  color: #1e2d24;
}

.reviewer-number span {
  font-size: 0.8em;
  color: #666;
}

@media (max-width: 600px) {
  .reviewer-numbers {
    grid-template-columns: repeat(2, 1fr);
  }
}

.follow-button.following {
  background-color: white;
  color: #007a4d;
  border: 2px solid #007a4d;
}

.feed-bell {
  font-weight: bold;
}

/* Tabs on the profile page */
.tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 16px;
}

.tab {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  background: transparent;
  color: #f4f1ea;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}

.tab.active {
  background-color: #ffb612;
  border-color: #ffb612;
  color: #1e2d24;
}

.following-heading {
  color: #ddd;
}

.following-list {
  margin-bottom: 12px;
}

.following-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 8px 0;
  padding: 4px 12px 4px 4px;
  background-color: white;
  border-radius: 30px;
  color: #1e2d24;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9em;
}

.feed-what {
  margin: 2px 0 6px 46px;
  font-size: 0.9em;
  color: #666;
}

.feed-what a {
  color: #007a4d;
  font-weight: bold;
}

.profile-extras {
  border-top: 1px solid #eee;
  margin-top: 12px;
  padding-top: 10px;
}

.my-followers {
  margin: 8px 0;
}

.my-followers a {
  color: #007a4d;
  font-weight: bold;
}