/* =========================================================================================================
   EQUATOR FLOW CUSTOMER PORTAL: DESIGN SYSTEM (Stage 1, v13.87, user brief 2026-10-04)
   Shared tokens and components for the customer-facing pages only: everything is scoped to body.cp, which
   flow-portal-ui.js sets while a portal page (.public-quote-shell / .bn-page) is on screen. Staff Flow screens
   are never matched. Loaded after app.css. Presentation only: no behaviour, data or logic changes.
   Stage 1 standardises shared components; page layouts are left for Stage 2.
   ========================================================================================================= */

/* ---------- 1. Tokens ---------- */
body.cp{
  /* colour */
  --cp-blue:#003C55;            /* Equator blue  rgb(0,60,85) */
  --cp-yellow:#EDCC47;          /* Equator yellow rgb(237,204,71) */
  --cp-yellow-hover:#E3C035;
  --cp-page:#F5F7F8;            /* page background */
  --cp-card:#FFFFFF;            /* card background */
  --cp-border:#D7E1E6;          /* standard border */
  --cp-divider:#C6D3D9;         /* stronger divider, input borders */
  --cp-text:#334B59;            /* main body text */
  --cp-muted:#667985;           /* secondary / helper text */
  --cp-soft:#EDF4F7;            /* pale blue: secondary actions, selected rows */
  --cp-soft-2:#F1F5F7;          /* table header, internal panels */
  --cp-hover:#F7FAFB;           /* row hover */
  --cp-focus:0 0 0 3px rgba(0,60,85,.14);
  --cp-ok-bg:#E8F5EE;   --cp-ok:#1D6B43;
  --cp-warn-bg:#FFF6DA; --cp-warn:#7A5A06;   --cp-warn-line:#EDD48A;
  --cp-bad-bg:#FDECEC;  --cp-bad:#A12F2F;    --cp-bad-line:#F2C4C4;
  --cp-info-bg:#E6F0F6; --cp-info:#0B4A66;
  --cp-neutral-bg:#EEF2F4; --cp-neutral:#4C6170;
  /* radius */
  --cp-r-hero:14px; --cp-r-card:12px; --cp-r-inner:10px; --cp-r-upload:10px; --cp-r-input:7px; --cp-r-btn:8px; --cp-r-tab:18px; --cp-r-pill:999px;
  /* spacing scale */
  --cp-s1:4px; --cp-s2:8px; --cp-s3:12px; --cp-s4:16px; --cp-s5:24px; --cp-s6:32px; --cp-s7:40px;
  /* type */
  --cp-fs-hero:31px; --cp-fs-title:26px; --cp-fs-h2:19px; --cp-fs-body:15px; --cp-fs-sm:14px; --cp-fs-help:13.5px; --cp-fs-label:12.5px; --cp-fs-xs:12px;
  --cp-shadow:0 2px 8px rgba(0,0,0,.04);
  /* existing app variables, re-pointed inside the portal so older rules follow the new palette */
  --bg:var(--cp-page); --muted:var(--cp-muted); --text:var(--cp-text); --line:var(--cp-border); --soft:var(--cp-soft); --blue:var(--cp-blue); --navy:var(--cp-blue); --yellow:var(--cp-yellow);
  background:var(--cp-page);color:var(--cp-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--cp-fs-body);line-height:1.5}
body.cp .public-quote-shell,body.cp .bn-page{background:var(--cp-page);color:var(--cp-text)}

/* ---------- 2. Typography ---------- */
body.cp h1,body.cp h2,body.cp h3,body.cp h4{color:var(--cp-blue);letter-spacing:-.005em}
/* headings on the dark banners stay white */
body.cp .wj-hero h1,body.cp .wj-hero h2,body.cp .wj-hero h3,body.cp .bn-top h1,body.cp .ca-hero h1{color:#fff!important}
body.cp .wj-hero h1{font-size:var(--cp-fs-hero)!important;font-weight:700!important;line-height:1.15}
body.cp .wj-card-head h2,body.cp .bn-head h1,body.cp .ca-head h2{font-size:var(--cp-fs-title)!important;font-weight:700!important;line-height:1.2}
body.cp .wbk-head h3,body.cp .bn-card h3,body.cp .ca-sub,body.cp .wj-loc-head b,body.cp .bk-card h3{font-size:var(--cp-fs-h2)!important;font-weight:650!important}
body.cp small,body.cp .sub,body.cp .muted,body.cp .wbk-muted,body.cp .wj-card-head p,body.cp .cp-paste small{color:var(--cp-muted)}
/* meaningful helper / instruction text is never below 13px */
body.cp .wj-card-head p,body.cp .wbk-muted,body.cp .cp-paste small,body.cp .cp-upload small,body.cp .wj-pc-note,body.cp .ca-pick-note,body.cp .bn-card .sub,body.cp .bk-note,body.cp .wj-loc-head small,body.cp .field small{font-size:var(--cp-fs-help)!important;line-height:1.45}
body.cp .field label,body.cp .wbk .field label,body.cp .bn-page .field label{font-size:var(--cp-fs-label)!important;font-weight:600!important;color:var(--cp-text)!important;margin-bottom:var(--cp-s1);text-transform:none;letter-spacing:0}

/* ---------- 3. Buttons ---------- */
/* standard */
body.cp .btn{min-height:40px;padding:0 var(--cp-s4);border-radius:var(--cp-r-btn);font-size:var(--cp-fs-sm);font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:var(--cp-s2);box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
body.cp .btn.small{min-height:32px;padding:0 var(--cp-s3);font-size:13px;border-radius:7px}
body.cp .btn:focus-visible,body.cp .wj-continue:focus-visible,body.cp .ca-big:focus-visible{outline:none;box-shadow:var(--cp-focus)}
body.cp .btn:disabled,body.cp .btn[disabled]{background:#E6ECEF!important;color:#8A9AA4!important;border-color:#E6ECEF!important;cursor:not-allowed}
/* PRIMARY: yellow, dark blue text */
body.cp .btn.yellow,body.cp .btn.primary,body.cp .bn-submit,body.cp #publicCalculate,body.cp .btn.bk-main,body.cp .btn.cp-primary{background:var(--cp-yellow)!important;color:var(--cp-blue)!important;border:1px solid var(--cp-yellow)!important;min-height:42px;font-weight:600}
body.cp .btn.yellow:hover,body.cp .btn.primary:hover,body.cp .bn-submit:hover,body.cp #publicCalculate:hover,body.cp .btn.bk-main:hover,body.cp .btn.cp-primary:hover{background:var(--cp-yellow-hover)!important;border-color:var(--cp-yellow-hover)!important}
/* SECONDARY: pale blue, blue text, subtle border */
body.cp .btn.secondary,body.cp .btn.blue,body.cp .btn.cp-secondary{background:var(--cp-soft)!important;color:var(--cp-blue)!important;border:1px solid #C3D6E0!important}
body.cp .btn.secondary:hover,body.cp .btn.blue:hover,body.cp .btn.cp-secondary:hover{background:#E1EDF3!important;border-color:#A9C4D2!important}
/* navy (strong secondary, e.g. Email quote) keeps the brand blue */
body.cp .btn.navy{background:var(--cp-blue)!important;color:#fff!important;border:1px solid var(--cp-blue)!important}
/* TERTIARY: low-priority text action */
body.cp .btn.tertiary,body.cp .btn.cp-tertiary,body.cp .btn[data-bk-paste-clear]{background:transparent!important;color:var(--cp-blue)!important;border:1px solid transparent!important;text-decoration:underline;text-underline-offset:3px;padding:0 var(--cp-s2)}
body.cp .btn.tertiary:hover,body.cp .btn.cp-tertiary:hover,body.cp .btn[data-bk-paste-clear]:hover{background:var(--cp-soft-2)!important}
body.cp .btn.danger{background:var(--cp-bad-bg)!important;color:var(--cp-bad)!important;border:1px solid var(--cp-bad-line)!important}
/* WIZARD CONTINUE: big yellow, arrow right */
body.cp .wj-continue,body.cp .cp-continue{min-height:56px!important;border-radius:var(--cp-r-inner)!important;background:var(--cp-yellow)!important;color:var(--cp-blue)!important;border:1px solid var(--cp-yellow)!important;font-size:16px!important;font-weight:650!important;display:flex!important;align-items:center;justify-content:center;gap:var(--cp-s3);box-shadow:none!important;padding:0 var(--cp-s5)!important}
body.cp .wj-continue:hover,body.cp .cp-continue:hover{background:var(--cp-yellow-hover)!important}
body.cp .wj-continue svg,body.cp .cp-continue svg{margin-left:auto}
body.cp .wj-continue:disabled{background:#E6ECEF!important;border-color:#E6ECEF!important;color:#8A9AA4!important}

/* ---------- 4. Inputs, selects, date inputs ---------- */
body.cp .field input:not([type=checkbox]):not([type=radio]):not([type=file]),body.cp .field select,body.cp .field textarea,
body.cp .wj-loc-fields input,body.cp .wj-loc-fields select,body.cp .bk-def-form input,body.cp .bk-def-form select,
body.cp .ca-form input,body.cp .ca-form select,body.cp .ca-form textarea,body.cp .cp-filters input,body.cp .cp-filters select,body.cp .ca-find input,body.cp .ca-doc-filters input,body.cp .ca-doc-filters select,
body.cp .public-package-row input,body.cp .public-package-row select,body.cp #publicInsuranceBox input,body.cp #publicInsuranceBox select,body.cp .bk-newlist input,body.cp .cp-input{
  min-height:42px;border:1px solid var(--cp-divider)!important;border-radius:var(--cp-r-input)!important;background:#fff!important;color:var(--cp-text)!important;font-size:14.5px!important;font-family:inherit;padding:0 var(--cp-s3)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
body.cp .field textarea,body.cp .ca-form textarea,body.cp textarea.cp-input{min-height:84px;padding:var(--cp-s2) var(--cp-s3)!important;line-height:1.45}
body.cp .field select,body.cp .wj-loc-fields select,body.cp .cp-filters select,body.cp .bk-def-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003C55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:36px!important}
body.cp input:focus,body.cp select:focus,body.cp textarea:focus{outline:none;border-color:var(--cp-blue)!important;box-shadow:var(--cp-focus)!important}
body.cp input::placeholder,body.cp textarea::placeholder{color:#8C9CA6}
/* dense grids keep a compact size (boxes, customs codes) */
body.cp .bk-boxes input,body.cp .bk-boxes select,body.cp .pc-codes input,body.cp .public-customs-row input{min-height:36px!important;font-size:14px!important;border-radius:var(--cp-r-input)!important;border:1px solid var(--cp-divider)!important}
/* Flow's own drop-down (flow-dropdowns.js) matches the inputs */
body.cp .fdd-trigger,body.cp .fdd-wrap>input{min-height:42px;border-radius:var(--cp-r-input)}

/* ---------- 5. Tabs / segmented controls ---------- */
body.cp .wj-seg button,body.cp .wj-chips button,body.cp .bk-speed-b,body.cp .cp-tab{
  min-height:37px!important;padding:0 var(--cp-s4)!important;border-radius:var(--cp-r-tab)!important;background:var(--cp-soft)!important;color:var(--cp-blue)!important;border:1px solid #C9DAE3!important;font-size:14px!important;font-weight:600!important;box-shadow:none!important}
body.cp .wj-seg button.active,body.cp .wj-chips button.active,body.cp .bk-speed-b.on,body.cp .cp-tab.on{background:var(--cp-blue)!important;color:#fff!important;border-color:var(--cp-blue)!important}
body.cp .cp-tab:hover:not(.on),body.cp .wj-seg button:hover:not(.active),body.cp .wj-chips button:hover:not(.active),body.cp .bk-speed-b:hover:not(.on){background:#E1EDF3!important}
body.cp .wj-seg,body.cp .bk-speed{background:transparent!important;border:0!important;padding:0!important;gap:var(--cp-s2)!important;display:inline-flex;flex-wrap:wrap}

/* ---------- 6. Cards ---------- */
/* hero / banner */
body.cp .wj-hero{border-radius:var(--cp-r-hero)!important;box-shadow:none!important}
/* main white work card */
body.cp .wj-card,body.cp .bn-card,body.cp .public-route-panel,body.cp .public-parcel-panel,body.cp .public-price-panel,body.cp .cp-card{
  background:var(--cp-card)!important;border:1px solid var(--cp-border)!important;border-radius:var(--cp-r-card)!important;box-shadow:var(--cp-shadow)!important}
body.cp .wj-card,body.cp .cp-card{padding:var(--cp-s5) 28px}
/* internal section card */
body.cp .wbk-card,body.cp .wj-loc,body.cp .bk-defaults,body.cp .bk-hs,body.cp .bk-dt,body.cp .bk-values,body.cp .public-customs-panel,body.cp .public-incoterm-row,body.cp .wq-share,body.cp .bk-saved,body.cp .cp-inner{
  border-radius:var(--cp-r-inner)!important;border:1px solid var(--cp-border)!important;box-shadow:none!important}
body.cp .wj-card .wj-card{box-shadow:none!important}
/* large action cards (My account main buttons, single / bulk header) */
body.cp .ca-big{border-radius:var(--cp-r-card)!important}
body.cp .ca-big b{font-size:19px!important;font-weight:650!important}
body.cp .ca-big small{color:var(--cp-blue)!important;opacity:.85;font-size:13.5px!important}
body.cp .ca-big.ca-big-bulk small,body.cp .wj-hero small,body.cp .wj-hero p{color:rgba(255,255,255,.88)!important;opacity:1}

/* ---------- 7. Notices: yellow / red only for real warnings; routine tips neutral ---------- */
body.cp .cp-note,body.cp .wj-pc-note{background:var(--cp-soft-2);border:1px solid var(--cp-border);border-radius:var(--cp-r-inner);color:var(--cp-muted);padding:var(--cp-s3) var(--cp-s4)}
body.cp .wj-pitch,body.cp .wj-local,body.cp .bn-warn,body.cp .pc-note,body.cp .ca-pick-note,body.cp .cp-warn{background:var(--cp-warn-bg)!important;border:1px solid var(--cp-warn-line)!important;border-radius:var(--cp-r-inner)!important;color:var(--cp-text)}
body.cp .wj-dropoff{background:var(--cp-warn-bg)!important;border-color:var(--cp-warn-line)!important;color:var(--cp-warn)!important;border-radius:var(--cp-r-pill)!important;font-size:12px!important;font-weight:600!important}
body.cp .err,body.cp .bn-error,body.cp .wj-field-error:not(:empty){color:var(--cp-bad)}
body.cp .wj-invalid{border-color:var(--cp-bad-line)!important;background:#FFFBFB!important}

/* ---------- 8. Operational tables ---------- */
body.cp .bk-v2 .data-table,body.cp .bn-page .trk-log,body.cp .cp-table{border-collapse:collapse!important;border:0!important;width:100%;background:#fff;font-size:14px!important;color:var(--cp-text)}
body.cp .bk-v2 .data-table th,body.cp .bn-page .trk-log th,body.cp .cp-table th{background:var(--cp-soft-2)!important;color:#3F5A69!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.03em;padding:10px var(--cp-s3)!important;border:0!important;border-bottom:1px solid var(--cp-divider)!important;text-align:left}
body.cp .bk-v2 .data-table td,body.cp .bn-page .trk-log td,body.cp .cp-table td{padding:11px var(--cp-s3)!important;border:0!important;border-bottom:1px solid var(--cp-border)!important;vertical-align:middle;font-size:14px}
body.cp .bk-v2 .data-table td small,body.cp .cp-table td small{font-size:12.5px!important;color:var(--cp-muted)!important}
body.cp .bk-v2 .data-table tbody tr:hover td,body.cp .cp-table tbody tr:hover td{background:var(--cp-hover)}
body.cp .bk-v2 .data-table tr.chosen td,body.cp .bk-svc-table tr.chosen td,body.cp .cp-table tr.selected td{background:var(--cp-soft)!important}
body.cp .bk-v2 .data-table tr.chosen td:first-child,body.cp .cp-table tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--cp-blue)!important}
body.cp .table-wrap{overflow-x:auto;border:1px solid var(--cp-border);border-radius:var(--cp-r-inner);background:#fff}
body.cp .cp-table .btn.small,body.cp .bk-v2 .data-table .btn.small{min-height:30px;border-radius:7px}

/* ---------- 9. Status badges (one size; Quoted, Booked, New, Saved, Emailed, Delivered, Issue, Failed) ---------- */
body.cp .bn-page .trk-pill,body.cp .cp-badge{display:inline-flex!important;align-items:center;gap:var(--cp-s1);height:24px;padding:0 10px!important;border-radius:var(--cp-r-pill)!important;font-size:12px!important;font-weight:600!important;line-height:1;white-space:nowrap;border:1px solid transparent;background:var(--cp-neutral-bg);color:var(--cp-neutral)}
body.cp .cp-badge.quoted{background:var(--cp-neutral-bg)!important;color:var(--cp-neutral)!important;border-color:#DCE4E8!important}
body.cp .bn-page .trk-pill.ok,body.cp .cp-badge.booked,body.cp .cp-badge.delivered{background:var(--cp-ok-bg)!important;color:var(--cp-ok)!important;border-color:#CBE7D7!important}
body.cp .cp-badge.new,body.cp .cp-badge.emailed{background:var(--cp-info-bg)!important;color:var(--cp-info)!important;border-color:#C6DCE9!important}
body.cp .cp-badge.saved{background:#FFF8DD!important;color:#6B5200!important;border-color:#EDDB8F!important}
body.cp .cp-badge.issue{background:var(--cp-warn-bg)!important;color:var(--cp-warn)!important;border-color:var(--cp-warn-line)!important}
body.cp .bn-page .trk-pill.bad,body.cp .cp-badge.failed{background:var(--cp-bad-bg)!important;color:var(--cp-bad)!important;border-color:var(--cp-bad-line)!important}
body.cp .wj-transit{border-radius:var(--cp-r-pill)!important;font-size:13px!important;font-weight:600!important}

/* ---------- 10. Upload panel ---------- */
body.cp .cp-upload{display:flex;align-items:center;gap:var(--cp-s4);background:var(--cp-soft-2)!important;border:1.5px dashed #A9BFCA!important;border-radius:var(--cp-r-upload)!important;padding:var(--cp-s5)!important;color:var(--cp-text);cursor:pointer;transition:background-color .15s,border-color .15s}
body.cp .cp-upload:hover{background:var(--cp-soft)!important;border-color:var(--cp-blue)!important}
body.cp .cp-upload.drag,body.cp .cp-upload.over{background:#E3EEF4!important;border-color:var(--cp-blue)!important;border-style:solid!important}
body.cp .cp-upload b{font-size:15px;font-weight:650;color:var(--cp-blue)}
body.cp .bk-drop-ico,body.cp .cp-upload .fi{color:var(--cp-blue);flex:0 0 auto}

/* ---------- 11. AI assisted paste ---------- */
body.cp .cp-paste{background:#fff!important;border:1px solid var(--cp-border)!important;border-radius:var(--cp-r-inner)!important;padding:var(--cp-s4)!important}
body.cp .cp-paste label>b,body.cp .cp-paste h4{display:block;font-size:15px;font-weight:650;color:var(--cp-blue);margin-bottom:var(--cp-s1)}
body.cp .cp-paste textarea{width:100%;min-height:84px!important;margin-top:var(--cp-s2);border:1px solid var(--cp-divider)!important;border-radius:var(--cp-r-input)!important;padding:var(--cp-s2) var(--cp-s3)!important;font-size:14px;font-family:inherit}
body.cp .cp-paste-actions{display:flex;gap:var(--cp-s2);align-items:center;margin-top:var(--cp-s2)}

/* ---------- 12. Workflow stepper (3-step quote, 8-step bulk) ---------- */
body.cp .wj-steps{gap:var(--cp-s2)!important;overflow-x:auto;scrollbar-width:thin}
body.cp .wj-step{font-size:14px!important;font-weight:600!important;color:var(--cp-text)!important;white-space:nowrap}
body.cp .wj-step span{width:30px!important;height:30px!important;min-width:30px;border-radius:50%!important;font-size:13px!important;font-weight:600!important;display:inline-flex!important;align-items:center;justify-content:center;background:#E6ECEF!important;color:var(--cp-text)!important;border:0!important;box-shadow:none!important}
body.cp .wj-step.current span{background:var(--cp-blue)!important;color:#fff!important;box-shadow:0 0 0 3px rgba(237,204,71,.55)!important}
body.cp .wj-step.done span{background:var(--cp-blue)!important;color:transparent!important;position:relative}
body.cp .wj-step.done span::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat}
body.cp .wj-step.current{color:var(--cp-blue)!important}
body.cp .wj-step-line{background:#CFDBE1!important;height:2px!important;min-width:16px}

/* ---------- 13. Modals (portal pop-ups) ---------- */
body.cp .modal{border-radius:var(--cp-r-card)!important;border:1px solid var(--cp-border);box-shadow:0 12px 32px rgba(0,30,45,.16)!important}
body.cp .modal-head h2{font-size:var(--cp-fs-h2)!important;font-weight:650!important;color:var(--cp-blue)}

/* ---------- 14. Icons (Lucide, flow-icons.js) ---------- */
body.cp .fi{flex:0 0 auto;vertical-align:middle}
body.cp .wj-pin .fi{width:22px;height:22px}

/* ---------- 14b. Shared layout pieces (Stage 2, v13.89) ---------- */
/* tab row: wraps; --fill makes every tab the same width (My account) */
body.cp .cp-tabs{display:flex;flex-wrap:wrap;gap:var(--cp-s2);margin:0}
body.cp .cp-tabs--fill{display:grid;grid-template-columns:repeat(var(--cp-tabs-n,5),minmax(0,1fr)) 120px}
body.cp .cp-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cp .cp-tab.attn:not(.on){border-color:var(--cp-bad-line)!important;box-shadow:inset 0 0 0 1px var(--cp-bad-line)!important}
body.cp .cp-tab--refresh{background:#fff!important}
/* filter row: search first and widest, then dates and pick lists; labels like form labels */
body.cp .cp-filters{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:var(--cp-s3);align-items:end;margin:0 0 var(--cp-s4)}
body.cp .cp-filters--one{grid-template-columns:minmax(220px,420px)}
body.cp .cp-filters label{display:grid;gap:var(--cp-s1);min-width:0}
body.cp .cp-filters label>small{font-size:var(--cp-fs-label)!important;font-weight:600!important;color:var(--cp-text)!important}
body.cp .cp-filters input,body.cp .cp-filters select{width:100%}
body.cp .cp-filters .btn{justify-self:start}
/* one horizontal summary strip (not separate cards) */
body.cp .cp-summary{display:flex;flex-wrap:wrap;gap:var(--cp-s5);margin:0 0 var(--cp-s4);padding:var(--cp-s3) var(--cp-s4);background:var(--cp-soft-2);border:1px solid var(--cp-border);border-radius:var(--cp-r-inner)}
body.cp .cp-summary>div{min-width:120px}
body.cp .cp-summary small{display:block;font-size:var(--cp-fs-label);font-weight:600;color:var(--cp-muted);margin-bottom:2px}
body.cp .cp-summary b{font-size:16px;font-weight:650;color:var(--cp-blue)}
body.cp .cp-summary .ca-bad{color:var(--cp-bad)}
/* empty state: short heading, short explanation, the action */
body.cp .cp-empty{padding:var(--cp-s5);border:1px dashed var(--cp-divider);border-radius:var(--cp-r-inner);background:#FBFCFD;margin:0 0 var(--cp-s4)}
body.cp .cp-empty b{display:block;font-size:16px;font-weight:650;color:var(--cp-blue)}
body.cp .cp-empty p{margin:var(--cp-s1) 0 0;font-size:var(--cp-fs-help);color:var(--cp-muted)}
body.cp .cp-empty-acts{display:flex;gap:var(--cp-s2);flex-wrap:wrap;margin-top:var(--cp-s3);align-items:flex-start}
body.cp .cp-help,body.cp .cp-lead,body.cp .cp-loading{font-size:var(--cp-fs-help);color:var(--cp-muted);margin:var(--cp-s1) 0 var(--cp-s3)}
body.cp .cp-lead{margin-top:calc(-1 * var(--cp-s2))}
body.cp .cp-disabled-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
body.cp .cp-disabled-wrap .cp-help{margin:0;max-width:260px;font-size:13px}
body.cp .cp-ellipsis{display:inline-block;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* table helpers: dates and counts on one line, numbers right, actions right, long text wraps (never shrinks) */
body.cp .cp-table td{white-space:normal;overflow-wrap:break-word}
body.cp .cp-table td small{display:block;margin-top:2px;line-height:1.35}
body.cp .cp-table td small.ref{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body.cp .cp-table .nowrap,body.cp .cp-table .act,body.cp .cp-table .act-group{white-space:nowrap}
body.cp .cp-table .num{text-align:right;white-space:nowrap}
body.cp .cp-table .act{text-align:right;width:1%}
body.cp .cp-table .act-group .btn+.btn,body.cp .cp-table .act-group .btn+a,body.cp .cp-table .act-group a+.btn{margin-left:var(--cp-s1)}
body.cp .cp-table .tags .cp-badge{margin:2px 4px 2px 0}
body.cp .cp-table .wrap{min-width:140px;max-width:280px}
body.cp .cp-table tr.is-openable{cursor:pointer}
body.cp .cp-table tr.is-pickable:hover td{background:var(--cp-warn-bg)}
body.cp .cp-badge[title]{cursor:help}
body.cp .cp-badge .fi{width:12px;height:12px}
/* labels written as <span> inside .field (account pop-ups) */
body.cp .field>span{display:block;font-size:var(--cp-fs-label);font-weight:600;color:var(--cp-text);margin-bottom:var(--cp-s1)}
body.cp .modal .field{display:block;margin:0 0 var(--cp-s3)}
/* My account hero: help phone slightly less dominant */
body.cp .wj-hero-help a:not(.wj-hero-mail){font-size:22px!important;font-weight:700!important}
/* the two booking cards: same height, aligned text and arrows, one hover */
body.cp .ca-primary{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--cp-s3)}
body.cp .ca-primary .ca-big{min-height:76px;justify-content:center;padding:var(--cp-s4) 64px var(--cp-s4) var(--cp-s5)!important;box-shadow:none!important;transform:none!important}
body.cp .ca-primary .ca-big:hover{box-shadow:0 4px 14px rgba(0,60,85,.14)!important}
body.cp .ca-primary .ca-big::after{right:24px!important}

/* disabled wins over every button variant (v13.90) */
body.cp .btn:is(.yellow,.primary,.secondary,.blue,.navy,.tertiary,.danger,.bk-main,.cp-primary,.cp-secondary,.cp-tertiary):disabled{background:#E6ECEF!important;color:#7F909A!important;border-color:#DCE3E7!important;text-decoration:none;cursor:not-allowed}
/* table buttons never wrap; header action groups line up at the top */
body.cp .cp-table td .btn,body.cp .ca-sv-acts .btn{white-space:nowrap}
body.cp .ca-sv-acts{display:flex;gap:var(--cp-s2);align-items:flex-start;flex-wrap:wrap}
body.cp .ca-sv-acts .btn{min-height:42px}
body.cp .ca-sv-acts .btn.small{min-height:32px}

/* ---------- 14c. Wizard pieces (Stage 3, v13.92: the bulk Quote & Book wizard) ---------- */
/* wizard footer: Back left (secondary), the next step right (yellow, arrow); same height on every step */
body.cp .cp-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--cp-s3);flex-wrap:wrap;margin-top:var(--cp-s5)!important;padding-top:var(--cp-s4);border-top:1px solid var(--cp-border)}
body.cp .cp-nav .bk-nav-right{display:flex;gap:var(--cp-s2);flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-left:auto}
body.cp .cp-nav .btn{min-height:48px;font-size:15px;border-radius:var(--cp-r-inner)}
body.cp .cp-nav .cp-next{min-height:56px!important;min-width:260px;padding:0 var(--cp-s5)!important;font-size:16px!important;font-weight:650!important;border-radius:var(--cp-r-inner)!important;justify-content:space-between;gap:var(--cp-s4)}
body.cp .cp-nav .cp-next::after{content:"";width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
body.cp .cp-nav .cp-back{min-height:56px;padding:0 var(--cp-s5)}
/* section sub-heading inside a step, and a group of supporting tools */
body.cp .cp-sub-h{display:block;font-size:15px;font-weight:650;color:var(--cp-blue);margin:0 0 var(--cp-s1)}
body.cp .cp-tools{display:flex;flex-wrap:wrap;gap:var(--cp-s2);align-items:center;margin:var(--cp-s3) 0 0!important}
body.cp .cp-tools-label{font-size:var(--cp-fs-label);font-weight:600;color:var(--cp-muted);margin-right:var(--cp-s1)}
/* notices: soft colour plus an icon and the words (never colour alone) */
body.cp .cp-notice{display:flex;gap:var(--cp-s2);align-items:flex-start;padding:var(--cp-s3) var(--cp-s4)!important;margin:var(--cp-s3) 0!important;border-radius:var(--cp-r-inner);border:1px solid var(--cp-border);background:var(--cp-info-bg);color:var(--cp-info)!important;font-size:14px!important;line-height:1.45}
body.cp .cp-notice::before{content:"";width:18px;height:18px;flex:0 0 auto;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat}
body.cp .cp-notice.ok{background:var(--cp-ok-bg);border-color:#CBE7D7;color:var(--cp-ok)!important}
body.cp .cp-notice.ok::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
body.cp .cp-notice.warn{background:var(--cp-warn-bg);border-color:var(--cp-warn-line);color:var(--cp-warn)!important}
body.cp .cp-notice.bad{background:var(--cp-bad-bg);border-color:var(--cp-bad-line);color:var(--cp-bad)!important}
body.cp .cp-notice:is(.warn,.bad)::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
body.cp .cp-notice .bk-err{color:inherit!important;font-size:inherit!important}
body.cp .cp-notice:empty{display:none}
/* slim progress bar for long bulk actions ("Pricing 12 of 48…") */
body.cp .cp-progress{position:relative;padding:var(--cp-s3) var(--cp-s4) calc(var(--cp-s3) + 8px)!important;margin:var(--cp-s3) 0!important;border:1px solid var(--cp-border);border-radius:var(--cp-r-inner);background:var(--cp-soft-2);color:var(--cp-blue)!important;font-size:14px!important;font-weight:600}
body.cp .cp-progress::after{content:"";position:absolute;left:var(--cp-s4);bottom:var(--cp-s3);height:4px;width:calc((100% - 2 * var(--cp-s4)) * var(--cp-pct-n,0));max-width:calc(100% - 2 * var(--cp-s4));border-radius:2px;background:var(--cp-blue);transition:width .3s}
body.cp .cp-progress::before{content:"";position:absolute;left:var(--cp-s4);right:var(--cp-s4);bottom:var(--cp-s3);height:4px;border-radius:2px;background:#D6E2E8}
/* summary strip also takes <b>number</b><span>label</span> pairs (label shown first) */
body.cp .cp-summary>div{display:flex;flex-direction:column}
body.cp .cp-summary>div>span{order:-1;font-size:var(--cp-fs-label);font-weight:600;color:var(--cp-muted);margin-bottom:2px}
body.cp .cp-summary>div>b{font-size:20px!important;font-weight:650;color:var(--cp-blue)}
body.cp .cp-summary>.bad>b{color:var(--cp-bad)!important}
body.cp .cp-summary>.good>b{color:var(--cp-ok)!important}
body.cp .cp-summary>span{font-size:14px;color:var(--cp-text)}
body.cp .cp-summary>span b{font-size:15px}
body.cp .cp-summary>span.good{color:var(--cp-ok);font-weight:650}
/* the old tile boxes become plain items in the one strip (no card inside a card) */
body.cp .bk-tiles.cp-summary{display:flex!important;grid-template-columns:none!important}
body.cp .bk-tiles.cp-summary>div{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}
/* small icon-only remove button (dense grids) */
body.cp .btn.cp-icon-btn{min-height:32px!important;width:34px;padding:0!important;background:transparent!important;border-color:transparent!important}
body.cp .btn.cp-icon-btn:hover{background:var(--cp-bad-bg)!important;border-color:var(--cp-bad-line)!important}

/* bulk wizard layout: one guided process (stepper, title, explanation, task, tools, footer) */
body.cp .bk-v2{gap:var(--cp-s4)!important}
body.cp .bk-v2 .bk-toprow{margin:0!important;justify-content:flex-end}
body.cp .bk-v2 .bk-toprow-right .btn{min-height:40px}
body.cp .bk-v2 .bk-steps{padding:var(--cp-s2) 0;row-gap:var(--cp-s3)!important}
body.cp .bk-v2 .wj-step:disabled{cursor:default;opacity:1}
body.cp .bk-card>.wj-card-head{margin-bottom:var(--cp-s4)}
body.cp .bk-card>.wj-card-head p{font-size:15px!important;color:var(--cp-text)!important;max-width:820px}
body.cp .bk-v2 .bk-note{font-size:14px!important;color:var(--cp-text)}
body.cp .bk-v2 .bk-err{color:var(--cp-bad)!important;font-size:13.5px}
body.cp .bk-v2 .bk-ok{color:var(--cp-ok)!important;font-weight:600}
body.cp .bk-v2 .good{color:var(--cp-ok)}
body.cp .bk-v2 .cp-upload,body.cp .bk-v2 .cp-paste,body.cp .bk-v2 .table-wrap,body.cp .bk-v2 .bk-type,body.cp .bk-v2 .bk-defaults,body.cp .bk-v2 .bk-hs,body.cp .bk-v2 .bk-dt,body.cp .bk-v2 .bk-svc,body.cp .bk-v2 .bk-saved{margin:0 0 var(--cp-s4)!important}
body.cp .bk-v2 .cp-upload>span:last-child{display:grid;gap:2px}
body.cp .bk-v2 .cp-upload small{display:block;margin:0!important}
body.cp .bk-v2 .cp-paste{display:block!important}
body.cp .bk-v2 .cp-paste label{display:block;font-size:inherit}
body.cp .bk-v2 .cp-paste label small{display:block;font-size:13.5px!important}
body.cp .bk-v2 .cp-paste-actions{flex-direction:row!important}
body.cp .bk-v2 .bk-def-actions:not(.cp-tools){gap:var(--cp-s2)}
/* receivers: list table, new list, receiver type */
body.cp .bk-v2 .bk-lists th.bk-sel,body.cp .bk-v2 .bk-lists td:first-child{width:72px;text-align:center}
body.cp .bk-v2 .bk-lists input[type=radio]{width:18px;height:18px;accent-color:var(--cp-blue);cursor:pointer}
body.cp .bk-v2 .bk-lists tr.chosen td:nth-child(2){font-weight:600;color:var(--cp-blue)}
body.cp .bk-v2 .bk-lists td.num,body.cp .bk-v2 .bk-lists th.num{text-align:right;width:110px}
body.cp .bk-v2 .bk-lists .act{text-align:right;width:1%;white-space:nowrap}
body.cp .bk-v2 .bk-newlist{display:flex!important;flex-wrap:wrap;align-items:center;gap:var(--cp-s3)!important;font-weight:600;color:var(--cp-blue)}
body.cp .bk-v2 .bk-newlist input{width:280px!important;max-width:100%}
body.cp .bk-v2 .bk-type{padding:var(--cp-s4);border:1px solid var(--cp-border);border-radius:var(--cp-r-inner);background:#fff}
body.cp .bk-v2 .bk-private{display:block!important;background:transparent!important;padding:0!important;margin:0!important;font-size:14px!important;color:var(--cp-text)}
body.cp .bk-v2 .bk-private input{width:17px;height:17px;margin:0 var(--cp-s2) 0 0;vertical-align:-3px;accent-color:var(--cp-blue)}
body.cp .bk-v2 .bk-private small{display:block;margin:var(--cp-s1) 0 0 25px;font-size:13.5px!important;color:var(--cp-muted)}
body.cp .bk-v2 .bk-match .bk-private{margin:var(--cp-s3) 0!important}
/* column match, check details, fix-on-screen forms */
body.cp .bk-v2 .bk-match{gap:var(--cp-s3)!important;margin-top:var(--cp-s4)!important}
body.cp .bk-v2 .bk-match-head b{font-size:17px!important}
body.cp .bk-v2 .dm-req{font-size:12px!important;font-weight:600!important;letter-spacing:.02em;color:var(--cp-bad)!important}
body.cp .bk-v2 .dm-ex{font-size:13px!important;color:var(--cp-muted)}
body.cp .bk-v2 .dm-table select{min-height:38px;border:1px solid var(--cp-divider);border-radius:var(--cp-r-input);font-size:14px;padding:0 var(--cp-s2)}
body.cp .bk-v2 details>summary{cursor:pointer;font-weight:600;color:var(--cp-blue)}
body.cp .bk-v2 .bk-cols>summary{font-size:14px;padding:var(--cp-s1) 0}
body.cp .bk-v2 .bk-check{padding:var(--cp-s4)!important;border:1px solid var(--cp-border);border-radius:var(--cp-r-inner);background:#fff!important;font-size:14px!important}
body.cp .bk-v2 .bk-check small{font-size:13.5px;line-height:1.5}
body.cp .bk-v2 .bk-fix label small{font-size:var(--cp-fs-label)!important;font-weight:600;color:var(--cp-text)}
body.cp .bk-v2 .bk-fix input{min-height:36px;border:1px solid var(--cp-divider);border-radius:var(--cp-r-input);padding:0 var(--cp-s2);font-size:14px}
body.cp .bk-v2 .bk-recvcol{font-size:14px!important;background:var(--cp-soft-2)!important;border:1px solid var(--cp-border);border-radius:var(--cp-r-inner)!important;color:var(--cp-text)!important}
body.cp .bk-v2 .bk-recvcol.cp-notice{justify-content:flex-start!important;align-items:center;flex-wrap:wrap}
body.cp .bk-v2 .bk-recvcol.cp-notice.warn{background:var(--cp-warn-bg)!important;border-color:var(--cp-warn-line)!important;color:var(--cp-warn)!important}
body.cp .bk-v2 .bk-recvcol label{margin-left:auto;display:inline-flex;align-items:center;gap:var(--cp-s2);font-weight:600}
body.cp .bk-v2 .bk-recvcol select{min-height:34px;border:1px solid var(--cp-divider);border-radius:var(--cp-r-input);background:#fff;font-size:14px;padding:0 var(--cp-s2)}
/* grids: errors and flagged values soft red with a red edge; dense inputs stay readable */
body.cp .bk-v2 .data-table tr.bad td,body.cp .bk-v2 .data-table tr.bk-value-flag td{background:#FFF8F8!important}
body.cp .bk-v2 .data-table tr.bad td:first-child,body.cp .bk-v2 .data-table tr.bk-value-flag td:first-child{box-shadow:inset 3px 0 0 var(--cp-bad)!important}
body.cp .bk-v2 .data-table td{overflow-wrap:anywhere;white-space:normal}
body.cp .bk-v2 .data-table td.num,body.cp .bk-v2 .data-table th.num,body.cp .bk-v2 .data-table .bk-tick,body.cp .bk-v2 .data-table .act{white-space:nowrap;overflow-wrap:normal}
body.cp .bk-v2 .bk-boxes td{padding:8px var(--cp-s2)!important}
body.cp .bk-v2 .bk-boxes input,body.cp .bk-v2 .bk-boxes select{padding:0 var(--cp-s2)!important}
body.cp .bk-v2 input[data-bk-gd$=".description"]{min-width:280px}
body.cp .bk-v2 input[data-bk-gd$=".hs_code"]{min-width:130px}
body.cp .bk-v2 .bk-hs-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--cp-r-pill);background:var(--cp-info-bg);color:var(--cp-info);font-size:12px;font-weight:600}
body.cp .bk-v2 .bk-hs-head b{font-size:16px!important;color:var(--cp-blue)}
body.cp .bk-v2 .bk-hs-head small,body.cp .bk-v2 .bk-dt small,body.cp .bk-v2 .bk-def-head small,body.cp .bk-v2 .bk-values-head small,body.cp .bk-v2 .bk-boxes-head small,body.cp .bk-v2 .bk-svc-top small{font-size:13.5px!important;color:var(--cp-muted)!important}
body.cp .bk-v2 .bk-def-sum{font-size:14px;color:var(--cp-text)}
/* prices: service choice and the per-shipment detail */
body.cp .bk-v2 .bk-svc-table tr.bk-svc-pick td{padding-top:14px!important;padding-bottom:14px!important}
body.cp .bk-v2 .bk-svc-table input[type=radio]{width:18px;height:18px;accent-color:var(--cp-blue)}
body.cp .bk-v2 .bk-speed-b small{font-size:12.5px!important;font-weight:500}
body.cp .bk-v2 .bk-speed-b small{display:block;color:var(--cp-muted)!important;opacity:1!important}
body.cp .bk-v2 .bk-speed-b.on small{color:rgba(255,255,255,.9)!important}
body.cp .bk-v2 .bk-speed-b{min-height:52px!important;text-align:left}
body.cp .bk-v2 .bk-timed{font-size:14px;background:var(--cp-soft-2)!important;border-color:var(--cp-border)!important}
body.cp .bk-v2 .bk-timed small{font-size:13px}
body.cp .bk-v2 .bk-row-svc{min-height:38px;border:1px solid var(--cp-divider)!important;border-radius:var(--cp-r-input)!important;font-size:14px}
body.cp .bk-v2 .bk-break{font-size:13.5px!important}
body.cp .bk-v2 .bk-break summary{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--cp-s2);border-radius:7px;color:var(--cp-blue);text-decoration:underline;text-underline-offset:3px}
body.cp .bk-v2 .bk-break summary:hover{background:var(--cp-soft-2)}
body.cp .bk-v2 .bk-break table{background:var(--cp-soft-2)!important;border-radius:var(--cp-r-input)}
body.cp .bk-v2 .bk-break td{font-size:13.5px}
body.cp .bk-v2 .bk-break small{font-size:12.5px!important}
body.cp .bk-v2 .bk-caution{color:var(--cp-warn)!important}
/* labels pop-up */
body.cp .bk-lbl .bk-lbl-chip{min-height:34px!important;font-size:13.5px!important}
body.cp .bk-lbl .bk-lbl-sec>b{font-size:15px;font-weight:650}
body.cp .bk-lbl small{font-size:13.5px!important}

/* ---------- 14d. Remaining customer pages (Stage 4, v13.95) ---------- */
/* the light page banners (account application, Book now, tracking, claim form) keep a blue heading */
body.cp .bn-hero h1{color:var(--cp-blue)!important;font-size:var(--cp-fs-title)!important;font-weight:700!important}
body.cp .bn-hero p{font-size:15px;color:var(--cp-text)}
body.cp .bn-eyebrow{font-size:12.5px!important;font-weight:700!important;letter-spacing:.04em;color:var(--cp-muted)!important}
body.cp .bn-small,body.cp .bn-page .bn-card p.bn-small{font-size:13.5px!important;color:var(--cp-muted)}
body.cp .bn-tick{display:inline-flex!important;align-items:center;justify-content:center;color:#fff!important}
body.cp .cp-route-arrow{display:inline-flex;vertical-align:-3px;color:var(--cp-muted)}
/* tracking steps: labels and times readable */
body.cp .bn-page .trk-steps b,body.cp .bn-page [class*=trk-step] b{font-size:13px!important}
body.cp .bn-page .trk-steps small,body.cp .bn-page [class*=trk-step] small{font-size:12.5px!important;color:var(--cp-muted)}
/* claim form upload panel */
body.cp .claim-upload{margin-top:var(--cp-s1)}
body.cp .claim-upload>span{display:grid;gap:2px}
body.cp .claim-upload .claim-files{font-weight:600;color:var(--cp-blue)!important}
/* website quote: package and goods grid headings 12px (were 9-11px), remove buttons as icons */
body.cp .public-package-head span,body.cp .public-customs-head span{font-size:12px!important;font-weight:600!important;color:#3F5A69!important;letter-spacing:.03em}
body.cp .public-package-row .cp-icon-btn,body.cp .public-customs-row .cp-icon-btn{width:36px;min-height:36px!important;color:var(--cp-bad)!important}
body.cp .wj-add-pkg-btn{display:inline-flex!important;align-items:center;justify-content:center}
/* website quote step 2 footer = the shared wizard footer (Back left, Get prices right, 56px) */
body.cp .public-quote-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--cp-s3);flex-wrap:wrap;margin-top:var(--cp-s5)!important;padding-top:var(--cp-s4);border-top:1px solid var(--cp-border)}
body.cp .public-quote-actions .wj-back{min-height:56px;padding:0 var(--cp-s5);font-size:15px;border-radius:var(--cp-r-inner)}
body.cp .public-quote-actions #publicCalculate{min-height:56px!important;min-width:260px;padding:0 var(--cp-s5)!important;font-size:16px!important;font-weight:650!important;border-radius:var(--cp-r-inner)!important;justify-content:space-between;gap:var(--cp-s4);margin-left:auto}
body.cp .public-quote-actions #publicCalculate::after{content:"";width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* quote results: surcharge reasons readable */
body.cp .wj-sur small,body.cp details[class*=wj-sur] small,body.cp .wj-sur-title~ul small{font-size:12.5px!important;color:var(--cp-muted)}
body.cp .wj-sur-title{font-size:12.5px!important;font-weight:600!important}
/* booking form small print */
body.cp .wbk-pill{font-size:12.5px!important}
body.cp .hs-assist-button{font-size:13px!important;font-weight:600!important}
body.cp .public-quote-shell details>summary small{font-size:12.5px!important}
body.cp .inv-hint{font-size:13px!important}
body.cp .dc-badge{font-size:12px!important;font-weight:600!important}
body.cp .dc-note{font-size:13px!important}

/* form errors on the customer pages read as the shared red notice (words + colour) */
body.cp .bn-error:not(:empty),body.cp .wj-field-error:not(:empty){display:block;padding:var(--cp-s3) var(--cp-s4);margin:var(--cp-s3) 0;border:1px solid var(--cp-bad-line);border-radius:var(--cp-r-inner);background:var(--cp-bad-bg);color:var(--cp-bad)!important;font-size:14px;font-weight:600}

/* portal pop-ups (e.g. Find an HS code): eyebrow, badges and explanations readable */
body.cp .modal .eyebrow{font-size:12.5px!important;font-weight:700!important;color:var(--cp-muted)!important}
body.cp .modal .badge{font-size:12px!important;font-weight:600!important}
body.cp .hs-suggestion p{font-size:13.5px!important;line-height:1.45}
body.cp .hs-suggestion strong{font-size:14px!important}
/* website duty & tax figures and the landed cost box (information = blue, not success green) */
body.cp .public-dt-values span{font-size:12.5px!important;font-weight:600;color:var(--cp-muted)}
body.cp .public-dt-values b{display:block;font-size:17px;color:var(--cp-blue)}
body.cp .landed-box{background:var(--cp-info-bg)!important;border-color:#C6DCE9!important;border-radius:var(--cp-r-inner)!important;color:var(--cp-text)}
body.cp .landed-box small{font-size:13px!important}

/* link-buttons look like buttons (no underline); text-style buttons keep theirs */
body.cp a.btn:not(.tertiary):not(.cp-tertiary){text-decoration:none!important}

/* ---------- 15. Accessibility ---------- */
body.cp a:focus-visible,body.cp button:focus-visible,body.cp [tabindex]:focus-visible{outline:none;box-shadow:var(--cp-focus);border-radius:var(--cp-r-input)}
/* v13.99: keyboard focus always visible (tab-style buttons had their shadow removed): a 2px blue outline on every portal button, link and summary */
body.cp :is(a,button,summary,label.cp-upload,[tabindex]):focus-visible{outline:2px solid var(--cp-blue)!important;outline-offset:2px!important}
body.cp :is(.wj-hero,.bn-top,.public-quote-top) :focus-visible{outline-color:#fff!important}

/* ---------- 16. Responsive ---------- */
@media (max-width:760px){
  body.cp .wj-card,body.cp .cp-card{padding:var(--cp-s4)}
  body.cp .wj-hero h1{font-size:26px!important}
  body.cp .wj-card-head h2,body.cp .bn-head h1,body.cp .ca-head h2{font-size:22px!important}
  body.cp .wj-steps{flex-wrap:nowrap!important;justify-content:flex-start!important}
  body.cp .cp-paste-actions,body.cp .wbk-bar-act{flex-wrap:wrap}
  body.cp .cp-upload{flex-direction:column;text-align:center}
  body.cp .cp-tabs--fill{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.cp .cp-tab{white-space:normal!important;text-overflow:clip;line-height:1.2;min-height:40px!important;text-align:center}
  body.cp .cp-filters{grid-template-columns:1fr 1fr}
  body.cp .cp-filters .cp-f-q{grid-column:1/-1}
  body.cp .cp-summary{gap:var(--cp-s4)}
  body.cp .public-quote-actions>*{flex:1 1 100%}
  body.cp .wbk-goods-scroll{overflow-x:auto;padding-bottom:var(--cp-s2)}
  body.cp .wbk .wbk-head{flex-wrap:wrap;gap:var(--cp-s2)}
  body.cp .wbk-goods-meta{flex-wrap:wrap;width:100%}
  body.cp .wbk-goods-meta .field{flex:1 1 140px}
  body.cp .wbk-goods-meta select{min-width:96px;width:100%}
  body.cp .wbk .wbk-goods-scroll .public-customs-head,body.cp .wbk .wbk-goods-scroll .public-customs-row{grid-template-columns:190px 150px 64px 100px 90px 72px 40px!important;min-width:740px}
  body.cp .public-quote-actions #publicCalculate{min-width:0;margin-left:0}
  body.cp .cp-nav .bk-nav-right{width:100%;margin-left:0}
  body.cp .cp-nav .btn{flex:1 1 auto}
  body.cp .cp-nav .cp-next{min-width:0;width:100%}
  body.cp .bk-v2 .bk-steps{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;padding-bottom:var(--cp-s2)}
  body.cp .bk-v2 .bk-steps .wj-step{flex-direction:row!important;white-space:nowrap!important;font-size:14px!important}
  body.cp .bk-v2 .bk-svc-table .bk-logo-col{width:72px}
}
@media (min-width:761px) and (max-width:1000px){
  body.cp .cp-tabs--fill{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* v18.69 (user: "quote and book entry screens are spaced too much vertically so user has to scroll - condense so no
   scrolling"): the single quote steps fit one screen. Customer pages only (body.cp); every field is unchanged. */
body.cp .wj .public-quote-main,body.cp .public-quote-main{padding-top:12px;gap:8px}
body.cp .wj-modes{margin:0}
body.cp .ca-primary.wj-modes .ca-big.wj-mode-head{padding:8px 18px!important;min-height:0}
body.cp .wj-modes .wj-mode-head b,body.cp .wj-modes .wj-mode-head strong{font-size:16px}
body.cp .wj-modes .wj-mode-head small,body.cp .wj-modes .wj-mode-head span{font-size:12px}
body.cp .wj-steps{margin:0;padding:0}
body.cp .wj-recap{padding:6px 14px;margin:0}
body.cp .wj-card{margin-top:0;padding:14px 20px}
body.cp .wj-card.public-parcel-panel,body.cp .wj-card.public-price-panel,body.cp .wj-card.public-booking{margin-top:0!important;padding:0}
body.cp .wj-card h2{margin-bottom:2px}
body.cp .public-parcel-panel .panel-head{padding:4px 18px 8px}
body.cp .public-parcel-panel .panel-body{padding:8px 18px 10px}
body.cp .wj-loc{padding-top:10px;padding-bottom:10px}
body.cp .public-insurance-box{margin-top:6px;padding:8px 12px;gap:10px}
body.cp .public-incoterm-row{margin-top:6px;padding:6px 12px;align-items:center}
body.cp .public-incoterm-row .field{display:flex;align-items:center;gap:10px}
body.cp .public-incoterm-row .field label{margin:0;white-space:nowrap}
body.cp .public-incoterm-row small{padding-bottom:0}
body.cp .public-quote-actions{margin-top:10px!important;padding-top:10px}
body.cp .public-quote-actions .btn,body.cp .wj-continue{min-height:44px;height:auto;padding-top:9px;padding-bottom:9px}
body.cp .ca-primary.wj-modes .ca-big.wj-mode-head{flex-direction:row;align-items:baseline;gap:12px}
body.cp .public-incoterm-row .field{width:auto!important;flex:0 0 auto}
body.cp .public-incoterm-row #publicIncoterm{min-width:260px}
body.cp .wj-add-pkg{margin-top:-6px}
body.cp .public-insurance-box label,body.cp .public-insurance-box .field>label{margin-bottom:2px}
@media (min-width:1000px){
  body.cp .public-parcel-panel .panel-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:10px;align-items:stretch}
  body.cp .public-parcel-panel .panel-body>*{grid-column:1/-1}
  body.cp .public-parcel-panel .panel-body>.public-insurance-box{grid-column:1;grid-template-columns:1.3fr 96px 1.2fr;align-items:center}
  body.cp .public-parcel-panel .panel-body>.public-incoterm-row{grid-column:1/-1;margin-top:6px;max-width:520px}
  body.cp .public-parcel-panel .panel-body>.public-incoterm-row small{display:none}
  body.cp .public-parcel-panel .public-insurance-box>span{font-size:12px;line-height:1.3}
  body.cp .public-incoterm-row #publicIncoterm{min-width:0;width:100%}
  body.cp .public-incoterm-row .field{flex:1 1 auto;width:auto!important}
  body.cp .public-parcel-panel .panel-body>.public-insurance-box,body.cp .public-parcel-panel .panel-body>.public-incoterm-row{align-self:stretch;margin-top:6px;margin-bottom:0;height:auto;box-sizing:border-box}
  body.cp .public-parcel-panel .panel-body>.public-incoterm-row{display:flex;align-items:center}
}
body.cp .ca-primary.wj-modes .ca-big.wj-mode-head{padding:5px 18px!important}
body.cp .wj .public-quote-main,body.cp .public-quote-main{padding-top:8px;padding-bottom:8px}
body.cp .public-parcel-panel .panel-body{padding-bottom:6px}
body.cp .public-quote-actions{margin-top:8px!important;padding-top:8px}
/* v18.70 (user: banner too close to the header, steps need room) */
body.cp .wj .public-quote-main,body.cp .public-quote-main{padding-top:22px;gap:14px}
body.cp .wj-steps{margin:2px 0 4px;padding:4px 0}
/* v18.71 (user: postcode note cramped) */
body.cp .public-postcode-warning{margin:4px 0 14px;padding:12px 16px;line-height:1.5}

/* v18.76 step 4 Book & labels: chosen service summary, booked confirmation, folded booking sections */
body.cp .wj-book-sum{display:flex;align-items:center;gap:14px;background:var(--soft,#EDF4F7);border:1px solid #D7E1E6;border-radius:12px;padding:10px 16px;margin:10px 0 0}
body.cp .wj-book-sum>div{flex:1;min-width:0;display:flex;flex-direction:column}
body.cp .wj-book-sum b{color:#003C55;font-size:15px}
body.cp .wj-book-sum small{color:#667985;font-size:13px}
body.cp .wj-book-price{font-size:20px;font-weight:700;color:#003C55;white-space:nowrap}
body.cp .wj-booked{margin-top:14px;padding:22px 24px}
body.cp .wj-booked-head{display:flex;gap:16px;align-items:center}
body.cp .wj-booked-head .success-tick{margin:0;flex:none}
body.cp .wj-booked-head h2{margin:0 0 4px;color:#003C55}
body.cp .wj-booked-head p{margin:0}
body.cp .wj-booked-note{font-weight:600;margin:14px 0 0}
body.cp .wj-booked-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
body.cp .wj-muted{color:#667985;font-size:13px;margin:4px 0 0}
body.cp .wbk-foldable>.wbk-head{cursor:pointer;user-select:none}
body.cp .wbk-chev{display:inline-block;width:8px;height:8px;border-right:2px solid #526575;border-bottom:2px solid #526575;transform:rotate(45deg);margin:0 10px 3px 2px;transition:transform .15s}
body.cp .wbk-foldable.wbk-folded .wbk-chev{transform:rotate(-45deg);margin-bottom:0}
body.cp .wbk-foldable.wbk-folded>.wbk-body{display:none}
@media (max-width:600px){body.cp .wj-book-sum{flex-wrap:wrap}}
/* v18.85: folded cards (5 Documents, 6 Duty and tax): arrow and title on the left, button on the right, no gap under a folded heading */
body.cp .wbk-foldable>.wbk-head{justify-content:flex-start;gap:0}
body.cp .wbk-foldable>.wbk-head h3{flex:1 1 auto;text-align:left}
body.cp .wbk-foldable>.wbk-head .btn{margin-left:12px}
body.cp .wbk-foldable.wbk-folded>.wbk-head{margin-bottom:0}
/* v18.95 folded card teaser (5 Documents): shown only while folded */
body.cp .wbk-teaser{display:none}
body.cp .wbk-foldable.wbk-folded>.wbk-teaser{display:block;margin-top:8px}
body.cp .wbk-teaser p{margin:0 0 10px}
/* v18.97 Duty and tax folded: one button (the teaser's), header Estimate hidden so 5 and 6 line up */
body.cp .wbk-foldable.wbk-folded #publicEstimateDt{display:none}
body.cp .wbk-goods-tools .wbk-saved-goods{width:auto;min-width:200px;max-width:320px;min-height:36px;height:36px;padding:0 10px;font-size:13px}
body.cp .dc-made .dc-upload{background:transparent;border-color:transparent;box-shadow:none;color:var(--cp-blue,#003C55);text-decoration:underline;font-weight:500;width:auto}
/* v19.02: origin statement choice in 5 Documents */
body.cp .wbk-origin{display:grid;gap:6px;margin:0 0 12px}
body.cp .wbk-origin-l{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
body.cp .wbk-origin textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid #D7E1E6;border-radius:7px}
/* v19.06: document check as one line inside 5 Documents; highlighted when Confirm booking finds something missing */
body.cp .wbk-dc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 2px;padding:9px 12px;border-radius:8px;font-size:13px;background:var(--cp-ok-bg,#ecf7f0);color:var(--cp-text,#334B59)}
body.cp .wbk-dc .wbk-dc-txt{flex:1 1 220px}
body.cp .wbk-dc.is-warn{background:#fff6dc;border:1px solid #EDCC47}
body.cp .wbk-dc .btn{min-height:32px}
body.cp .wbk-dc-ask{flex-basis:100%;font-size:13px;color:#7a5a00}
body.cp .wbk-card.wbk-flash{animation:wbkFlash 1.6s ease 2;outline:2px solid #EDCC47;outline-offset:2px}
@keyframes wbkFlash{0%,100%{box-shadow:0 0 0 0 rgba(237,204,71,0)}50%{box-shadow:0 0 0 8px rgba(237,204,71,.45)}}
/* v19.07: empty required booking boxes */
body.cp .pb-missing{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.15)!important;background:#fff7f6!important}
/* v19.08 collection date, ready and close on one row */
body.cp .wbk-cityline.wbk-times{grid-template-columns:1.3fr 1fr 1fr}
/* v24.46 (user: "saved goods box not in style"): Saved goods drop-down styled like the other fields (white, thin border, rounded, navy chevron) */
body.cp .wbk-goods-tools .wbk-saved-goods,.wbk-goods-tools .wbk-saved-goods{appearance:none;-webkit-appearance:none;width:auto;min-width:180px;max-width:280px;min-height:34px!important;height:34px!important;padding:0 34px 0 12px!important;border:1px solid var(--cp-divider,#cfdbe0)!important;border-radius:var(--cp-r-input,8px)!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003C55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center!important;color:var(--cp-text,#173844)!important;font-size:13.5px!important;font-family:inherit;box-shadow:none!important;outline:none;cursor:pointer}
body.cp .wbk-goods-tools .wbk-saved-goods:focus,.wbk-goods-tools .wbk-saved-goods:focus{border-color:var(--cp-blue,#003C55)!important;box-shadow:var(--cp-focus,0 0 0 3px rgba(0,60,85,.15))!important}

/* v24.55 (user, website quote: "maybe entry fields need some shading or colour to define them"): every entry box on the
   website quote / booking (.wj) has a pale blue fill and a firmer border, white with a navy ring while being typed in. */
body.cp .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]),
body.cp .wj select,body.cp .wj textarea,body.cp .wj .fdd-trigger,
body .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]),
body .wj select,body .wj textarea,body .wj .fdd-trigger{background-color:#EDF4F7!important;border-color:#B4C8D3!important}
body.cp .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):hover,body.cp .wj select:hover,body.cp .wj textarea:hover,
body .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):hover,body .wj select:hover,body .wj textarea:hover{border-color:#8FAEBE!important}
body.cp .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):focus,body.cp .wj select:focus,body.cp .wj textarea:focus,body.cp .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):focus:hover,
body .wj input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=color]):focus,body .wj select:focus,body .wj textarea:focus{background-color:#fff!important;border-color:#003C55!important;box-shadow:0 0 0 3px rgba(0,60,85,.15)!important}
body .wj input::placeholder,body .wj textarea::placeholder{color:#7d909b}