/* ------------------------------------------------------------------ */
/* Surface system: the /checkout look, shared by the auth and thank-you */
/* screens (login, forgot/reset/set password, access status, gracias).  */
/* Measured on qoves.com/welcome/checkout (1440px): 768x428 glass card,  */
/* 32px padding, 16px radius, two columns around a 1px rule, 40px        */
/* controls, 8px input radius. Below 768px the card is a fixed 343px     */
/* single column with no rule and 16px inputs (no iOS zoom on focus).    */
/* Background: a 48x56 WebP (inlined, ~1 KB) upscaled 3x and turning on  */
/* an 18s loop over #5D767E. No blur filter, no canvas, no extra request.*/
/* Keep this in sync with rizzado-site/components/checkout/CheckoutStart. */
/* ------------------------------------------------------------------ */

body.surface-page {
  margin: 0;
  min-height: 100svh;
  background: #5D767E;
  color: #fff;
  font-family: "Inter Tight", "Inter", -apple-system, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body.surface-page .surface-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #5D767E;
}
body.surface-page .surface-spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: surface-spin 18s linear infinite;
}
body.surface-page .surface-blob {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/webp;base64,UklGRqYCAABXRUJQVlA4WAoAAAAQAAAALwAANwAAQUxQSFUBAAAFBkiSJMdtxFX/f+4GIGK6AYLj5dwdEQwcSUrU68C5wBv0H8oyoOVkxPJoREvJFnU03U4wdgULWkF9NN2zNVgppQy+6ZahGtJqQ3XDJLB0CFSF3rBt8QWlFdJZs6xAHTWo4aGTFtgaoqKAdMo6GVJIWGd6921nRFTmK3Pn9d68h/qSr1Fd7qwzlk3Ghk3Y5gvpdRzRe1jAXtaHFHsR+ISXKQwj8kOywEoO/cjsr02hj9psMiQeErlNKqlJfR0cu87jZEwU5m35+ylSVy7EThbogk9AakKj+tApDtu+Kqj6Fo6SjXIAzCdkCpLY4Yi150l4gIlXT2VWCXsGmuIFsGPe6dK523ROzJ6Cp9GQz5gfcvnN2ZulP/f09+pH3tv87yL9u8v/rtP/G/n/pfT/Xv5/Nf2/nT4vpM876fNa+ryZPi+nz/vp64r0dUv6uih73ZW+rvt7IgBWUDggKgEAABAKAJ0BKjAAOAA+WSaNRaOiIR6sXAA4BYSygFwx10S0ahsFI5t2V62zDMUT5F4sey4tHRwASW6n1q2fGAbvJSg+0KS8IfMHYhexRTf96HshoWxH/nUgyn5wAP77pi5O5OquH6yTgD49NFeZzZAVysl4dYesz+qQl6glXseMIyHrQE+6aAS1vzHkfwQRxJVbEHop9ZyvjT2YsCq86MzXtV8fYmyqFhRi4+ro2KRsTPqqCmD3wBBFYNBFCHdV4XhWjLsKpj2+W5jT00Mx6sLckHv109r6eTboeVOHcTAY0mpRN2S7xEX06gjDBnLdqO/JOg1mEZSZOjwCexg7Ol44TA1h/eLT489oqRU9oVtQ+Gn//Nx3M4pCX50FetYexdxNXK//+S8fJLmhoAA=") center / contain no-repeat;
  transform: scale(3);
  will-change: transform;
}
@keyframes surface-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.surface-page .surface-spin { animation: none; }
}

body.surface-page .surface-header {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.surface-page .surface-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
body.surface-page .surface-back:hover { opacity: .7; }

body.surface-page .surface-main {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 64px;
  box-sizing: border-box;
}

body.surface-page .surface-card {
  width: 100%;
  max-width: 343px;
  padding: 32px;
  border-radius: 16px;
  background: rgba(0,0,0,.1);
  box-sizing: border-box;
}

body.surface-page .surface-split {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.surface-page .surface-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}
body.surface-page .surface-lead-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.surface-page .surface-mark {
  display: block;
  width: 30px;
  height: 32px;
  background: #fff;
  -webkit-mask: url("brand/symbol.svg") center / contain no-repeat;
  mask: url("brand/symbol.svg") center / contain no-repeat;
}

body.surface-page .surface-title {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: -0.015em;
}
body.surface-page .surface-title span { display: block; }
body.surface-page .surface-title .muted { color: rgba(255,255,255,.6); }

body.surface-page .surface-sub {
  margin: 0;
  max-width: 320px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

body.surface-page .surface-rule { display: none; }

body.surface-page .surface-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.surface-page .surface-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

body.surface-page .surface-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px !important;
  border: 1px solid rgba(232,232,232,.1) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.9) !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 20px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s, background-color .2s;
}
body.surface-page .surface-input::placeholder { color: rgba(255,255,255,.5); }
body.surface-page .surface-input:hover { border-color: rgba(232,232,232,.22) !important; }
body.surface-page .surface-input:focus,
body.surface-page .surface-input:focus-visible {
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: none !important;
}
body.surface-page .surface-input[aria-invalid="true"] { border-color: #ffb3a3 !important; }

body.surface-page .surface-password { position: relative; }
body.surface-page .surface-password .surface-input { padding-right: 64px; }
body.surface-page .surface-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 24px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: rgba(255,255,255,.7);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
body.surface-page .surface-toggle:hover { color: #fff; }

body.surface-page .surface-utility {
  margin-top: -4px;
  font-size: 13px;
  line-height: 18px;
}
body.surface-page .surface-utility a,
body.surface-page .surface-links a { color: #fff; text-underline-offset: 4px; }
body.surface-page .surface-utility a:hover,
body.surface-page .surface-links a:hover { text-decoration: underline; }

/* Pill button. The arrow is a pseudo-element so JS that rewrites the label
   with textContent never removes it. */
body.surface-page .surface-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 40px;
  padding: 0 52px 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 9999px;
  background: #fff;
  color: #233137;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s;
}
body.surface-page .surface-btn::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 40px;
  width: 1px;
  background: rgba(0,0,0,.1);
}
body.surface-page .surface-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: #233137;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9h11M10 4.5 14.5 9 10 13.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9h11M10 4.5 14.5 9 10 13.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
body.surface-page .surface-btn:hover { background: rgba(255,255,255,.9); }
body.surface-page .surface-btn:disabled { opacity: .7; cursor: default; }

body.surface-page .surface-btn-ghost {
  background: rgba(255,255,255,.1);
  border-color: rgba(232,232,232,.2);
  color: #fff;
}
body.surface-page .surface-btn-ghost::before { background: rgba(255,255,255,.2); }
body.surface-page .surface-btn-ghost::after { background-color: #fff; }
body.surface-page .surface-btn-ghost:hover { background: rgba(255,255,255,.18); }

body.surface-page .surface-error {
  color: #ffd1c7;
  font-size: 13px;
  line-height: 18px;
}

body.surface-page .surface-links {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 20px;
}

body.surface-page .surface-fine {
  margin: 0;
  color: rgba(255,255,255,.5);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.surface-page .surface-fine a { color: rgba(255,255,255,.7); }

body.surface-page .surface-check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 9999px;
  color: #fff;
}
body.surface-page .surface-check svg { width: 18px; height: 18px; }

body.surface-page .surface-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.surface-page .surface-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,.8);
}
body.surface-page .surface-step-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  padding-top: 2px;
}
body.surface-page .surface-step strong { color: #fff; font-weight: 500; }

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

@media (min-width: 768px) {
  body.surface-page .surface-card {
    max-width: 768px;
    min-height: 428px;
  }
  body.surface-page .surface-split {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 32px;
    height: 100%;
    min-height: 364px;
  }
  body.surface-page .surface-lead {
    justify-content: space-between;
    padding-bottom: 0;
  }
  body.surface-page .surface-rule {
    display: block;
    width: 1px;
    background: rgba(255,255,255,.1);
  }
  body.surface-page .surface-body { justify-content: flex-end; }
  body.surface-page .surface-input,
  body.surface-page .surface-btn { font-size: 14px; }
  body.surface-page .surface-title { font-size: 40px; }
}

/* Aligned variant (gracias): mark on a first row, then the title and the
   right-hand content start on the same line. Desktop only; mobile stacks. */
@media (min-width: 768px) {
  body.surface-page .surface-split--aligned {
    grid-template-rows: auto auto;
    align-content: space-between;
  }
  body.surface-page .surface-split--aligned > .surface-lead { display: contents; }
  body.surface-page .surface-split--aligned > .surface-lead > .surface-mark { grid-column: 1; grid-row: 1; }
  body.surface-page .surface-split--aligned > .surface-lead > .surface-lead-text { grid-column: 1; grid-row: 2; align-self: start; }
  body.surface-page .surface-split--aligned > .surface-rule { grid-column: 2; grid-row: 1 / span 2; }
  body.surface-page .surface-split--aligned > .surface-body { grid-column: 3; grid-row: 2; align-self: start; }
}