/* Colours and layout follow jet/quote-tool-fkdiu3jejh. */
:root {
  --ink: #01043d; /* EcommOps navy */
  --muted: #5b6475;
  --line: #e2e5ec;
  --paper: #ffffff;
  --bg: #f3f4f8;
  --accent: #0074c7; /* EcommOps blue */
  --accent-soft: #e6f1fa;
  --field: #b9c0cc;
  --bad: #a23a3a;
  --ok: #1f7a45;
  --ok-soft: #e7f5ec;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }

.hero { background: linear-gradient(180deg, #ffffff, var(--accent-soft)); border-bottom: 4px solid var(--accent); padding: 28px 0 32px; }
.logo { display: block; width: min(260px, 70vw); height: auto; margin: 0 0 18px; }
.hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.lead { margin: 8px 0 0; max-width: 620px; color: var(--muted); }

main.wrap { margin-top: 24px; padding-bottom: 40px; }
section { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(20, 30, 50, .06); }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
.note, footer { color: var(--muted); font-size: .9rem; }
.error { color: var(--bad); }

/* Lite / Advanced switch */
.mode-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.mode-switch { display: inline-flex; border: 1px solid var(--accent); border-radius: 10px; overflow: hidden; background: white; }
.mode-btn { min-width: 120px; border: 0; border-radius: 0; background: white; color: var(--accent); font-weight: 600; }
.mode-btn[aria-pressed="true"] { background: var(--accent); color: white; }

/* Form */
form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
form label, .field { display: flex; flex: 1 1 180px; flex-direction: column; gap: 6px; font-weight: 600; }
.field { position: relative; }
input, select, button { font: inherit; border-radius: 8px; padding: 10px 12px; min-height: 44px; }
input, select { border: 1px solid var(--field); background: white; color: inherit; width: 100%; }
button { border: 1px solid var(--accent); background: var(--accent); color: white; font-weight: 600; cursor: pointer; }
button.secondary { background: white; color: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
.dropdown-trigger { border: 1px solid var(--field); background: white; color: inherit; width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 400; }
.dropdown-caret { color: var(--muted); font-size: .75em; }
.dropdown-panel { position: absolute; top: 100%; left: 0; margin-top: 4px; background: white; border: 1px solid var(--field); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 50, .15); max-height: 320px; overflow-y: auto; overflow-x: hidden; z-index: 20; padding: 6px; min-width: 100%; width: max-content; max-width: min(400px, 92vw); }
.dropdown-panel input[type="search"] { position: sticky; top: 0; margin-bottom: 6px; font-weight: 400; }
.dropdown-option { display: flex; flex-direction: row; flex: initial; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-weight: 400; font-size: .92rem; line-height: 1.3; cursor: pointer; }
.dropdown-option:hover { background: var(--bg); }
.dropdown-option input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: auto; padding: 0; margin: 0; accent-color: var(--accent); }
.country-groups { display: flex; flex-wrap: wrap; gap: 0 16px; }
.country-groups .tick { min-height: 36px; font-size: .92rem; }
.hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0; padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; flex: 1 1 220px; }
legend { font-weight: 600; padding: 0 4px; }
/* Product type sits in the first row like the other fields: Liquid and Battery share one frame shaped like an input box. */
fieldset.product { flex: 1.3 1 240px; border: 0; padding: 0; display: block; }
fieldset.product legend { margin-bottom: 6px; padding: 0; }
.product-box { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 8px; background: white; }
.product-box .tick { white-space: nowrap; }
.tick { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 500 !important; flex: 0 0 auto !important; min-height: 36px; cursor: pointer; }
.tick input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; accent-color: var(--accent); }
.answer { min-width: 2em; color: var(--muted); }
.tick input:checked ~ .answer { color: var(--accent); font-weight: 700; }
.dims { flex: 2 1 380px; flex-wrap: nowrap; }
.dims label { flex: 1 1 0; min-width: 0; font-weight: 400; }
/* Unit switches (g / lb, cm / in), styled like the unit switch in jet/quote-tool-fkdiu3jejh. */
.field-label { display: block; flex: none; }
.with-unit { display: flex; gap: 8px; }
.with-unit input { flex: 1 1 auto; min-width: 0; }
.with-unit .unit-switch { align-self: stretch; }
.unit-switch { display: inline-flex; flex: none; align-self: flex-end; min-height: 46px; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.unit-switch label { display: flex; flex: none; flex-direction: row; gap: 0; font-weight: 600; cursor: pointer; }
.unit-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.unit-switch span { display: inline-flex; align-items: center; padding: 0 12px; color: var(--accent); background: white; }
.unit-switch input:checked + span { background: var(--accent); color: white; }
.unit-switch input:focus-visible + span { outline: 3px solid #f0a500; outline-offset: -3px; }
/* Fields line up at the top; controls without a label line up with the input boxes. */
.ioss, .ioss:not([hidden]) + #search { margin-top: calc(1.5em + 6px); }
#search { min-width: 180px; }

/* Results */
.view-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 4px 0 12px; }
.view-controls label { font-weight: 600; }
.view-controls select { width: auto; min-width: 200px; max-width: 100%; min-height: 40px; padding: 6px 10px; }
.view-controls a, .actions a { color: var(--accent); }
.segmented { display: inline-flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; background: white; color: var(--accent); padding: 8px 14px; min-height: 40px; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: white; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.table-wrap:has(> table[hidden]) { display: none; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 12px; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { background: var(--bg); font-size: .82rem; color: var(--muted); white-space: nowrap; vertical-align: bottom; }
tbody th { font-weight: 600; background: var(--paper); position: sticky; left: 0; }
.num { text-align: center; }
/* Dotted divider between the column groups (prices, delivery times). */
.group-start { border-left: 2px dotted #9aa3b5; }
.sub { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
td .sub { display: block; }
button.price { background: none; border: 0; color: inherit; padding: 4px 6px; min-height: 0; font-weight: 600; text-decoration: underline dotted var(--field); text-underline-offset: 4px; }
button.price:hover { background: var(--accent-soft); }
td.lowest { background: var(--ok-soft); }
/* The 50% delivery days (typical delivery time) are always highlighted, as in jet/quote-tool-fkdiu3jejh. */
td.median { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
thead th.median { color: var(--accent); }
td.lowest button.price { color: var(--ok); font-weight: 700; }
/* EU customs amount and its breakdown window. */
.has-tip { cursor: help; font-weight: 600; text-decoration: underline dotted var(--field); text-underline-offset: 4px; border-radius: 4px; }
.has-tip:hover { background: var(--accent-soft); }
.tip { position: fixed; z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 8px; background: var(--ink); color: white; font-size: .85rem; line-height: 1.4; text-align: left; box-shadow: 0 8px 24px rgba(20, 30, 50, .25); pointer-events: none; }
.tip-title { margin: 0 0 6px; font-weight: 700; }
.tip-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.tip-calc { display: block; font-size: .78rem; color: #c9cee0; }
.tip-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .35); font-weight: 700; }
.tip-note { margin: 6px 0 0; }
table.definitions th, table.definitions td { vertical-align: top; white-space: normal; }
table.definitions tbody th { position: static; }
td.same { color: var(--muted); }
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 24px; width: min(520px, 94vw); max-height: 90vh; color: inherit; box-shadow: 0 8px 24px rgba(20, 30, 50, .15); }
dialog::backdrop { background: rgba(1, 4, 61, .45); }
/* Line description pop-up: the description page shown in a frame, with a Close button. */
dialog.description-dialog { width: min(900px, 94vw); height: min(720px, 90vh); padding: 0; overflow: hidden; }
dialog.description-dialog[open] { display: flex; flex-direction: column; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; }
#description-frame { flex: 1; width: 100%; border: 0; }
.print-only { display: none; }

@media (max-width: 720px) {
  section { padding: 18px 16px; }
  form > button, form label, .field { flex-basis: 100%; }
  .ioss, .ioss:not([hidden]) + #search { margin-top: 0; }
  /* The cm / in switch moves under the three size fields so they stay wide enough. */
  .dims { flex-wrap: wrap; }
  .dims label { flex: 1 1 60px; }
  .mode-switch { display: flex; width: 100%; }
  .mode-btn { flex: 1; min-width: 0; }
  th, td { padding: 10px 8px; }
}

/* Print or save as PDF: the quote only. */
@media print {
  :root, body { background: white; }
  .no-print, dialog, .tip { display: none !important; }
  .print-only { display: block; color: var(--muted); }
  .hero { padding: 0 0 10px; background: none; border-bottom-width: 2px; }
  .hero .lead { display: none; }
  .logo { width: 180px; margin-bottom: 8px; }
  main.wrap { margin-top: 12px; padding-bottom: 0; }
  section { border: 0; box-shadow: none; padding: 0; margin: 12px 0; }
  .table-wrap { overflow: visible; }
  th, td { padding: 6px; font-size: .85rem; }
  tbody th { position: static; }
  button.price { text-decoration: none; padding: 0; }
  td.lowest, td.median { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}