/* Generic dialog theme */

/* Ensure the dialog is not wider than a mobile device width */
div.ui-dialog.commerce-confirmation-popup {
  max-width: 100%;
}

/* layout buttons horizontally on desktop, but vertically on mobile */
div.ui-dialog.commerce-confirmation-popup div.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/**
  We need to do this, to override the ui-widget-content a color override.
 */
div.ui-dialog.commerce-confirmation-popup.ui-widget-content a.button {
  color: var(--color-text-primary-medium);
}

div.ui-dialog.commerce-confirmation-popup.ui-widget-content a.button:hover {
  color: var(--color-text-primary-loud);
}

/* Close button */
div.ui-dialog.commerce-confirmation-popup button.ui-dialog-titlebar-close {
  border-radius: 20px;
}

.commerce-confirmation-popup .views-row .views-field {
  display: flex;
  flex-direction: column;
}

.commerce-confirmation-popup .views-row .field:not(:last-child) {
  margin-block-end: 0;
}

div.ui-dialog.commerce-confirmation-popup .view-content .views-label {
  font-weight: bold;
}