/* =========================================================================
   Kleidungsmarke lockscreen — recreation in plain HTML/CSS/JS.
   Layout values are ported from the original stylesheet.
   Every image except the wallpaper is drawn in CSS.
   ========================================================================= */

:root{
  --bar-h: 72px;
  --chrome-text: #fff;
  --text-color: #fff;
  --red-start: #ffaebd;
  --red-end:   #d00000;

  /* Phone-frame size. The lockscreen measures itself into --vw / --vh (app.js),
     so every viewport unit from the original keeps working inside the frame. */
  --phone-w: 390px;
  --phone-h: 844px;

  --vw: 3.9px;   /* 1% of the screen width  — app.js overwrites this */
  --vh: 8.44px;  /* 1% of the screen height — app.js overwrites this */
}

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

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #111;
  font-weight: 100;
  background: #17181c;
  background-image:
    radial-gradient(120% 90% at 50% 0%, #2b2d34 0%, #17181c 55%, #0c0d10 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================ Phone frame ============================== */

.device{
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: calc(100dvh - 40px);
  aspect-ratio: 390 / 844;
  padding: 12px;
  border-radius: 54px;
  background: linear-gradient(160deg, #6d7078, #2a2c31 22%, #17181b 50%, #35373d 82%, #0f1013);
  box-shadow:
    0 2px 0 rgba(255,255,255,.28) inset,
    0 -2px 0 rgba(0,0,0,.6) inset,
    0 40px 80px rgba(0,0,0,.65),
    0 8px 24px rgba(0,0,0,.5);
}

.screen{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  container-type: size;
}

/* On a real phone the frame goes away and the screen fills the viewport. */
@media (max-width: 520px), (max-height: 720px){
  body{ background: #000; }
  .device{
    width: 100dvw; height: 100dvh;
    max-height: none; aspect-ratio: auto;
    padding: 0; border-radius: 0; box-shadow: none; background: #000;
  }
  .screen{ border-radius: 0; }
}

/* ==================== Screen 2 — shop chrome ========================== */
/* Placeholder textures: leather bars and a wood content area, drawn in CSS. */

.content{
  position: absolute;
  inset: 0;
  padding-top:    calc(var(--bar-h) + 24px);
  padding-bottom: calc(var(--bar-h) + 24px);
  overflow-y: auto;
  background-color: #4a2c17;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 2px, rgba(255,255,255,.05) 2px 4px, transparent 4px 150px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.07) 0px, rgba(255,255,255,.03) 55px,
      rgba(0,0,0,.05) 110px, rgba(255,255,255,.02) 175px, rgba(0,0,0,.07) 230px),
    linear-gradient(180deg, #5d3a1f, #3f2712);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Grouped table view, the old iOS settings look. */

.signup{
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 16px 28px;
}

.signup__group{
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 7px rgba(0,0,0,.55);
  overflow: hidden;
}

.signup__row{
  display: flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border-top: 1px solid #cfcfcf;
  background: linear-gradient(#ffffff, #f3f3f3);
  transition: background .15s ease;
}
.signup__row:first-child{ border-top: none; }
.signup__row:focus-within{ background: linear-gradient(#ffffff, #eaf1ff); }
.signup__row.is-invalid{ background: linear-gradient(#fff6f6, #ffe4e4); }

.signup__label{
  flex: 0 0 74px;
  font-size: .95rem; font-weight: 700;
  color: #33404f;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

/* The +420 prefix is text, not an input. It cannot be edited or deleted. */
.signup__prefix{
  flex: 0 0 auto;
  font-size: .95rem; font-weight: 600;
  color: #7d7d7d;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.signup__input{
  flex: 1 1 auto; min-width: 0;
  padding: 12px 0;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: .95rem; font-weight: 400;
  color: #16181c;
}
.signup__input--phone{ letter-spacing: .4px; }

/* Consent. Never pre-ticked: GDPR needs a deliberate act. */
.signup__consent{
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 2px 0;
  font-size: .82rem; line-height: 1.45;
  color: rgba(255,255,255,.9);
  text-shadow: 0 -1px 0 rgba(0,0,0,.7);
  cursor: pointer;
}
.signup__check{
  flex: 0 0 auto;
  width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: #3f7fd6;
  cursor: pointer;
}
.signup__consent a{ color: #bcd6ff; }
.signup__consent.is-invalid{ color: #ffdcdc; }
.signup__consent.is-invalid .signup__check{ outline: 2px solid #ff8f8f; outline-offset: 2px; }

.signup__error{
  margin: 10px 4px 0;
  font-size: .82rem; font-weight: 700;
  color: #ffdcdc;
  text-shadow: 0 -1px 0 rgba(0,0,0,.75);
}

.signup__submit{
  display: block; width: 100%;
  margin-top: 16px; height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.55);
  font: inherit; font-size: 1rem; font-weight: 800;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.45);
  background-color: #3f7fd6;
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.06) 48%,
    rgba(0,0,0,.10)      52%, rgba(0,0,0,.20)     100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,0,0,.5);
  cursor: pointer;
  transition: background-color .15s ease;
}
.signup__submit:active{
  background-color: #2f63ab;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  transform: translateY(1px);
}
.signup__submit.is-done{ background-color: #4a9e46; }

/* --- leather bars --- */

.chrome-topbar,
.chrome-bottombar{
  position: absolute;
  left: 0; right: 0;
  background-color: #232326;
  background-image:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.30)  0 1px, transparent 1px),
    repeating-linear-gradient(38deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-38deg, rgba(0,0,0,.16) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #3c3c40, #1a1a1d);
  background-size: 5px 5px, 7px 7px, auto, auto, auto;
  box-shadow: 0 10px 15px rgba(0,0,0,.28);
}

.chrome-topbar{
  top: 0; z-index: 20;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.chrome-topbar::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 6px;
  background:
    radial-gradient(circle at 10% 0, rgba(0,0,0,.28), transparent 60%) 0/50% 100% no-repeat,
    radial-gradient(circle at 90% 0, rgba(0,0,0,.28), transparent 60%) 100%/50% 100% no-repeat,
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events: none;
}

.chrome-topbar__inner{
  max-width: 1400px; width: 100%; margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

/* Holds the right column open, so the centred title does not drift. */
.chrome-spacer{ display: block; width: 106px; height: 1px; }

.chrome-title{
  color: var(--chrome-text);
  font-weight: 900; letter-spacing: .5px;
  font-size: clamp(1.1rem, calc(var(--vw) * 2.6), 1.6rem);
  text-align: center;
  text-shadow: 0 -2px 1px rgba(0,0,0,.55), 0 2px 1px rgba(255,255,255,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; width: auto; margin: 0 auto; min-width: 0; justify-self: center;
}

/* Kept for the metal background only. It holds no buttons any more. */
.chrome-bottombar{
  bottom: 0; z-index: 3;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  display: flex; flex-direction: row; gap: 5px;
  align-items: center; justify-content: center;
  padding: 14px 12px 12px;
}
.chrome-bottombar::before{
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 6px;
  background:
    radial-gradient(circle at 10% 100%, rgba(0,0,0,.28), transparent 60%) left/50% 100% no-repeat,
    radial-gradient(circle at 90% 100%, rgba(0,0,0,.28), transparent 60%) right/50% 100% no-repeat,
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events: none;
}

/* --- chrome buttons (the original uses PNG skins; these are CSS) --- */

.chrome-btn,
.chrome-tab{
  position: relative;
  height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 16px;
  color: var(--chrome-text);
  font-weight: 900; font-family: inherit; font-size: 1rem;
  line-height: 1; letter-spacing: .35px;
  text-decoration: none; border: none; cursor: pointer;
  background-color: transparent;
  text-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5);
}
.chrome-btn span,
.chrome-tab{ text-shadow: 0 -1px 1px rgba(0,0,0,.45), 0 1px 1px rgba(255,255,255,.35); }

/* shared glossy metal skin */
.chrome-btn.arrow,
.chrome-btn.box,
.chrome-tab.box{
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.08) 48%,
    rgba(0,0,0,.20)       52%,
    rgba(0,0,0,.34)      100%);
  background-color: #4d4f56;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.55);
}
.chrome-btn.arrow:active,
.chrome-btn.box:active,
.chrome-tab.box:active{
  background-color: #3a3c42;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(0,0,0,.5);
  transform: translateY(1px);
}

.chrome-btn.arrow{
  justify-self: start; margin-left: 10px; min-width: 96px;
  border-radius: 8px 8px 8px 8px;
  /* left-pointing back button */
  clip-path: polygon(0% 50%, 13px 0%, 100% 0%, 100% 100%, 13px 100%);
  padding-left: 22px;
}
.chrome-btn.box{
  justify-self: end; margin-right: 10px; min-width: 96px;
  border-radius: 8px;
}
.chrome-tab.box{
  padding: 0 18px; height: 48px;
  width: 100%; max-width: 150px;
  font-size: .8rem; border-radius: 8px;
}
.chrome-tab.box.is-active{
  background-color: #6b6e78;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 0 10px rgba(255,255,255,.18),
    0 2px 4px rgba(0,0,0,.55);
}

.cart-badge{
  position: absolute; right: -4px; top: 5px;
  transform: translateY(-50%);
  min-width: 28px; height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--text-color);
  font-weight: 800; font-size: .9rem;
  background: linear-gradient(to bottom, var(--red-start), var(--red-end));
  border: 2px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 6px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .2s;
}

/* While the lockscreen is up, the shop below must not scroll. */
.screen.is-locked .content{ overflow: hidden; }

/* ==================== Screen 1 — the lockscreen ======================= */

.km-lock{
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .35s ease;
}

/* Entry and exit both scale to 3x. app.js drives which one is on. */
.km-lock.is-locking,
.km-lock.is-unlocking{ transform: scale(3); }

.km-lock.is-locking .km-lock-bg,
.km-lock.is-locking .km-lock-notif,
.km-lock.is-unlocking .km-lock-bg,
.km-lock.is-unlocking .km-lock-notif{ opacity: 0; }

.km-lock[hidden]{ display: none; }

/* --- wallpaper --- */

.km-lock-bg{
  position: absolute; inset: 0;
  background-color: #000;
  background-image: var(--km-lock-img, url("wallpaper.jpeg"));
  background-position: 50%;
  /* Stretched to fill, not cropped. The squish is deliberate. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: saturate(1.1) contrast(1.05);
  transition: opacity .35s ease;
}

/* the dock strip along the bottom */
.km-lock-bg::after{
  content: "";
  position: absolute; inset: 0;
  height: 134px;
  top: calc(100% - 134px);
  background: linear-gradient(180deg, rgba(100,100,100,1), rgba(25,25,25,1) 60%);
  box-shadow: inset 0 6px 6px rgba(255,255,255,.2);
  pointer-events: none;
}

/* --- header band: squeezed brand text + live date --- */

.km-lock-clock{
  position: absolute; top: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-top:    calc(var(--vh) * 7);
  padding-bottom: calc(var(--vh) * 3);
  width: 110%;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,0,0,.7) 60%);
  text-shadow: 0 -2px 1px rgba(0,0,0,.6), 0 2px 1px rgba(255,255,255,.35);
  box-shadow: inset 0 -1px 3px #fff;
  user-select: none; -webkit-user-select: none;
  z-index: 1;
}

.km-lock-time{
  font-size: clamp(40px, calc(var(--vw) * 15.2), 90px);
  transform: scaleX(.5) scaleY(1.2) translateY(-10%);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.km-lock-date{
  margin-top: .2em;
  font-size: clamp(16px, calc(var(--vw) * 4.6), 28px);
  opacity: .95;
}

/* --- the notification --- */

.km-lock-notif{
  position: absolute;
  /* Just above the slider, clear of the 134px dock strip. */
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  width: calc(var(--vw) * 90);
  max-width: min(800px, calc(var(--vw) * 90));
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  z-index: 0;
  transition: opacity .35s ease;
}
.km-lock-notif-left{ display: grid; place-items: center; }

/* app icon: green chat tile, drawn in CSS */
.km-lock-imsg-dot{
  width: 52px; height: 52px;
  border-radius: 12px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 4C6.9 4 3 7.2 3 11.2c0 2.2 1.2 4.2 3.1 5.5-.1 1.1-.6 2.2-1.4 3.1 1.6-.2 3-.8 4.1-1.6 1 .3 2.1.4 3.2.4 5.1 0 9-3.2 9-7.4S17.1 4 12 4z"/></svg>')
      50% / 68% no-repeat,
    linear-gradient(#9aff7a, #28c600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(0,0,0,.15);
}

.km-lock-notif-body{ color: #111; font-weight: 100; }

/* red unread badge, pinned to the corner of the notification card */
.km-lock-notif-body::before{
  content: "1";
  position: absolute;
  left: -10px; top: -10px;
  padding: 2px 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  font-weight: 600; color: #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,.5);
  background: linear-gradient(to bottom, var(--red-start), var(--red-end));
}

.km-lock-notif-title{ font-weight: 400; margin-bottom: 2px; }
.km-lock-notif-text{ font-weight: 600; }

/* --- slide to unlock --- */

.km-lock-slider{
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(var(--vw) * 90));
  height: 70px;
  border-radius: 14px;
  background: linear-gradient(#141414, #0c0c0c);
  box-shadow:
    inset 0 -2px 6px rgba(255,255,255,.65),
    inset 0  6px 22px rgba(0,0,0,.55);
  overflow: hidden;
  z-index: 2;
}

/* The label is transparent; only the moving highlight makes it readable. */
.km-lock-slide-text{
  position: absolute; inset: 0; left: 10%;
  display: grid; place-items: center;
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: .5px;
  text-transform: lowercase;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
  animation: km-shimmer 2.8s linear infinite;
}

@keyframes km-shimmer{
  0%  { background-position: calc(var(--vw) * -100) 0; }
  100%{ background-position: calc(var(--vw) *  100) 0; }
}

.km-lock-knob{
  --x: 0px;
  position: absolute;
  left: 8px; top: 8px;
  width: 70px; height: 53px;
  border-radius: 10px;
  border: none;
  /* silver tile with the classic iOS grey block arrow */
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 30"><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23aeaeae"/><stop offset=".5" stop-color="%238c8c8c"/><stop offset="1" stop-color="%236d6d6d"/></linearGradient></defs><path d="M5 11 H22 V3 L39 15 L22 27 V19 H5 Z" fill="%23ffffff" opacity=".9" transform="translate(0 1.3)"/><path d="M5 11 H22 V3 L39 15 L22 27 V19 H5 Z" fill="url(%23a)"/></svg>')
      50% / 34px auto no-repeat,
    linear-gradient(180deg, #fdfdfd 0%, #ececec 45%, #d2d2d2 55%, #c2c2c2 88%, #dcdcdc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,0,0,.38),
    0 4px 12px rgba(0,0,0,.35);
  transform: translateX(var(--x));
  transform-origin: -10%;
  display: grid; place-items: center;
  cursor: grab;
  touch-action: none;
}
.km-lock-knob:active{ cursor: grabbing; }
.km-lock-knob:focus-visible{ outline: 2px solid #6ab7ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .km-lock,
  .km-lock-bg,
  .km-lock-notif{ transition-duration: .01ms; }
  .km-lock-slide-text{ animation: none; color: #bbb; -webkit-text-fill-color: #bbb; }
}