/* Blixtflow – bransch: trafikskolor (prefix drv-). Vägkänsla: en vägbana i perspektiv med en mittlinje
   som rullar, filer i kalendern och trafikljusets färger – bara sparsamt, i inkorgens lampor.
   ind-driving.js kör bilen längs vägen när man skrollar, sköter chatboten, mätaren och inkorgens ljus. */
.page-driving { --tl-r: #E5484D; --tl-y: #F5C542; --tl-g: #30A46C; --asphalt: #241030; --wa: #25D366; --ig: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4); }

/* Kanalikoner (delas av flera sektioner) */
.page-driving .lp-split .h2 + .lead { margin-top: 16px; }
.drv-ch { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: var(--primar-ink); }
.drv-ch .ic { width: 16px; height: 16px; }
.drv-ch--instagram { background: var(--ig); }
.drv-ch--whatsapp { background: var(--wa); }
.drv-ch--messenger { background: linear-gradient(45deg, #0a7cff, #a033ff); }
.drv-ch--phone { background: var(--ok); }
.drv-ch--sms { background: var(--primar); }
.drv-ch--chat { color: var(--natt); background: var(--gnista); }
.drv-ch--mail { background: var(--natt-2); }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.drv-hero { background: radial-gradient(60% 60% at 85% 0%, rgba(155, 93, 229, .34), transparent 60%), radial-gradient(40% 40% at 70% 100%, rgba(242, 250, 163, .08), transparent 70%), var(--natt); }
.drv-road { position: absolute; right: 0; bottom: 0; z-index: -1; width: 62%; height: 78%; overflow: hidden; perspective: 520px; -webkit-mask-image: linear-gradient(0deg, #000 35%, transparent 95%); mask-image: linear-gradient(0deg, #000 35%, transparent 95%); }
.drv-road i { position: absolute; left: 50%; bottom: -6%; width: 560px; height: 1400px; margin-left: -280px; transform: rotateX(68deg); transform-origin: 50% 100%; background:
  linear-gradient(180deg, rgba(242, 250, 163, .85) 0 46%, transparent 46%) 50% 0 / 8px 110px repeat-y,
  linear-gradient(90deg, transparent 0 4%, rgba(255, 255, 255, .5) 4% 5.2%, var(--asphalt) 5.2% 94.8%, rgba(255, 255, 255, .5) 94.8% 96%, transparent 96%); }
.motion .drv-road i { animation: drv-roll 1.6s linear infinite; }
.drv-hero .air-title { max-width: 13ch; }
.drv-show { position: relative; display: grid; justify-items: end; padding: 70px 0 96px; }
.drv-phone { position: relative; z-index: 2; width: min(400px, 100%); padding: 16px; border-radius: 30px; color: #fff; background: linear-gradient(180deg, #2A1139, #1B0926); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .2), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(155, 93, 229, .7); }
.motion .drv-phone { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.drv-phone__top { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; border-bottom: 1px solid var(--on-dark-line); }
.drv-phone__top b { font-size: 1rem; }
.drv-phone__top time { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--gnista); background: rgba(242, 250, 163, .1); font-variant-numeric: tabular-nums; }
.drv-phone__top time .ic { width: 13px; height: 13px; }
.drv-lights { display: inline-flex; gap: 4px; padding: 5px 7px; border-radius: 999px; background: #120619; }
.drv-lights i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.drv-lights i:nth-child(3) { background: var(--tl-g); box-shadow: 0 0 8px var(--tl-g); }
.motion .drv-lights i:nth-child(1) { animation: drv-light-r 4s 1s backwards; }
.motion .drv-lights i:nth-child(2) { animation: drv-light-y 4s 1s backwards; }
.motion .drv-lights i:nth-child(3) { animation: drv-light-g 4s 1s backwards; }
.drv-msgs { display: grid; gap: 6px; margin-top: 12px; }
.drv-msgs li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.drv-msgs span { display: grid; min-width: 0; }
.drv-msgs b { font-size: .84rem; }
.drv-msgs small { overflow: hidden; font-size: .8rem; color: var(--on-dark-muted); white-space: nowrap; text-overflow: ellipsis; }
.motion .drv-msgs li { animation: drv-in .6s var(--spring) backwards; animation-delay: calc(.9s + var(--i) * .35s); }
.drv-reply { margin-top: 12px; padding: 12px 14px; border-radius: 18px 18px 6px 18px; color: var(--ink); background: #fff; }
.drv-reply__by { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primar-ink); }
.drv-reply__by .ic { width: 14px; height: 14px; }
.drv-reply__text { margin-top: 4px; font-size: .86rem; line-height: 1.45; }
.motion .drv-reply { animation: fade-up .6s 2.3s var(--ease-out) backwards; }
.drv-lesson { position: absolute; left: -12px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.drv-lesson > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 1.15rem; font-style: normal; font-weight: 900; color: var(--primar-ink); background: #fff; box-shadow: inset 0 0 0 2.5px var(--natt); }
.drv-lesson span { display: grid; }
.drv-lesson small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.drv-lesson b { font-size: .88rem; }
.motion .drv-lesson { animation: drv-slide 1s 3s var(--ease-out) backwards; }
.drv-callc { position: absolute; right: -14px; top: 0; z-index: 3; width: 250px; padding: 12px 14px; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8); }
.drv-callc__top { display: flex; align-items: center; gap: 10px; }
.drv-callc__top > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--ok); }
.drv-callc__top .ic { width: 15px; height: 15px; }
.drv-callc__top > span:last-child { display: grid; }
.drv-callc small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.drv-callc b { font-size: .92rem; font-variant-numeric: tabular-nums; }
.drv-callc__note { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: .76rem; color: var(--muted); }
.drv-callc__note .ic { width: 13px; height: 13px; color: var(--ok); stroke-width: 2.6; }
.motion .drv-callc { animation: chp-pop .7s 3.8s var(--spring) backwards, bob 7s 4.6s ease-in-out infinite; }
.motion .drv-callc__top > span:first-child { animation: air-buzz 1.4s 4.2s ease-in-out 2; }
.drv-bx { position: absolute; left: -10px; top: -30px; z-index: 4; width: 156px; }
@media (min-width: 1000px) { .drv-phone { margin-right: 26px; } }
@media (max-width: 999px) { .drv-show { justify-items: center; } .drv-road { width: 100%; height: 50%; } }
@media (max-width: 599px) {
  .drv-show { padding: 100px 0 190px; }
  .drv-phone { padding: 12px; border-radius: 24px; }
  .drv-callc { right: 0; top: 0; width: 210px; }
  .drv-callc__note { display: none; }
  .drv-lesson { left: 0; bottom: 40px; max-width: 64%; }
  .drv-bx { top: auto; left: auto; right: 4px; bottom: -10px; width: 104px; }
}

/* ==========================================================================
   2. Vägen
   ========================================================================== */
.drv-way { --p: 1; color: #fff; background: linear-gradient(180deg, #321147, #1B0926); }
.drv-way__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .drv-way__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; } }
.drv-way__copy .lead { margin-top: 14px; color: var(--on-dark-muted); }
.drv-meter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.drv-meter p { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.drv-meter b { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--gnista); font-variant-numeric: tabular-nums; }
.drv-meter b.is-bump { animation: bump .45s var(--spring); }
.drv-meter span { font-size: .84rem; color: var(--on-dark-muted); }
.drv-meter--zero b { color: #fff; }
.drv-route { position: relative; height: 640px; }
.drv-way.is-pinned .drv-route { height: calc(100svh - var(--header-h) - 70px); max-height: 720px; }
.drv-route__road { position: absolute; left: 50%; top: -20px; bottom: -20px; width: 112px; margin-left: -56px; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0 4px, var(--asphalt) 4px calc(100% - 4px), rgba(255, 255, 255, .55) calc(100% - 4px)); box-shadow: 0 0 0 10px rgba(255, 255, 255, .03), 0 40px 80px -30px rgba(0, 0, 0, .9); -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.drv-route__dash { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: linear-gradient(180deg, var(--gnista) 0 50%, transparent 50%) 0 calc(var(--p) * 1200px) / 6px 48px repeat-y; opacity: .8; }
.drv-car { position: absolute; left: 50%; z-index: 2; width: 44px; height: 76px; margin-left: -22px; overflow: visible; top: calc((1 - var(--p)) * (100% - 116px) + 20px); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
.drv-route ol { position: absolute; inset: 0; }
.drv-sign { position: absolute; top: calc((1 - var(--at)) * (100% - 76px)); display: flex; align-items: center; width: calc(50% - 64px); }
.drv-sign--r { left: calc(50% + 64px); }
.drv-sign--l { right: calc(50% + 64px); flex-direction: row-reverse; }
.drv-sign__post { flex: none; width: 14px; height: 3px; background: rgba(255, 255, 255, .3); }
.drv-sign__board { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); opacity: .28; transform: scale(.94); filter: grayscale(1); transition: opacity .4s, transform .5s var(--spring), filter .4s, box-shadow .4s; }
.drv-sign--l .drv-sign__board { transform-origin: right center; }
.drv-sign--r .drv-sign__board { transform-origin: left center; }
.drv-sign.is-on .drv-sign__board { opacity: 1; transform: none; filter: none; }
.drv-sign.is-on .drv-sign__post { background: var(--gnista); }
.drv-sign.is-new .drv-sign__board { box-shadow: 0 0 0 3px var(--gnista), 0 18px 40px -18px rgba(0, 0, 0, .9); }
.drv-sign__t { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.drv-sign__t i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; background: var(--primar-ink); }
.drv-sign__t .ic { width: 12px; height: 12px; }
.drv-sign h3 { margin-top: 3px; font-size: .9rem; line-height: 1.25; }
.drv-sign__x { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: .76rem; color: var(--ok); }
.drv-sign__x .ic { flex: none; width: 13px; height: 13px; stroke-width: 2.8; }
@media (max-width: 999px) {
  .drv-way.is-pinned .drv-way__copy .lead { display: none; }
  .drv-way.is-pinned .drv-way__grid { gap: 14px; }
  .drv-way.is-pinned .h2 { font-size: 1.7rem; }
  .drv-way.is-pinned .drv-meter { margin-top: 12px; }
  .drv-way.is-pinned .drv-meter b { font-size: 1.5rem; }
  .drv-way.is-pinned .drv-meter p { padding: 10px 12px; }
  .drv-way.is-pinned .drv-route { height: calc(100svh - var(--header-h) - 290px); min-height: 330px; }
  .drv-route__road { left: 30px; width: 60px; margin-left: 0; }
  .drv-car { left: 60px; width: 30px; height: 52px; margin-left: -15px; top: calc((1 - var(--p)) * (100% - 72px) + 10px); }
  .drv-sign, .drv-sign--l, .drv-sign--r { left: 96px; right: 0; width: auto; flex-direction: row; top: calc((1 - var(--at)) * (100% - 46px)); }
  .drv-sign--l .drv-sign__board { transform-origin: left center; }
  .drv-sign__post { width: 8px; }
  .drv-sign__board { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; }
  .drv-sign__t { flex: none; font-size: .6rem; }
  .drv-sign__t i { display: none; }
  .drv-sign h3 { overflow: hidden; margin: 0; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
  .drv-sign__x { display: none; }
}

/* ==========================================================================
   3. Fråga chatboten
   ========================================================================== */
.drv-ask { display: grid; gap: 8px; margin-top: 24px; }
.drv-ask__label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drv-ask button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; font-weight: 700; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); transition: background-color .2s, color .2s, transform .3s var(--spring), box-shadow .2s; }
.drv-ask button::after { content: "→"; color: var(--primar-ink); transition: transform .3s var(--spring); }
.drv-ask button:hover { transform: translateX(4px); }
.drv-ask button[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: 0 14px 28px -14px rgba(44, 14, 61, .8); }
.drv-ask button[aria-pressed="true"]::after { color: var(--gnista); }
.drv-ask button:focus-visible { outline: 3px solid var(--primar); outline-offset: 2px; }
.drv-site { position: relative; padding-bottom: 210px; }
.drv-site__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 20px 20px 0 0; background: #EDE6F5; }
.drv-site__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D6C9E6; }
.drv-site__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--muted); background: #fff; }
.drv-site__page { position: relative; overflow: hidden; min-height: 300px; padding: 26px 28px; border-radius: 0 0 20px 20px; color: #fff; background: radial-gradient(70% 80% at 100% 0%, rgba(155, 93, 229, .5), transparent 60%), var(--natt); box-shadow: var(--shadow-2); }
.drv-site__logo { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; }
.drv-site__logo b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--primar-ink); background: #fff; box-shadow: inset 0 0 0 2px var(--natt); }
.drv-site__h { max-width: 12ch; margin-top: 26px; font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.drv-site__p { max-width: 22ch; margin-top: 10px; font-size: .86rem; color: var(--on-dark-muted); }
.drv-site__btn { display: inline-block; margin-top: 16px; padding: 8px 16px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.drv-site__lane { position: absolute; left: 0; right: 0; bottom: 26px; height: 4px; background: linear-gradient(90deg, rgba(242, 250, 163, .5) 0 50%, transparent 50%) 0 0 / 46px 4px repeat-x; }
.motion .drv-site__lane { animation: drv-lane 1.4s linear infinite; }
.drv-widget { position: absolute; right: -10px; bottom: 30px; z-index: 2; width: min(350px, 92%); overflow: hidden; border-radius: 24px; background: var(--ljus); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(44, 14, 61, .6); }
.drv-widget__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: var(--natt); }
.drv-widget__head span { display: grid; }
.drv-widget__head b { font-size: .88rem; }
.drv-widget__head small { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--on-dark-muted); }
.drv-widget__head small i { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-g); box-shadow: 0 0 0 3px rgba(48, 164, 108, .25); }
.drv-widget__body { display: grid; gap: 8px; min-height: 236px; align-content: start; padding: 14px; }
.drv-bot, .drv-me { max-width: 88%; padding: 9px 13px; font-size: .86rem; line-height: 1.45; }
.drv-bot { justify-self: start; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.drv-me { justify-self: end; border-radius: 16px 16px 5px 16px; color: #fff; background: var(--primar-ink); }
.drv-bot--a { display: grid; gap: 8px; }
.drv-src { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--primar-ink); background: var(--soft); }
.drv-src .ic { width: 12px; height: 12px; }
.drv-book { display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; color: var(--natt); background: var(--gnista); box-shadow: 0 0 0 1px rgba(44, 14, 61, .15); transition: transform .3s var(--spring); }
.drv-book:hover { transform: translateY(-2px); }
.drv-book:focus-visible { outline: 3px solid var(--primar); outline-offset: 2px; }
.drv-book .ic { width: 14px; height: 14px; }
.drv-book[hidden], .drv-bot--a[hidden], .drv-src[hidden] { display: none; }
.drv-bot--a.is-booked { color: var(--ok); background: var(--ok-soft); box-shadow: none; font-weight: 700; }
.drv-typing { display: inline-flex; justify-self: start; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.drv-typing[hidden] { display: none; }
.drv-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ton-2); animation: drv-dot 1s ease-in-out infinite; }
.drv-typing i:nth-child(2) { animation-delay: .15s; }
.drv-typing i:nth-child(3) { animation-delay: .3s; }
.drv-widget.is-swap .drv-me { animation: fade-up .35s var(--ease-out); }
.drv-widget.is-swap .drv-bot--a { animation: fade-up .45s var(--ease-out); }
.drv-chat__note { position: absolute; left: 0; bottom: 0; max-width: 38%; font-size: .78rem; color: var(--muted); }
@media (max-width: 639px) {
  .drv-site { padding-bottom: 0; }
  .drv-site__page { min-height: 230px; padding: 20px 20px 74px; }
  .drv-site__h { font-size: 1.5rem; }
  .drv-widget { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 8px 0; }
  .drv-chat__note { position: static; max-width: none; margin-top: 14px; }
}

/* ==========================================================================
   4. Instrumentpanelen
   ========================================================================== */
.drv-calc { background: radial-gradient(50% 50% at 100% 100%, rgba(242, 250, 163, .06), transparent 70%), linear-gradient(180deg, var(--natt), #321147); }
.drv-sliders { display: grid; gap: 16px; margin-top: 24px; }
.drv-range p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.drv-range label { font-weight: 700; }
.drv-range output { flex: none; font-size: 1.1rem; font-weight: 800; color: var(--gnista); font-variant-numeric: tabular-nums; }
.drv-range input { --fill: 50%; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.drv-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.drv-range input::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.drv-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 4px var(--gnista); }
.drv-range input::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--gnista); border-radius: 8px; background: #fff; }
.drv-range input:focus-visible { outline: 3px solid var(--gnista); outline-offset: 4px; border-radius: 8px; }
.drv-dash { display: grid; gap: 14px; justify-items: center; }
.drv-dash__panel { position: relative; width: min(460px, 100%); padding: 22px 22px 18px; border-radius: 34px; background: radial-gradient(80% 70% at 50% 30%, #2B1240, #12061B 75%); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .18), inset 0 -20px 40px rgba(0, 0, 0, .5), 0 50px 90px -40px rgba(0, 0, 0, .95); }
.drv-gauge { position: relative; }
.drv-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.drv-gauge__bg, .drv-gauge__val { fill: none; stroke-width: 12; stroke-linecap: round; }
.drv-gauge__bg { stroke: rgba(255, 255, 255, .08); }
.drv-gauge__val { stroke: var(--gnista); stroke-dasharray: 100 100; filter: drop-shadow(0 0 6px rgba(242, 250, 163, .6)); transition: stroke-dashoffset .6s var(--ease-out); }
.drv-gauge__tick { stroke: rgba(200, 168, 242, .5); stroke-width: 1.5; stroke-linecap: round; }
.drv-gauge__tick--big { stroke: #fff; stroke-width: 2.4; }
.drv-gauge__needle { transform-box: view-box; transform-origin: 100px 104px; transition: transform .8s var(--spring); }
.drv-gauge__needle line { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.drv-gauge__needle circle { fill: var(--gnista); stroke: #12061B; stroke-width: 3; }
.drv-gauge__read { display: grid; justify-items: center; margin-top: 10px; text-align: center; }
.drv-gauge__read b { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.drv-gauge__read small { margin-top: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.drv-odo { display: grid; justify-items: center; gap: 6px; margin-top: 16px; }
.drv-odo__digits { display: flex; gap: 4px; padding: 5px; border-radius: 10px; background: #07020B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.drv-odo__digits i { display: grid; place-items: center; width: 28px; height: 36px; border-radius: 5px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.3rem; font-style: normal; font-weight: 700; color: #fff; background: linear-gradient(180deg, #2a2230, #15101a 50%, #2a2230); }
.drv-odo__digits i:last-child { color: var(--natt); background: linear-gradient(180deg, #fff, #e8e2ee 50%, #fff); }
.drv-odo__digits i.is-roll { animation: drv-roll-digit .4s var(--ease-out); }
.drv-odo__label { font-size: .76rem; font-weight: 700; color: var(--on-dark-muted); }
.drv-dash__lamps { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.drv-dash__lamps i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .76rem; font-style: normal; font-weight: 900; color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); }
.drv-dash__lamps .ic { width: 14px; height: 14px; }
.drv-dash__lamps i.is-on { color: var(--natt); background: var(--gnista); box-shadow: 0 0 14px rgba(242, 250, 163, .6); }
.drv-dash__lamps i.is-on:last-child { color: #fff; background: var(--tl-g); box-shadow: 0 0 14px rgba(48, 164, 108, .7); }
.drv-dash__rows { width: min(460px, 100%); padding: 6px 18px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.drv-dash__rows p { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: .88rem; border-bottom: 1px dashed var(--on-dark-line); }
.drv-dash__rows p:last-child { border-bottom: 0; }
.drv-dash__rows b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.drv-dash__total { align-items: baseline; font-weight: 800; }
.drv-dash__total b { font-size: 1.3rem; color: var(--gnista); }
.drv-dash__vs b { color: var(--ton); }
.drv-dash__vs .air-price { font: inherit; color: inherit; }
.drv-calc__note { max-width: 440px; font-size: .78rem; line-height: 1.5; text-align: center; color: var(--on-dark-muted); }

/* ==========================================================================
   5. Lärarnas filer
   ========================================================================== */
.drv-cal { --who: 150px; max-width: 980px; margin-inline: auto; padding: clamp(16px, 3vw, 26px); border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.drv-cal__top { display: grid; grid-template-columns: var(--who) minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 10px; }
.drv-cal__top b { display: inline-flex; align-items: center; gap: 8px; }
.drv-cal__top b .ic { width: 17px; height: 17px; color: var(--primar-ink); }
.drv-cal__hours { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.drv-cal__hours i { font-style: normal; }
.drv-lane { display: grid; grid-template-columns: var(--who) minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; }
.drv-lane__who { display: flex; align-items: center; gap: 10px; }
.drv-lane__who i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: var(--primar-ink); }
.drv-lane:nth-of-type(2) .drv-lane__who i { background: var(--natt); }
.drv-lane:nth-of-type(3) .drv-lane__who i { color: var(--natt); background: var(--ton); }
.drv-lane__who span { display: grid; }
.drv-lane__who b { font-size: .94rem; }
.drv-lane__who small { font-size: .76rem; color: var(--muted); }
.drv-lane__road { position: relative; height: 58px; border-radius: 14px; background: linear-gradient(90deg, #fff 0 50%, transparent 50%) 0 50% / 30px 3px repeat-x, #ECE5F4; box-shadow: inset 0 3px 0 #DCD0EA, inset 0 -3px 0 #DCD0EA; }
.drv-les { position: absolute; top: 8px; bottom: 8px; left: calc(var(--s) / 10 * 100%); width: calc(var(--l) / 10 * 100% - 4px); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; border-radius: 10px; font-size: .78rem; font-weight: 800; color: #fff; background: var(--primar-ink); box-shadow: 0 8px 16px -10px rgba(44, 14, 61, .8); }
.drv-lane:nth-of-type(2) .drv-les { background: var(--natt); }
.drv-lane:nth-of-type(3) .drv-les { color: var(--natt); background: var(--ton); }
.drv-les em { padding: 1px 5px; border-radius: 6px; font-size: .6rem; font-style: normal; color: var(--natt); background: var(--gnista); }
.drv-les--course { color: var(--natt) !important; background: repeating-linear-gradient(-45deg, #F7F3FA 0 8px, #EDE4F7 8px 16px) !important; box-shadow: inset 0 0 0 2px var(--ton-2); }
.drv-les--drag { z-index: 2; color: var(--natt) !important; background: var(--gnista) !important; box-shadow: 0 0 0 2px var(--natt), 0 14px 24px -10px rgba(44, 14, 61, .8); }
.drv-cursor { position: absolute; right: -12px; bottom: -14px; width: 22px; height: 22px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.motion .drv-cal.is-in .drv-les--drag { animation: drv-drag 6s 1s var(--ease-out) infinite backwards; }
.drv-cal__moved { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 14px; font-size: .86rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); }
.drv-cal__moved .ic { width: 16px; height: 16px; stroke-width: 2.8; }
.drv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.drv-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 700; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.drv-chips .ic { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.8; }
@media (max-width: 639px) {
  .drv-cal { --who: 46px; padding: 12px; }
  .drv-lane__who span { display: none; }
  .drv-cal__top b { font-size: .8rem; }
  .drv-cal__top b .ic { display: none; }
  .drv-lane__road { height: 46px; }
  .drv-les { font-size: .6rem; padding: 0 2px; top: 6px; bottom: 6px; }
  .drv-les em { display: none; }
  .drv-les--course { font-size: 0; }
}

/* ==========================================================================
   6. Inkorgen med trafikljus
   ========================================================================== */
.drv-box { overflow: clip; }
.drv-box__lines { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 140px; pointer-events: none; transform: rotate(-6deg); background: linear-gradient(90deg, rgba(242, 250, 163, .12) 0 50%, transparent 50%) 0 0 / 70px 4px repeat-x, linear-gradient(90deg, rgba(255, 255, 255, .06) 0 100%) 0 100% / 100% 3px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, .06) 0 100%) 0 50% / 100% 3px no-repeat; }
.drv-box .wrap { position: relative; }
.drv-legend { display: grid; gap: 8px; margin-top: 24px; }
.drv-legend li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--on-dark-2); }
.drv-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.drv-dot--g { background: var(--tl-g); box-shadow: 0 0 10px var(--tl-g); }
.drv-dot--y { background: var(--tl-y); box-shadow: 0 0 10px var(--tl-y); }
.drv-dot--r { background: var(--tl-r); box-shadow: 0 0 10px var(--tl-r); }
.drv-langs { display: flex; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: 16px; font-size: .88rem; line-height: 1.45; color: var(--on-dark-muted); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.drv-langs .ic { flex: none; width: 18px; height: 18px; color: var(--gnista); }
.drv-ibx { overflow: hidden; border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.drv-ibx__h { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.drv-ibx__h img { padding: 3px; border-radius: 7px; background: var(--ljus); }
.drv-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.drv-row:last-child { border-bottom: 0; }
.drv-tl { display: grid; gap: 3px; padding: 4px; border-radius: 8px; background: #1B0926; }
.drv-tl i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background-color .3s, box-shadow .3s; }
.drv-row[data-state="r"] .drv-tl__r { background: var(--tl-r); box-shadow: 0 0 6px var(--tl-r); }
.drv-row[data-state="y"] .drv-tl__y { background: var(--tl-y); box-shadow: 0 0 6px var(--tl-y); }
.drv-row[data-state="g"] .drv-tl__g { background: var(--tl-g); box-shadow: 0 0 6px var(--tl-g); }
.drv-row__txt { display: grid; min-width: 0; }
.drv-row__txt b { font-size: .9rem; }
.drv-row__txt small { overflow: hidden; font-size: .84rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.drv-row__lbl { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 800; white-space: nowrap; transition: opacity .3s; }
.drv-row__lbl--g { color: var(--ok); background: var(--ok-soft); }
.drv-row__lbl--y { color: #7A5300; background: #FFF3CF; }
.drv-row__lbl--r { color: var(--bad); background: #FDE8E8; }
.drv-row.is-wait .drv-row__lbl { opacity: 0; }
@media (max-width: 479px) { .drv-row { gap: 9px; padding: 11px 12px; } .drv-row .drv-ch { width: 28px; height: 28px; border-radius: 9px; } .drv-row__lbl { font-size: .64rem; padding: 3px 7px; } }
.drv-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes drv-roll { to { background-position: 50% 110px, 0 0; } }
@keyframes drv-lane { to { background-position: -46px 0; } }
@keyframes drv-in { from { opacity: 0; transform: translateX(-30px); } }
@keyframes drv-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes drv-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes drv-roll-digit { from { transform: translateY(-40%); opacity: 0; } }
@keyframes drv-drag { 0%, 12% { left: calc(var(--from) / 10 * 100%); transform: none; } 18% { left: calc(var(--from) / 10 * 100%); transform: translateY(-4px) rotate(-2deg); } 52% { left: calc(var(--s) / 10 * 100%); transform: translateY(-4px) rotate(-2deg); } 58%, 100% { left: calc(var(--s) / 10 * 100%); transform: none; } }
@keyframes drv-light-r { 0%, 30% { background: var(--tl-r); box-shadow: 0 0 8px var(--tl-r); } 31%, 100% { background: rgba(255, 255, 255, .12); box-shadow: none; } }
@keyframes drv-light-y { 0%, 30% { background: rgba(255, 255, 255, .12); } 31%, 60% { background: var(--tl-y); box-shadow: 0 0 8px var(--tl-y); } 61%, 100% { background: rgba(255, 255, 255, .12); box-shadow: none; } }
@keyframes drv-light-g { 0%, 60% { background: rgba(255, 255, 255, .12); box-shadow: none; } }