/* =========================================================
   WATTS NEARBY — MAIN STYLESHEET

   Contents
   1.  Design tokens (colours)
   2.  Reset & base
   3.  Site header (logo + nav)
   4.  About & FAQ pages
   5.  Search toggle & map message
   6.  Eyebrow label
   7.  Location button
   8.  Postcode search
   9.  Filters
   10. Map (crosshair, Leaflet controls, markers)
   11. Floating panels (search panel + results panel)
   12. Station cards
   13. Connection badges
   14. Station status
   15. Loading cards
   16. City landing pages

   Responsive overrides sit directly under the section they
   change, largest breakpoint first (900px → 700px → 600px).
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
  /* Brand greens */
  --green: #00a86b;
  --green-dark: #007a4d;
  --green-light: #e6f7f0;

  /* Neutrals */
  --black: #111713;
  --grey-900: #26302a;
  --grey-700: #58635d;
  --grey-500: #89928d;
  --grey-300: #d9dedb;
  --grey-200: #e9ecea;
  --grey-100: #f4f6f5;

  --white: #ffffff;

  /* Secondary palette, used mainly by the city pages and card details */
  --green-text: #006b2c;   /* Darker green for links and text */
  --green-tint: #e6f4ec;   /* Pale green fill for callouts */
  --ink: #1a1a1f;          /* Headings */
  --text-body: #4b5563;    /* Body copy */
  --text-muted: #6b7280;   /* Secondary/meta text */
  --border-soft: #e5e7eb;  /* Light borders */
  --surface-soft: #f8f9fa; /* Light grey fills */

  /* Accessibility focus ring */
  --focus: #ffdd00;
}


/* =========================================================
   2. RESET & BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);

  font-family: "Inter", sans-serif;
  line-height: 1.5;
}

button,
select {
  font: inherit;
}


/* =========================================================
   3. SITE HEADER
   Fixed bar across the top with the logo on the left and
   the Cities / About / FAQ links on the right.
   ========================================================= */

.site-header {
  border-bottom: 1px solid var(--grey-200);
}

/* Fixed, translucent header used on the map pages */
.spider-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;

  height: 60px;
  padding-top: 10px;

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

.header-inner {
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo: icon + "Watts Nearby" wordmark */

.logo {
  display: flex;
  align-items: center;
  gap: 5px;

  color: var(--black);
  text-decoration: none;

  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.brand-logo-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.logo-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.logo-watts {
  color: var(--black);
}

.logo-nearby {
  color: var(--green) !important;
}

/* Navigation links */

.header-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 20px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--grey-700);

  font-size: 13px;
  font-weight: 500;
}

/* Tablet: stop the logo pushing the nav off screen */
@media (max-width: 900px) {

  .header-inner {
    gap: 12px;
    min-width: 0;
  }

  .logo-lockup {
    min-width: 0;
    max-width: calc(100% - 90px);
    margin-right: auto;
  }

  .logo {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .logo-text {
    min-width: 0;
  }

}

/* Mobile: smaller wordmark and tighter spacing */
@media (max-width: 700px) {

  .spider-header {
    overflow: visible;
  }

  .header-inner {
    padding: 0 14px;
  }

  .logo-lockup {
    flex: 1 1 auto;
  }

  .logo {
    display: inline-flex;
  }

  .logo-text {
    flex: 0 0 auto;
    font-size: 22px;
  }

  .header-nav {
    gap: 14px;
  }

  .header-status {
    display: inline-flex;
    white-space: nowrap;
  }

}


/* =========================================================
   4. ABOUT & FAQ PAGES
   ========================================================= */

.about-page {
  min-height: 100vh;
  background: var(--grey-100);
}

.about-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 32px 96px;
}

.about-main h1,
.about-main h2 {
  font-family: "Space Grotesk", sans-serif;
}

.about-main h1 {
  margin: 0 0 16px;
  font-size: clamp(42px, 7vw, 72px);
  line-height: 1;
}

.about-intro {
  margin: 0 0 56px;
  color: var(--grey-700);
  font-size: 20px;
  line-height: 1.6;
}

.about-section {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--grey-300);
}

.about-section h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.about-section p,
.about-section li {
  color: var(--grey-700);
  font-size: 16px;
}

.about-section ol,
.about-section ul {
  margin: 0;
  padding-left: 24px;
}

/* Expandable questions on the FAQ page (+ / − toggle) */

.faq-accordion {
  border-top: 1px solid var(--grey-300);
}

.faq-item {
  border-bottom: 1px solid var(--grey-300);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  color: var(--black);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--green-dark);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--green-dark);
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.faq-item p {
  margin: 0 0 16px;
}

/* "Back to the map" button */

.about-back {
  display: inline-flex;
  margin-top: 52px;
  padding: 12px 18px;
  border-radius: 4px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.about-back:hover {
  background: var(--green-dark);
}


/* =========================================================
   5. SEARCH TOGGLE & MAP MESSAGE
   ========================================================= */

/* Round button that reopens the search panel once it is collapsed */

.search-toggle {
  position: fixed;
  top: 92px;
  left: 18px;
  z-index: 700;

  width: 46px;
  height: 46px;

  display: none;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: var(--white);
  color: var(--green-dark);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.16);

  cursor: pointer;

  font-size: 28px;
  line-height: 1;
}

.search-toggle:hover {
  background: var(--green-light);
}

.search-toggle span {
  display: block;
  transform: translateY(-1px);
}

.search-toggle.is-visible {
  display: flex;
}

/* Notice over the map, e.g. when location access is blocked */

.map-message {
  position: fixed;
  top: 92px;
  left: 50%;
  z-index: 700;

  width: max-content;
  max-width: min(420px, calc(100vw - 32px));

  margin: 0;
  padding: 10px 16px;

  transform: translateX(-50%);

  background: var(--white);
  border: 1px solid rgba(17, 23, 19, 0.08);
  border-left: 4px solid var(--green);
  border-radius: 10px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.12);

  color: var(--grey-900);

  font-size: 14px;
}

.map-message[hidden] {
  display: none;
}

@media (max-width: 700px) {

  .search-toggle {
    top: 76px;
    left: 14px;
    width: 44px;
    height: 44px;
  }

  /* Below the round search button so they don't overlap */
  .map-message {
    top: 132px;
  }

}


/* =========================================================
   6. EYEBROW LABEL
   Small uppercase-style label above panel headings.
   ========================================================= */

.eyebrow {
  margin: 0 0 18px;

  color: var(--green-dark);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}


/* =========================================================
   7. LOCATION BUTTON
   "Use my location" button and its status line.
   ========================================================= */

.location-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  padding: 11px 14px;

  border: 1px solid var(--grey-300);
  border-radius: 8px;

  background: var(--grey-100);
  color: var(--grey-900);

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.location-button:hover {
  background: var(--green-light);
  border-color: rgba(0, 168, 107, 0.35);
  color: var(--green-dark);
}

.location-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.location-status {
  margin: 10px 0 0;
  color: var(--grey-700);
  font-size: 14px;
}

.location-status:empty {
  display: none;
}


/* =========================================================
   8. POSTCODE SEARCH
   Postcode input + search button.
   ========================================================= */

.postcode-search {
  margin-top: 24px;
  max-width: 520px;
}

.postcode-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.postcode-row {
  display: flex;
  gap: 10px;
}

.postcode-input {
  flex: 1;
  min-width: 0;

  padding: 13px 14px;

  border: 1px solid var(--grey-300);
  border-radius: 8px;

  font-family: inherit;
  font-size: 15px;
  color: var(--black);

  background: var(--white);

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.postcode-input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 1px var(--green-dark);
}

.postcode-button {
  padding: 13px 20px;

  border: 0;
  border-radius: 8px;

  background: var(--green);
  color: var(--white);

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);

  transition:
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.postcode-button:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.postcode-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Small phones: compact input row (16px font stops iOS zooming in) */
@media (max-width: 600px) {

  .postcode-search {
    margin-top: 12px;
  }

  .postcode-search label {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .postcode-row {
    gap: 6px;
  }

  .postcode-input,
  .postcode-button {
    padding: 9px 10px;
    font-size: 16px;
  }

  .postcode-button {
    flex: 0 0 auto;
    width: auto;
  }

  .postcode-input:focus {
    outline-width: 2px;
    outline-offset: 0;
  }

}


/* =========================================================
   9. FILTERS
   Filter toggle button and the three dropdowns
   (connector / speed / etc.) in the search panel.
   ========================================================= */

.filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  margin-bottom: 18px;
  padding-bottom: 18px;

  border-bottom: 1px solid var(--grey-200);
}

.filters[hidden] {
  display: none;
}

/* "Filters" button that shows / hides the dropdowns */

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border: 1px solid var(--grey-300);
  border-radius: 7px;

  background: var(--white);
  color: var(--grey-700);

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.filter-toggle:hover,
.filter-toggle[aria-expanded="true"] {
  border-color: var(--green-dark);
  color: var(--green-dark);
}

.filter-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.filter-toggle span {
  font-size: 17px;
  line-height: 1;
}

/* Individual dropdowns */

.filters > div {
  min-width: 0;
}

.filters label {
  display: block;

  margin-bottom: 6px;

  color: var(--grey-700);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filters select {
  width: 100%;
  min-width: 0;

  padding: 10px 12px;

  border: 1px solid var(--grey-300);
  border-radius: 7px;

  background: var(--white);
  color: var(--black);

  font-family: inherit;
  font-size: 14px;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.filters select:hover {
  border-color: var(--grey-500);
}

.filters select:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--green-dark);
}


/* =========================================================
   10. MAP
   Full-screen Leaflet map and everything drawn on it.
   ========================================================= */

/* Full-screen map layout */

html:has(body.spider-page) {
  height: 100%;
}

.spider-page {
  height: 100%;
  overflow: hidden;
}

.spider-page #map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Centre crosshair (the favicon in a green circle).
   Its opacity is set inline by Leaflet's setOpacity() in spider.js. */

.spider-crosshair {
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.leaflet-marker-icon.spider-crosshair {
  pointer-events: none;
}

/* !important overrides the size Leaflet sets inline on the icon */
.spider-crosshair img {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;

  background-color: var(--green);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.10);
}

/* Leaflet zoom buttons and attribution */

.leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  color: var(--black) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.leaflet-control-attribution {
  font-size: 10px;
}

/* Numbered charger markers, coloured by charging speed.
   The same colours are applied to the number on each station card. */

.charger-marker {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--green);
  color: var(--white);

  border: 3px solid var(--white);
  border-radius: 50%;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 750;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.10);

  transition:
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.charger-marker--slow,
.station-number.charger-marker--slow {
  background: #a1d99b;
  color: #17422e;
}

.charger-marker--medium,
.station-number.charger-marker--medium {
  background: var(--green);
  color: var(--white);
}

.charger-marker--rapid,
.station-number.charger-marker--rapid {
  background: #238b45;
  color: var(--white);
}

.charger-marker--ultra-rapid,
.station-number.charger-marker--ultra-rapid {
  background: #005a32;
  color: var(--white);
}

.charger-marker-selected {
  transform: scale(1.22);

  box-shadow:
    0 0 0 4px var(--white),
    0 0 0 7px rgba(0, 168, 107, 0.30),
    0 5px 14px rgba(0, 0, 0, 0.22);

  z-index: 1000;
}

.charger-marker:hover {
  transform: scale(1.08);
}

/* User location marker (black pin with a car icon) */

.current-location-pin {
  background: transparent;
  border: 0;
}

.current-location-pin-shape {
  position: relative;
  width: 28px;
  height: 28px;
  background: #111;
  border: 3px solid var(--white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.current-location-car {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 3px;
  left: 3px;
  transform: rotate(45deg);
}


/* =========================================================
   11. FLOATING PANELS
   Search panel (left) and results panel (right), floating
   over the map. On tablet/mobile the search panel becomes a
   compact bar and the results panel a bottom sheet.
   ========================================================= */

/* Shared frosted-glass card look */
.spider-panel,
.station-list-panel {
  position: fixed;
  top: 92px;
  z-index: 600;

  max-width: calc(100vw - 48px);
  overflow-y: auto;

  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

border: 1px solid var(--grey-300);
  border-radius: 16px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Search panel */

.spider-panel {
  left: 24px;
  width: 360px;
  max-height: calc(100vh - 116px);
  padding: 26px;

  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 0s;
}

.spider-panel.is-collapsed {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
}

.spider-panel h1 {
  margin: 4px 0 12px;

  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;

  color: var(--black);
}

.spider-panel .hero-intro {
  margin: 0 0 22px;

  color: var(--grey-700);

  font-size: 15px;
  line-height: 1.55;
}

/* Results panel (list of nearby chargers) */

.station-list-panel {
  right: 24px;
  bottom: 24px;
  width: 380px;
  padding: 22px;

  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 220ms;
}

.station-list-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear 0s;
}

.station-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.station-list-header .eyebrow {
  margin: 0;
}

.station-list-panel h2 {
  margin: 0 0 4px;

  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;

  color: var(--black);
}

.station-list-note {
  margin: 0 0 14px;

  color: var(--grey-700);

  font-size: 12px;
}

/* "X chargers found" line */
.charger-count {
  margin: -4px 0 14px;
  color: var(--green-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* Hint shown on tablet/mobile only (not currently used in the HTML/JS) */
.map-usage-hint {
  display: none;
}


/* Tablet: search panel becomes a compact bar under the header,
   results panel becomes a bottom sheet so the map stays visible */
@media (max-width: 900px) {

  .spider-page #map {
    top: 60px;
    bottom: auto;
    height: calc(60vh - 60px);
  }

  .spider-panel {
    left: 12px;
    right: 12px;

    width: auto;
    max-width: none;
    max-height: 50vh;

    padding: 12px 16px;
  }

  .spider-panel h1 {
    font-size: 18px;
    margin: 0 0 4px;
  }

  .spider-panel .eyebrow,
  .spider-panel .hero-intro {
    display: none;
  }

  .filters {
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

   .station-list-panel.is-visible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;
    height: 80px;

    pointer-events: none;

    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.18)
    );
  }
  
.station-list-panel {
  top: 60vh;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  max-width: none;
  max-height: none;

  border-radius: 16px 16px 0 0;

  padding: 28px 16px 20px;

  box-shadow:
    0 -4px 16px rgba(0, 0, 0, 0.08),
    0 -12px 32px rgba(0, 0, 0, 0.08);
}

.station-list-panel::before {
  transition:
  width 150ms ease,
  background-color 150ms ease;
  content: "";
  position: absolute;

  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  width: 38px;
  height: 4px;

  border-radius: 999px;
  background: var(--grey-300);
}

.station-list-panel:active::before {
  width: 48px;
  background-color: var(--grey-400);
}

  .map-usage-hint {
    display: block;
    margin: 0 0 8px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 600;
  }

}

@media (max-width: 700px) {

  .charger-count {
    margin-bottom: 12px;
    font-size: 12px;
  }

}


/* =========================================================
   12. STATION CARDS
   One card per charger in the results panel. Click to
   select; the chevron expands the full price details.
   ========================================================= */

.station-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.station-list.is-loading {
  visibility: visible;
}

/* Loading skeleton cards */

.station-card-skeleton {
  cursor: default;
  pointer-events: none;
}

.station-card-skeleton .station-details {
  width: 100%;
}

.skeleton-block {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #edf1ef 25%,
    #f7f9f8 50%,
    #edf1ef 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.skeleton-title {
  width: 72%;
  height: 17px;
  margin-bottom: 9px;
}

.skeleton-address {
  width: 88%;
  height: 12px;
  margin-bottom: 12px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-200);
}

.skeleton-charging {
  width: 105px;
  height: 13px;
}

.skeleton-price {
  width: 55px;
  height: 13px;
}

.skeleton-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.skeleton-distance {
  width: 65px;
  height: 12px;
}

.skeleton-button {
  width: 78px;
  height: 34px;
  border-radius: 7px;
}

@keyframes skeleton-shimmer {

  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }

}

/* Card */

.station-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03);

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.station-card:hover {
  border-color: rgba(0, 168, 107, 0.35);

  transform: translateY(-1px);

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.04);
}

/* Selected card (matches the highlighted map marker) */

.station-card-selected {
  border: 2px solid var(--green);
}
/* Left column: number with the expand / collapse button underneath */

.station-aside {
  flex: 0 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.station-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 800;
  font-size: 12px;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.12);
}

/* Right column: name, address, operator, speed / price */

.station-details {
  flex: 1;
  min-width: 0;
}

.station-details h3 {
  margin: 0;
  color: var(--black);
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.station-address {
  margin: 4px 0 0;
  color: #5f686d;
  font-size: 13px;
  line-height: 1.4;
}

.station-operator {
  margin: 0 0 8px;

  color: var(--green-dark);

  font-size: 12px;
  font-weight: 600;
}

/* Operator line under the address on the collapsed card */
.station-operator-main {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #6b7772;
  line-height: 1.3;
}

/* Speed + price row, e.g. "50 kW | 79p/kWh" */

.station-charging-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e8ecea;
}

.station-charging-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: #1f2925;
  font-size: 0.95rem;
}

.station-power-icon {
  color: #00a86b;
  font-size: 0.95rem;
  line-height: 1;
}

.station-price {
  font-weight: 700;
  color: #1f2925;
  white-space: nowrap;
  font-size: 0.95rem;
}


.station-charging-summary {
  display: inline-flex;
  align-items: center;
  margin: 8px 0 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--green-light);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.station-price {
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid #d9dde2;
  color: var(--green-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Not currently used in the HTML/JS */
.station-price.is-unknown {
  color: var(--grey-700);
  font-size: 12px;
  font-weight: 400;
}

/* Not currently used in the HTML/JS */
.station-price-note {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Nearby amenity line, e.g. "☕ Café 2 min walk" */

.station-nearby-amenity {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  color: var(--grey-700);
  font-size: 12px;
  line-height: 1.35;
}

.station-nearby-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

/* Footer: distance + "Get directions" link */

.station-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.station-distance {
  font-size: 0.85rem;
  color: #5f6b66;
  line-height: 1.3;
}

 
.station-distance-value {
  font-weight: 700;
  color: #27332e;
}

.station-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  background: #00a86b;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.station-directions:hover {
  background: #008f5b;
}

.station-directions:active {
  transform: translateY(1px);
}

/* Expand / collapse chevron button */

.station-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--grey-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.station-toggle:hover {
  background: var(--green-light);
  border-color: rgba(0, 168, 107, 0.75);
  color: var(--green-dark);
}

.station-toggle span {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.station-expanded-open .station-toggle span {
  transform: rotate(225deg) translateY(-2px);
}

/* Expanded details (hidden until the chevron is clicked) */

.station-expanded {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-200);
}

.station-expanded-open .station-expanded {
  display: block;
  animation: stationExpand 150ms ease-out;
}

@keyframes stationExpand {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Full price text and access type in the expanded card */

.station-pricing {
  margin: 0 0 10px;
  padding: 6px 8px;

  background: var(--grey-100);
  border-radius: 6px;

  color: var(--grey-900);

  font-size: 12px;
}

.station-pricing p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-body);
}

.station-pricing p + p {
  margin-top: 3px;
}

.station-pricing .station-access {
  color: var(--grey-700);
  font-weight: 500;
}

/* Mobile: slightly smaller speed + price row */
@media (max-width: 700px) {

  .station-charging-row {
    gap: 8px;
    margin-top: 7px;
  }

  .station-charging-summary,
  .station-price {
    font-size: 13px;
  }

  .station-price {
    padding-left: 8px;
  }

}


/* =========================================================
   13. CONNECTION BADGES
   One pill per connector type in the expanded card,
   e.g. "CCS  50 kW  ×2".
   ========================================================= */

.connection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
}

.connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #d9e5df;
  border-radius: 8px;
  background: #f7faf8;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
}

/* Connector name */
.connection-badge strong {
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--green-text);
}

.connection-power {
  font-weight: 700;
  color: var(--black);
}

/* "×2" when there's more than one of the connector */
.connection-quantity {
  color: var(--grey-700);
  font-size: 0.8rem;
  font-weight: 500;
}

.connection-unavailable {
  color: #505a5f;
  font-size: 14px;
}

/* Not currently used in the HTML/JS */
.connection-list + .station-info {
  margin-top: 10px;
}

/* Not currently used in the HTML/JS */
.station-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}


/* =========================================================
   14. STATION STATUS
   Live availability line with a coloured dot.
   Not currently used in the HTML/JS.
   ========================================================= */

.station-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--green-text);
}

/* Note: --grey-600 isn't defined in :root, so this inherits its colour */
.station-status-updated {
  color: var(--grey-600);
  font-size: 0.75rem;
  font-weight: 400;
}

.station-status.is-unavailable {
  color: #a12b24;
}

.station-status.is-unknown {
  color: var(--text-muted);
}

.station-status::before {
  content: "";
  display: inline-block;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow: 0 0 0 3px var(--green-light);
}

.station-status.is-unknown::before {
  background: var(--grey-500);
  box-shadow: 0 0 0 3px var(--grey-200);
}


/* =========================================================
   15. LOADING CARDS
   Placeholder cards with a shimmer while chargers load.
   ========================================================= */

.loading-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.station-list:not(.is-loading) .loading-cards {
  display: none;
}

.loading-card {
  position: relative;
  height: 128px;
  width: 100%;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  background: var(--surface-soft);
  overflow: hidden;
}

.loading-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: loading-shimmer 1.6s ease-in-out infinite;
}

@keyframes loading-shimmer {
  100% {
    transform: translateX(100%);
  }
}


/* =========================================================
   16. CITY LANDING PAGES
   /ev-chargers/<city>/ — breadcrumbs plus the SEO content
   (intro, city links, how-to steps, rapid charging callout,
   FAQ and data note) inside the search panel.
   ========================================================= */

/* Breadcrumbs (Home / Cities / City) at the top of the search panel */

.spider-panel .breadcrumbs {
  position: relative;
  z-index: 10;
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.breadcrumbs a {
  color: var(--text-body);
  text-decoration: none;
}

.spider-panel .breadcrumbs a:hover {
  color: var(--green-text);
  text-decoration: underline;
}

.breadcrumbs .breadcrumb-current {
  color: var(--ink);
  font-weight: 600;
}

/* Main SEO content */

.city-information {
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}

.city-information h2,
.city-information h3 {
  color: var(--ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: -0.02em;
}

.city-information h2 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.2;
}

.city-information h3 {
  margin: 32px 0 10px;
  font-size: 21px;
  line-height: 1.3;
}

.city-information p {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.65;
}

.city-information a {
  color: var(--green-text);
  font-weight: 600;
}

.city-information a:hover {
  color: #004d1f;
}

/* Grid of links to other cities */

.city-links {
  margin-top: 32px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface-soft);
}

.city-links h3 {
  margin-top: 0;
}

.city-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.city-links a {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--white);
  color: var(--green-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.city-links a:hover {
  border-color: var(--green);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Numbered how-to steps */

.charging-steps {
  margin-top: 32px;
}

.charging-steps ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: charging-step;
}

.charging-steps li {
  position: relative;
  margin: 0 0 14px;
  padding: 15px 16px 15px 54px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--white);
  color: #3a3a42;
  font-size: 15px;
  line-height: 1.55;
  counter-increment: charging-step;
}

/* Step number in a green circle */
.charging-steps li::before {
  content: counter(charging-step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-text);
  font-size: 13px;
  font-weight: 700;
}

/* Rapid charging callout box */

.rapid-charging {
  margin-top: 32px;
  padding: 24px;
  border-radius: 14px;
  background: var(--green-tint);
}

.rapid-charging h3 {
  margin-top: 0;
}

.rapid-charging p {
  margin-bottom: 0;
}

/* City FAQ (+ / − accordion) */

.faq-section {
  margin-top: 36px;
}

.faq-section h2 {
  margin-bottom: 16px;
}

.faq-section details {
  margin: 0;
  border-top: 1px solid var(--border-soft);
}

.faq-section details:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.faq-section summary {
  position: relative;
  display: block;
  padding: 18px 42px 18px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-section summary::-webkit-details-marker {
  display: none;
}

.faq-section summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  color: var(--green-text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.faq-section details[open] summary::after {
  content: "−";
}

.faq-section summary:hover {
  color: var(--green-text);
}

.faq-section details p {
  max-width: 760px;
  margin: -2px 0 18px;
  padding-right: 42px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
}

/* Data source / freshness note */

.charging-data {
  margin-top: 32px;
  padding: 18px 20px;
  border-left: 3px solid var(--green);
  background: var(--surface-soft);
}

.charging-data p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Mobile: tighter city content, two-column city links */
@media (max-width: 700px) {

  .city-information {
    margin-top: 32px;
    padding-top: 24px;
  }

  .city-information h2 {
    font-size: 24px;
  }

  .city-information h3 {
    font-size: 19px;
  }

  .city-information p {
    font-size: 15px;
    line-height: 1.6;
  }

  .city-links {
    padding: 18px;
    border-radius: 12px;
  }

  .city-links-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .city-links a {
    padding: 10px 11px;
    font-size: 13px;
  }

  .charging-steps li {
    padding: 14px 14px 14px 50px;
    font-size: 14px;
  }

  .rapid-charging {
    padding: 20px;
  }

  .faq-section summary {
    padding: 16px 38px 16px 0;
    font-size: 15px;
  }

  .faq-section details p {
    padding-right: 0;
    font-size: 14px;
  }

}