/* Page layer: layout and responsive grid for Whalet Checkout page */

.whalet-checkout__container {
  display: flex;
  gap: var(--whalet-spacing-sm);
  align-items: flex-start;
  justify-content: center;
  min-height: 80vh;
  margin: 0 auto;
  padding: 0 var(--whalet-spacing-md);
  width: min(92vw, 75rem);
}

.whalet-checkout__left {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  margin: 0 !important;
}

.whalet-checkout__right {
  flex: 1;
  min-width: 0;
  background: var(--whalet-color-bg);
  border: 1px solid var(--whalet-color-border);
  border-radius: var(--whalet-radius-md);
  margin: 0 !important;
}

/* Mobile: stack columns */
@media (max-width: 30rem) {
  .whalet-checkout__container { flex-direction: column; gap: var(--whalet-spacing-md); }
  .whalet-checkout__left,
  .whalet-checkout__right { width: 100%; }
}

/* Tablet: comfortable spacing */
@media (min-width: 30.0625rem) and (max-width: 48rem) {
  .whalet-checkout__container { gap: var(--whalet-spacing-md); width: min(94vw, 64rem); }
}

/* Desktop: wider layout */
@media (min-width: 48.0625rem) {
  .whalet-checkout__container { gap: var(--whalet-spacing-lg); }
}