/* ═══════════════════════════════════════════════════════════
   QUICKSHIP CANADA · RATE CALCULATOR
   Brand tokens corrected per Change Request section A:
   primary #F7921E · secondary #1C67D5 · Poppins + Baloo 2
   Scoped under .qs-calc so it cannot leak into the theme.
═══════════════════════════════════════════════════════════ */

.qs-calc{
  --qs-brand:#F7921E;
  --qs-brand-dk:#DE7C0C;
  --qs-brand-lt:#FFB25C;
  --qs-blue:#1C67D5;
  --qs-blue-dk:#1550AD;
  --qs-tint:#FFF4E6;
  --qs-ink:#171412;
  --qs-body:#5F6672;
  --qs-mute:#8B8781;
  --qs-line:#EDE6DE;
  --qs-ok:#16A34A;
  --qs-err:#D50209;
  --qs-display:'Poppins',system-ui,sans-serif;
  --qs-text:'Poppins',system-ui,sans-serif;
  --qs-r:14px;
  --qs-r-sm:10px;
  --qs-shadow:0 18px 48px rgba(23,20,18,.09);

  background:#fff;
  border:1px solid var(--qs-line);
  border-radius:var(--qs-r);
  padding:26px;
  box-shadow:var(--qs-shadow);
  font-family:var(--qs-text);
  color:var(--qs-body);
  font-size:16px;
  line-height:1.6;
}
.qs-calc *,.qs-calc *::before,.qs-calc *::after{box-sizing:border-box}

/* ── head ── */
.qs-calc__head{margin-bottom:20px}
.qs-calc__head h3{
  font-family:var(--qs-display);font-weight:700;font-size:1.18rem;
  color:var(--qs-ink);margin:0 0 4px;letter-spacing:-.02em;line-height:1.2;
}
.qs-calc__head p{font-size:.85rem;color:var(--qs-mute);margin:0}

/* ── tabs ── */
.qs-tabs{display:flex;gap:4px;background:var(--qs-tint);padding:4px;border-radius:var(--qs-r-sm);margin-bottom:20px}
.qs-tab{
  flex:1;border:0;background:none;cursor:pointer;padding:9px 12px;border-radius:8px;
  font-family:var(--qs-display);font-weight:600;font-size:.85rem;color:var(--qs-body);
  transition:background .18s,color .18s;
}
.qs-tab[aria-selected="true"]{background:#fff;color:var(--qs-ink);box-shadow:0 2px 8px rgba(23,20,18,.07)}
.qs-panel[hidden]{display:none}

/* ── fields ── */
.qs-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.qs-field{min-width:0}
.qs-field label,.qs-legend{
  display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--qs-mute);font-weight:700;margin-bottom:6px;font-family:var(--qs-display);
}
.qs-field input,.qs-field select{
  width:100%;border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);
  padding:11px 13px;font-family:var(--qs-text);font-size:.92rem;color:var(--qs-ink);
  background:#fff;transition:border-color .18s,box-shadow .18s;
}
.qs-field input::placeholder{color:#C3BCB5}
.qs-field input:focus,.qs-field select:focus{
  outline:none;border-color:var(--qs-brand);box-shadow:0 0 0 3px rgba(247,146,30,.16);
}
.qs-field input[aria-invalid="true"]{border-color:var(--qs-err);box-shadow:0 0 0 3px rgba(213,2,9,.12)}
.qs-err{display:none;font-size:.74rem;color:var(--qs-err);margin-top:5px;font-weight:500}
.qs-field.is-bad .qs-err{display:block}

.qs-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.qs-unit{display:inline-flex;gap:2px;background:var(--qs-tint);padding:2px;border-radius:6px;margin-bottom:6px}
.qs-unit button{
  border:0;background:none;cursor:pointer;padding:3px 8px;border-radius:4px;
  font-family:var(--qs-display);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--qs-mute);transition:background .15s,color .15s;
}
.qs-unit button[aria-pressed="true"]{background:#fff;color:var(--qs-ink)}

.qs-dims{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:7px;align-items:center}
.qs-dims span{color:#C3BCB5;font-size:.85rem;text-align:center}

/* ── packages ── */
.qs-pkg{border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);padding:16px;margin-bottom:12px;position:relative;background:#fff}
.qs-pkg + .qs-pkg{background:#FDFBF9}
.qs-pkg__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qs-pkg__no{
  font-family:var(--qs-display);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--qs-brand);
}
.qs-pkg__rm{
  border:0;background:none;cursor:pointer;color:var(--qs-mute);font-size:.75rem;
  font-weight:600;font-family:var(--qs-display);padding:4px 6px;border-radius:6px;transition:color .15s,background .15s;
}
.qs-pkg__rm:hover{color:var(--qs-err);background:#FFF1F1}
.qs-pkg__meta{
  font-size:.72rem;color:var(--qs-mute);margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--qs-line);display:flex;flex-wrap:wrap;gap:14px;
}
.qs-pkg__meta b{color:var(--qs-ink);font-weight:600}

.qs-add{
  width:100%;border:1.5px dashed var(--qs-line);background:#fff;border-radius:var(--qs-r-sm);
  padding:11px;cursor:pointer;font-family:var(--qs-display);font-weight:600;font-size:.85rem;
  color:var(--qs-body);transition:border-color .18s,color .18s,background .18s;margin-bottom:16px;
}
.qs-add:hover{border-color:var(--qs-brand);color:var(--qs-brand);background:var(--qs-tint)}
.qs-add[disabled]{opacity:.45;cursor:not-allowed}

/* ── buttons ── */
.qs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--qs-display);font-weight:600;font-size:.92rem;padding:14px 26px;
  border-radius:var(--qs-r-sm);border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s,color .18s,box-shadow .18s;
  white-space:nowrap;
}
.qs-btn:hover:not([disabled]){transform:translateY(-2px)}
.qs-btn--primary{background:var(--qs-brand);color:#fff;box-shadow:0 8px 22px rgba(247,146,30,.28)}
.qs-btn--primary:hover:not([disabled]){background:var(--qs-brand-dk);box-shadow:0 14px 30px rgba(247,146,30,.34)}
.qs-btn--outline{border-color:var(--qs-line);color:var(--qs-ink);background:#fff}
.qs-btn--outline:hover:not([disabled]){border-color:var(--qs-brand);color:var(--qs-brand)}
.qs-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.qs-btn--block{width:100%}
.qs-arrow{transition:transform .18s ease}
.qs-btn:hover:not([disabled]) .qs-arrow{transform:translateX(4px)}

.qs-spin{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:qs-spin .7s linear infinite;
}
@keyframes qs-spin{to{transform:rotate(360deg)}}

/* ── FAQ helper line (Change Request point 5) ── */
.qs-help{
  margin:14px 0 0;font-size:.8rem;color:var(--qs-mute);text-align:center;
}
.qs-help a{color:var(--qs-blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(28,103,213,.3)}
.qs-help a:hover{border-bottom-color:var(--qs-blue)}

/* ── divider + tracking ── */
.qs-divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:.8rem;color:var(--qs-mute)}
.qs-divider::before,.qs-divider::after{content:"";flex:1;height:1px;background:var(--qs-line)}
.qs-track-row{display:grid;grid-template-columns:1fr auto;gap:10px}

/* ── results ── */
.qs-results{margin-top:22px}
.qs-results__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--qs-line);flex-wrap:wrap;
}
.qs-results__count{font-family:var(--qs-display);font-weight:600;font-size:.9rem;color:var(--qs-ink)}
.qs-results__count span{color:var(--qs-mute);font-weight:400;font-size:.8rem;display:block;margin-top:2px}
.qs-sort{display:inline-flex;gap:2px;background:var(--qs-tint);padding:3px;border-radius:8px}
.qs-sort button{
  border:0;background:none;cursor:pointer;padding:6px 11px;border-radius:6px;
  font-family:var(--qs-display);font-size:.75rem;font-weight:600;color:var(--qs-body);transition:background .15s,color .15s;
}
.qs-sort button[aria-pressed="true"]{background:#fff;color:var(--qs-ink);box-shadow:0 1px 4px rgba(23,20,18,.08)}

.qs-rate{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);padding:15px;
  margin-bottom:10px;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s;
  opacity:0;transform:translateY(10px);animation:qs-in .45s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes qs-in{to{opacity:1;transform:none}}
.qs-rate:hover{border-color:var(--qs-brand);box-shadow:0 8px 22px rgba(23,20,18,.07)}
.qs-rate.is-best{border-color:var(--qs-brand);background:linear-gradient(#fff,var(--qs-tint))}

.qs-rate__logo{
  width:44px;height:44px;border-radius:8px;background:var(--qs-tint);
  display:grid;place-items:center;overflow:hidden;flex-shrink:0;
}
.qs-rate__logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.qs-rate__logo b{font-family:var(--qs-display);font-weight:700;font-size:.8rem;color:var(--qs-brand)}

.qs-rate__name{font-family:var(--qs-display);font-weight:600;font-size:.95rem;color:var(--qs-ink);margin:0;line-height:1.3}
.qs-rate__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.qs-tag{
  font-size:.68rem;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:20px;
  background:#F5F2EF;color:var(--qs-body);white-space:nowrap;
}
.qs-tag--transit{background:rgba(28,103,213,.1);color:var(--qs-blue)}
.qs-tag--best{background:var(--qs-brand);color:#fff}
.qs-tag--drop{background:rgba(22,163,74,.1);color:var(--qs-ok)}

.qs-rate__price{text-align:right;white-space:nowrap}
.qs-rate__total{font-family:var(--qs-display);font-weight:700;font-size:1.32rem;color:var(--qs-ink);letter-spacing:-.03em;line-height:1}
.qs-rate__total sup{font-size:.6em;font-weight:600;margin-right:1px;top:-.5em}
.qs-rate__break{font-size:.7rem;color:var(--qs-mute);margin-top:5px;display:block}

.qs-rate__foot{
  grid-column:1/-1;border-top:1px dashed var(--qs-line);margin-top:12px;padding-top:11px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.qs-rate__wt{font-size:.72rem;color:var(--qs-mute)}
.qs-rate__wt b{color:var(--qs-ink);font-weight:600}

/* ── states ── */
.qs-state{padding:30px 20px;text-align:center;border:1px dashed var(--qs-line);border-radius:var(--qs-r-sm);margin-top:20px}
.qs-state h4{font-family:var(--qs-display);font-size:.98rem;color:var(--qs-ink);margin:0 0 6px;font-weight:600}
.qs-state p{font-size:.85rem;color:var(--qs-mute);margin:0 0 14px}
.qs-state--error{border-color:rgba(213,2,9,.3);background:#FFF8F8}
.qs-state--error h4{color:var(--qs-err)}

.qs-skel{border:1px solid var(--qs-line);border-radius:var(--qs-r-sm);padding:15px;margin-bottom:10px;display:grid;grid-template-columns:44px 1fr 90px;gap:14px;align-items:center}
.qs-skel i{display:block;background:linear-gradient(90deg,#F1ECE7 25%,#F8F5F2 50%,#F1ECE7 75%);background-size:200% 100%;animation:qs-sh 1.3s infinite;border-radius:6px}
@keyframes qs-sh{to{background-position:-200% 0}}
.qs-skel i:nth-child(1){width:44px;height:44px;border-radius:8px}
.qs-skel i:nth-child(2){height:14px}
.qs-skel i:nth-child(3){height:22px}

.qs-note{font-size:.72rem;color:var(--qs-mute);margin-top:14px;line-height:1.5;text-align:center}

/* ── responsive ── */
@media (max-width:600px){
  .qs-calc{padding:20px}
  .qs-row{grid-template-columns:1fr}
  .qs-rate{grid-template-columns:38px 1fr;row-gap:10px}
  .qs-rate__logo{width:38px;height:38px}
  .qs-rate__price{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:10px}
  .qs-rate__break{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .qs-calc *,.qs-calc *::before,.qs-calc *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .qs-rate{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   RESULTS DIALOG

   Rates used to render underneath the form, which pushed the
   hero apart on every search. They now open over the page, so
   the layout never shifts. Matches the live site, which shows
   a Shipping Options dialog.
═══════════════════════════════════════════════════════════ */

.qs-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Poppins',system-ui,sans-serif;
}
.qs-modal[hidden]{display:none}

.qs-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,13,11,.55);
  backdrop-filter:blur(3px);
  animation:qs-fade .22s ease both;
}

.qs-modal__box{
  position:relative;
  width:min(760px,100%);
  max-height:min(86vh,760px);
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(15,13,11,.3);
  overflow:hidden;
  animation:qs-pop .28s cubic-bezier(.22,1,.36,1) both;
}
.qs-modal__box:focus{outline:none}

.qs-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid #EDE6DE;
}
.qs-modal__title{
  margin:0;
  font-size:1.18rem;
  font-weight:700;
  color:#171412;
  font-family:'Baloo 2','Poppins',system-ui,sans-serif;
}
.qs-modal__route{
  margin:4px 0 0;
  font-size:.82rem;
  letter-spacing:.02em;
  color:#8B8781;
}
.qs-modal__route:empty{display:none}

/* Low volume line under the route. Sits with the heading rather than
   in the results list so it is readable before any rate comes back,
   which is the moment someone with two parcels decides to phone. */
.qs-modal__help{
  margin:6px 0 0;
  font-size:.86rem;
  line-height:1.5;
  color:var(--qs-body,#5F6672);
  max-width:52ch;
}
.qs-modal__help a{
  color:var(--qs-brand,#F7921E);
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  border-bottom:1px solid rgba(247,146,30,.4);
}
.qs-modal__help a:hover{border-bottom-color:currentColor}

.qs-modal__x{
  flex:none;
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid #EDE6DE;
  border-radius:50%;
  background:#fff;
  font-size:1.5rem;
  line-height:1;
  color:#5F6672;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.qs-modal__x:hover{background:#FFF4E6;color:#171412;border-color:#F7921E}

/* The results list scrolls inside the dialog, never the page. */
.qs-modal .qs-results{
  margin:0;
  padding:18px 24px 24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Stop the page behind from scrolling while the dialog is open. */
html.qs-modal-open{overflow:hidden}

@keyframes qs-fade{from{opacity:0}to{opacity:1}}
@keyframes qs-pop{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}

@media (max-width:600px){
  .qs-modal{padding:0;align-items:flex-end}
  .qs-modal__box{
    width:100%;
    max-height:88vh;
    border-radius:18px 18px 0 0;
  }
  .qs-modal__head{padding:18px 18px 14px}
  .qs-modal .qs-results{padding:16px 18px 22px}
}

@media (prefers-reduced-motion:reduce){
  .qs-modal__backdrop,.qs-modal__box{animation:none}
}


/* ═══════════════════════════════════════════════════════════
   WEIGHT TYPE SELECTOR, REF A-2

   Replaces the read-only strip that used to sit under the
   dimension boxes. On an empty form that strip printed three long
   dashes, which on the live page read as three broken controls.

   These are real radio inputs inside a real fieldset. The input
   itself is hidden from sight but never from the accessibility
   tree or the keyboard: it keeps its size and its focus ring is
   drawn on the label around it.
   ═══════════════════════════════════════════════════════════ */

.qs-wtype {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;   /* a fieldset will not shrink inside a grid without this */
}

.qs-wtype legend {
  padding: 0;
  margin-bottom: 7px;
  font-size: .72rem;
  font-weight: 600;
  color: #6B625B;
}

.qs-wtype__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.qs-wtype__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.3;
  color: #5C544E;
  border-radius: 6px;
  padding: 3px 4px;
}

/* Visually hidden, not display:none. A radio that is display:none is
   removed from the tab order and from the accessibility tree, which
   would make this keyboard-unreachable. */
.qs-wtype__opt input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The dot is drawn on the label, so it can be styled consistently
   across browsers without fighting each one's native radio. */
.qs-wtype__lab { position: relative; padding-left: 21px; }
.qs-wtype__lab::before,
.qs-wtype__lab::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.qs-wtype__lab::before {
  left: 0;
  width: 14px; height: 14px;
  border: 1.5px solid #CFC7C0;
  background: #fff;
  transition: border-color .18s ease;
}
.qs-wtype__lab::after {
  left: 4px;
  width: 6px; height: 6px;
  background: var(--qs-orange, #F7921E);
  opacity: 0;
  transition: opacity .18s ease;
}

.qs-wtype__opt input:checked + .qs-wtype__lab::before { border-color: var(--qs-orange, #F7921E); }
.qs-wtype__opt input:checked + .qs-wtype__lab::after  { opacity: 1; }
.qs-wtype__opt input:checked ~ .qs-wtype__val         { color: var(--qs-orange, #F7921E); }

.qs-wtype__opt input:focus-visible + .qs-wtype__lab::before {
  outline: 2px solid var(--qs-orange, #F7921E);
  outline-offset: 2px;
}

/* The computed figure. Empty until there is a weight and three
   dimensions, and empty is the correct state: an em dash standing in
   for "not worked out yet" is what made the old strip look broken. */
.qs-wtype__val {
  font-weight: 600;
  font-size: .78rem;
  color: #2B2724;
  font-variant-numeric: tabular-nums;
}
.qs-wtype__val:empty { display: none; }

.qs-tip {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #A79E96;
  cursor: help;
  line-height: 0;
}
.qs-tip:hover, .qs-tip:focus-visible { color: var(--qs-orange, #F7921E); }

/* ── The tooltip ──
   This replaces the browser's native title tooltip, which every
   browser delays by around a second before showing and then draws in
   the OS style, wherever it likes. That delay was being read as the
   tooltip not working.

   Drawn from data-tip so it appears immediately, sits where it is put
   and matches the rest of the calculator. The bubble and its arrow are
   the button's two pseudo-elements. */
.qs-tip::after,
.qs-tip::before {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.qs-tip::after {
  content: attr(data-tip);
  z-index: 30;
  width: max-content;
  max-width: 250px;
  padding: 9px 11px;
  transform: translate(-50%, 4px);
  border-radius: 9px;
  background: #2B2724;
  color: #fff;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 10px 26px rgba(23, 20, 18, .22);
}
/* The arrow. A rotated square rather than a border triangle, so it
   picks up the same background colour as the bubble. */
.qs-tip::before {
  content: "";
  z-index: 31;
  width: 9px; height: 9px;
  bottom: calc(100% + 5px);
  transform: translate(-50%, 4px) rotate(45deg);
  background: #2B2724;
}
.qs-tip:hover::after,  .qs-tip:hover::before,
.qs-tip:focus-visible::after, .qs-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
.qs-tip:hover::after,
.qs-tip:focus-visible::after { transform: translate(-50%, 0); }
.qs-tip:hover::before,
.qs-tip:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

@media (max-width: 560px) {
  /* Near the right edge of a phone a centred bubble runs off screen,
     so it is pinned to the button's right instead. */
  .qs-tip::after { left: auto; right: 0; transform: translate(0, 4px); max-width: 210px; }
  .qs-tip:hover::after, .qs-tip:focus-visible::after { transform: translate(0, 0); }
}

@media (max-width: 480px) {
  /* Three options across is too tight on a narrow phone, and a
     wrapped radio reads as a broken row. Stacked instead. */
  .qs-wtype__opts { flex-direction: column; gap: 8px; }
}