/* The vehicle finder (search.js). Loaded by the remap-figures pages and, on demand, by the main site header. Uses the site's colour variables. */
.finder { padding: 22px; margin: 22px 0 0; max-width: 980px; } .finder-h { font-size: 1.1rem; }
.rs { position: relative; } .rs-selects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } @media (max-width: 860px) { .rs-selects { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .rs-selects { grid-template-columns: 1fr; } }
.rs label { display: block; font: 600 0.72rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rs select, .rs input[type=search] { width: 100%; min-height: 50px; padding: 0 14px; font: 500 1rem var(--font-body); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 8px; appearance: none; -webkit-appearance: none; }
.rs select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.rs select:disabled { opacity: 0.5; } .rs input[type=search]:focus, .rs select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(60, 200, 244, 0.18); }
.rs-list { margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); max-height: 340px; overflow-y: auto; } .rs-list:empty { display: none; }
.rs-list button { display: block; width: 100%; text-align: left; min-height: 52px; padding: 10px 14px; font: 500 0.95rem var(--font-body); color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rs-list button small { display: block; color: var(--muted); } .rs-list button:last-child { border-bottom: 0; } .rs-list button:hover, .rs-list button[aria-selected=true] { background: rgba(60, 200, 244, 0.1); }
.rs-note { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
.hdr-search { position: relative; } .hdr-search .rs-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(420px, calc(100vw - 32px)); padding: 14px; background: rgba(12, 16, 23, 0.98); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85); z-index: 130; }
.hdr-search .rs-pop[hidden] { display: none; }
@media (max-width: 480px) { .hdr-search .rs-pop { position: fixed; left: 16px; right: 16px; top: calc(var(--header-h) + 8px); width: auto; } }
.rs-pop { color: var(--text); }

/* number plate box and the car it finds */
.rs-reg { display: flex; gap: 10px; align-items: stretch; margin-bottom: 4px; flex-wrap: wrap; }
.rs input.rs-plate { flex: 1 1 200px; max-width: 280px; min-height: 52px; text-transform: uppercase; text-align: center; font: 700 1.5rem/1 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.12em; color: #111; background: #f7d117; border: 2px solid #111; border-radius: 8px; padding: 0 12px; }
.rs input.rs-plate::placeholder { color: rgba(17, 17, 17, 0.4); }
.rs input.rs-plate:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(60, 200, 244, 0.3); outline: none; }
.rs-reg .btn { min-height: 52px; }
.rs-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); display: grid; gap: 4px; justify-items: start; }
.rs-card strong { font-size: 1.1rem; } .rs-card small { color: var(--muted); }
.rs-mot { display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; border: 1px solid; }
.rs-mot.ok { color: #4fd6a0; background: rgba(79, 214, 160, 0.1); border-color: rgba(79, 214, 160, 0.4); }
.rs-mot.soon { color: #f2b84b; background: rgba(242, 184, 75, 0.12); border-color: rgba(242, 184, 75, 0.5); }
.rs-mot.over { color: #ff6b74; background: rgba(255, 107, 116, 0.12); border-color: rgba(255, 107, 116, 0.5); }
.rs-link { margin: 8px 0 0; padding: 4px 0; background: none; border: 0; color: var(--accent); font: 500 0.9rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.rs-err { color: #ff6b74; }
.rs-car .rs-list { max-height: 300px; }

/* the car pop-up */
.rs-modal-open { overflow: hidden; }
.rs-modal-bg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 8, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rs-fade 0.18s ease-out; }
.rs-modal { width: min(560px, 100%); max-height: min(88vh, 760px); overflow-y: auto; border-radius: 16px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); padding: 22px; outline: none; animation: rs-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rs-m-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.rs-m-eyebrow { display: block; font: 600 0.72rem var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.rs-m-head h2 { margin: 0 0 2px; font-size: 1.35rem; line-height: 1.2; } .rs-m-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.rs-m-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.rs-m-x:hover { border-color: var(--accent); }
.rs-motbox { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid; margin-bottom: 12px; }
.rs-motbox > div { display: grid; gap: 1px; } .rs-motbox strong { font-size: 1rem; } .rs-motbox span:not(.rs-dot) { font-size: 0.9rem; opacity: 0.92; }
.rs-dot { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: #04121a; }
.rs-motbox.ok, .rs-banner.ok { color: #4fd6a0; background: rgba(79, 214, 160, 0.1); border-color: rgba(79, 214, 160, 0.45); } .rs-motbox.ok .rs-dot { background: #4fd6a0; }
.rs-motbox.soon, .rs-banner.soon { color: #f2b84b; background: rgba(242, 184, 75, 0.12); border-color: rgba(242, 184, 75, 0.5); } .rs-motbox.soon .rs-dot { background: #f2b84b; }
.rs-motbox.over, .rs-banner.over { color: #ff6b74; background: rgba(255, 107, 116, 0.12); border-color: rgba(255, 107, 116, 0.55); } .rs-motbox.over .rs-dot { background: #ff6b74; color: #1a0508; }
.rs-motbox.new, .rs-banner.new { color: var(--text-2); background: var(--panel-2); border-color: var(--line-strong); } .rs-motbox.new .rs-dot { background: var(--muted); }
.rs-m-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 107, 116, 0.1); border: 1px solid rgba(255, 107, 116, 0.35); color: #ffb3b8; font-size: 0.92rem; }
.rs-m-note { margin: 0 0 8px; color: var(--text-2); }
.rs-m-list { max-height: 44vh; } .rs-m-body .btn { margin-top: 6px; }
.rs-m-pick { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.rs-m-pick span { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .rs-m-pick small { color: var(--muted); }
.rs-m-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-m-actions .btn { flex: 1 1 200px; }
@media (max-width: 560px) { .rs-modal-bg { align-items: end; padding: 0; } .rs-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); } }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-modal-bg, .rs-modal { animation: none; } }
/* the banner on a figures page, once the visitor has chosen their car */
.rs-banner { display: grid; gap: 10px; margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid; max-width: 640px; }
.rs-banner-car { display: grid; gap: 2px; justify-items: start; } .rs-banner-car strong { color: var(--text); font-size: 1.05rem; }
.rs-banner .rs-motbox { margin: 0; padding: 0; border: 0; background: none; } .rs-banner .rs-m-warn { margin: 0; }