/* Sayyarati fuel stations — modern map layout */
body.fuel-stations-body {
  --fuel-blue: #1264f3;
  --fuel-blue-deep: #0756d8;
  --fuel-ink: #102752;
  --fuel-muted: #6b7a90;
  --fuel-line: #dce6f3;
  --fuel-surface: rgba(255, 255, 255, .97);
  background: linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
}

body.fuel-stations-body .global-back-row {
  display: none !important;
}

body.fuel-stations-body .site-header {
  position: relative;
  z-index: 80;
}

body.fuel-stations-body .unified-app-topbar {
  min-height: 124px;
  padding-block: 18px 14px;
  background: linear-gradient(118deg, #082e82 0%, #0b57dd 53%, #1aa1f5 100%);
  box-shadow: 0 14px 34px rgba(9, 64, 151, .18);
}

body.fuel-stations-body .home-app-brand-word {
  font-size: clamp(32px, 6vw, 48px) !important;
  letter-spacing: -.8px;
}

body.fuel-stations-body .home-app-brand-subtitle {
  margin-top: 2px;
  font-size: clamp(13px, 2.7vw, 18px) !important;
  opacity: .97;
}

body.fuel-stations-body .home-header-action,
body.fuel-stations-body .home-menu-button {
  width: 58px !important;
  height: 58px !important;
  border-radius: 19px !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 25px rgba(0, 28, 84, .16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.fuel-stations-body main.fuel-page-modern {
  max-width: 1080px;
  padding: 14px 16px calc(118px + env(safe-area-inset-bottom));
}

.fuel-page-modern .fuel-map-search-panel {
  position: relative;
  z-index: 25;
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid rgba(200, 216, 237, .82) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 12px 30px rgba(30, 69, 124, .08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.fuel-page-modern .fuel-map-filter-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.fuel-page-modern .fuel-map-filter-pill {
  position: relative;
  width: 100% !important;
  min-width: 0;
  min-height: 58px !important;
  padding: 9px 16px !important;
  border: 1px solid #d6e1ef !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: #243653 !important;
  box-shadow: 0 7px 18px rgba(15, 44, 89, .06) !important;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fuel-page-modern .fuel-map-filter-pill:active {
  transform: scale(.985);
}

.fuel-page-modern .fuel-map-filter-pill--gps {
  border: 2px solid var(--fuel-blue) !important;
  color: var(--fuel-blue) !important;
  background: linear-gradient(145deg, #fff 0%, #f2f7ff 100%) !important;
}

.fuel-page-modern .fuel-map-filter-pill--gps.is-active {
  background: linear-gradient(145deg, #edf5ff 0%, #fff 100%) !important;
  box-shadow: 0 8px 22px rgba(18, 100, 243, .14) !important;
}

.fuel-page-modern .fuel-map-filter-pill__icon {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  color: var(--fuel-blue);
}

.fuel-page-modern .fuel-map-filter-pill__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fuel-page-modern .fuel-map-filter-pill b {
  font-size: 15px;
  font-weight: 950;
}

.fuel-page-modern .fuel-map-filter-pill select {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 0 0 18px !important;
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.fuel-page-modern .fuel-explorer-card--immersive {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
  border: 1px solid rgba(198, 214, 233, .8) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: #eef3f8 !important;
  box-shadow: 0 24px 58px rgba(20, 48, 88, .16) !important;
}

.fuel-page-modern .fuel-explorer-card--immersive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68);
}

.fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map {
  height: clamp(660px, 73dvh, 860px) !important;
  min-height: 660px !important;
  background: #eef3f8;
}

.fuel-page-modern .fuel-explorer-map .maplibregl-canvas {
  filter: saturate(.93) contrast(.98) brightness(1.035);
}

.fuel-page-modern .fuel-explorer-map .maplibregl-ctrl-bottom-left,
.fuel-page-modern .fuel-explorer-map .maplibregl-ctrl-bottom-right {
  opacity: .52;
  transform: scale(.88);
  transform-origin: bottom;
}

.fuel-page-modern .fuel-explorer-map-status {
  top: 16px !important;
  right: 50% !important;
  left: auto !important;
  z-index: 12 !important;
  width: max-content;
  max-width: calc(100% - 34px) !important;
  transform: translateX(50%);
  padding: 10px 14px !important;
  border: 1px solid rgba(203, 216, 233, .9) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #40536f !important;
  box-shadow: 0 10px 24px rgba(15, 43, 85, .12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fuel-page-modern .fuel-explorer-map-status strong {
  font-size: 12px;
  font-weight: 900;
}

.fuel-page-modern .fuel-map-floating-tools {
  position: absolute;
  z-index: 14;
  inset-inline-end: 22px;
  bottom: 240px;
  display: grid;
  gap: 12px;
}

.fuel-page-modern .fuel-explorer-recenter,
.fuel-page-modern .fuel-explorer-style-toggle {
  position: static !important;
  display: grid !important;
  place-items: center;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--fuel-blue) !important;
  box-shadow: 0 12px 28px rgba(18, 42, 78, .18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fuel-page-modern .fuel-explorer-recenter:active,
.fuel-page-modern .fuel-explorer-style-toggle:active {
  transform: scale(.93);
}

.fuel-page-modern .fuel-explorer-recenter svg,
.fuel-page-modern .fuel-explorer-style-toggle svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fuel-page-modern .fuel-explorer-style-toggle.is-active {
  background: var(--fuel-blue) !important;
  color: #fff !important;
}

.fuel-page-modern .fuel-explorer-selected--premium {
  left: 22px !important;
  right: 22px !important;
  bottom: 18px !important;
  z-index: 15 !important;
  padding: 24px 22px 20px !important;
  border: 1px solid rgba(223, 232, 243, .92) !important;
  border-radius: 28px !important;
  background: var(--fuel-surface) !important;
  box-shadow: 0 20px 48px rgba(14, 37, 73, .22) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
}

.fuel-page-modern .fuel-selected-handle {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: #d1d9e5;
  transform: translateX(-50%);
}

.fuel-page-modern .fuel-selected-topline {
  direction: ltr;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 40px;
  gap: 14px;
  align-items: center;
}

.fuel-page-modern .fuel-selected-copy {
  direction: rtl;
  text-align: start;
}

.fuel-page-modern .fuel-selected-icon {
  width: 76px;
  height: 76px;
  border-radius: 23px;
  background: linear-gradient(145deg, #eef6ff 0%, #dbeaff 100%);
  color: var(--fuel-blue);
  box-shadow: inset 0 0 0 1px rgba(18, 100, 243, .1), 0 9px 20px rgba(18, 100, 243, .08);
}

.fuel-page-modern .fuel-selected-copy > small {
  margin-bottom: 2px;
  color: #7d8ba0;
  font-size: 12px;
  font-weight: 950;
}

.fuel-page-modern .fuel-selected-copy > strong {
  color: var(--fuel-ink);
  font-size: clamp(21px, 4vw, 28px);
  line-height: 1.26;
  font-weight: 1000;
}

.fuel-page-modern .fuel-selected-meta {
  gap: 13px;
  margin-top: 7px;
  color: #718096;
  font-size: 13px;
  font-weight: 900;
}

.fuel-page-modern .fuel-selected-status {
  color: #10a968;
}

.fuel-page-modern .fuel-selected-status i {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 5px rgba(32, 198, 122, .13);
}

.fuel-page-modern .fuel-selected-copy > p {
  margin-top: 7px;
  color: #65758c;
  font-size: 12.5px;
  font-weight: 800;
}

.fuel-page-modern .fuel-selected-collapse {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #f2f6fb;
  color: #708099;
}

.fuel-page-modern .fuel-selected-actions {
  direction: rtl;
  grid-template-columns: 1.12fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.fuel-page-modern .fuel-selected-action {
  height: 56px;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: none;
}

.fuel-page-modern .fuel-selected-action span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.fuel-page-modern .fuel-selected-action svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fuel-page-modern .fuel-selected-action--route {
  border: 0;
  background: linear-gradient(135deg, #1768f7 0%, #0756d8 100%);
  color: #fff;
  box-shadow: 0 11px 22px rgba(18, 100, 243, .22);
}

.fuel-page-modern .fuel-selected-action--details {
  border: 1.5px solid #b9d2ff;
  background: rgba(255, 255, 255, .9);
  color: var(--fuel-blue);
}

.fuel-page-modern .fuel-explorer-selected--premium.is-collapsed {
  left: 22px !important;
  right: auto !important;
  width: min(360px, calc(100% - 44px));
  padding: 16px !important;
}

.fuel-page-modern .fuel-explorer-selected--premium.is-collapsed .fuel-selected-handle {
  display: none;
}

.fuel-page-modern .fuel-explorer-selected--premium.is-collapsed .fuel-selected-topline {
  grid-template-columns: 52px minmax(0, 1fr) 36px;
}

.fuel-page-modern .fuel-explorer-selected--premium.is-collapsed .fuel-selected-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

.fuel-page-modern .fuel-vector-station-marker {
  width: 38px;
  height: 49px;
  filter: drop-shadow(0 6px 7px rgba(15, 23, 42, .2));
}

.fuel-page-modern .fuel-vector-station-marker.is-active {
  transform: scale(1.14) translateY(-3px);
  filter: drop-shadow(0 9px 12px rgba(11, 92, 255, .32));
}

.fuel-page-modern .fuel-vector-user-marker {
  position: relative;
  z-index: 40 !important;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(8, 65, 168, .28));
}

.fuel-page-modern .fuel-vector-user-marker::before {
  width: var(--location-halo, 82px);
  height: var(--location-halo, 82px);
  background: radial-gradient(circle, rgba(18, 100, 243, .22) 0%, rgba(18, 100, 243, .11) 48%, rgba(18, 100, 243, 0) 72%);
  animation: fuelModernUserPulse 2.1s ease-out infinite;
}

.fuel-page-modern .fuel-vector-user-marker::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2580ff 0%, #0756d8 100%);
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px rgba(18, 100, 243, .18), 0 7px 17px rgba(9, 58, 149, .28);
}

.fuel-page-modern .fuel-vector-user-marker span {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.fuel-page-modern .fuel-vector-user-marker span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 19px solid currentColor;
  transform: translate(-50%, -58%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}

.fuel-page-modern .fuel-vector-user-marker.is-approximate::after {
  background: linear-gradient(145deg, #4b8df8 0%, #2f6bc8 100%);
}

@keyframes fuelModernUserPulse {
  0% { transform: scale(.58); opacity: .85; }
  75%, 100% { transform: scale(1.15); opacity: 0; }
}

body.fuel-stations-body .home-bottom-nav {
  border-top: 1px solid rgba(218, 227, 239, .86) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 -12px 32px rgba(20, 50, 92, .1) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 700px) {
  body.fuel-stations-body .unified-app-topbar {
    min-height: 112px;
    padding-block: 14px 10px;
  }

  body.fuel-stations-body .home-header-action,
  body.fuel-stations-body .home-menu-button {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }

  body.fuel-stations-body main.fuel-page-modern {
    padding: 10px 10px calc(112px + env(safe-area-inset-bottom));
  }

  .fuel-page-modern .fuel-map-search-panel {
    margin-bottom: 10px !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .fuel-page-modern .fuel-map-filter-row {
    gap: 7px !important;
  }

  .fuel-page-modern .fuel-map-filter-pill {
    min-height: 52px !important;
    padding: 7px 9px !important;
    border-radius: 17px !important;
  }

  .fuel-page-modern .fuel-map-filter-pill__icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .fuel-page-modern .fuel-map-filter-pill b,
  .fuel-page-modern .fuel-map-filter-pill select {
    font-size: 12px !important;
  }

  .fuel-page-modern .fuel-map-filter-pill select {
    padding-left: 10px !important;
  }

  .fuel-page-modern .fuel-explorer-card--immersive {
    border-radius: 25px !important;
  }

  .fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map {
    height: max(650px, calc(100dvh - 236px)) !important;
    min-height: 650px !important;
  }

  .fuel-page-modern .fuel-map-floating-tools {
    inset-inline-end: 14px;
    bottom: 218px;
    gap: 10px;
  }

  .fuel-page-modern .fuel-explorer-recenter,
  .fuel-page-modern .fuel-explorer-style-toggle {
    width: 52px !important;
    height: 52px !important;
  }

  .fuel-page-modern .fuel-explorer-recenter svg,
  .fuel-page-modern .fuel-explorer-style-toggle svg {
    width: 27px;
    height: 27px;
  }

  .fuel-page-modern .fuel-explorer-selected--premium {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 21px 14px 14px !important;
    border-radius: 23px !important;
  }

  .fuel-page-modern .fuel-selected-handle {
    top: 8px;
    width: 54px;
    height: 5px;
  }

  .fuel-page-modern .fuel-selected-topline {
    grid-template-columns: 62px minmax(0, 1fr) 34px;
    gap: 10px;
  }

  .fuel-page-modern .fuel-selected-icon {
    width: 62px;
    height: 62px;
    border-radius: 19px;
  }

  .fuel-page-modern .fuel-selected-icon svg {
    width: 40px;
    height: 40px;
  }

  .fuel-page-modern .fuel-selected-copy > strong {
    font-size: 19px;
  }

  .fuel-page-modern .fuel-selected-copy > small {
    font-size: 10px;
  }

  .fuel-page-modern .fuel-selected-meta {
    gap: 8px;
    margin-top: 5px;
    font-size: 11px;
  }

  .fuel-page-modern .fuel-selected-copy > p {
    margin-top: 5px;
    font-size: 10.5px;
  }

  .fuel-page-modern .fuel-selected-collapse {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 19px;
  }

  .fuel-page-modern .fuel-selected-actions {
    gap: 8px;
    margin-top: 13px;
  }

  .fuel-page-modern .fuel-selected-action {
    height: 49px;
    border-radius: 15px;
    font-size: 13px;
  }

  .fuel-page-modern .fuel-explorer-selected--premium.is-collapsed {
    left: 12px !important;
    width: min(315px, calc(100% - 24px));
  }

  .fuel-page-modern .fuel-vector-station-marker {
    width: 34px;
    height: 44px;
  }

  .fuel-page-modern .fuel-vector-user-marker {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 390px) {
  .fuel-page-modern .fuel-map-filter-pill {
    padding-inline: 6px !important;
  }

  .fuel-page-modern .fuel-map-filter-pill__icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .fuel-page-modern .fuel-map-filter-pill b,
  .fuel-page-modern .fuel-map-filter-pill select {
    font-size: 11px !important;
  }
}

/* 2026-07-15 — final visibility and mobile-safe layout corrections */
.fuel-page-modern .fuel-map-floating-tools {
  inset-inline-end: auto !important;
  right: 22px !important;
  left: auto !important;
}

.fuel-page-modern .maplibregl-marker.fuel-vector-user-marker {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999 !important;
  isolation: isolate;
}

.fuel-page-modern .fuel-vector-user-marker::before,
.fuel-page-modern .fuel-vector-user-marker::after,
.fuel-page-modern .fuel-vector-user-marker span,
.fuel-page-modern .fuel-vector-user-marker span::before {
  visibility: visible !important;
  opacity: 1;
}

@media (max-width: 900px) {
  body.fuel-stations-body {
    --fuel-mobile-nav-height: 92px;
  }

  .fuel-page-modern .fuel-explorer-selected--premium {
    bottom: calc(var(--fuel-mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .fuel-page-modern .fuel-map-floating-tools {
    right: 14px !important;
    left: auto !important;
    bottom: calc(var(--fuel-mobile-nav-height) + 250px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map {
    min-height: 690px !important;
  }
}

@media (max-width: 420px) {
  body.fuel-stations-body {
    --fuel-mobile-nav-height: 86px;
  }

  .fuel-page-modern .fuel-explorer-selected--premium {
    padding-inline: 12px !important;
  }

  .fuel-page-modern .fuel-selected-topline {
    grid-template-columns: 56px minmax(0, 1fr) 32px;
    gap: 8px;
  }

  .fuel-page-modern .fuel-selected-icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .fuel-page-modern .fuel-selected-actions {
    margin-top: 11px;
  }

  .fuel-page-modern .fuel-selected-action {
    height: 46px;
    font-size: 12px;
  }
}

/* V22 — Fuel + LPG + charging filters, compact map and nearby list */
.fuel-page-modern .fuel-kind-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
  direction:rtl;
}
.fuel-page-modern .fuel-kind-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  min-height:46px;
  padding:7px 10px;
  border:1px solid #d8e3f1;
  border-radius:15px;
  background:#fff;
  color:#51617a;
  font-size:13px;
  font-weight:950;
  box-shadow:0 5px 14px rgba(18,48,91,.055);
  transition:.18s ease;
}
.fuel-page-modern .fuel-kind-tab span{font-size:19px;line-height:1}
.fuel-page-modern .fuel-kind-tab b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fuel-page-modern .fuel-kind-tab.is-active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#1264f3,#0b92e8);
  box-shadow:0 9px 21px rgba(18,100,243,.22);
  transform:translateY(-1px);
}
.fuel-page-modern .fuel-kind-tab--lpg.is-active{background:linear-gradient(135deg,#10a55c,#35c46f)}
.fuel-page-modern .fuel-kind-tab--charging.is-active{background:linear-gradient(135deg,#673de6,#168fff)}

.fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map{
  height:clamp(390px,52dvh,540px)!important;
  min-height:390px!important;
}
.fuel-page-modern .fuel-map-floating-tools{bottom:184px!important}
.fuel-page-modern .fuel-explorer-recenter.is-active{
  color:#fff!important;
  background:linear-gradient(145deg,#1264f3,#0756d8)!important;
  box-shadow:0 12px 28px rgba(18,100,243,.32)!important;
}
.fuel-page-modern .fuel-explorer-selected--premium{
  left:14px!important;
  right:14px!important;
  bottom:12px!important;
  padding:17px 16px 14px!important;
  border-radius:22px!important;
}
.fuel-page-modern .fuel-selected-handle{top:7px;width:48px;height:4px}
.fuel-page-modern .fuel-selected-topline{grid-template-columns:58px minmax(0,1fr) 34px;gap:10px}
.fuel-page-modern .fuel-selected-icon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:18px;
  font-size:30px;
  line-height:1;
  background:linear-gradient(145deg,#eef5ff,#dfeaff);
  box-shadow:inset 0 0 0 1px rgba(18,100,243,.12);
}
.fuel-page-modern .fuel-selected-icon.is-lpg{background:linear-gradient(145deg,#eafff1,#d6f8e2)}
.fuel-page-modern .fuel-selected-icon.is-charging{background:linear-gradient(145deg,#f1ebff,#deebff)}
.fuel-page-modern .fuel-selected-actions{margin-top:10px;gap:8px}
.fuel-page-modern .fuel-selected-action{height:43px!important;border-radius:13px!important;font-size:12px!important}
.fuel-page-modern .fuel-selected-copy>strong{font-size:17px!important}
.fuel-page-modern .fuel-selected-copy>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fuel-page-modern .fuel-vector-station-marker{
  width:44px!important;
  height:54px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  filter:drop-shadow(0 7px 10px rgba(10,67,148,.28));
}
.fuel-page-modern .fuel-vector-station-marker__pin{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:3px solid #fff;
  border-radius:50% 50% 50% 10px;
  background:linear-gradient(145deg,#1877ff,#0756d8);
  color:#fff;
  transform:rotate(-45deg);
  box-shadow:0 0 0 2px rgba(18,100,243,.16);
}
.fuel-page-modern .fuel-vector-station-marker__pin b{font-size:20px;line-height:1;transform:rotate(45deg)}
.fuel-page-modern .fuel-vector-station-marker.is-lpg .fuel-vector-station-marker__pin{background:linear-gradient(145deg,#29c16d,#07894a);box-shadow:0 0 0 2px rgba(16,165,92,.17)}
.fuel-page-modern .fuel-vector-station-marker.is-charging .fuel-vector-station-marker__pin{background:linear-gradient(145deg,#7b4cf0,#117fe8);box-shadow:0 0 0 2px rgba(103,61,230,.17)}
.fuel-page-modern .fuel-vector-station-marker.is-active{transform:translateY(-3px) scale(1.13)!important;filter:drop-shadow(0 10px 14px rgba(11,92,255,.38))}

.fuel-page-modern .fuel-nearby-section{
  margin-top:14px;
  padding:16px;
  border:1px solid rgba(202,216,234,.85);
  border-radius:24px;
  background:rgba(255,255,255,.95);
  box-shadow:0 13px 32px rgba(26,57,102,.09);
}
.fuel-page-modern .fuel-nearby-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.fuel-page-modern .fuel-nearby-head h2{margin:2px 0 0;font-size:20px;line-height:1.25;color:#132d59}
.fuel-page-modern .fuel-nearby-head .eyebrow{font-size:10px;color:#1264f3;font-weight:900}
.fuel-page-modern .fuel-nearby-count{padding:6px 10px;border-radius:999px;background:#edf4ff;color:#1264f3;font-size:11px;font-weight:950;white-space:nowrap}
.fuel-page-modern .fuel-nearby-list{display:grid;gap:9px}
.fuel-page-modern .fuel-nearby-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:11px;
  border:1px solid #e0e8f3;
  border-radius:18px;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.fuel-page-modern .fuel-nearby-card.is-active{border-color:#6ca8ff;box-shadow:0 8px 21px rgba(18,100,243,.12);transform:translateY(-1px)}
.fuel-page-modern .fuel-nearby-card__icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#edf5ff;font-size:25px}
.fuel-page-modern .fuel-nearby-card.is-lpg .fuel-nearby-card__icon{background:#e9fbf0}
.fuel-page-modern .fuel-nearby-card.is-charging .fuel-nearby-card__icon{background:#f0edff}
.fuel-page-modern .fuel-nearby-card__copy{min-width:0}
.fuel-page-modern .fuel-nearby-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fuel-page-modern .fuel-nearby-card__top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#17325c;font-size:14px;font-weight:950}
.fuel-page-modern .fuel-nearby-card__distance{color:#1264f3;font-size:11px;font-weight:950;white-space:nowrap}
.fuel-page-modern .fuel-nearby-card__copy p{margin:2px 0 6px;color:#6d7b90;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuel-page-modern .fuel-nearby-card__chips{display:flex;gap:5px;overflow:hidden}
.fuel-page-modern .fuel-nearby-card__chips span{padding:3px 7px;border-radius:999px;background:#f1f5fa;color:#52637c;font-size:9.5px;font-weight:800;white-space:nowrap}
.fuel-page-modern .fuel-nearby-card__actions{display:grid;gap:6px}
.fuel-page-modern .fuel-nearby-card__actions button{min-width:76px;height:32px;padding:0 10px;border:0;border-radius:10px;font-size:10.5px;font-weight:950}
.fuel-page-modern .fuel-nearby-card__map{background:#edf4ff;color:#1264f3}
.fuel-page-modern .fuel-nearby-card__route{background:linear-gradient(135deg,#1264f3,#0b83e6);color:#fff}
.fuel-page-modern .fuel-nearby-empty{padding:22px;text-align:center;color:#7b8799;font-size:13px;font-weight:800}

@media(max-width:900px){
  .fuel-page-modern .fuel-explorer-selected--premium{bottom:10px!important}
  .fuel-page-modern .fuel-map-floating-tools{right:12px!important;bottom:174px!important}
  .fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map{height:clamp(370px,49dvh,460px)!important;min-height:370px!important}
}
@media(max-width:700px){
  .fuel-page-modern .fuel-kind-tabs{gap:5px;margin-bottom:7px}
  .fuel-page-modern .fuel-kind-tab{min-height:40px;padding:5px 4px;border-radius:12px;gap:3px;font-size:10px}
  .fuel-page-modern .fuel-kind-tab span{font-size:15px}
  .fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map{height:410px!important;min-height:410px!important}
  .fuel-page-modern .fuel-explorer-selected--premium{left:8px!important;right:8px!important;bottom:8px!important;padding:14px 10px 10px!important}
  .fuel-page-modern .fuel-selected-topline{grid-template-columns:48px minmax(0,1fr) 30px;gap:7px}
  .fuel-page-modern .fuel-selected-icon{width:48px;height:48px;border-radius:14px;font-size:24px}
  .fuel-page-modern .fuel-selected-copy>strong{font-size:14px!important}
  .fuel-page-modern .fuel-selected-meta{font-size:9px!important}
  .fuel-page-modern .fuel-selected-actions{margin-top:7px}
  .fuel-page-modern .fuel-selected-action{height:37px!important;font-size:10.5px!important}
  .fuel-page-modern .fuel-map-floating-tools{bottom:142px!important;gap:7px}
  .fuel-page-modern .fuel-explorer-recenter,.fuel-page-modern .fuel-explorer-style-toggle{width:44px!important;height:44px!important}
  .fuel-page-modern .fuel-nearby-section{margin-top:10px;padding:11px;border-radius:19px}
  .fuel-page-modern .fuel-nearby-head h2{font-size:16px}
  .fuel-page-modern .fuel-nearby-card{grid-template-columns:43px minmax(0,1fr);gap:8px;padding:9px}
  .fuel-page-modern .fuel-nearby-card__icon{width:42px;height:42px;border-radius:13px;font-size:21px}
  .fuel-page-modern .fuel-nearby-card__actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .fuel-page-modern .fuel-nearby-card__actions button{width:100%;height:34px}
}
@media(max-width:390px){
  .fuel-page-modern .fuel-explorer-card--immersive .fuel-explorer-map{height:390px!important;min-height:390px!important}
  .fuel-page-modern .fuel-kind-tab b{font-size:9px}
}
.fuel-page-modern .fuel-kind-tabs{width:100%}