@import url('/assets/fonts/checkout-font.css');

/* Match the original purchase form without changing the page layout. */
.checkout {
  width:min(420px,calc(100% - 32px));
  max-width:none;
  max-height:min(94vh,calc(100dvh - 32px));
  margin:auto;
  padding:36px 32px 28px;
  overflow-x:hidden;
  overflow-y:auto;
  border:0;
  border-radius:28px;
  background:#fff;
  color:#222;
  box-shadow:none;
  font-family:var(--sans);
  font-size:16px;
  line-height:normal;
}
.checkout::backdrop { background:rgba(40,28,32,.7); backdrop-filter:none; }
.checkout #checkout-title {
  margin:0 0 24px;
  color:#222;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:26px;
  font-weight:600;
  line-height:normal;
  letter-spacing:0;
  text-align:center;
  text-transform:lowercase;
}
/* The heading receives initial focus without opening the phone keyboard. */
.checkout #checkout-title:focus { outline:none; }
.checkout .checkout-product { margin:-12px 0 8px; color:#777; text-align:center; font-size:13px; }
.checkout .checkout-total { margin:0 0 20px; text-align:center; font-size:16px; }
.checkout .checkout-total strong { color:#a02b66; white-space:nowrap; }
.checkout .price-status { margin:0 0 12px; color:#777; text-align:center; font-size:13px; line-height:1.4; }
.checkout .price-status:empty { display:none; }
.checkout .price-retry { margin:0 auto 18px; padding:8px 16px; border:1px solid #a02b66; border-radius:12px; background:#fff; color:#a02b66; font:inherit; font-size:14px; }
.checkout .price-retry:not([hidden]) { display:block; }
.checkout .modal-close {
  position:absolute;
  top:8px;
  right:12px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  color:#777;
  font-family:Arial,sans-serif;
  font-size:22px;
  line-height:1;
}
.checkout .field { margin:0 0 14px; }
.checkout .field label { display:block; margin:0 0 6px; font-size:14px; color:#444; line-height:normal; }
.checkout .field input {
  width:100%;
  height:48px;
  min-height:0;
  padding:0 16px;
  border:1px solid #eee6e2;
  border-radius:16px;
  background:#faf6f3;
  color:#222;
  font:inherit;
  font-size:16px;
  outline:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.checkout .field input:focus { background:#fff; border-color:#ff7eb6; box-shadow:0 0 0 2px #ff7eb640; }
.checkout .field input[aria-invalid="true"] { border-color:#ff8a65; }
.checkout .field-error { min-height:16px; margin:6px 0 0; font-size:12px; line-height:1.333333; color:#ff7f5f; }
.checkout .checkout-submit {
  display:block;
  width:100%;
  min-height:0;
  margin:22px 0 18px;
  padding:14px;
  border:0;
  border-radius:16px;
  background:#a02b66;
  color:#fff;
  box-shadow:none;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:19px;
  font-weight:600;
  line-height:normal;
  text-transform:lowercase;
  transition:background .2s;
}
.checkout .checkout-submit:hover { background:#85204f; transform:none; }
.checkout .checkout-submit:disabled { opacity:.6; cursor:wait; }
.checkout .checkout-terms { margin:0; color:#888; text-align:center; font-size:12px; line-height:1.5; }
.checkout .checkout-terms a { color:#555; text-decoration:underline; text-underline-offset:auto; }
.checkout .payment-error { margin:0 0 18px; }

.cookie-banner { position:fixed; z-index:100; inset:auto 16px max(16px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:20px; max-width:900px; max-height:calc(100dvh - 32px); margin:0 auto; padding:14px 18px; overflow-y:auto; border:1px solid #eadce2; border-radius:16px; background:#fffafc; box-shadow:0 6px 24px #40233218; color:#333; font-family:'Manrope',Arial,sans-serif; font-size:13px; line-height:1.5; }
.cookie-banner[hidden] { display:none; }
.cookie-banner p { flex:1; min-width:0; margin:0; }
.cookie-banner a { color:#85204f; text-decoration:underline; }
.cookie-actions { display:flex; flex-shrink:0; gap:8px; }
.cookie-actions button { flex:1; min-height:44px; padding:8px 14px; border:1px solid #a02b66; border-radius:10px; background:#fff; color:#85204f; font:inherit; font-weight:600; cursor:pointer; }
.cookie-actions button:hover { background:#f6eaf0; }
.cookie-actions button:focus-visible,.cookie-preferences:focus-visible { outline:3px solid #a02b66; outline-offset:3px; }
.cookie-preferences { display:block; margin:16px auto; padding:6px; background:transparent; border:0; color:inherit; font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
@media(max-width:600px) { .cookie-banner { inset:auto 10px max(10px,env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; gap:12px; padding:14px; font-size:12px; border-radius:14px; } }