/* Customer registration: details step, then the identity document step.
   Scoped to the register form so the sign-in and email steps are untouched. */

#customer-register-form { --reg2-blue: #006ce4; --reg2-blue-dark: #0057b8; --reg2-line: #dedede; --reg2-muted: #52677c; }

/* Without the script both panels stay on the page and the form still posts. */
#customer-register-form.is-stepped .reg2-panel { display: none; }
#customer-register-form.is-stepped .reg2-panel.is-current { display: grid; gap: 8px; animation: reg2-in .24s ease both; }
#customer-register-form:not(.is-stepped) .reg2-panel { display: grid; gap: 8px; }
#customer-register-form:not(.is-stepped) .reg2-panel + .reg2-panel { margin-top: 18px; }

@keyframes reg2-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- steps --- */

.reg2-steps { margin: 4px 0 16px; }
.reg2-track { height: 4px; border-radius: 999px; background: #e8eef6; overflow: hidden; }
.reg2-track-fill { display: block; width: 50%; height: 100%; border-radius: 999px; background: var(--reg2-blue); transition: width .3s ease; }
.reg2-track-fill-step-1 { width: 50%; }
.reg2-track-fill-step-2 { width: 100%; }
.reg2-labels { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
/* Three labels across a narrow card: the ends anchor to their edges and the
   middle one centres, so the row reads as a track rather than a list. */
.reg2-label { text-align: center; }
.reg2-label:first-child { text-align: left; }
.reg2-label:last-child { text-align: right; }
.reg2-label { color: #8b9bad; font-size: clamp(.62rem, 2.6vw, .74rem); font-weight: 700; transition: color .2s ease; }
.reg2-label.is-active { color: var(--reg2-blue-dark); }
.reg2-label.is-done { color: #1d7a4c; }
.reg2-label.is-done::before { content: "✓ "; }

/* --------------------------------------------------------------- fields --- */

.reg2-select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2352677c'%3E%3Cpath d='M4.5 6.2 8 9.7l3.5-3.5 1 1L8 11.7 3.5 7.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px; }

.reg2-note { margin: 2px 0 4px; color: var(--reg2-muted); font-size: .76rem; line-height: 1.5; }

/* "Optional" sits in the label rather than the placeholder, which disappears
   the moment somebody types and is invisible to a screen reader reading the
   field back. */
.reg2-optional { margin-left: 6px; padding: 1px 6px; border-radius: 999px; color: #52677c; background: #eef2f7; font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }

/* Phone: the dialling code is shown, not typed, so it always matches the
   country and the guest only enters their own number. */
.reg2-phone { display: flex; align-items: stretch; }
.reg2-dial {
  display: none;
  min-width: 54px;
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid #868686;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: #1a1a1a;
  background: #eef2f7;
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
}
#customer-register-form.has-dial .reg2-dial { display: flex; }
#customer-register-form.has-dial .reg2-phone-input { border-radius: 0 4px 4px 0; }
.reg2-phone-input { flex: 1; min-width: 0; }
.reg2-identity { display: grid; gap: 8px; }
.reg2-identity.is-hidden { display: none; }
.reg2-upload-heading { margin-top: 6px; color: #1a1a1a; font-size: .82rem; font-weight: 600; }

/* -------------------------------------------------------------- uploads --- */

.reg2-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg2-upload { position: relative; }
.reg2-upload.is-wide { grid-column: 1 / -1; }

/* The real input stays focusable for the keyboard but the label is the target. */
.reg2-file { position: absolute; width: 1px; height: 1px; opacity: 0; }

.reg2-drop {
  position: relative;
  min-height: 116px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  border: 1.5px dashed #c2ccd8;
  border-radius: 6px;
  background: #f7fafd;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.reg2-drop::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  background: #9fb0c2;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 7.5 7.5 8.9 8.9 11 6.8V16h2V6.8l2.1 2.1 1.4-1.4zM5 18v-4H3v6h18v-6h-2v4z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background .18s ease;
}
.reg2-drop:hover, .reg2-upload.is-over .reg2-drop { border-color: var(--reg2-blue); background: #eef6ff; }
.reg2-drop:hover::before { background: var(--reg2-blue); }
.reg2-file:focus-visible + .reg2-drop { outline: 2px solid var(--reg2-blue); outline-offset: 2px; }

.reg2-drop-title { color: #1a1a1a; font-size: .8rem; font-weight: 650; }
.reg2-drop-note { color: var(--reg2-muted); font-size: .72rem; }

.reg2-thumb { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Once a picture is in place it fills the tile and the prompt sits on top. */
.reg2-upload.has-image .reg2-drop { border-style: solid; border-color: var(--reg2-blue); background: #0b1d2f; }
.reg2-upload.has-image .reg2-thumb { display: block; }
.reg2-upload.has-image .reg2-drop::before { display: none; }
.reg2-upload.has-image .reg2-drop-title,
.reg2-upload.has-image .reg2-drop-note { position: relative; padding: 1px 7px; border-radius: 3px; color: #fff; background: rgb(11 29 47 / 72%); }
.reg2-upload.has-image .reg2-drop-title { font-size: .74rem; }
.reg2-upload.has-image .reg2-drop-note { font-size: .68rem; }

.reg2-upload.is-busy .reg2-drop { opacity: .6; cursor: progress; }

.reg2-remove {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  color: #8b2828;
  background: rgb(255 255 255 / 92%);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}
.reg2-upload.has-image .reg2-remove { display: block; }
.reg2-remove:hover { background: #fff; }

.reg2-privacy { margin: 8px 0 0; color: var(--reg2-muted); font-size: .72rem; line-height: 1.5; }

/* -------------------------------------------------------------- actions --- */

.reg2-actions { margin-top: 14px; display: flex; align-items: center; gap: 9px; }
.reg2-actions .customer-auth-submit { flex: 1; margin-top: 0; }
.reg2-back {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--reg2-line);
  border-radius: 4px;
  color: #1a1a1a;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.reg2-back:hover { border-color: #9fb0c2; background: #f5f8fc; }
.reg2-actions button[hidden] { display: none; }
.customer-auth-submit:disabled { background: #7ba9de; cursor: progress; }

@media (max-width: 480px) {
  /* On a phone the numbers carry the progress and the words only crowd it, so
     the step being filled in keeps its name and the rest keep their number. */
  .reg2-label { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
  .reg2-label:not(.is-active) { font-size: 0; }
  .reg2-label:not(.is-active)::after { content: attr(data-step-label); font-size: .7rem; }
  .reg2-label.is-done::before { content: "✓"; font-size: .7rem; }
  /* Back stays a thumb-sized target without eating the row Continue needs. */
  .reg2-back { min-width: 74px; padding-inline: 12px; }
}

@media (max-width: 420px) {
  .reg2-uploads { grid-template-columns: 1fr; }
  /* A document photo is the one thing worth the height on a small screen. */
  .reg2-drop { min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  #customer-register-form *,
  #customer-register-form *::before { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}