/* DSP calculator */
.dsp-calculator .dsp-row {
  margin-bottom: 10px;

  /* NEW: 3 inputs side-by-side on desktop */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

/* Mobile: stack */
@media (max-width: 380px) {
  .dsp-calculator .dsp-row {
    grid-template-columns: 1fr;
  }
}

.dsp-calculator .dsp-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
  opacity: 0.85;
}

/* Make inputs not ridiculously wide inside columns */
.dsp-calculator input[type="number"],
.dsp-calculator input[type="text"],
.dsp-calculator select {
  width: 100%;
  max-width: 220px; /* keeps them compact on very wide layouts */
}

@media (max-width: 768px) {
  .dsp-calculator input[type="number"],
  .dsp-calculator input[type="text"],
  .dsp-calculator select {
    max-width: none;
  }
}

/* Result line */
.dsp-calculator .dsp-result {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

/* Optional: small hint block under inputs (if template has it) */
.dsp-calculator .dsp-hint {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-top: 6px;
}

/* Peida ainult native quantity input UI; ära peida add-to-cart nuppu */
.has-dsp-calculator #quantity_wanted {
  display: none !important;
}
.has-dsp-calculator .bootstrap-touchspin,
.has-dsp-calculator .product-quantity .input-group {
  display: none !important;
}

/* 3 columns on desktop, stack on mobile */
.dsp-calculator .dsp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

@media (max-width: 380px) {
  .dsp-calculator .dsp-grid{
    grid-template-columns: 1fr;
  }
}

/* each field: keep label + input nicely */
.dsp-calculator .dsp-field .dsp-label{
  display:block;
  margin-bottom: 4px;
}

/* compact but responsive */
.dsp-calculator .dsp-input{
  width: 100%;
  max-width: 220px;
  border-radius: 5px !important;
}


/* Unit inside width/height inputs */
.dsp-calculator .dsp-unitwrap{
  position: relative;
  width: 100%;
  max-width: 220px;
}
@media (max-width: 768px) {
  .dsp-calculator .dsp-unitwrap{
    max-width: none;
  }
}
.dsp-calculator .dsp-unitwrap .dsp-input{
  max-width: none;
  padding-right: 2.4rem; /* room for unit */
}
.dsp-calculator .dsp-unitwrap .dsp-unit{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 0.9em;
  pointer-events: none;
}

@media (max-width: 768px) {
  .dsp-calculator .dsp-input{
    max-width: none;
  }
}

/* make columns align nicely even when only one field has a hint */
.dsp-calculator .dsp-field{
  display: flex;
  flex-direction: column;
}

/* reserve space for hint line in ALL fields */
.dsp-calculator .dsp-hint{
  min-height: 18px;   /* enough for one small line */
  margin-top: 6px;
}

/* if a field has no hint element, still reserve space */
.dsp-calculator .dsp-field::after{
  content: "";
  display: block;
  min-height: 18px;
  margin-top: 6px;
}

/* but if hint exists, don't double-reserve */
.dsp-calculator .dsp-field:has(.dsp-hint)::after{
  display: none;
}

/* tighter padding like customization block */
.dsp-calculator.card .card-body{
  padding: 0.7rem 0.7rem 0.7rem;
}

/* FIX: ära joonda veerge "bottom" järgi — muidu hintiga veerg tõstab inputi üles */
.dsp-calculator .dsp-grid{
  align-items: start !important;
}

/* Theme overrides mt-3 too aggressively; fix spacing only for DSP calculator */
.dsp-calculator.mt-3 {
  margin-top: 0.5rem !important; /* vali sobiv: 0.5–1rem */
}

/* Theme overrides .mt-1 too aggressively (1rem !important).
   Fix spacing only for DSP calculator hints. */
.dsp-calculator .dsp-hint.mt-1 {
  margin-top: 0.2rem !important; 
}

/* Round submit/buttons only on product pages that have DSP calculator */
.has-dsp-calculator button,
.has-dsp-calculator .btn,
.has-dsp-calculator input[type="submit"],
.has-dsp-calculator [data-button-action="add-to-cart"] {
  border-radius: 5px !important;
}

/* Keep DSP wrapper visible also on small screens (some themes flatten cards on mobile) */
.dsp-calculator.card {
  background: #fff !important;
  /*border-radius: 8px !important; */
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

.dsp-calculator.card .card-body{
  background: transparent !important;
}