:root {
  --ink: #111d30;
  --muted: #5f6f86;
  --paper: #f4f7fc;
  --card: #ffffff;
  --blue: #437eeb;
  --blue-dark: #023ba6;
  --blue-mid: #1e55bd;
  --blue-soft: #edf5ff;
  --line: #dbe5f4;
}

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(67, 126, 235, .16), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 45%, #ffffff 100%);
}

h1, h2, h3, .brand { font-family: 'Manrope', sans-serif; }

.topbar {
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.topbar .container {
  padding-top: .65rem !important;
  padding-bottom: .65rem !important;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
}

.brand-logo {
  display: block;
  width: clamp(200px, 18vw, 230px);
  height: auto;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  color: #fff;
}

.secure-pill {
  font-size: .76rem;
  background: var(--blue-soft);
  color: var(--blue-dark);
  padding: .38rem .65rem;
  border-radius: 99px;
  gap: .4rem;
}

.eyebrow, .step-kicker {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue);
}

.display-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.stepper {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
}

.stepper li {
  display: flex;
  gap: .9rem;
  position: relative;
  padding-bottom: 1.7rem;
  color: #8290a5;
}

.stepper li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  height: calc(100% - 34px);
  border-left: 1px dashed #b7c6dc;
}

.stepper li > span {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border: 1px solid #b7c6dc;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  background: var(--paper);
  z-index: 1;
}

.stepper b, .stepper small { display: block; }
.stepper b { font-size: .9rem; }
.stepper small { font-size: .75rem; margin-top: .15rem; }
.stepper li.active, .stepper li.done { color: var(--ink); }
.stepper li.active > span { background: var(--blue); color: #fff; border-color: var(--blue); }
.stepper li.done > span { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }

.portal-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.35rem, 4vw, 3rem);
  box-shadow: 0 18px 50px rgba(17, 29, 48, .08);
}

.client-logo-wrap {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1.35rem, 4vw, 3rem);
  z-index: 2;
  width: min(18vw, 400px);
  min-width: 130px;
  max-width: 400px;
  text-align: right;
}

.client-logo {
  display: block;
  width: 100%;
  max-height: 76px;
  object-fit: contain;
  object-position: top right;
}

.client-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  max-width: 100%;
  padding: .75rem 1rem;
  border: 1px dashed #b7c6dc;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  text-align: center;
}

.form-step { display: none; }
.form-step.active { display: block; animation: rise .25s ease; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.form-step h2 {
  padding-right: calc(min(18vw, 400px) + 1.75rem);
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  letter-spacing: -.04em;
  margin: .45rem 0;
  white-space: nowrap;
}

.lead-copy { color: var(--muted); padding-right: calc(min(18vw, 400px) + 1.75rem); white-space: nowrap; }
.form-label, .measure-grid label { font-weight: 650; font-size: .86rem; }
.form-control, .form-select, .input-group-text { border-color: #cbd8ea; background: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .22rem rgba(67, 126, 235, .22); }
.field-error { color: #dc3545; font-size: .86rem; font-weight: 700; margin-top: .35rem; }
.form-select.is-invalid { border-color: #dc3545; }
.form-select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 .22rem rgba(220, 53, 69, .18); }
.admin-tools { background: var(--blue-soft); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin: 1.25rem 0; max-width: 360px; }

.action-row {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.action-row.split { display: flex; align-items: center; justify-content: space-between; }

.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
  --bs-btn-color: #fff;
  border-radius: 10px;
  font-weight: 650;
  box-shadow: 0 10px 22px rgba(67, 126, 235, .2);
}

.btn-outline-dark {
  --bs-btn-color: var(--blue-dark);
  --bs-btn-border-color: #b7c6dc;
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
}

.btn-link { color: var(--blue-dark); }
.order-strip { background: var(--blue-soft); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; font-size: .88rem; }

.item-card, .service-card, .choice-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  cursor: pointer;
  transition: .18s;
  background: #fff;
}

.item-card { align-items: center; }

.item-card:hover, .item-card.selected, .service-card:hover, .choice-card:hover, .service-card.selected, .choice-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(67, 126, 235, .16);
}

.item-card + .item-card, .service-card + .service-card { margin-top: .75rem; }
.item-card > .item-check { margin-top: 0; }
.service-card input, .choice-card input { margin-top: .25rem; }
.item-copy { min-width: 0; }
.qty-control { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; }
.qty-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #b7c6dc; border-radius: 50%; background: #fff; color: var(--blue-dark); font-weight: 800; line-height: 1; }
.qty-btn:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.qty-btn:disabled, .qty-input:disabled { opacity: .45; cursor: not-allowed; }
.qty-input { width: 50px; min-height: 32px; text-align: center; border: 1px solid #cbd8ea; border-radius: 10px; font-weight: 700; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.measure-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}

.measure-grid label { display: block; margin-bottom: .4rem; }
.service-card { position: relative; }
.service-main { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.carrier-logo { flex: 0 0 108px; width: 108px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.carrier-logo { object-fit: contain; padding: .3rem .55rem; }
.evri-logo { padding: .2rem .45rem; }
.royal-mail-logo { padding: .2rem; }
.parcelforce-logo { padding: .35rem .55rem; }
.service-meta { color: var(--muted); font-size: .8rem; margin-top: .35rem; }
.empty-services { border: 1px dashed #b7c6dc; border-radius: 14px; color: var(--muted); padding: 1rem; background: rgba(237, 245, 255, .55); }

.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice-card { font-size: .88rem; }
.choice-card b, .choice-card small { display: block; }
.choice-card small { color: var(--muted); margin-top: .15rem; }
.date-control { max-width: 240px; }

.review-box { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.review-row { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.review-row:last-child { border: 0; }
.review-row span { color: var(--muted); }
.success-icon { display: grid; place-items: center; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(90deg, var(--blue-dark), var(--blue)); color: #fff; font-size: 2rem; font-weight: 700; }

.tolerance-list { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; color: var(--muted); }
.tolerance-list li { margin-bottom: .2rem; }
.hazardous-block { border-top: 1px solid var(--line); padding-top: .9rem; }
.hazardous-block h3 { margin-bottom: .4rem; }
.prohibited-list { list-style: none; margin: 0; padding: 0; font-size: .82rem; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.prohibited-list li { padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.prohibited-list li:last-child { border-bottom: 0; }

footer { font-size: .78rem; color: #66768d; }
footer a { color: var(--blue-dark); }

@media (max-width: 991px) {
  .client-logo-wrap { position: static; width: min(46vw, 240px); margin-left: auto; margin-bottom: 1rem; }
  .client-logo { max-height: 72px; }
  .form-step h2, .lead-copy { padding-right: 0; white-space: normal; }
  .stepper { display: flex; gap: .5rem; margin: 1.2rem 0 0; }
  .stepper li { flex: 1; padding: 0; }
  .stepper li::after, .stepper li div { display: none; }
  .stepper li > span { width: 100%; height: 5px; border: 0; border-radius: 6px; font-size: 0; background: #cbd8ea; }
  .stepper li.active > span, .stepper li.done > span { background: var(--blue); }
}

@media (max-width: 700px) {
  .measure-grid { grid-template-columns: repeat(2, 1fr); }
  .option-grid { grid-template-columns: 1fr; }
  .service-card { padding-right: 1rem; }
  .item-card { align-items: flex-start; flex-wrap: wrap; }
  .qty-control { width: 100%; margin-left: 1.9rem; }
  .service-main { flex-direction: column; gap: .65rem; }
  .carrier-logo { width: 112px; height: 42px; }
  .portal-card { border-radius: 16px; }
  .action-row.split { gap: .5rem; }
  .action-row .btn-lg { font-size: 1rem; }
}

/* Final confirmation checkbox (step 4) — deliberately prominent */
.confirm-check {
  position: relative;
  margin: 0;
  padding: 1rem 1.15rem 1rem 3.4rem;
  background: var(--blue-soft);
  border: 2px solid var(--blue);
  border-radius: 14px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.confirm-check .form-check-input {
  position: absolute;
  left: 1.15rem;
  top: 1.1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--blue-dark);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(67, 126, 235, .18);
}
.confirm-check .form-check-input:focus { box-shadow: 0 0 0 4px rgba(67, 126, 235, .35); }
.confirm-check .form-check-input:checked { background-color: var(--blue-dark); border-color: var(--blue-dark); box-shadow: none; }
.confirm-check .form-check-label { color: var(--ink); cursor: pointer; line-height: 1.5; }
.confirm-check .form-check-label strong { color: var(--blue-dark); }
.confirm-check .tolerance-list { color: var(--ink); }
.confirm-check:has(.form-check-input:checked) {
  background: #fff;
  border-color: var(--blue-dark);
  box-shadow: inset 0 0 0 1px var(--blue-dark);
}