/* Modern Cloud Cargo — quote wizard (cargo details step) */
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body.wiz {
  margin: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  color: #2f3135;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
}
.wiz-topbar {
  position: relative;
  z-index: 40;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 5px clamp(20px, 3vw, 48px);
  background: #07377f;
  border-bottom: 1px solid #d7dce1;
}
.wiz-topbar__brand {
  height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
}
.wiz-topbar__logo { display: block; width: auto; height: 48px; object-fit: contain; }
.wiz-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 430px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "main sidebar" "footer sidebar";
  width: 100%;
  height: calc(100dvh - 64px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  transition: grid-template-columns .2s ease;
}
.wiz-main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 2.4vw, 40px) clamp(20px, 3vw, 52px) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4cad3 transparent;
}
.wiz-main::-webkit-scrollbar { width: 6px; }
.wiz-main::-webkit-scrollbar-track { background: transparent; }
.wiz-main::-webkit-scrollbar-thumb { background: #c4cad3; border-radius: 999px; }
.wiz-content { container-type: inline-size; max-width: 940px; margin: 0 auto; }
.wiz-sidebar {
  grid-area: sidebar;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #fff;
  border-left: 1px solid #e3e7ec;
  padding: clamp(20px, 2vw, 32px) clamp(16px, 2vw, 28px) 12px;
  transition: padding .2s ease;
}
.wiz-sidebar::-webkit-scrollbar { width: 0; height: 0; }
.wiz-footer {
  grid-area: footer;
  position: static;
  padding: 0 clamp(20px, 3vw, 52px) 12px;
  background: #fff;
}

/* Heading */
.wiz-heading {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 24px;
  color: #131821;
}
.req { color: inherit; margin-left: 2px; }

/* Stepper */
.wiz-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0 28px;
}
.wiz-step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.wiz-step__circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  border: 1.5px solid #c3c9d4;
  color: #9aa1ac;
  background: #fff;
}
.wiz-step__label { font-size: 13px; color: #6b7280; white-space: nowrap; }
.wiz-step--active .wiz-step__circle { background: #0a34a1; border-color: #0a34a1; color: #fff; }
.wiz-step--active .wiz-step__label { color: #0a34a1; font-weight: 600; }
.wiz-step--done .wiz-step__circle { background: #0a34a1; border-color: #0a34a1; color: #fff; }
.wiz-step__line { flex: 1; height: 1.5px; background: #c3c9d4; min-width: 80px; max-width: 320px; margin: 0 4px 24px; }
.wiz-step__line--done { background: #0a34a1; }

/* Form layout */
.wiz-form { margin-bottom: 8px; }
.wiz-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; align-items: flex-start; }
.wiz-field { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wiz-field--pieces { flex: 0 0 13%; }
.wiz-field--pkg { flex: 0 0 36%; }
.wiz-field--commodity { flex: 1; }
.wiz-row--dims .wiz-field { flex: 1; }

.wiz-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-optional { color: #9aa1ac; font-weight: 400; }

/* ── DSV filled field: grey box, floating label INSIDE, suffix on right ──── */
.wiz-ff {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 48px;
  background: #f3f5f7;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
}
.wiz-ff__input { padding: 20px 12px 6px; }
.wiz-ff__label { top: 6px; }
.wiz-ff__label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 12px;
  color: #6b7280;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}
.wiz-ff__input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 24px 12px 8px;
  font: inherit;
  font-size: 15px;
  color: #131821;
  outline: none;
}
.wiz-ff__suffix {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: #6b7280;
  font-size: 13px;
  pointer-events: none;
}
.wiz-ff:focus-within { background: #eef1f6; }
.wiz-ff--disabled { opacity: 1; }
.wiz-ff--disabled .wiz-ff__input { color: #b5bac2; }
.wiz-ff--disabled .wiz-ff__label { color: #b5bac2; }

/* Required-empty state → red box like DSV */
.wiz-ff.is-required-empty {
  border: 1px solid #d93025;
  border-radius: 4px;
  background: #fff;
}
.wiz-ff.is-required-empty .wiz-ff__label,
.wiz-ff.is-required-empty .wiz-ff__trigger-label { color: #d93025; }

/* Prefix (calendar icon) variant */
.wiz-ff--prefix .wiz-ff__input { padding-left: 44px; }
.wiz-ff__prefix { position: absolute; left: 12px; bottom: 8px; color: #0a34a1; display: flex; }
.wiz-ff--date .wiz-ff__label { left: 44px; }

/* Custom date field trigger + DSV-style calendar */
.wiz-ff--date { position: relative; }
.wiz-date__trigger { text-align: left; cursor: pointer; }
.wiz-date__trigger .js-date-display { color: #131821; font-size: 16px; }
/* DSV date field: icon vertically centered, label tight above value */
.wiz-ff--date .wiz-ff__prefix { top: 50%; bottom: auto; transform: translateY(-50%); }
.wiz-ff--date .wiz-ff__label { top: 7px; }
.wiz-ff--date .wiz-date__trigger { padding-top: 23px; padding-bottom: 4px; line-height: 1.1; }
.wiz-cal {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  width: 296px; background: #fff; border-radius: 4px; padding: 8px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12);
  color: rgba(0,0,0,.87); font-size: 13px; line-height: normal;
  user-select: none;
}
.wiz-cal[hidden] { display: none; }
.wiz-cal__header { display: flex; align-items: center; height: 40px; padding: 0 4px; }
.wiz-cal__period {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 4px;
  font: inherit; font-size: 14px; font-weight: 600; color: #0a34a1;
}
.wiz-cal__period:hover { background: rgba(10,52,161,.08); }
.wiz-cal__period-arrow { width: 10px; height: 5px; fill: currentColor; transition: transform .2s ease; }
.wiz-cal.is-year .wiz-cal__period-arrow { transform: rotate(180deg); }
.wiz-cal__spacer { flex: 1; }
.wiz-cal__nav {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: rgba(0,0,0,.54); border-radius: 50%;
}
.wiz-cal__nav:hover { background: rgba(0,0,0,.06); }
.wiz-cal__nav svg { width: 24px; height: 24px; fill: currentColor; }
.wiz-cal__nav[disabled] { color: rgba(0,0,0,.18); cursor: default; }
.wiz-cal__nav[disabled]:hover { background: none; }
.wiz-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); }
.wiz-cal__weekday { text-align: center; padding: 8px 0; color: rgba(0,0,0,.38); font-size: 11px; }
.wiz-cal__divider { height: 1px; background: rgba(0,0,0,.08); margin: 0 0 4px; }
.wiz-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.wiz-cal__monthlabel {
  grid-column: span 3; display: flex; align-items: center; padding-left: 6px;
  color: rgba(0,0,0,.54); font-weight: 600; font-size: 13px;
}
.wiz-cal__cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; padding: 0; font: inherit; font-size: 13px;
  color: rgba(0,0,0,.87);
}
.wiz-cal__dot {
  width: 36px; height: 36px; max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid transparent;
}
.wiz-cal__cell:hover:not([disabled]) .wiz-cal__dot { background: rgba(10,52,161,.1); }
.wiz-cal__cell.is-today .wiz-cal__dot { border-color: rgba(0,0,0,.38); }
.wiz-cal__cell.is-selected .wiz-cal__dot { background: #0a34a1; color: #fff; border-color: #0a34a1; }
.wiz-cal__cell[disabled] { color: rgba(0,0,0,.38); cursor: default; }
/* year / month chooser grid */
.wiz-cal__choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 0; }
.wiz-cal__choice {
  height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: rgba(0,0,0,.87);
  border-radius: 999px;
}
.wiz-cal__choice:hover:not([disabled]) { background: rgba(10,52,161,.1); }
.wiz-cal__choice.is-selected { background: #0a34a1; color: #fff; }
.wiz-cal__choice[disabled] { color: rgba(0,0,0,.38); cursor: default; }

/* Pieces field with spinner */
.wiz-ff--pieces { flex: 0 0 12%; }
.wiz-ff__spin { position: absolute; right: 8px; bottom: 6px; display: flex; flex-direction: column; line-height: .55; }
.wiz-ff__spin button { border: none; background: none; cursor: pointer; color: #5b6472; font-size: 10px; padding: 2px; }
.wiz-ff__spin button:hover { color: #0a34a1; }
.wiz-ff--pkg { flex: 0 0 36%; }
.wiz-ff--commodity { flex: 1; }

/* Trigger buttons (custom dropdowns) styled as filled fields */
.wiz-ff__trigger {
  width: 100%; height: 100%;
  border: none; background: transparent;
  text-align: left; cursor: pointer;
  padding: 24px 34px 8px 12px;
  font: inherit; font-size: 15px; color: #131821;
  position: relative;
}
.wiz-ff__trigger-label {
  position: absolute; top: 8px; left: 12px;
  font-size: 12px; color: #6b7280; pointer-events: none;
}
.wiz-ff__value { color: #131821; }
.wiz-ff__optional { position: absolute; right: 34px; bottom: 9px; color: #9aa1ac; font-size: 13px; }
.wiz-ff__chevron {
  position: absolute; right: 12px; bottom: 16px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #131821;
}
.wiz-ff.is-open .wiz-ff__chevron { transform: rotate(180deg); border-top-color: #0a34a1; }

/* Required (empty) fields get the red DSV border */
.wiz-input.is-required-empty, .wiz-select.is-required-empty {
  border: 1px solid #d93025;
  border-radius: 4px;
  background: #fff;
}

/* Toggles — reference style: larger pill, thumb shows minus (off) / check (on) */
.wiz-main { overflow: visible; }
.wiz-toggles { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 22px 0 10px; }
.wiz-toggle-group { display: flex; align-items: center; gap: 8px; position: relative; }
.wiz-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wiz-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-toggle__track {
  width: 52px; height: 30px; border-radius: 15px;
  background: #c3c9d4; position: relative; transition: background .15s ease; flex-shrink: 0;
}
.wiz-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #eef0f3; transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.wiz-toggle__thumb::before {
  content: ""; width: 10px; height: 2px; background: #6b7280; border-radius: 1px;
}
.wiz-toggle input:focus-visible + .wiz-toggle__track { outline: 2px solid #0a34a1; outline-offset: 2px; }
.wiz-toggle input:checked + .wiz-toggle__track { background: #0a34a1; }
.wiz-toggle input:checked + .wiz-toggle__track .wiz-toggle__thumb { transform: translateX(22px); background: #fff; }
.wiz-toggle input:checked + .wiz-toggle__track .wiz-toggle__thumb::before {
  width: 11px; height: 7px; background: none;
  border-left: 2px solid #0a34a1; border-bottom: 2px solid #0a34a1;
  transform: rotate(-45deg); margin-top: -2px; border-radius: 0;
}
.wiz-toggle__label { font-size: 15px; color: #2f3135; }

/* Blue information cards shown on hover or keyboard focus. */
.wiz-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; position: relative;
  border: 1px solid #0a34a1; color: #0a34a1;
  font-size: 10px; font-style: italic; font-weight: 600; cursor: help;
  outline: none;
}
.wiz-info:focus-visible { box-shadow: 0 0 0 2px rgba(10, 52, 161, .25); }
.wiz-info__tooltip {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: min(420px, 72vw); padding: 14px 16px;
  transform: translateX(-50%) translateY(-4px);
  border-radius: 4px; background: #123dac; color: #fff;
  box-shadow: 0 8px 24px rgba(19, 24, 33, .24);
  font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.5;
  text-align: left; z-index: 100; cursor: default;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.wiz-info__tooltip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: #123dac;
}
.wiz-info:hover .wiz-info__tooltip,
.wiz-info:focus .wiz-info__tooltip,
.wiz-info:focus-within .wiz-info__tooltip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.wiz-info__tooltip--dangerous {
  width: min(400px, 74vw); max-height: 74vh; overflow-y: auto;
  font-size: 11.5px; line-height: 1.45;
}
.wiz-info__tooltip--dangerous > span { display: block; margin-bottom: 3px; }
.wiz-info__tooltip--dangerous .wiz-info__line { margin-bottom: 1px; }
.wiz-info__tooltip a { color: #fff; text-decoration: underline; }
.wiz-info__tooltip--stackable { width: min(420px, 72vw); }

/* Dangerous goods details revealed by its switch. */
.wiz-dangerous { margin: 18px 0 24px; }
.wiz-dangerous[hidden] { display: none !important; }
.wiz-dangerous__intro { margin: 0 0 4px; font-size: 16px; color: #30343b; }
.wiz-dangerous__note { margin: 0 0 20px; color: #69717f; font-size: 13px; line-height: 1.65; }
.wiz-dangerous__card { border-left: 4px solid #0a34a1; padding: 12px 0 12px 18px; }
.wiz-dangerous__card h3 { margin: 0 0 16px; font-size: 16px; color: #333; }
.wiz-dangerous__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
}
.wiz-dg-field {
  position: relative; display: block; min-width: 0; height: 48px;
  background: #f3f4f6; border-radius: 2px; color: #6c727c;
}
.wiz-dg-field > span {
  position: absolute; top: 7px; left: 12px; z-index: 1;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #777e89; font-size: 12px; pointer-events: none;
}
.wiz-dg-field input,
.wiz-dg-field select {
  width: 100%; height: 100%; min-width: 0; padding: 23px 12px 7px;
  border: 0; border-radius: 2px; outline: 0; background: transparent;
  color: #333941; font: inherit; font-size: 15px;
}
.wiz-dg-field select { appearance: none; -webkit-appearance: none; padding: 10px 30px 10px 12px; }
.wiz-dg-field--unit select { padding-top: 23px; padding-bottom: 7px; }
.wiz-dg-field--select::after {
  content: ""; position: absolute; top: 50%; right: 12px; pointer-events: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #555d67;
}
.wiz-dg-field:focus-within { background: #eef1f6; box-shadow: inset 0 0 0 1px #0a34a1; }
.wiz-dg-field--suffix input { padding-right: 34px; }
.wiz-dg-field--suffix b { position: absolute; right: 12px; bottom: 8px; color: #777e89; font-size: 13px; font-weight: 400; }
.wiz-dg-check {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; color: #20242b; font-size: 14px; text-align: center; cursor: pointer;
}
.wiz-dg-check > span { white-space: normal; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.wiz-dg-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 24px; height: 24px; margin: 0; border: 2px solid #727980; border-radius: 2px;
  background: #fff; cursor: pointer; position: relative;
}
.wiz-dg-check input:checked { border-color: #0a34a1; background: #0a34a1; }
.wiz-dg-check input:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wiz-dg-check i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid #0a34a1; border-radius: 50%; color: #0a34a1; font-size: 9px; font-style: italic; flex-shrink: 0; }

/* Dangerous goods illustrated Package Type dropdown */
.wiz-dg-pkg { position: relative; cursor: pointer; }
.wiz-dg-pkg__trigger {
  width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left; padding: 0; font: inherit; position: relative;
}
.wiz-dg-pkg__label { position: absolute; top: 7px; left: 12px; color: #777e89; font-size: 12px; pointer-events: none; }
.wiz-dg-pkg__value { position: absolute; left: 12px; bottom: 8px; right: 30px; color: #333941; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-dg-pkg .wiz-ff__chevron { bottom: 14px; }
.wiz-dg-pkg.is-open .wiz-ff__chevron { transform: rotate(180deg); border-top-color: #0a34a1; }
.wiz-menu__img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.wiz-dg-pkg__menu { min-width: 280px; }
.wiz-dg-type__menu { min-width: 100%; width: 100%; padding: 0; }
.wiz-dg-type__menu .wiz-menu__item {
  min-height: 56px; justify-content: space-between; padding: 12px 22px;
  font-size: 16px; font-weight: 500;
}
.wiz-dg-type__menu .wiz-menu__item.is-selected { background: #dceeff; color: #0a34a1; }
.wiz-dg-type__check { margin-left: auto; color: #0a34a1; font-size: 24px; visibility: hidden; }
.wiz-dg-type__menu .is-selected .wiz-dg-type__check { visibility: visible; }

/* Add / remove position controls */
.wiz-dangerous__actions {
  grid-column: 1 / -1;
  display: flex; gap: 16px; align-items: center; justify-content: flex-end;
  margin-top: 4px;
}
.wiz-dangerous__act {
  width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #0a34a1; cursor: pointer; position: relative;
}
.wiz-dangerous__act:hover { color: #002664; }
.wiz-dangerous__act[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #0a34a1; color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 3px; white-space: nowrap; z-index: 60;
}
.wiz-dangerous__card:only-of-type .js-dg-remove { display: none; }
.wiz-dangerous__help { display: inline-block; margin-top: 18px; color: #0a34a1; font-size: 17px; font-weight: 700; text-decoration: none; }
.wiz-dangerous__help:hover { text-decoration: underline; }
.wiz-toggle-actions { display: flex; gap: 14px; margin-left: auto; align-items: center; }

@media (max-width: 1200px) {
  .wiz-info__tooltip,
  .wiz-info__tooltip--dangerous,
  .wiz-info__tooltip--stackable {
    position: fixed; top: 50%; right: 16px; left: 16px; width: auto; max-height: 76vh;
    transform: translateY(-50%); overflow-y: auto;
  }
  .wiz-info:hover .wiz-info__tooltip,
  .wiz-info:focus .wiz-info__tooltip,
  .wiz-info:focus-within .wiz-info__tooltip { transform: translateY(-50%); }
  .wiz-info__tooltip::before { display: none; }
}
.wiz-icon-btn { border: none; background: none; cursor: pointer; color: #0a34a1; padding: 2px; display: flex; position: relative; }
.wiz-icon-btn:hover { color: #002664; }
/* tooltip on hover */
.wiz-icon-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #0a34a1; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 3px;
  white-space: nowrap; z-index: 60;
}

/* Custom dropdown menus */
.wiz-menu {
  position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 50; padding: 6px 0; max-height: 320px; overflow-y: auto;
}
.wiz-menu--plain { min-width: 100%; }
.wiz-menu__item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 12px 20px; font: inherit; font-size: 15px; color: #131821; text-align: left;
  white-space: nowrap;
}
.wiz-menu__item:hover { background: #eef1f6; }
.wiz-menu__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; color: #131821; font-size: 9px; font-weight: 700; }
.wiz-menu__pallet { display: block; width: 22px; height: 6px; border: 1px solid currentColor; border-top: none; margin-top: 1px; }

/* Commodity two-level menu — categories on RIGHT (under the field),
   sub-items fly out to the LEFT, exactly like the reference. */
.wiz-commenu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  color: #131821;
}
.wiz-commenu__subs,
.wiz-commenu__cats {
  max-height: 430px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d9dee7;
  box-shadow: 0 8px 24px rgba(19, 24, 33, .18);
}
.wiz-commenu__subs {
  width: 250px;
  padding: 6px 0;
  border-right: 0;
}
.wiz-commenu__cats {
  width: 320px;
  padding: 6px 0;
}
.wiz-com-cat {
  display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  width: 100%; border: none; border-radius: 0; background: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding: 12px 16px; font: inherit; font-size: 15px; color: #131821; text-align: left;
  position: relative;
}
.wiz-com-cat__label { flex: 1; line-height: 1.2; }
.wiz-com-cat__arrow { color: #6b7280; font-size: 20px; line-height: 1; }
.wiz-com-cat:hover, .wiz-com-cat:focus-visible, .wiz-com-cat.is-active { background: #eef1f5; }
.wiz-com-cat:focus-visible, .wiz-com-sub:focus-visible { outline: 2px solid #0a34a1; outline-offset: -2px; }
.wiz-com-cat__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #131821; flex-shrink: 0; }
.wiz-com-sub {
  display: flex; align-items: center;
  width: 100%; border: none; border-radius: 0; background: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding: 13px 20px; font: inherit; font-size: 15px; color: #131821; text-align: left;
  line-height: 1.2;
}
.wiz-com-sub:hover, .wiz-com-sub:focus-visible { background: #eef1f5; }
.wiz-com-sub--disabled { color: #aeb5c0; cursor: default; }
.wiz-com-sub--disabled:hover { background: #fff; }
@media (max-width: 900px) {
  .wiz-commenu { flex-direction: column-reverse; right: 0; left: 0; }
  .wiz-commenu__cats, .wiz-commenu__subs { width: 100%; border: 1px solid #d9dee7; }
  .wiz-commenu__subs { border-top: 0; }
}

/* Native hidden must win over menu layout rules. */
.wiz-menu[hidden],
.wiz-commenu[hidden] {
  display: none !important;
}

/* Totals bar */
.wiz-totals {
  background: #0a34a1; color: #fff;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; margin: 18px 0; flex-wrap: wrap; gap: 12px;
}
.wiz-totals__title { font-size: 16px; }
.wiz-totals__values { display: flex; gap: 40px; flex-wrap: wrap; }
.wiz-total { display: flex; align-items: center; gap: 10px; }
.wiz-total__name { color: #c5d0ec; font-size: 14px; }
.wiz-total b { font-size: 15px; }

/* Shipment rows */
.wiz-shipment { margin-top: 8px; }

/* Sidebar */
.wiz-sidebar__mode {
  color: #131821;
  margin-bottom: 28px;
  flex: 0 0 auto;
}
.wiz-sidebar__mode img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 100%;
  transition: height .2s ease;
}
.wiz-sidebar__mode-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #131821;
}
.wiz-sidebar__routing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.wiz-routing-icons { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.wiz-pin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #0a34a1; }
.wiz-pin:last-child { background: #0a34a1; }
.wiz-trail { width: 2px; height: 34px; background: repeating-linear-gradient(#0a34a1 0 2px, transparent 2px 6px); margin: 2px 0; }
.wiz-routing__leg { margin-bottom: 20px; display: flex; flex-direction: column; }
.wiz-routing__label { font-size: 12px; color: #9aa1ac; }
.wiz-routing__place { font-size: 15px; font-weight: 600; color: #131821; overflow-wrap: anywhere; }
.wiz-routing__edit { color: #0a34a1; }
.wiz-sidebar__toggle {
  flex: 0 0 40px;
  width: 100%;
  min-height: 40px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 4px;
  border: 0;
  border-top: 1px solid #d7dce1;
  background: #fff;
  color: #5f6670;
  cursor: pointer;
}
.wiz-sidebar__toggle:hover { color: #0a34a1; background: #f4f6f8; }
.wiz-sidebar__toggle svg { transition: transform .2s ease; }
.wiz-shell.is-sidebar-collapsed { grid-template-columns: minmax(0, 1fr) 40px; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar { padding: 14px 6px 0; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode { margin: 0; display: flex; justify-content: center; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode img { height: 26px; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode-label { display: none; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__routing { display: none; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__toggle { justify-content: center; }
.wiz-shell.is-sidebar-collapsed .wiz-sidebar__toggle svg { transform: rotate(180deg); }

/* Footer */
.wiz-footer__actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 0; border-top: 1px solid #e3e7ec; }
.wiz-btn {
  min-width: 96px; padding: 12px 28px; border-radius: 4px;
  font: inherit; font-weight: 600; cursor: pointer; text-align: center;
  text-decoration: none; display: inline-block; border: 1px solid #0a34a1;
}
.wiz-btn--primary { background: #0a34a1; color: #fff; }
.wiz-btn--primary:hover { background: #002664; }
.wiz-btn--secondary { background: #fff; color: #0a34a1; }
.wiz-btn--secondary:hover { background: #eef1f6; }
.wiz-footer__links { display: flex; gap: 28px; padding-top: 8px; flex-wrap: wrap; }
.wiz-footer__links a { color: #2f3135; text-decoration: none; font-size: 14px; }
.wiz-footer__links a:hover { color: #0a34a1; text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  html { height: auto; overflow: auto; }
  body.wiz {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  .wiz-topbar {
    position: sticky;
    top: 0;
    height: 58px;
    padding: 4px 20px;
  }
  .wiz-topbar__brand { height: 50px; }
  .wiz-topbar__logo { height: 44px; }
  .wiz-shell,
  .wiz-shell.is-sidebar-collapsed {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "main" "sidebar" "footer";
  }
  .wiz-main {
    min-height: auto;
    padding: 24px 20px 0;
    overflow: visible;
  }
  .wiz-sidebar,
  .wiz-shell.is-sidebar-collapsed .wiz-sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 20px;
    border-left: none;
    border-top: 1px solid #e3e7ec;
  }
  .wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode {
    display: block;
    margin-bottom: 28px;
  }
  .wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode img { height: 42px; }
  .wiz-shell.is-sidebar-collapsed .wiz-sidebar__mode-label { display: block; }
  .wiz-shell.is-sidebar-collapsed .wiz-sidebar__routing { display: grid; }
  .wiz-sidebar__toggle { display: none; }
  .wiz-footer {
    position: static;
    box-shadow: none;
    padding: 16px 20px 20px;
  }
  .wiz-ff--pieces, .wiz-ff--pkg { flex: 1 1 100%; }
  .wiz-row--dims .wiz-ff { flex: 1 1 45%; }
  .wiz-row--shipment .wiz-ff--date { flex: 1 1 100%; }
}
/* Shipment row widths */
.wiz-row--shipment .wiz-ff--date { flex: 0 0 40%; }
.wiz-row--shipment .wiz-ff--recipient { flex: 1; }
.wiz-ref-list { display: flex; flex-direction: column; gap: 12px; }
.wiz-row--ref { align-items: stretch; }
.wiz-row--ref .wiz-ff--ref-type { flex: 0 0 30%; }
.wiz-row--ref .wiz-ff--ref-no { flex: 1; }
.wiz-ref-controls { display: flex; align-items: center; gap: 10px; align-self: center; }
.wiz-ref-list:not(.wiz-ref-list--multiple) .js-ref-remove { display: none; }

/* Repeatable cargo items */
.wiz-cargo-item {
  position: relative;
}
.wiz-cargo-item + .wiz-cargo-item {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #e3e7ec;
}
.wiz-form:not(.wiz-form--multiple) .js-remove {
  display: none;
}
.wiz-form--multiple .js-remove {
  display: flex;
}

/* Match the reference: all six dimension fields on a single row. */
.wiz-row--dims > .wiz-ff {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 900px) {
  .wiz-row--dims > .wiz-ff {
    flex: 1 1 calc(50% - 6px);
  }
}

/* ===== Customized-quote (contact) step ===== */
.wiz-lead { margin: 2px 0 2px; color: #69717f; font-size: 15px; line-height: 1.5; }
.wiz-heading--em { margin-top: 0; }
.wiz-cform .wiz-row { margin-bottom: 8px; }
.wiz-ff--full { flex: 1 1 100%; }

/* Placeholder state for the date display */
.wiz-date__trigger .js-date-display.is-placeholder { color: #9aa1ac; }

/* Phone field with country calling-code selector */
.wiz-ff--phone .wiz-ff__input { padding-left: 62px; }
.wiz-ff--phone .wiz-ff__label { left: 62px; }
.wiz-phone__country {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px; border: 0; background: none; cursor: pointer; border-radius: 3px;
}
.wiz-phone__country:hover { background: rgba(10,52,161,.08); }
.wiz-phone__flag { font-size: 18px; line-height: 1; }
.wiz-ff__flag-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6b7280; }

/* Country autocomplete + phone country menus reuse .wiz-menu */
.js-country-menu .wiz-menu__item,
.wiz-phone__item { padding: 11px 16px; font-size: 14px; text-align: left; color: #131821; }
.js-country-menu .wiz-menu__item:hover,
.wiz-phone__item:hover { background: #eef1f5; }
.wiz-phone__menu { min-width: 340px; max-width: 92vw; }
.wiz-phone__item { display: flex; align-items: center; gap: 12px; }
.wiz-phone__item .wiz-phone__name { flex: 1; }
.wiz-phone__item .wiz-phone__dial { color: #9aa1ac; font-size: 13px; }
.wiz-phone__item.is-selected { background: #eaf1ff; color: #0a34a1; }
.wiz-phone__item.is-selected .wiz-phone__dial { color: #0a34a1; }

/* Message field with optional suffix */
.wiz-ff--suffix-field .wiz-ff__input { padding-right: 72px; }

/* Agreement checkboxes */
.wiz-checks { margin: 24px 0 8px; display: flex; flex-direction: column; gap: 16px; }
.wiz-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; color: #2f3135; }
.wiz-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-check__box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #9aa1ac; border-radius: 2px; background: #fff; position: relative; margin-top: 1px; }
.wiz-check input:checked + .wiz-check__box { background: #0a34a1; border-color: #0a34a1; }
.wiz-check input:checked + .wiz-check__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wiz-check input:focus-visible + .wiz-check__box { outline: 2px solid #0a34a1; outline-offset: 2px; }
.wiz-check__text { line-height: 1.5; }

/* Warning alert */
.wiz-alert { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 8px; padding: 14px 16px; background: #fff8e6; border: 1px solid #f0dca6; border-radius: 4px; }
.wiz-alert__icon { color: #b7791f; flex: 0 0 auto; display: flex; }
.wiz-alert__text { margin: 0; color: #5c5238; font-size: 14px; line-height: 1.6; }

/* Sidebar shipment summary */
.wiz-sum { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e3e7ec; display: flex; flex-direction: column; gap: 20px; }
.wiz-sum__row { display: flex; gap: 12px; align-items: flex-start; }
.wiz-sum__icon { color: #0a34a1; flex: 0 0 auto; display: flex; }
.wiz-sum__label { font-size: 12px; color: #9aa1ac; }
.wiz-sum__value { font-size: 15px; font-weight: 600; color: #131821; line-height: 1.4; }
.wiz-shell.is-sidebar-collapsed .wiz-sum { display: none; }

@media (max-width: 900px) {
  .wiz-shell.is-sidebar-collapsed .wiz-sum { display: flex; }
}

/* Dynamic overflow mode: default stays single-screen; expanded content flows normally. */
.wiz-main {
  scroll-padding-block: 18px 32px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

@media (min-width: 901px) {
  html.wiz-has-dynamic-flow {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.wiz.wiz-has-dynamic-flow {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  body.wiz.wiz-has-dynamic-flow .wiz-topbar {
    position: sticky;
    top: 0;
  }
  body.wiz.wiz-has-dynamic-flow .wiz-shell {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-rows: auto auto;
  }
  body.wiz.wiz-has-dynamic-flow .wiz-main {
    min-height: auto;
    overflow: visible;
  }
  body.wiz.wiz-has-dynamic-flow .wiz-sidebar {
    position: sticky;
    top: 64px;
    align-self: start;
    height: calc(100dvh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
}

/* Dropdown option lists are UI, not copyable page content. */
.wiz-menu, .wiz-commenu, .js-country-menu, .js-phone-menu {
  user-select: none;
  -webkit-user-select: none;
}
.wiz-menu[hidden], .wiz-commenu[hidden],
.js-country-menu[hidden], .js-phone-menu[hidden] {
  display: none !important;
}

/* ---- Final-step success confirmation ---- */
.wiz-hidden-form { display: none !important; }

.wiz-success {
  max-width: 560px;
  margin: 8px auto;
  padding: 40px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid #e3e8f1;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(12, 29, 63, 0.08);
}
.wiz-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  color: #1f9d55;
  background: #e8f7ee;
  border-radius: 50%;
}
.wiz-success .wiz-heading { margin: 0 0 12px; }
.wiz-success__text {
  color: #4a5568;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 auto 26px;
  max-width: 460px;
}
.wiz-success__btn { display: inline-block; text-decoration: none; }
.wiz-btn--busy { opacity: .6; pointer-events: none; }