/* Fuel card set piece: the forecourt pump (see partials/features/fuel-pump.php).
   Default (no JS, reduced motion): the pump shows the default week, every flow light lit, the native
   range and number input work the calculator. .fpm.is-live (full motion with Draggable): the range goes
   invisible under a designed track and a big handle drives it. Digit wheels sit at --p (0 to 10) and the
   script turns them with a transform in em, so the readout keeps its size at every width. */
.fpm { --k: 58px; --cell-h: 1.12em; overflow: clip; }
.fpm-in { position: relative; z-index: 1; }
.fpm-head { margin-bottom: clamp(1.6rem, 3.4vh, 2.6rem); }
.fpm-head .h2 { color: #fff; }
@media (min-width: 1100px) {
  .fpm-head { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.4rem, 5vw, 5rem); align-items: end; }
}


/* forecourt light: a warm honey spill behind the pump, and the canopy's cool wash from above */
.fpm-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: -10%; top: 18%; width: 70%; height: 90%;
  background:
    radial-gradient(50% 46% at 50% 50%, rgba(244,185,66,.22) 0%, rgba(244,185,66,.07) 45%, transparent 72%);
}
.fpm::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(159,216,180,.05) 0 1px, transparent 1px 92px),
    linear-gradient(180deg, rgba(159,216,180,.08), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}

.fpm-grid { position: relative; display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) {
  .fpm-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
}

/* ------------------------------------------------------------ the pump */
.fpm-grid > * { min-width: 0; }
/* the cell clips its own overflow, so the message strip's text never reaches the calculator beside it;
   the clip margin leaves room for the offset outline and the pointer tilt */
.fpm-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; overflow-clip-margin: 32px; }
/* an offset outline behind the pump, like the site's framed photos */
.fpm-stage::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  border: 1px solid rgba(244,185,66,.42); transform: translate(calc(var(--off) * -1), var(--off));
}
.fpm-pump {
  position: relative; overflow: clip; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.8rem, 1.6vh, 1.15rem);
  padding: clamp(1.1rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(159,216,180,.1), transparent 60%),
    linear-gradient(168deg, #0D2C1E 0%, #061710 62%, #030D08 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 40px -24px rgba(0,0,0,.8),
    0 50px 80px -46px rgba(0,0,0,.85);
  transform-style: preserve-3d;
}
/* glass reflection, moved by the pointer (--sx, --sy) */
.fpm-sheen {
  position: absolute; inset: -30%; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 46%, rgba(255,255,255,.015) 54%, transparent 62%);
  transform: translate(var(--sx, 0%), var(--sy, 0%));
}

.fpm-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.fpm-brand { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.015em; color: #fff; }
.fpm-status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem .42rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  font-size: .9375rem; color: rgba(255,255,255,.86);
}
.fpm-status b { font-weight: 600; }
.fpm-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint-deep); box-shadow: 0 0 10px rgba(159,216,180,.8); }
.fpm.is-running .fpm-status i { background: var(--honey); box-shadow: 0 0 12px rgba(244,185,66,.9); }
html.js:not(.reduced) .fpm .fpm-status i { animation: fpm-blink 1.6s ease-in-out infinite; }
html.js:not(.reduced) .fpm.is-running .fpm-status i { animation-duration: .5s; }
@keyframes fpm-blink { 50% { opacity: .35; } }

/* the message strip: an LED line that scrolls the card's facts across the pump */
.fpm-ticker {
  position: relative; overflow: clip; min-width: 0; width: 100%;
  padding: .5rem 0; border-radius: 10px;
  background: #020A06; box-shadow: inset 0 1px 6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.05);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fpm-ticker-run { display: flex; width: max-content; }
.fpm-ticker span {
  display: inline-flex; align-items: center; gap: 1.1rem; padding-left: 1.1rem; white-space: nowrap;
  font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--honey);
  text-shadow: 0 0 8px rgba(244,185,66,.5);
}
.fpm-ticker span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint-deep); box-shadow: 0 0 6px rgba(159,216,180,.8); }
html.js:not(.reduced) .fpm-ticker-run { animation: fpm-ticker 30s linear infinite; animation-play-state: paused; }
html.js:not(.reduced) .fpm.is-near .fpm-ticker-run { animation-play-state: running; }
@keyframes fpm-ticker { to { transform: translateX(-50%); } }

/* a readout row: label on the left, the recessed display on the right */
.fpm-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: clamp(.55rem, 1vw, .8rem) clamp(.8rem, 1.4vw, 1.15rem);
  border-radius: 16px;
  background: linear-gradient(180deg, #010805 0%, #03100A 100%);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.07);
}
.fpm-l {
  display: grid; gap: .1rem;
  font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1;
  color: var(--mint-deep);
}
.fpm-l small { font-size: .8125rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(255,255,255,.6); }
.fpm-read {
  display: flex; align-items: baseline; justify-content: flex-end; gap: .08em;
  font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fpm-row-saved .fpm-read { font-size: clamp(2.7rem, min(5.4vw, 8.6vh), 5rem); color: var(--honey); }
/* the glow sits on the whole readout (a filter paints after the wheels are clipped, so no boxes round each digit) */
.fpm-row-saved .fpm-digits, .fpm-row-saved .fpm-unit { filter: drop-shadow(0 0 14px rgba(244,185,66,.45)); }
.fpm-row-litres .fpm-read { font-size: clamp(2rem, min(3.7vw, 6vh), 3.4rem); color: #E8F7EC; }
.fpm-row-litres .fpm-digits { filter: drop-shadow(0 0 12px rgba(159,216,180,.3)); }
.fpm-unit { font-size: .62em; margin-right: .12em; opacity: .9; align-self: center; }
.fpm-digits { display: inline-flex; align-items: flex-end; transform-origin: 100% 60%; }
.fpm-dot { width: .26em; text-align: center; height: var(--cell-h); line-height: var(--cell-h); }

/* a digit wheel: 0 to 9 then 0 again, so 9 rolls over into 0 */
.fpm-cell { position: relative; display: block; width: .62em; height: var(--cell-h); overflow: clip; }
.fpm-ghost { position: absolute; inset: 0; text-align: center; line-height: var(--cell-h); opacity: .09; text-shadow: none; transition: opacity .12s; }
.fpm-strip { position: absolute; left: 0; right: 0; top: 0; display: block; transform: translateY(calc(var(--p, 0) * var(--cell-h) * -1)); transition: opacity .12s; }
.fpm-strip i { display: block; height: var(--cell-h); line-height: var(--cell-h); text-align: center; font-style: normal; }
.fpm-cell.is-lead .fpm-strip { opacity: 0; }
/* the pump's start-of-sale test: every segment lit for a moment */
.fpm.is-test .fpm-ghost { opacity: 1; }
.fpm.is-test .fpm-strip { opacity: 0; }

/* the flow lights: one per slice of the week's fill */
.fpm-flow { display: flex; gap: 5px; padding: 0 .2rem; }
.fpm-flow i {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--honey); box-shadow: 0 0 8px rgba(244,185,66,.55);
  transition: background-color .15s, box-shadow .15s;
}
.fpm-flow i.is-off { background: rgba(255,255,255,.09); box-shadow: none; }

.fpm-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .2rem; }
.fpm-rate { display: grid; gap: .15rem; }
.fpm-rate-l, .fpm-fleet-l { font-weight: 600; font-size: .9375rem; color: rgba(255,255,255,.66); }
.fpm-rate-n { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.fpm-rate-n b { color: var(--honey); font-weight: 800; font-variant-numeric: tabular-nums; }
.fpm-fleet { display: inline-flex; align-items: baseline; gap: .4rem; }
.fpm-fleet-n { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- the calculator */
.fpm-calc {
  position: relative; border-radius: var(--r-lg);
  display: grid; gap: clamp(1rem, 2.2vh, 1.5rem);
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.6vw, 36px);
  background: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 70px -46px rgba(0,0,0,.7);
}
@media (min-width: 640px) {
  .fpm-calc { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.4rem, 2.6vw, 2.4rem); }
  .fpm-out, .fpm-small, .fpm-sr { grid-column: 1 / -1; }
}
.fpm-field { display: grid; align-content: start; gap: .6rem; min-width: 0; }
.fpm-label { font-weight: 600; font-size: 1.0625rem; color: rgba(255,255,255,.86); }

/* vehicles: a stepper round a real number input */
.fpm-step {
  display: inline-flex; align-items: center; gap: .3rem; justify-self: start;
  padding: 5px; border-radius: 999px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.16);
}
.fpm-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--paper); color: var(--pine);
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.6);
  transition: background-color .2s, transform .2s;
}
.fpm-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.fpm-btn:hover { background: var(--mint); }
.fpm-btn:active { transform: scale(.92); }
.fpm-btn:disabled { opacity: .35; cursor: default; transform: none; }
.fpm-btn:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 3px; }
.fpm-v {
  -moz-appearance: textfield; appearance: textfield;
  width: 2.4ch; min-width: 44px; height: 48px; padding: 0; border: 0; background: transparent; text-align: center; color: #fff;
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: -.03em;
}
.fpm-v::-webkit-outer-spin-button, .fpm-v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fpm-v:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 4px; border-radius: 8px; }

/* litres a week: native range by default */
.fpm-top-l { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.fpm-lval { margin: 0; display: flex; align-items: baseline; gap: .4rem; font-weight: 600; color: rgba(255,255,255,.7); }
.fpm-lval-n {
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.03em;
  font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.fpm-control { position: relative; height: var(--k); }
.fpm-range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: var(--k); margin: 0; background: transparent; cursor: pointer;
  --fill: calc(var(--k) / 2 + (100% - var(--k)) * var(--pn, .13));
}
.fpm-range::-webkit-slider-runnable-track {
  height: 14px; border-radius: 14px;
  background: linear-gradient(90deg, #E9A93A 0%, var(--honey) var(--fill), rgba(255,255,255,.14) var(--fill));
}
.fpm-range::-moz-range-track { height: 14px; border-radius: 14px; background: rgba(255,255,255,.14); }
.fpm-range::-moz-range-progress { height: 14px; border-radius: 14px; background: linear-gradient(90deg, #E9A93A, var(--honey)); }
.fpm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--k); height: var(--k); margin-top: calc((14px - var(--k)) / 2);
  border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 6px rgba(244,185,66,.28), 0 16px 30px -10px rgba(0,0,0,.55);
}
.fpm-range::-moz-range-thumb {
  width: var(--k); height: var(--k); border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 6px rgba(244,185,66,.28), 0 16px 30px -10px rgba(0,0,0,.55);
}
.fpm-range:focus-visible { outline: none; }
.fpm-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep); }
.fpm-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep); }

/* the designed track (live mode only) */
.fpm-drag { display: none; }
.fpm.is-live .fpm-range { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.fpm.is-live .fpm-drag { display: block; position: absolute; inset: 0; cursor: pointer; touch-action: pan-y; }
.fpm-rail {
  position: absolute; left: 0; right: 0; top: calc(50% - 8px); height: 16px; border-radius: 16px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 100%) calc(var(--k) / 2) 50% / calc((100% - var(--k)) / 39) 6px no-repeat,
    rgba(255,255,255,.12);
  background-repeat: repeat-x, no-repeat;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35);
}
.fpm-fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, #E9A93A 0%, var(--honey) 100%);
  transform: scaleX(.15);
}
.fpm-knob {
  position: absolute; left: 0; top: 0; width: var(--k); height: var(--k); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #FBF3E2 70%, #F1E2BF 100%);
  box-shadow: 0 0 0 6px rgba(244,185,66,.26), 0 18px 34px -10px rgba(0,0,0,.6);
  display: grid; place-items: center; cursor: grab; touch-action: pan-y;
  transition: box-shadow .3s;
}
.fpm-knob:active, .fpm-knob.is-held { cursor: grabbing; box-shadow: 0 0 0 10px rgba(244,185,66,.32), 0 24px 40px -12px rgba(0,0,0,.65); }
.fpm-grip { display: flex; gap: 5px; }
.fpm-grip i { display: block; width: 3px; height: 18px; border-radius: 3px; background: var(--pine); opacity: .55; }
.fpm-range:focus-visible + .fpm-drag .fpm-knob { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep), 0 18px 34px -10px rgba(0,0,0,.6); }

.fpm-scale { position: relative; height: 1.5rem; margin-top: -.1rem; }
.fpm-scale li {
  position: absolute; top: 0; width: 4em; text-align: center;
  left: calc(var(--k) / 2 + (100% - var(--k)) * var(--at) - 2em);
  font-weight: 600; font-size: .9375rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums;
}
.fpm-scale li:first-child { left: 0; text-align: left; }
.fpm-scale li:last-child { left: auto; right: 0; text-align: right; }

/* the result */
.fpm-out {
  display: grid; gap: .5rem;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  border-radius: var(--r-md); background: var(--mint); color: var(--pine);
}
.fpm .fpm-year {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  font-weight: 600; font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--pine);
}
.fpm-year-n {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.04em;
  font-size: clamp(2.6rem, 4.2vw, 3.9rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--pine);
}
.fpm .fpm-fee { margin: 0; display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.0625rem; color: rgba(12,59,39,.86); }
.fpm-fee .tick { width: 1.3em; height: 1.3em; color: var(--tick); }
.fpm-fee-ico { display: inline-flex; }
.fpm .fpm-small { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.68); }
.fpm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 1023px) {
  .fpm-stage { max-width: 620px; width: 100%; justify-self: center; }
  .fpm-glow { left: -20%; top: 22%; width: 140%; height: 50%; }
}
@media (max-width: 480px) {
  .fpm { --k: 52px; }
  .fpm-row { gap: .6rem; }
  .fpm-l { font-size: .8125rem; letter-spacing: .1em; }
  .fpm-row-saved .fpm-read { font-size: clamp(2.2rem, 11.5vw, 2.9rem); }
  .fpm-row-litres .fpm-read { font-size: clamp(1.7rem, 8.4vw, 2.2rem); }
  .fpm-stage::before { transform: translate(-7px, 7px); }
}

/* laptop screens (1366x768 and the like): the whole scene fits below the header */
@media (min-width: 1024px) and (max-height: 820px) {
  .fpm { padding-block: clamp(2.4rem, 7vh, 4rem); }
  .fpm-head { margin-bottom: clamp(1.1rem, 2.6vh, 1.6rem); }
  .fpm-pump { padding: 1rem 1.3rem; gap: .7rem; }
  .fpm-calc { padding: 18px 26px; gap: .85rem; }
  .fpm-out { padding: 12px 20px; gap: .3rem; }
  .fpm-year-n { font-size: clamp(2.4rem, 3.6vw, 3.2rem); }
}