/* ============================================================================
   CHECKOUT SHEET
   Deliberately its own light palette rather than inheriting either storefront:
   a form is a form, and both the cream and the emerald site need it legible.
   ========================================================================== */
.co{ position:fixed; inset:0; z-index:130; visibility:hidden; }
.co.open{ visibility:visible; }
.co__veil{ position:absolute; inset:0; background:rgba(20,12,8,.62);
  opacity:0; transition:opacity .34s cubic-bezier(.22,.9,.28,1); }
.co.open .co__veil{ opacity:1; }

.co__sheet{
  position:absolute; right:0; top:0; height:100%; width:min(480px,100%);
  background:#FDFAF4; color:#2C2329; display:flex; flex-direction:column;
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.6);
  transform:translateX(102%); transition:transform .38s cubic-bezier(.22,.9,.28,1);
  font-family:"Jost","Mukta","Segoe UI",system-ui,sans-serif;
}
.co.open .co__sheet{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .co__sheet,.co__veil{ transition:none; }
}

.co__head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:20px 22px 14px; border-bottom:1px solid rgba(140,106,62,.2); }
.co__head h2{ font-family:"Prata",Georgia,serif; font-size:1.3rem; margin:0; font-weight:400; }
.co__head p{ margin:3px 0 0; font-size:.8rem; color:#6D6058; }
.co__x{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(140,106,62,.35);
  background:none; color:#6D6058; font-size:1rem; display:grid; place-items:center;
  flex:0 0 auto; cursor:pointer; }
.co__x:hover{ border-color:#B18A57; color:#8C6A3E; }

.co__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 22px; }

.co__f{ margin-bottom:14px; }
.co__f label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8A7A70; margin-bottom:6px; font-weight:500; }
.co__f label b{ color:#9E2B3A; font-weight:500; }
.co__f input, .co__f textarea{
  width:100%; padding:.78em .9em; border-radius:10px; font-size:16px;  /* 16px: iOS won't zoom */
  border:1px solid rgba(140,106,62,.32); background:#fff; color:#2C2329;
  font-family:inherit;
}
.co__f input:focus, .co__f textarea:focus{ outline:none; border-color:#B18A57;
  box-shadow:0 0 0 3px rgba(177,138,87,.16); }
.co__f textarea{ resize:vertical; min-height:74px; }
.co__f.bad input, .co__f.bad textarea{ border-color:#C0392B; background:#FFF6F5; }
.co__err{ font-size:.76rem; color:#C0392B; margin-top:5px; min-height:0; }
.co__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co__row3{ display:grid; grid-template-columns:1.3fr 1fr; gap:10px; }

.co__sum{ margin:18px 0 6px; border:1px solid rgba(140,106,62,.22); border-radius:12px;
  background:#fff; overflow:hidden; }
.co__sum h3{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8A7A70;
  margin:0; padding:12px 14px 8px; font-weight:500; }
.co__line{ display:flex; justify-content:space-between; gap:12px; padding:7px 14px;
  font-size:.88rem; }
.co__line span:first-child{ color:#4A403C; }
.co__tot{ display:flex; justify-content:space-between; padding:11px 14px;
  border-top:1px solid rgba(140,106,62,.22); font-weight:600; }
.co__tot b{ font-family:"Prata",Georgia,serif; font-weight:400; font-size:1.15rem; color:#8C6A3E; }

.co__foot{ border-top:1px solid rgba(140,106,62,.2); padding:16px 22px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:grid; gap:9px; background:#FDFAF4; }
.co__go{
  width:100%; min-height:52px; border:0; border-radius:100px; cursor:pointer;
  background:#128C7E; color:#fff; font-weight:600; font-size:.98rem;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; touch-action:manipulation;
}
.co__go:hover{ background:#0F7A6D; }
.co__go[disabled]{ opacity:.6; cursor:progress; }
.co__note{ margin:0; font-size:.74rem; color:#8A7A70; line-height:1.45; text-align:center; }

/* the confirmation that replaces the form */
.co__done{ text-align:center; padding:46px 24px; }
.co__tick{ width:62px; height:62px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; background:#E7F5EF; color:#128C7E; font-size:1.8rem; }
.co__done h3{ font-family:"Prata",Georgia,serif; font-weight:400; font-size:1.4rem; margin:0 0 6px; }
.co__ref{ display:inline-block; margin:10px 0 14px; padding:.5em 1.1em; border-radius:100px;
  background:#F3EAD9; border:1px solid rgba(140,106,62,.3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem; letter-spacing:.06em; }
.co__done p{ color:#6D6058; font-size:.92rem; margin:0 auto; max-width:34ch; }
.co__again{ margin-top:20px; background:none; border:0; text-decoration:underline;
  color:#8A7A70; font-size:.84rem; cursor:pointer; font-family:inherit; }

@media(max-width:520px){
  .co__row, .co__row3{ grid-template-columns:1fr; }
}