/* ===================================================
   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;
}