/* Blue Calculator child-theme — herstijl van de calculator-forms.
   Alles gescoopt onder .bluecalc zodat de rest van de OceanWP-site ongemoeid blijft. */
/* De merk-tokens (kleuren, lettertype, basisgrootte 18px) staan in assets/site.css, dat op élke
   pagina laadt. Hier worden ze enkel doorgegeven aan de namen die deze stylesheet gebruikt, zodat
   één wijziging daar overal doorwerkt. Maten staan in rem: alles schaalt mee met die basisgrootte. */
.bluecalc{
  --blue:var(--bc-deep); --blue-dark:var(--bc-deep-dark); --magenta:var(--bc-purple);
  --accent:var(--bc-blue); --turq:var(--bc-turq);
  --ink:var(--bc-ink); --muted:var(--bc-muted); --line:var(--bc-line); --card:#fff;
  --radius:var(--bc-radius); --focus:var(--bc-focus);
  --shadow:var(--bc-shadow);
  --font-heading:var(--bc-font);
  --font-body:var(--bc-font);
  --font-weight-heading:600;
  --letterspacing-heading:.01em;
  max-width:1140px;margin:0 auto;padding:1.75rem 1rem 3rem;color:var(--ink);
  font-family:var(--font-body);font-weight:500;
}
.bluecalc h1,.bluecalc h2,.bluecalc h3,
.bluecalc .bc-card > h3,
.bluecalc .bc-card .subtitle h3{font-family:var(--font-heading);font-weight:var(--font-weight-heading);letter-spacing:var(--letterspacing-heading)}
.bluecalc input,.bluecalc select,.bluecalc textarea,.bluecalc .button,.bluecalc .ts-control{font-family:var(--font-body)}
.bluecalc .bc-page-head{margin:0 0 1.125rem}
.bluecalc .bc-page-head h1{font-size:1.625rem;line-height:1.15;margin:0 0 2px}
.bluecalc .bc-page-head .bc-sub{color:var(--muted);margin:0;font-size:0.9375rem}

/* ── Cards / sections ── */
.bluecalc .bc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.375rem;margin:0 0 1.125rem}
.bluecalc .bc-card > h3,
.bluecalc .bc-card .subtitle h3{font-size:0.8125rem!important;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin:0 0 0.25rem!important;font-weight:700}
.bluecalc .bc-card .subtitle{display:block;margin-bottom:0.5rem}
.bluecalc .bc-card .subtitle .info small,
.bluecalc .bc-card small i{color:var(--muted);font-style:normal}
/* De grenzen per offerte (8 ton / 40 m³) staan op een eigen regel: ze gelden voor de hele offerte,
   niet voor één collo, en moeten opvallen vóór iemand ertegenaan loopt. */
.bluecalc .bc-card .subtitle .bc-caps{display:block;margin-top:2px}
.bluecalc .bc-card .subtitle .bc-caps small i{color:var(--ink);font-weight:600}
.bluecalc .bc-card strong{font-size:0.8438rem;font-weight:600;display:inline-block;margin-bottom:2px}
.bluecalc .bc-card small{font-size:0.75rem}

/* ── Tabel-layout binnen de cards (geen tabelranden, nette spacing) ── */
.bluecalc form table{width:100%;border-collapse:collapse;line-height:1.4}
.bluecalc form td{vertical-align:top;padding:0.5rem 0.625rem 0.5rem 0}

/* ── Velden ── */
.bluecalc input[type=text],
.bluecalc input[type=number],
.bluecalc input[type=email],
.bluecalc select,
.bluecalc .select2-container--default .select2-selection--single{
  width:100%!important;box-sizing:border-box;border:1px solid var(--line)!important;border-radius:0.625rem!important;
  padding:0.6875rem 0.75rem!important;font-size:0.9375rem;background:#fff;color:var(--ink);min-height:2.75rem!important;height:auto!important;
  transition:border-color .12s, box-shadow .12s;margin:2px 0 0}
.bluecalc input:focus,.bluecalc select:focus{outline:none;border-color:var(--blue)!important;box-shadow:var(--focus)!important}
.bluecalc input[readonly]{background:#f7f9fc;color:var(--muted)}
.bluecalc select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.375rem!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.875rem center;background-size:0.75rem}

/* select2 (origin / ports) → zelfde look als de velden */
.bluecalc .select2-container{width:100%!important;margin-top:2px}
.bluecalc .select2-container--default .select2-selection--single{display:flex;align-items:center}
.bluecalc .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.3;color:var(--ink)}
.bluecalc .select2-container--default .select2-selection--single .select2-selection__arrow{height:2.625rem;right:0.5rem}
.bluecalc .select2-container--default.select2-container--focus .select2-selection--single,
.bluecalc .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--blue)!important;box-shadow:var(--focus)!important}

/* ── Tom Select (origin / ports) → zelfde look als de velden ── */
.bluecalc .ts-wrapper{margin-top:2px}
.bluecalc .ts-control{border:1px solid var(--line)!important;border-radius:0.625rem!important;min-height:2.75rem;padding:0.5rem 2.375rem 0.5rem 0.75rem!important;font-size:0.9375rem;background:#fff;box-shadow:none!important;color:var(--ink)}
.bluecalc .ts-wrapper.single .ts-control{cursor:pointer}
.bluecalc .ts-wrapper.focus .ts-control,
.bluecalc .ts-wrapper.dropdown-active .ts-control{border-color:var(--blue)!important;box-shadow:var(--focus)!important}
/* De plugin zet een harde 2px outline op focus (#frFrm input:focus). Wij gebruiken enkel de zachte
   brand-ring op het hele veld -> harde outline uit (hogere specificiteit + !important om de plugin te overrulen). */
.bluecalc #frFrm input:focus,.bluecalc #frFrm select:focus,.bluecalc #frFrm textarea:focus{outline:0!important}
/* Het interne Tom Select-input krijgt op focus ook de box-shadow van de plugin (#frFrm input:focus !important).
   De focus-ring hoort enkel op de hele .ts-control -> binnenste ring op het input zelf wegnemen
   (selector met #frFrm zodat de specificiteit de plugin-regel overtreft). */
.bluecalc #frFrm .ts-control input:focus{outline:0!important;box-shadow:none!important}
/* Intern tekstveld ván Tom Select mag NIET mijn generieke input-styling (rand/padding/hoogte) krijgen,
   anders ontstaat een box-in-een-box ("dubbele rand") in het ORIGIN-zoekveld. */
.bluecalc .ts-control input{font-size:0.9375rem!important;border:0!important;padding:0!important;margin:0!important;
  min-height:0!important;height:auto!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.bluecalc .ts-dropdown{border:1px solid var(--line);border-radius:0.625rem;box-shadow:var(--shadow);margin-top:0.25rem}
.bluecalc .ts-dropdown .active{background:var(--blue);color:#fff}
/* Klik je in een INGEVULDE zoekselect (herkomst, port of discharge) om ze te wijzigen, dan zet Tom
   Select het invoerveld ónder de gekozen waarde: het vak wordt twee regels hoog en de cursor staat
   onder de tekst. Op één regel houden: de waarde mag krimpen (met …), het typveld houdt ruimte. */
.bluecalc .ts-wrapper.single .ts-control{flex-wrap:nowrap}
/* Link naar het eigen offerte-overzicht: onder de paginatitel en in de voet van de offerte. */
.bluecalc .bc-page-links{margin:0.5rem 0 0}
.bluecalc .bc-quotes-link{font-weight:600;color:var(--blue);text-decoration:none;border-bottom:1px solid currentColor}
.bluecalc .bc-quotes-link:hover{color:var(--magenta)}

/* Zolang er zoektekst staat (klasse gezet door de zoekluisteraar): enkel die tekst tonen, niet ook nog de
   eerder gekozen haven ernaast -- dat las als "SHANGHAI (SHA) jaka". */
.bluecalc .ts-wrapper.single.bl-zoekt .ts-control > .item{display:none}
.bluecalc .ts-wrapper.single .ts-control .item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* basis 0: het typveld neemt enkel de ruimte die overblijft, zodat de gekozen waarde niet nodeloos
   met … afgekapt wordt terwijl er nog plaats is. */
.bluecalc .ts-wrapper.single.input-active .ts-control > input{flex:1 1 0!important;min-width:8ch}

/* Vergrendelde herkomst (offerte met lijnen): Tom Select zet zelf de klasse `locked`, maar het
   invoerveldje binnenin blijft klikbaar — je kreeg dan een cursor ónder de gekozen plaatsnaam.
   Veld weg, en het vak leest als een alleen-lezen waarde. */
.bluecalc .ts-wrapper.locked .ts-control,
.bluecalc .ts-wrapper.locked.focus .ts-control{cursor:default;background:#f7f9fc!important;color:var(--muted);
  border-color:var(--line)!important;box-shadow:none!important}
.bluecalc .ts-wrapper.locked .ts-control input{display:none!important}
.bluecalc .ts-wrapper.locked .ts-control .item{color:var(--ink)}

/* ── Auto-berekende totals → compacte lichtblauwe pillen (label grijs, waarde vetblauw), zoals mockup ── */
/* Beide pillen even breed: ze horen bij elkaar (twee totalen van dezelfde zending), dus een
   verschillende breedte leest als een verschillend soort waarde. */
.bluecalc .bc-totals{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:0.25rem}
.bluecalc .bc-total{display:inline-flex;align-items:center;gap:0.3125rem;background:#eef4fb;border-radius:62.4375rem;
  padding:0.5rem 0.875rem;font-size:0.8438rem;line-height:1;color:var(--muted);white-space:nowrap;
  flex:1 1 0;min-width:0;max-width:18.125rem}
.bluecalc .bc-total>*{line-height:1;display:inline-flex;align-items:center}
.bluecalc .bc-total-lbl{font-weight:500}
.bluecalc .bc-total-unit,
.bluecalc .bc-total #weight-info{font-weight:700;color:var(--blue)}
/* Totaal volume én totaal gewicht zijn dezelfde control (.bc-total-val): dezelfde pil, dezelfde
   typografie, of de waarde nu berekend is of door de klant ingevuld wordt.
   Waarde en eenheid sluiten links aan bij het label; de vrije ruimte valt achteraan in de pil.
   Zonder `width:auto!important` won de generieke `input[type=number]{width:100%!important}` en rekte
   het volumeveld uit tot over de hele pil (waarde rechts, gat na het label) terwijl het gewicht als
   <span> wél kort bleef — twee pillen die er anders uitzagen. `size` in de HTML zorgt voor een
   nette breedte in browsers zonder field-sizing. */
.bluecalc .bc-total .bc-total-val{font-weight:700;color:var(--blue)!important;-webkit-text-fill-color:var(--blue);
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;
  min-height:0!important;height:auto!important;text-align:left!important;width:auto!important;min-width:2ch;
  field-sizing:content;-moz-appearance:textfield;appearance:textfield}
.bluecalc .bc-total .bc-total-val::-webkit-outer-spin-button,
.bluecalc .bc-total .bc-total-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Feature L: bij "geen voortransport" moet de klant het volume ZELF ingeven -> de pil wordt een echt
   invoerveld (wit vlak, kader, focus-ring) i.p.v. een berekende waarde die je niet aanklikt. */
.bluecalc .bc-total--editable{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.bluecalc .bc-total--editable .bc-total-lbl{color:var(--ink);font-weight:600}
.bluecalc .bc-total--editable .bc-total-val{background:#fff!important;border:1px solid var(--line)!important;
  border-radius:0.5rem!important;padding:0.4375rem 0.5625rem!important;min-width:7ch;text-align:left;margin:0 2px!important}
.bluecalc .bc-total--editable .bc-total-val:focus{border-color:var(--blue)!important;box-shadow:var(--focus)!important;outline:0}
.bluecalc .bc-total--editable .bc-total-val::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted);font-weight:500}

/* Eerstvolgende vertrekken onder de offerte (live uit de BlueShipping/Ecu-API). */
.bluecalc .bc-sailings{margin:1.125rem 0 0}
.bluecalc .bc-sailings h3{font-family:var(--font-heading);font-size:0.8125rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--blue);margin:0 0 0.5rem}
.bluecalc .bc-sailings-tabel{width:100%;border-collapse:collapse;font-size:0.8438rem}
.bluecalc .bc-sailings-tabel th{text-align:left;font-weight:600;color:var(--muted);font-size:0.75rem;
  text-transform:uppercase;letter-spacing:.04em;padding:0 0.75rem 0.375rem 0;border-bottom:1px solid var(--line)}
.bluecalc .bc-sailings-tabel td{padding:0.5rem 0.75rem 0.5rem 0;border-bottom:1px solid var(--line)}
.bluecalc .bc-sailings-tabel tr:last-child td{border-bottom:0}

/* Aanvraag die manueel opgevolgd wordt (te groot/te zwaar, gevaarlijke goederen): geen foutmelding
   maar een bevestiging, dus rustig en positief in plaats van rood. */
.bluecalc .bc-manual-review{background:#eef4fb;border:1px solid #cfe0f2;border-radius:var(--radius);
  padding:1.125rem 1.25rem;margin:0 0 1.125rem}
.bluecalc .bc-manual-review p{margin:0}
.bluecalc .bc-manual-review .bc-manual-reden{margin-top:0.375rem;font-size:0.8125rem;color:var(--muted)}

/* Beheerdersbalk: enkel zichtbaar voor wie `manage_options` heeft. Bewust een andere kleur dan de
   rest van het formulier, zodat niemand hem voor een klantveld aanziet. */
.bluecalc .bc-admin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;
  background:#fff8e5;border:1px solid #f0d9a0}
.bluecalc .bc-admin-bar strong{margin:0;font-size:0.75rem;text-transform:uppercase;letter-spacing:.06em;color:#8a6d1f}
.bluecalc .bc-admin-bar label{font-size:0.8125rem;color:var(--ink)}
.bluecalc .bc-admin-bar select{width:auto!important;min-width:10rem;margin:0!important}
.bluecalc .bc-admin-bar .button{margin:0!important;padding:0.5625rem 1rem!important;min-height:0!important;font-size:0.8125rem}
.bluecalc .bc-admin-bar small{flex-basis:100%;color:var(--muted)}

/* Veldfout (bv. ontbrekende origin). Tom Select verbergt het echte veld, dus de browser kan er
   geen eigen melding op tonen — deze regel neemt die rol over. */
.bluecalc .bc-field-error{margin-top:0.375rem;font-size:0.8125rem;font-weight:600;color:var(--bs-red,#E2204E)}
.bluecalc .bc-field-error:empty{display:none}

/* ── Toggles (fancy-checkbox) → switch in huisstijl ── */
.bluecalc input.fancy-checkbox[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:2.875rem;height:1.625rem;border-radius:62.4375rem;background:#cdd6e2;cursor:pointer;transition:.15s;margin:0.375rem 0 0;border:0!important;min-height:0!important;padding:0!important}
.bluecalc input.fancy-checkbox[type=checkbox]::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.bluecalc input.fancy-checkbox[type=checkbox]:checked{background:var(--blue)}
.bluecalc input.fancy-checkbox[type=checkbox]:checked::after{transform:translateX(1.25rem)}
.bluecalc input.fancy-checkbox[type=checkbox]:focus-visible{box-shadow:var(--focus)}

/* Feature L "geen voortransport": zelfde switch als de toggles bij stackable/dangerous, maar in een
   horizontale rij met het label ernaast (de andere toggles staan gestapeld in een tabelkolom). */
.bluecalc .bc-precarriage{display:flex;align-items:center;gap:0.625rem;margin:0.625rem 0 0.25rem}
.bluecalc .bc-precarriage input.fancy-checkbox[type=checkbox]{margin:0!important;flex:0 0 auto}
.bluecalc .bc-precarriage label{margin:0;font-weight:600;font-size:0.8438rem;cursor:pointer;color:var(--ink)}
.bluecalc .bc-precarriage label small{font-weight:500;color:var(--muted)}
.bluecalc .bc-precarriage label small i{font-style:normal}

/* ── Knoppen ──
   Eén maat voor alle acties: minimumbreedte zodat "Get quote" niet smaller uitvalt dan
   "Add to quote", ruime binnenmarge, en zowel een hover- als een focus-toestand. */
.bluecalc input.button[type=submit],
.bluecalc .button{display:inline-flex;align-items:center;justify-content:center;min-width:11rem;
  background:var(--magenta)!important;color:#fff!important;border:1px solid transparent!important;
  border-radius:var(--bc-radius-signature)!important;padding:0.875rem 1.75rem!important;
  font-size:0.9375rem;font-weight:600;letter-spacing:.03em;cursor:pointer;min-height:0;box-shadow:none;
  transition:background-color .14s, box-shadow .14s, transform .05s}
.bluecalc input.button[type=submit]:hover,
.bluecalc .button:hover{background:var(--bc-purple-dark)!important;box-shadow:0 0.375rem 1.125rem rgba(174,28,116,.25)}
.bluecalc input.button[type=submit]:active,.bluecalc .button:active{transform:translateY(1px)}
.bluecalc input.button[type=submit]:focus-visible,
.bluecalc .button:focus-visible{outline:none;box-shadow:var(--focus)}
/* Nevenacties (bv. "Copy quotation") in het omgekeerde patroon: wit met deep blue rand. */
.bluecalc .button.bc-btn-sec,
.bluecalc input.button.bc-btn-sec[type=submit],
.bluecalc .button.bc-knop-2{background:#fff!important;color:var(--blue)!important;border-color:var(--blue)!important}
.bluecalc input.button.bc-btn-sec[type=submit]:hover,
.bluecalc .button.bc-btn-sec:hover,
.bluecalc .button.bc-knop-2:hover{background:var(--blue)!important;color:#fff!important;
  box-shadow:0 0.375rem 1.125rem rgba(10,63,125,.22)}
/* Het e-mailveld draagt óók class="button" (plugin-markup) maar is een invoerveld, geen actie. */
.bluecalc input[name=email].button{display:block;min-width:0;background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:0.5rem!important;font-weight:500;letter-spacing:0;
  padding:0.75rem 0.8125rem!important;min-height:2.875rem}

/* ── Bestanden (dangerous goods) ── */
.bluecalc #files{border:1px dashed var(--magenta);border-radius:0.75rem;background:#fdf2f9;padding:0.875rem;margin-top:0.375rem}

/* ── Layout: form + "How it works"-sidebar ── */
/* Eén kolom: "How it works" staat als uitklapper bovenaan i.p.v. in een meescrollende zijkolom.
   Die zijkolom schoof bij een brede offerte over de inhoud (Stijn, 10/08). `min-width:0` houdt een
   brede tabel binnen de kolom i.p.v. ze te laten uitlopen. */
.bluecalc .bc-layout{display:block}
.bluecalc .bc-main{min-width:0}
.bluecalc .bc-main{min-width:0}
.bluecalc .hiw{margin:0 0 1.125rem}
.bluecalc .hiw{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.bluecalc .hiw>summary{list-style:none;cursor:pointer;padding:1rem 1.125rem;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:space-between}
.bluecalc .hiw>summary::-webkit-details-marker{display:none}
.bluecalc .hiw>summary .chev{transition:transform .15s;color:var(--muted)}
.bluecalc .hiw[open]>summary .chev{transform:rotate(180deg)}
.bluecalc .hiw-body{padding:0 1.125rem 1rem}
.bluecalc .steps{list-style:none;margin:0;padding:0;counter-reset:s}
.bluecalc .steps li{position:relative;padding:0 0 0.875rem 2.125rem;counter-increment:s;color:var(--muted);font-size:0.8438rem;line-height:1.4}
.bluecalc .steps li:last-child{padding-bottom:0}
.bluecalc .steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:1.5rem;height:1.5rem;border-radius:50%;background:#eef4fb;color:var(--blue);font-weight:700;display:grid;place-items:center;font-size:0.75rem}
.bluecalc .steps li b{color:var(--ink);font-weight:600}

/* ===== Afwerking (feedback 2026-06-26) ===== */
/* Header-chrome staat nu site-breed in assets/site.css (laadt op alle pagina's). */
.bluecalc{max-width:1140px}
/* Tom Select: één nette rand. CRUCIAAL: de originele <select> die Tom Select vervangt
   (class .tomselected) mag NIET mijn generieke veld-styling krijgen, anders verschijnt die
   als vage box achter de control = de "dubbele rand / 2 dropdowns in 1". Dus volledig verbergen. */
.bluecalc select.tomselected{display:none!important}
.bluecalc .ts-wrapper{box-shadow:none!important;border:0!important;background:transparent!important;padding:0!important}
.bluecalc .ts-wrapper .ts-control{border:1px solid var(--line)!important;box-shadow:none!important;background:#fff}
/* Extra info: label + sublabel gegroepeerd bovenaan, toggle ONDERAAN uitgelijnd
   (flex-kolom + margin-top:auto op de toggle), zodat alle toggles op één lijn staan. */
.bluecalc .bc-card td > div.bc-toggle{display:flex!important;flex-direction:column;float:none!important;height:100%}
.bluecalc .bc-card td > div.bc-toggle > .fancy-checkbox{margin-top:auto}

/* Veld-divs (met een invulveld of Tom Select): block + flex-kolom, control naar onder.
   - fixt smalle inputs (float:left shrink-to-fit -> nu volle celbreedte)
   - lijnt controls per rij uit (label boven, veld onder), ongeacht label/hint-lengte
   Veilig gescoped: hidden dropdown-divs bevatten een <select> (geen input/ts-wrapper) -> niet geraakt;
   totals (#cubeCBM/#weight-info) en de e-mail/knop-rij uitgesloten (apart gestyled). */
.bluecalc .bc-card td > div:has(> input[type=number]):not([style*="display:none"]):not([style*="display: none"]),
.bluecalc .bc-card td > div:has(> select):not([style*="display:none"]):not([style*="display: none"]),
.bluecalc .bc-card td > div:has(> .ts-wrapper):not([style*="display:none"]):not([style*="display: none"]){display:flex!important;flex-direction:column;float:none!important;width:auto;height:100%}
.bluecalc .bc-card td > div:has(> input[type=number]):not([style*="display:none"]):not([style*="display: none"]) > input[type=number],
.bluecalc .bc-card td > div:has(> select):not([style*="display:none"]):not([style*="display: none"]) > select,
.bluecalc .bc-card td > div:has(> .ts-wrapper):not([style*="display:none"]):not([style*="display: none"]) > .ts-wrapper{margin-top:auto}
.bluecalc .bc-card td{height:1px}
/* De <br/> na <strong> wordt in een flex-kolom een spook-item (~1.125rem) en duwt label en
   sublabel uit elkaar -> verbergen zodat label + sublabel gegroepeerd bovenaan staan. */
.bluecalc .bc-card td > div br{display:none}

/* Sommige pagina's (bv. #4 api-demo) hebben een max-width:3.125rem op number-inputs uit oude page-CSS
   -> overschrijven zodat de velden overal volle breedte pakken. */
.bluecalc .bc-card input[type=number],
.bluecalc .bc-card input[type=text]{max-width:none!important}

/* FCL: e-mail-veld + "GET DAP QUOTE"-knop in één rij, rechts uitgelijnd, met ruimte ertussen
   en gelijke hoogte (geen float-velden meer die tegen elkaar plakken). */
.bluecalc .bc-fcl-submit{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0.875rem}
.bluecalc .bc-fcl-submit > input{margin:0!important;min-height:3rem}
/* generieke regel zet input[type=text] op width:100%!important -> hier overrulen, anders wrapt de knop. */
.bluecalc .bc-fcl-submit input[name=email]{width:18.75rem!important;max-width:100%;flex:0 0 auto}

/* FCL-form (= de bc-card met het email-veld): A/B-selects onderaan uitlijnen zodat ze op één
   lijn staan; A heeft nu ook een sublabel, dus labels lijnen bovenaan uit. */
.bluecalc .bc-card:has(input[name=email]) td{vertical-align:bottom}

/* FCL D/E: label boven, toggle eronder; de groep verticaal gecentreerd t.o.v. het containers-veld. */
.bluecalc .bc-fcl-dg{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0.5rem;min-height:3.1875rem;float:none}
.bluecalc .bc-fcl-dg strong{line-height:1.2}
.bluecalc .bc-fcl-dg .fancy-checkbox{margin:0!important}

/* ── Mobiel ── */
@media (max-width:880px){
  .bluecalc .hiw{box-shadow:0 0.25rem 0.875rem rgba(16,24,40,.10)}
}
@media (max-width:680px){
  .bluecalc form td{display:block;width:100%!important;padding:0.5rem 0}
  .bluecalc .bc-card{padding:1rem}
}

/* ==========================================================================
   De offerte op het scherm (variant B, keuze 04/08/2026)
   Markup: easyfreight-client/quote_screen.php. De MAIL heeft een eigen opbouw
   (form_email.php) omdat mailclients geen echte CSS aankunnen.
   ========================================================================== */
.bluecalc .bc-quote{margin:0 0 1.25rem}
/* Route + eindbedrag bovenaan: het antwoord op de vraag die de klant stelde. */
.bluecalc .bc-q-hero{background:linear-gradient(135deg,var(--blue) 0%,#0d5493 100%);color:#fff;
  border-radius:var(--radius) var(--radius) var(--radius) 2rem;padding:1.5rem 1.625rem;
  display:flex;gap:1.75rem;align-items:center;flex-wrap:wrap}
.bluecalc .bc-q-route{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;line-height:1.2}
.bluecalc .bc-q-route span{color:var(--turq)}
.bluecalc .bc-q-route small{display:block;font-size:0.75rem;font-weight:500;color:#a9c6e4;margin-top:0.375rem}
.bluecalc .bc-q-spacer{flex:1}
.bluecalc .bc-q-price{text-align:right}
.bluecalc .bc-q-lbl{font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#a9c6e4}
.bluecalc .bc-q-eur{font-size:2rem;font-weight:700;color:var(--turq);line-height:1.15}
.bluecalc .bc-q-usd{font-size:0.8125rem;color:#dceaf7}
/* Offertenummer rechtsboven, groter dan de rest van de kop (Kim, 05/10) */
.bluecalc .bc-q-nr{font-size:1.375rem;font-weight:700;color:#fff;line-height:1.1;margin-bottom:0.75rem}
.bluecalc .bc-q-nr span{display:block;font-size:0.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#a9c6e4}
/* Gevaarlijke goederen: "Yes" in het rood, op scherm en in de mail */
.bluecalc .bc-q-dl dd.bc-q-dg{color:#c0262d;font-weight:700}

.bluecalc .bc-q-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem}
.bluecalc .bc-q-chip{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:0.4375rem 0.875rem;font-size:0.8125rem}
.bluecalc .bc-q-chip span{color:var(--muted);margin-right:0.375rem}
.bluecalc .bc-q-chip b{font-weight:600}
.bluecalc .bc-q-note{margin:0.625rem 0 0;font-size:0.8125rem;color:var(--muted)}
.bluecalc .bc-q-note a{color:var(--accent);margin-right:0.875rem}

.bluecalc .bc-q-cargo{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 0.875rem;margin-top:0.75rem;
  font-size:0.8125rem;color:var(--ink)}
.bluecalc .bc-q-cargo-lbl{font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bluecalc .bc-q-cargo-item em{font-style:normal;color:var(--muted)}

/* Kostenblokken naast elkaar; de subtotalen staan op dezelfde hoogte. */
.bluecalc .bc-q-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.375rem}
.bluecalc .bc-q-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.125rem;display:flex;flex-direction:column}
.bluecalc .bc-q-block h3{font-family:var(--font-heading);font-size:0.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin:0 0 0.75rem;font-weight:600}
.bluecalc .bc-q-line{display:flex;justify-content:space-between;gap:0.875rem;padding:0.4375rem 0;
  font-size:0.8438rem;border-bottom:1px solid #eef3f8}
.bluecalc .bc-q-line em{display:block;font-style:normal;color:var(--muted);font-size:0.75rem}
.bluecalc .bc-q-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:600}
.bluecalc .bc-q-num span{color:var(--muted);font-weight:500}
.bluecalc .bc-q-msg{color:var(--muted);font-size:0.8125rem;text-align:right}
.bluecalc .bc-q-sub{display:flex;justify-content:space-between;gap:0.875rem;padding-top:0.6875rem;
  margin-top:auto;border-top:2px solid var(--blue);font-weight:600;font-size:0.875rem}

.bluecalc .bc-q-sec{margin-top:1.375rem}
.bluecalc .bc-q-sec h3{font-family:var(--font-heading);font-size:0.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);font-weight:600;margin:0 0 0.625rem;
  padding-bottom:0.375rem;border-bottom:2px solid var(--turq);display:inline-block}
/* Intern blok (inkoop voortransport): enkel zichtbaar voor medewerkers van Blue. Bewust een andere
   achtergrond dan de offerte zelf, zodat niemand het per ongeluk voor klantinfo aanziet. */
.bluecalc .bc-q-staff{background:#fbfcfe;border:1px dashed var(--line);border-radius:var(--radius);
  padding:0.875rem 1rem;max-width:32rem}
.bluecalc .bc-q-staff h3{color:var(--muted);border-bottom-color:var(--muted)}
.bluecalc .bc-q-staff .bc-q-sub{border-top-color:var(--muted)}

.bluecalc .bc-q-sail{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem}
.bluecalc .bc-q-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) var(--radius) 1.25rem;padding:0.875rem}
.bluecalc .bc-q-card .ves{font-weight:600;font-size:0.8438rem;line-height:1.25}
.bluecalc .bc-q-card .car{font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--magenta);margin-top:0.1875rem}
.bluecalc .bc-q-card .ets{font-size:1.375rem;font-weight:700;color:var(--blue);margin-top:0.625rem;line-height:1}
.bluecalc .bc-q-card .det{font-size:0.75rem;color:var(--muted);margin-top:0.5rem;line-height:1.5}

.bluecalc .bc-q-foot{margin:1.25rem 0 0;font-size:0.75rem;color:var(--muted)}

@media (max-width:880px){
  .bluecalc .bc-q-grid{grid-template-columns:1fr}
  .bluecalc .bc-q-sail{grid-template-columns:repeat(2,1fr)}
  .bluecalc .bc-q-price{text-align:left}
}

/* ── Actieblok bij de offerte ──
   Twee plekken: onder de lijnentabel (get quote / email quote) en onder de getoonde offerte
   ("Email this quote to"). Beide stonden zonder opmaak los op de paginakleur, waardoor ze niet
   als deel van de offerte lazen. Zelfde kaartlook als .bc-card, met veld en knop op één hoogte. */
.bluecalc .bc-quote-acties{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.125rem 1.25rem;margin:0 0 1.125rem}
.bluecalc .bc-quote-acties form{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem;margin:0}
.bluecalc .bc-quote-acties input[name=email],
.bluecalc .bc-quote-acties .button{min-height:3rem;margin:0!important}
/* De generieke regel zet invoervelden op width:100% -> hier overrulen, anders wrapt de knop. */
.bluecalc .bc-quote-acties input[name=email]{width:auto!important;flex:1 1 16rem;min-width:12rem}
.bluecalc .bc-quote-acties .button{flex:0 0 auto}
/* Variant onder de offerte: volgt het ritme van de offertesecties en heeft een eigen kopje. */
.bluecalc .bc-quote-acties--na{margin:1.375rem 0 0}
.bluecalc .bc-quote-acties--na form label{flex:1 1 100%;margin:0 0 0.625rem;
  font-family:var(--font-heading);font-size:0.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue)}

/* "Change details": brengt het ingeklapte invoerformulier terug. Nevenactie, geen CTA, dus
   dezelfde witte variant als bc-btn-sec en niet de volle breedte van een hoofdknop. */
.bluecalc .bc-heropen{margin:0 0 1.125rem;min-width:0}

@media (max-width:680px){
  .bluecalc .bc-quote-acties .button{width:100%}
  .bluecalc .bc-quote-acties input[name=email]{flex:1 1 100%}
}

/* De lijnentabel en het clausuleblok komen uit de mailopmaak en zijn breed; laat ze binnen de kolom
   scrollen i.p.v. de hele pagina te laten uitlopen. */
.bluecalc .bc-main > table{display:block;max-width:100%;overflow-x:auto}

/* Offerte als één document onder het blauwe totaalblok (keuze 1B, 03/10): zelfde opbouw als de
   mail, secties onder elkaar met grote titels. Vervangt de chips en de twee kaarten naast elkaar. */
.bluecalc .bc-q-samenvatting{display:block;margin-top:0.5rem;font-size:0.875rem;font-weight:500;color:#dceaf7}
.bluecalc .bc-q-doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0.5rem 1.5rem 1.25rem;margin-top:1rem;box-shadow:var(--shadow)}
.bluecalc .bc-q-doc-sec{padding-top:1.125rem}
.bluecalc .bc-q-doc-sec h3{font-family:var(--font-heading);font-size:1.125rem;font-weight:600;color:var(--blue);
  margin:0 0 0.5rem;padding-bottom:0.375rem;border-bottom:2px solid var(--blue);letter-spacing:0;text-transform:none}
.bluecalc .bc-q-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:0.625rem 1.25rem;margin:0.75rem 0 0}
.bluecalc .bc-q-dl div{min-width:0}
.bluecalc .bc-q-dl dt{font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bluecalc .bc-q-dl dd{margin:0.125rem 0 0;font-weight:600;overflow-wrap:anywhere}
.bluecalc .bc-q-colli{display:flex;flex-wrap:wrap;gap:0.25rem 1rem;margin:0.75rem 0 0;font-size:0.875rem;color:var(--muted)}
.bluecalc .bc-q-doc .bc-q-line{padding:0.5rem 0}
.bluecalc .bc-q-grand{display:flex;justify-content:space-between;gap:0.875rem;margin-top:1.25rem;padding:0.875rem 1rem;
  background:var(--blue);color:#fff;border-radius:var(--radius);font-weight:600;font-size:1.0625rem}
.bluecalc .bc-q-grand .bc-q-num span{color:#dceaf7}
@media (max-width:640px){ .bluecalc .bc-q-doc{padding:0.25rem 1rem 1rem} .bluecalc .bc-q-grand{flex-direction:column} }

/* Lijnenscherm voor klanten (keuze 2B): lijnen als lijst, prijs pas in de offerte. */
.bluecalc .bc-lijnen{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.25rem;margin-top:1rem}
.bluecalc .bc-lijnen-kop h3{font-family:var(--font-heading);font-size:1.125rem;color:var(--blue);margin:0}
.bluecalc .bc-lijnen-kop p{margin:0.125rem 0 0.75rem;color:var(--muted);font-size:0.875rem}
.bluecalc .bc-lijnen-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.bluecalc .bc-lijnen-lijst li{display:grid;grid-template-columns:auto 1fr auto;gap:0.75rem;align-items:center;
  border:1px solid var(--line);border-radius:0.5rem;padding:0.625rem 0.75rem}
.bluecalc .bc-lijn-nr{font-variant-numeric:tabular-nums;font-size:0.8125rem;font-weight:600;background:var(--bc-line-soft);
  border-radius:0.25rem;padding:0.125rem 0.5rem;color:var(--blue)}
.bluecalc .bc-lijn-wat{min-width:0;font-weight:600}
.bluecalc .bc-lijn-wat em{display:block;font-style:normal;font-weight:500;font-size:0.8125rem;color:var(--muted)}
.bluecalc .bc-lijn-weg{background:none;border:1px solid transparent;border-radius:0.375rem;color:var(--muted);
  font-size:1.25rem;line-height:1;width:2rem;height:2rem;cursor:pointer;padding:0}
.bluecalc .bc-lijn-weg:hover{border-color:var(--line);color:#b42318}
.bluecalc .bc-lijn-weg:focus-visible{outline:none;box-shadow:var(--focus)}
.bluecalc .bc-lijnen-som{display:flex;flex-wrap:wrap;gap:0.375rem 1.25rem;margin-top:0.75rem;padding:0.625rem 0.75rem;
  background:var(--bc-line-soft);border-radius:0.5rem;font-size:0.875rem}
.bluecalc .bc-lijnen-som b{color:var(--muted);font-weight:600;margin-right:0.25rem}
/* De knop GET QUOTE sluit het lijnenblok af: één blok, knop rechts onderaan. */
.bluecalc .bc-lijnen:has(+ .bc-quote-acties){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.bluecalc .bc-lijnen + .bc-quote-acties{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;
  border-top:0;padding-top:0.25rem}
.bluecalc .bc-lijnen + .bc-quote-acties form{justify-content:flex-end}

/* Gevaarlijke goederen: UN-nummer(s) bij "no pre-carriage" (Kim, 30/09). */
.bluecalc .bc-dg{margin:0 0 1rem}
.bluecalc .bc-dg label{display:block;margin:0 0 0.25rem}
.bluecalc .bc-dg .bc-dg-hint{display:block;margin:0 0 0.625rem;color:var(--muted)}
.bluecalc .bc-req{color:var(--magenta)}
.bluecalc .bc-dg .ts-control{min-height:3rem}
.bluecalc .bc-dg--fout .ts-control{border-color:#b42318;box-shadow:0 0 0 0.1875rem rgba(180,35,24,.15)}
.bluecalc .bc-field-error{margin:0.5rem 0 0;color:#b42318;font-weight:600;font-size:0.875rem}
/* Mailblok onder de offerte: bevestiging van de automatische mail. */
.bluecalc .bc-mail-ok{margin:0 0 0.875rem;color:var(--ink)}
.bluecalc .bc-staff-note{margin:0.5rem 0 0;font-size:0.8125rem;color:var(--muted)}
/* Foutmeldingen: samenvatting bovenaan het formulier + melding onder het veld (Kim, 30/09). */
.bluecalc .bc-form-errors{background:#fef3f2;border:1px solid #fecdca;border-radius:var(--radius);
  padding:0.875rem 1rem;margin:0 0 1rem;color:#7a271a}
.bluecalc .bc-form-errors ul{margin:0.375rem 0 0 1.125rem;padding:0}
.bluecalc .bc-form-errors li{margin:0.125rem 0}
.bluecalc .bc-veld--fout,
.bluecalc input.bc-veld--fout,
.bluecalc .bc-veld--fout .ts-control,
.bluecalc .ts-wrapper.bc-veld--fout.focus .ts-control{border-color:#b42318!important;box-shadow:0 0 0 0.1875rem rgba(180,35,24,.15)!important}
/* Havenzoeker: land klein naast de haven (zoeken op land, Kim 30/09). */
.bluecalc .bc-ts-land{margin-left:0.375rem;color:var(--muted);font-size:0.8125em}
/* DGD/MSDS-upload: twee bestandsvelden en de uploadknop op één rij, onder het UN-veld. */
.bluecalc .bc-dg-wrap{border-top:1px solid var(--line);margin-top:0.5rem;padding-top:1rem}
.bluecalc .bc-dg-docs{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.bluecalc .bc-dg-doc{flex:1 1 14rem;display:flex;flex-direction:column;gap:0.375rem}
.bluecalc .bc-dg-doc--knop{flex:0 0 auto}