/* Site-brede chrome — laadt op ALLE pagina's zodat de gewone pagina's dezelfde stijl
   krijgen als de calculator-pagina's.

   Hier staan ook de merk-tokens (kleuren, lettertype, basisgrootte). calc.css bouwt
   daarop verder. Wijzig een kleur of de basisgrootte hier: de rest volgt.
   Bron: Blue Shipping Brand Guidelines V1 (2024). */

/* ── Standerd (licentie bevestigd 04/08/2026) ─────────────────────────────
   Vier gewichten volstaan. 500 (Medium) is het minimum voor lopende tekst:
   Regular oogt te dun op de blauwe vlakken. */
@font-face{font-family:'Standerd';src:url('fonts/Standerd-Regular.woff2') format('woff2');
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Standerd';src:url('fonts/Standerd-Medium.woff2') format('woff2');
           font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Standerd';src:url('fonts/Standerd-SemiBold.woff2') format('woff2');
           font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Standerd';src:url('fonts/Standerd-Bold.woff2') format('woff2');
           font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Primaire merkkleuren */
  --bc-deep:#0A3F7D;        /* Deep Blue  */
  --bc-deep-dark:#072F5D;
  --bc-blue:#1271B6;        /* Blue       */
  --bc-turq:#00FFF0;        /* Turquoise — enkel als accent OP deep blue (1,3:1 op wit) */
  --bc-purple:#AE1C74;      /* Elite Purple — actieknoppen */
  --bc-purple-dark:#8E1560;

  /* Neutralen */
  --bc-ink:#0f1b2a; --bc-muted:#5f7185; --bc-line:#dbe4ee; --bc-line-soft:#eef3f8; --bc-bg:#f2f6fa;

  /* Typografie — Outfit blijft als vangnet uit de brand guide */
  --bc-font:'Standerd','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Vorm: de signatuur uit de guide is een rechthoek met één sterk afgeronde hoek */
  --bc-radius:0.625rem;
  --bc-radius-signature:0 0 0 1.5rem;
  --bc-focus:0 0 0 0.1875rem rgba(18,113,182,.30);
  --bc-shadow:0 1px 2px rgba(16,24,40,.05), 0 0.5rem 1.5rem rgba(16,24,40,.06);

  /* Oude namen, behouden zodat bestaande regels blijven werken */
  --bc-blue-dark:#0A3F7D;
}

/* Eén basismaat voor de hele site; alle maten staan in rem en schalen mee.
   18px i.p.v. de browserstandaard 16 = overal een tikje groter. */
html{font-size:18px}
body{font-family:var(--bc-font);font-weight:500;color:var(--bc-ink)}
h1,h2,h3,h4,h5,h6,.widget-title,button,input,select,textarea{font-family:var(--bc-font)}
h1,h2,h3{font-weight:600}

/* ── Kopbalk: donker en meelopend ───────────────────────────────────────── */
#site-header{position:sticky;top:0;z-index:1000;background:var(--bc-deep)!important;
             border-bottom:0!important;box-shadow:0 0.375rem 1.25rem rgba(10,63,125,.18)}
#site-header.minimal-header{height:auto!important}
/* Header-inner gelijk aan de body-container (1140) + dezelfde horizontale padding,
   zodat het logo uitlijnt met de inhoud. */
#site-header #site-header-inner{max-width:1140px!important;box-sizing:border-box;
             padding-left:18px!important;padding-right:18px!important}
/* Het logo bestaat enkel in merkblauw/magenta op wit — daarom op een witte tegel met de
   signatuurhoek. Zodra er een witte versie is, mag deze tegel weg. */
#site-header #site-logo img,#site-header #site-logo a img{max-height:2rem!important;width:auto!important;
             background:#fff;padding:0.5rem 0.75rem;border-radius:0 0 0 0.875rem;box-sizing:content-box}
#site-header #site-navigation-wrap .dropdown-menu > li > a,
#site-header .oceanwp-mobile-menu-icon a{color:#bcd4ea!important;font-weight:500}
#site-header #site-navigation-wrap .dropdown-menu > li > a:hover,
#site-header .oceanwp-mobile-menu-icon a:hover{color:#fff!important}
#site-header #site-navigation-wrap .dropdown-menu > .current-menu-item > a,
#site-header #site-navigation-wrap .dropdown-menu > .current_page_item > a{color:#fff!important;font-weight:600;
             box-shadow:inset 0 -0.1875rem 0 var(--bc-turq)}
/* Uitklapmenu's blijven leesbaar op wit */
#site-header .dropdown-menu .sub-menu{background:#fff;border:1px solid var(--bc-line)}
#site-header .dropdown-menu .sub-menu li a{color:var(--bc-ink)!important}

/* OceanWP zet boven de kopbalk een lege top-bar (17px wit) -> weg, anders staat er een witte
   streep boven het donkere blauw. Komt er ooit inhoud in die balk, dan moet deze regel weg. */
#top-bar-wrap{display:none!important}

/* Content-container gelijk aan header/calculator. */
.container{max-width:1140px!important}
body{background:var(--bc-bg)}

/* Korte pagina's lieten een lichte strook onder de voet zien (de body stopt vóór de onderkant van
   het scherm). De wrapper vult nu minstens het venster en de inhoud duwt de voet naar beneden;
   de achtergrond van het document krijgt dezelfde kleur als de voet als extra vangnet. */
html{background:var(--bc-deep-dark)}
#outer-wrap{display:flex;flex-direction:column;min-height:100vh}
#outer-wrap > #wrap{display:flex;flex-direction:column;flex:1 0 auto}
#wrap > #main{flex:1 0 auto}
#footer{flex-shrink:0}

/* ── Voet in deep blue ────────────────────────────────────────────────────
   OceanWP kleurt #footer-widgets apart (standaard #222) -> anders blijft er een
   zwarte strook boven de voet staan. */
#footer,#footer-widgets,#footer-bottom{background:var(--bc-deep-dark)!important;color:#a9c6e4!important}
#footer a,#footer-widgets a,#footer-bottom a{color:#dceaf7!important}
#footer a:hover,#footer-widgets a:hover,#footer-bottom a:hover{color:#fff!important}
#footer-widgets:empty{display:none}
/* Ook hier het logo op een witte tegel: het bestaat enkel in blauw/magenta. */
.bc-footer-logo img{height:1.75rem!important;width:auto;background:#fff;
  padding:0.5rem 0.875rem;border-radius:0 0 0 0.875rem;box-sizing:content-box}
.bc-footer-menu a{color:#dceaf7!important}

/* ── Breadcrumb: slank lijntje linksboven de content ─────────────────────
   OceanWP plaatst de breadcrumb absoluut (bedoeld binnen de oude grijze balk)
   -> resetten zodat hij gewoon in de flow staat. */
.bc-breadcrumb{margin:0 0 1rem;font-size:0.75rem;color:var(--bc-muted)}
.bc-breadcrumb .site-breadcrumbs{position:static!important;transform:none!important;top:auto!important;
  right:auto!important;left:auto!important;float:none!important;width:auto!important;display:block;
  text-align:left!important;padding:0!important;margin:0!important;background:none!important}
.bc-breadcrumb .trail-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.375rem}
.bc-breadcrumb .trail-items li{display:inline-flex;align-items:center}
.bc-breadcrumb a{color:var(--bc-muted);text-decoration:none}
.bc-breadcrumb a:hover{color:var(--bc-blue);text-decoration:underline}
.bc-breadcrumb:empty{display:none}

/* ── Sidebar (gewone pagina's): witte cards met blauwe titels ───────────── */
.content-area,#primary{border-right:0!important}
.sidebar-primary .sidebar-box{background:#fff;border:1px solid var(--bc-line);border-radius:var(--bc-radius);
  box-shadow:var(--bc-shadow);padding:1.125rem;margin-bottom:1.125rem}
.sidebar-primary .widget-title{margin:0 0 0.75rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--bc-deep);font-weight:600;border:0;padding:0}
.sidebar-primary .sidebar-box,
.sidebar-primary .textwidget,
.sidebar-primary .custom-html-widget{font-size:0.875rem;color:var(--bc-muted);line-height:1.55}
.sidebar-primary .sidebar-box a{color:var(--bc-blue);text-decoration:none}
.sidebar-primary .sidebar-box a:hover{text-decoration:underline}
.sidebar-primary .sidebar-box ul{margin:0;padding-left:1.125rem}

/* ── Knoppen: één maat voor de hele site ────────────────────────────────── */
/* Theme My Login 7 rendert de knop als <button class="tml-button">, oudere versies als
   <input type="submit"> — beide meenemen. */
.bc-btn,
.tml .tml-button,
.tml input[type=submit],
.tml .tml-submit-wrap input,
.elementor-widget-login .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;min-width:11rem;
  background:var(--bc-purple)!important;border:1px solid transparent!important;color:#fff!important;
  font-family:var(--bc-font);font-weight:600;letter-spacing:.03em;font-size:0.9375rem;line-height:1.2;
  padding:0.875rem 1.75rem!important;border-radius:var(--bc-radius-signature)!important;cursor:pointer;
  min-height:auto!important;text-decoration:none;
  transition:background-color .14s, box-shadow .14s, transform .05s}
.bc-btn:hover,
.tml .tml-button:hover,
.tml input[type=submit]:hover,
.tml .tml-submit-wrap input:hover,
.elementor-widget-login .elementor-button:hover{background:var(--bc-purple-dark)!important;
  box-shadow:0 0.375rem 1.125rem rgba(174,28,116,.25)}
.bc-btn:active,.tml .tml-button:active,.tml input[type=submit]:active{transform:translateY(1px)}
.bc-btn:focus-visible,.tml .tml-button:focus-visible,
.tml input[type=submit]:focus-visible{outline:none;box-shadow:var(--bc-focus)}

/* ── Aanmelden / registreren (Theme My Login) ───────────────────────────── */
.tml.tml-login,.tml.tml-register,.tml.tml-lostpassword,.tml.tml-resetpass{
  max-width:26rem;margin:2rem auto;background:#fff;border:1px solid var(--bc-line);
  border-radius:var(--bc-radius) var(--bc-radius) var(--bc-radius) 1.75rem;
  box-shadow:var(--bc-shadow);padding:1.875rem 1.75rem}
.tml.tml-register{max-width:36rem}
.tml .tml-field-wrap{margin:0 0 1rem}
.tml label{display:block;font-weight:600;color:var(--bc-ink);font-size:0.875rem;margin:0 0 0.375rem}
.tml input.tml-field,
.tml input[type=text],
.tml input[type=email],
.tml input[type=password]{width:100%;box-sizing:border-box;border:1px solid var(--bc-line);
  border-radius:0.5rem;padding:0.75rem 0.8125rem;min-height:2.875rem;font-size:0.9375rem;
  font-family:var(--bc-font);font-weight:500;background:#fff;color:var(--bc-ink)}
.tml input.tml-field:focus,
.tml input[type=text]:focus,
.tml input[type=email]:focus,
.tml input[type=password]:focus{outline:none;border-color:var(--bc-blue);box-shadow:var(--bc-focus)}
.tml .tml-rememberme-wrap{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--bc-muted)}
.tml .tml-rememberme-wrap label{margin:0;font-weight:500}
.tml .tml-button,.tml input[type=submit],.tml .tml-submit-wrap input{width:100%}
/* De links onder het formulier staan op één regel, net als in de login-widget op de home. */
.tml .tml-links,.tml .tml-action-links{list-style:none;margin:1rem 0 0;padding:0;
  display:flex;justify-content:center;flex-wrap:wrap;gap:0.375rem 0.75rem;
  font-size:0.8125rem;color:var(--bc-muted)}
.tml .tml-links li,.tml .tml-action-links li{margin:0;display:inline-flex;align-items:center}
.tml .tml-links li + li::before,.tml .tml-action-links li + li::before{content:"";width:1px;height:0.75rem;
  background:var(--bc-line);margin-right:0.75rem}
.tml .tml-links a,.tml .tml-action-links a{color:var(--bc-blue)!important;text-decoration:none!important;
  font-size:0.8125rem}
.tml .tml-links a:hover,.tml .tml-action-links a:hover{text-decoration:underline!important}

/* ── Home: Elementor login-widget identiek aan de aanmeldpagina ──────────
   Het is voor de klant hetzelfde formulier, dus zelfde kaartbreedte, zelfde veldafstand,
   knop over de volle breedte en de links gecentreerd eronder. */
.elementor-widget-login .elementor-login{background:#fff;border:1px solid var(--bc-line);
  border-radius:var(--bc-radius) var(--bc-radius) var(--bc-radius) 1.75rem;
  box-shadow:var(--bc-shadow);padding:1.875rem 1.75rem;max-width:26rem;margin:0}
.elementor-widget-login .elementor-field-group{margin-bottom:1rem;padding:0!important}
.elementor-widget-login .elementor-field-type-submit{margin-bottom:0}
.elementor-widget-login .elementor-button{width:100%}
/* Remember me: zelfde toon als op de aanmeldpagina. */
.elementor-widget-login .elementor-remember-me label{display:flex;align-items:center;gap:0.5rem;
  font-weight:500;font-size:0.875rem;color:var(--bc-muted)}
/* De links onderaan: zelfde kleur, zelfde volgorde en zelfde afstand als op de aanmeldpagina.
   Elementor zet ze standaard grijs en met "Lost your password?" eerst. */
.elementor-widget-login .elementor-field-group:has(.elementor-lost-password){display:flex;
  align-items:center;justify-content:center;gap:0.75rem;margin-top:1rem;margin-bottom:0}
.elementor-widget-login .elementor-register{order:0}
.elementor-widget-login .elementor-login-separator{order:1}
.elementor-widget-login .elementor-lost-password{order:2}
.elementor-widget-login .elementor-lost-password,
.elementor-widget-login .elementor-register{color:var(--bc-blue)!important;text-decoration:none!important;
  font-size:0.8125rem}
.elementor-widget-login .elementor-lost-password:hover,
.elementor-widget-login .elementor-register:hover{text-decoration:underline!important}
.elementor-widget-login .elementor-login-separator{color:var(--bc-line);margin:0;font-size:0.8125rem}
.elementor-widget-login .elementor-field-group > label,
.elementor-widget-login .elementor-field-label{font-weight:600;color:var(--bc-ink);font-size:0.875rem;margin-bottom:0.375rem}
/* Elementor zet zijn velden op gewicht 400 en grijze tekst; gelijktrekken met de aanmeldpagina. */
.elementor-widget-login input.elementor-field-textual{width:100%;box-sizing:border-box;
  border:1px solid var(--bc-line)!important;border-radius:0.5rem!important;padding:0.75rem 0.8125rem!important;
  min-height:2.875rem!important;font-size:0.9375rem!important;font-family:var(--bc-font)!important;
  font-weight:500!important;background:#fff;color:var(--bc-ink)!important}
.elementor-widget-login .elementor-field-group > label,
.elementor-widget-login .elementor-field-label{display:block;width:100%}
.elementor-widget-login input.elementor-field-textual:focus{outline:none;border-color:var(--bc-blue)!important;
  box-shadow:var(--bc-focus)!important}

/* ── Mijn offertes ([bl_my_quotes]) ──────────────────────────────────────
   Staat op een gewone pagina (dus buiten .bluecalc): daarom hier, site-breed. */
.bl-quotes-wrap{overflow-x:auto;background:#fff;border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);box-shadow:var(--bc-shadow)}
/* Bevestiging na Email/Book (en de melding wanneer een oude offerte niet te tonen is). */
.bl-quotes-melding{background:#eefaf7;border:1px solid #bfe9df;border-left:4px solid var(--bc-turq,#00bfae);
  border-radius:var(--bc-radius);padding:0.75rem 1rem;margin:0 0 1rem;font-size:0.875rem}
.bl-quote-view{margin-bottom:1.25rem}
/* De bewaarde mail in View: themaranden op tabellen weg; de randen uit de mail zelf staan inline en blijven. */
.bl-quote-view table,.bl-quote-view td,.bl-quote-view th{border:0}
.bl-quote-view td[align=right]{text-align:right}
.bl-my-quotes{width:100%;border-collapse:collapse;font-size:0.875rem}
.bl-my-quotes thead th{background:var(--bc-deep);color:#fff;font-weight:500;font-size:0.6875rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:0.6875rem 0.875rem;white-space:nowrap}
.bl-my-quotes th.num,.bl-my-quotes td.num{text-align:right}
.bl-my-quotes td{padding:0.75rem 0.875rem;border-bottom:1px solid var(--bc-line-soft);vertical-align:middle}
.bl-my-quotes tbody tr{transition:background-color .12s}
.bl-my-quotes tbody tr:hover td{background:#f7fbff}
.bl-my-quotes tbody tr:last-child td{border-bottom:0}
.bl-my-quotes td.ref{font-weight:600;white-space:nowrap}
.bl-my-quotes td.total{font-weight:600;font-variant-numeric:tabular-nums}
.bl-my-quotes .bl-dg{color:#c0262d;font-weight:700}
.bl-my-quotes td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Vier acties (View · Email · Book · Copy) passen niet op één regel in een smalle kolom. Laten
   afbreken i.p.v. buiten de tabel te lopen -- `white-space:normal` i.p.v. flex, zodat de cel een
   gewone tabelcel blijft (Stijn, 12/08). */
.bl-my-quotes td.act{text-align:right;white-space:normal;min-width:9rem}
.bl-my-quotes td.act .bc-btn-sm{min-width:0;margin:0.125rem 0 0.125rem 0.25rem;
  padding:0.375rem 0.625rem!important;font-size:0.75rem}
/* Met vier acties erbij past de tabel niet meer in een kolom met zijbalk: smallere cellen i.p.v.
   horizontaal scrollen. */
.bl-my-quotes th,.bl-my-quotes td{padding-left:0.5rem;padding-right:0.5rem}
.bl-tag{display:inline-block;font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;
  padding:0.25rem 0.625rem;border-radius:999px;background:var(--bc-line-soft);color:var(--bc-muted)}
/* Kleine variant van de knop: past in een tabelrij zonder de rij op te blazen. */
.bc-btn.bc-btn-sm{min-width:5.5rem;font-size:0.8125rem;padding:0.5rem 1rem!important;
  border-radius:0 0 0 1rem!important}

/* ── Elementor-inhoud (home) in de huisstijl ─────────────────────────────
   De pagina zelf is Elementor-content; deze regels trekken enkel kleur en knopvorm
   gelijk zonder aan de opbouw te raken. */
.elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;min-width:11rem;
  background-color:var(--bc-purple)!important;border:1px solid transparent!important;color:#fff!important;
  font-family:var(--bc-font)!important;font-weight:600!important;letter-spacing:.03em;
  font-size:0.9375rem!important;line-height:1.2;padding:0.875rem 1.75rem!important;
  border-radius:var(--bc-radius-signature)!important;
  transition:background-color .14s, box-shadow .14s, transform .05s}
.elementor-widget-button .elementor-button:hover{background-color:var(--bc-purple-dark)!important;
  box-shadow:0 0.375rem 1.125rem rgba(174,28,116,.25)}
.elementor-widget-button .elementor-button:active{transform:translateY(1px)}
/* De tweede titel stond in Elementor-lichtblauw (#6ec1e4): ~2:1 contrast op wit, te licht om te lezen. */
.elementor-widget-heading .elementor-heading-title{color:var(--bc-deep)!important;
  font-family:var(--bc-font)!important;font-weight:600!important}

/* "View as"-balk voor Blue-medewerkers (frcalc-client.php, bl_view_as_balk). Bovenaan de pagina,
   boven de header en onder de WP-adminbalk; niet sticky, zodat ze de vaste header niet overlapt. */
.bl-viewas{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem;margin:0;padding:0.5rem 1rem;
  background:var(--bc-deep-dark);color:#fff;font-family:var(--bc-font);font-size:0.875rem;line-height:1.3}
.bl-viewas__tag{background:var(--bc-turq);color:var(--bc-deep-dark);font-weight:700;font-size:0.75rem;
  letter-spacing:.04em;text-transform:uppercase;padding:0.125rem 0.5rem;border-radius:0.25rem}
.bl-viewas label{color:#fff;margin:0;font-weight:500}
.bl-viewas select{min-height:2rem;padding:0 0.5rem;border-radius:0.375rem;border:1px solid rgba(255,255,255,.35);
  background:#fff;color:var(--bc-ink);font:inherit;width:auto}
.bl-viewas__klant{display:inline-flex;align-items:center;gap:0.375rem;cursor:pointer}
.bl-viewas__klant small{opacity:.75}
.bl-viewas__status{flex-basis:100%;opacity:.8;font-size:0.8125rem}
.bl-viewas :focus-visible{outline:2px solid var(--bc-turq);outline-offset:2px}
@media (min-width:900px){.bl-viewas__status{flex-basis:auto;margin-left:auto}}

/* Intakeformulier [bl_intake_form]: zelfde kaart, velden en knop als de loginpagina (Theme My Login) */
.bl-intake{max-width:36rem;background:#fff;border:1px solid var(--bc-line);
  border-radius:var(--bc-radius) var(--bc-radius) var(--bc-radius) 1.75rem;
  box-shadow:var(--bc-shadow);padding:1.875rem 1.75rem}
.bl-intake h3{margin:0 0 1.25rem}
.bl-intake-form{display:grid;gap:1rem}
.bl-intake-form > label{display:block;font-weight:600;color:var(--bc-ink);font-size:0.875rem;margin:0}
.bl-intake-form input[type=text],.bl-intake-form input[type=email],.bl-intake-form input[type=tel],
.bl-intake-form select{display:block;width:100%;box-sizing:border-box;margin-top:0.375rem;
  border:1px solid var(--bc-line);border-radius:0.5rem;padding:0.75rem 0.8125rem;min-height:2.875rem;
  font-size:0.9375rem;font-family:var(--bc-font);font-weight:500;background:#fff;color:var(--bc-ink)}
.bl-intake-form input:focus,.bl-intake-form select:focus{outline:none;border-color:var(--bc-blue);box-shadow:var(--bc-focus)}
.bl-intake-form .bc-btn{justify-self:start;margin-top:0.25rem}
.bl-intake-fout{color:#c0262d;background:#fdf1f1;border:1px solid #f3c9cb;border-radius:0.5rem;
  padding:0.75rem 0.875rem;margin-bottom:1rem;font-size:0.875rem}
/* Intakeformulier: "Annual shipments" als keuzeknoppen, zoals bij online solutions (Kim, 05/10) */
.bl-intake-keuze{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.bl-intake-keuze legend{border:0;font-weight:600;color:var(--bc-ink);font-size:0.875rem;margin-bottom:0.375rem;padding:0;width:100%}
.bl-intake-keuze label{cursor:pointer;margin:0}
.bl-intake-keuze input{position:absolute;opacity:0;width:1px;height:1px}
.bl-intake-keuze span{display:inline-block;padding:0.375rem 0.75rem;border:1px solid var(--bc-blue);
  border-radius:0.75rem;color:var(--bc-blue);font-size:0.875rem;line-height:1.2}
.bl-intake-keuze input:checked + span{background:var(--bc-blue);color:#fff}
.bl-intake-keuze input:focus-visible + span{box-shadow:var(--bc-focus)}