/* ============================================================================
   SmartEmailing — sjednocení vzhledu formulářů s designem webu
   metabolickarovnovaha.cz

   POUŽITÍ
   -------
   1. Do <head> stránky přidat:
        <link rel="stylesheet" href="assets/smartemailing.css">
   2. Na místo, kde má formulář být, vložit zaváděcí skript ze SmartEmailingu:
        <script src="https://se-forms.cz/public/web-forms-v2/subscribe/…"
                id="se-webformScriptLoader-…" async defer></script>
   3. Hotovo. Nic dalšího není potřeba — žádný obal, žádná třída navíc.

   Volitelně:
     .se-form-wrap        obal, který drží šířku a vycentruje formulář
     .se-form--no-header  skryje prázdný nadpis (formuláře bez titulku)

   PROČ TO VYPADÁ, JAK TO VYPADÁ
   -----------------------------
   SmartEmailing si vlastní CSS vkládá do stránky za běhu a cílí jím na
   #se-webform-<číslo> — tedy na id, které je u každého formuláře jiné.
   Psát styly proti tomu id by znamenalo, že druhý formulář na webu zůstane
   nenastylovaný. Všechna pravidla níž proto míří na TŘÍDY (.se-webform,
   .se-body, .se-submit …), které mají jejich formuláře společné.

   Cenou za to je !important: proti selektoru s id (specificita 1-2-3)
   se třídami vyhrát nedá, ale !important přebíjí specificitu bez ohledu
   na ni. Proto ho tu má skoro každé pravidlo. Není to nedbalost, je to
   jediný způsob, jak jedním stylopisem obsloužit i formuláře, které
   na webu teprve vzniknou.

   CO ZŮSTÁVÁ JEJICH
   -----------------
   Dvě deklarace mají !important na selektoru s id, takže je z třídy
   přebít nelze a záměrně se o to nepokouším:
     line-height: initial   na všem uvnitř formuláře (~1,2 — u našich
                            krátkých popisků a hlášek je to v pořádku)
     height: auto           na textových polích (chceme, výšku určuje padding)
   Také přepínání stavů „odesílá se / odesláno“ necháváme na nich — jejich
   CSS to řeší přes .se-webform-sending / .se-webform-sent a my ty bloky
   jen stylujeme.
============================================================================ */

/* Tokeny se berou ze stránky; fallbacky jsou tu proto, aby formulář vypadal
   správně i na stránce, která by :root proměnné nedefinovala. */
.se-webform {
  --se-navy:       var(--navy, #0E143F);
  --se-green:      var(--green-acc, #93C21F);
  --se-green-text: var(--green-text, #55700F);
  --se-green-lt:   var(--green-light, #EEF6DB);
  --se-white:      var(--white, #FFFFFF);
  --se-grey:       var(--grey-mid, #595959);
  --se-dark:       var(--grey-dark, #333333);
  --se-error:      #c0392b;
  --se-head:       var(--ff-head, 'Montserrat', sans-serif);
  --se-body:       var(--ff-body, 'Source Sans 3', sans-serif);
  --se-radius:     var(--r-md, 12px);
  --se-pill:       var(--r-pill, 100px);
}

/* ---------------------------------------------------------------- obal --- */
.se-form-wrap { max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------ formulář --- */
/* width: jejich CSS dává 400px a v markupu bývá ještě inline style="width:300px";
   !important přebije obojí, včetně inline stylu. */
.se-webform {
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--se-body) !important;
  font-size: 1rem !important;
  color: var(--se-dark) !important;
}
.se-webform * { font-family: inherit !important; }

/* --------------------------------------------------------------- nadpis --- */
.se-webform .se-header { padding: 0 !important; }
.se-webform .se-header h3 {
  margin: 0 0 var(--s4, 24px) !important;
  padding: 0 !important;
  font-family: var(--se-head) !important;
  font-size: clamp(1.15rem, 2vw, 1.375rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--se-navy) !important;
  text-align: left !important;
}
/* Formuláře bez titulku mají v HTML prázdný <h3>, který kvůli bílému znaku
   uvnitř nechytí :empty. Pro ty je připravený tenhle modifikátor na obalu. */
.se-form--no-header .se-header { display: none !important; }

/* ------------------------------------------------------ doplňkové texty --- */
.se-webform .se-text { color: var(--se-grey) !important; }
.se-webform .se-text p {
  padding: 0 0 var(--s3, 16px) !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 1rem !important;
}

/* ------------------------------------------------------------ pole ------- */
.se-webform .se-body ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.se-webform .se-body ul li {
  list-style: none !important;
  margin: 0 0 var(--s4, 24px) !important;
  padding: 0 !important;
  background: none !important;
}
.se-webform .se-body ul li:last-child { margin-bottom: 0 !important; }

.se-webform .se-body ul li label,
.se-webform .se-label {
  display: block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  font-family: var(--se-head) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--se-navy) !important;
}
/* Hvězdička u povinného pole — jejich #f00 je na bílé zbytečně křiklavá. */
.se-webform .se-body ul li label.se-required:after,
.se-webform .se-label.se-required:after {
  content: " *" !important;
  color: var(--se-error) !important;
  font-weight: 700 !important;
}

.se-webform .se-body ul li input[type="text"],
.se-webform .se-body ul li input[type="email"],
.se-webform .se-body ul li input[type="tel"],
.se-webform .se-body ul li input[type="number"],
.se-webform .se-body ul li input[type="date"],
.se-webform .se-body ul li textarea,
.se-webform .se-body ul li select {
  width: 100% !important;
  padding: 13px 16px !important;
  font-family: var(--se-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;   /* jejich výchozí bold v poli je nezvyklý */
  color: var(--se-dark) !important;
  background: var(--se-white) !important;
  border: 1.5px solid rgba(14, 20, 63, .16) !important;
  border-radius: var(--se-radius) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.se-webform .se-body ul li textarea { min-height: 120px !important; resize: vertical !important; }
.se-webform .se-body ul li select { font-size: 1rem !important; }

.se-webform .se-body ul li input:hover:not(:focus),
.se-webform .se-body ul li select:hover:not(:focus),
.se-webform .se-body ul li textarea:hover:not(:focus) {
  border-color: rgba(14, 20, 63, .30) !important;
}
/* Prstenec je navy, ne limetkový — limetka má na bílé kontrast jen 2,1:1. */
.se-webform .se-body ul li input:focus,
.se-webform .se-body ul li select:focus,
.se-webform .se-body ul li textarea:focus {
  outline: none !important;
  border-color: var(--se-navy) !important;
  box-shadow: 0 0 0 3px rgba(14, 20, 63, .16) !important;
}
.se-webform .se-body ul li input::placeholder,
.se-webform .se-body ul li textarea::placeholder { color: rgba(51, 51, 51, .45) !important; }

/* Chybný stav — Nette značí pole přes aria-invalid. */
.se-webform .se-body ul li input[aria-invalid="true"],
.se-webform .se-body ul li select[aria-invalid="true"],
.se-webform .se-body ul li textarea[aria-invalid="true"] {
  border-color: var(--se-error) !important;
  background-color: #fdf7f6 !important;
}
.se-webform .se-body ul li input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .18) !important;
}

/* --------------------------------------------- zatržítka a přepínače ----- */
.se-webform .se-body ul li label.se-checkbox,
.se-webform .se-body ul li label.se-radio,
.se-webform .se-license-agreement .se-checkbox,
.se-webform .se-license-agreement .se-radio {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  font-family: var(--se-body) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--se-grey) !important;
  cursor: pointer !important;
}
.se-webform input[type="checkbox"],
.se-webform input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  flex: 0 0 auto !important;
  accent-color: var(--se-green) !important;
  cursor: pointer !important;
}
.se-webform input[type="checkbox"]:focus-visible,
.se-webform input[type="radio"]:focus-visible {
  outline: 2px solid var(--se-navy) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------- souhlasy a text o zpracování ------ */
.se-webform .se-webform-primary-purpose,
.se-webform .se-license-agreement {
  margin: var(--s4, 24px) 0 0 !important;
  padding: var(--s4, 24px) 0 0 !important;
  border-top: 1px solid rgba(14, 20, 63, .08) !important;
  border-bottom: 0 !important;
  text-align: left !important;   /* justify dělá v češtině řeky bílých mezer */
  color: var(--se-grey) !important;
}
.se-webform .se-webform-primary-purpose span,
.se-webform .se-license-agreement span,
.se-webform .se-webform-inner span {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.se-webform .se-license-agreement + .se-license-agreement {
  margin-top: var(--s3, 16px) !important;
  padding-top: var(--s3, 16px) !important;
}
.se-webform .se-license-agreement a,
.se-webform .se-webform-primary-purpose a {
  color: var(--se-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ------------------------------------------------ odesílací tlačítko ----- */
.se-webform .se-submit {
  margin: var(--s5, 32px) 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.se-webform .se-submit button,
.se-webform .se-submit div.se-fake,
.se-webform .se-submit input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 17px 34px !important;
  font-family: var(--se-head) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  /* Prostrkání jako u ostatních tlačítek na webu. Popisek chodí ze
     SmartEmailingu — nastavuje se tam, ne tady. Sedí větný tvar
     („Registrovat se zdarma“) i verzálky, kdyby je někdo použil. */
  text-transform: none !important;
  letter-spacing: 0.015em !important;
  color: var(--se-navy) !important;
  background: var(--se-green) !important;
  border: 2px solid transparent !important;
  border-radius: var(--se-pill) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(14, 20, 63, .08), 0 12px 28px rgba(147, 194, 31, .28) !important;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .22s ease, opacity .15s ease !important;
}
.se-webform .se-submit button:hover,
.se-webform .se-submit input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(14, 20, 63, .10), 0 18px 40px rgba(147, 194, 31, .42) !important;
}
.se-webform .se-submit button:active,
.se-webform .se-submit input[type="submit"]:active { transform: translateY(0) !important; opacity: .92 !important; }
.se-webform .se-submit button:focus-visible,
.se-webform .se-submit input[type="submit"]:focus-visible {
  outline: 3px solid var(--se-navy) !important;
  outline-offset: 3px !important;
}
.se-webform .se-submit button[disabled] {
  opacity: .55 !important; cursor: not-allowed !important;
  transform: none !important; box-shadow: none !important;
}

/* ------------------------------------------------------------- chyby ----- */
.se-webform ul.se-errors { margin: 0 0 var(--s4, 24px) !important; padding: 0 !important; list-style: none !important; }
.se-webform ul.se-errors li {
  margin: 0 0 10px !important;
  padding: 12px 16px !important;
  /* Jejich plná červená #da5555 s bílým textem působí jako pád serveru,
     ne jako „zapomněli jste vyplnit jméno“. */
  background: #fdf1ef !important;
  border: 1px solid rgba(192, 57, 43, .35) !important;
  border-left: 3px solid var(--se-error) !important;
  border-radius: var(--se-radius) !important;
  color: #8c2a20 !important;
  font-size: 0.95rem !important;
}
.se-webform ul.se-errors li:last-child { margin-bottom: 0 !important; }
.se-webform ul.se-errors li div { display: block !important; }
.se-webform ul.se-errors li div > * { display: inline !important; padding: 0 !important; }
.se-webform ul.se-errors li .fa { display: none !important; }  /* ikona z Font Awesome, které tu není */

/* ------------------------------------------- stavy odesílání / odesláno -- */
/* Přepínání viditelnosti řeší jejich CSS, my jen dáváme vzhled. */
.se-webform .se-webform-sent-info,
.se-webform .se-webform-sending-info {
  padding: var(--s5, 32px) 0 !important;
  text-align: center !important;
}
.se-webform .se-webform-sent-info h3,
.se-webform .se-webform-sending-info h3 {
  margin: 0 !important;
  font-family: var(--se-head) !important;
  font-size: clamp(1.15rem, 2vw, 1.375rem) !important;
  font-weight: 600 !important;
  color: var(--se-navy) !important;
  text-align: center !important;
}

/* ----------------------------------- našeptávač opravy e-mailu ----------- */
/* Doplňuje jejich auto-complete.css, které se načítá z app.smartemailing.cz. */
.autocomplete-suggestions {
  background: var(--white, #fff) !important;
  border: 1px solid rgba(14, 20, 63, .16) !important;
  border-radius: var(--r-md, 12px) !important;
  box-shadow: 0 8px 28px rgba(14, 20, 63, .12) !important;
  font-family: var(--ff-body, 'Source Sans 3', sans-serif) !important;
  overflow: hidden !important;
}
.autocomplete-suggestion {
  padding: 11px 16px !important;
  font-size: 0.95rem !important;
  color: var(--grey-dark, #333) !important;
  cursor: pointer !important;
}
.autocomplete-suggestion.selected,
.autocomplete-suggestion:hover {
  background: var(--green-light, #EEF6DB) !important;
  color: var(--navy, #0E143F) !important;
}

/* --------------------------------------------------------------- mobil --- */
@media (max-width: 520px) {
  .se-webform .se-submit button,
  .se-webform .se-submit input[type="submit"] { padding: 16px 20px !important; }
}

/* ------------------------------------------------- omezení animací ------- */
@media (prefers-reduced-motion: reduce) {
  .se-webform .se-submit button,
  .se-webform .se-body ul li input,
  .se-webform .se-body ul li select,
  .se-webform .se-body ul li textarea { transition: none !important; }
  .se-webform .se-submit button:hover { transform: none !important; }
}