/* Assen-visual (assen / vering / banden) op de voertuig-detailpagina.
   Losse component-stylesheet i.p.v. inline <style>. Pure CSS/SVG, thema-variabelen. */

/* Eén witte kaart die truck + lijst + legenda samenbindt (plat, geen radius) */
.vehicle-axles__panel { background: #fff; border: 1px solid var(--white-second); padding: 1.5rem; }

/* Schematische truck bovenin: full-width scheidingslijn onder het blok */
.vehicle-axles__truck { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--white-second); }
.vehicle-axles__truck-inner { position: relative; display: inline-flex; align-items: flex-end; padding-bottom: 30px; }
.vehicle-axles__cab { flex: 0 0 auto; width: 30px; height: 26px; background: var(--blue); border-radius: 5px 3px 0 0; }
.vehicle-axles__deck { flex: 0 0 auto; width: 230px; height: 12px; align-self: flex-start; margin-top: 4px; background: var(--blue); border-radius: 0 6px 4px 0; }
.vehicle-axles__nums { position: absolute; left: 8px; right: 0; bottom: 0; display: flex; align-items: center; }
.vehicle-axles__num-wheel { width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); color: var(--orange); font-family: var(--font-secondary); font-weight: 700; font-size: .8rem; font-style: normal; line-height: 20px; text-align: center; }
.vehicle-axles__num-wheel--gap { margin-left: 34px; }

/* Assenlijst */
.vehicle-axles__list { display: flex; flex-direction: column; }
.vehicle-axles__axle { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.75rem; padding: 1.25rem 0; border-top: 1px solid var(--white-second); }
.vehicle-axles__axle:first-child { border-top: 0; padding-top: 0; }
.vehicle-axles__head { display: flex; align-items: center; gap: .875rem; }
.vehicle-axles__badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--font-secondary); font-weight: 700; font-size: .95rem; font-style: normal; line-height: 30px; text-align: center; }
.vehicle-axles__figure { flex: 0 0 auto; width: 190px; }
.vehicle-axles__percents { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 600; color: var(--dark-blue); }
.vehicle-axles__pct { display: inline-flex; gap: 6px; }
.vehicle-axles__pct i { font-style: normal; }
.vehicle-axles__pct--right { justify-content: flex-end; }

/* Specs: nette label/waarde-paren + pill-tags (labels upright, niet schuin) */
.vehicle-axles__specs { flex: 1 1 300px; }
.vehicle-axles__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.vehicle-axles__fact { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.vehicle-axles__fact dt { font-family: var(--font-main); font-style: normal; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--darkest-blue-rgb), .45); }
.vehicle-axles__fact dd { margin: 0; font-size: .875rem; font-weight: 500; color: var(--darkest-blue); }
.vehicle-axles__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; }
.vehicle-axles__tag { display: inline-block; padding: .25rem .625rem; font-size: .7rem; font-weight: 600; line-height: 1.2; color: var(--dark-blue); background: var(--white-soft); border: 1px solid rgba(var(--dark-blue-rgb), .18); border-radius: 999px; }

/* Legenda als voetnoot (label upright) */
.vehicle-axles__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--white-second); }
.vehicle-axles__legend-title { font-family: var(--font-main); font-style: normal; font-weight: 700; font-size: .65rem; letter-spacing: .06em; color: rgba(var(--darkest-blue-rgb), .45); }
.vehicle-axles__legend-list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.vehicle-axles__legend-item { display: flex; align-items: center; gap: .5rem; }
.vehicle-axles__legend-label { font-size: .75rem; color: rgba(var(--darkest-blue-rgb), .7); }

/* Wiel/as-grafiek (gedeeld: legenda + per-as) */
.axle-graphic { display: flex; align-items: center; height: 46px; }
.axle-graphic--compact { height: 26px; }
.axle-graphic__side { display: flex; align-items: center; gap: 3px; }
.axle-graphic__wheel { width: 13px; height: 40px; background: var(--blue); border-radius: 4px; transition: transform .15s ease; }
.axle-graphic--compact .axle-graphic__wheel { width: 8px; height: 22px; }
.axle-graphic--steer .axle-graphic__wheel { transform: rotate(-11deg); }
.axle-graphic__bar { position: relative; flex: 1 1 auto; min-width: 34px; height: 6px; background: var(--blue); }
.axle-graphic--compact .axle-graphic__bar { min-width: 20px; height: 4px; }
.axle-graphic__driven { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.axle-graphic--compact .axle-graphic__driven { width: 14px; height: 14px; }
.axle-graphic__driven circle, .axle-graphic__driven line { stroke: var(--blue); stroke-width: 2; fill: #fff; }
.axle-graphic__driven line { fill: none; }

@media (max-width: 600px) {
	.vehicle-axles__panel { padding: 1.125rem; }
	.vehicle-axles__figure { width: 160px; }
}