/* ═══════════════════════════════════════════════════════════════
   Sign-in page — fresh-produce hero + card (loads after app.css).
   Phone  : photo band on top, card overlapping it.
   Desktop: photo on the left half, card on the right.
   The photo is tinted with the chosen theme colour (--primary).
   ═══════════════════════════════════════════════════════════════ */
body.lp { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

/* ── hero ── */
.lp-hero { position: relative; min-height: 300px; height: 40vh; color: #fff; overflow: hidden; flex: 0 0 auto; }
.lp-hero-img {
  position: absolute; inset: -12px; background: url('/images/login-hero.jpg') center / cover no-repeat;
  transform: scale(1.04); animation: lp-drift 28s ease-in-out infinite alternate;
}
@keyframes lp-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@media (prefers-reduced-motion: reduce) { .lp-hero-img { animation: none; } }
.lp-hero-shade {
  position: absolute; inset: 0;
  /* light brand tint so the produce stays colourful; darker at the bottom where the text sits */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.72) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 45%, transparent), color-mix(in srgb, var(--primary-dark) 30%, transparent));
}
.lp-hero .hdr-btn { z-index: 3; top: calc(12px + env(safe-area-inset-top)); background: rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.lp-hero-text {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(20px + env(safe-area-inset-top)) 22px 64px; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.lp-mark {
  width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(6px); margin-bottom: 12px;
}
.lp-hero h1 { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: .2px; line-height: 1.15; }
.lp-ml { font-family: var(--font-ml); }
.lp-hero .lp-ml { margin: 4px 0 0; font-size: 1.05rem; font-weight: 700; opacity: .95; }
.lp-sub { margin: 6px 0 0; font-size: .86rem; opacity: .9; max-width: 34ch; }
.lp-points { display: none; list-style: none; padding: 0; margin: 22px 0 0; }
.lp-points li { display: flex; align-items: center; gap: 10px; font-size: .98rem; margin-bottom: 10px; }
.lp-points i { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); font-size: 1rem; }

/* ── card ── */
.lp-side { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
.lp-card { margin-top: -44px; position: relative; z-index: 4; box-shadow: 0 18px 50px rgba(0,0,0,.18); border-radius: 20px; }
.lp-card-head { padding: 22px 22px 0; }
.lp-card-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--text); }
.lp-card-head p { margin: 3px 0 0; font-size: .86rem; color: var(--text-muted); }
.lp-card .form-body { padding-top: 16px; }

/* ── install button + https note ── */
.lp-install { margin-top: 12px; color: var(--primary-text); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.lp-install small { font-weight: 500; color: var(--text-muted); }
.lp-note { margin-top: 12px; font-size: .78rem; color: var(--text-muted); background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.lp-note i { color: #b54708; }

/* ── powered by (gbsTexWeb block) ── */
.lp-powered { margin-top: 20px; text-align: center; }
.lp-logo-chip { display: inline-block; background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.lp-logo-chip img { display: block; max-width: 120px; height: auto; }
[data-theme="dark"] .powered.lp-powered img { filter: none; }           /* logo sits on its own white chip */
.lp-logo-text { font-size: 1rem; font-weight: 800; color: #1a3a5c; }
.lp-address { font-size: .76rem; color: var(--label); margin-top: 7px; line-height: 1.7; }
.lp-address .sales { color: #c0392b; font-weight: 700; }
[data-theme="dark"] .lp-address .sales { color: #ff8a7a; }
.lp-credit { display: inline-block; margin-top: 6px; font-size: .68rem; color: var(--text-muted); text-decoration: none; }
.lp-credit:hover { text-decoration: underline; }

/* ── desktop: split screen ── */
@media (min-width: 900px) {
  body.lp { flex-direction: row; }
  .lp-hero { height: auto; min-height: 100vh; flex: 1 1 56%; }
  .lp-hero-shade {
    /* dark on the left behind the text, fading out so the produce shows on the right */
    background:
      linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.08) 100%),
      linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, transparent), color-mix(in srgb, var(--primary-dark) 25%, transparent));
  }
  .lp-hero .hdr-btn { left: 20px; right: auto; }
  .lp-hero-text { justify-content: center; padding: 48px 56px; max-width: 620px; }
  .lp-mark { width: 66px; height: 66px; font-size: 2rem; border-radius: 20px; }
  .lp-hero h1 { font-size: 2.6rem; }
  .lp-hero .lp-ml { font-size: 1.35rem; }
  .lp-sub { font-size: 1.02rem; }
  .lp-points { display: block; }
  .lp-side { flex: 0 0 460px; justify-content: center; padding: 32px; }
  .lp-card { margin-top: 0; }
}
@media (min-width: 900px) and (max-height: 640px) { .lp-points { display: none; } }