/* Weorex Shipment Calculator 2.0 – clean black & white, matches the site style */
.wx-calc {
  box-sizing: border-box;
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 28px;
  background: #fff;
  color: #111;
  border: 1px solid #ececec;
  border-radius: 12px;
  font-family: inherit;
}
.wx-calc *, .wx-calc *::before, .wx-calc *::after { box-sizing: border-box; }
.wx-calc__title { margin: 0 0 6px; font-size: 1.4rem; font-weight: 700; }
.wx-calc__hint { margin: 0 0 22px; color: #555; font-size: .95rem; }

.wx-calc__options { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
.wx-calc__load { border: 0; margin: 0; padding: 0; }
.wx-calc__load legend { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.wx-calc__load label { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.wx-calc__load input { accent-color: #000; width: 17px; height: 17px; }
.wx-calc__container { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; }
.wx-calc__container[hidden] { display: none; }
.wx-calc select, .wx-calc input[type="text"], .wx-calc input[type="number"] {
  width: 100%; padding: 11px 12px; border: 1px solid #d4d4d4; border-radius: 8px; font: inherit; font-size: .95rem; background: #fff; color: #111;
}
.wx-calc select:focus, .wx-calc input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }

.wx-calc__row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(90px, .8fr) minmax(0, 1.6fr) 40px; gap: 10px; align-items: center; margin-bottom: 10px; }
.wx-calc__row.is-unknown .wx-r-product { border-color: #d32f2f; }
.wx-r-result { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .88rem; color: #333; }
.wx-r-result span { white-space: nowrap; }
.wx-r-remove {
  width: 40px;
  height: 40px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wx-r-remove:hover {
  background: #f5f5f5;
  color: #000;
}

.wx-calc button { font: inherit; }
.wx-calc__add {
  margin: 4px 0 22px;
  padding: 10px 16px;
  border: 1px dashed #999;
  border-radius: 8px;
  background-color: #000 !important;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.wx-calc__add:hover {
  background-color: #000 !important;
  border-color: #000;
  color: #fff;
}

.wx-calc__summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.wx-calc__summary div { padding: 14px; border-radius: 10px; background: #f7f7f7; }
.wx-calc__summary span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.wx-calc__summary strong { display: block; margin-top: 4px; font-size: 1.15rem; }

.wx-calc__bar { height: 12px; border-radius: 6px; background: #eee; overflow: hidden; }
.wx-calc__bar-fill { height: 100%; width: 0; background: #2e7d32; transition: width .3s ease; }
.wx-calc__bar-fill.is-full { background: #ef6c00; }
.wx-calc__bar-fill.is-over { background: #d32f2f; }
.wx-calc__fit-text { margin: 8px 0 22px; font-size: .95rem; }

.wx-calc__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wx-calc__actions button { padding: 11px 18px; border: 0; border-radius: 8px; background: #000; color: #fff; font-weight: 600; cursor: pointer; }
.wx-calc__actions button:hover { background: #333; }
.wx-calc__actions .wx-calc__reset { background: #fff; color: #111; border: 1px solid #ccc; }
.wx-calc__actions .wx-calc__send { background: #1e8e3e; }

@media (max-width: 720px) {
  .wx-calc { padding: 22px 16px; }
  .wx-calc__row { grid-template-columns: 1fr 90px 40px; }
  .wx-r-result { grid-column: 1 / -1; order: 4; }
  .wx-calc__summary { grid-template-columns: repeat(2, 1fr); }
}