/* pp-app: platform-look mockups (my.parcelparcel.com) voor de website.
   Ingevoegd door tools/platform_mockups.py; pas de HTML daar aan, niet in de pagina's.
   Tokens 1-op-1 overgenomen uit de platform-CSS (Bootstrap-variabelen), 29 okt 2026.
   Alles hangt onder .ppa zodat site-CSS er niet doorheen lekt. */
@font-face{font-family:TTNorms;font-weight:400;font-display:swap;src:url("/uploads/v10/fonts/TTNorms-regular.woff2") format("woff2"),url("/uploads/v10/fonts/TTNorms-regular.woff") format("woff")}
@font-face{font-family:TTNorms;font-weight:700;font-display:swap;src:url("/uploads/v10/fonts/TTNorms-bold.woff2") format("woff2"),url("/uploads/v10/fonts/TTNorms-bold.woff") format("woff")}

.ppa{
  --ink:#202020; --muted:#697586; --line:#e6e8ec;
  --g100:#fafafa; --g200:#f2f2f2; --g300:#e4e4e4; --g500:#b7b7b7; --g600:#909090; --g700:#585858;
  --blue:#1881eb; --blue600:#1368e7; --blue100:#d1e6fb; --blue200:#bbddff;
  --yellow:#ffc329; --yellow100:#fff3d4; --yellow300:#ffdb80;
  --green:#66c45d; --green100:#e0f3df; --greenTxt:#366d3a; --greenPill:#ddefde;
  --red:#fe4c4c; --red100:#ffdbdb;
  font-family:TTNorms,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:var(--ink); text-align:left;
  -webkit-font-smoothing:antialiased; box-sizing:border-box;
}
.ppa *,.ppa *::before,.ppa *::after{box-sizing:border-box;margin:0}
/* de homepage zet Poppins met !important op alles (.pp-home *); de mockups houden het platformfont */
.pp-home .ppa,.pp-home .ppa *,.ppa,.ppa *{font-family:TTNorms,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}
.ppa img{display:block;max-width:none;border-radius:0}
.ppa svg{flex:0 0 auto}

/* schaal: render op ware grootte, pp-app.js zet zoom zodat het in de kolom past */
.ppa-fit{width:100%;display:flex;justify-content:center}
.ppa-fit>.ppa{zoom:var(--ppa-z,.6);flex:0 0 auto}
.ppa-cap{display:block;margin-top:10px;font-size:12.5px;line-height:1.4;color:#4a5b70;text-align:center}
.ppa-cap--onblue{color:rgba(255,255,255,.8)}
.ppa-zoom-90{zoom:.9}.ppa-zoom-80{zoom:.8}.ppa-zoom-70{zoom:.7}.ppa-zoom-60{zoom:.6}

/* venster */
.ppa-win{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 60px rgba(5,18,53,.18);border:1px solid rgba(5,18,53,.08)}
.ppa-chrome{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;background:#f3f4f6;border-bottom:1px solid var(--line)}
.ppa-dots{display:flex;gap:7px}.ppa-dots i{width:11px;height:11px;border-radius:50%;background:#d6d9de}
.ppa-dots i:nth-child(1){background:#ff5f57}.ppa-dots i:nth-child(2){background:#febc2e}.ppa-dots i:nth-child(3){background:#28c840}
.ppa-url{flex:1;max-width:420px;margin:0 auto;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--muted)}

/* app-shell */
.ppa-app{display:grid;grid-template-columns:236px minmax(0,1fr);background:var(--g200);min-height:560px}
.ppa-side{background:#fff;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px}
.ppa-logo{display:flex;align-items:center;gap:8px;height:32px;margin:0 4px 14px}
.ppa-logo img{height:26px;width:auto}
.ppa-cta{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:8px;background:var(--blue600);color:#fff;font-size:14.5px;font-weight:700;box-shadow:0 1px 2px rgba(19,104,231,.2),0 4px 10px rgba(19,104,231,.18);margin-bottom:12px}
.ppa-nav{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--muted)}
.ppa-nav.is-on{background:rgba(19,104,231,.1);color:var(--blue600)}
.ppa-acct{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--g200);margin-top:8px}
.ppa-acct i{width:30px;height:30px;border-radius:6px;background:var(--blue600);color:#fff;font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ppa-acct b{display:block;font-size:13.5px;line-height:1.2}.ppa-acct span{font-size:11.5px;color:var(--muted)}
.ppa-nav .ppa-badge{margin-left:auto}
.ppa-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.ppa-main{padding:28px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.ppa-main--full{grid-template-columns:minmax(0,1fr)}
/* ingeklapte zijbalk (knop naast het logo op het platform) */
.ppa-app--mini{grid-template-columns:68px minmax(0,1fr)}
.ppa-app--mini .ppa-side{padding:18px 12px;align-items:center}
.ppa-app--mini .ppa-logo{width:28px;overflow:hidden;margin:0 0 14px}
.ppa-app--mini .ppa-logo img{height:26px;max-width:none}
.ppa-app--mini .ppa-cta,.ppa-app--mini .ppa-nav{width:40px;padding:0;justify-content:center}
.ppa-app--mini .ppa-acct{padding:6px;background:none}
.ppa-crop{overflow:hidden;position:relative}
.ppa-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(rgba(242,242,242,0),var(--g200))}

/* kaarten */
.ppa-card{background:#fff;border-radius:32px;padding:32px}
.ppa-card--md{border-radius:16px;padding:24px}
.ppa-card--sm{border-radius:16px;padding:16px}
.ppa-card--gray{background:var(--g200)}
.ppa-panel{background:#fff;border-radius:16px;padding:18px 18px 14px;box-shadow:0 2px 4px rgba(16,24,40,.06)}
.ppa-panel--tip{background:var(--yellow100);border:1px solid var(--yellow300)}
.ppa-h3{font-size:28px;font-weight:700;line-height:1.2}
.ppa-h4{font-size:20px;font-weight:700;line-height:1.25}
.ppa-h5{font-size:17px;font-weight:700;line-height:1.3}
.ppa-sub{font-size:15px;color:var(--ink)}
.ppa-small{font-size:13px}.ppa-xs{font-size:12px}
.ppa-muted{color:var(--muted)}.ppa-blue{color:var(--blue)}.ppa-req{font-size:13px;color:#f48f8f}
.ppa-row{display:flex;align-items:center;gap:10px}
.ppa-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ppa-stack{display:flex;flex-direction:column}
.ppa-gap-4{gap:4px}.ppa-gap-8{gap:8px}.ppa-gap-12{gap:12px}.ppa-gap-16{gap:16px}.ppa-gap-24{gap:24px}

/* formulier */
.ppa-label{font-size:16px;font-weight:700}
.ppa-input{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;background:var(--g200);font-size:16px;color:var(--ink)}
.ppa-input.is-ph{color:var(--g600)}
.ppa-input .ppa-x{margin-left:auto;color:var(--g600);font-size:14px}
.ppa-unit{display:grid;grid-template-columns:1fr auto;align-items:center}
.ppa-seg{display:flex;border-radius:12px;overflow:hidden}
.ppa-seg>span{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;background:var(--g200);font-weight:700;font-size:16px;border-right:1px solid #fff}
.ppa-seg>span:last-child{border-right:0}
.ppa-seg>span.is-on{background:var(--blue100);color:var(--blue600)}
.ppa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;font-weight:700;font-size:16px;border:1px solid transparent;white-space:nowrap}
.ppa-btn--warn{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.ppa-btn--pri{background:var(--blue);border-color:var(--blue);color:#fff}
.ppa-btn--sm{height:auto;padding:6px 10px;border-radius:8px;font-size:14px}
.ppa-btn--sec{background:var(--g200);border-color:#808080;color:var(--ink)}
.ppa-btn--block{width:100%}
.ppa-note{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:12px;background:var(--yellow100);font-size:14px;line-height:1.45}
.ppa-note--green{background:var(--green100)}
.ppa-note--green .ppa-ic{color:var(--greenTxt)}

/* verzendopties */
.ppa-opt{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;border:2px solid transparent}
.ppa-opt.is-sel{border-color:var(--blue)}
.ppa-opt-head{display:flex;align-items:center;gap:14px}
.ppa-carrier{width:72px;height:40px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ppa-carrier img{max-width:72px;max-height:36px;width:auto;height:auto}
.ppa-svc{font-size:18px;font-weight:400}
.ppa-price{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.ppa-price s{font-size:13px;color:var(--g600)}
.ppa-price b{font-size:22px;font-weight:700;color:var(--blue)}
.ppa-price b small{font-size:11px;font-weight:400;color:var(--muted);margin-left:3px}
.ppa-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font-size:12.5px;font-weight:700;background:var(--greenPill);color:var(--greenTxt)}
.ppa-pill--blue{background:var(--blue100);color:var(--blue600)}
.ppa-pill--yellow{background:var(--yellow100);color:#9a6400}
.ppa-pill--gray{background:var(--g200);color:var(--g700)}
.ppa-pill--red{background:var(--red100);color:#b42318}
.ppa-acc{font-size:12px;color:var(--greenTxt);font-weight:700}
.ppa-opt-body{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--g300);padding-top:12px;gap:16px}
.ppa-opt-body>div+div{border-left:1px solid var(--g300);padding-left:16px}
.ppa-select{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px;border:1px solid var(--g500);border-radius:8px;font-size:14px;margin:4px 0}
.ppa-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--g500);flex:0 0 auto}
.ppa-radio.is-on{border:6px solid var(--blue)}

/* verzendoptie, opgeschoonde variant: één regel per optie, details + knop alleen bij de gekozen optie */
/* Verzendoptie-kaart, 1-op-1 met .card.bg-gray-200 op het platform */
.ppa-sc{background:var(--g200);border-radius:16px;padding:16px;color:var(--ink)}
.ppa-sc.is-sel{background:var(--blue100);color:var(--blue)}
.ppa-sc-head{display:flex;align-items:center;gap:8px;padding-bottom:16px}
.ppa-sc-head img{width:72px;height:60px;object-fit:contain;flex:0 0 auto}
.ppa-sc-svc{font-size:20px;line-height:1;margin-left:4px;display:flex;align-items:center;gap:8px}
.ppa-sc-svc svg{width:15px;height:15px}
.ppa-sc-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.ppa-sc-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.ppa-sc-price>span{display:flex;align-items:baseline;white-space:nowrap}
.ppa-sc-price b{white-space:nowrap;font-size:24px;font-weight:700;color:var(--blue)}
.ppa-sc-price s{font-size:13px;color:var(--g600);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ppa-sc-vat{font-size:12px;font-weight:500;color:var(--ink);margin-left:4px}
.ppa-sc-chev{color:var(--blue);display:flex}
.ppa-vr{width:1px;align-self:stretch;background:var(--g500);margin:0 8px}
.ppa-sc.is-sel .ppa-sc-right .ppa-vr{background:var(--blue)}
.ppa-sbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font-size:14px;font-weight:700;border:1px solid var(--blue);white-space:nowrap;line-height:1.5}
.ppa-sbtn--pri{background:var(--blue);color:#fff}
.ppa-sbtn--out{background:transparent;color:var(--blue)}
.ppa-sc-body{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:0 16px}
.ppa-sc-body>i{background:var(--g500)}
.ppa-sc-f{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.2}
.ppa-sc-f b{font-weight:700}
.ppa-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font:700 11px/1 serif;font-style:italic;vertical-align:-2px;margin-left:4px}
.ppa-sc-sel{white-space:nowrap;max-width:220px;display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid var(--g500);color:var(--ink)}
.ppa-sc.is-sel .ppa-sc-sel{background:var(--blue100);border-color:var(--blue);color:var(--blue)}
.ppa-sc-date{font-size:20px;line-height:1.25}
/* Zijpaneel "Zendingen" (aside-shipments) */
.ppa-ship-aside{background:#fff;border-radius:16px;padding:16px;font-size:14px;line-height:1.35}
.ppa-ship-aside h6{font-size:14px;font-weight:700;margin:0 0 4px}
.ppa-sa-head{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--g500)}
.ppa-sa-head img{width:60px;height:50px;object-fit:contain}
.ppa-sa-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--g500)}
.ppa-sa-grid>div{padding:12px 8px 12px 0}
.ppa-sa-grid>div+div{border-left:1px solid var(--g500);padding-left:10px}
.ppa-sa-timer{display:flex;align-items:center;gap:8px;padding:12px 0 8px}
.ppa-sa-timer .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.ppa-sa-timer .cd{margin-left:auto;font-weight:700;background:var(--g200);border-radius:8px;padding:4px 8px;letter-spacing:.5px}
.ppa-sa-total{display:flex;justify-content:space-between;color:var(--blue);font-size:16px;padding-top:8px;border-top:1px solid var(--g500)}

/* HS-code hulp (douanestap) */
.ppa-hs{position:relative}
.ppa-hs .ppa-input.is-focus{box-shadow:0 0 0 2px var(--blue)}
.ppa-hspop{position:absolute;left:calc(100% + 14px);top:-2px;width:400px;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(5,18,53,.20),0 0 0 1px rgba(5,18,53,.06);padding:14px;z-index:2;display:flex;flex-direction:column;gap:10px}
.ppa-hspop-note{font-size:12.5px;line-height:1.4;color:#fff;background:var(--blue);border-radius:8px;padding:8px 10px}
.ppa-hsrow{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;line-height:1.35}
.ppa-hsrow code{font-family:inherit;font-weight:700;color:var(--blue600);white-space:nowrap;min-width:78px}
.ppa-hsrow.is-path{color:var(--muted)}
.ppa-hsrow.is-hit{background:var(--blue100)}
.ppa-hsrow .ppa-btn{margin-left:auto;height:28px;padding:0 10px;font-size:13px;border-radius:8px}

/* checklist (Waarom-paneel) */
.ppa-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4}
.ppa-check .ppa-ic{width:22px;height:22px;border-radius:6px;background:var(--blue100);color:var(--blue600);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ppa-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue100);color:var(--blue600);font-size:12px;font-weight:700}

/* lijstpagina's (Mijn zendingen, Facturen): overgenomen uit het ingelogde platform */
.ppa-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ppa-pagehead h4{font-size:40px;font-weight:700;line-height:1.2}
.ppa-pagehead p{font-size:16px;color:rgba(32,32,32,.75)}
.ppa-listcard{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.04);overflow:hidden}
.ppa-toolbar{display:flex;align-items:center;gap:10px;padding:20px 20px 12px}
.ppa-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:8px;border:1px solid rgba(183,183,183,.45);background:#fff;color:var(--g600);font-size:14.4px;flex:0 1 220px}
.ppa-tool{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:8px;border:1px solid rgba(183,183,183,.45);background:#fff;font-size:14px;font-weight:500;color:var(--ink)}
.ppa-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(242,242,242,.85);border:1px solid rgba(183,183,183,.25)}
.ppa-toggle span{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500}
.ppa-toggle span.is-on{background:#fff;color:var(--blue600);font-weight:700;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.ppa-table{width:100%;border-collapse:collapse;font-size:15px;color:#000}
.ppa-table th{font-size:14px;font-weight:700;color:#495057;text-align:left;padding:12px 16px;border-bottom:1px solid #e9ecef;white-space:nowrap}
.ppa-table td{padding:14px 16px;vertical-align:middle;white-space:nowrap}
.ppa-table th:first-child,.ppa-table td:first-child{padding-left:24px}
.ppa-table tbody tr:nth-child(even) td{background:var(--g100)}
.ppa-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ppa-table .c{text-align:center}
.ppa-status{display:inline-block;padding:4px 8px;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;line-height:1;white-space:nowrap}
.ppa-rpill{display:inline-block;padding:4px 8px;border-radius:800px;font-size:12px;line-height:1}
.ppa-rpill--open{background:var(--yellow);color:var(--ink)}
.ppa-rpill--paid{background:var(--green);color:#fff}
.ppa-outbtn{display:inline-flex;align-items:center;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--g500);background:#fff;font-size:13.5px;white-space:nowrap}
.ppa-route{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:14px}
.ppa-flag{display:inline-block;width:22px;height:16px;border-radius:2px;overflow:hidden;vertical-align:-3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ppa-ship{display:inline-block;height:26px;width:auto}

/* douanestap: item-kaart */
.ppa-radio-row{display:flex;align-items:center;gap:10px;font-size:15px}
.ppa-item{background:var(--g200);border-radius:16px;padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}
.ppa-item-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#0a345e}
.ppa-item .ppa-input{background:#fff;height:38px;padding:0 12px;font-size:15px}
.ppa-item .ppa-label{font-size:15px}
.ppa-total{display:flex;justify-content:flex-end;padding:10px 16px;border-radius:12px;background:var(--g200);font-size:15px;font-weight:700}
.ppa-sum{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px;box-shadow:0 2px 4px rgba(16,24,40,.06)}
.ppa-sum hr{border:0;border-top:1px solid var(--g300)}

/* stappen (douaneassistent) */
.ppa-steps{display:flex;gap:6px}
.ppa-steps i{flex:1;height:5px;border-radius:3px;background:var(--g300)}
.ppa-steps i.is-on{background:var(--blue)}

@media (max-width:760px){
  .ppa-app{grid-template-columns:1fr}
  .ppa-side{display:none}
  .ppa-main{grid-template-columns:1fr;padding:16px}
  .ppa-main>aside{display:none}
  .ppa-card{padding:20px;border-radius:20px}
}

/* in de site: hele mockup is een link naar het platform, zonder linkstijl */
a.ppa-link,a.ppa-link:hover{display:block;width:100%;text-decoration:none!important;color:inherit;border:0!important;box-shadow:none!important}
a.ppa-link .ppa-fit>.ppa{transition:transform .25s ease,filter .25s ease}
a.ppa-link:hover .ppa-fit>.ppa{transform:translateY(-3px);filter:drop-shadow(0 12px 24px rgba(5,18,53,.12))}