/* Product quote calculator stack: the two calculators are independent cards. */

/* Size the upload area from its contents; progress must not feed back into a
   percentage height or get clipped below the card. */
#quotePage .quote-system-page .upload-card {
  height: auto !important;
  display: flex;
  flex-direction: column;
}
#quotePage .quote-system-page .upload-card .drop-zone {
  height: auto !important;
  flex: 1 0 auto;
  align-content: center;
}

#quotePage .quote-image-import-progress {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #b8d9d4;
  border-radius: 12px;
  background: #f0faf7;
  color: #155f56;
  font-size: 13px;
}
#quotePage .quote-image-import-progress[hidden],
#quotePage .quote-image-import-progress [hidden] { display: none !important; }
#quotePage .quote-image-import-progress progress {
  display: block;
  width: 100%;
  height: 12px;
  margin: 10px 0;
  accent-color: #0b7a75;
}
#quotePage .quote-image-import-current { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
#quotePage .quote-image-import-activity {
  flex: 0 0 12px;
  height: 12px;
  border: 2px solid #b8d9d4;
  border-top-color: #0b7a75;
  border-radius: 50%;
  animation: quote-import-spin 1s linear infinite;
}
#quotePage .quote-image-import-progress details { margin-top: 10px; }
#quotePage .quote-image-import-progress pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: inherit; }
@keyframes quote-import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #quotePage .quote-image-import-activity { animation: none; } }

#productQuotePage .inline-product-quote-layout > #quickCalcPanel.quote-calculator-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#productQuotePage #quickCalcPanel.quote-calculator-stack > .muted {
  margin: 0 4px 2px !important;
}

#productQuotePage #quickCalcPanel.quote-calculator-stack > .calc-card {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(14, 79, 74, .08) !important;
}

#productQuotePage #quickCalcPanel.quote-calculator-stack > .product-calc-card {
  background: linear-gradient(180deg, #f2f8fc 0%, #ffffff 100%) !important;
  border: 1px solid #c9dde9 !important;
}

#productQuotePage #quickCalcPanel.quote-calculator-stack > .free-calc-card {
  background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%) !important;
  border: 1px solid #edd8b4 !important;
}

#productQuotePage #quickCalcPanel.quote-calculator-stack > .calc-card + .calc-card {
  margin-top: 0 !important;
  padding-top: 14px !important;
}