/*
  The sign-in / sign-up screens (templates/registration/ and allauth's error
  page): login, register, confirm e-mail, personal details, password reset,
  invitations, team notice. The account pages that follow from them reuse
  it: santa/edit_personal_details.html and santa/resigned.html. Styled after the white section of the static
  page's konto.html (webpage/, Tailwind); the values below are the ones
  Tailwind compiled there (webpage/dist/output.css), so these screens look
  like the page. The logo bar and the footer keep the panel's look; the
  content between them sits inside <main class="konto">.
*/

/* =====================================================================
   Page: a full-height column, logo bar on top, footer at the bottom
   ===================================================================== */
.auth-body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--color-surface-muted);
}

.auth-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
}

.auth-page > footer {
  margin-top: 56px;
}

.auth-nav {
  width: 100%;
  min-height: 64px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--color-header-bg);
}

.auth-nav--center {
  justify-content: center;
}

.auth-nav--with-back {
  padding: 8px 24px 8px 10px;
}

/* Logo and "Wyloguj się" (partials/auth_nav_logout.html). */
.auth-nav--between {
  justify-content: space-between;
}

.auth-logo {
  width: 88px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-logo--auto {
  margin: 0 auto;
}

.auth-logo--centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.auth-back {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-back-icon {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.auth-logout {
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-muted);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* =====================================================================
   Content
   ===================================================================== */
.konto {
  --konto-koral: #f95d57;
  --konto-koral-ciemny: #e24842;
  --konto-grafit: #1e2a32;
  --konto-tlo: #f5f6f7;
  --konto-roz: #fdeeec;
  --konto-white: #fff;
  --konto-slate-200: oklch(92.9% .013 255.508);
  --konto-slate-300: oklch(86.9% .022 252.894);
  --konto-slate-400: oklch(70.4% .04 256.788);
  --konto-slate-500: oklch(55.4% .046 257.417);
  --konto-slate-600: oklch(44.6% .043 257.281);
  --konto-slate-700: oklch(37.2% .044 257.287);

  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  /* .auth-page is a full-height column: growing into the leftover height
     keeps the footer at the bottom of the screen on short pages. */
  flex: 1 0 auto;
  margin: 0 auto;
  padding: 64px 24px;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-size: 16px;
  line-height: 24px;
  color: var(--konto-grafit);
  -webkit-font-smoothing: antialiased;
}

.konto *,
.konto *::before,
.konto *::after {
  box-sizing: border-box;
}

/* style.css gives every <p> its own size and colour; here a paragraph takes
   them from its block instead. :where() keeps this at a plain `p`'s weight,
   so any class below still wins over it. */
:where(.konto) p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.konto a {
  color: var(--konto-koral);
  font-weight: 600;
  text-decoration: none;
}

.konto a:hover {
  text-decoration: underline;
}

/* The screens after the login one: a column of blocks. */
.konto-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =====================================================================
   Login screen (login.html): its own konto-* markup
   ===================================================================== */

/* ── Intro ── */
.konto-intro {
  text-align: center;
}

.konto-eyebrow {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--konto-koral);
}

.konto-title {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--konto-grafit);
}

@media (min-width: 640px) {
  .konto-title {
    font-size: 36px;
    line-height: 40px;
  }
}

.konto-lead {
  margin-top: 12px !important;
  color: var(--konto-slate-600);
}

.konto-lead strong {
  font-weight: 600;
  color: var(--konto-grafit);
}

/* ── "Brałeś/-aś już udział w akcji?" ── */
.konto-callout {
  margin-top: 32px;
  padding: 20px;
  border-left: 4px solid var(--konto-koral);
  border-radius: 16px;
  background: var(--konto-roz);
}

.konto-flow > .konto-callout {
  margin-top: 0;
}

.konto-callout-title {
  font-weight: 700;
  color: var(--konto-grafit);
}

.konto-callout-text {
  margin-top: 4px !important;
  font-size: 14px;
  line-height: 1.625;
  color: var(--konto-slate-700);
}

.konto-messages {
  margin-top: 24px;
}

/* ── Zaloguj się / Załóż konto ── */
.konto-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 24px 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--konto-tlo);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.konto-tab {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: var(--konto-slate-500);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

.konto-tab[aria-selected="true"] {
  background: var(--konto-white);
  color: var(--konto-grafit);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.konto-tab-panel[hidden] {
  display: none;
}

/* "Nieprawidłowy adres e-mail lub hasło." above the tab's form, and the
   note on a known address ("Masz już konto…", a pending invitation). */
.konto-tab-panel > .alert,
.konto-note {
  margin-bottom: 24px;
}

/* ── Form ── */
.konto-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* .form-field stays on the markup: static/js/form-validate.js looks the field
   up by it to put its error in. Only its look changes here. */
.konto-form .form-field {
  display: block;
}

.konto-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--konto-grafit);
}

.konto-input-wrap {
  position: relative;
  margin-top: 8px;
}

.konto-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--konto-slate-300);
  border-radius: 12px;
  background: var(--konto-white);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--konto-grafit);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.konto-input::placeholder {
  color: var(--konto-slate-400);
}

.konto-input:focus {
  border-color: var(--konto-koral);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--konto-koral) 30%, transparent);
}

.konto-input--with-toggle {
  padding-right: 64px;
}

.konto .form-field.is-invalid .konto-input {
  border-color: var(--konto-koral);
}

.konto-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--konto-koral);
  cursor: pointer;
}

.konto-toggle:hover {
  text-decoration: underline;
}

.konto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: var(--konto-koral);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--konto-white);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  cursor: pointer;
  transition: background-color .15s;
}

.konto-btn:hover {
  background: var(--konto-koral-ciemny);
}

.konto .konto-btn--outline {
  border: 1px solid color-mix(in oklab, var(--konto-grafit) 30%, transparent);
  background: transparent;
  color: var(--konto-grafit);
  box-shadow: none;
}

.konto .konto-btn--outline:hover {
  border-color: var(--konto-grafit);
  background: var(--konto-grafit);
  color: var(--konto-white);
  text-decoration: none;
}

.konto-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 20px;
}

.konto-hint {
  margin-top: 20px !important;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--konto-slate-600);
}

.konto-legal {
  margin-top: 32px !important;
  font-size: 12px;
  line-height: 1.625;
  color: var(--konto-slate-400);
}

/* =====================================================================
   The other screens. Their markup keeps the panel's shared classes
   (form-field, alert, btn, checkbox-field), which the JS (form-validate,
   password-requirements, password-toggle) hooks onto; inside .konto those
   take the static page's look.
   ===================================================================== */

/* "Krok 1 z 3" above the eyebrow. */
.konto-step {
  margin-bottom: -16px !important;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--konto-slate-400);
}

.konto a.konto-link-more {
  display: inline-flex;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* "← Wróć": a quiet link under the main button. */
.konto a.konto-back {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--konto-slate-500);
}

.konto a.konto-back:hover {
  color: var(--konto-grafit);
  text-decoration: none;
}

.konto-small-print {
  text-align: center;
  font-size: 12px;
  line-height: 1.625;
  color: var(--konto-slate-500);
}

/* ── Headings ── */
.auth-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.auth-overline {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--konto-koral);
}

.auth-title {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: center;
  color: var(--konto-grafit);
}

@media (min-width: 640px) {
  .auth-title {
    font-size: 36px;
    line-height: 40px;
  }
}

.auth-description {
  text-align: center;
  color: var(--konto-slate-600);
}

/* The address a link went to. */
.auth-email {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--konto-grafit);
}

/* The address being signed in / registered, above the form. */
.auth-email-caption {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--konto-grafit);
}

.auth-text-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.625;
  color: var(--konto-slate-600);
}

/* ── Fields ── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.konto .form-field-label-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--konto-grafit);
}

.konto .form-field-label-optional {
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  color: var(--konto-slate-400);
}

.konto .form-field-description {
  margin-top: -4px !important;
  font-size: 14px;
  line-height: 20px;
  color: var(--konto-slate-500);
}

/* A hint under the input (the phone number) rather than under the label. */
.konto .form-field-input + .form-field-description {
  margin-top: 0 !important;
}

.konto .form-field-input {
  height: auto;
  padding: 12px 16px;
  border: 1px solid var(--konto-slate-300);
  border-radius: 12px;
  background: var(--konto-white);
  transition: border-color .15s, box-shadow .15s;
}

/* "Zadeklarowana liczba paczek" on the edit page: shown, not editable. */
.konto .form-field-input--readonly {
  background: var(--konto-tlo);
}

.konto .form-field-input--readonly input {
  color: var(--konto-slate-500);
}

.konto .form-field-input:focus-within {
  border-color: var(--konto-koral);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--konto-koral) 30%, transparent);
}

.konto .form-field-input input {
  font-size: 16px;
  line-height: 24px;
  color: var(--konto-grafit);
}

.konto .form-field-input input::placeholder {
  color: var(--konto-slate-400);
}

.konto .form-field.is-invalid .form-field-input {
  border-color: var(--konto-koral);
}

.konto .form-field-error {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 20px;
  color: var(--konto-koral-ciemny);
}

/* "Pokaż" / "Ukryj" as text, like the page, instead of the eye icon. */
.konto .form-field-toggle {
  width: auto;
  height: auto;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--konto-koral);
}

.konto .form-field-toggle:hover {
  text-decoration: underline;
}

/* ── Checkboxes: the page's small square instead of components.css's ── */
.konto .checkbox-field {
  gap: 12px;
}

.konto .checkbox-field-box {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--konto-slate-300);
  border-radius: 4px;
}

.konto .checkbox-field input:checked + .checkbox-field-box {
  border-color: var(--konto-koral);
  background: var(--konto-koral);
}

.konto .checkbox-field input:checked + .checkbox-field-box::after {
  inset: 3px 6px 5px;
  border: solid var(--konto-white);
  border-width: 0 2px 2px 0;
  background: none;
  transform: rotate(45deg);
}

.konto .checkbox-field input:focus-visible + .checkbox-field-box {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--konto-koral) 30%, transparent);
}

.konto .checkbox-field span:last-child {
  padding-top: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--konto-slate-600);
}

.konto .checkbox-field.is-invalid .checkbox-field-box {
  border: 2px solid var(--konto-koral);
}

/* "(opcjonalne)" after a checkbox's text. span.…: the hint is itself the
   last span in the label, so it has to outweigh the rule above. */
.konto .checkbox-field span.auth-checkbox-hint {
  color: var(--konto-slate-400);
}

/* ── Password rules: the page's grey box, ticked live by
   password-requirements.js ── */
.auth-requirements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--konto-tlo);
}

.auth-requirements li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--konto-slate-600);
}

.auth-requirement-icon {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-text-muted);
  mask-image: url("../icons/CircleDashed.c3102a047404.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../icons/CircleDashed.c3102a047404.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.auth-requirements li.is-met {
  color: var(--color-success-dark);
}

.auth-requirements li.is-met .auth-requirement-icon {
  background-color: var(--color-success);
  mask-image: url("../icons/CheckCircle.2388da220d08.svg");
  -webkit-mask-image: url("../icons/CheckCircle.2388da220d08.svg");
}

/* ── Buttons and links ── */
.konto .btn.primary-l,
.konto .btn.primary-m {
  width: 100%;
  min-height: 0;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--konto-koral);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--konto-white);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  transition: background-color .15s, opacity .15s;
}

.konto .btn.primary-l:hover:not(:disabled),
.konto .btn.primary-m:hover:not(:disabled) {
  background: var(--konto-koral-ciemny);
  text-decoration: none;
}

.konto .btn.primary-l:disabled,
.konto .btn.primary-m:disabled {
  background: var(--konto-koral);
  color: var(--konto-white);
  opacity: .5;
}

.auth-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.auth-links a,
.auth-links button {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--konto-koral);
  text-decoration: none;
}

/* "Wyślij ponownie" has to POST, so it is a form button dressed as a link. */
.auth-links button {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.auth-links a:hover,
.auth-links button:hover {
  text-decoration: underline;
}

.auth-note-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-note--muted {
  text-align: center;
  font-size: 14px;
  line-height: 1.625;
  font-style: italic;
  color: var(--konto-slate-500);
}

/* ── Alerts: the page's pink info box ── */
.konto .alert {
  gap: 12px;
  padding: 20px;
  border: none;
  border-radius: 16px;
  background: var(--konto-roz);
}

.konto .alert--warning {
  border-left: 4px solid var(--konto-koral);
}

.konto .alert--success {
  background: var(--color-success-bg);
}

.konto .alert-icon {
  background-color: var(--konto-koral);
}

.konto .alert-icon--success {
  background-color: var(--color-success);
}

.konto .alert-text,
.konto .alert-text p {
  font-size: 14px;
  line-height: 1.625;
  color: var(--konto-slate-600);
}

/* A multi-line field ("Uwagi i specjalne prośby" on the company santa's form). */
.konto .form-field-input--textarea textarea {
  flex: 1;
  width: 100%;
  min-height: 96px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--konto-grafit);
}

.konto .form-field-input--textarea textarea::placeholder {
  color: var(--konto-slate-400);
}