/* Pakstoor :: pks-login-banner.css :: v2.0-000005 :: 2026-10-09 */
/* Temporary pre-launch banner on /login (js/pks-login-banner.js), shaped as a LIP: a wide tab that hangs down from the
   top centre of the page (owner 2026-10-09: "wide at the top, not end to end, in the middle, a lip that comes out the
   top"). Flat top flush with the screen edge, rounded bottom, curved shoulders, scrolls away with the page.
   The lip carries the eyebrow, title, perk and button in one slim row; the longer paragraph sits as a note above the
   Log In / Sign Up tabs (.pks-lb-note). The form side is pushed down by the lip's height (--pks-lip-h, set by the
   script); on desktop the lip is kept narrow and short enough to clear the logo and tagline on the left panel.
   Always dark: it hangs over the dark brand panel and the light form panel alike. */

#pksLoginBanner[hidden], .pks-lb-note[hidden] { display: none !important; }

#pksLoginBanner.pks-lip-host {
  position: absolute; top: 0; left: 50%; z-index: 60;
  width: min(900px, calc(100% - 540px));
  transform: translateX(-50%);
  pointer-events: none;            /* only the card itself takes clicks */
}

/* Form side starts below the lip (desktop: the right panel; phone / tablet: the stacked brand panel).
   The desktop login page is otherwise locked to one screen (body overflow hidden), which cut the form off at the top
   and the "How we protect you" list at the bottom. With the lip the page scrolls normally; overflow-x: clip (not
   hidden) creates no scroll container, so the brand panel stays sticky. */
/* Desktop with the lip (owner 2026-10-09: "big gap above"): the dark mode switch and EN / AF move up into the top
   right corner beside the lip, and the note + tabs start right under the lip. The header row
   is pinned to the top right of the form panel (out of the flow); Back is hidden while the lip shows (it sits where the
   lip hangs, and the Pakstoor logo on the left already goes home). */
@media (min-width: 981px) {
  html.pks-has-lip body.auth-page-login .auth-form-wrap { position: relative !important; }
  html.pks-has-lip body.auth-page-login .auth-form-header {
    position: absolute !important; z-index: 61; top: 20px; left: 0; right: 0; height: 44px;
    padding-left: inherit !important; padding-right: inherit !important; padding-top: 0 !important; padding-bottom: 0 !important;
    margin: 0 !important; box-sizing: border-box;
    display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 16px;
  }
  html.pks-has-lip body.auth-page-login .auth-form-header .auth-back { display: none !important; }
  html.pks-has-lip body.auth-page-login .auth-form-header > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  html.pks-has-lip body.auth-page-login .auth-body-grid { margin-top: 0 !important; padding-top: 0 !important; }
}
/* Short desktop screens (e.g. 1080p at 125% scaling): keep Log In, passkey and Google above the bottom edge. The Log In
   tab drops the long paragraph (returning members do not need it); the Sign Up tab keeps the early-access note. */
@media (min-width: 981px) and (max-height: 860px) {
  .pks-lb-note:not(.pks-lb-note--signup) { display: none !important; }

}
/* Owner 2026-10-09: on desktop the login page stays ONE screen with no scrolling, as before the lip (the form starts
   below the lip; anything below the screen edge is cut, as it always was). Phones and tablets stack and scroll. */
@media (max-width: 980px) {
  html.pks-has-lip body.auth-page-login {
    height: auto !important; max-height: none !important; min-height: 100dvh;
    overflow-x: clip !important; overflow-y: visible !important;
  }
  html.pks-has-lip body.auth-page-login .auth-wrap { height: auto !important; max-height: none !important; overflow: visible !important; }
}
html.pks-has-lip body.auth-page-login .auth-form-wrap {
  justify-content: flex-start !important;
  padding-top: calc(44px + var(--pks-lip-h, 0px)) !important;
}

.pks-lb {
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 290px) auto;
  gap: 10px 20px;
  align-items: center;
  padding: 13px 22px 15px;
  border: 1px solid rgba(217, 166, 37, .42);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background:
    radial-gradient(90% 160% at 50% 0%, rgba(217, 166, 37, .16) 0%, rgba(217, 166, 37, 0) 60%),
    linear-gradient(180deg, #11151A 0%, #0C0F13 100%);
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .85), 0 2px 0 rgba(217, 166, 37, .08);
  color: #EDEFF2;
  animation: pks-lip-drop 640ms cubic-bezier(.16, 1, .3, 1) both;
}
/* Curved shoulders where the lip leaves the top edge. */
.pks-lb::before, .pks-lb::after {
  content: '';
  position: absolute; top: 0; width: 22px; height: 22px;
  pointer-events: none;
}
.pks-lb::before { left: -22px; background: radial-gradient(circle at 0 100%, transparent 21px, #11151A 22px); }
.pks-lb::after  { right: -22px; background: radial-gradient(circle at 100% 100%, transparent 21px, #11151A 22px); }
/* gold seam along the bottom edge, swept once */
.pks-lb-seam {
  position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #D9A625 25%, #F2C41A 50%, #D9A625 75%, transparent);
  background-size: 200% 100%;
  animation: pks-lb-sweep 2.4s ease-out 500ms both;
  pointer-events: none;
}

.pks-lb-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pks-lb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(217, 166, 37, .4);
  background: rgba(217, 166, 37, .1);
  color: #EAC04C;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.pks-lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #F2C41A;
  animation: pks-lb-pulse 2s ease-out infinite;
}
.pks-lb-title {
  margin: 0;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 600; line-height: 1.15; letter-spacing: .01em;
  color: #F4F6F8;
}

.pks-lb-perk {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border-radius: 11px;
  border: 1px dashed rgba(217, 166, 37, .45);
  background: rgba(217, 166, 37, .06);
}
.pks-lb-perk-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(145deg, #F2C41A, #B88518);
  color: #111418;
}
.pks-lb-perk-icon svg { width: 14px; height: 14px; }
.pks-lb-perk-text { font-size: 12.5px; line-height: 1.4; font-weight: 600; color: #EDEFF2; }

.pks-lb-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 11px; cursor: pointer; white-space: nowrap;
  background: #D9A625; color: #111418;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  transition: background-color .18s ease, transform .18s ease;
  box-shadow: 0 10px 24px -12px rgba(217, 166, 37, .8);
}
.pks-lb-cta svg { width: 16px; height: 16px; transition: transform .18s ease; }
.pks-lb-cta:hover { background: #F0C64D; }
.pks-lb-cta:hover svg { transform: translateX(3px); }
.pks-lb-cta:active { transform: translateY(1px); }
.pks-lb-cta:focus-visible { outline: 2px solid #F2C41A; outline-offset: 3px; }

/* The longer paragraph, above the Log In / Sign Up tabs. */
.pks-lb-note {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-left: 3px solid #D9A625;
  border-radius: 0 10px 10px 0;
  background: rgba(217, 166, 37, .07);
  font-size: 13.5px; line-height: 1.55;
  color: #3A4452;
}
.pks-lb-note p { margin: 0; }
.pks-lb-note p + p { margin-top: 6px; }
[data-theme="dark"] .pks-lb-note { color: #B9C1CC; background: rgba(217, 166, 37, .08); }

/* Sign Up tab (after "Secure my spot"): the early-access note gets a heading and a little more presence. */
.pks-lb-note-title { display: block; margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: #7A5711; }
.pks-lb-note--signup { border-left-width: 4px; background: rgba(217, 166, 37, .11); animation: pks-note-in 420ms cubic-bezier(.16, 1, .3, 1) both; }
[data-theme="dark"] .pks-lb-note-title { color: #EAC04C; }
@keyframes pks-note-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@keyframes pks-lip-drop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes pks-lb-sweep { from { background-position: 200% 0; opacity: 0; } 20% { opacity: 1; } to { background-position: 0 0; opacity: 1; } }
@keyframes pks-lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 196, 26, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(242, 196, 26, 0); } }

/* Narrower desktops: perk and button share the second row. */
@media (max-width: 1240px) and (min-width: 981px) {
  #pksLoginBanner.pks-lip-host { width: min(720px, calc(100% - 520px)); }
  .pks-lb { grid-template-columns: minmax(0, 1fr) auto; }
  .pks-lb-main { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
}
/* Tablet and phone: the panels stack, so the lip sits over the brand panel and pushes it down. */
@media (max-width: 980px) {
  #pksLoginBanner.pks-lip-host { width: min(640px, calc(100% - 48px)); }
  .pks-lb { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 18px 14px; }
  .pks-lb-main { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  html.pks-has-lip body.auth-page-login .auth-brand { padding-top: calc(24px + var(--pks-lip-h, 0px)) !important; }
  html.pks-has-lip body.auth-page-login .auth-form-wrap { padding-top: 28px !important; }
}
@media (max-width: 600px) {
  #pksLoginBanner.pks-lip-host { width: calc(100% - 28px); }
  .pks-lb { grid-template-columns: 1fr; padding: 12px 14px 14px; border-radius: 0 0 18px 18px; gap: 10px; }
  .pks-lb::before { left: -16px; width: 16px; height: 16px; background: radial-gradient(circle at 0 100%, transparent 15px, #11151A 16px); }
  .pks-lb::after { right: -16px; width: 16px; height: 16px; background: radial-gradient(circle at 100% 100%, transparent 15px, #11151A 16px); }
  .pks-lb-title { font-size: 18px; }
  .pks-lb-cta { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pks-lb, .pks-lb-seam, .pks-lb-dot, .pks-lb-note--signup { animation: none !important; }
}