.udpwc-linewrap{
  margin: 10px 0 0;
  --udpwc-soft: rgba(0,0,0,.14);
  --udpwc-bg: #fff;
  --udpwc-radius: 999px; /* fully rounded pills */
}
.udpwc-linewrap, .udpwc-linewrap *{ box-sizing: border-box; }
.udpwc-linewrap button,
.udpwc-linewrap input,
.udpwc-linewrap select{
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

/* Under-price approx line (below Woo price) */
.udpwc-approx-under-price{
  margin-top: 6px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}
.udpwc-approx-under-price .udpwc-approxlabel{ font-weight: 800; opacity: .92; }
.udpwc-approx-under-price .udpwc-approxamount{ font-weight: 900; }
.udpwc-approx-under-price .udpwc-approxunit{ font-weight: 800; opacity: .9; }

/* Estimator row */
.udpwc-estrow{
  display: inline-flex;
  align-items: center;
  gap: 12px; /* more breathing room */
  flex-wrap: nowrap;
  width: 100%;
}
.udpwc-toggle{
  display: inline-flex;
  border: 1px solid var(--udpwc-soft);
  border-radius: var(--udpwc-radius);
  padding: 2px;
  background: rgba(255,255,255,.85);
  flex: 0 0 auto;
}
.udpwc-tbtn{
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--udpwc-radius);
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  white-space: nowrap;
}
.udpwc-tbtn.is-active{
  border-color: rgba(0,0,0,.35);
  font-weight: 900;
  opacity: 1;
}

.udpwc-fieldsline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.udpwc-hidden{ display:none !important; }

/* Inputs: compact + LEFT aligned + remove number spinners (fixes red empty area) */
.udpwc-in{
  height: 34px;
  width: 6ch;           /* JS will auto-size */
  min-width: 5ch;
  max-width: 12ch;
  border: 1px solid var(--udpwc-soft);
  border-radius: var(--udpwc-radius);
  padding: 6px 10px;
  font-size: 13px;
  background: var(--udpwc-bg);
  text-align: center !important; /* centered like reference */
}
.udpwc-in::-webkit-outer-spin-button,
.udpwc-in::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.udpwc-in[type=number]{
  -moz-appearance: textfield;
}

.udpwc-x{
  font-weight: 900;
  opacity: .7;
  font-size: 13px;
}

/* Select: compact, fully rounded, same height, arrow visible */
.udpwc-linewrap select.udpwc-sel{
  height: 34px;
  width: auto !important;
  min-width: 58px;
  max-width: 88px;
  border: 1px solid var(--udpwc-soft);
  border-radius: var(--udpwc-radius);
  padding: 6px 30px 6px 12px;
  font-size: 13px;
  background-color: var(--udpwc-bg);
  display: inline-block;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  text-align: left !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Output */
.udpwc-out{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.udpwc-outmeta,
.udpwc-outlabel,
.udpwc-outprice{
  font-size: 14px;
}
.udpwc-outmeta{ font-weight: 800; opacity: .9; }
.udpwc-outlabel{ font-weight: 900; opacity: .9; }
.udpwc-outprice{ font-weight: 900; }

.udpwc-note{
  margin-top: 10px;
  font-size: 13px;
  opacity: .82;
  line-height: 1.35;
}

/* Medium: allow clean wrap so no overlap */
@media (max-width: 980px){
  .udpwc-estrow{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .udpwc-out{
    width: 100%;
    margin-left: 0;
  }
}

/* Mobile */
@media (max-width: 640px){
  .udpwc-fieldsline{
    width: 100%;
    flex-wrap: wrap;
  }
  .udpwc-in{ width: 100% !important; max-width: none; }
  .udpwc-linewrap select.udpwc-sel{ width: 100% !important; max-width: none; }
  .udpwc-out{
    width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px;
  }
}


.udpwc-in::placeholder{opacity:.7;}


.udpwc-in.udpwc-in--pct{
  flex: 1 1 33%;
  width: 33% !important;
  min-width: 90px;
  max-width: 35%;
  text-align: center !important;
}

/* Ensure output never overlaps; it will wrap cleanly below if needed */
.udpwc-estrow{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
}
.udpwc-fieldsline{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: auto;
}
.udpwc-out{
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* If row gets tight, push output to next line to avoid overlap */
@media (max-width: 1100px){
  .udpwc-fieldsline{ width: 100%; flex-wrap: nowrap; }
  .udpwc-out{ width: 100%; margin-left: 0; }
}

/* Mobile keeps full width */
@media (max-width: 640px){
  .udpwc-in.udpwc-in--pct{
    width: 100% !important;
    max-width: none;
    flex-basis: 100%;
  }
}


}


}


/* FIX: Total area / Length / Height capsules should NOT become huge */
.udpwc-in{ flex: 0 0 auto !important; width: auto !important; }
.udpwc-in.udpwc-in--pct{
  width: 10ch !important;
  min-width: 9ch;
  max-width: 12ch;
  text-align: center !important;
}

/* If placeholder is longer, keep it neat */
.udpwc-in{
  overflow: hidden;
}

/* FIX: Estimated output must never look like an input/pill */
.udpwc-out,
.udpwc-out *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.udpwc-out{ display: inline-flex; gap: 10px; align-items: baseline; }

/* Layout: prevent overlap */
.udpwc-estrow{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.udpwc-fieldsline{
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.udpwc-out{ margin-left: auto; white-space: nowrap; }

/* Push output below when space is tight */
@media (max-width: 980px){
  .udpwc-fieldsline{ width: 100%; }
  .udpwc-out{ width: 100%; margin-left: 0; }
}

/* Mobile: full width fields */
@media (max-width: 640px){
  .udpwc-in,
  .udpwc-in.udpwc-in--pct{
    width: 100% !important;
    max-width: none;
  }
}


/* v1.0.18 layout polish: keep inputs grouped, avoid huge gaps, align Estimated cleanly */
.udpwc-estrow{
  justify-content: space-between;
}
.udpwc-fieldsline{
  flex: 1 1 auto;
  min-width: 0;
}

/* Make LxW inputs consistent and not too wide */
.udpwc-in{
  width: 11ch !important;
  min-width: 9ch;
  max-width: 12ch;
}
.udpwc-in.udpwc-in--pct{
  width: 11ch !important;
  min-width: 9ch;
  max-width: 12ch;
}

/* Keep unit select close, compact */
.udpwc-linewrap select.udpwc-sel{
  min-width: 6ch;
  max-width: 8ch;
}

/* Estimated block: right aligned and never floats oddly */
.udpwc-out{
  text-align: right;
}
.udpwc-outmeta, .udpwc-outlabel, .udpwc-outprice{
  display: inline;
}

/* Wrap behavior: on medium widths, put Estimated on new line but aligned right */
@media (max-width: 980px){
  .udpwc-fieldsline{
    width: 100%;
    flex-wrap: nowrap;
  }
  .udpwc-out{
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* On small screens, allow fields to wrap nicely */
@media (max-width: 640px){
  .udpwc-fieldsline{
    flex-wrap: wrap;
  }
  .udpwc-x{ margin: 0 2px; }
}


/* v1.0.19: keep "Estimated" on the same line (no wrap) by shrinking fields when needed */
@media (min-width: 641px){
  .udpwc-estrow{
    flex-wrap: nowrap !important;
    align-items: center;
  }
  .udpwc-fieldsline{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
  }
  .udpwc-in,
  .udpwc-linewrap select.udpwc-sel{
    flex: 0 1 auto;
    min-width: 0;
  }
  .udpwc-out{
    flex: 0 0 auto;
    white-space: nowrap !important;
  }
}


/* Shop / archive card approx line */
.udpwc-loop-approx{
  margin-top: 4px;
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}
.udpwc-loop-approx .udpwc-loop-label{ font-weight: 700; opacity: .9; }
.udpwc-loop-approx .udpwc-loop-amount{ font-weight: 800; }
.udpwc-loop-approx .udpwc-loop-unit{ font-weight: 700; opacity: .9; }