/* Fuel Europe v3.99.8 — compact, accessible entry and visible load state.
   Pure presentation changes: APIs, station filters, price regulations stay unchanged. */
.fuel-loading{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;align-self:center;padding:5px 9px;border:1px solid color-mix(in srgb,var(--accent2) 35%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--panel) 87%,var(--accent2) 13%);color:var(--text);font-weight:700;font-size:clamp(.66rem,.78vw,.76rem);line-height:1.2}
.fuel-loading[hidden]{display:none!important}
.fuel-loading-spinner{width:12px;height:12px;display:inline-block;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent2) 24%,transparent);border-top-color:var(--accent2);animation:fuel-rotate .8s linear infinite;flex:none}
.fuel-loading.is-error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--panel) 90%,var(--danger) 10%)}
.fuel-loading.is-error .fuel-loading-spinner{animation:none;border-color:var(--danger);position:relative}
.fuel-loading.is-error .fuel-loading-spinner:after{content:'!';position:absolute;inset:-3px;display:grid;place-items:center;color:var(--panel);background:var(--danger);border-radius:50%;font-size:10px}
@keyframes fuel-rotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fuel-loading-spinner{animation:none}.fuel-tools-jumps a{scroll-behavior:auto}}
/* Put price search in first viewport — no giant gap after ticker. */
.wrap{padding-top:clamp(12px,1.7vw,22px)}
.hero{padding:clamp(14px,2.2vw,22px) clamp(15px,2.3vw,26px);margin-bottom:12px;border-radius:22px;overflow:hidden}
.hero h1{font-size:clamp(2rem,3.25vw,3rem);line-height:1.05;letter-spacing:-.04em;margin:.20em 0 .21em}
.hero .eyebrow{font-size:.67rem;letter-spacing:.10em;margin-bottom:0}
.hero p{line-height:1.45;font-size:.91rem}
.hero .country-tabs{display:flex;flex-wrap:nowrap;gap:6px;width:100%;max-width:100%;min-width:0;margin-top:13px;padding:1px 1px 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity}
.hero .country-tabs button{flex:0 0 auto;min-height:36px;min-width:52px;border-radius:9px;padding:6px 10px;scroll-snap-align:start;font-size:.82rem}
.regulation-notice{margin:0 0 11px;padding:9px 12px;font-size:.82rem;border-radius:12px;box-shadow:none;line-height:1.38}
.panel{padding:clamp(13px,1.8vw,18px);border-radius:18px;margin-bottom:12px}
.panel h2{font-size:1.17rem;margin:0 0 8px}
.panel .grid-country{margin-top:10px}
.panel .location-line{margin-top:10px}
.panel .location-line input,.panel .location-line button{min-height:43px}
.panel #fuelFilterWrap{margin-top:12px}
.fuel-advanced{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 58%,var(--panel) 42%);overflow:visible}
.fuel-advanced > summary{padding:11px 13px;cursor:pointer;font-weight:730;color:var(--text);list-style-position:inside;line-height:1.3}
.fuel-advanced > summary:hover{color:var(--accent2)}
.fuel-advanced > summary:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:10px}
.fuel-advanced-content{padding:2px 13px 13px}
.fuel-advanced-content #vehicleProfileMount:not(:empty){margin:9px 0 15px}
.fuel-advanced-content .local-weather{margin:14px 0}
.fuel-advanced-content .grid-filters{margin-top:10px}
.panel .actions{margin-top:12px;flex-wrap:wrap}
.panel #status:empty{display:none}
.panel #status{min-height:0;margin-top:7px}
.summary{margin:0 0 12px;gap:9px}
.summary .stat{padding:11px 15px;border-radius:13px;box-shadow:none;min-width:0}
.summary .stat b{font-size:1.40rem;margin:3px 0 0;overflow-wrap:anywhere}
.summary .stat small,.summary .stat span{font-size:.79rem}
.results-head{margin:14px 0 10px;scroll-margin-top:100px}
.results-head h2{font-size:1.3rem}
/* Group secondary functionality after results, keeping all old IDs and event handlers. */
.fuel-tools-overview{margin:25px 0 10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:12px 15px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.fuel-tools-overview h2{font-size:1.16rem;letter-spacing:-.02em;margin:0 0 3px}
.fuel-tools-overview p{font-size:.82rem;margin:0;color:var(--muted)}
.fuel-tools-jumps{display:flex;gap:7px;flex-wrap:wrap}
.fuel-tools-jumps a{color:var(--accent2);font-size:.8rem;font-weight:700;text-decoration:none;border:1px solid var(--line);background:var(--panel2);padding:7px 10px;border-radius:9px}
.fuel-tools-jumps a:hover,.fuel-tools-jumps a:focus-visible{outline:2px solid color-mix(in srgb,var(--accent2) 40%,transparent);outline-offset:1px}
.fuel-tools-group-label{max-width:1180px;margin:17px auto 5px;color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#routePlanner,#tripEconomics,#countryCompare,#wazeLiveTraffic{scroll-margin-top:110px}
#routePlanner,#tripEconomics,#countryCompare,#wazeLiveTraffic{margin-top:9px;margin-bottom:9px}
/* Cross-device optimization: compact topbar, inputs still touch-sized. */
@media (max-width:980px){.topbar-inner{gap:9px}.brand{gap:7px}.fuel-loading{padding:4px 6px}.summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){
  .brand{min-width:0;flex-wrap:wrap}.fuel-loading{font-size:.69rem}
  .hero{padding:15px 13px}.hero h1{font-size:clamp(1.85rem,8vw,2.3rem)}.hero p{font-size:.86rem}
  .hero .country-tabs{margin-top:10px}
  .summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .summary .stat{padding:9px 8px;border-radius:11px}.summary .stat b{font-size:clamp(.95rem,4vw,1.20rem)}.summary .stat small,.summary .stat span{font-size:.68rem}
  .fuel-tools-overview{padding:11px}.fuel-tools-jumps{width:100%}.fuel-tools-jumps a{flex:1 1 auto;text-align:center}
}
@media (max-width:420px){
  .topbar .brand{column-gap:6px}.fuel-loading{max-width:130px}
  .grid-country{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary .stat span{line-height:1.2}
  .panel .actions button{flex:1 0 40%}
}