/* Profiles (loaded while PROFILES_ENABLED): the log-in dialog and its pages (site/partials/login-form.html.twig,
   site/pages/account.html.twig), the header's initial, and the toast. Fields are base.css's .form-field. */

/* The dialog: centred over the dimmed page; the whole screen on phones */
.login-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  box-sizing: border-box;
  padding: 18px 32px 32px;
  overflow: auto;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  color: var(--ink);
}

.login-dialog::backdrop { background: rgba(42, 42, 42, 0.55); }

.login { display: flex; flex-direction: column; gap: 16px; }

.login__bar { display: flex; align-items: center; min-height: var(--tap); margin: 0 -10px; }
.login__back { display: inline-flex; align-items: center; gap: 4px; height: var(--tap); padding: 0 12px 0 6px; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.login__back[hidden] { display: none; }
.login__close { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-left: auto; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--ink-2); }
.login__back:hover, .login__close:hover { background: var(--page); color: var(--ink); }

.login__head { display: flex; flex-direction: column; gap: 8px; }
.login__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 2px; background: var(--red-tint); border-radius: 14px; color: var(--cta); }
.login__icon[hidden] { display: none; }
.login__title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.login__intro { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); overflow-wrap: anywhere; }

.login__view { display: flex; flex-direction: column; gap: 16px; }
.login__view[hidden], .login__form[hidden] { display: none; }

/* The set a heart or a brick will save */
.login__set { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--page); border-radius: 14px; }
.login__set[hidden] { display: none; }
.login__set-image { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; background: var(--surface); border-radius: 10px; }
.login__set-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.login__set-text strong { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 20px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.login__set-text span { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.login__set-list { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--cta); }
.login__set-list[hidden] { display: none; }
.login__set-list[data-login-set-list="wish"] svg { fill: currentColor; }

.login__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--page); border-radius: 14px; }
.login__tab { display: flex; align-items: center; justify-content: center; height: var(--tap); border-radius: 11px; font-size: 15px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.login__tab[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); color: var(--ink); }

.login__form { display: flex; flex-direction: column; gap: 14px; }
.login__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.login__link { font-size: 14px; font-weight: 700; color: var(--cta); text-decoration: none; }
.login__link:hover { text-decoration: underline; }
.login__password { position: relative; display: block; }
.form-field .login__password input { padding-right: 76px; }
.login__show { position: absolute; top: 4px; right: 4px; height: var(--tap); padding: 0 12px; background: none; border: 0; border-radius: var(--r-sm); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); }
.login__show[hidden] { display: none; }
.login__hint, .login__note { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-3); }
.login__note a { font-weight: 700; color: var(--ink); }
.login__error { margin: 0; padding: 12px 14px; background: var(--red-tint-3); border-radius: var(--r-md); font-size: 14px; font-weight: 600; line-height: 20px; color: #b52a27; }
.login__error[hidden] { display: none; }
.login__error a { font-weight: 800; color: inherit; text-underline-offset: 2px; }
.login__submit { width: 100%; height: 52px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.login__submit:disabled { opacity: 0.6; }

/* Not for people: only bots fill it in */
.login__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The pages: /log-ind, Glemt adgangskode, the links from the mails */
.account-page { display: flex; justify-content: center; padding-top: 56px; padding-bottom: 88px; }
.account-card { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 460px; box-sizing: border-box; padding: 32px 36px 36px; background: var(--surface); border-radius: var(--r-xl); }
.account-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--red-tint); border-radius: 16px; color: var(--cta); }
.account-card__icon--ok { background: var(--green-tint); border-radius: 50%; color: var(--green); }
.account-card__icon--late { background: var(--amber-tint); border-radius: 50%; color: var(--amber); }
.account-card__title { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.account-card__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); overflow-wrap: anywhere; }
.account-card__text strong { color: var(--ink); }

/* The header's initial when logged in (and in the phone menu, and on the Profil tab) */
.account-link--me { width: var(--tap); padding: 0; justify-content: center; }
.account-initial { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--brand); border-radius: 50%; font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1; color: #fff; }
.account-initial--lg { width: 52px; height: 52px; font-size: 24px; }

/* A short message after logging in, or when a change couldn't be saved (site.js showToast) */
.toast {
  position: fixed;
  z-index: 90;
  top: 124px;
  right: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(400px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 14px 10px 14px 14px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  color: var(--ink);
}

.toast__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--green-tint); border-radius: 50%; color: var(--green); }
.toast--bad .toast__icon { background: var(--red-tint); color: var(--cta); }
.toast__text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; }
.toast__text strong { font-size: 15px; line-height: 22px; color: var(--ink); }
.toast__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--ink-3); }

@media (max-width: 899px) {
  /* the phone header has no profile icon; the profile is at the top of the menu */
  .account-link--me { display: none; }

  .site-menu__login--in { color: var(--ink); text-decoration: none; }
  .site-menu__login--in .site-menu__login-icon { width: 44px; height: 44px; background: var(--brand); color: #fff; font-size: 20px; }
  .site-menu__login--in .site-menu__login-head > svg { margin-left: auto; flex-shrink: 0; color: var(--ink-3); }
}

@media (max-width: 767px) {
  .login-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 8px 20px 24px; border-radius: 0; box-shadow: none; }
  .login__title, .account-card__title { font-size: 26px; }
  .account-page { padding: 16px 12px 40px; }
  .account-card { padding: 22px 18px 24px; border-radius: 18px; }
  .toast { top: auto; right: 12px; bottom: 16px; left: 12px; width: auto; }
}