.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.55em;
  padding: 0.9em 1.75em;
  transition: background var(--tap), color var(--tap), border-color var(--tap), transform var(--tap);
}

.Button:active { transform: scale(0.96); }

.Button--primary {
  background: var(--action-ink);
  color: #ffffff;
  border: 2px solid var(--action-ink);
}

.Button--primary:hover { background: transparent; color: var(--action-ink); }

.Button--ghost {
  background: transparent;
  color: var(--action-primary);
  border: 2px solid rgba(21, 128, 61, 0.35);
}

.Button--ghost:hover { border-color: var(--action-primary); background: var(--surface-sunken); color: var(--action-hover); }

.Button--wide { width: 100%; }
.Button--onDark { background: #ffffff; color: var(--action-ink); border-color: #ffffff; }
.Button--onDark:hover { background: transparent; color: #ffffff; }


.OrderBox {
  background: var(--surface-base);
  border: 1px solid var(--line-soft);
  border-top: 0.35em solid var(--action-primary);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lift);
  padding: var(--space-m) var(--space-s) var(--space-s);
}

.OrderBox-title { font-size: 1.22em; margin-bottom: 0.3em; }
.OrderBox-sub { font-size: 0.92em; color: var(--text-muted); margin-bottom: var(--space-s); }

.OrderBox-summary {
  display: flex;
  align-items: center;
  gap: 0.9em;
  background: var(--surface-raised);
  border-radius: var(--radius-m);
  padding: 0.7em 0.9em;
  margin-bottom: var(--space-s);
}

.OrderBox-thumb { width: 3.4em; height: auto; display: block; flex: 0 0 auto; }
.OrderBox-name { font-weight: 700; display: block; line-height: 1.25; }
.OrderBox-meta { font-size: 0.85em; color: var(--text-muted); }

.Form-group { margin-bottom: var(--space-s); }
.Form-label { display: block; font-size: 0.86em; font-weight: 700; margin-bottom: 0.35em; color: var(--text-secondary); }

.Form-input {
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1.5px solid var(--line-soft);
  border-radius: 0.55em;
  padding: 0.78em 0.9em;
  transition: border-color var(--tap), box-shadow var(--tap);
}

.Form-input:focus { outline: none; border-color: var(--action-primary); box-shadow: var(--focus-ring); }
.Form-input::placeholder { color: var(--action-disabled); }
.Form-input.is-invalid { border-color: var(--signal-alert); }

.Form-consent {
  display: grid;
  grid-template-columns: 1.3em 1fr;
  gap: 0.7em;
  align-items: start;
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-bottom: var(--space-s);
}

.Form-consent input { width: 1.3em; height: 1.3em; margin: 0.15em 0 0; accent-color: var(--action-primary); }

.Form-error {
  display: block;
  color: var(--signal-alert);
  font-size: 0.84em;
  font-weight: 600;
  margin-top: 0.3em;
}

.Form-note { font-size: 0.82em; color: var(--text-muted); margin: var(--space-xs) 0 0; text-align: center; }

.Form-seller {
  font-style: normal;
  display: block;
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-radius: var(--radius-s);
  padding: 0.7em 0.85em;
  margin-bottom: var(--space-s);
}

.Form-seller b { display: block; color: var(--text-secondary); font-weight: 700; }

.Alert {
  border-radius: var(--radius-m);
  padding: var(--space-s);
  margin-bottom: var(--space-s);
  font-size: 0.94em;
}

.Alert--bad { background: #fbeae6; color: #7d2b1a; border: 1px solid #eec3b8; }
.Alert--good { background: var(--surface-sunken); color: var(--action-hover); border: 1px solid rgba(21, 128, 61, 0.35); }


.QuickPanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 24em;
  max-width: 88vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1200;
  background: var(--surface-base);
  box-shadow: -1em 0 3em rgba(5, 46, 22, 0.22);
  transform: translateX(100%);
  transition: transform var(--glide);
  overflow-y: auto;
  padding: var(--space-m) var(--space-s) var(--space-l);
}

.QuickPanel.is-open { transform: translateX(0); }

.QuickPanel-close {
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  width: 2.75em;
  height: 2.75em;
  display: grid;
  place-items: center;
  font-size: 1.35em;
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
}

.QuickPanel-close:hover { background: var(--surface-raised); color: var(--text-primary); }

.QuickPanel-scrim {
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: var(--surface-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--glide), visibility var(--glide);
}

.QuickPanel-scrim.is-visible { opacity: 1; visibility: visible; }

.QuickPanel-steps { list-style: none; margin: 0 0 var(--space-s); padding: 0; display: grid; gap: 0.5em; font-size: 0.88em; color: var(--text-secondary); counter-reset: qstep; }
.QuickPanel-steps li { display: grid; grid-template-columns: 1.7em 1fr; gap: 0.5em; align-items: start; }
.QuickPanel-steps li::before {
  counter-increment: qstep;
  content: counter(qstep);
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--action-primary);
  font-weight: 700;
  font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
  .QuickPanel, .QuickPanel-scrim { transition: none; }
}

@media (max-width: 768px) {
  .QuickPanel { width: 100%; max-width: none; padding-bottom: var(--space-band); }
  .Button { padding: 0.85em 1.4em; }
}

.Form { margin: 0; }