/**
 * Sdílené styly pro autentizační stránky (přihlášení, registrace, obnovení hesla).
 *
 * Hlavní barva: #ed3794 (růžová), tmavší stín: #b8246e
 * Font: Nunito (jako na původní stránce med.scholastik.cz)
 *
 * WordPress meta (na každé z dotčených stránek):
 *   ftp_html_css_file = shared/auth-forms.css, prihlaseni.css
 *   ftp_html_css_file = shared/auth-forms.css, registrace.css
 *   ftp_html_css_file = shared/auth-forms.css, obnoveni-hesla.css
 *
 * Strukturu HTML drží společné třídy:
 *   .ftp-login-page           – obal celé stránky (flex sloupec, centrovaný)
 *   .ftp-login-close          – malý šedý křížek vlevo nahoře (odkaz na úvod)
 *   .ftp-login-box            – centrální karta s formulářem
 *   .ftp-login-title          – nadpis stránky
 *   .ftp-login-form           – wrapper kolem shortcodu WPPB
 *   .ftp-login-divider        – oddělovač „nebo"
 *   .ftp-login-register       – sekundární tlačítko (např. „Zaregistrovat učebnici")
 *   .ftp-login-forgot         – odkaz pod boxem
 *
 * Vzhled inputů a submit tlačítek vychází z obecných selektorů
 * (input[type="text|email|password"], input[type="submit"]),
 * takže pokrývá všechny WPPB formuláře bez nutnosti opakovat ID.
 */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");

/* —— Layout stránky —— */

.ftp-page-content.ftp-login-page {
  /* Reset případných stylů .ftp-page-content z jiných šablon (fakulty, Oxygen) */
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.ftp-login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  margin: 0;
  padding: 60px 16px 40px;
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  line-height: 1.6;
  color: #5a5a5a;
  box-sizing: border-box;
}

.ftp-login-page *,
.ftp-login-page *::before,
.ftp-login-page *::after {
  box-sizing: border-box;
}

/* —— Křížek pro zavření / návrat na úvod (vlevo nahoře) —— */

.ftp-login-close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #b0b0b0;
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ftp-login-close:hover,
.ftp-login-close:focus-visible {
  color: #5a5a5a;
  background-color: rgba(0, 0, 0, 0.05);
  outline: none;
}

.ftp-login-close svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* —— Centrální box s formulářem —— */

.ftp-login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(400px, 100%);
}

/* —— Nadpis —— */

.ftp-login-page .ftp-login-title {
  margin: 0 0 25px;
  padding: 0;
  font-family: "Poppins", "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #5a5a5a;
  text-align: left;
  align-self: stretch;
}

/* —— Wrapper formuláře —— */

.ftp-login-form {
  width: 100%;
  max-width: 100%;
}

.ftp-login-form .wppb-user-forms {
  width: 100%;
  max-width: 100%;
}

/* —— Formulář WPPB (společný layout: flex sloupec s mezerou) —— */

.ftp-login-form form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  width: 100%;
}

.ftp-login-form form,
.ftp-login-form form * {
  box-sizing: border-box;
  min-width: 0;
}

.ftp-login-form form ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.ftp-login-form form li,
.ftp-login-form form p {
  margin: 0;
  padding: 0;
  overflow: visible !important;
  width: 100%;
  max-width: 100%;
}

/* —— Labely nad inputy (výchozí, capslock styl) —— */

.ftp-login-form form label {
  display: block;
  margin: 0 0 6px 2px;
  color: #4b4b4b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Hvězdička povinného pole z pluginu */
.ftp-login-form .wppb-required {
  margin-left: 3px;
  color: #ed3794;
}

/* Ikony povinného pole z pluginu (originál je skrývá) */
.ftp-login-form form label img {
  display: none !important;
}

/* Skrytá nápověda „Minimální délka 6 znaků." apod. */
.ftp-login-form .wppb-description-delimiter {
  display: none !important;
}

/* —— Indikátor síly hesla ——
 * WPPB vykresluje <span id="pass-strength-result"> hned pod inputem hesla
 * (registrace i obnovení hesla). Skript pluginu na něj přidá podle
 * vyhodnocení jednu z tříd:
 *   .short  – Příliš jednoduché
 *   .bad    – Nedostatečné
 *   .good   – Průměrné
 *   .strong – Bezpečné
 * Vzhled: malý progress bar (přes ::before) + barevný popisek.
 * Bar se naplňuje pomocí CSS proměnné --pwd-strength a aktuální barvy textu.
 */

.ftp-login-form #pass-strength-result {
  display: block;
  margin: 8px 2px 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #9a9a9a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  --pwd-strength: 0%;
}

.ftp-login-form #pass-strength-result::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  margin: 0 0 6px;
  background-color: #e5e5e5;
  background-image: linear-gradient(
    to right,
    currentColor 0 var(--pwd-strength),
    transparent var(--pwd-strength) 100%
  );
  background-repeat: no-repeat;
  border-radius: 999px;
  transition: background-image 0.25s ease, background-color 0.25s ease;
}

.ftp-login-form #pass-strength-result.short {
  color: #ff4b4b;
  --pwd-strength: 25%;
}

.ftp-login-form #pass-strength-result.bad {
  color: #ff8a00;
  --pwd-strength: 50%;
}

.ftp-login-form #pass-strength-result.good {
  color: #f0a500;
  --pwd-strength: 75%;
}

.ftp-login-form #pass-strength-result.strong {
  color: #58a700;
  --pwd-strength: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ftp-login-form #pass-strength-result::before {
    transition: none;
  }
}

/* Skryté: reCAPTCHA v3 widget (neviditelná) */
.ftp-login-form .wppb-form-field.wppb-recaptcha.wppb-recaptcha-v3 {
  display: none;
}

/* —— Textové inputy —— */
/*
 * WPPB používá třídy .input (login) a .text-input (obnovení hesla).
 * Cílíme na typ i tyto třídy kvůli styům z WordPress šablony.
 */

.ftp-login-form form input[type="text"],
.ftp-login-form form input[type="email"],
.ftp-login-form form input[type="password"],
.ftp-login-form form input.input,
.ftp-login-form form input.text-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 8px 14px;
  background: #f7f7f7;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  color: #4b4b4b;
  font-family: inherit;
  font-size: 20px;
  outline: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.ftp-login-form form input[type="text"]:hover,
.ftp-login-form form input[type="email"]:hover,
.ftp-login-form form input[type="password"]:hover,
.ftp-login-form form input.input:hover,
.ftp-login-form form input.text-input:hover {
  border-color: #afafaf;
}

.ftp-login-form form input[type="text"]:focus,
.ftp-login-form form input[type="email"]:focus,
.ftp-login-form form input[type="password"]:focus,
.ftp-login-form form input.input:focus,
.ftp-login-form form input.text-input:focus {
  background: #ffffff;
  border-color: #ed3794;
  caret-color: #ed3794;
}

.ftp-login-form .wppb-field-error input[type="text"],
.ftp-login-form .wppb-field-error input[type="email"],
.ftp-login-form .wppb-field-error input[type="password"],
.ftp-login-form .wppb-field-error input.input,
.ftp-login-form .wppb-field-error input.text-input {
  background: #fff7f7;
  border-color: #ff4b4b;
}

.ftp-login-form .wppb-field-error input[type="text"]:focus,
.ftp-login-form .wppb-field-error input[type="email"]:focus,
.ftp-login-form .wppb-field-error input[type="password"]:focus,
.ftp-login-form .wppb-field-error input.input:focus,
.ftp-login-form .wppb-field-error input.text-input:focus {
  background: #ffffff;
  border-color: #ff4b4b;
  caret-color: #ff4b4b;
}

.ftp-login-form form .wppb-password-group,
.ftp-login-form form .wppb-password-subfield,
.ftp-login-form form .wppb-password-field-container {
  display: block;
  width: 100%;
}

/* —— Přepínač viditelnosti hesla (oko vpravo v inputu) ——
 * WPPB vykresluje uvnitř .wppb-password-field-container input s heslem
 * a hned za ním <button class="wppb-toggle-pw">, který obsahuje <img>
 * (eye-outline.svg pro „zobrazit", eye-off-outline.svg pro „skrýt").
 * Tlačítko absolutně polohujeme do pravé části inputu a uvolníme mu
 * místo zvětšeným pravým paddingem.
 */

.ftp-login-form form .wppb-password-field-container {
  position: relative;
}

.ftp-login-form form .wppb-password-field-container input[type="text"],
.ftp-login-form form .wppb-password-field-container input[type="password"],
.ftp-login-form form .wppb-password-field-container input.text-input,
.ftp-login-form form .wppb-password-field-container input.input {
  padding-right: 52px;
}

.ftp-login-form form .wppb-toggle-pw {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #9a9a9a;
  cursor: pointer;
  line-height: 0;
  transform: translateY(-50%);
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ftp-login-form form .wppb-toggle-pw:hover,
.ftp-login-form form .wppb-toggle-pw:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  color: #4b4b4b;
  outline: none;
}

.ftp-login-form form .wppb-toggle-pw:focus-visible {
  box-shadow: 0 0 0 2px rgba(237, 55, 148, 0.35);
}

.ftp-login-form form .wppb-toggle-pw:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.ftp-login-form form .wppb-toggle-pw img {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.ftp-login-form form .wppb-toggle-pw:hover img,
.ftp-login-form form .wppb-toggle-pw:focus-visible img {
  opacity: 1;
}

/* Když JS není dostupný, plugin ponechá třídu .hide-if-no-js – respektujeme. */
.ftp-login-form form .wppb-toggle-pw.hide-if-no-js {
  /* no-op, JS odstraní .hide-if-no-js nebo skript přidá tlačítko sám */
}

/* —— Submit (primární tlačítko s odsazeným spodním stínem) —— */
/*
 * WordPress / WPPB přidávají třídy .button a .button-primary, které
 * přepisují obecný selektor input[type="submit"]. Proto cílíme přímo
 * na ID jednotlivých formulářů.
 */

.ftp-login-form form p.login-submit,
.ftp-login-form form p.form-submit {
  width: 100%;
  margin-top: 8px;
}

.ftp-login-form #wppb-loginform input#wppb-submit,
.ftp-login-form #wppb-register-user input#register,
.ftp-login-form #wppb-recover-password input#wppb-recover-password-button {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  background: #ed3794;
  background-image: none;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 0 0 #b8246e;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: normal;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.05s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.ftp-login-form #wppb-loginform input#wppb-submit:hover,
.ftp-login-form #wppb-register-user input#register:hover,
.ftp-login-form #wppb-recover-password input#wppb-recover-password-button:hover {
  background: #ed3794;
  background-image: none;
  filter: brightness(1.06);
}

.ftp-login-form #wppb-loginform input#wppb-submit:active,
.ftp-login-form #wppb-register-user input#register:active,
.ftp-login-form #wppb-recover-password input#wppb-recover-password-button:active {
  background: #ed3794;
  background-image: none;
  transform: translateY(4px);
  box-shadow: 0 0 0 0 #b8246e;
}

/* —— Odkazy uvnitř formuláře —— */

.ftp-login-form form a,
.ftp-login-form .wppb-error a {
  color: #ed3794 !important;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}

.ftp-login-form form a:hover,
.ftp-login-form .wppb-error a:hover {
  color: #b8246e !important;
  text-decoration: underline;
}

/* —— Chybové a informační hlášky (jednotný „inline" styl) —— */

.ftp-login-form form .wppb-form-error,
.ftp-login-form #wppb_form_general_message,
.ftp-login-form #wppb_recover_password_message,
.ftp-login-form form .wppb-error,
.ftp-login-form form .wppb-warning,
.ftp-login-form form .wppb-success,
.ftp-login-form p.wppb-error,
.ftp-login-form p.wppb-warning,
.ftp-login-form p.wppb-success {
  display: block !important;
  width: 100%;
  margin: 6px 0 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  box-sizing: border-box;
}

.ftp-login-form form .wppb-form-error,
.ftp-login-form #wppb_form_general_message,
.ftp-login-form form .wppb-error,
.ftp-login-form p.wppb-error {
  color: #ff4b4b !important;
}

.ftp-login-form form .wppb-warning,
.ftp-login-form p.wppb-warning {
  color: #b86b00 !important;
}

.ftp-login-form form .wppb-success,
.ftp-login-form p.wppb-success {
  color: #58a700 !important;
}

.ftp-login-form form .wppb-form-error br {
  display: none;
}

.ftp-login-form #wppb_form_general_message {
  margin: 0 0 14px !important;
}

/* —— Oddělovač „nebo" —— */

.ftp-login-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin: 20px 0;
}

.ftp-login-divider-line {
  flex: 1 1 auto;
  width: 100%;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  background-color: #cecece;
}

.ftp-login-divider-text {
  flex: 0 0 auto;
  padding: 0 8px;
  color: #5a5a5a;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* —— Sekundární tlačítko (např. „Zaregistrovat učebnici") —— */

.ftp-login-register {
  display: inline-block;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  padding: 0 16px;
  background: #ffffff;
  border: 2px solid #cecece;
  border-radius: 16px;
  box-shadow: 0 4px 0 0 #cecece;
  color: #ec3c92;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 46px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.05s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.ftp-login-register:hover {
  background-color: #f3f3f3;
  color: #ec3c92;
  text-decoration: none;
}

.ftp-login-register:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 #b8246e;
}

/* —— Odkaz pod boxem („Zapomněl jsi heslo?" / „Přihlásit se") —— */

.ftp-login-forgot {
  display: inline-block;
  color: #ec3c92;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.ftp-login-forgot:hover {
  color: #ec3c92;
  text-decoration: underline;
}

/* —— Vlastní stylovaný checkbox „Zapamatovat si mě" (sdílené pro všechny [wppb-login]) —— */

.ftp-login-form #wppb-loginform p.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
}

.ftp-login-form #wppb-loginform p.login-remember input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ftp-login-form #wppb-loginform p.login-remember input[type="checkbox"]:hover {
  border-color: #afafaf;
}

.ftp-login-form #wppb-loginform p.login-remember input[type="checkbox"]:checked {
  background: #ed3794;
  border-color: #ed3794;
}

.ftp-login-form #wppb-loginform p.login-remember input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 28%;
  left: 25%;
  width: 55%;
  height: 35%;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  transform: rotate(-45deg);
}

.ftp-login-form #wppb-loginform p.login-remember label {
  margin: 0;
  color: #4b4b4b;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* —— Boxová chyba „neplatné jméno/heslo" (login používá výrazný rámeček) —— */

.ftp-login-form #wppb-loginform .wppb-error,
.ftp-login-form #wppb-login-wrap .wppb-error,
.ftp-login-form #wppb-loginform p.wppb-error {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px !important;
  background: #fff0f0 !important;
  border: 2px solid #ff4b4b !important;
  border-radius: 12px !important;
  color: #4b4b4b !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  box-sizing: border-box;
}

.ftp-login-form #wppb-loginform .wppb-error strong,
.ftp-login-form #wppb-login-wrap .wppb-error strong {
  color: #ff4b4b;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* —— Skrytí integrovaného odkazu „Ztratil/a jsi heslo?" (je vykreslen samostatně pod boxem) —— */

.ftp-login-form #wppb-login-wrap .login-register-lost-password {
  display: none;
}

/* —— Mobil —— */

@media (max-width: 767px) {
  .ftp-login-page {
    padding: 56px 16px 32px;
  }

  .ftp-login-page .ftp-login-title {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .ftp-login-form form {
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .ftp-login-page {
    padding: 52px 12px 28px;
    font-size: 16px;
    line-height: 1.5;
  }

  .ftp-login-page .ftp-login-title {
    margin-bottom: 16px;
    font-size: 22px;
  }

  .ftp-login-form form input[type="text"],
  .ftp-login-form form input[type="email"],
  .ftp-login-form form input[type="password"],
  .ftp-login-form form input.input,
  .ftp-login-form form input.text-input {
    height: 48px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .ftp-login-form form .wppb-password-field-container input[type="text"],
  .ftp-login-form form .wppb-password-field-container input[type="password"],
  .ftp-login-form form .wppb-password-field-container input.text-input,
  .ftp-login-form form .wppb-password-field-container input.input {
    padding-right: 48px;
  }

  .ftp-login-form form .wppb-toggle-pw {
    width: 36px;
    height: 36px;
    right: 4px;
  }

  .ftp-login-form form .wppb-toggle-pw img {
    width: 20px;
    height: 20px;
  }

  .ftp-login-form #wppb-loginform input#wppb-submit,
  .ftp-login-form #wppb-register-user input#register,
  .ftp-login-form #wppb-recover-password input#wppb-recover-password-button,
  .ftp-login-register {
    min-height: 48px;
    height: auto;
    padding: 13px 14px 12px;
    font-size: 14px;
    line-height: 1.2;
  }

  /*
   * Originál nutí .wppb-user-forms min-width: 375px,
   * což na úzkých displejích způsobí horizontální scroll.
   * Tady tu hodnotu uvolníme, aby formulář respektoval šířku rodiče.
   */
  .ftp-login-form .wppb-user-forms,
  .ftp-login-form .wppb-user-forms * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 340px) {
  .ftp-login-page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ftp-login-page .ftp-login-title {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ftp-login-form form input[type="text"],
  .ftp-login-form form input[type="email"],
  .ftp-login-form form input[type="password"],
  .ftp-login-form form input.input,
  .ftp-login-form form input.text-input,
  .ftp-login-form #wppb-loginform input#wppb-submit,
  .ftp-login-form #wppb-register-user input#register,
  .ftp-login-form #wppb-recover-password input#wppb-recover-password-button,
  .ftp-login-register,
  .ftp-login-form form .wppb-toggle-pw,
  .ftp-login-form form .wppb-toggle-pw img {
    transition: none;
  }
}