/* ==========================================================================
   REG_FORM.CSS
   Univerzální formulář s osobními údaji - registrace, změna údajů, změna
   hesla, obnova zapomenutého hesla, dodací údaje v objednávce.
   Nahrazuje dřívější .regTab (tabulkové řešení) a jQuery toggle skupin.
   Vyžaduje global.css (proměnné, reset).
   ========================================================================== */

:root {
  --regform-label-width: 11.25rem;   /* 180px */
  --regform-input-width: 20rem;      /* 320px */
  --regform-note-min-width: 17.5rem; /* 280px */
}

/* --------------------------------------------------------------------------
   Skupina polí (dříve .regNadpis / .regData)
   -------------------------------------------------------------------------- */
.regFormGroup {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.regFormGroupHead {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-light);
  cursor: pointer;
}

.regFormGroupTitle {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-accent);
}

.regFormGroupNote {
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Chevron ikona - kreslená čistě CSS (roh čtverce natočený o 45°), žádná
   závislost na fontu/obrázku. Zavřeno: ukazuje dolů. Otevřeno: nahoru.
   -------------------------------------------------------------------------- */
.regFormGroupChevron {
  flex-shrink: 0;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-light);
  border-bottom: 2px solid var(--color-text-light);
  transform: rotate(45deg);
}

.regFormGroupHead[aria-expanded="true"] .regFormGroupChevron {
  transform: rotate(225deg);
}

.regFormGroupBody {
  padding: var(--space-md);
}

.regFormGroupBody[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Řádek pole (dříve <tr> v .regTab)
   Grid sloupce sdílejí stejnou šířku (proměnné) napříč VŠEMI skupinami,
   takže label/input zůstávají zarovnané, i když jsou skupiny na sobě
   nezávislé (na rozdíl od <table>, tady to řeší jen sdílená šířka).
   -------------------------------------------------------------------------- */
.regFormRow {
  display: grid;
  grid-template-columns: var(--regform-label-width) var(--regform-input-width) minmax(var(--regform-note-min-width), 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  padding: var(--space-xs) 0;
  align-items: center;
}

.regFormRow label {
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text);
}

.regFormRow abbr {
  text-decoration: none;
  cursor: help;
}

.regFormRow input[type="text"],
.regFormRow input[type="email"],
.regFormRow input[type="tel"],
.regFormRow input[type="password"],
.regFormRow select {
  box-sizing: border-box;
  width: var(--regform-input-width);
  height: 2.375rem; /* 38px - sjednoceno s ostatními ovládacími prvky webu */
  padding: 0 var(--space-sm);
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
}

.regFormRow textarea {
  box-sizing: border-box;
  width: var(--regform-input-width);
  height: calc(1.5em * 3 + var(--space-sm) * 2); /* 3 řádky textu + vnitřní padding */
  padding: var(--space-sm);
  font-family: inherit;
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
  resize: vertical;
}

.regFormRow input:focus,
.regFormRow textarea:focus,
.regFormRow select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.regFormRow input::placeholder,
.regFormRow textarea::placeholder {
  color: var(--color-text-muted);
}

/* Checkbox - label v 1. sloupci, checkbox samotný ve 2. sloupci,
   zarovnaný doleva (na rozdíl od textových inputů, které sloupec
   vyplňují celý). */
.regFormRow--checkbox {
  align-items: center;
}

.regFormRow--checkbox input[type="checkbox"] {
  justify-self: start;
  width: 1.125rem;
  height: 1.125rem;
}

/* Poznámka k poli (dříve .regNote) - ve 3. sloupci vedle inputu na
   širokých obrazovkách. */
.regFormNote {
  grid-column: 3;
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 300;
  color: var(--color-text-light);
}

/* Submit tlačítko na regform */
.regFormSubmit {
  height: 2.375rem;
  padding: 0 var(--space-md);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
}

.regFormSubmit:hover {
  background-color: #e0e0e0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE: střední šířky - 2 sloupce (label | input),
   poznámka na vlastní řádek, zarovnaná pod input (ne pod label).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1049px) {
  .regFormRow {
    grid-template-columns: var(--regform-label-width) var(--regform-input-width);
  }

  .regFormNote {
    grid-column: 2;
    grid-row: 2;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: úzké obrazovky (mobil) - 1 sloupec,
   label / input / poznámka pod sebou, input na 100 % šířky.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 699px) {
  .regFormRow {
    grid-template-columns: 1fr;
    row-gap: var(--space-xs);
  }

  .regFormRow label {
    grid-column: 1;
  }

  .regFormRow input[type="text"],
  .regFormRow input[type="email"],
  .regFormRow input[type="tel"],
  .regFormRow input[type="password"],
  .regFormRow select,
  .regFormRow textarea {
    width: 100%;
    grid-column: 1;
  }

  .regFormNote {
    grid-column: 1;
    grid-row: auto;
  }

  .regFormRow--checkbox {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-sm);
  }

  .regFormRow--checkbox label {
    grid-column: 1;
  }

  .regFormRow--checkbox input[type="checkbox"] {
    grid-column: 2;
    justify-self: start;
  }
}