/* ABOUTME: Styles the toolbox order form and its confirmation page. */
/* ABOUTME: Reuses the re.create palette and keeps long forms readable on phones. */
.order-form { max-width: 680px; margin: 32px auto; text-align: left; }
.order-form label { display: block; margin-bottom: 18px; font-weight: 700; }
.order-form input, .order-form select { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #757575; border-radius: 8px; font: inherit; color: #1a1a1a; background: white; }
.order-form input:focus, .order-form select:focus { outline: 3px solid #673e71; outline-offset: 2px; }
.order-form button, .order-page button { border: 0; cursor: pointer; font: inherit; font-weight: 700; border-radius: 999px; padding: 16px 26px; color: #1a1a1a; background: #df8544; }
.order-form button:disabled, .order-page button:disabled { opacity: .6; cursor: wait; }
.order-form .notice, .order-page .notice { margin: 18px 0; }
.order-error { color: #a31f28; font-weight: 700; }
.newsletter-separate { max-width: 680px; margin: 32px auto; padding-top: 24px; border-top: 1px solid #757575; }
.order-page { max-width: 820px; padding: 40px 24px; margin: auto; font-family: 'DM Sans', sans-serif; color: #1a1a1a; line-height: 1.6; }
.order-page a { color: #673e71; }
.order-page dl { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 10px 20px; padding: 24px; border-radius: 16px; background: #faf8f4; }
.order-page dt { font-weight: 700; }
.order-page dd { margin: 0; overflow-wrap: anywhere; }
.order-card { margin: 24px 0; padding: 20px; background: #faf8f4; border: 1px solid #ddd; border-radius: 16px; }
.order-card h2 { font-size: 1.2rem; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .order-page dl { grid-template-columns: 1fr; }
  .order-page dd { margin-bottom: 8px; }
}