@charset "UTF-8";
/* ==========================================================================
   CHECKOUT STYLES - Clean & Modern
   Matching the cart page aesthetic
   ========================================================================== */
/* --------------------------------------------------------------------------
   Design Tokens (matching cart_page.scss)
   -------------------------------------------------------------------------- */
/* line 9, app/assets/stylesheets/checkout_styles.scss */
.checkout {
  --checkout-bg: #FAFBFF;
  --checkout-surface: #FFFFFF;
  --checkout-border: #E5E7EB;
  --checkout-border-light: #F3F4F6;
  --checkout-text: #111827;
  --checkout-text-secondary: #6B7280;
  --checkout-text-muted: #9CA3AF;
  --checkout-accent: #111827;
  --checkout-accent-hover: #374151;
  --checkout-success: #059669;
  --checkout-warning: #D97706;
  --checkout-danger: #DC2626;
  --checkout-radius-sm: 4px;
  --checkout-radius-md: 8px;
  --checkout-radius-lg: 12px;
  --checkout-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --checkout-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --checkout-transition: 0.15s ease;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  background: var(--checkout-bg);
}

/* --------------------------------------------------------------------------
   Form Content - Centered to match progress bar width
   -------------------------------------------------------------------------- */
/* line 42, app/assets/stylesheets/checkout_styles.scss */
.checkout-form-content {
  max-width: 480px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Cards & Surfaces
   -------------------------------------------------------------------------- */
/* line 50, app/assets/stylesheets/checkout_styles.scss */
.checkout .cart-card {
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-lg);
  box-shadow: var(--checkout-shadow-sm);
  padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   Links & Buttons
   -------------------------------------------------------------------------- */
/* line 61, app/assets/stylesheets/checkout_styles.scss */
.checkout a {
  color: var(--checkout-text);
  transition: color var(--checkout-transition);
}

/* line 66, app/assets/stylesheets/checkout_styles.scss */
.checkout a:hover {
  color: var(--checkout-accent-hover);
}

/* line 70, app/assets/stylesheets/checkout_styles.scss */
.checkout button {
  transition: all var(--checkout-transition);
  cursor: pointer;
}

/* line 75, app/assets/stylesheets/checkout_styles.scss */
.checkout button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Pills & Badges
   -------------------------------------------------------------------------- */
/* line 83, app/assets/stylesheets/checkout_styles.scss */
.checkout-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--checkout-radius-sm);
  background: var(--checkout-border-light);
  color: var(--checkout-text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--checkout-border);
}

/* line 98, app/assets/stylesheets/checkout_styles.scss */
.checkout-pill--muted {
  background: var(--checkout-border-light);
  color: var(--checkout-text-secondary);
  border-color: var(--checkout-border);
}

/* line 104, app/assets/stylesheets/checkout_styles.scss */
.checkout-pill--success {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

/* line 110, app/assets/stylesheets/checkout_styles.scss */
.checkout-pill--warning {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FCD34D;
}

/* line 116, app/assets/stylesheets/checkout_styles.scss */
.checkout-pill svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   Prices
   -------------------------------------------------------------------------- */
/* line 124, app/assets/stylesheets/checkout_styles.scss */
.checkout-price {
  font-variant-numeric: tabular-nums;
  color: var(--checkout-text);
}

/* line 129, app/assets/stylesheets/checkout_styles.scss */
.checkout-price--muted {
  color: var(--checkout-text-muted);
}

/* line 133, app/assets/stylesheets/checkout_styles.scss */
.checkout-price--credit {
  color: var(--checkout-success);
}

/* line 137, app/assets/stylesheets/checkout_styles.scss */
.checkout-price--total {
  font-family: 'Inter Semibold', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}

/* line 143, app/assets/stylesheets/checkout_styles.scss */
.checkout-free-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--checkout-radius-sm);
  background: #ECFDF5;
  color: #047857;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #A7F3D0;
}

/* --------------------------------------------------------------------------
   Total Row
   -------------------------------------------------------------------------- */
/* line 161, app/assets/stylesheets/checkout_styles.scss */
.checkout-total-row {
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--checkout-radius-md);
  background: var(--checkout-border-light);
  border: 1px solid var(--checkout-border);
}

/* --------------------------------------------------------------------------
   Order Summary
   -------------------------------------------------------------------------- */
/* line 172, app/assets/stylesheets/checkout_styles.scss */
.checkout-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 178, app/assets/stylesheets/checkout_styles.scss */
.checkout-summary li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--checkout-border-light);
  transition: background var(--checkout-transition);
}

/* line 184, app/assets/stylesheets/checkout_styles.scss */
.checkout-summary li:last-child {
  border-bottom: none;
}

/* line 188, app/assets/stylesheets/checkout_styles.scss */
.checkout-summary li:hover {
  background: rgba(0, 0, 0, 0.01);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
/* line 195, app/assets/stylesheets/checkout_styles.scss */
.checkout-content {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  /* line 203, app/assets/stylesheets/checkout_styles.scss */
  .checkout-content {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  }
  /* line 209, app/assets/stylesheets/checkout_styles.scss */
  .checkout-section--summary {
    align-self: start;
  }
}

/* line 214, app/assets/stylesheets/checkout_styles.scss */
.checkout-content.no-summary {
  grid-template-columns: 1fr !important;
}

/* line 218, app/assets/stylesheets/checkout_styles.scss */
.checkout-section--summary .order-summary-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Section Legends
   -------------------------------------------------------------------------- */
/* line 228, app/assets/stylesheets/checkout_styles.scss */
.section-legend {
  font-family: 'Inter Medium', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--checkout-text);
  margin: 0 0 0.75rem 0;
}

/* line 237, app/assets/stylesheets/checkout_styles.scss */
.address-step {
  gap: 0.75rem !important;
}

/* line 240, app/assets/stylesheets/checkout_styles.scss */
.address-step .section-legend {
  margin-bottom: 0;
}

/* line 246, app/assets/stylesheets/checkout_styles.scss */
.address-inputs {
  max-width: 520px;
}

/* --------------------------------------------------------------------------
   Form Fields - Base (global, used by auth pages)
   -------------------------------------------------------------------------- */
/* line 253, app/assets/stylesheets/checkout_styles.scss */
.form-field {
  margin-bottom: 1rem;
}

/* line 257, app/assets/stylesheets/checkout_styles.scss */
.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6B7280;
  margin-bottom: 0.375rem;
}

/* line 265, app/assets/stylesheets/checkout_styles.scss */
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  background: #FFFFFF;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: 44px;
  box-sizing: border-box;
}

/* line 280, app/assets/stylesheets/checkout_styles.scss */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #6B7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* line 288, app/assets/stylesheets/checkout_styles.scss */
.form-field input::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder {
  color: #9CA3AF;
}

/* line 294, app/assets/stylesheets/checkout_styles.scss */
.form-field textarea {
  min-height: 100px;
  height: auto;
  resize: vertical;
}

/* Floating label styles - Base (global) */
/* line 301, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label {
  position: relative;
}

/* line 305, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label input,
.form-field.floating-label select,
.form-field.floating-label textarea {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  min-height: 56px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  transition: border-color 0.1s ease;
}

/* line 316, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label label {
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  font-size: 0.7rem;
  color: #9CA3AF;
  background: #FFFFFF;
  padding: 0 0.25rem;
  pointer-events: none;
  z-index: 1;
  transition: none;
}

/* line 329, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label input:placeholder-shown ~ label,
.form-field.floating-label textarea:placeholder-shown ~ label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #9CA3AF;
}

/* line 337, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label input:not(:placeholder-shown) ~ label,
.form-field.floating-label input:focus ~ label,
.form-field.floating-label textarea:not(:placeholder-shown) ~ label,
.form-field.floating-label textarea:focus ~ label {
  top: 0.25rem;
  transform: none;
  font-size: 0.7rem;
  color: #6B7280;
  font-weight: 500;
}

/* Select elements: hide label when no value selected (like placeholder-shown for inputs) */
/* line 349, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label select:not(.has-value) ~ label {
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #9CA3AF;
}

/* Select elements: show floating label when value is selected or focused */
/* line 357, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label select.has-value ~ label,
.form-field.floating-label select:focus ~ label {
  top: 0.25rem;
  transform: none;
  font-size: 0.7rem;
  color: #6B7280;
  font-weight: 500;
}

/* line 366, app/assets/stylesheets/checkout_styles.scss */
.form-field.floating-label input:focus,
.form-field.floating-label select:focus,
.form-field.floating-label textarea:focus {
  border-color: #6B7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* --------------------------------------------------------------------------
   Form Fields - Checkout overrides (uses CSS variables)
   -------------------------------------------------------------------------- */
/* line 376, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field input,
.checkout .form-field select,
.checkout .form-field textarea {
  border-color: var(--checkout-border);
  background: var(--checkout-surface);
  color: var(--checkout-text);
  border-radius: var(--checkout-radius-sm);
}

/* line 385, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field input:focus,
.checkout .form-field select:focus,
.checkout .form-field textarea:focus {
  border-color: var(--checkout-text-secondary);
}

/* line 391, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field label {
  color: var(--checkout-text-secondary);
}

/* line 395, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field.floating-label input,
.checkout .form-field.floating-label select,
.checkout .form-field.floating-label textarea {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
  visibility: visible !important;
  opacity: 1 !important;
}

/* line 404, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field.floating-label label {
  color: var(--checkout-text-muted);
  background: var(--checkout-surface);
}

/* line 409, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field.floating-label input:not(:placeholder-shown) ~ label,
.checkout .form-field.floating-label input:focus ~ label,
.checkout .form-field.floating-label select.has-value ~ label,
.checkout .form-field.floating-label select:focus ~ label,
.checkout .form-field.floating-label textarea:not(:placeholder-shown) ~ label,
.checkout .form-field.floating-label textarea:focus ~ label {
  color: var(--checkout-text-secondary);
}

/* Required field indicator (checkout only) */
/* line 419, app/assets/stylesheets/checkout_styles.scss */
.checkout .form-field input[required] ~ label::after,
.checkout .form-field select[required] ~ label::after,
.checkout .form-field textarea[required] ~ label::after {
  content: ' *';
  color: var(--checkout-danger);
}

/* For non-floating labels where label comes before input */
/* line 427, app/assets/stylesheets/checkout_styles.scss */
.checkout .text-input label:has(+ input[required])::after,
.checkout .text-input label:has(+ select[required])::after {
  content: ' *';
  color: var(--checkout-danger);
}

/* --------------------------------------------------------------------------
   Form Grid Layout
   -------------------------------------------------------------------------- */
/* line 436, app/assets/stylesheets/checkout_styles.scss */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 640px) {
  /* line 436, app/assets/stylesheets/checkout_styles.scss */
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* line 446, app/assets/stylesheets/checkout_styles.scss */
.form-row.three-columns {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}

@media (max-width: 768px) {
  /* line 446, app/assets/stylesheets/checkout_styles.scss */
  .form-row.three-columns {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* line 457, app/assets/stylesheets/checkout_styles.scss */
.form-row.three-columns .form-field.floating-label input,
.form-row.three-columns .form-field.floating-label select {
  height: 56px;
  min-height: 56px;
  width: 100%;
}

/* line 466, app/assets/stylesheets/checkout_styles.scss */
.form-row .text-input {
  margin-bottom: 0;
}

/* line 469, app/assets/stylesheets/checkout_styles.scss */
.form-row .text-input label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--checkout-text-secondary);
}

/* line 477, app/assets/stylesheets/checkout_styles.scss */
.form-row .text-input input,
.form-row .text-input select {
  height: 56px;
  padding: 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm);
  background: var(--checkout-surface);
}

/* line 487, app/assets/stylesheets/checkout_styles.scss */
.form-row .text-input input:focus,
.form-row .text-input select:focus {
  outline: none;
  border-color: var(--checkout-accent);
}

/* line 493, app/assets/stylesheets/checkout_styles.scss */
.form-row .text-input input::placeholder {
  color: var(--checkout-text-muted);
  font-size: 0.875rem;
}

/* line 500, app/assets/stylesheets/checkout_styles.scss */
.address-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
}

/* --------------------------------------------------------------------------
   Text Input (legacy support)
   -------------------------------------------------------------------------- */
/* line 510, app/assets/stylesheets/checkout_styles.scss */
.text-input {
  margin-bottom: 1rem;
}

/* line 514, app/assets/stylesheets/checkout_styles.scss */
.text-input label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--checkout-text-secondary);
  margin-bottom: 0.375rem;
}

/* line 522, app/assets/stylesheets/checkout_styles.scss */
.text-input input,
.text-input select,
.text-input textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm);
  background: var(--checkout-surface);
  color: var(--checkout-text);
  transition: border-color var(--checkout-transition);
  height: 56px;
  box-sizing: border-box;
}

/* line 537, app/assets/stylesheets/checkout_styles.scss */
.text-input input:focus,
.text-input select:focus,
.text-input textarea:focus {
  outline: none;
  border-color: var(--checkout-text-secondary);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* line 545, app/assets/stylesheets/checkout_styles.scss */
.text-input textarea {
  min-height: 100px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Checkbox & Radio
   -------------------------------------------------------------------------- */
/* line 553, app/assets/stylesheets/checkout_styles.scss */
.checkbox-input,
.radio-input {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--checkout-text);
  cursor: pointer;
}

/* line 563, app/assets/stylesheets/checkout_styles.scss */
.textarea-input {
  margin-bottom: 1rem;
}

/* line 567, app/assets/stylesheets/checkout_styles.scss */
.textarea-input label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--checkout-text-secondary);
  margin-bottom: 0.375rem;
}

/* line 575, app/assets/stylesheets/checkout_styles.scss */
.textarea-input textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm);
  background: var(--checkout-surface);
  color: var(--checkout-text);
  transition: border-color var(--checkout-transition);
  min-height: 100px;
  resize: vertical;
}

/* line 588, app/assets/stylesheets/checkout_styles.scss */
.textarea-input textarea:focus {
  outline: none;
  border-color: var(--checkout-text-secondary);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

/* --------------------------------------------------------------------------
   Payment Method Card
   -------------------------------------------------------------------------- */
/* line 597, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card {
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: var(--checkout-surface);
  transition: border-color var(--checkout-transition), box-shadow var(--checkout-transition);
}

/* line 606, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card:hover {
  border-color: var(--checkout-text-muted);
}

/* line 610, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card:has(input[type="radio"]:checked) {
  border-color: #4F46E5;
  box-shadow: 0 0 0 1px #4F46E5;
}

/* line 615, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card .method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
}

/* line 623, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card .method-header input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #4F46E5;
}

/* line 629, app/assets/stylesheets/checkout_styles.scss */
.payment-method-card .method-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--checkout-border-light);
}

/* Single Payment Method - Clean, borderless UI */
/* line 636, app/assets/stylesheets/checkout_styles.scss */
.payment-step__single-method {
  /* No border, padding, or background - just the payment form */
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Shipping Methods
   -------------------------------------------------------------------------- */
/* line 644, app/assets/stylesheets/checkout_styles.scss */
.shipping-methods {
  display: grid;
  gap: 0.5rem;
}

/* line 649, app/assets/stylesheets/checkout_styles.scss */
.shipping-methods__rate label.radio-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  cursor: pointer;
  background: var(--checkout-surface);
  transition: border-color var(--checkout-transition), background var(--checkout-transition);
}

/* line 662, app/assets/stylesheets/checkout_styles.scss */
.shipping-methods__rate label.radio-input:hover {
  border-color: var(--checkout-text-muted);
  background: var(--checkout-border-light);
}

/* line 667, app/assets/stylesheets/checkout_styles.scss */
.shipping-methods__rate label.radio-input:has(input[type="radio"]:checked) {
  border-color: var(--checkout-text);
  background: var(--checkout-border-light);
}

/* line 672, app/assets/stylesheets/checkout_styles.scss */
.shipping-methods__rate label.radio-input:has(input[type="radio"]:checked)::before {
  content: '✓';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--checkout-success);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Progress Indicator
   -------------------------------------------------------------------------- */
/* line 693, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress {
  --progress-active: #111827;
  --progress-complete: #374151;
  --progress-inactive: #E5E7EB;
  margin: 0.5rem auto 0;
  max-width: 480px;
  padding: 0;
}

/* line 703, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__bar {
  position: relative;
  height: 2px;
  margin: 20px 0;
}

/* line 709, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__track {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  bottom: 0;
  background: var(--progress-inactive);
}

/* line 718, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__fill {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  bottom: 0;
  background: var(--progress-complete);
  transform-origin: left center;
  transform: scaleX(var(--progress-ratio, 0));
  transition: transform 0.4s ease;
}

/* line 730, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__steps {
  position: absolute;
  inset: 0;
  pointer-events: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 739, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  pointer-events: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* line 751, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__dot,
.checkout-progress__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

/* line 764, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__dot {
  background: var(--checkout-surface);
  border: 2px solid var(--progress-inactive);
  color: var(--checkout-text-muted);
  transition: all 0.2s ease;
}

/* line 771, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-upcoming .checkout-progress__dot {
  background: var(--checkout-surface);
  border-color: var(--progress-inactive);
  color: var(--checkout-text-muted);
}

/* line 777, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-completed .checkout-progress__dot {
  background: var(--progress-complete);
  border-color: var(--progress-complete);
  color: white;
}

/* line 783, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-completed .checkout-progress__dot::after {
  content: '\2713';
  font-size: 12px;
  font-weight: bold;
}

/* line 789, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-active .checkout-progress__dot {
  background: var(--progress-active);
  border-color: var(--progress-active);
  color: white;
  box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.1);
}

/* line 796, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 802, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-completed .checkout-progress__link .checkout-progress__dot {
  background: var(--progress-complete);
  border-color: var(--progress-complete);
}

/* line 807, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__step.is-completed .checkout-progress__link:hover .checkout-progress__dot {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.15);
}

/* line 811, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__label {
  font-size: 12px;
  color: var(--checkout-text-muted);
  white-space: nowrap;
  text-align: center;
}

/* line 818, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__label.is-active {
  color: var(--checkout-text);
  font-weight: 600;
}

/* line 823, app/assets/stylesheets/checkout_styles.scss */
.checkout-progress__label.is-completed {
  color: var(--progress-complete);
  font-weight: 500;
}

/* Mobile progress */
@media (max-width: 767px) {
  /* line 830, app/assets/stylesheets/checkout_styles.scss */
  .checkout-progress {
    margin: 0.5rem auto 0;
  }
  /* line 834, app/assets/stylesheets/checkout_styles.scss */
  .checkout-progress__dot,
.checkout-progress__link {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  /* line 841, app/assets/stylesheets/checkout_styles.scss */
  .checkout-progress__label {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   Error States
   -------------------------------------------------------------------------- */
/* line 849, app/assets/stylesheets/checkout_styles.scss */
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--checkout-danger);
  background: #FEF2F2;
}

/* line 856, app/assets/stylesheets/checkout_styles.scss */
.field_with_errors label {
  color: var(--checkout-danger);
  font-weight: 600;
}

/* line 861, app/assets/stylesheets/checkout_styles.scss */
.error-message {
  color: var(--checkout-danger);
  font-size: 0.75rem;
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* line 870, app/assets/stylesheets/checkout_styles.scss */
.error-message::before {
  content: '⚠';
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Address Inputs
   -------------------------------------------------------------------------- */
/* line 878, app/assets/stylesheets/checkout_styles.scss */
.address-inputs .form-field {
  margin-bottom: 0.875rem;
}

/* --------------------------------------------------------------------------
   Order Summary Coupon
   -------------------------------------------------------------------------- */
/* line 885, app/assets/stylesheets/checkout_styles.scss */
.order-summary-card .coupon-code {
  margin-bottom: 0.75rem;
}

/* line 889, app/assets/stylesheets/checkout_styles.scss */
.order-summary-card .coupon-code__input input {
  height: 40px;
  border-color: var(--checkout-border);
}

/* --------------------------------------------------------------------------
   Primary Button (matching cart's .vault-checkout__btn)
   -------------------------------------------------------------------------- */
/* line 897, app/assets/stylesheets/checkout_styles.scss */
.checkout .button-primary {
  display: inline-block;
  padding: 0.875rem 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: var(--checkout-accent);
  border: none;
  border-radius: var(--checkout-radius-sm);
  cursor: pointer;
  transition: background var(--checkout-transition);
}

/* line 912, app/assets/stylesheets/checkout_styles.scss */
.checkout .button-primary:hover:not(:disabled) {
  background: var(--checkout-accent-hover);
  transform: none;
}

/* line 917, app/assets/stylesheets/checkout_styles.scss */
.checkout .button-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Order Review Compact Checklist
   -------------------------------------------------------------------------- */
/* line 926, app/assets/stylesheets/checkout_styles.scss */
.compact-checklist {
  width: 100%;
}

/* line 930, app/assets/stylesheets/checkout_styles.scss */
.compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* line 939, app/assets/stylesheets/checkout_styles.scss */
.compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  transition: border-color var(--checkout-transition);
}

/* line 950, app/assets/stylesheets/checkout_styles.scss */
.compact-row:hover {
  border-color: var(--checkout-text-muted);
}

/* line 955, app/assets/stylesheets/checkout_styles.scss */
.compact-left {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

/* line 963, app/assets/stylesheets/checkout_styles.scss */
.compact-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--checkout-text-muted);
}

/* line 971, app/assets/stylesheets/checkout_styles.scss */
.compact-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--checkout-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 980, app/assets/stylesheets/checkout_styles.scss */
.edit-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--checkout-text-secondary);
  background: var(--checkout-border-light);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm);
  text-decoration: none;
  transition: all var(--checkout-transition);
  white-space: nowrap;
}

/* line 994, app/assets/stylesheets/checkout_styles.scss */
.edit-chip:hover {
  background: var(--checkout-border);
  color: var(--checkout-text);
}

@media (max-width: 640px) {
  /* line 1001, app/assets/stylesheets/checkout_styles.scss */
  .compact-row {
    padding: 0.75rem;
  }
  /* line 1005, app/assets/stylesheets/checkout_styles.scss */
  .compact-value {
    font-size: 0.8125rem;
  }
  /* line 1009, app/assets/stylesheets/checkout_styles.scss */
  .edit-chip {
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile Checkout Improvements
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Reduce overall padding */
  /* line 1020, app/assets/stylesheets/checkout_styles.scss */
  .checkout {
    padding: 1rem 0;
  }
  /* Reduce card padding on mobile */
  /* line 1025, app/assets/stylesheets/checkout_styles.scss */
  .checkout .cart-card {
    padding: 1rem;
    border-radius: var(--checkout-radius-md);
  }
  /* Reduce wrapper padding */
  /* line 1031, app/assets/stylesheets/checkout_styles.scss */
  .checkout .wrapper {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  /* Reduce form field spacing */
  /* line 1037, app/assets/stylesheets/checkout_styles.scss */
  .checkout .form-field {
    margin-bottom: 0.75rem;
  }
  /* Smaller input heights on mobile */
  /* line 1042, app/assets/stylesheets/checkout_styles.scss */
  .checkout .form-field.floating-label input,
.checkout .form-field.floating-label select,
.checkout .form-field.floating-label textarea {
    min-height: 52px;
    padding-top: 1.125rem;
    font-size: 1rem;
    /* Prevent iOS zoom */
  }
  /* Adjust floating label for smaller inputs */
  /* line 1051, app/assets/stylesheets/checkout_styles.scss */
  .checkout .form-field.floating-label label {
    font-size: 0.65rem;
  }
  /* line 1055, app/assets/stylesheets/checkout_styles.scss */
  .checkout .form-field.floating-label input:placeholder-shown ~ label,
.checkout .form-field.floating-label textarea:placeholder-shown ~ label {
    font-size: 0.8125rem;
  }
  /* Full-width button on mobile */
  /* line 1061, app/assets/stylesheets/checkout_styles.scss */
  .checkout .button-primary {
    width: 100%;
    padding: 1rem;
  }
  /* Address inputs full width */
  /* line 1067, app/assets/stylesheets/checkout_styles.scss */
  .address-inputs {
    max-width: 100%;
    gap: 0.625rem;
  }
  /* Section legend smaller */
  /* line 1073, app/assets/stylesheets/checkout_styles.scss */
  .section-legend {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  /* Reduce order summary spacing */
  /* line 1079, app/assets/stylesheets/checkout_styles.scss */
  .checkout-summary .order-summary-card {
    padding: 0;
  }
  /* Smaller progress bar */
  /* line 1084, app/assets/stylesheets/checkout_styles.scss */
  .checkout-progress {
    margin: 1rem auto 1.5rem;
    padding: 0 0.5rem;
  }
  /* Hide order summary on address step to reduce scroll */
  /* line 1090, app/assets/stylesheets/checkout_styles.scss */
  .checkout-content {
    gap: 1.5rem;
  }
  /* Reduce header spacing */
  /* line 1095, app/assets/stylesheets/checkout_styles.scss */
  .checkout .cart-card header {
    padding-bottom: 0.75rem;
  }
  /* Adjust text-input in form-row and address-inputs */
  /* line 1100, app/assets/stylesheets/checkout_styles.scss */
  .form-row .text-input input,
.form-row .text-input select,
.address-inputs .text-input input,
.address-inputs .text-input select,
.checkout .text-input input,
.checkout .text-input select {
    height: 52px;
    font-size: 1rem;
    /* Prevent iOS zoom */
  }
  /* Ensure text-input labels match */
  /* line 1111, app/assets/stylesheets/checkout_styles.scss */
  .checkout .text-input label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  /* Checkbox styling */
  /* line 1117, app/assets/stylesheets/checkout_styles.scss */
  .checkbox-input {
    font-size: 0.8125rem;
  }
  /* ==========================================================================
     MOBILE TYPOGRAPHY IMPROVEMENTS
     Better hierarchy, spacing, and readability on small screens
     ========================================================================== */
  /* Preorder payment summary - compact on mobile */
  /* line 1127, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    /* Deposit/Full payment boxes */
    /* Payment type labels */
    /* Explanation text */
    /* Amount displays */
    /* Remaining amount notice */
    /* Hide icons on mobile to save space */
  }
  /* line 1131, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary h3.section-legend {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
  }
  /* line 1140, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .space-y-4 > div {
    padding: 0.75rem;
    border-width: 1px;
  }
  /* line 1147, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .rounded-lg {
    padding: 0.75rem;
  }
  /* line 1151, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .flex.items-start.gap-3 {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  /* line 1157, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .font-semibold {
    font-family: 'Inter Medium', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  /* line 1166, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .text-sm,
.preorder-payment-summary p.text-xs,
.preorder-payment-summary p.text-sm {
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.005em;
  }
  /* line 1175, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .text-base,
.preorder-payment-summary .text-lg {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  /* line 1184, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .border-amber-400 {
    padding: 0.625rem 0.75rem;
  }
  /* line 1187, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .border-amber-400 p {
    font-size: 0.8125rem;
    line-height: 1.45;
    letter-spacing: 0.005em;
  }
  /* line 1192, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary .border-amber-400 p strong {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-weight: 600;
  }
  /* line 1200, app/assets/stylesheets/checkout_styles.scss */
  .preorder-payment-summary svg.h-5.w-5 {
    display: none;
  }
  /* Preorder consent section - compact on mobile */
  /* line 1206, app/assets/stylesheets/checkout_styles.scss */
  .preorder-consent-section {
    margin: 1rem 0;
    padding: 1rem;
  }
  /* line 1211, app/assets/stylesheets/checkout_styles.scss */
  .preorder-consent-section .preorder-consent-checkbox label {
    align-items: flex-start;
  }
  /* line 1215, app/assets/stylesheets/checkout_styles.scss */
  .preorder-consent-section .preorder-consent-checkbox span.ml-2,
.preorder-consent-section .preorder-consent-checkbox span.ml-3 {
    margin-left: 0.625rem;
  }
  /* line 1219, app/assets/stylesheets/checkout_styles.scss */
  .preorder-consent-section .preorder-consent-checkbox span.ml-2 strong,
.preorder-consent-section .preorder-consent-checkbox span.ml-3 strong {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 0.375rem;
  }
  /* line 1228, app/assets/stylesheets/checkout_styles.scss */
  .preorder-consent-section .preorder-consent-checkbox span.ml-2 span.text-xs,
.preorder-consent-section .preorder-consent-checkbox span.ml-3 span.text-xs {
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: #4B5563;
  }
  /* Terms and CTA section */
  /* line 1239, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane--cta {
    margin-top: 1rem;
  }
  /* line 1242, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane--cta .terms-and-cta p {
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: #6B7280;
  }
  /* line 1248, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane--cta .terms-and-cta p a {
    font-weight: 500;
  }
  /* Review details section */
  /* line 1255, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane {
    margin-bottom: 1rem;
  }
  /* line 1259, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane .checkout-pane__header h3.section-legend {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
  }
  /* line 1267, app/assets/stylesheets/checkout_styles.scss */
  .checkout-pane .checkout-pane__header .checkout-pane__hint {
    font-size: 0.75rem;
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: #6B7280;
    margin-bottom: 0.625rem;
  }
  /* Payment methods section */
  /* line 1278, app/assets/stylesheets/checkout_styles.scss */
  .payment-step__payment {
    margin-bottom: 1rem;
  }
  /* line 1281, app/assets/stylesheets/checkout_styles.scss */
  .payment-step__payment legend.section-legend {
    font-family: 'Inter Semibold', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  /* line 1288, app/assets/stylesheets/checkout_styles.scss */
  .payment-step__payment .checkout-pane__hint {
    font-size: 0.75rem;
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: #6B7280;
    margin-bottom: 0.75rem;
  }
  /* line 1296, app/assets/stylesheets/checkout_styles.scss */
  .payment-step__payment .payment-method-card {
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    /* Payment method label */
  }
  /* line 1301, app/assets/stylesheets/checkout_styles.scss */
  .payment-step__payment .payment-method-card .method-header {
    font-family: 'Inter Medium', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
  }
  /* Compact checklist typography (Review Details section) */
  /* line 1311, app/assets/stylesheets/checkout_styles.scss */
  .compact-checklist .compact-row {
    padding: 0.625rem 0.75rem;
  }
  /* line 1315, app/assets/stylesheets/checkout_styles.scss */
  .compact-checklist .compact-label {
    font-family: 'Inter Medium', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9CA3AF;
  }
  /* line 1324, app/assets/stylesheets/checkout_styles.scss */
  .compact-checklist .compact-value {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #374151;
  }
  /* line 1330, app/assets/stylesheets/checkout_styles.scss */
  .compact-checklist .edit-chip {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Flash Messages
   -------------------------------------------------------------------------- */
/* line 1341, app/assets/stylesheets/checkout_styles.scss */
.flash-messages {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* Handle flash messages rendered directly in main (without wrapper) */
/* line 1348, app/assets/stylesheets/checkout_styles.scss */
main > .flash {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 1rem 1.25rem;
  margin-left: clamp(1rem, 4vw, 2rem);
  margin-right: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 1248px) {
  /* line 1348, app/assets/stylesheets/checkout_styles.scss */
  main > .flash {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(1200px - 4rem);
  }
}

/* line 1362, app/assets/stylesheets/checkout_styles.scss */
.flash {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* line 1372, app/assets/stylesheets/checkout_styles.scss */
.flash:last-child {
  margin-bottom: 0;
}

/* line 1377, app/assets/stylesheets/checkout_styles.scss */
.flash.error, .flash.alert {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* line 1383, app/assets/stylesheets/checkout_styles.scss */
.flash.error::before, .flash.alert::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23DC2626'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* line 1395, app/assets/stylesheets/checkout_styles.scss */
.flash.success, .flash.notice {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

/* line 1401, app/assets/stylesheets/checkout_styles.scss */
.flash.success::before, .flash.notice::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316A34A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* line 1413, app/assets/stylesheets/checkout_styles.scss */
.flash.warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

/* line 1418, app/assets/stylesheets/checkout_styles.scss */
.flash.warning::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23D97706'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* line 1430, app/assets/stylesheets/checkout_styles.scss */
.flash.info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

/* line 1435, app/assets/stylesheets/checkout_styles.scss */
.flash.info::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563EB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}