/* ==========================================================================
   Kotori — checkout + ticket
   ========================================================================== */

.co-wrap {
  max-width: 940px; margin: 0 auto;
  padding: clamp(44px,7vw,80px) clamp(20px,5vw,40px) 100px;
  display: grid; gap: clamp(28px,4vw,48px);
  grid-template-columns: minmax(0,1fr) 320px;
  align-items: start;
}

.co-steps {
  display: flex; gap: 10px; align-items: center; margin-bottom: 30px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
.co-step { color: rgba(244,236,224,.38); display: flex; align-items: center; gap: 8px; }
.co-step.on { color: var(--gold,#b89968); }
.co-step .n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid currentColor; font-size: .7rem; letter-spacing: 0;
}
.co-sep { flex: 1; height: 1px; background: rgba(184,153,104,.22); max-width: 40px; }

.co-panel h1 {
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(1.7rem,4vw,2.4rem); color: var(--washi,#f4ece0);
  margin: 0 0 8px;
}
.co-panel .co-lede {
  font-family: Manrope, system-ui, sans-serif; font-size: .92rem;
  color: rgba(244,236,224,.62); margin: 0 0 28px; line-height: 1.6;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.co-field { margin-bottom: 18px; }
.co-field label {
  display: block; font-family: Manrope, system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold,#b89968); margin-bottom: 8px;
}
.co-field .hint {
  display: block; text-transform: none; letter-spacing: 0;
  font-size: .76rem; color: rgba(244,236,224,.45); margin-top: 6px;
}
.co-field input, .co-field textarea {
  width: 100%; padding: 13px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(184,153,104,.28);
  border-radius: 2px; color: var(--washi,#f4ece0);
  font-family: Manrope, system-ui, sans-serif; font-size: 1rem;  /* >=16px: iOS won't zoom */
  transition: border-color .25s ease, background .25s ease;
}
.co-field textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.co-field input:focus, .co-field textarea:focus {
  outline: none; border-color: var(--gold,#b89968); background: rgba(255,255,255,.06);
}
.co-field input::placeholder, .co-field textarea::placeholder { color: rgba(244,236,224,.3); }
.co-field.err input, .co-field.err textarea { border-color: var(--vermillion,#c14a2a); }
.co-field .msg {
  display: none; font-family: Manrope, system-ui, sans-serif;
  font-size: .78rem; color: var(--vermillion,#c14a2a); margin-top: 6px;
}
.co-field.err .msg { display: block; }

.co-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

/* ── Consent ───────────────────────────────────────────────────────────── */
.co-consent {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(184,153,104,.2); padding: 15px 16px; margin: 6px 0 24px;
  font-family: Manrope, system-ui, sans-serif; font-size: .84rem; line-height: 1.55;
  color: rgba(244,236,224,.72);
}
.co-consent input { width: 19px; height: 19px; flex: none; margin-top: 1px; accent-color: #b89968; }

/* ── Mock payment ──────────────────────────────────────────────────────── */
.co-demo {
  border: 1px dashed rgba(184,153,104,.5); background: rgba(184,153,104,.08);
  padding: 16px 18px; margin-bottom: 26px;
  font-family: Manrope, system-ui, sans-serif; font-size: .84rem; line-height: 1.6;
  color: rgba(244,236,224,.78);
}
.co-demo b {
  display: block; color: var(--gold,#b89968); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 6px;
}

/* Same shape as .co-demo, different meaning. .co-demo said "none of this is
   real", which was true of the demo build and false the moment this became a
   paying restaurant's live site. This one states plainly which parts of the
   policy are dormant while ticketed events are switched off, so the page is
   accurate now and stays accurate when they are switched back on. Solid
   border rather than dashed: this is a standing statement, not a caveat. */
.co-note {
  border: 1px solid rgba(184,153,104,.4); background: rgba(184,153,104,.06);
  padding: 16px 18px; margin-bottom: 26px;
  font-family: Manrope, system-ui, sans-serif; font-size: .84rem; line-height: 1.6;
  color: rgba(244,236,224,.8);
}
.co-note b {
  display: block; color: var(--gold,#b89968); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 6px;
}
.co-note a { color: var(--gold,#b89968); }

.co-card {
  border: 1px solid rgba(184,153,104,.28); padding: 22px; margin-bottom: 24px;
  background: rgba(255,255,255,.02);
}
.co-card-brands {
  display: flex; gap: 7px; margin-bottom: 18px; align-items: center;
  font-family: Manrope, system-ui, sans-serif; font-size: .64rem;
  letter-spacing: .14em; color: rgba(244,236,224,.4);
}
.co-card-brands i {
  font-style: normal; border: 1px solid rgba(184,153,104,.3);
  padding: 3px 7px; border-radius: 2px;
}

/* ── Summary rail ──────────────────────────────────────────────────────── */
.co-summary {
  position: sticky; top: 24px;
  border: 1px solid rgba(184,153,104,.3);
  background: rgba(255,255,255,.03); padding: 22px 22px 24px;
}
.co-summary h3 {
  font-family: "Shippori Mincho B1", serif; font-size: 1.12rem;
  color: var(--washi,#f4ece0); margin: 0 0 4px;
}
.co-summary .when {
  font-family: Manrope, system-ui, sans-serif; font-size: .8rem;
  color: rgba(244,236,224,.55); margin-bottom: 18px;
}
.co-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: Manrope, system-ui, sans-serif; font-size: .88rem;
  color: rgba(244,236,224,.75); padding: 7px 0;
}
.co-sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(184,153,104,.2); margin-top: 12px; padding-top: 14px;
}
.co-sum-total .amt {
  font-family: "Shippori Mincho B1", serif; font-size: 1.6rem;
  color: var(--washi,#f4ece0);
}

.co-err {
  border: 1px solid var(--vermillion,#c14a2a); background: rgba(193,74,42,.12);
  padding: 14px 16px; margin-bottom: 20px; display: none;
  font-family: Manrope, system-ui, sans-serif; font-size: .87rem;
  color: #f0c4b6; line-height: 1.55;
}
.co-err.on { display: block; }

.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

@media (max-width: 860px) {
  .co-wrap { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
  .co-row { grid-template-columns: 1fr; }
}

/* ── Notify (join the list) ────────────────────────────────────────────── */
.nt-page { max-width: 520px; margin: 0 auto;
           padding: clamp(44px,7vw,80px) clamp(18px,5vw,28px) 100px; }

.nt-code {
  text-align: center; font-family: "Shippori Mincho B1", serif !important;
  font-size: 1.9rem !important; letter-spacing: .5em; text-indent: .5em;
  padding: 16px 14px !important;
}

.nt-legal {
  font-family: Manrope, system-ui, sans-serif; font-size: .76rem;
  line-height: 1.62; color: rgba(244,236,224,.5); margin: 4px 0 22px;
}
.nt-legal b { color: rgba(244,236,224,.78); }
.nt-legal a { color: var(--gold,#b89968); }

.nt-alt {
  text-align: center; margin-top: 16px;
  font-family: Manrope, system-ui, sans-serif; font-size: .82rem;
  color: rgba(244,236,224,.4);
}
.nt-alt a { color: var(--gold,#b89968); }

.nt-done { text-align: center; padding: 20px 0 10px; }
.nt-tick {
  width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  color: var(--gold,#b89968); border: 1px solid rgba(184,153,104,.45);
  background: rgba(184,153,104,.09);
}

/* ── Privacy ───────────────────────────────────────────────────────────── */
.pv h2 {
  font-family: "Shippori Mincho B1", serif; font-size: 1.14rem;
  color: var(--washi,#f4ece0); margin: 30px 0 8px;
}
.pv p {
  font-family: Manrope, system-ui, sans-serif; font-size: .93rem;
  line-height: 1.72; color: rgba(244,236,224,.72); margin: 0;
}
.pv p b { color: rgba(244,236,224,.9); }
.pv a { color: var(--gold,#b89968); }