/* a bottom sheet on phones, a centred dialog from 768px (Rekaz storefront values) */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 1.5rem);       /* browsers without dvh */
  max-height: calc(100dvh - 1.5rem);      /* 24px of the page stays visible above the sheet */
  padding: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-block-end: 0;
  border-radius: 2rem 2rem 0 0;
  background: #fff;
  color: inherit;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  translate: 0 100%;
  transition: translate 500ms cubic-bezier(0.32, 0.72, 0, 1), overlay 500ms allow-discrete, display 500ms allow-discrete;
}
.sheet[open] { display: flex; translate: 0 0; }
@starting-style { .sheet[open] { translate: 0 100%; } }
.sheet::backdrop { background: rgb(0 0 0 / 0.2); }

.sheet__header { flex-shrink: 0; padding: 28px 20px 16px; touch-action: none; } /* the drag handle */
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;                          /* lets the body shrink and scroll instead of pushing the footer out */
  overflow-y: auto;
  overscroll-behavior: contain;           /* scrolling the sheet never scrolls the page behind it */
  padding: 0 20px 20px;
}
.sheet__footer {
  flex-shrink: 0;
  margin-block-start: auto;
  border-block-start: 1px solid #e5e5e5;
  padding: 16px 20px max(1rem, env(safe-area-inset-bottom));
}
.sheet__body:last-child { padding-block-end: max(1rem, env(safe-area-inset-bottom)); } /* no footer */
.sheet__close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; width: 32px; height: 32px; }

/* a sheet that fills the screen even when its content is short: a map, staff, a long list */
.sheet--full { height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); }
.sheet--tall { height: calc(100vh - 1rem); height: calc(100dvh - 1rem); }
/* sign-in: never taller than the small viewport, whatever the bars do */
.sheet--form { max-height: min(92dvh, 100svh); }

@media (min-width: 48rem) {
  .sheet {
    inset: 0;
    margin: auto;
    width: calc(100% - 3rem);
    max-width: 45rem;                     /* compact 30rem, wide 56rem */
    max-height: calc(100dvh - 3rem);
    border-block-end: 1px solid #e5e5e5;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgb(19 19 19 / 0.08), 0 4px 20px rgb(19 19 19 / 0.12);
    translate: none;
    opacity: 1;
    scale: 1;
    transition: opacity 150ms ease, scale 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
  }
  .sheet:not([open]) { opacity: 0; scale: 0.95; }
  @starting-style { .sheet[open] { opacity: 0; scale: 0.95; } }
  .sheet--compact { max-width: 30rem; }
  .sheet--wide { max-width: 56rem; }
  .sheet--full, .sheet--tall { height: min(48rem, calc(100dvh - 3rem)); }
  .sheet--form { max-height: calc(100dvh - 3rem); }
  .sheet__header { padding: 48px 48px 28px; }
  .sheet__body, .sheet__footer { padding-inline: 48px; }
}

html:has(.sheet[open]) { overflow: hidden; } /* the page behind does not scroll */
@media (prefers-reduced-motion: reduce) { .sheet { transition-duration: 0.01ms; } }

/* sign-in */
.sheet{color:var(--bronze-ink);background:var(--cream);border-color:var(--sand-2)}
.sheet::backdrop{background:rgb(43 33 24 / .45)}
.sheet__header h2{font-size:24px}
.sheet__header p{color:var(--bronze-soft);font-size:15px;margin-block-start:6px}
.sheet__close{border:0;background:var(--sand);border-radius:999px;font-size:22px;line-height:1}
.fld{display:grid;gap:8px;margin-block-end:16px}
.fld>span{font-size:14px;font-weight:500}
.fld input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--sand-2);border-radius:12px;background:var(--white);font:inherit;font-size:16px;color:inherit}
.fld input:focus{outline:2px solid var(--bronze-deep);outline-offset:1px}
.si-err{color:var(--bad);font-size:14px;margin-block:0 12px}
.si-row{display:flex;justify-content:space-between;gap:12px;margin-block-start:14px}
.si-link{background:none;border:0;padding:8px 0;color:var(--bronze-deep);text-decoration:underline;font-size:14px;min-height:44px}
.si-link[disabled]{color:var(--bronze-soft);text-decoration:none}
[data-si-phone] .btn,[data-si-code] .btn,[data-si-name] .btn{width:100%}
:root{--rk-phone-border:var(--sand-2);--rk-phone-ring:var(--bronze-deep);--rk-phone-radius:12px;--rk-phone-bg:var(--white)}

/* short screens: the same as the booking dialogs, one scroll with the footer pinned */
@media (max-height: 760px) {
  .sheet { overflow-y: auto; overscroll-behavior: contain; }
  .sheet > .sheet__body { flex: none; min-height: auto; overflow: visible; }
  .sheet__footer { position: sticky; bottom: 0; z-index: 1; background: inherit; }
  .sheet__header { padding-block: 28px 14px; }
}
@media (max-height: 760px) and (min-width: 48rem) {
  .sheet, .sheet--form { max-height: calc(100dvh - 24px); }
  .sheet__header { padding: 32px 40px 16px; }
  .sheet__body, .sheet__footer { padding-inline: 40px; }
}