/* Box Orders configurator: only what the theme stylesheet does not already say. */
.dnr-quote-error {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #b91c1c;
}

.dnr-quantity-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #b91c1c;
}

.dnr-configurator .instabox-action-card__primary-btn[disabled],
.dnr-configurator .instabox-action-card__outline-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* On the design page the panel lives in the Edit Box Parameters modal and
   the design/dieline card belongs to the product page. */
.dnr-configurator--design #configurator_action_button,
.dnr-configurator--design .design-insta-logo {
  display: none;
}

.dnr-params-modal .modal-dialog {
  max-width: 720px;
}

.dnr-params-modal .modal-body .dnr-configurator {
  margin: 0;
}

.dnr-params-modal .project-name-field {
  margin-bottom: 16px;
}

.dnr-params-modal .project-name-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.dnr-params-modal .project-name-field input {
  width: 100%;
}

.dnr-working-note {
  margin-top: 10px;
  font-size: 13px;
  color: #475569;
}

/* The design page stage. The SDK is created with iframeHeight "auto" and
   sizes its own iframe to its content, which leaves the designer a strip at
   the top of a full-height stage. The product page fills it via the theme's
   .dnr-box-preview rules; this is the same for the design page, where the old
   plugin used to force heights from JavaScript. */
.page-template-design-instabox-page #configurator-container {
  display: flex;
  flex-direction: column;
}

.page-template-design-instabox-page #configurator-container > iframe,
.page-template-design-instabox-page #configurator-container iframe {
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  border: 0;
}