/* Customer "Create Account" (Name + DOB) — Figma BREWLINK WIREFRAME.
   Mobile-first; becomes a split card from 480px, so a shrunk desktop window
   keeps the desktop layout (and the cup). */

.cs-page {
  --cream: #e8f5ee;
  --maroon: #0f2e21;
  --maroon-edge: #1f5a41;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f4f4f4;
  font-family: 'Josefin Sans', sans-serif;
  color: #000;
}

.cs-card {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* ---------- hero (cream) ---------- */
.cs-hero {
  position: relative;
  background-color: var(--cream);
  background-image: url("../image/coffee-splash.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  padding: 14px 16px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.cs-logo {
  position: absolute;
  top: 14px;
  left: 16px;
  width: clamp(54px, 15vw, 72px);
  height: auto;
}

.cs-welcome {
  grid-column: 1 / -1;
  margin: 0;
  /* side padding = logo width, so the text is centred on the whole page */
  padding: 12px clamp(58px, 17vw, 76px) 0;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 5.2vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0f2a1f;
}

.cs-drink {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(62%, 240px);
  height: auto;
  margin-top: 4px;
  margin-bottom: -18px;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 1;
}

/* transparent cut-out cup (login + create account): no white box to hide, so
   draw it in its true colours instead of multiplying it into the cream */
.cs-drink--cutout { mix-blend-mode: normal; }

/* ---------- form panel (white, rounded top on mobile) ---------- */
.cs-form-panel {
  position: relative;
  z-index: 2;
  flex: 1;
  margin-top: -6px;
  padding: 26px clamp(20px, 8vw, 40px) 32px;
  background: #fff;
  border-radius: 40px 40px 0 0;
}

.cs-title {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(1.2rem, 5.4vw, 1.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cs-form {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.cs-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cs-input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.8rem;
  color: #222;
  background: #f3faf6;
  border: 1.5px solid #bcd8c9;
  border-radius: 10px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.cs-input::placeholder {
  color: #7d958a;
}

.cs-input:focus {
  border-color: #1f5a41;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,90,65, 0.15);
}

#cs-name {
  margin-bottom: 14px;
}

.cs-dob {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
}

.cs-dob .cs-input,
.cs-dob-year .cs-input {
  text-align: center;
}

.cs-dob > .cs-input + .cs-input,
.cs-dob > .cs-dob-year {
  margin-left: -1px;
}

.cs-dob-year {
  position: relative;
}

.cs-dob-year i {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  pointer-events: none;
}

.cs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--bl-grad-brown, var(--maroon));
  border: none;
  border-radius: var(--bl-radius-pill, 6px);
  box-shadow: var(--bl-shadow-btn, none);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.cs-btn:hover {
  background: var(--bl-grad-brown-hover, #1d3a2e);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--bl-shadow-btn-hover, none);
}

.cs-btn:active {
  transform: translateY(0) scale(0.98);
}

.cs-error {
  margin-bottom: 12px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #8b1a1a;
  background: #fdeaea;
  border: 1px solid #f0b9b9;
  border-radius: 4px;
}

/* ---------- tablet / desktop: split card ---------- */
@media (min-width: 480px) {
  .cs-page {
    align-items: center;
    padding: 32px 24px;
  }

  .cs-card {
    flex-direction: row;
    max-width: 980px;
    min-height: 0;
    height: min(440px, 80vh);
    min-height: 400px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  .cs-hero {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 0;
  }

  .cs-logo {
    position: static;
    width: 64px;
  }

  .cs-welcome {
    padding: 0;
    margin-top: 22px;
    font-size: 1.35rem;
  }

  .cs-drink {
    margin: auto auto 0;
    width: min(88%, 250px);
    align-self: center;
  }

  .cs-form-panel {
    flex: 1;
    margin: 0;
    padding: 0 40px;
    border-radius: 24px 0 0 24px;
    margin-left: -24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cs-title {
    margin-bottom: 26px;
  }
}

/* short landscape phones: keep the form reachable */
@media (max-width: 479px) and (max-height: 480px) {
  .cs-card {
    min-height: 0;
  }
  .cs-drink {
    width: min(40%, 150px);
  }
}

/* login page fields (label/input stack + password eye) */
.cs-field {
  margin-bottom: 14px;
}

.cs-pass {
  position: relative;
  margin-bottom: 4px;
}

.cs-pass .cs-input {
  padding-right: 36px;
}

.cs-eye {
  position: absolute;
  right: 4px;
  top: 0;
  height: 34px;
  width: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #000;
}

/* ---------- register page ---------- */
.cs-reg input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  height: 34px;
  margin: 0 0 12px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.8rem;
  color: #222;
  background: #f3faf6;
  border: 1.5px solid #bcd8c9;
  border-radius: 10px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.cs-reg input:not([type="checkbox"]):focus {
  border-color: #1f5a41;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,90,65, 0.15);
}

.cs-reg .cs-pass {
  margin-bottom: 0;
}

.cs-reg .cs-pass input {
  padding-right: 36px;
}

.cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cs-error ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.cs-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}

.cs-modal.hidden {
  display: none;
}

.cs-modal-box {
  width: min(460px, 100%);
  padding: 22px;
  background: #fff;
  border-radius: var(--bl-radius-lg, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.cs-modal-box h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.cs-terms-scroll {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #444;
  background: #fafafa;
  border: 1px solid #ddd;
}

.cs-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
}

.cs-terms-check input {
  margin-top: 3px;
}

.cs-terms-error {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #b30000;
}

/* Create Account: the agree box sits under Confirm Password */
.cs-terms-check--form {
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  color: #0f2a1f;
  line-height: 1.35;
}

.cs-terms-check--form input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #1f5a41;
  cursor: pointer;
}

.cs-terms-check--form label { cursor: pointer; }

.cs-terms-link {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #1f5a41;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.cs-terms-link:hover { color: #0f2e21; }

.cs-terms-check--form + .cs-terms-error { margin: 6px 0 0; }
.cs-terms-error[hidden] { display: none; }

.cs-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.cs-modal-actions .cs-btn {
  margin-top: 0;
}

.cs-btn--light {
  color: var(--bl-brown-dark, #222);
  background: #e3f1e9;
  border: 1.5px solid #bcd8c9;
  box-shadow: none;
}

.cs-btn--light:hover {
  color: var(--bl-brown-dark, #222);
  background: #d3e8dc;
  box-shadow: none;
  transform: translateY(-2px);
}

@media (min-width: 480px) {
  /* fixed height so the card does not resize while the intro plays,
     same as the login card - just taller to fit the extra fields */
  .cs-card--tall {
    height: min(620px, calc(100vh - 64px));
    min-height: 0;
  }

  .cs-card--tall .cs-form-panel {
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow-y: auto;
  }
}


/* ---------- login intro: cup + welcome first, then the form pops in ---------- */
@keyframes cs-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cs-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes cs-form-up {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cs-form-right {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cs-hero-shrink {
  from { flex-basis: 100%; }
  to   { flex-basis: 38%; }
}

.cs-card--intro .cs-welcome { animation: cs-fade-down 0.6s ease both; }
.cs-card--intro .cs-drink   { animation: cs-rise 0.7s ease 0.15s both; }
.cs-card--intro .cs-form-panel {
  animation: cs-form-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
}

@media (min-width: 480px) {
  .cs-card--intro .cs-hero {
    flex-shrink: 0;
    animation: cs-hero-shrink 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s both;
  }
  .cs-card--intro .cs-form-panel {
    animation: cs-form-right 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card--intro .cs-welcome,
  .cs-card--intro .cs-drink,
  .cs-card--intro .cs-hero,
  .cs-card--intro .cs-form-panel {
    animation: none;
  }
}


/* =====================================================================
   FIT TO SCREEN — login / create account never scroll the page.
   Everything is sized from the viewport height; the cup shrinks first,
   then is hidden on very short screens.
   ===================================================================== */
.cs-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.cs-input,
.cs-reg input:not([type="checkbox"]),
.cs-btn,
.cs-eye {
  height: clamp(28px, 4.6vh, 34px);
}

.cs-field,
.cs-reg input:not([type="checkbox"]),
#cs-name {
  margin-bottom: clamp(6px, 1.5vh, 13px);
}

.cs-btn { margin-top: clamp(6px, 1.3vh, 10px); }
.cs-title { margin-bottom: clamp(10px, 2.6vh, 24px); }
.cs-reg .cs-pass { margin-bottom: 0; }
.cs-reg .cs-pass input { margin-bottom: clamp(6px, 1.5vh, 13px); }
.cs-eye { line-height: 1; }

/* ---------- phones / narrow ---------- */
@media (max-width: 479px) {
  .cs-page { align-items: stretch; }

  .cs-card {
    height: 100%;
    min-height: 0;
  }

  .cs-hero {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 0;
    overflow: hidden;
  }

  .cs-welcome { width: 100%; flex: 0 0 auto; }

  .cs-drink {
    flex: 1 1 0;
    min-height: 0;
    width: min(62%, 240px);
    height: 0;
    object-fit: contain;
    margin: 6px 0 -14px;
  }

  .cs-form-panel {
    flex: 0 0 auto;
    padding: clamp(14px, 3vh, 26px) clamp(20px, 8vw, 40px) clamp(14px, 3vh, 28px);
  }
}

/* short phones: drop the cup, keep logo + heading */
@media (max-width: 479px) and (max-height: 640px) {
  .cs-drink { display: none; }
  .cs-hero { flex: 0 0 auto; padding-bottom: 16px; }
  .cs-welcome { font-size: 1rem; padding-top: 8px; }
}

/* very short: logo strip only */
@media (max-width: 479px) and (max-height: 520px) {
  .cs-welcome { display: none; }
  .cs-hero { min-height: 64px; }
}

/* ---------- tablet / desktop ---------- */
@media (min-width: 480px) {
  .cs-page {
    align-items: center;
    padding: clamp(8px, 3vh, 32px) 24px;
  }

  .cs-card,
  .cs-card--tall {
    height: 100%;
    min-height: 0;
    max-height: 460px;
  }

  .cs-card--tall { max-height: 640px; }

  .cs-form-panel {
    justify-content: center;
    overflow-y: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .cs-card--tall .cs-form-panel { justify-content: center; }

  .cs-welcome { margin-top: clamp(8px, 2.4vh, 22px); }
}

/* short desktop / landscape phone: shrink the cup, tighten */
@media (min-width: 480px) and (max-height: 560px) {
  .cs-drink { width: min(60%, 150px); }
  .cs-logo { width: 48px; }
  .cs-welcome { font-size: 1.05rem; }
  .cs-label { font-size: 0.66rem; margin-bottom: 2px; }
}

/* keep the corner logo fully inside the cream strip on short phones */
@media (max-width: 479px) and (max-height: 640px) {
  .cs-logo { width: 46px; top: 10px; }
  .cs-hero { min-height: 68px; }
}

/* landscape phones / very short screens: everything compact, no cream strip */
@media (max-height: 520px) {
  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-btn,
  .cs-eye { height: 26px; font-size: 0.78rem; }

  .cs-field,
  .cs-reg input:not([type="checkbox"]),
  .cs-reg .cs-pass input,
  #cs-name { margin-bottom: 5px; }

  .cs-label { font-size: 0.62rem; margin-bottom: 1px; }
  .cs-btn { margin-top: 5px; }
  .cs-title { font-size: 1rem; margin-bottom: 6px; }
}

@media (max-width: 479px) and (max-height: 520px) {
  .cs-hero { display: none; }
  .cs-form-panel {
    margin-top: 0;
    padding: 8px clamp(20px, 8vw, 40px);
    border-radius: 0;
    min-height: 100%;
  }
}

/* bigger cup: fill the cream area (image is pre-cropped, no white margin) */
.cs-drink {
  object-fit: contain;
  object-position: center bottom;
}

@media (max-width: 479px) {
  .cs-drink {
    width: 100%;
    max-width: 100%;
    margin: 4px 0 -14px;
  }
}

@media (min-width: 480px) {
  .cs-drink {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 -6px;
    align-self: center;
  }
}

@media (min-width: 480px) and (max-height: 560px) {
  .cs-drink { width: 100%; }
}

/* =====================================================================
   LOGIN (phones): cup + welcome are the full-screen background, the
   customer login form pops up over them as a bottom sheet.
   ===================================================================== */
@keyframes cs-sheet-up {
  from { transform: translateY(105%); }
  to   { transform: none; } /* no leftover transform, so the terms modal (position: fixed) stays viewport-relative */
}

@media (max-width: 479px) {
  .cs-card--sheet {
    position: relative;
    overflow: hidden;
  }

  .cs-card--sheet .cs-hero {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* leave room for the sheet, so the cup is never hidden behind it */
    padding: 16px 16px clamp(250px, 44dvh, 380px);
  }

  .cs-card--sheet .cs-welcome {
    padding-top: clamp(10px, 3vh, 28px);
    font-size: clamp(1.15rem, 5.6vw, 1.5rem);
  }

  .cs-card--sheet .cs-drink {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    width: auto;
    max-width: 84%;
    margin: clamp(14px, 3.5vh, 34px) 0 0;
    object-fit: contain;
    object-position: center;
  }

  .cs-card--sheet .cs-form-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -10px 30px rgba(15,46,33, 0.18);
  }

  .cs-card--intro.cs-card--sheet .cs-form-panel {
    animation: cs-sheet-up 0.75s cubic-bezier(0.2, 0.9, 0.25, 1) 1.2s both;
  }
}

@media (max-width: 479px) and (max-height: 640px) {
  .cs-card--sheet .cs-drink { display: block; }
}

@media (max-width: 479px) and (max-height: 560px) {
  .cs-card--sheet .cs-hero { padding-bottom: 260px; }
  .cs-card--sheet .cs-drink { display: none; }
}

@media (max-width: 479px) and (max-height: 520px) {
  .cs-card--sheet .cs-hero { display: none; }
  .cs-card--sheet .cs-form-panel {
    top: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card--intro.cs-card--sheet .cs-form-panel { animation: none; }
}

/* no bean background on the customer pages; login sheet sits higher */
.cs-hero { background-image: none; }

@media (max-width: 479px) {
  .cs-card--sheet { --sheet-h: clamp(330px, 56dvh, 540px); }

  .cs-card--sheet .cs-hero { padding-bottom: calc(var(--sheet-h) - 16px); }

  .cs-card--sheet .cs-form-panel {
    min-height: var(--sheet-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: clamp(24px, 6dvh, 56px);
  }
}

@media (max-width: 479px) and (max-height: 560px) {
  .cs-card--sheet .cs-hero { padding-bottom: 260px; }
}

@media (max-width: 479px) and (max-height: 520px) {
  .cs-card--sheet .cs-form-panel { min-height: 0; padding-bottom: 8px; }
}

/* the pages marked .cs-page--long (login, create account, Staff and Admin) scroll on phones:
   the sheet starts at login's height, over the picture, and scrolling slides it up over the
   picture, which stays where it is -- nothing in the sheet is cut off, and on a small phone
   the sheet never covers the picture's heading. */
@media (max-width: 479px) and (min-height: 561px) {
  /* this page may scroll (the fit-to-screen rules hold the others to one screen) */
  .cs-page--long,
  .cs-page--long .cs-card {
    height: auto;
    min-height: 100svh;
  }

  /* login's sheet height, in svh so it holds still while the address bar slides away */
  .cs-page--long .cs-card--sheet { --sheet-h: clamp(330px, 56svh, 540px); }

  /* the picture sticks to the screen; the sheet scrolls up over it */
  .cs-page--long .cs-card--sheet .cs-hero {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    flex: none;
    height: 100svh;
  }

  .cs-page--long .cs-card--sheet .cs-form-panel {
    position: relative;
    bottom: auto;
    margin-top: calc(-1 * var(--sheet-h));
    justify-content: flex-start;
  }
}

@media (max-width: 479px) and (min-height: 641px) {
  .cs-page--long .cs-card--sheet { --sheet-h: clamp(460px, 62svh, 600px); }
}

/* buttons in the original (classic) login style */
.cs-btn--brown {
  background: var(--bl-grad-brown, #1f5a41);
  border: 0;
  border-radius: var(--bl-radius-pill, 6px);
  font-weight: 700;
}

.cs-btn--brown:hover { background: var(--bl-grad-brown-hover, #0c2419); }

.cs-switch {
  margin: clamp(8px, 2vh, 16px) 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
}

.cs-switch small { display: block; font-size: inherit; }

.cs-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 7px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1f5a41;
  background: #fff;
  border: 2px solid #1f5a41;
  border-radius: var(--bl-radius-pill, 25px);
  transition: 0.2s;
}

.cs-pill:hover { background: #1f5a41; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,46,33, 0.22); }

.cs-link {
  font-weight: 700;
  color: #1f5a41;
  text-decoration: underline;
}

.cs-link:hover { color: #0c2419; }

/* small "back to home" link at the top of the login panel */
.cs-back {
  position: absolute;
  top: 12px;
  left: 22px;
  z-index: 2;
  display: block;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f2e21;
  background: rgba(15,46,33, 0.08);
  border-radius: 4px;
}

.cs-back:hover { color: #1f5a41; background: rgba(15,46,33, 0.16); }

.cs-card--sheet:not(.cs-card--tall) .cs-form-panel { padding-top: 40px; }

@media (max-width: 479px) {
  .cs-card--sheet .cs-back { top: 16px; left: 26px; }
}

/* clip (not just hide) so nothing can scroll the card programmatically */
.cs-page,
.cs-card,
.cs-card--sheet .cs-hero {
  overflow: hidden;
  overflow: clip;
}

@media (min-width: 480px) {
  .cs-form-panel { overflow-y: auto; overflow-x: clip; }
}

/* =====================================================================
   TABLETS (iPad mini → iPad Pro, portrait + landscape)
   Same split card as desktop, scaled up so it is not a tiny card on a big
   screen. Two steps: regular iPads, then 11"/12.9" Pros.
   ===================================================================== */
@media (min-width: 700px) and (min-height: 700px) {
  .cs-card,
  .cs-card--tall { max-width: 1000px; }
  .cs-card { max-height: 580px; }
  .cs-card--tall { max-height: 740px; }

  .cs-form { max-width: 400px; }

  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-btn,
  .cs-eye { height: 42px; font-size: 0.95rem; }

  .cs-eye { width: 40px; }
  .cs-btn { font-size: 1rem; margin-top: 12px; }
  .cs-field,
  .cs-reg input:not([type="checkbox"]),
  .cs-reg .cs-pass input,
  #cs-name { margin-bottom: 14px; }

  .cs-label { font-size: 0.8rem; margin-bottom: 5px; }
  .cs-title { font-size: 1.7rem; margin-bottom: 26px; }
  .cs-welcome { font-size: 1.7rem; }
  .cs-logo { width: 84px; }
  .cs-switch,
  .cs-switch small,
  .cs-pill { font-size: 0.95rem; }
  .cs-pill { padding: 8px 26px; }
  .cs-back { font-size: 0.85rem; top: 16px; left: 24px; }
  .cs-form-panel { padding-left: 48px; padding-right: 48px; }
  .cs-error { font-size: 0.9rem; }
}

@media (min-width: 1100px) and (min-height: 900px),
       (min-width: 900px) and (min-height: 1200px) {
  .cs-card,
  .cs-card--tall { max-width: 1180px; }
  .cs-card { max-height: 700px; }
  .cs-card--tall { max-height: 860px; }

  .cs-form { max-width: 460px; }

  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-btn,
  .cs-eye { height: 50px; font-size: 1.05rem; }

  .cs-btn { font-size: 1.1rem; margin-top: 14px; }
  .cs-field,
  .cs-reg input:not([type="checkbox"]),
  .cs-reg .cs-pass input,
  #cs-name { margin-bottom: 18px; }

  .cs-label { font-size: 0.9rem; }
  .cs-title { font-size: 2rem; margin-bottom: 32px; }
  .cs-welcome { font-size: 2rem; }
  .cs-logo { width: 100px; }
  .cs-switch,
  .cs-switch small,
  .cs-pill { font-size: 1.05rem; }
  .cs-back { font-size: 0.95rem; }
}

/* Josefin Sans runs small: nudge the small form text up a step */
.cs-input,
.cs-reg input:not([type="checkbox"]) { font-size: 0.92rem; }
.cs-label { font-size: 0.8rem; }
.cs-btn { font-size: 1rem; }
.cs-switch,
.cs-switch small,
.cs-pill { font-size: 0.9rem; }
.cs-back { font-size: 0.82rem; }
.cs-link { font-size: inherit; }

/* =====================================================================
   SPLASH (login + create account): a coffee splash bursts out from behind the
   cup. It is a transparent PNG drawn on the hero's ::before, underneath the
   cup and the text, so it needs no blend mode and sits straight on the cream.
   --splash-w / --splash-y tune its size and height for each layout.
   ===================================================================== */
.cs-card--splash .cs-hero {
  isolation: isolate;
  --splash-w: 150%;
  --splash-y: 90%;
}

.cs-card--splash .cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../image/coffee-splash-beans.png") no-repeat 50% var(--splash-y) / var(--splash-w) auto;
  pointer-events: none;
}

/* soft cream halo so a bean passing behind the heading never hurts legibility */
.cs-card--splash .cs-welcome {
  text-shadow: 0 0 8px rgba(232,245,238, 0.95), 0 0 16px rgba(232,245,238, 0.9);
}

/* phones: the hero runs behind the form sheet, so the splash only uses the
   part above it, where the cup is (the same on login and create account) */
@media (max-width: 479px) {
  .cs-card--splash .cs-hero { --splash-w: 135%; --splash-y: 100%; }
  /* the splash sits at the very bottom of the cup: its bowl lines up with the
     cup's base (the top edge of the sheet). The layer runs 64px further down,
     hidden behind the opaque sheet, so the splash rises out of the sheet edge */
  .cs-card--splash.cs-card--sheet .cs-hero::before { bottom: calc(var(--sheet-h) - 16px - 64px); }
}

/* tablet / desktop: the cup fills the whole cream column, so let it sit a bit
   narrower and the splash shows around it */
@media (min-width: 480px) {
  /* the whole splash at its natural size (not zoomed or cropped), lying on the
     bottom of the column where the cup stands. It is a box of its own with the
     image's proportions, dropped by 12% of its own height so the empty margin
     under the drips falls below the cup's base */
  .cs-card--splash .cs-hero::before {
    inset: auto 0 0 0;
    width: min(96%, 460px);
    aspect-ratio: 612 / 408;
    margin: 0 auto;
    background-position: center;
    background-size: 100% 100%;
    translate: 0 12%;
  }

  /* a narrower cup leaves room for the splash to show around it */
  .cs-card--splash .cs-drink { width: 60%; }
}

/* gone with the cup on short phones */
@media (max-width: 479px) and (max-height: 560px) {
  .cs-card--splash .cs-hero::before { display: none; }
}

/* intro: the cup drops in from the top of the screen and, the moment it lands,
   the splash bursts out around its base. The hero clips whatever is above it,
   so the cup simply falls in from the top edge. */
@keyframes cs-cup-drop {
  /* speeds up like something falling, lands at 62%, squashes, rebounds, settles */
  0%   { transform: translateY(var(--drop)) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  62%  { transform: translateY(0) scale(1, 1);           animation-timing-function: ease-out; }
  74%  { transform: translateY(0) scale(1.05, 0.92);     animation-timing-function: ease-in-out; }
  88%  { transform: translateY(-7px) scale(0.99, 1.01);  animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes cs-splash-burst {
  /* out of nothing at the base of the cup, overshoots, settles */
  0%   { opacity: 0; transform: scale(0.35);  animation-timing-function: ease-out; }
  35%  { opacity: 1; transform: scale(1.12);  animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); }
}

/* --drop is where the fall starts: just above the top edge of the screen. On
   phones the cup sits near the top, so a shorter fall keeps the drop on screen
   longer; the wider card needs the full screen height to start out of sight. */
.cs-card--intro.cs-card--splash .cs-drink {
  --drop: -60vh;
  transform-origin: 50% 100%;
  animation: cs-cup-drop 1.2s linear 0.1s both;
}

/* starts as the cup lands: 0.1s delay + 62% of 1.2s = about 0.84s */
.cs-card--intro.cs-card--splash .cs-hero::before {
  transform-origin: 50% 85%;
  animation: cs-splash-burst 0.7s linear 0.82s both;
}

@media (min-width: 480px) {
  .cs-card--intro.cs-card--splash .cs-drink { --drop: -100vh; }
  .cs-card--intro.cs-card--splash .cs-hero::before { transform-origin: 50% 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card--intro.cs-card--splash .cs-drink,
  .cs-card--intro.cs-card--splash .cs-hero::before { animation: none; }
}

/* login + create account: keep the heading clear of the "back to home" link.
   Auto margins centre the form but, unlike justify-content: center, still let
   it scroll from the top when the window is too short for it */
.cs-card--sheet.cs-card--splash .cs-form-panel { padding-top: 50px; }

@media (min-width: 480px) {
  .cs-card--splash .cs-form-panel { justify-content: flex-start; }
  .cs-card--splash .cs-title { margin-top: auto; }
  .cs-card--splash .cs-form { margin-bottom: auto; }
}

/* small windows (a shrunk desktop browser, landscape phones) use the split
   card too, so the cup stays visible; tighten it to fit */
@media (min-width: 480px) and (max-width: 699px) {
  .cs-page { padding-left: 12px; padding-right: 12px; }
  .cs-welcome { font-size: clamp(0.95rem, 2.9vw, 1.35rem); }
  .cs-form-panel { padding-left: 24px; padding-right: 24px; }
}

/* login + create account below 480px on short screens (a very small desktop
   window, small phones): the rules above hide the cup, or the whole cream
   area, there. Keep them, shrink the sheet so the cup has room, and let the
   form scroll inside the sheet instead */
@media (max-width: 479px) and (max-height: 560px) {
  .cs-card--sheet.cs-card--splash { --sheet-h: clamp(280px, calc(100dvh - 210px), 330px); }

  .cs-card--sheet.cs-card--splash .cs-hero {
    display: flex;
    padding-bottom: calc(var(--sheet-h) - 16px);
    /* size the splash from the height left above the sheet (image is 3:2),
       so it stays around the cup instead of climbing over the heading */
    --splash-w: min(135%, calc((100dvh - var(--sheet-h) + 10px) * 1.5));
  }

  .cs-card--sheet.cs-card--splash .cs-drink,
  .cs-card--sheet.cs-card--splash .cs-hero::before { display: block; }

  .cs-card--splash .cs-welcome { display: block; }

  .cs-card--sheet.cs-card--splash .cs-form-panel,
  .cs-card--tall.cs-card--sheet.cs-card--splash .cs-form-panel {
    top: auto;
    min-height: var(--sheet-h);
    max-height: var(--sheet-h);
    overflow-y: auto;
    padding-bottom: 16px;
    justify-content: flex-start;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -10px 30px rgba(15,46,33, 0.18);
  }

  .cs-card--sheet.cs-card--splash .cs-title { margin-top: auto; }
  .cs-card--sheet.cs-card--splash .cs-form { margin-bottom: auto; }
}

@media (max-width: 479px) and (max-height: 520px) {
  .cs-card--sheet.cs-card--splash .cs-welcome { font-size: 1.05rem; padding-top: 8px; }
}

/* =====================================================================
   BIGGER FORMS: roomier fields and a bigger main button on login, create
   account and the name page -- easier to read and to tap, most of all on
   phones. Very short screens (landscape phones, max-height: 520px) keep the
   compact sizes set above.
   ===================================================================== */
@media (min-height: 521px) {
  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-eye { height: 46px; }

  .cs-input,
  .cs-reg input:not([type="checkbox"]) { padding: 0 14px; font-size: 1rem; border-radius: 12px; }

  .cs-pass .cs-input,
  .cs-reg .cs-pass input { padding-right: 50px; }

  .cs-eye { width: 46px; right: 2px; font-size: 1.1rem; }

  .cs-btn { height: 50px; margin-top: 14px; font-size: 1.08rem; }
  .cs-label { margin-bottom: 6px; font-size: 0.84rem; }

  .cs-field,
  .cs-reg input:not([type="checkbox"]),
  .cs-reg .cs-pass input,
  #cs-name { margin-bottom: 14px; }

  .cs-pill { padding: 10px 28px; font-size: 0.98rem; }
  .cs-back { padding: 8px 14px; font-size: 0.88rem; border-radius: 999px; }
}

/* big screens were already roomy: a step bigger still */
@media (min-width: 1100px) and (min-height: 900px),
       (min-width: 900px) and (min-height: 1200px) {
  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-eye { height: 54px; }
  .cs-btn { height: 58px; font-size: 1.2rem; }
}

/* phones: the biggest fields, for thumbs */
@media (max-width: 479px) and (min-height: 521px) {
  .cs-input,
  .cs-reg input:not([type="checkbox"]),
  .cs-eye { height: 52px; }

  .cs-input,
  .cs-reg input:not([type="checkbox"]) { font-size: 1.05rem; }

  .cs-btn { height: 56px; margin-top: 18px; font-size: 1.2rem; }
  .cs-label { font-size: 0.9rem; }
  .cs-title { margin-bottom: 22px; font-size: 1.6rem; }
  .cs-form { max-width: none; }

  .cs-switch,
  .cs-switch small { font-size: 1rem; }

  .cs-link { display: inline-block; padding: 10px 4px; }     /* "LOG IN" under Create Account */
  .cs-pill { padding: 12px 32px; font-size: 1.02rem; }
  .cs-back { padding: 10px 16px; font-size: 0.92rem; }
  .cs-card--sheet .cs-back { top: 12px; }
  .cs-card--sheet.cs-card--splash .cs-form-panel { padding-top: 62px; }
  .cs-card--tall.cs-card--sheet.cs-card--splash .cs-form-panel { padding-bottom: 32px; }

  .cs-terms-check--form { font-size: 0.95rem; }
  .cs-terms-check--form input[type="checkbox"] { width: 22px; height: 22px; }
  .cs-terms-error { font-size: 0.88rem; }
}

/* ...and a taller bottom sheet to hold them, where the screen has room for it
   (create account matches it, in svh, further up) */
@media (max-width: 479px) and (min-height: 641px) {
  .cs-card--sheet { --sheet-h: clamp(460px, 62dvh, 600px); }
}
/* =====================================================================
   THE DARK, MINIMAL LOOK (like the home page): the hero is deep green with
   white type and the Café Hans emblem in white; the form keeps its white
   sheet (phones) or panel (bigger screens), on a deep green page.
   ===================================================================== */
.cs-page {
  --cream: var(--bl-night-2, #113526);
  background: var(--bl-night, #0b2419);
}

.cs-welcome { color: #fff; }
.cs-card--splash .cs-welcome { text-shadow: 0 2px 16px rgba(4, 18, 12, 0.65); }
.cs-logo { filter: brightness(0) invert(1); }

/* the cup stands on a soft mint glow */
.cs-hero { background-image: radial-gradient(60% 45% at 50% 62%, rgba(159, 227, 191, 0.22), rgba(159, 227, 191, 0) 70%); }

@media (min-width: 480px) {
  .cs-card { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
}