/* artbyhollywood-la.com: the on-site checkout sheet (checkout.js) and the
   return page (/preordered). The site's own language: white, IBM Plex Mono,
   small spaced uppercase labels, 1px rules, and the page's sky blue as the
   one highlight (focus, the chosen colorway, the button). Stripe's fields are
   styled to match through the Appearance API in checkout.js. */

:root {
  --sky: #7cb6e3;
  --sky-deep: #4f93c8;
  --sky-tint: #edf5fb;
  --rule: rgb(11 11 11 / 0.14);
  --field: rgb(11 11 11 / 0.28);
  --muted: rgb(11 11 11 / 0.62);
  --danger: #b3261e;
}

html.co-open { overflow: hidden; }
/* the page under the open checkout holds still (its WebGL sky is paused too) */
html.co-open .sea-drift { animation-play-state: paused; }

/* ---------- The sheet ---------- */

.co {
  position: fixed;
  inset: 0;
  z-index: 40; /* under Stripe's own 3D Secure overlay, which it appends to <body> */
  display: flex;
  justify-content: center;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}
.co[hidden] { display: none; }

.co-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(214 230 243 / 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: co-fade 0.25s ease;
}

.co-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: co-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes co-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .co { padding: 28px 16px; }
  .co-sheet {
    width: 460px;
    border: 1px solid var(--rule);
    box-shadow: 0 40px 90px -50px rgb(36 74 110 / 0.55);
  }
}

.co-bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(6px, env(safe-area-inset-top)) 6px 6px 20px;
  border-bottom: 1px solid var(--rule);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.co-kicker { font-weight: 500; }
.co-close {
  appearance: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.co-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px max(28px, env(safe-area-inset-bottom));
}

.co :focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.co-name:focus { outline: none; }

/* ---------- The piece, in a strip of the page's sky ---------- */

.co-hero {
  position: relative;
  margin: 0 -20px;
  padding: 18px 20px 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #a9d0ef 0%, #d5e7f5 46%, #fff 100%);
}
.co-hero-sky img {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation: co-drift 34s ease-in-out infinite alternate;
}
.co-sky-1 { width: 74%; left: -30%; top: -22%; opacity: 0.95; }
.co-sky-2 { width: 64%; right: -26%; top: 4%; opacity: 0.9; animation-duration: 41s !important; animation-direction: alternate-reverse !important; }
@keyframes co-drift {
  from { transform: translate3d(-4%, 0, 0); }
  to { transform: translate3d(4%, -3%, 0); }
}
.co-stage,
.done-stage {
  position: relative;
  width: min(86%, 340px);
  aspect-ratio: 1600 / 895;
  margin: 0 auto;
}
.co-render,
.done-render {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgb(40 66 92 / 0.18));
  transition: opacity 0.5s ease;
}
/* The live view reaches a little past the still's box: the piece swings. */
.co-view,
.done-view {
  position: absolute;
  inset: -8% -10%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* a soft contact shadow under the turning piece */
.co-stage::after,
.done-stage::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -9%;
  height: 12%;
  background: radial-gradient(closest-side, rgb(48 74 100 / 0.2), rgb(48 74 100 / 0));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.has-3d .co-view,
.has-3d .done-view,
.has-3d .co-stage::after,
.has-3d .done-stage::after { opacity: 1; }
.has-3d .co-render,
.has-3d .done-render { opacity: 0; }

.co-name {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* The colorway, switchable here too; the chosen one in sky blue. */
.co-ways {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.co-ways button {
  appearance: none;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.co-ways button:hover:not(:disabled) { color: var(--ink); border-color: var(--field); }
.co-ways button[aria-checked="true"] {
  color: var(--ink);
  border-color: var(--sky);
  background: var(--sky-tint);
  box-shadow: inset 0 0 0 1px var(--sky);
}
.co-ways button.is-full { text-decoration: line-through; text-decoration-thickness: 1px; }
.co-ways button:disabled { cursor: default; opacity: 0.55; }

.co-price,
.co-note {
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.co-price { margin-top: 12px; font-size: 13px; font-weight: 500; }
.co-note { margin-top: 4px; color: var(--muted); font-size: 10px; }

/* ---------- Fields ---------- */

.co-form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.co-field + .co-field { margin-top: 14px; }
.co-field label,
.co-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.co-tag { font-size: 9px; letter-spacing: 0.16em; color: var(--ink); }
.co-tag-opt {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.co-field input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* under 16px, iOS zooms in on focus */
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.co-field input:hover { border-color: rgb(11 11 11 / 0.5); }
.co-field input:focus,
.co-field input:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 1px var(--sky);
}
.co-field input[aria-invalid="true"] { border-color: var(--danger); }
.co-field input[readonly] { color: var(--muted); }
.co-hint { margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.co-err { color: var(--danger); font-size: 11.5px; }
.co-err:not(:empty) { margin-top: 6px; }

/* ---------- Stripe's address and payment ---------- */

.co-stripe { margin-top: 22px; }
.co-stripe .co-label { margin-top: 18px; }
.co-stripe .co-label:first-child { margin-top: 0; }
.co-mount { min-height: 1px; }

/* Placeholder blocks while the session is created and the fields load. */
.co-skel { display: none; }
.co.is-mounting .co-skel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co.is-mounting .co-mount { display: none; }
.co-skel i {
  grid-column: span 2;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(90deg, #eef3f7 0%, #f7fafc 50%, #eef3f7 100%) 0 0 / 200% 100%;
  animation: co-shimmer 1.3s linear infinite;
}
.co-skel i.co-skel-half { grid-column: span 1; }
.co-skel i.co-skel-tabs { height: 62px; }
@keyframes co-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Total, messages, the button ---------- */

.co-total {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.co-total div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.co-total dt { color: var(--muted); }
.co-total dd { text-align: right; font-variant-numeric: tabular-nums; }
.co-total .co-total-sum {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 500;
}
.co-total .co-total-sum dt { color: var(--ink); }

.co-msg {
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--sky);
  background: var(--sky-tint);
  font-size: 11.5px;
  line-height: 1.55;
}
.co-msg-error { border-left-color: var(--danger); background: #fdf3f2; }
.co-msg a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }

.co-go {
  appearance: none;
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: 1px solid var(--sky-deep);
  border-radius: 2px;
  background: var(--sky);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.co-go:hover:not(:disabled) { background: #6aaadc; }
.co-go:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 3px; }
.co-go:disabled { cursor: default; opacity: 0.6; }
.co-go[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: co-dots 1.2s steps(4, end) infinite;
}
@keyframes co-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
.co-go[hidden] { display: none; }

.co-hold {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.co-legal {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.co-legal a {
  display: inline-block;
  padding: 6px 2px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.co-legal a + a { margin-left: 22px; }

/* ---------- Clouds at the sheet's edges (wide screens) ---------- */

.co-edge {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
@media (min-width: 640px) {
  .co-edge { display: block; }
  .co-edge img {
    position: absolute;
    max-width: none;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
    animation: co-drift 46s ease-in-out infinite alternate;
  }
  /* each cloud half behind the sheet, half over the blurred page */
  .co-edge-1 { width: 420px; left: calc(50% - 470px); top: 6%; }
  .co-edge-2 { width: 380px; left: calc(50% + 110px); top: 30%; animation-direction: alternate-reverse !important; animation-duration: 52s !important; }
  .co-edge-3 { width: 460px; left: calc(50% - 520px); bottom: 4%; animation-duration: 58s !important; }
  .co-edge-4 { width: 400px; left: calc(50% + 150px); bottom: -6%; animation-direction: alternate-reverse !important; }
}

/* ---------- The return page: /preordered ---------- */

.done-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 16px max(28px, env(safe-area-inset-bottom));
  overflow: clip;
}
.done-clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.done-clouds img {
  position: absolute;
  max-width: none;
  height: auto;
  animation: co-drift 44s ease-in-out infinite alternate;
}
.done-c1 { width: max(60vw, 360px); left: -18vw; top: 10vh; }
.done-c2 { width: max(52vw, 320px); right: -16vw; top: 22vh; animation-direction: alternate-reverse !important; }
.done-c3 { width: max(70vw, 420px); left: 10vw; bottom: -10vh; animation-duration: 56s !important; }

.done-card {
  width: min(400px, 100%);
  margin-top: clamp(28px, 8vh, 80px);
  padding: 22px 20px 20px;
  border: 1px solid var(--rule);
  background: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.done-kicker { color: var(--muted); font-size: 10px; letter-spacing: 0.18em; }
.done-title { margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.16em; }
.done-card[data-state="paid"] .done-title { color: var(--ink); }
.done-stage { width: min(84%, 300px); margin: 18px auto 10px; }
.done-stage[hidden] { display: none; }
.done-line { margin-top: 10px; font-size: 10.5px; line-height: 1.7; }
.done-line:empty { display: none; }
.done-sub { color: var(--muted); }
.done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.done-actions a,
.done-actions button {
  appearance: none;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.done-actions .done-primary {
  width: 100%;
  padding: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sky-deep);
  border-radius: 2px;
  background: var(--sky);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
}
.done-actions [hidden] { display: none; }
.done-dots::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: co-dots 1.2s steps(4, end) infinite;
}
.done-page .co-legal { margin-top: 18px; }
.done-page .co-legal a { color: var(--ink); }