/*
 * Formularul de check-in.
 *
 * Se imprumuta culorile si fonturile temei cand exista, si are valori proprii cand nu:
 * pluginul trebuie sa arate a ceva si daca intr-o zi tema se schimba.
 *
 * Gandit pentru un telefon tinut in mana, la poarta, poate in soare: campuri mari,
 * text de 16px in sus — sub atat, Safari pe iPhone mareste pagina singur cand atingi
 * un camp, si omul ramane cu formularul strambat.
 */

.gci {
  --gci-ok: #1c6b3f;
  --gci-no: #96231f;
  --gci-fg: var(--fg, #1f1b17);
  --gci-bg: var(--bg, #faf7f2);
  --gci-rule: var(--rule, rgba(31, 27, 23, 0.18));
  --gci-muted: var(--muted, rgba(31, 27, 23, 0.62));
  --gci-accent: var(--accent, #96231f);

  max-width: 32rem;
  color: var(--gci-fg);
  font-family: var(--font-body, inherit);
  font-size: 1rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Campuri                                                             */
/* ------------------------------------------------------------------ */

.gci__field {
  margin-bottom: 1.25rem;
}

.gci__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-label, inherit);
  font-size: 0.9375rem;
  font-weight: 600;
}

.gci__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--gci-rule);
  border-radius: 2px;
  background: #fff;
  color: var(--gci-fg);
  font: inherit;
  font-size: 1rem;
}

.gci__field input:focus-visible,
.gci__check input:focus-visible,
.gci__submit:focus-visible {
  outline: 2px solid var(--focus, var(--gci-accent));
  outline-offset: 2px;
}

.gci__optional,
.gci__hint {
  color: var(--gci-muted);
  font-weight: 400;
}

.gci__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Cine foloseste biletul                                              */
/* ------------------------------------------------------------------ */

.gci__who {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--gci-rule);
  border-radius: 2px;
}

.gci__who legend {
  padding: 0 0.4rem;
  font-family: var(--font-label, inherit);
  font-size: 0.9375rem;
  font-weight: 600;
}

.gci__radio,
.gci__check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}

.gci__radio + .gci__radio {
  margin-top: 0.6rem;
}

.gci__check {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

/* Casetele nu se micsoreaza cand textul de langa ele are trei randuri. */
.gci__radio input,
.gci__check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--gci-accent);
}

.gci__note {
  margin: 0 0 1.25rem;
  color: var(--gci-muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ */
/* Fluxuri                                                             */
/* ------------------------------------------------------------------ */

/*
 * Fara JavaScript se vad amandoua fluxurile, si formularul merge la fel — ce se cere
 * cu adevarat se hotaraste pe server. Ascunderea porneste doar dupa ce scriptul si-a
 * pus `has-js`, ca sa nu ramana nimeni cu campuri invizibile si obligatorii.
 *
 * Doua reguli, si amandoua doar ascund. Nimic nu impune o afisare: un `div` ramane
 * bloc, un `span` ramane in rand. Scrise invers — o regula care ascunde si una care
 * arata — ar trebui cate o pereche pentru fiecare fel de element, s-ar bate cap in cap
 * dupa ordinea din fisier, si un camp ar ramane ascuns exact cand e cerut.
 */
.gci__form.has-js .gci__only-minor {
  display: none;
}

.gci__form.has-js.is-minor .gci__only-adult {
  display: none;
}

.gci__form.has-js.is-minor .gci__only-minor {
  display: revert;
}

/* ------------------------------------------------------------------ */
/* Capcana pentru roboti                                               */
/* ------------------------------------------------------------------ */

/*
 * Mutata in afara ecranului, nu ascunsa cu `display`. Unele programe de completare
 * automata sar peste ce e ascuns; un robot completeaza si ce nu se vede.
 */
.gci__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Buton                                                               */
/* ------------------------------------------------------------------ */

.gci__submit {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 2px;
  background: var(--gci-accent);
  color: #fff;
  font-family: var(--font-label, inherit);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.gci__submit:hover {
  filter: brightness(1.08);
}

/* ------------------------------------------------------------------ */
/* Rezultat                                                            */
/* ------------------------------------------------------------------ */

.gci__error {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--gci-no);
  background: rgba(150, 35, 31, 0.07);
  font-size: 0.9375rem;
}

.gci--result {
  padding: 2rem 1.5rem;
  border-radius: 2px;
  text-align: center;
}

.gci--ok {
  background: rgba(28, 107, 63, 0.1);
  border: 2px solid var(--gci-ok);
}

.gci--no {
  background: rgba(150, 35, 31, 0.09);
  border: 2px solid var(--gci-no);
}

/*
 * Verdictul se citeste de la distanta de un brat, dintr-o privire: cel de la poarta se
 * uita peste umarul vizitatorului, nu citeste un paragraf.
 */
.gci__verdict {
  margin: 0 0 0.5rem;
  font-family: var(--font-sub, inherit);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
}

.gci--ok .gci__verdict {
  color: var(--gci-ok);
}

.gci--no .gci__verdict {
  color: var(--gci-no);
}

.gci__tariff {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.gci__detail {
  margin: 0 0 1.5rem;
  color: var(--gci-muted);
}

.gci .gci__detail a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Plin, in culoarea butonului de trimitere: duce inapoi la acelasi formular. */
.gci .gci__again {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--gci-accent);
  border-radius: 2px;
  background: var(--gci-accent);
  color: #fff;
  font-family: var(--font-label, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.gci .gci__again:hover {
  color: #fff;
  filter: brightness(1.08);
}

.gci .gci__again:focus-visible {
  outline: 2px solid var(--focus, var(--gci-accent));
  outline-offset: 2px;
}

.gci--closed p {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--gci-rule);
  border-radius: 2px;
  color: var(--gci-muted);
  text-align: center;
}

/*
 * Anularea. Discreta dinadins: e pentru cifra gresita, nu o alegere pusa in fata
 * fiecarui om care tocmai a intrat.
 */
.gci__undo {
  margin-top: 1.25rem;
}

.gci__undo button {
  border: 0;
  background: none;
  color: var(--gci-muted);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.gci__undo button:hover {
  color: var(--gci-no);
}