/* Help Centre (/help) - from Steve's mock-up, 14 Oct 2026. Everything is scoped under .rmc-help. */
.rmc-help{--blue:#1C86B3;--link:#146A8F;--ink:#16222E;--muted:#4A5A68;--line:#C5D3DD;--green:#00AA54;
  background:#F4F8FB;font-family:Nunito,'Trebuchet MS',sans-serif;color:var(--ink);line-height:normal}
.rmc-help *{box-sizing:border-box}
.rmc-help a{color:var(--link)}
.rmc-help a:hover{color:#0E4F6B}
.rmc-help .hc-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rmc-help .hc-wrap{max-width:880px;margin:0 auto;padding:0 16px}
.rmc-help [hidden]{display:none!important}

/* Blue band */
.rmc-help .hc-hero{background:var(--blue);color:#fff}
.rmc-help .hc-hero .hc-wrap{padding:138px 16px 40px;display:flex;flex-direction:column;gap:18px}
.rmc-help .hc-hero-text{display:flex;flex-direction:column;gap:8px}
.rmc-help h1{margin:0;font-family:inherit;font-size:40px;line-height:1.15;font-weight:900;color:#fff}
.rmc-help .hc-hero p{margin:0;font-size:18px;font-weight:600;color:#E4F3FA}
.rmc-help .hc-sbox{position:relative}
.rmc-help .hc-sbox svg{position:absolute;left:18px;top:19px}
.rmc-help #hq{width:100%;height:60px;border:none;border-radius:14px;padding:0 56px 0 52px;font-family:inherit;font-size:18px;font-weight:700;
  color:var(--ink);background:#fff;box-shadow:0 8px 28px rgba(9,40,60,.25);outline:none;-webkit-appearance:none;appearance:none}
.rmc-help #hq:focus{box-shadow:0 8px 28px rgba(9,40,60,.25),0 0 0 3px #FFC20E}
.rmc-help #hq::-webkit-search-cancel-button{display:none}
.rmc-help #hclear{position:absolute;right:8px;top:8px;width:44px;height:44px;border:none;border-radius:10px;background:#EEF3F7;cursor:pointer;
  display:none;align-items:center;justify-content:center}
.rmc-help #hclear svg{position:static}
.rmc-help #hclear.hc-on{display:flex}

/* Popular searches */
.rmc-help .hc-popwrap{display:flex;flex-direction:column;gap:10px}
.rmc-help .hc-popwrap>span{font-size:14px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#E4F3FA}
.rmc-help .hc-pop{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.rmc-help .hc-pop button{height:46px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(255,255,255,.14);color:#fff;
  font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.rmc-help .hc-pop button::before{content:"";width:14px;height:14px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23fff' stroke-width='2.8'/%3E%3Cpath d='M16.5 16.5L21 21' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.rmc-help .hc-pop button:hover{background:rgba(255,255,255,.24)}

/* Topics + list */
.rmc-help .hc-hmain{padding-top:24px;padding-bottom:56px;display:flex;flex-direction:column;gap:20px}
.rmc-help .hc-cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.rmc-help .hc-cat{flex:0 0 auto;height:44px;padding:0 14px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  white-space:nowrap;background:#fff;color:var(--ink);border:1px solid var(--line)}
.rmc-help .hc-cat.hc-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rmc-help .hc-cat i{font-style:normal;opacity:.75}
.rmc-help h2{margin:0;font-family:inherit;font-size:20px;font-weight:900;color:var(--ink)}
.rmc-help .hc-list{display:flex;flex-direction:column;gap:10px}
.rmc-help .hc-card.hc-hide{display:none}
.rmc-help .hc-card{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(22,34,46,.08),0 6px 18px rgba(22,34,46,.05);overflow:hidden;scroll-margin-top:90px}
.rmc-help .hc-row{width:100%;min-height:44px;border:none;background:transparent;padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.rmc-help .hc-thumb{flex:0 0 auto;width:40px;height:71px;border-radius:8px;background:#1F3A4D;position:relative;overflow:hidden;display:block}
.rmc-help .hc-thumb img{width:40px;height:71px;max-width:none;object-fit:cover;display:block;border:0}
/* Dark tint + play icon over the start frame, so it looks the same as the prototype even when the frame is light */
/* Play badge over the thumbnail: a small dark circle with a white triangle. No tint over the whole picture,
   so the cover image (logo / photo) shows in its real colours. */
.rmc-help .hc-tplay{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000' fill-opacity='.5'/%3E%3Cpath d='M9.5 7.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/22px}
.rmc-help .hc-row:hover .hc-tplay{filter:brightness(1.2)}
.rmc-help .hc-thumb-none{height:40px;background:#E6F5FC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%231C86B3' stroke-width='2'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5V14M12 17h.01' fill='none' stroke='%231C86B3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/22px}
.rmc-help .hc-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.rmc-help .hc-qq{font-size:17px;font-weight:800;line-height:1.3}
.rmc-help .hc-sn{font-size:14px;font-weight:600;color:var(--muted);line-height:1.4}
.rmc-help .hc-cl{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--link)}
.rmc-help .hc-chev{flex:0 0 auto;transition:transform .2s}
.rmc-help .hc-open .hc-chev{transform:rotate(180deg)}
.rmc-help .hc-open .hc-sn{display:none}

/* Opened answer: closed by default once the script runs; without the script everything shows */
.rmc-help .hc-body{border-top:1px solid #EEF2F5;padding:18px 16px 20px;display:flex;flex-wrap:wrap;gap:20px}
.rmc-help.hc-js .hc-body{display:none}
.rmc-help.hc-js .hc-open .hc-body{display:flex}
.rmc-help .hc-vid{flex:0 0 auto;width:min(100%,340px)}
.rmc-help .hc-vid video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#1F3A4D;border-radius:14px}
.rmc-help .hc-ans{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.rmc-help .hc-ans-text p,.rmc-help .hc-ans-text li{margin:0 0 10px;font-size:16px;font-weight:600;line-height:1.6;color:#2A3846}
.rmc-help .hc-ans-text p:last-child{margin-bottom:0}
.rmc-help .hc-ans-text ul,.rmc-help .hc-ans-text ol{margin:0 0 10px;padding-left:20px}
.rmc-help .hc-ans>.hc-full{font-size:15px;font-weight:800}

/* Quote box */
.rmc-help .hc-quote{background:#F1F7FB;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rmc-help .hc-quote b{font-size:15px;font-weight:800}
.rmc-help .hc-qf{display:flex;flex-wrap:wrap;gap:8px}
.rmc-help .hc-qf label{display:flex;margin:0}
.rmc-help .hc-reg{flex:1 1 130px}.rmc-help .hc-pc{flex:1 1 110px}
.rmc-help .hc-reg input{width:100%;height:48px;border:2px solid var(--ink);border-radius:8px;background:#FFD500;text-align:center;font-family:inherit;font-size:18px;
  font-weight:900;letter-spacing:1px;color:var(--ink);text-transform:uppercase}
.rmc-help .hc-pc input{width:100%;height:48px;border:2px solid var(--line);border-radius:8px;background:#fff;padding:0 12px;font-family:inherit;font-size:16px;
  font-weight:700;color:var(--ink);text-transform:uppercase}
.rmc-help .hc-qf input.hc-bad{border-color:#D93025;box-shadow:0 0 0 2px rgba(217,48,37,.2)}
.rmc-help .hc-btn-g{flex:1 1 140px;height:48px;padding:0 18px;border:none;border-radius:8px;background:var(--green);color:#fff;font-family:inherit;font-size:16px;
  font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rmc-help .hc-btn-g:hover{background:#00924A}
.rmc-help input.hc-btn-g{-webkit-appearance:none;appearance:none;line-height:48px}
/* Error text from the quote control (controls/FaqQuoteBox.ascx) */
.rmc-help .hc-qerr{display:block;margin-top:8px;font-size:14px;font-weight:700;color:#B3261E}
.rmc-help .hc-qerr:empty{display:none}

.rmc-help .hc-more{align-self:center;height:44px;padding:0 20px;border:2px solid var(--blue);border-radius:10px;background:#fff;color:var(--link);
  font-family:inherit;font-size:15px;font-weight:900;cursor:pointer}

/* No results */
.rmc-help .hc-none{background:#fff;border-radius:14px;padding:24px 20px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 1px 2px rgba(22,34,46,.08),0 6px 18px rgba(22,34,46,.05)}
.rmc-help .hc-none .hc-t{font-size:20px;font-weight:900}
.rmc-help .hc-none p{margin:6px 0 0;font-size:16px;font-weight:600;line-height:1.6;color:#2A3846}
.rmc-help .hc-none p a{font-weight:800}

/* Still need help? */
.rmc-help .hc-help{margin-top:12px;background:#E6F5FC;border:1px solid #BFE4F5;color:var(--ink);border-radius:16px;padding:24px 20px;display:flex;
  flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.rmc-help .hc-help .hc-t{font-size:20px;font-weight:900}
.rmc-help .hc-help .hc-s{font-size:15px;font-weight:600;color:#3F4F5E}
.rmc-help .hc-help .hc-b{display:flex;flex-wrap:wrap;gap:10px}
.rmc-help .hc-help a{height:48px;padding:0 18px;border-radius:10px;font-size:16px;font-weight:900;text-decoration:none;display:flex;align-items:center}
.rmc-help .hc-help .hc-w{background:var(--green);color:#fff!important}
.rmc-help .hc-help .hc-o{background:#fff;border:2px solid var(--blue);color:var(--link)!important}

/* Mobile */
@media (max-width:600px){
  .rmc-help h1{font-size:32px}
  .rmc-help .hc-hero .hc-wrap{padding:82px 16px 28px}
  .rmc-help #hq{font-size:16px}
  .rmc-help .hc-pop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rmc-help .hc-vid{width:100%;max-width:340px;margin:0 auto}
  .rmc-help .hc-help .hc-b,.rmc-help .hc-help a{width:100%;justify-content:center}
}

/* Video brief (Steve, 14 Oct) */
.rmc-help .faq-video{display:block;width:100%;max-width:340px;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px}
.rmc-help .faq-thumb{width:40px;height:71px;max-width:none;object-fit:cover;border-radius:8px;background:#1F3A4D;display:block;border:0}
@media (max-width:600px){.rmc-help .faq-video{max-width:none;max-height:60vh}}

/* Steve, 15 Oct: the list thumbnail shows the Remove My Car logo (wide), so it sits whole on white inside the small tile */
.rmc-help .hc-thumb.hc-thumb-logo{background:#fff;box-shadow:inset 0 0 0 1px #DCE6ED}
.rmc-help .hc-thumb-logo .faq-thumb{object-fit:contain;padding:0 2px 14px;background:transparent;border-radius:8px}
/* play badge moves to the bottom of the tile so it doesn't cover the logo */
.rmc-help .hc-thumb-logo .hc-tplay{inset:auto 0 4px 0;height:14px;background-size:14px}

/* Steve, 15 Oct: the player shows the logo before play (white, thin border, logo 70% wide in the middle).
   The logo is laid over the video and lets taps through to it; it disappears once the video starts, then the player is black. */
.rmc-help .hc-vid{position:relative}
.rmc-help .faq-video.hc-poster-logo{background:#fff;box-shadow:inset 0 0 0 1px #DCE6ED}
.rmc-help .faq-video.hc-poster-logo.hc-playing{background:#000;box-shadow:none}
.rmc-help .hc-vid-logo{position:absolute;left:15%;width:70%;top:45%;transform:translateY(-50%);height:auto;max-width:none;pointer-events:none;border:0}
.rmc-help .faq-video.hc-playing + .hc-vid-logo{display:none}