/* ===== JaachPadtal 3D car (preview) ===== */
.jp3 { --jp-red: #a80404; --jp-red-hot: #d01414; --jp-ok: #1d7a4c; --jp-ink: #1d1e1f; position: relative; width: 100%; min-width: 0; color: #fff; font-family: var(--f-body, "Figtree", system-ui, sans-serif); }
.jp3__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 50% 60%, #26272b 0%, #151517 60%, #0e0e10 100%);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); }
.jp3__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .38s ease; outline: none; }
.jp3__stage.is-fade .jp3__cv, .jp3__stage.is-fade .jp3__pins, .jp3__stage.is-fade .jp3__badge { opacity: 0 !important; }
.jp3__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; z-index: 1; }
.jp3.is-live .jp3__poster { opacity: 0; pointer-events: none; }
.jp3--nogl .jp3__poster { opacity: 1 !important; }
.jp3--nogl .jp3__cv, .jp3--nogl .jp3__pins, .jp3--nogl .jp3__tools, .jp3--nogl .jp3__paints, .jp3--nogl .jp3__hint { display: none; }
.jp3__pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; transition: opacity .38s; }

/* pins */
.jp3-pin { position: absolute; left: 0; top: 0; will-change: transform, opacity; pointer-events: none; }
.jp3-pin.is-hidden { display: none; }
.jp3-pin__btn { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(24,24,26,.82); color: #fff; display: grid; place-items: center; cursor: pointer; pointer-events: auto; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .15s; animation: jp3Pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.jp3-pin__btn::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.jp3-pin__btn svg { width: 16px; height: 16px; }
.jp3-pin__btn:hover { transform: scale(1.12); }
.jp3-pin__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jp3-pin__tick { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--jp-ok); border: 1.5px solid #fff; display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.jp3-pin__tick svg { width: 9px; height: 9px; }
.jp3-pin.is-done .jp3-pin__btn { background: rgba(29,122,76,.92); border-color: #fff; }
.jp3-pin.is-done .jp3-pin__tick { transform: scale(1); }
.jp3-pin.is-active .jp3-pin__btn { background: var(--jp-red-hot); border-color: #fff; animation: jp3Pulse 1s ease-out infinite; }
.jp3-pin__lab { position: absolute; left: 24px; top: -14px; white-space: nowrap; background: #fff; color: var(--jp-ink); font: 700 12px/1 var(--f-body, system-ui); padding: 8px 11px; border-radius: 999px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.jp3-pin__lab small { font-weight: 600; color: #5a6068; }
.jp3-pin.show-lab .jp3-pin__lab, .jp3-pin.is-hover .jp3-pin__lab { opacity: 1; transform: none; }
.jp3-pin.flip .jp3-pin__lab { left: auto; right: 24px; transform: translateX(4px); }
.jp3-pin.flip.show-lab .jp3-pin__lab, .jp3-pin.flip.is-hover .jp3-pin__lab { transform: none; }
@keyframes jp3Pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes jp3Pulse { 0% { box-shadow: 0 0 0 0 rgba(208,20,20,.75); } 100% { box-shadow: 0 0 0 16px rgba(208,20,20,0); } }

/* caption pill */
.jp3__badge { position: absolute; left: 50%; top: 12px; z-index: 3; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(20,20,22,.88); border: 1px solid rgba(255,255,255,.14); color: #e8eaed; font: 600 13px/1.1 var(--f-body, system-ui); white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.4); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.jp3__badge[hidden] { display: none; }
.jp3__badge.is-on { opacity: 1; transform: none; }
.jp3__badge svg { flex: none; width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--jp-ok); }
.jp3__badge b { color: #fff; }

/* buttons on the picture */
.jp3__tools { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; gap: 8px; }
.jp3-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(20,20,22,.72); color: #fff; font: 700 12.5px var(--f-body, system-ui); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.jp3-tool:hover { background: rgba(50,50,54,.85); }
.jp3-tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jp3-tool--xray[aria-pressed="true"] { background: #57c7ff; border-color: #57c7ff; color: #05222f; }
.jp3-tool--play { width: 36px; padding: 0; }
.jp3-tool--play svg:nth-child(2) { display: none; }
.jp3-tool--play[aria-pressed="true"] svg:nth-child(1) { display: none; }
.jp3-tool--play[aria-pressed="true"] svg:nth-child(2) { display: block; }
.jp3__paints { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; gap: 8px; padding: 7px 9px; border-radius: 999px; background: rgba(20,20,22,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s; }
.jp3-dot { position: relative; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.45); cursor: pointer; transition: transform .15s, border-color .15s; }
.jp3-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.jp3-dot:hover { transform: scale(1.15); }
.jp3-dot.is-on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.jp3-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jp3__hint { position: absolute; left: 12px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 7px; margin: 0; font: 600 12px/1 var(--f-body, system-ui); color: #c9cdd2; pointer-events: none; transition: opacity .4s; }
.jp3__hint.is-gone { opacity: 0; }
.jp3.has-info .jp3__hint, .jp3.has-info .jp3__paints { opacity: 0; pointer-events: none; }

/* "what we check here" card */
.jp3__info { position: absolute; left: 12px; top: 58px; z-index: 5; width: min(262px, 46%); padding: 13px 14px 12px; border-radius: 16px; background: rgba(255,255,255,.97); color: var(--jp-ink); box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.jp3__info[hidden] { display: none; }
.jp3__info.is-on { opacity: 1; transform: none; }
.jp3__x { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #5a6068; font-size: 22px; line-height: 1; cursor: pointer; }
.jp3__x:hover { background: #f3f4f6; }
.jp3__x:focus-visible { outline: 3px solid var(--jp-red); outline-offset: 1px; }
.jp3__info-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 30px 0 0; font: 700 14.5px/1.2 var(--f-head, system-ui); }
.jp3__info-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fbeaea; color: var(--jp-red); }
.jp3__info-ic svg { width: 17px; height: 17px; }
.jp3__info-t em { font: 700 10.5px/1 var(--f-body, system-ui); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: #eceef1; color: #4a5058; }
.jp3__info-t em.st-done { background: #e3f3ea; color: var(--jp-ok); }
.jp3__info-t em.st-active { background: #fbeaea; color: var(--jp-red); }
.jp3__info ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.jp3__info li { position: relative; padding-left: 17px; font-size: 12.5px; line-height: 1.35; color: #2b2b2b; }
.jp3__info li::before { content: ""; position: absolute; left: 1px; top: .32em; width: 9px; height: 5px; border-left: 2px solid var(--jp-red); border-bottom: 2px solid var(--jp-red); transform: rotate(-45deg); }
.jp3__info-more { margin: 7px 0 0; font-size: 11.5px; font-weight: 600; color: #6b7178; }

/* area chips under the picture */
.jp3__chips { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jp3-chip { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #d9dce0; font: 600 12.5px/1.15 var(--f-body, system-ui); text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.jp3-chip svg { flex: none; width: 18px; height: 18px; color: #fff; opacity: .85; }
.jp3-chip span { flex: 1; min-width: 0; }
.jp3-chip:hover { background: rgba(255,255,255,.13); }
.jp3-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jp3-chip__tick { flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--jp-ok); display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.jp3-chip__tick svg { width: 10px; height: 10px; opacity: 1; }
.jp3-chip.is-done { border-color: rgba(52,168,110,.55); }
.jp3-chip.is-done .jp3-chip__tick { transform: scale(1); }
.jp3-chip.is-active { border-color: var(--jp-red-hot); background: rgba(208,20,20,.18); }
.jp3-chip.is-active svg { color: #ff8f8f; }
.jp3-chip.is-sel { background: #fff; color: var(--jp-ink); border-color: #fff; }
.jp3-chip.is-sel svg { color: var(--jp-red); opacity: 1; }

/* light page version (Track page): chips on white */
.jp3[data-theme="light"] .jp3-chip { background: #fff; border-color: #e1e4e8; color: #2b2b2b; }
.jp3[data-theme="light"] .jp3-chip svg { color: var(--jp-red); }
.jp3[data-theme="light"] .jp3-chip:hover { background: #f3f4f6; }
.jp3[data-theme="light"] .jp3-chip.is-done { border-color: #9fd3b8; background: #f3faf6; }
.jp3[data-theme="light"] .jp3-chip.is-active { border-color: var(--jp-red-hot); background: #fdf1f1; }
.jp3[data-theme="light"] .jp3-chip.is-sel { background: var(--jp-ink); color: #fff; border-color: var(--jp-ink); }
.jp3[data-theme="light"] .jp3-chip.is-sel svg { color: #fff; }
.jp3[data-theme="light"] .jp3-chip:focus-visible { outline-color: var(--jp-red); }

.jp3.is-xray .jp3__stage { background: radial-gradient(70% 90% at 50% 60%, #12303f 0%, #0b1b24 60%, #080e13 100%); }
.jp3__stage { transition: background .5s; }

@media (max-width: 720px) {
  .jp3__stage { aspect-ratio: 1.12 / 1; border-radius: 16px; }
  .jp3__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .jp3-chip { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 5px; padding: 9px 4px 8px; font-size: 11px; min-height: 64px; }
  .jp3-chip__tick { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; }
  .jp3-chip__tick svg { width: 8px; height: 8px; }
  .jp3__info { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 50%; overflow: auto; }
  .jp3__hint span { max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jp3-tool--xray span { display: none; }
  .jp3-tool--xray { width: 36px; padding: 0; }
  .jp3__badge { top: 10px; left: 10px; translate: 0 0; max-width: calc(100% - 104px); white-space: normal; font-size: 11.5px; line-height: 1.2; padding: 6px 11px 6px 7px; border-radius: 14px; }
  .jp3-pin__lab { font-size: 11.5px; padding: 7px 9px; }
  .jp3-pin__btn { width: 30px; height: 30px; left: -15px; top: -15px; }
}
@media (prefers-reduced-motion: reduce) {
  .jp3-pin__btn, .jp3-pin.is-active .jp3-pin__btn { animation: none; }
  .jp3__cv, .jp3__info, .jp3__badge { transition: none; }
}

/* ===== booking confirmed ===== */
.jp3b { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; isolation: isolate; background: radial-gradient(70% 90% at 50% 62%, #2b2c30 0%, #18181b 55%, #0d0d0f 100%); }
.jp3b__cv, .jp3b__fx, .jp3b__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jp3b__poster { object-fit: cover; z-index: 1; transition: opacity .6s; }
.jp3b.is-live .jp3b__poster { opacity: 0; pointer-events: none; }
.jp3b--nogl .jp3b__poster { opacity: 1 !important; }
.jp3b--nogl .jp3b__cv, .jp3b--nogl .jp3b__fx, .jp3b--nogl .jp3b__stamp { display: none; }
.jp3b--nogl .jp3b__plate { display: block; }
.jp3b__fx { pointer-events: none; z-index: 3; }
.jp3b__stamp { position: absolute; z-index: 4; right: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; background: #1d7a4c; border: 3px solid #fff; display: grid; place-items: center; transform: scale(0); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.jp3b__stamp.is-on { animation: jp3bStamp .7s cubic-bezier(.3,1.6,.5,1) forwards; }
.jp3b__stamp::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #1d7a4c; opacity: 0; }
.jp3b__stamp.is-on::after { animation: jp3bRing 1.1s ease-out .3s 1; }
@keyframes jp3bStamp { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes jp3bRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.jp3b__plate { position: absolute; z-index: 4; left: 12px; bottom: 12px; margin: 0 !important; padding: 7px 12px 8px; border-radius: 10px; background: rgba(20,20,22,.86); border: 1px solid rgba(255,255,255,.14); color: #fff !important; line-height: 1.1; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; pointer-events: none; }
.jp3b__plate.is-on { opacity: 1; transform: none; }
.jp3b__plate small { display: block; font: 700 11px var(--f-body, system-ui); letter-spacing: .1em; text-transform: uppercase; color: #c3c8ce; }
.jp3b__plate b { font: 800 clamp(20px, 4.6vw, 26px) var(--f-head, system-ui); letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .jp3b__stamp.is-on, .jp3b__stamp.is-on::after { animation: none; transform: none; } .jp3b__stamp.is-on::after { display: none; } }

/* chips of the home film */
.jp3[data-mode="hero"] .jp3__chips { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.jp3[data-mode="hero"] .jp3-chip { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 5px; padding: 9px 3px 8px; font-size: 11px; min-height: 62px; }
.jp3[data-mode="hero"] .jp3-chip__tick { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; }
.jp3[data-mode="hero"] .jp3-chip__tick svg { width: 8px; height: 8px; }
.jp3[data-mode="hero"] .jp3-chip span { flex: none; }
@media (max-width: 720px) { .jp3[data-mode="hero"] .jp3__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Release 7.1: the plain number plate (no 3D): large and always readable */
.jp3b__plate--plain { opacity: 1 !important; transform: none !important; padding: 10px 16px 11px; }
.jp3b__plate--plain small { font-size: 11px; }
.jp3b__plate--plain b { font-size: clamp(20px, 5vw, 26px); }

/* Release 9.1: the daytime PDI centre. While the car is open and the camera goes round it, and while the booking form is open,
   the headline steps aside on wide screens so the car has room (the booking card always stays where it is). */
@media (min-width: 981px) {
  .hero--fs.has-film .hero__copy, .hero--fs.has-form .hero__copy { opacity: 0; transform: translateY(-8px); pointer-events: none; }
  .hero--fs.has-film .hero__copy a, .hero--fs.has-form .hero__copy a { pointer-events: none; }
  .hero--fs.has-film .fsbox::after, .hero--fs.has-form .fsbox::after { opacity: .35; transition: opacity .5s ease; }
}
.fsbox::after { transition: opacity .5s ease; }
.jp3[data-mode] .jp3-tool--xray[aria-pressed="true"] { background: #b0070b; color: #fff; border-color: #b0070b; }
@media (prefers-reduced-motion: reduce) { .fsbox::after { transition: none; } }