/* Páginas de conta do Troku (entrar, registar). Desenho aprovado: ExtLogin, ExtLoginErro e ExtLoginMobile.
   Tudo isolado em .tk-auth; os tokens --k-* são redefinidos aqui para que os componentes partilhados
   (k-field, k-input, k-select, k-alert) fiquem com a paleta da marca e sempre em claro. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.tk-auth {
  --tk-bg: #FBF8F4;
  --tk-ink: #2A3F8F;
  --tk-mut: #55607A;
  --tk-line: #D9D2C7;
  --tk-line-2: #EFE7DC;
  --tk-navy: #1A2657;
  --tk-orange: #FF5F1F;
  --tk-orange-dk: #F04E0E;
  --tk-ring: #FFE4D4;
  --tk-link: #1F5FBF;
  --tk-err: #C0262D;
  --tk-err-bg: #FBE1E2;
  --tk-focus: #1A2657;

  --k-primary: var(--tk-orange); --k-primary-dk: var(--tk-orange-dk); --k-primary-lt: var(--tk-ring);
  --k-ink: var(--tk-ink); --k-ink-2: var(--tk-ink); --k-mute: var(--tk-mut); --k-mute-2: var(--tk-mut);
  --k-line: var(--tk-line); --k-line-2: var(--tk-line-2); --k-input-line: var(--tk-line);
  --k-bg: var(--tk-bg); --k-surface: #FFFFFF; --k-hover: #F6F1EA;
  --k-err: var(--tk-err); --k-err-bg: var(--tk-err-bg);
  --k-ok: #1F6B3A; --k-ok-bg: #E3F1EA; --k-info: #1F4BAD; --k-info-bg: #E2EAFB; --k-warn: #8A4A0B; --k-warn-bg: #FCEFD9;
  --k-f-ui: 'Inter', system-ui, 'Segoe UI', sans-serif;
  --k-f-display: 'Inter', system-ui, 'Segoe UI', sans-serif;
  color-scheme: light;

  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tk-bg);
  color: var(--tk-ink);
  font-family: var(--k-f-ui);
  font-size: 15px;
  line-height: 22px;
  font-feature-settings: 'cv11', 'ss01';
}
.tk-auth *, .tk-auth *::before, .tk-auth *::after { box-sizing: border-box; }
.tk-auth a { color: var(--tk-link); font-weight: 600; text-decoration: none; }
.tk-auth a:hover { text-decoration: underline; }
.tk-auth :focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; border-radius: 4px; }
.tk-auth h1:focus { outline: none; }

/* ---------- Painel da marca ---------- */
.tk-brand {
  position: sticky; top: 0; align-self: flex-start;
  flex: 0 0 clamp(400px, 41.67vw, 600px);
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--tk-navy) url('favos.svg') center / cover no-repeat;
  color: #FFFFFF;
}
.tk-brand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 38, 87, .15) 0%, rgba(26, 38, 87, .85) 62%, #1A2657 100%);
}
.tk-brand-content {
  position: absolute; left: 56px; right: 56px; bottom: 56px; z-index: 1;
  display: flex; flex-direction: column; gap: 22px;
}
.tk-logo { display: inline-flex; align-self: flex-start; border-radius: 6px; }
.tk-logo svg { display: block; height: 46px; width: auto; }
.tk-auth .tk-logo:focus-visible { outline-color: #FFFFFF; outline-offset: 4px; }
.tk-claim { margin: 0; font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: -.035em; color: #FFFFFF; }
.tk-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #DDE2F3; }
.tk-perks li { display: flex; align-items: center; gap: 10px; }
.tk-perks svg { flex: none; fill: none; stroke: #FFA26B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Lado do formulário ---------- */
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 24px 40px; }
.tk-help { align-self: flex-end; margin: 4px 0 0; font-size: 14px; display: flex; gap: 6px; }
.tk-help span { color: var(--tk-mut); }
.tk-inner { flex: 1; width: 420px; max-width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.tk-inner:has(.tk-wide) { width: 600px; }
.tk-foot { margin: 0; font-size: 12px; line-height: 18px; color: var(--tk-mut); text-align: center; }

.tk-login, .tk-wide { display: flex; flex-direction: column; gap: 22px; }
.tk-head { display: flex; flex-direction: column; gap: 6px; }
.tk-title { margin: 0; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -.035em; color: var(--tk-ink); }
.tk-sub { margin: 0; color: var(--tk-mut); }

.tk-form { display: flex; flex-direction: column; gap: 22px; }
.tk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-fl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-fl { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--tk-ink); }
.tk-forgot { font-size: 13px; }

.tk-in {
  height: 48px; border: 1px solid var(--tk-line); border-radius: 10px; background: #FFFFFF;
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px;
}
.tk-in > svg { flex: none; fill: none; stroke: var(--tk-mut); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-in input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 8px 0 0;
  font: 15px/22px var(--k-f-ui); color: var(--tk-ink);
}
.tk-in input::placeholder { color: #7A8399; }
.tk-in input[type=password] { letter-spacing: 2px; }
.tk-in input[type=password]::placeholder { letter-spacing: normal; }
/* Foco: o anel do desenho com borda laranja mais escura, para cumprir 3:1 contra o branco. */
.tk-in:focus-within { border-color: #D9480F; box-shadow: 0 0 0 3px var(--tk-ring); }
.tk-in.err, .tk-in:has(input.invalid) { border-color: var(--tk-err); box-shadow: 0 0 0 3px var(--tk-err-bg); }
.tk-fe { font-size: 13px; line-height: 20px; color: var(--tk-err); }
.tk-auth .validation-message, .tk-auth .k-err { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--tk-err); }

.tk-reveal {
  flex: none; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 13px var(--k-f-ui); color: var(--tk-link);
}
.tk-reveal svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-reveal:hover { background: #EEF3FB; }

.tk-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--tk-ink); }
.tk-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--tk-orange); cursor: pointer; }

.tk-btn, .tk-btn2 {
  height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px var(--k-f-ui); cursor: pointer; text-decoration: none; width: 100%;
}
.tk-btn { background: var(--tk-orange); color: var(--tk-navy); border: 0; }
.tk-btn:hover { background: var(--tk-orange-dk); }
.tk-auth a.tk-btn2, .tk-auth button.tk-btn2 { background: #FFFFFF; color: var(--tk-ink); font-weight: 600; border: 1px solid var(--tk-line); font-family: inherit; cursor: pointer; }
.tk-auth a.tk-btn2:hover, .tk-auth button.tk-btn2:hover { background: #F6F1EA; text-decoration: none; }
/* Um botão principal escrito como ligação (por exemplo "Voltar ao painel") fica com o texto do botão, não o das ligações. */
.tk-auth a.tk-btn { color: var(--tk-navy); text-decoration: none; }
.tk-btn2 svg { display: block; flex: none; }

.tk-or { display: flex; align-items: center; gap: 12px; color: var(--tk-mut); font-size: 13px; }
.tk-or span { flex: 1; height: 1px; background: var(--tk-line-2); }
.tk-alt { margin: 0; font-size: 14px; text-align: center; color: var(--tk-mut); }

.tk-alert {
  border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 20px; background: var(--tk-err-bg); color: var(--tk-err);
}
.tk-alert svg { flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-alert div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Componentes partilhados nas outras páginas de conta (registar) ---------- */
.tk-auth .k-form { gap: 22px; }
.tk-auth .k-form-grid { gap: 18px; }
.tk-auth .k-field { font-size: 14px; font-weight: 500; color: var(--tk-ink); }
.tk-auth .k-input, .tk-auth .k-select { height: 48px; border-color: var(--tk-line); padding: 0 14px; font-size: 15px; font-weight: 400; color: var(--tk-ink); background-color: #FFFFFF; }
.tk-auth .k-input:focus, .tk-auth .k-select:focus { outline: none; border-color: #D9480F; box-shadow: 0 0 0 3px var(--tk-ring); }
.tk-auth .k-input.invalid, .tk-auth .k-select.invalid { border-color: var(--tk-err); box-shadow: 0 0 0 3px var(--tk-err-bg); }
.tk-auth .k-section-title { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--tk-ink); margin: 6px 0 0; }
.tk-auth .k-alert { border-radius: 12px; font-size: 14px; line-height: 20px; }

/* Visibilidade por formato: o desenho de telemóvel é mais curto. */
.tk-mob { display: none; }

/* ---------- Ecrãs intermédios ---------- */
@media (max-width: 1100px) {
  .tk-brand-content { left: 40px; right: 40px; bottom: 40px; }
  .tk-claim { font-size: 34px; line-height: 40px; }
  .tk-main { padding: 24px 28px; }
}

/* ---------- Telemóvel e tablet vertical ---------- */
@media (max-width: 860px) {
  .tk-auth { flex-direction: column; }
  .tk-brand {
    position: relative; align-self: stretch; flex: none; height: 220px;
    background-image: url('favos-telemovel.svg');
  }
  .tk-brand::after { background: linear-gradient(180deg, rgba(26, 38, 87, .2), #1A2657); }
  .tk-brand-content { left: 24px; right: 24px; bottom: 22px; gap: 10px; }
  .tk-logo svg { height: 34px; }
  .tk-claim { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: #DDE2F3; }
  .tk-perks { display: none; }

  .tk-main { align-items: stretch; padding: 26px 24px 24px; }
  .tk-help { display: none; }
  .tk-inner, .tk-inner:has(.tk-wide) { width: auto; flex: none; justify-content: flex-start; padding: 0; }
  .tk-foot { margin-top: 32px; }

  .tk-login, .tk-wide { gap: 18px; }
  .tk-title { font-size: 26px; line-height: 32px; letter-spacing: -.03em; }
  .tk-login .tk-sub { display: none; }
  .tk-form { gap: 18px; }
  .tk-desk { display: none; }
  .tk-mob { display: initial; }
  .tk-forgot.tk-mob { display: block; align-self: flex-start; font-size: 14px; }

  /* Ordem do desenho de telemóvel: esqueci-me logo abaixo da palavra-passe, "manter sessão" depois do botão. */
  .tk-o-email { order: 1; }
  .tk-o-pass { order: 2; }
  .tk-o-forgot { order: 3; }
  .tk-o-submit { order: 4; }
  .tk-o-keep { order: 5; }
  .tk-reveal { width: 36px; justify-content: center; padding: 0; }
  .tk-reveal svg { width: 18px; height: 18px; }
  .tk-reveal span { display: none; }
  .tk-alt { margin-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .tk-in, .tk-btn, .tk-btn2, .tk-reveal { transition: border-color .15s, box-shadow .15s, background-color .15s; }
}