/* === Weinprobe Guest Styles (Rate / Results / Public User) === */
/* Basiert NUR auf globalen Tokens aus styles.css – kein eigenes :root mehr! */

/* Grundlayout übernimmt die Farbwelt aus styles.css */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Karten & Container (leicht) */
.container{ max-width: 980px; margin: 24px auto; padding: 0 16px; }
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin-bottom: 16px;
}
h1,h2{ margin: 0 0 12px; }

/* Formularfelder – zurückhaltend, Standard weiß (Rate/Results/Admin färbt ohnehin um) */
select, input, textarea, button{
  width: 100%;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
select:focus, input:focus, textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--wine-600) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-600) 22%, transparent);
}

/* Buttons im Public-Bereich */
button, .btn{
  cursor: pointer;
  background: var(--wine-600);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(139,30,48,.18);
}
button:hover, .btn:hover{ background: linear-gradient(90deg, var(--wine-600), var(--wine-800)); }

/* Kleinere Helfer */
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.col{ flex:1 1 150px; }
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background: color-mix(in srgb, var(--gold-400) 35%, #fff 65%);
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, #fff 45%);
  color:#3a3a3a;
}
.note{ color: var(--muted); font-size: 12px; margin-top: 8px; }

/* Sterne (schlicht) */
.stars{ display:flex; gap:.25rem; }
.stars input{ display:none; }
.stars label{
  cursor:pointer; font-size:1.4rem; line-height:1; user-select:none;
  padding: .15rem .25rem; border-radius:.4rem;
  border:1px solid var(--border); background:var(--surface);
}
.star-checked{ color: var(--gold-400); }

/* Responsive Kleinkram */
@media (max-width: 900px){
  .container { padding: 0 12px; }
}