/* Bosstad Tweewielers – Werken bij Bosstad (2026-09-27). Hoort bij novamira-sandbox/bosstad-werken.php.
   Formuliervelden komen uit bosstad-ghl.css (.bs-gf), de strook uit round6/9/11 (.bs-prs--dark), de urenkaart uit bosstad-uren-kaart.css. */

/* ================================================================ functietegels */
.bs-wk{font-family:var(--bs-font-body,Barlow,sans-serif);width:100%}
.bs-wk__kop{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bs-teal,#0F8A7C)}
.bs-wk__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:1100px){.bs-wk__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bs-wk__grid{grid-template-columns:1fr;gap:14px}}

.bs-wk__tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;background:#fff;border:1px solid var(--bs-border,#E3E4E2);border-radius:var(--bs-radius,4px);box-shadow:0 1px 2px rgba(14,18,20,.04);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.bs-wk__tile::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;border-radius:4px 4px 0 0;background:var(--bs-turquoise,#33C7B7);transform:scaleX(.18);transform-origin:left;transition:transform .3s ease}
.bs-wk__tile:hover{border-color:rgba(15,138,124,.35);box-shadow:0 14px 34px rgba(14,18,20,.08);transform:translateY(-2px)}
.bs-wk__tile:hover::before{transform:scaleX(1)}
.bs-wk__ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:6px;border-radius:50%;background:rgba(51,199,183,.14);color:var(--bs-teal,#0F8A7C)}
.bs-wk__ico svg{width:24px;height:24px}
body .bs-wk h3.bs-wk__titel{margin:0;font-family:var(--bs-font-display,Newsreader,serif);font-size:22px;font-weight:400;line-height:1.2;color:var(--bs-ink,#1C2022)}
.bs-wk__tekst{margin:0;flex:1;font-size:15px;line-height:1.6;color:var(--bs-text,#4A5356)}
.bs-wk__cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--bs-teal,#0F8A7C)!important;text-decoration:none!important}
.bs-wk__cta::after{content:"";position:absolute;inset:0}
.bs-wk__pijl{width:15px;height:15px;flex:none;transition:transform .2s ease}
.bs-wk__tile:hover .bs-wk__pijl,.bs-wk__vacitem:hover .bs-wk__pijl{transform:translateX(3px)}
.bs-wk__cta:focus-visible{outline:0}
.bs-wk__tile:focus-within{outline:2px solid var(--bs-teal,#0F8A7C);outline-offset:2px}

/* echte vacatures (als die er ooit zijn) */
.bs-wk__vac{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:36px}
.bs-wk__vacitem{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 26px;background:var(--bs-dark,#1C2022);border-radius:var(--bs-radius,4px);color:#fff!important;text-decoration:none!important}
.bs-wk__vacitem .bs-wk__meta{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--bs-turquoise,#33C7B7)}
.bs-wk__vactitel{font-family:var(--bs-font-display,Newsreader,serif);font-size:24px;line-height:1.2}
.bs-wk__vacintro{font-size:15px;line-height:1.55;color:var(--bs-on-dark-muted,#B9C2C4)}
.bs-wk__vacitem .bs-wk__cta{color:var(--bs-turquoise,#33C7B7)!important}
.bs-wk__vacitem .bs-wk__cta::after{display:none}

/* erkend leerbedrijf */
.bs-wk__leer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 32px;margin-top:24px;padding:28px 30px;border-radius:10px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,rgba(51,199,183,.2) 0%,rgba(51,199,183,0) 55%),linear-gradient(160deg,#17302D 0%,#111A1B 60%,#0E1214 100%);box-shadow:0 18px 44px rgba(14,18,20,.14)}
.bs-wk__leerbadge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:112px;height:112px;border-radius:50%;border:1px solid rgba(51,199,183,.55);box-shadow:inset 0 0 0 6px rgba(51,199,183,.08);text-align:center;color:var(--bs-turquoise,#33C7B7)}
.bs-wk__leerbadge svg{width:30px;height:30px}
.bs-wk__leerbadge span{font-size:10.5px;font-weight:700;letter-spacing:1.4px;line-height:1.3;text-transform:uppercase;max-width:84px}
.bs-wk__leerkop{margin:0 0 6px;font-family:var(--bs-font-display,Newsreader,serif);font-size:26px;line-height:1.2;color:#fff}
.bs-wk__leertxt p:not(.bs-wk__leerkop){margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.76)}
.bs-wk__leer .bs-btn{flex:0 0 auto}
@media(max-width:900px){.bs-wk__leer{grid-template-columns:auto minmax(0,1fr)}.bs-wk__leer .bs-btn{grid-column:1/-1;justify-self:start}}
@media(max-width:600px){.bs-wk__leer{grid-template-columns:1fr;padding:24px 20px}.bs-wk__leerbadge{width:92px;height:92px}.bs-wk__leer .bs-btn{width:100%}}

/* "staat uw functie er niet tussen?" */
.bs-wk__open{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:24px;padding:26px 30px;border-radius:var(--bs-radius,4px);background:var(--bs-surface-soft,#F6F5F2);border:1px solid var(--bs-border,#E3E4E2);box-shadow:inset 3px 0 0 var(--bs-turquoise,#33C7B7)}
.bs-wk__opentxt{flex:1 1 420px;min-width:0}
.bs-wk__openkop{margin:0 0 4px;font-family:var(--bs-font-display,Newsreader,serif);font-size:24px;line-height:1.2;color:var(--bs-ink,#1C2022)}
.bs-wk__opentxt p:not(.bs-wk__openkop){margin:0;font-size:15.5px;line-height:1.6;color:var(--bs-text,#4A5356)}
.bs-wk__open .bs-btn{flex:0 0 auto}
@media(max-width:600px){.bs-wk__open{padding:22px 20px}.bs-wk__open .bs-btn{width:100%}}

/* ================================================================ formulier + stappen */
.bs-soll{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;width:100%;font-family:var(--bs-font-body,Barlow,sans-serif)}
@media(max-width:1024px){.bs-soll{grid-template-columns:1fr;gap:24px}}

.bs-soll__stappen{position:sticky;top:120px;padding:32px 30px;border-radius:10px;color:#fff;background:radial-gradient(130% 90% at 100% 0%,rgba(51,199,183,.18) 0%,rgba(51,199,183,0) 55%),linear-gradient(160deg,#17302D 0%,#111A1B 55%,#0E1214 100%);box-shadow:0 24px 56px rgba(14,18,20,.18)}
@media(max-width:1024px){.bs-soll__stappen{position:static;padding:26px 22px}}
.bs-soll__eyebrow{margin:0 0 18px;font-size:11.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--bs-turquoise,#33C7B7)}
.bs-soll__lijst{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bs-soll__lijst li{position:relative;display:flex;gap:16px;padding:0 0 24px}
.bs-soll__lijst li:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:1px;background:rgba(255,255,255,.16)}
.bs-soll__nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:50%;border:1px solid rgba(51,199,183,.55);font-family:var(--bs-font-display,Newsreader,serif);font-size:18px;color:var(--bs-turquoise,#33C7B7)}
.bs-soll__stap{display:flex;flex-direction:column;gap:4px;padding-top:5px}
.bs-soll__stap strong{font-size:17px;font-weight:600;color:#fff}
.bs-soll__stap span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
.bs-soll__liever{margin:4px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.bs-soll__liever a{color:#fff!important;text-decoration:none!important;border-bottom:1px solid var(--bs-turquoise,#33C7B7)}

.bs-soll__card{box-shadow:0 1px 2px rgba(14,18,20,.04),0 18px 44px rgba(14,18,20,.06)}
.bs-soll__file input[type=file]{width:100%;font:inherit;font-size:15px;color:var(--bs-text,#4A5356);padding:10px;border:1px dashed #C9CCCA;border-radius:var(--bs-radius-sm,2px);background:var(--bs-surface-soft,#F6F5F2);cursor:pointer}
.bs-soll__file input[type=file]::file-selector-button{margin-right:14px;padding:10px 16px;font:inherit;font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--bs-ink,#1C2022);background:#fff;border:1px solid #C9CDCB;border-radius:2px;cursor:pointer}
.bs-soll__file input[type=file]:hover{border-color:var(--bs-teal,#0F8A7C)}
.bs-soll__file input[aria-invalid=true]{border-color:#C0392B}
.bs-gf__privacy a{color:var(--bs-teal,#0F8A7C)}

/* ================================================================ strook boven de footer */
.bs-wkl .bs-prs__inner{align-items:center;gap:40px 72px}
.bs-wkl__txt{flex:1 1 440px}
.bs-wkl__punten{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.bs-wkl__punten li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff}
.bs-wkl__punten svg{width:19px;height:19px;flex:none;color:var(--bs-turquoise,#33C7B7)}
.bs-wkl__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bs-wkl__act{flex:0 1 480px;min-width:0;display:flex;flex-direction:column;gap:10px}
.bs-wkl__lbl{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bs-on-dark-muted,#B9C2C4)}
body .bs-wkl .bs-wkl__select{width:100%;border-color:transparent;margin-bottom:6px}
.bs-wkl__kaart[hidden]{display:none}
.bs-wkl .bs-uren--vestiging .bs-uren__card{border-color:rgba(255,255,255,.14);box-shadow:0 24px 56px rgba(0,0,0,.28)}
body .bs-wkl .bs-uren.bs-uren--vestiging .bs-uren__note{color:rgba(255,255,255,.55)!important}
@media(max-width:1024px){.bs-wkl__act{flex:1 1 100%}}
@media(max-width:600px){.bs-wkl__btns .bs-btn{width:100%}}