/* The cart, enquiry and confirmation share one scrollable native dialog. */
.catalog-dialog .catalog-dialog-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  max-height: calc(100dvh - var(--modal-viewport-gap) * 2 - 2px);
}
.catalog-dialog .catalog-dialog-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-block: var(--space-6);
}
.catalog-dialog [hidden],
.catalog-dialog:is(.is-checkout, .is-success) .catalog-dialog-footer,
.catalog-dialog .catalog-checkout-trap { display: none !important; }
.catalog-dialog:is(.is-checkout, .is-success) .catalog-dialog-body { padding-bottom: var(--space-6); }

.catalog-dialog .catalog-checkout {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  padding-top: var(--space-2);
}
.catalog-dialog :is(.catalog-checkout, .catalog-checkout-success) h3 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-compact);
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-intro {
  max-width: 62ch;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.catalog-dialog [data-cart-enquiry-form] {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
}

.catalog-dialog .catalog-checkout-summary {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface-soft);
}
.catalog-dialog .catalog-checkout-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}
.catalog-dialog .catalog-checkout-summary-line > :not(strong) { min-width: 0; overflow-wrap: anywhere; }
.catalog-dialog .catalog-checkout-summary-line > strong {
  color: var(--color-ink);
  font-size: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.catalog-dialog .catalog-checkout-summary-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
  margin: var(--space-1) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: 1.4;
}
.catalog-dialog .catalog-checkout-summary-total > strong {
  font-size: var(--text-h4);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-dialog .catalog-checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
  min-width: 0;
}
.catalog-dialog .catalog-checkout-fields > .field { min-width: 0; margin: 0; gap: var(--label-gap); }
.catalog-dialog :is(.catalog-checkout-clinic, .catalog-checkout-comment) { grid-column: 1 / -1; }
.catalog-dialog .catalog-checkout-fields .field > :is(label, span) {
  min-width: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-fields .field label > span { color: var(--color-muted); font-weight: 400; }
.catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-field);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  line-height: 1.5;
}
.catalog-dialog .catalog-checkout-fields .field select { padding-right: var(--space-6); cursor: pointer; }
.catalog-dialog .catalog-checkout-fields .field textarea { min-height: 7rem; resize: vertical; }
.catalog-dialog .catalog-checkout-fields .field :is(input, textarea)::placeholder { color: var(--color-muted); opacity: 1; }
.catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea):focus-visible {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-error); }
.catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea):disabled { background: var(--color-surface-soft); opacity: .65; cursor: not-allowed; }

.catalog-dialog .catalog-checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.6;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-consent > input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: .15rem 0 0;
  padding: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.catalog-dialog .catalog-checkout-consent > :not(input) { min-width: 0; }
.catalog-dialog .catalog-checkout-consent a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.catalog-dialog .catalog-checkout-consent > input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.catalog-dialog .catalog-checkout-error {
  min-width: 0;
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-status {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.catalog-dialog :is(.catalog-checkout-error, .catalog-checkout-status):empty { display: none; }
.catalog-dialog .catalog-checkout-status:is([data-kind="error"], [data-state="error"], .is-error) {
  border-color: var(--color-error);
  background: var(--color-error-surface);
  color: var(--color-error);
}
.catalog-dialog .catalog-checkout-status[data-kind="success"] { color: var(--color-success); background: var(--color-success-surface); }
.catalog-dialog .catalog-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--action-gap);
  min-width: 0;
  margin: 0;
  padding-top: var(--space-2);
}
.catalog-dialog .catalog-checkout-actions > .btn { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.catalog-dialog .catalog-checkout-actions > .btn[aria-busy="true"] { min-width: 0; cursor: wait; }

.catalog-dialog .catalog-checkout-success {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-3);
  text-align: center;
}
.catalog-dialog .catalog-checkout-success-icon {
  display: grid;
  place-items: center;
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-success-surface);
  color: var(--color-success);
}
.catalog-dialog .catalog-checkout-success-icon > svg { display: block; width: 1.75rem; height: 1.75rem; }
.catalog-dialog .catalog-checkout-success > p {
  max-width: 50ch;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-success .catalog-checkout-receipt {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-receipt-clinic {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.catalog-dialog .catalog-checkout-success > .btn { min-width: 12rem; max-width: 100%; }

@media (max-width: 600px) {
  .catalog-dialog .catalog-dialog-body { scroll-padding-block: var(--space-4); }
  .catalog-dialog:is(.is-checkout, .is-success) .catalog-dialog-body { padding-bottom: var(--space-4); }
  .catalog-dialog .catalog-checkout,
  .catalog-dialog [data-cart-enquiry-form],
  .catalog-dialog .catalog-checkout-success { gap: var(--space-4); }
  .catalog-dialog .catalog-checkout-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .catalog-dialog .catalog-checkout-summary { padding: var(--space-4); }
  .catalog-dialog .catalog-checkout-actions { flex-direction: column-reverse; }
  .catalog-dialog .catalog-checkout-actions > .btn { flex: none; width: 100%; }
  .catalog-dialog .catalog-checkout-success { padding-top: var(--space-4); }
  .catalog-dialog .catalog-checkout-success > .btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea) { transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-dialog .catalog-checkout-fields .field :is(input, select, textarea),
  .catalog-dialog .catalog-checkout-actions > .btn,
  .catalog-dialog .catalog-checkout-success > .btn { transition: none; animation: none; }
}