/* Dedicated Fuel Finder components; shared PlateScan tokens supply the brand. */
.fuel-page {max-width: 1120px; padding-top: 2rem; padding-bottom: 2.5rem; color: var(--color-dark);}
.fuel-page .fuel-icon {width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle;}
.fuel-intro {margin-bottom: 1.4rem;}
.fuel-eyebrow {display: block; color: var(--color-primary-hover); font-size: .72rem; font-weight: 800; letter-spacing: .12em;}
.fuel-intro h1 {font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; margin: .5rem 0 .6rem;}
.fuel-intro h1 span {color: var(--color-primary);}
.fuel-intro p {color: var(--color-text-muted); font-size: .95rem; margin: 0;}
.fuel-search {background: var(--color-dark); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: 0 5px 15px color-mix(in srgb, var(--color-dark) 8%, transparent);}
.fuel-search-heading {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; color: var(--color-border); font-size: .65rem; letter-spacing: .09em;}
.fuel-tool-name {display: inline-flex; align-items: center; gap: .5rem; color: var(--color-surface); font-weight: 750; font-size: .9rem; letter-spacing: 0;}
.fuel-tool-name .fuel-icon {color: var(--color-registration);}
.fuel-search-controls {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(100px, .55fr) auto; gap: .7rem; align-items: start;}
.fuel-field {min-width: 0;}
.fuel-field label {display: flex; align-items: center; gap: .35rem; color: var(--color-border); font-size: .75rem; font-weight: 650; margin: 0 0 .35rem;}
.fuel-field label .fuel-icon {width: 15px; height: 15px; color: var(--color-border);}
.fuel-field input, .fuel-field select {display: block; width: 100%; height: 48px; border: 1px solid var(--color-border); border-radius: 7px; padding: .65rem .75rem; background-color: var(--color-background); color: var(--color-dark); font-size: .9rem; font-weight: 650; line-height: 1.3; transition: border-color 160ms ease, background-color 160ms ease;}
.fuel-field select {appearance: auto; padding-right: 2rem;}
.fuel-field input::placeholder {font-weight: 400; color: var(--color-text-muted);}
.fuel-field input:hover, .fuel-field select:hover {background-color: var(--color-surface); border-color: var(--color-primary);}
.fuel-page :is(button, a):focus-visible {outline: 3px solid var(--color-primary); outline-offset: 3px;}
.fuel-field [aria-invalid="true"] {border-color: #fca5a5;}
.fuel-button {display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 48px; margin-top: 1.55rem; padding: .65rem 1rem; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 7px; color: var(--color-surface); font-size: .85rem; font-weight: 750; white-space: nowrap; transition: background-color 160ms ease;}
.fuel-button:hover {background: var(--color-primary-hover); border-color: var(--color-primary);}
.fuel-search-help {color: var(--color-border); font-size: .74rem; line-height: 1.5; margin: .75rem 0 0;}
.fuel-error {color: #fecaca; font-size: .8rem; margin-top: .45rem;}
.fuel-error ul {list-style: none; padding: 0; margin: 0;}
.fuel-results-heading {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: .8rem 1rem; align-items: center; margin: 1.65rem 0 .75rem;}
.fuel-results-heading h2 {font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem;}
.fuel-result-meta {display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--color-text-muted); font-size: .75rem;}
.fuel-result-meta > span {display: inline-flex; align-items: center; gap: .3rem;}
.fuel-result-meta .fuel-icon {width: 14px; height: 14px; color: var(--color-primary);}
.fuel-sort {display: flex; padding: 4px; gap: 3px; border-radius: 9px; background: var(--color-background);}
.fuel-sort button {display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: 6px; min-height: 44px; padding: .45rem .7rem; background: transparent; color: var(--color-text-muted); font-size: .8rem; font-weight: 700;}
.fuel-sort button:hover {background: var(--color-background);}
.fuel-sort button[aria-pressed="true"] {background: var(--color-surface); color: var(--color-primary-hover); box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dark) 9%, transparent);}
.fuel-sort .fuel-icon {width: 15px; height: 15px;}
.fuel-range {flex-wrap: wrap; grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .5rem; margin: 0; padding-top: .65rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .75rem;}
.fuel-results {display: grid; gap: .65rem;}
.fuel-station {position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: .7rem 1.25rem; padding: 1rem 1.15rem 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 2px 5px color-mix(in srgb, var(--color-dark) 3%, transparent); transition: border-color 160ms ease, box-shadow 160ms ease;}
.fuel-station:hover {border-color: var(--color-border); box-shadow: 0 3px 8px color-mix(in srgb, var(--color-dark) 5%, transparent);}
.fuel-station--cheapest {border-color: var(--color-registration); box-shadow: inset 3px 0 0 var(--color-registration), 0 2px 6px color-mix(in srgb, var(--color-dark) 4%, transparent);}
.fuel-station--cheapest:hover {border-color: var(--color-registration); box-shadow: inset 3px 0 0 var(--color-registration), 0 3px 8px color-mix(in srgb, var(--color-dark) 5%, transparent);}
.fuel-station-info, .fuel-price-panel {padding-bottom: .85rem;}
.fuel-station-info {min-width: 0;}
.fuel-station-title {display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem;}
.fuel-station h3 {font-size: 1rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.4; margin: 0; overflow-wrap: anywhere;}
.fuel-cheapest {display: inline-flex; align-items: center; gap: .25rem; background: var(--color-registration); color: var(--color-dark); padding: .2rem .45rem; border-radius: 4px; font-size: .63rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;}
.fuel-cheapest .fuel-icon {width: 13px; height: 13px;}
.fuel-brand {display: block; margin-top: .15rem; font-size: .7rem; font-weight: 700; color: var(--color-primary-hover);}
.fuel-station-info p {color: var(--color-text-muted); font-size: .78rem; line-height: 1.5; margin: .35rem 0 .45rem; max-width: 560px; overflow-wrap: anywhere;}
.fuel-distance {display: inline-flex; gap: .3rem; align-items: center; color: var(--color-text-muted); font-size: .75rem; font-weight: 600;}
.fuel-distance .fuel-icon {width: 14px; height: 14px;}
.fuel-price-panel {text-align: right; min-width: 0;}
.fuel-primary-label {display: block; color: var(--color-text-muted); font-size: .73rem; font-weight: 650; overflow-wrap: anywhere;}
.fuel-price {display: flex; align-items: baseline; justify-content: flex-end; gap: .35rem; color: var(--color-dark); font-size: 2.35rem; font-weight: 850; letter-spacing: -.055em; line-height: 1.15; font-variant-numeric: tabular-nums; margin: .15rem 0 .35rem;}
.fuel-price > span {color: var(--color-text-muted); font-size: .75rem; font-weight: 600; letter-spacing: 0;}
.fuel-updated {display: flex; justify-content: flex-end; align-items: flex-start; gap: .3rem; color: var(--color-text-muted); font-size: .68rem; line-height: 1.5; margin: 0;}
.fuel-updated .fuel-icon {width: 13px; height: 13px; margin-top: 2px;}
.fuel-updated time {display: inline; overflow-wrap: anywhere;}
.fuel-unavailable {color: var(--color-text-muted); font-size: .9rem; font-weight: 700; margin: .4rem 0;}
.fuel-other-prices {grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .7rem; margin: -.7rem -1.15rem 0; padding: .65rem 1.15rem; background: var(--color-background); border-top: 1px solid var(--color-border); border-radius: 0 0 9px 9px;}
.fuel-other-label {color: var(--color-text-muted); font-size: .65rem; line-height: 1.4; padding-top: .15rem; flex: 0 0 85px;}
.fuel-other-prices dl {display: flex; flex-wrap: wrap; flex: 1; gap: .5rem 0; margin: 0; min-width: 0;}
.fuel-chip {padding: 0 .85rem; border-left: 1px solid var(--color-border); min-width: 0; max-width: 100%;}
.fuel-chip dt {color: var(--color-text-muted); font-size: .68rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;}
.fuel-chip dd {color: var(--color-dark); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: .15rem 0 0; line-height: 1.4;}
.fuel-chip dd span {color: var(--color-text-muted); font-size: .65rem; font-weight: 500;}
.fuel-empty-price, .fuel-state {display: flex; align-items: flex-start; gap: .85rem; padding: 1.35rem; border-radius: 12px; background: var(--color-background); margin: .85rem 0;}
.fuel-empty-price {background: var(--color-background);}
.fuel-empty-price > .fuel-icon, .fuel-state > .fuel-icon {color: var(--color-primary-hover); margin-top: .15rem;}
.fuel-empty-price h3, .fuel-state h2 {font-size: 1rem; font-weight: 750; margin: 0 0 .35rem; line-height: 1.4;}
.fuel-empty-price p, .fuel-state p {color: var(--color-text-muted); font-size: .85rem; margin: 0; line-height: 1.6;}
.fuel-pagination {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.15rem; font-size: .78rem; color: var(--color-text-muted);}
.fuel-pagination a {display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .8rem; border-radius: 7px; color: var(--color-primary-hover); background: var(--color-surface); text-decoration: none; font-weight: 750;}
.fuel-pagination a:hover {background: var(--color-background);}
.fuel-previous .fuel-icon {transform: rotate(180deg);}
.fuel-data-note {display: flex; align-items: flex-start; gap: .4rem; color: var(--color-text-muted); font-size: .72rem; line-height: 1.5; margin: 1rem 0 0;}
.fuel-data-note .fuel-icon {width: 14px; height: 14px; margin-top: 2px;}
@media (max-width: 960px) {
    .fuel-search-controls {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 115px;}
    .fuel-button {grid-column: 1 / -1; margin-top: .1rem;}
}
@media (max-width: 640px) {
    .fuel-page {padding: 1.25rem .85rem 2rem;}
    .fuel-intro {margin-bottom: 1rem;}
    .fuel-intro h1 {max-width: 350px; font-size: 2rem;}
    .fuel-intro p {font-size: .85rem;}
    .fuel-search {padding: 1rem;}
    .fuel-search-heading > span:last-child {display: none;}
    .fuel-search-controls {grid-template-columns: minmax(0, 1fr) 105px; gap: .65rem;}
    .fuel-location {grid-column: 1 / -1;}
    .fuel-field input, .fuel-field select {font-size: 16px;}
    .fuel-button {font-size: .9rem;}
    .fuel-search-help {font-size: .7rem;}
    .fuel-results-heading {grid-template-columns: 1fr; margin-top: 1.3rem;}
    .fuel-results-heading h2 {font-size: 1.05rem;}
    .fuel-result-meta {gap: .35rem .75rem; font-size: .7rem;}
    .fuel-sort-form {justify-self: start;}
    .fuel-sort button {min-height: 44px; padding-inline: .9rem;}
    .fuel-station {grid-template-columns: minmax(0, 1fr) minmax(115px, 37%); padding: .85rem .9rem 0; gap: .7rem;}
    .fuel-station h3 {font-size: .9rem;}
    .fuel-station-info p {font-size: .73rem;}
    .fuel-price {font-size: 1.95rem; gap: .2rem;}
    .fuel-primary-label {font-size: .68rem;}
    .fuel-price > span {font-size: .65rem;}
    .fuel-updated {font-size: .63rem;}
    .fuel-other-prices {display: block; margin-inline: -.9rem; padding: .55rem .9rem;}
    .fuel-other-label {display: block; padding: 0; margin-bottom: .45rem;}
    .fuel-other-prices dl {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem;}
    .fuel-chip {padding: 0 .5rem;}
    .fuel-chip:nth-child(odd) {border-left: 0; padding-left: 0;}
    .fuel-empty-price, .fuel-state {padding: 1rem;}
}
@media (max-width: 420px) {
    .fuel-station {grid-template-columns: minmax(0, 1fr); gap: .5rem;}
    .fuel-station-info {padding-bottom: 0;}
    .fuel-price-panel {text-align: left;}
    .fuel-price, .fuel-updated {justify-content: flex-start;}
    .fuel-other-prices {margin-top: -.5rem;}
}
@media (prefers-reduced-motion: reduce) {
    .fuel-page * {transition: none;}
}

.fuel-locate {display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; margin-top: .35rem; padding: .45rem .65rem; border: 1px solid var(--color-text-muted); border-radius: 7px; background: transparent; color: var(--color-border); font-size: .78rem; font-weight: 650;}
.fuel-locate:hover {background: var(--color-dark); border-color: var(--color-primary);}
.fuel-locate:disabled {opacity: .7; cursor: wait;}
#fuel-location-status:empty {display: none;}
#fuel-location-status[data-error="true"] {color: #fecaca;}
@media (max-width: 640px) {.fuel-locate {width: 100%;}}

.fuel-results-controls {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: .65rem; min-width: 0;}
.fuel-switch-form {min-width: 0; max-width: 100%;}
.fuel-switch-form label {display: block; margin-bottom: .25rem; color: var(--color-text-muted); font-size: .7rem; font-weight: 650;}
.fuel-switch-form select {width: 230px; max-width: 100%; min-height: 48px; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); color: var(--color-dark); font-size: .8rem; font-weight: 700; cursor: pointer;}
.fuel-switch-form select:hover {border-color: var(--color-primary);}
.fuel-switch-fallback {border: 0; border-radius: 6px; padding: .5rem; background: var(--color-background); color: var(--color-dark);}
@media (max-width: 640px) {
    .fuel-results-controls {justify-content: flex-start;}
    .fuel-switch-form select {font-size: 16px;}
}

/* A light comparison strip, using the full selected-fuel results. */
.fuel-insights {display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: .9rem 1rem; margin: .85rem 0; background: var(--color-background); border-radius: 9px;}
.fuel-insights-summary {min-width: 0; flex: 1 1 auto;}
.fuel-insights h2 {margin: 0 0 .55rem; font-size: .75rem; font-weight: 800; color: var(--color-dark);}
.fuel-insights h2 span {margin-left: .45rem; color: var(--color-text-muted); font-weight: 500;}
.fuel-insights-metrics {display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; margin: 0;}
.fuel-insights-metrics dt {font-size: .68rem; color: var(--color-text-muted); font-weight: 500;}
.fuel-insights-metrics dd {margin: .15rem 0 0; font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums;}
.fuel-insights-metrics dd span {margin-left: .15rem; font-size: .68rem; font-weight: 500; color: var(--color-text-muted);}
.fuel-insights-takeaway {flex: 0 1 360px; min-width: 0;}
.fuel-insights-saving {display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 .25rem; color: var(--color-primary-hover); font-size: 1rem; font-weight: 750;}
.fuel-insights-saving strong {font-size: 1.2rem; font-weight: 850; font-variant-numeric: tabular-nums;}
.fuel-insights-note {margin: 0; font-size: .7rem; line-height: 1.5; color: var(--color-text-muted);}
@media (max-width: 640px) {
    .fuel-insights {flex-direction: column; align-items: stretch; gap: .8rem;}
    .fuel-insights-takeaway {flex-basis: auto; border-top: 1px solid var(--color-border); padding-top: .65rem;}
    .fuel-insights-metrics {justify-content: space-between; gap: .6rem;}
}

/* Keep comparison controls and long labels inside narrow viewports. */
.fuel-results-summary, .fuel-insights-metrics > div {min-width: 0;}
.fuel-results-heading h2, .fuel-result-meta > span, .fuel-insights h2, .fuel-insights-saving {overflow-wrap: anywhere;}
.fuel-insights h2 {line-height: 1.5;}
.fuel-insights-best dd {color: var(--color-primary-hover);}
.fuel-insights-saving > span {min-width: 0;}
.fuel-insights-saving > .fuel-icon {width: 16px; height: 16px; margin-top: .2rem;}
.fuel-insights-takeaway {border-left: 1px solid var(--color-border); padding-left: 1rem;}
.fuel-switch-fallback {min-height: 44px;}
@media (max-width: 640px) {
    .fuel-insights-takeaway {border-left: 0; padding-left: 0;}
    .fuel-pagination {gap: .5rem;}
}

/* Match the approved homepage Fuel Finder surround (#f1f7ff in home-fuel.css).
   Scope the treatment to this page's main content so shared chrome is unchanged. */
.fuel-prices-page #main-content { background: #f1f7ff; display: flow-root; }
.fuel-guidance { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ps-radius); }
.fuel-guidance__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: var(--ps-radius-sm); background: #f1f7ff; color: var(--color-primary); }
.fuel-page .fuel-guidance__icon .fuel-icon { width: 20px; height: 20px; }
.fuel-guidance__content { min-width: 0; }
.fuel-guidance h2 { margin: 0 0 .25rem; color: var(--color-dark); font-size: 1rem; font-weight: 750; line-height: 1.4; letter-spacing: -.02em; }
.fuel-guidance p { margin: 0; color: var(--color-text-muted); font-size: .85rem; line-height: 1.5; }
.fuel-prices-page .fuel-data-note { gap: .5rem; margin-top: .875rem; }
@media (max-width: 575.98px) {
    .fuel-guidance { align-items: flex-start; gap: .75rem; padding: .875rem; }
}


/* Compact station cards with brand marks beside the name. */
.fuel-station {grid-template-columns: 30px minmax(0, 1fr) 215px; gap: .5rem .75rem; padding: .8rem; border-radius: 12px;}
.fuel-station-rank {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e7f0ff; color: var(--color-primary); font-size: .85rem; font-weight: 800;}
.fuel-station-info, .fuel-price-panel {padding-bottom: .25rem;}
.fuel-station-title {gap: .35rem; flex-wrap: nowrap;}
.fuel-station-title h3 {min-width: 0;}
.fuel-cheapest {margin-left: auto;}
.fuel-brand-icon {display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; font-size: .65rem; font-weight: 800; color: var(--color-primary);}
.fuel-brand-icon img {width: 26px; height: 26px; object-fit: contain;}
.fuel-brand {margin-top: .1rem;}
.fuel-station-info .fuel-station-address {display: flex; align-items: flex-start; gap: .25rem; margin: .25rem 0;}
.fuel-station-address .fuel-icon {width: 13px; height: 13px; margin-top: .15rem;}
.fuel-price-panel {align-self: center;}
.fuel-other-prices {gap: .5rem; margin: 0; padding: .45rem .6rem; border: 0; border-radius: 7px; background: #f0f6ff; align-items: center;}
.fuel-other-label {display: flex; align-items: center; gap: .25rem; flex-basis: 110px; padding: 0;}
.fuel-other-label .fuel-icon {width: 14px; height: 14px; color: var(--color-primary);}
.fuel-other-prices dl {gap: .35rem 0;}
.fuel-chip {position: relative; flex: 1 1 140px; padding: 0 .5rem 0 2rem;}
.fuel-chip::before {content: ""; position: absolute; left: .4rem; top: .15rem; width: 20px; height: 26px; border-radius: 5px; background: #d8e8ff;}
.fuel-chip::after {content: ""; position: absolute; left: .6rem; top: .45rem; width: 14px; height: 16px; background: #0560ff; mask: url('../images/fuel-pump.svg') center / contain no-repeat;}
.fuel-chip--b7_premium::before {background: #ebddff;}
.fuel-chip--b7_premium::after {background: #8209e8;}
.fuel-chip--e10::before {background: #d5f5e7;}
.fuel-chip--e10::after {background: #008f39;}
.fuel-chip--e5::before {background: #fff0d4;}
.fuel-chip--e5::after {background: #cf8200;}
@media (max-width: 760px) {
    .fuel-station {grid-template-columns: 26px minmax(0, 1fr); padding: .65rem; gap: .4rem .5rem;}
    .fuel-station-rank {width: 26px; height: 26px; font-size: .75rem;}
    .fuel-station-title {flex-wrap: wrap;}
    .fuel-cheapest {margin-left: 0;}
    .fuel-price-panel {grid-column: 2; text-align: left;}
    .fuel-price, .fuel-updated {justify-content: flex-start;}
    .fuel-other-prices {display: block; padding: .4rem .5rem;}
    .fuel-other-label {margin-bottom: .3rem;}
    .fuel-other-prices dl {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;}
    .fuel-chip, .fuel-chip:nth-child(odd) {padding-left: 1.7rem; border-left: 0;}
    .fuel-chip::before {left: 0;}
    .fuel-chip::after {left: .2rem;}
}

/* Reference treatment for the results summary and price insights. */
.fuel-results-heading {margin: 0 0 .35rem; padding: 1rem 1.35rem; border: 1px solid #e8f0fb; border-radius: 14px; background: linear-gradient(110deg, #f5f9ff, #fbfdff); box-shadow: 0 2px 8px #173f7510;}
.fuel-results-heading h2 {font-size: 1.2rem; font-weight: 850; margin-bottom: .45rem;}
.fuel-results-controls {align-items: center;}
.fuel-sort {align-items: center; padding: 0; gap: .5rem; background: transparent;}
.fuel-sort-label {margin-right: .15rem; color: var(--color-text-muted); font-size: .7rem; white-space: nowrap;}
.fuel-sort button {min-height: 44px; padding: .65rem .85rem; border: 1px solid #e2eaf6; border-radius: 9px; background: #f8fbff; box-shadow: 0 1px 3px #173f7508;}
.fuel-sort button:hover {background: #edf4ff; border-color: #c7dbff;}
.fuel-sort button[aria-pressed="true"] {color: #0055ff; background: #f3f8ff; border-color: #dbe8ff; box-shadow: 0 1px 5px #0055ff10;}
.fuel-range {border-color: #e5edf8;}
.fuel-insights {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; margin: 0 0 1rem; padding: .75rem; border: 1px solid #e8f0fb; border-radius: 14px; background: linear-gradient(110deg, #f7faff, #eef5ff); box-shadow: 0 2px 8px #173f7508;}
.fuel-insights-summary {padding: .15rem .65rem;}
.fuel-insights h2 {font-size: .85rem; margin-bottom: .65rem;}
.fuel-insights-metrics {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;}
.fuel-insights-metrics dt {font-size: .7rem; font-weight: 600;}
.fuel-insights-metrics dd {margin-top: .25rem; font-size: 1.2rem; font-weight: 850; line-height: 1.25;}
.fuel-insights-best dd {color: #0055ff;}
.fuel-insights-takeaway {padding: .85rem 1rem; border: 0; border-radius: 11px; background: #e4efff;}
.fuel-insights-saving {align-items: center; gap: .65rem; margin-bottom: .4rem; color: #2860a5; font-size: .95rem; font-weight: 800; line-height: 1.4;}
.fuel-insights-saving strong {color: #0055ff; font-size: 1.1rem; text-decoration: underline; text-decoration-color: #a9caff; text-underline-offset: 3px;}
.fuel-insights-saving > .fuel-icon {width: 20px; height: 20px; margin: 0; color: #0055ff;}
.fuel-insights-note {display: flex; align-items: flex-start; gap: .65rem; font-size: .65rem; line-height: 1.6;}
.fuel-insights-note > .fuel-icon {width: 15px; height: 15px; margin-top: .15rem; flex-shrink: 0; color: #447eff;}
@media (max-width: 760px) {
    .fuel-results-heading {grid-template-columns: 1fr; gap: .75rem; padding: 1rem;}
    .fuel-results-controls {justify-content: flex-start;}
    .fuel-insights {gap: .75rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);}
    .fuel-insights-summary {padding-inline: .25rem;}
    .fuel-insights-saving {font-size: .85rem;}
}
@media (max-width: 540px) {
    .fuel-insights {grid-template-columns: 1fr;}
    .fuel-insights-summary {padding: .25rem;}
    .fuel-insights-takeaway {padding: .85rem;}
    .fuel-insights h2 span {display: inline-block;}
    .fuel-insights-metrics {gap: .5rem;}
    .fuel-insights-metrics dd {font-size: 1.1rem;}
}

/* Keep comparison filters together within the results heading. */
.fuel-results-heading {grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;}
.fuel-results-controls {display: flex; flex-direction: column; align-items: flex-end; gap: .65rem;}
.fuel-switch-form {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .65rem; width: 360px; max-width: 100%;}
.fuel-heading-field {min-width: 0;}
.fuel-heading-field label {font-size: .68rem; margin-bottom: .3rem;}
.fuel-heading-field select {width: 100%; min-height: 42px; padding: .5rem .65rem; border-color: #dce7f7; background: #fff; border-radius: 8px; font-size: .75rem; font-weight: 650;}
.fuel-switch-form noscript {grid-column: 1 / -1;}
@media (max-width: 760px) {
    .fuel-results-heading {grid-template-columns: 1fr;}
    .fuel-results-controls {align-items: stretch;}
    .fuel-switch-form {width: 100%;}
    .fuel-sort-form {align-self: flex-start;}
}
@media (max-width: 540px) {
    .fuel-heading-field select {font-size: 16px;}
}

/* Results toolbar: grouped filters above a separate results control row. */
.fuel-results-heading {background: #fbfdff; border-color: #dce7f3; box-shadow: 0 2px 8px #173f7508;}
.fuel-results-heading h2 {font-size: 1.25rem; line-height: 1.3;}
.fuel-results-heading .fuel-heading-field select {min-height: 44px;}
.fuel-results-bottom {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-top: .85rem; border-top: 1px solid #e1eaf5; min-width: 0;}
.fuel-results-bottom .fuel-range {display: block; margin: 0; padding: 0; border: 0; font-size: .78rem;}
.fuel-results-navigation {display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; min-width: 0;}
.fuel-results-bottom .fuel-sort {flex-wrap: wrap; gap: .4rem;}
.fuel-results-bottom .fuel-sort-label {font-size: .75rem;}
.fuel-results-bottom .fuel-sort button {min-height: 44px; min-width: 104px; padding: .5rem .65rem; color: #405674; background: #fff; border-color: #dce7f3; box-shadow: none;}
.fuel-results-bottom .fuel-sort button:hover {border-color: #0055ff; background: #edf4ff;}
.fuel-results-bottom .fuel-sort button[aria-pressed="true"] {color: #fff; background: #0055ff; border-color: #0055ff; box-shadow: none;}
.fuel-toolbar-pagination {display: flex; align-items: center; gap: .35rem; color: var(--color-text-muted); font-size: .75rem; white-space: nowrap;}
.fuel-toolbar-pagination > span {margin-right: .3rem;}
.fuel-toolbar-pagination .fuel-page-button {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dce7f3; border-radius: 8px; background: #fff; color: #405674; text-decoration: none;}
.fuel-toolbar-pagination .fuel-page-button:disabled {background: #f0f4f9; border-color: #e6edf5; color: #9baabd; cursor: default;}
.fuel-toolbar-pagination a.fuel-page-button:hover {background: #edf4ff; border-color: #0055ff; color: #0055ff;}
.fuel-results-heading :is(button, a, select):focus-visible {outline: 2px solid #0055ff; outline-offset: 3px;}
@media (max-width: 760px) {
    .fuel-results-heading {grid-template-columns: minmax(0, 1fr);}
    .fuel-results-navigation {width: 100%;}
}
@media (max-width: 420px) {
    .fuel-results-heading .fuel-switch-form {grid-template-columns: minmax(0, 1fr);}
    .fuel-results-bottom .fuel-sort-label {flex-basis: 100%;}
}

/* The map follows the displayed Django page and enters normal flow on mobile. */
.fuel-results-layout {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 1.25rem; align-items: start;}
.fuel-results-column {min-width: 0;}
.fuel-map-sidebar {min-width: 0; padding: 1rem; border: 1px solid #dce7f3; border-radius: 14px; background: #fbfdff; position: sticky; top: 1rem;}
.fuel-map-heading {display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .75rem;}
.fuel-map-heading__intro {display: flex; align-items: center; gap: .65rem; flex: 1 1 14rem; min-width: 0;}
.fuel-map-heading__icon {display: flex; align-items: center; justify-content: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: .625rem; background: #e8f1ff; color: var(--color-primary);}
.fuel-map-heading__text {min-width: 0;}
.fuel-map-heading h2 {margin: 0 0 .2rem; color: var(--color-dark); font-size: 1rem; font-weight: 750; line-height: 1.3; letter-spacing: -.02em;}
.fuel-map-heading__count {flex: 0 0 auto; margin-left: auto; padding: .25rem .6rem; border: 1px solid #dce7f3; border-radius: 999px; background: #f1f7ff; color: var(--color-text-muted); font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;}
#fuel-map {height: 420px; border-radius: 9px; isolation: isolate;}
#fuel-map[hidden] {display: none;}
#fuel-map-status {margin: 0; line-height: 1.45; font-size: .75rem; color: var(--color-text-muted);}
.fuel-map-marker {width: 34px; height: 34px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid white; border-radius: 50%; background: var(--color-primary); color: white; font-size: 13px; font-weight: 800; box-shadow: 0 2px 6px #0005;}
.fuel-map-marker--best {background: var(--color-registration); color: var(--color-dark);}
.fuel-map-marker--selected {outline: 3px solid var(--color-dark); outline-offset: 2px;}
/* Keep station summaries readable within the narrow map column. */
.fuel-map-popup {width: 175px; max-width: 100%; font-family: inherit; font-size: 12px; line-height: 1.35; color: var(--color-dark); overflow-wrap: anywhere;}
.fuel-map-popup p {margin: 0 0 4px;}
.fuel-map-popup p:last-child {margin-bottom: 0;}
.fuel-map-popup .fuel-map-popup-title {font-weight: 800; font-size: 13px;}
.fuel-map-popup :is(.fuel-map-popup-fuel-station-address, .fuel-map-popup-fuel-distance, .fuel-map-popup-fuel-unavailable) {font-size: 11px; color: var(--color-text-muted);}
.fuel-map-popup .fuel-map-popup-fuel-price {font-weight: 800; font-size: 20px; color: var(--color-primary);}
.fuel-map-popup .fuel-map-popup-fuel-cheapest {display: inline-block; padding: 2px 6px; border-radius: 5px; background: var(--color-registration); color: var(--color-dark); font-size: 10px; font-weight: 700;}
.fuel-map-popup-fuel-price span {font-size: 11px; font-weight: 500;}
/* Style Google's existing popup and close button without replacing its controls. */
#fuel-map .gm-style-iw-c {padding: 10px 12px 12px !important; border-radius: 12px; box-shadow: 0 4px 16px rgba(18, 38, 63, .18);}
#fuel-map .gm-style-iw-d {overflow: auto !important;}
#fuel-map .gm-style-iw-chr {height: 28px; margin-bottom: 4px;}
#fuel-map .gm-style-iw-ch {padding: 0;}
#fuel-map .gm-style-iw-c .gm-ui-hover-effect {position: absolute !important; top: 8px !important; right: 8px !important; width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; border-radius: 50%; background: #e8f1ff !important; opacity: 1; display: flex; align-items: center; justify-content: center;}
#fuel-map .gm-style-iw-c .gm-ui-hover-effect span {width: 14px !important; height: 14px !important; margin: 0 !important; background-color: var(--color-dark);}
#fuel-map .gm-style-iw-c .gm-ui-hover-effect:hover {background: #dbeafe !important;}
#fuel-map .gm-style-iw-c .gm-ui-hover-effect:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 2px;}
.fuel-station[tabindex] {cursor: pointer;}
.fuel-station--selected, .fuel-station[tabindex]:focus-visible {outline: 3px solid var(--color-primary); outline-offset: 2px;}
.fuel-map-legend {display: flex; flex-wrap: wrap; gap: .8rem; margin: .8rem 0; font-size: .75rem;}
.fuel-map-legend span {display: flex; align-items: center; gap: .35rem;}
.fuel-map-key {width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary);}
.fuel-map-key--best {background: var(--color-registration);}
.fuel-map-tips h3 {font-size: .9rem;}
.fuel-map-tips ul {padding-left: 1.1rem; margin-bottom: 0; font-size: .75rem; line-height: 1.6;}
@media (max-width: 960px) {
    .fuel-results-layout {grid-template-columns: minmax(0, 1fr);}
    .fuel-map-sidebar {position: static;}
    #fuel-map {height: 350px;}
}

.fuel-station-link {color: inherit; text-decoration: none;}
.fuel-station-link:hover {color: var(--color-primary); text-decoration: underline;}