/*
 * Inloggningen på dator och surfplatta. Ritad efter skissen: en persikofärgad
 * yta, ett vitt block med inloggningen uppe till vänster, loggan uppe till
 * höger och en glimt av själva systemet nere i högra hörnet, delvis bakom
 * blocket.
 *
 * Bakgrunden är densamma i ljust och mörkt läge. Det som byter är blocket
 * och systemet i bild — och de läser sina färger från --l-* nedan.
 */

.login {
  --l-box: #ffffff;
  --l-sub: #f3f3f0;
  --l-hover: #ebebe7;
  --l-text: #161616;
  --l-2: #6f6f6b;
  --l-3: #999994;
  --l-line: rgba(22, 22, 22, .085);
  --l-focus: rgba(228, 113, 135, .28);
  --l-red: #ab3f3f;
  --l-red-line: #e0615c;
  --l-g-ink: #1f6b3e;
  --l-g-soft: #e8f6ed;
  --l-p-ink: #574c86;
  --l-p-soft: #f0eefa;
  --l-pill: #161616;
  --l-pill-ink: #ffffff;
  --l-shadow: 0 30px 80px rgba(120, 50, 40, .22), 0 0 0 1px rgba(22, 22, 22, .05);
  --l-shadow-win: 0 24px 60px rgba(120, 50, 40, .26), 0 0 0 1px rgba(22, 22, 22, .05);
  --l-brand: linear-gradient(135deg, #f08c75 0%, #ec7f7d 48%, #e47187 100%);
  --l-frost: rgba(255, 255, 255, .68);

  position: fixed;
  inset: 0;
  overflow: auto;
  color: var(--l-text);
  font-family: var(--font-sans);
  background: linear-gradient(165deg, #fdeadf 0%, #f9cdb8 52%, #f3aa9c 100%);
}

:root[data-theme="dark"] .login {
  --l-box: #111112;
  --l-sub: #1c1c1e;
  --l-hover: #272729;
  --l-text: #f2f2ef;
  --l-2: #a3a39e;
  --l-3: #75756f;
  --l-line: rgba(255, 255, 255, .09);
  --l-focus: rgba(240, 140, 117, .35);
  --l-red: #f0908b;
  --l-g-ink: #7fd1a0;
  --l-g-soft: #1b3025;
  --l-p-ink: #b5aae6;
  --l-p-soft: #28243d;
  --l-pill: #2c2c2e;
  --l-pill-ink: #f2f2ef;
  --l-frost: rgba(34, 34, 37, .64);
  --l-shadow: 0 30px 80px rgba(70, 14, 28, .42), 0 0 0 1px rgba(255, 255, 255, .08);
  --l-shadow-win: 0 24px 60px rgba(70, 14, 28, .4), 0 0 0 1px rgba(255, 255, 255, .08);
}

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

/* Alla mått i skissen är i procent av ytan. Under min-höjden scrollar sidan. */
.lg-stage {
  --card-left: 7%;
  --card-w: clamp(460px, 60%, 900px);
  --overlap: 70px; /* hur långt in under blocket systemet i bild sträcker sig */

  position: relative;
  height: 100%;
  min-height: 680px;
  overflow: hidden;
}

/* Texten i bilden går inte att markera eller kopiera. */
.lg-preview { -webkit-user-select: none; user-select: none; }
.lg-shield { position: absolute; z-index: 3; inset: 0; }

/* ----------------------------------------------------------------- Loggan */

.lg-logo {
  position: absolute;
  z-index: 3;
  top: 12%;
  right: 5%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  animation: lg-fade .8s .2s ease both;
}
.lg-mark { height: 30px; width: auto; display: block; }
.lg-word { height: 15px; width: auto; display: block; }

/* ----------------------------------------------------------------- Blocket */

.lg-card {
  position: absolute;
  z-index: 4;
  left: var(--card-left);
  top: 12%;
  width: var(--card-w);
  height: clamp(520px, 72%, 720px);
  display: grid;
  place-items: center;
  padding: 32px;
  border-radius: 30px;
  background: var(--l-box);
  color: var(--l-text);
  box-shadow: var(--l-shadow);
  animation: lg-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.lg-body { width: 100%; max-width: 400px; }

.lg-body h1 {
  margin: 0 0 26px;
  text-align: center;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.lg-form { display: grid; gap: 12px; }

/* Solen som blir en måne, uppe i blockets hörn. */
.lg-theme {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--l-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lg-theme:hover { background: var(--l-sub); color: var(--l-text); }
.lg-theme svg {
  grid-area: 1 / 1;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
.lg-theme .moon { opacity: 0; transform: rotate(-80deg) scale(.4); }
:root[data-theme="dark"] .lg-theme .sun { opacity: 0; transform: rotate(80deg) scale(.4); }
:root[data-theme="dark"] .lg-theme .moon { opacity: 1; transform: none; }

.lg-theme:focus-visible,
.lg-field:focus-within,
.lg-eye:focus-visible,
.lg-go:focus-visible,
.lg-google:focus-visible,
.lg-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--l-focus); }

/* Fält och knappar: samma höjd, samma rundning. */
.lg-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--l-sub);
  cursor: text;
  transition: box-shadow .15s;
}
.lg-field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  text-overflow: ellipsis;
}
.lg-field input::placeholder { color: var(--l-3); font-weight: 450; }
.lg-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--l-text);
  box-shadow: 0 0 0 60px var(--l-sub) inset;
}

.lg-eye {
  width: 32px;
  height: 32px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--l-3);
  cursor: pointer;
}
.lg-eye:hover { background: var(--l-hover); color: var(--l-text); }
.lg-eye svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye .eye-open { display: none; }
.lg-eye[aria-pressed="true"] .eye-open { display: block; }
.lg-eye[aria-pressed="true"] .eye-closed { display: none; }

.lg-error {
  display: none;
  margin: -2px 2px 0;
  color: var(--l-red);
  font-size: 13px;
  line-height: 1.4;
}
.lg-error.show { display: block; }

.lg-go,
.lg-google {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  cursor: pointer;
}
.lg-go {
  background: var(--l-brand);
  color: #fff;
  font-size: 15.5px;
  font-weight: 650;
  box-shadow: 0 10px 26px rgba(228, 113, 135, .3);
  transition: transform .12s, filter .15s;
}
.lg-go:hover { filter: brightness(1.04); }
.lg-go:active { transform: scale(.985); }
.lg-go:disabled { cursor: default; filter: saturate(.7); transform: none; }

.lg-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0;
  color: var(--l-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
}
.lg-or::before,
.lg-or::after { content: ""; flex: 1; height: 1px; background: var(--l-line); }

.lg-google {
  background: var(--l-sub);
  color: var(--l-text);
  font-size: 15px;
  font-weight: 600;
  transition: background .15s;
}
.lg-google:hover { background: var(--l-hover); }
.lg-google svg { width: 18px; height: 18px; }

.lg-claim {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px var(--l-line);
  color: var(--l-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.lg-claim:hover { background: var(--l-sub); }
.lg-claim:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--l-focus); }
.lg-claim svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lg-reg {
  justify-self: center;
  margin-top: 10px;
  color: var(--l-2);
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}
.lg-reg:hover { color: var(--l-text); text-decoration: underline; text-underline-offset: 3px; }
.lg-reg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--l-focus); border-radius: 6px; }

/* Välj restaurang */
.lg-picker { display: grid; gap: 10px; }
.lg-picker > p { margin: 0 0 6px; text-align: center; color: var(--l-2); font-size: 14.5px; }
.lg-picker-list { display: grid; gap: 8px; }
.lg-pick {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--l-sub);
  color: var(--l-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.lg-pick:hover { background: var(--l-hover); }
.lg-pick span { color: var(--l-3); font-size: 13px; font-weight: 500; }

/* ----------------------------------------------------------- Systemet i bild */

.lg-preview {
  position: absolute;
  z-index: 2;
  left: calc(var(--card-left) + var(--card-w) - var(--overlap));
  right: 0;
  top: 61%;
  bottom: 0;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 28px 0 22px;
  overflow: hidden;
  border-radius: 24px 0 0 0;
  background: var(--l-box);
  color: var(--l-text);
  box-shadow: var(--l-shadow-win);
  animation: lg-slide .9s .15s cubic-bezier(.2, .8, .2, 1) both;
}
.lg-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-left: calc(var(--overlap) - 10px); }
.lg-prev-head b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.lg-prev-head small { display: block; margin-top: 1px; color: var(--l-2); font-size: 12px; font-weight: 500; }
.lg-prev-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--l-sub); color: var(--l-2); font-size: 11.5px; font-weight: 650; }
.lg-prev-seg span { padding: 5px 13px; border-radius: 999px; }
.lg-prev-seg .on { background: var(--l-pill); color: var(--l-pill-ink); }

.lg-prev-list { display: grid; gap: 4px; }
.lg-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 16px; }
.lg-row:first-child { background: var(--l-sub); }
.lg-row .av { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--l-sub); color: var(--l-2); font-size: 12.5px; font-weight: 650; }
.lg-row:first-child .av { background: var(--l-box); }
.lg-row .t { min-width: 0; display: grid; gap: 1px; }
.lg-row b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lg-row em { overflow: hidden; color: var(--l-2); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.lg-row .tm { display: grid; justify-items: end; gap: 3px; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lg-pill { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 650; }
.lg-pill.g { background: var(--l-g-soft); color: var(--l-g-ink); }
.lg-pill.p { background: var(--l-p-soft); color: var(--l-p-ink); }

/* ------------------------------------------------------------------ Rörelse */

@keyframes lg-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes lg-slide { from { opacity: 0; transform: translate(48px, 48px); } }
@keyframes lg-fade { from { opacity: 0; } }

/* ------------------------------------------------------------ Smalare skärm */

@media (max-width: 760px) {
  .lg-stage { min-height: 0; height: auto; overflow: visible; padding: 86px 16px 32px; }
  .lg-logo { top: 28px; right: auto; left: 16px; }
  .lg-card { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 60px 22px 28px; }
  .lg-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login *, .login *::before, .login *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- Fråga om att installera */

.pwa {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 14, 12, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.pwa.show { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s 0s; }

/* Frostat glas, utan kantlinje. */
.pwa-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 24px 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  border-radius: 34px;
  background: var(--l-frost);
  color: var(--l-text);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 30px 80px rgba(60, 20, 20, .3);
  transform: translateY(18px) scale(.95);
  transition: transform .5s cubic-bezier(.2, .85, .25, 1);
}
.pwa.show .pwa-card { transform: none; }

.pwa-icon { width: 76px; height: 76px; margin-bottom: 16px; border-radius: 22px; box-shadow: 0 10px 26px rgba(120, 50, 40, .28); }
.pwa-card h2 { margin: 0 0 8px; font-size: 23px; font-weight: 650; letter-spacing: -.03em; }
.pwa-card p { margin: 0 0 22px; color: var(--l-2); font-size: 14.5px; line-height: 1.45; }

.pwa-install {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--l-brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  box-shadow: 0 10px 26px rgba(228, 113, 135, .34);
  cursor: pointer;
}
.pwa-install:active { filter: brightness(.96); }

.pwa-skip {
  margin-top: 6px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #d9453f;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
:root[data-theme="dark"] .pwa-skip { color: #ff7a72; }
.pwa-install:focus-visible,
.pwa-skip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--l-focus); }

@media (prefers-reduced-motion: reduce) {
  .pwa, .pwa-card { transition: none; }
}