/* ===================================================================
   Formulare pre celu platformu

   Styly formulara a zoznamu recenzii boli v public/templates/default.css,
   teda ich mal len tenant so sablonou default. Kazdy iny (video,
   professional, trade, politika, beauty, gastro, lawyer, photo, vet)
   dostal holy prehliadacovy formular bez odsadenia a bez kontajnera.
   Preto su tu, v subore, ktory sa nacitava vsade.

   Subor sa linkuje PRED /templates/{sablona}.css, takze sablona, ktora
   si tieto triedy uz definuje po svojom, si ich drzi — toto je zaklad,
   nie prepis.

   Brxa (managed_mode = custom) subor nedostava vobec. ReviewForm ani
   ReviewList sa jej nerenderuju (recenzie.astro ma !IS_REMESELNIK), takze
   by pre nu boli tieto pravidla mrtve, a .form-group / .msg-error na
   prihlaseni by sa jej naopak zmenili — coz je mimo rozsahu.

   Farby su z tokenov. Vynimkou su stavove farby uspechu a chyby: tie
   ziadny token neopisuje a odvodit sa z primarnej farby nedaju (cervena
   ma vyznam, nie odtien). Su preto vytiahnute ako dve premenne na jednom
   mieste, aby ich sablona vedela prepisat bez hladania po subore.
   =================================================================== */

:root {
  --frm-ok: #15803d;
  --frm-ok-bg: color-mix(in srgb, var(--frm-ok) 10%, var(--bsc-bg, #fff));
  --frm-err: #b91c1c;
  --frm-err-bg: color-mix(in srgb, var(--frm-err) 10%, var(--bsc-bg, #fff));
  /* Zlata hviezda je vyznam, nie odtien znacky. --bsc-accent-gold sa na to
     pouzit neda: u tenanta 9003 ma hodnotu #ffffff, takze hviezdy boli
     biele na bielej karte a nebolo ich vidiet vobec. */
  --frm-star: #f59e0b;
  --frm-star-off: color-mix(in srgb, var(--bsc-text, #1a1a1a) 22%, var(--bsc-bg, #fff));
}

/* ---------- Formular recenzii ---------- */

.rvf-wrap {
  padding: 48px 16px 64px;
  font-family: var(--bsc-font, inherit);
  color: var(--bsc-text, inherit);
}
.rvf-inner {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bsc-surface, transparent);
  border: 1px solid var(--bsc-line, rgba(0, 0, 0, .1));
  border-radius: calc(var(--bsc-radius, 10px) + 6px);
  padding: 32px 28px;
  box-sizing: border-box;
}
.rvf-title {
  font-family: var(--bsc-display, var(--bsc-font, inherit));
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 8px;
  text-align: center;
  color: var(--bsc-text, inherit);
}
.rvf-sub {
  margin: 0 0 28px;
  text-align: center;
  font-size: calc(14px * var(--bsc-text-scale, 1));
  line-height: 1.5;
  color: var(--bsc-text-muted, inherit);
}
.rvf-form { display: flex; flex-direction: column; gap: 18px; }
.rvf-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rvf-label {
  font-size: calc(13px * var(--bsc-text-scale, 1));
  font-weight: 600;
  color: var(--bsc-text, inherit);
}
.rvf-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bsc-line, rgba(0, 0, 0, .15));
  border-radius: var(--bsc-radius, 10px);
  font-size: calc(15px * var(--bsc-text-scale, 1));
  font-family: inherit;
  background: var(--bsc-bg, #fff);
  color: var(--bsc-text, inherit);
  box-sizing: border-box;
}
.rvf-input::placeholder { color: var(--bsc-text-muted, inherit); opacity: .8; }
.rvf-input:focus {
  outline: 2px solid color-mix(in srgb, var(--bsc-primary, #555) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--bsc-primary, #555);
}
textarea.rvf-input { resize: vertical; min-height: 110px; }

/* Hviezdy su skutocne hviezdy (inline SVG v ReviewForm.astro), nie
   zaskrtavacie policka ani znak z pisma — glyf ★ sa v niektorych
   pismach nevykresli a v holom <button> vyzeral ako stvorcek s ramom. */
.rvf-stars { display: flex; gap: 2px; align-items: center; }
.rvf-stars .rvf-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  color: var(--frm-star-off);
  transition: color .15s, transform .1s;
}
.rvf-stars .rvf-star svg { display: block; width: 30px; height: 30px; }
.rvf-stars .rvf-star.is-on { color: var(--frm-star); }
.rvf-stars .rvf-star:hover { transform: scale(1.08); }
.rvf-star:focus-visible {
  outline: 2px solid var(--bsc-primary, #555);
  outline-offset: 2px;
  border-radius: 4px;
}

.rvf-submit {
  align-self: flex-start;
  padding: 12px 30px;
  border: none;
  border-radius: var(--bsc-radius, 10px);
  background: var(--bsc-btn-bg, var(--bsc-primary, #555));
  color: var(--bsc-btn-text, var(--bsc-on-primary, #fff));
  font-size: calc(15px * var(--bsc-text-scale, 1));
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.rvf-submit:hover { opacity: .9; }
.rvf-submit:disabled { opacity: .55; cursor: default; }

.rvf-file {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--bsc-line, rgba(0, 0, 0, .2));
  border-radius: var(--bsc-radius, 10px);
  font-size: calc(14px * var(--bsc-text-scale, 1));
  font-family: inherit;
  background: var(--bsc-bg, #fff);
  color: var(--bsc-text, inherit);
  box-sizing: border-box;
  cursor: pointer;
}
.rvf-hint { font-size: calc(12px * var(--bsc-text-scale, 1)); color: var(--bsc-text-muted, inherit); margin-top: 4px; }
.rvf-status { font-size: calc(13px * var(--bsc-text-scale, 1)); margin-top: 6px; }
.rvf-status--ok { color: var(--frm-ok); }
.rvf-status--err { color: var(--frm-err); }

.rvf-msg {
  padding: 14px 18px;
  border-radius: var(--bsc-radius, 10px);
  margin-bottom: 24px;
  font-size: calc(14px * var(--bsc-text-scale, 1));
  line-height: 1.5;
}
.rvf-msg--ok { background: var(--frm-ok-bg); color: var(--frm-ok); border: 1px solid currentColor; }
.rvf-msg--err { background: var(--frm-err-bg); color: var(--frm-err); border: 1px solid currentColor; }

@media (max-width: 600px) {
  .rvf-wrap { padding: 32px 12px 48px; }
  .rvf-inner { padding: 22px 18px; }
  .rvf-submit { align-self: stretch; text-align: center; }
}

/* ---------- Zoznam recenzii ---------- */

.rvl-wrap { padding: 48px 16px 8px; font-family: var(--bsc-font, inherit); }
.rvl-inner { max-width: 1000px; margin: 0 auto; }
.rvl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rvl-card {
  border: 1px solid var(--bsc-line, rgba(0, 0, 0, .08));
  border-radius: calc(var(--bsc-radius, 10px) + 4px);
  padding: 22px;
  background: var(--bsc-surface, var(--bsc-bg, #fff));
  min-width: 0;
}
.rvl-name { font-weight: 700; font-size: calc(15px * var(--bsc-text-scale, 1)); margin-bottom: 6px; color: var(--bsc-text, inherit); }
.rvl-stars { color: var(--frm-star); font-size: calc(16px * var(--bsc-text-scale, 1)); letter-spacing: 2px; margin-bottom: 10px; }
.rvl-text { font-size: calc(14px * var(--bsc-text-scale, 1)); line-height: 1.6; color: var(--bsc-text-muted, inherit); white-space: pre-wrap; }
.rvl-video { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--bsc-radius, 10px); margin-top: 12px; }
@media (max-width: 900px) { .rvl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rvl-grid { grid-template-columns: 1fr; } }

/* ---------- Prihlasenie a registracia ----------
   .form-group a .msg-error pouzivaju prihlasenie.astro aj registracia.astro,
   ale definovane boli len v gastro.css, professional.css, trade.css a
   video.css. Tenant na inej sablone mal polia nalepene na sebe a chybovu
   hlasku ako obycajny text. Toto je zakladny tvar pre vsetkych; sablona,
   ktora si ich definuje, si ich drzi. */

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.form-group label { font-size: calc(13px * var(--bsc-text-scale, 1)); font-weight: 600; color: var(--bsc-text, inherit); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--bsc-line, rgba(0, 0, 0, .15));
  border-radius: var(--bsc-radius, 10px);
  font-size: calc(15px * var(--bsc-text-scale, 1));
  font-family: inherit;
  background: var(--bsc-bg, #fff);
  color: var(--bsc-text, inherit);
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--bsc-primary, #555) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--bsc-primary, #555);
}

.msg-error,
.msg-success {
  padding: 12px 16px;
  border-radius: var(--bsc-radius, 10px);
  font-size: calc(14px * var(--bsc-text-scale, 1));
  line-height: 1.5;
  margin-bottom: 16px;
  border: 1px solid currentColor;
}
.msg-error { background: var(--frm-err-bg); color: var(--frm-err); }
.msg-success { background: var(--frm-ok-bg); color: var(--frm-ok); }