/* ==========================================================================
   ACCESS.AL — hyrja dhe regjistrimi
   --------------------------------------------------------------------------
   Two fullscreen pages, one stylesheet. This used to be a modal stacked on top
   of the landing page, sharing its 3062-line stylesheet and its scroll lock,
   which is why the auth surface felt heavy: every visitor downloaded a whole
   marketing page to type an email address.

   The shape is deliberately the one Spotify and Instagram use — a single
   centred column, one question on screen at a time, one obvious action. Space
   is the main design element; there is no card-inside-a-card, no accent
   gradient competing with the button, and nothing on screen that is not either
   a question, an answer, or the way forward.

   Tokens mirror index-accessal-landing.css so the two surfaces are visibly the
   same product, but nothing here depends on that file being loaded.
   ========================================================================== */

:root {
  --au-bg: #ffffff;
  --au-paper: #f6f7f9;
  --au-ink: #0b0d12;
  --au-soft: #2d3440;
  --au-muted: #667085;
  --au-line: rgba(11, 13, 18, .12);
  --au-line-strong: rgba(11, 13, 18, .22);
  --au-accent: #006aa6;
  --au-accent-ink: #ffffff;
  --au-accent-soft: rgba(0, 106, 166, .08);
  --au-ok: #057b18;
  --au-ok-soft: rgba(5, 123, 24, .1);
  --au-bad: #b42318;
  --au-bad-soft: rgba(180, 35, 24, .09);
  --au-focus: #20bff2;
  --au-radius: 14px;
  --au-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --au-bg: #0b0f16;
  --au-paper: #111721;
  --au-ink: #f8fafc;
  --au-soft: #d7dde8;
  --au-muted: #9aa5b5;
  --au-line: rgba(255, 255, 255, .16);
  --au-line-strong: rgba(255, 255, 255, .3);
  --au-accent: #5ccffa;
  --au-accent-ink: #06121c;
  --au-accent-soft: rgba(92, 207, 250, .12);
  --au-ok: #4ade80;
  --au-ok-soft: rgba(74, 222, 128, .12);
  --au-bad: #fca5a5;
  --au-bad-soft: rgba(252, 165, 165, .12);
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.au {
  background: var(--au-bg);
  color: var(--au-ink);
  font-family: var(--au-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Anything that only exists for a screen reader. Labels are never removed to
   make a layout tidier — a placeholder is not a label, and a form nobody can
   navigate by keyboard is not finished. */
.au-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.au-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--au-ink);
  color: var(--au-bg);
  text-decoration: none;
  transition: top .16s ease;
}
.au-skip:focus { top: 12px; }

/* ── top bar ─────────────────────────────────────────────────────────────── */

.au-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 5vw, 40px);
}

.au-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--au-ink);
  text-decoration: none;
}
.au-brand img { height: 30px; width: auto; display: block; }

.au-topnav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--au-muted);
}
.au-topnav a {
  color: var(--au-ink);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--au-line);
}
.au-topnav a:hover { border-color: var(--au-line-strong); }
.au-topnav .au-topnav-hint { display: none; }
@media (min-width: 620px) {
  .au-topnav .au-topnav-hint { display: inline; }
}

.au-theme {
  border: 1px solid var(--au-line);
  background: transparent;
  color: var(--au-ink);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.au-theme:hover { border-color: var(--au-line-strong); }

/* ── the column ──────────────────────────────────────────────────────────── */

.au-main {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: clamp(8px, 3vw, 32px) clamp(16px, 5vw, 40px) 56px;
}

.au-panel {
  width: 100%;
  max-width: 460px;
}
.au-panel--wide { max-width: 660px; }

.au-title {
  margin: 0 0 10px;
  font-size: clamp(26px, 5.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 700;
}

.au-sub {
  margin: 0 0 28px;
  color: var(--au-muted);
  font-size: 15px;
}

/* ── fields ──────────────────────────────────────────────────────────────── */

.au-field { margin-bottom: 16px; }

.au-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--au-soft);
}

.au-input {
  width: 100%;
  padding: 14px 15px;
  font-size: 16px;           /* 16px stops iOS zooming the page on focus */
  font-family: inherit;
  color: var(--au-ink);
  background: var(--au-bg);
  border: 1px solid var(--au-line-strong);
  border-radius: var(--au-radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.au-input::placeholder { color: var(--au-muted); opacity: .8; }
.au-input:focus {
  outline: none;
  border-color: var(--au-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-focus) 28%, transparent);
}
.au-input:disabled { opacity: .6; cursor: not-allowed; }

.au-hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--au-muted);
}

.au-pw { position: relative; }
.au-pw .au-input { padding-right: 48px; }
.au-pw-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--au-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.au-pw-eye:hover { color: var(--au-ink); }
.au-pw-eye:focus-visible {
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.au-btn {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: var(--au-radius);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: opacity .14s ease, background .14s ease, border-color .14s ease;
}
.au-btn:focus-visible {
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
.au-btn[disabled] { opacity: .55; cursor: not-allowed; }

.au-btn--go {
  background: var(--au-accent);
  color: var(--au-accent-ink);
}
.au-btn--go:hover:not([disabled]) { opacity: .9; }

.au-btn--quiet {
  background: transparent;
  color: var(--au-ink);
  border-color: var(--au-line-strong);
}
.au-btn--quiet:hover:not([disabled]) { background: var(--au-paper); }

.au-btn--link {
  width: auto;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: var(--au-accent);
  font-weight: 600;
  font-size: 14px;
}
.au-btn--link:hover { text-decoration: underline; }

.au-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.au-row--split > * { flex: 1 1 0; }

.au-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--au-muted);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.au-or::before,
.au-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--au-line);
}

/* ── messages ────────────────────────────────────────────────────────────── */

.au-alert {
  display: none;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid transparent;
}
.au-alert.is-shown { display: block; }
.au-alert.is-error {
  background: var(--au-bad-soft);
  border-color: color-mix(in srgb, var(--au-bad) 35%, transparent);
  color: var(--au-bad);
}
.au-alert.is-ok {
  background: var(--au-ok-soft);
  border-color: color-mix(in srgb, var(--au-ok) 35%, transparent);
  color: var(--au-ok);
}

/* ── the account chooser ─────────────────────────────────────────────────── */

.au-accounts {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.au-account {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  background: var(--au-bg);
  border: 1px solid var(--au-line-strong);
  border-radius: var(--au-radius);
  color: var(--au-ink);
  font-family: inherit;
  cursor: pointer;
}
.au-account:hover { border-color: var(--au-accent); background: var(--au-accent-soft); }
.au-account:focus-visible { outline: 2px solid var(--au-focus); outline-offset: 2px; }
.au-account-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--au-accent-soft);
  color: var(--au-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.au-account-name { font-weight: 600; font-size: 15px; }
.au-account-role { font-size: 12.5px; color: var(--au-muted); }

/* ── the code screen ─────────────────────────────────────────────────────── */

.au-code {
  width: 100%;
  padding: 18px;
  font-size: 26px;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;      /* keeps the glyphs optically centred despite tracking */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--au-ink);
  background: var(--au-bg);
  border: 1px solid var(--au-line-strong);
  border-radius: var(--au-radius);
}
.au-code:focus {
  outline: none;
  border-color: var(--au-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-focus) 28%, transparent);
}

/* ── views ───────────────────────────────────────────────────────────────── */

.au-view { display: none; }
.au-view.is-live { display: block; }

.au-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--au-muted);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.au-back:hover { color: var(--au-ink); }

/* ── foot ────────────────────────────────────────────────────────────────── */

.au-foot {
  padding: 0 clamp(16px, 5vw, 40px) 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  font-size: 12.5px;
  color: var(--au-muted);
}
.au-foot a { color: var(--au-muted); text-decoration: none; }
.au-foot a:hover { color: var(--au-ink); text-decoration: underline; }

/* A reseller is signing in to a different product with the same door. Say so
   plainly instead of leaving the page identical to the one they just left —
   the previous build changed nothing visible when ?reseller_login=1 was set,
   so the only way to know the mode had taken effect was to try to log in. */
.au-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--au-accent-soft);
  color: var(--au-accent);
  border: 1px solid color-mix(in srgb, var(--au-accent) 35%, transparent);
  font-size: 13px;
  font-weight: 600;
}

.au-spin {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: au-turn .7s linear infinite;
}
@keyframes au-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Zgjedhja e kategorisë — pesë karta, një logo e vogël, asgjë tjetër
   --------------------------------------------------------------------------
   The owner asked for a small centred mark rather than a brand bar, five
   category cards, and an "i" on each that opens what it contains. Everything
   here is measured against a 320px phone first: that is the width the old
   landing page broke at, and the width nothing may break at again.
   ========================================================================== */

.au-top--quiet {
  position: relative;
  justify-content: center;
  padding-top: 26px;
  padding-bottom: 6px;
}

.au-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* a finger target, even though it is a mark */
  color: var(--au-muted);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}
.au-mark img {
  height: 22px;
  width: auto;
  display: block;
  opacity: .8;
}
.au-mark:hover img { opacity: 1; }

/* The wordmark is a transparent PNG in one ink. Both are in the page and CSS
   picks the one the current theme needs, because the theme toggle does not
   reload — a server-chosen src would be the wrong colour the moment somebody
   pressed it. */
.au-mark-dark { display: none; }
[data-theme="dark"] .au-mark-light { display: none; }
[data-theme="dark"] .au-mark-dark { display: block; }

/* On the login page the mark sits beside a nav rather than centred, so the
   brand row keeps its own spacing but loses the duplicated wordmark text. */
.au-brand.au-mark { gap: 0; }

.au-theme--corner {
  position: absolute;
  right: clamp(12px, 4vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.au-title--center,
.au-sub--center { text-align: center; }
.au-sub--center { margin-bottom: 26px; }

/* ── the cards ───────────────────────────────────────────────────────────── */

.au-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}
@media (min-width: 720px) {
  .au-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five into two columns leaves one on its own; give it the full width so the
     grid does not end on a half-empty row. */
  .au-cards > .au-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.au-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0;
  border: 1px solid var(--au-line-strong);
  border-radius: var(--au-radius);
  background: var(--au-bg);
  transition: border-color .14s ease, background .14s ease;
  min-width: 0;
}
.au-card:hover { border-color: var(--au-accent); }
.au-card:has(.au-card-pick[aria-checked="true"]) {
  border-color: var(--au-accent);
  background: var(--au-accent-soft);
}

.au-card-pick {
  grid-column: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 4px 16px 16px;
  min-height: 76px;
  background: none;
  border: 0;
  border-radius: var(--au-radius);
  color: var(--au-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.au-card-pick:focus-visible { outline: 2px solid var(--au-focus); outline-offset: -2px; }

.au-card-icon {
  grid-row: 1 / span 2;
  font-size: 24px;
  line-height: 1;
  color: var(--au-accent);
  justify-self: center;
}
.au-card-name {
  font-weight: 650;
  font-size: 16px;
  min-width: 0;
}
.au-card-line {
  font-size: 13px;
  line-height: 1.4;
  color: var(--au-muted);
  min-width: 0;
  overflow-wrap: anywhere;   /* a long word must wrap, never widen the page */
}

.au-card-info {
  grid-column: 2;
  align-self: center;
  width: 44px;
  height: 44px;
  margin-right: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--au-line);
  border-radius: 999px;
  background: transparent;
  color: var(--au-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.au-card-info:hover { color: var(--au-ink); border-color: var(--au-line-strong); }
.au-card-info:focus-visible { outline: 2px solid var(--au-focus); outline-offset: 2px; }
.au-card-info[aria-expanded="true"] {
  background: var(--au-accent);
  border-color: var(--au-accent);
  color: var(--au-accent-ink);
}

/* ── what a category contains ────────────────────────────────────────────── */

.au-detail {
  grid-column: 1 / -1;
  padding: 4px 16px 18px;
  border-top: 1px solid var(--au-line);
  margin-top: 2px;
}
.au-detail-head {
  margin: 14px 0 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--au-soft);
}
.au-detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.au-detail-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 14px;
  min-width: 0;
}
.au-detail-list i {
  color: var(--au-accent);
  font-size: 15px;
  line-height: 1.5;
}
.au-detail-list strong { display: block; font-weight: 600; }
.au-detail-what {
  display: block;
  margin-top: 2px;
  color: var(--au-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.au-detail-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--au-muted);
}

/* ── finger targets ──────────────────────────────────────────────────────── */
/* Measured on a 320px phone: the footer links were 19px tall and the
   forgotten-password button 31px. Anything a finger has to find is 44px. */

.au-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.au-btn--link { min-height: 44px; }
.au-topnav a { min-height: 44px; }
.au-theme { width: 44px; height: 44px; }
.au-pw-eye { width: 44px; height: 44px; }
.au-pw .au-input { padding-right: 54px; }

/* Nothing on these pages may widen the viewport. Long business names, long
   email addresses and translated strings all pass through here. */
.au-panel,
.au-card,
.au-detail-list li { min-width: 0; }
.au-title,
.au-sub,
.au-label,
.au-hint { overflow-wrap: anywhere; }

.au-hint--center { text-align: center; margin-top: 14px; }