/* ==========================================================================
   Checkout Dialog Styles
   ========================================================================== */

.checkout-dialog {
  font-family: 'Roboto', sans-serif;
}

.checkout-dialog .mud-dialog-content {
  padding: 0 0 24px 0;
}

.checkout-dialog .mud-stepper {
  margin-top: -8px;
}

/* Equal height columns in Step 2 */
.checkout-dialog .mud-grid {
  align-items: stretch;
}

.checkout-dialog .mud-grid .mud-grid-item {
  display: flex;
}

.checkout-dialog .mud-grid .mud-paper {
  flex: 1;
}

/* ==========================================================================
   Payment Method Chips (Touch-friendly)
   ========================================================================== */

.payment-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.payment-method-box {
  min-height: 56px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--mud-palette-lines-default) !important;
  border-radius: 8px !important;
}

.payment-method-box.selected {
  border-color: var(--mud-palette-primary) !important;
  border-width: 2px !important;
  background-color: var(--mud-palette-primary) !important;
  color: white !important;
}

.payment-method-popover-btn {
  min-height: 56px !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   Denomination Chips
   ========================================================================== */

.denomination-chip {
  font-weight: 600;
  font-size: 1rem;
  min-height: 48px;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .denomination-chip {
    white-space: normal;
    word-break: break-word;
  }
}

/* ==========================================================================
   Change Dialog Styles
   ========================================================================== */

.change-dialog {
  text-align: center;
}

.change-amount-display {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  border: 2px solid var(--mud-palette-success);
  border-radius: 12px;
  min-width: 250px;
}

/* Container for Step 2 content. Width matches the payment panel from Step 1
   to maintain visual consistency during step transitions. */
.checkout-dialog-step2-container{
    outline: none;
    width: 382px;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 600px) {
  .checkout-dialog {
    width: 100% !important;
  }

  .checkout-dialog-step2-container {
    width: 100%;
  }
}