:root{
  --green:#18a967;
  --green-dark:#0d8752;
  --ink:#152b43;
  --muted:#607086;
  --cream:#fff8e6;
  --paper:#fffdf6;
  --line:#e7e2d6;
  --gold:#efbd39;
  --blue:#1678ec;
  --shadow:0 16px 36px rgba(28,55,68,.15);
}
*{box-sizing:border-box}
html,body{
  position:fixed!important;inset:0!important;
  width:100%!important;height:100%!important;
  min-height:100%!important;max-height:100%!important;
  margin:0!important;padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:var(--cream);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}
body{touch-action:none}
#cartoonMap{
  position:fixed!important;inset:0!important;
  width:100%!important;height:100%!important;
  overflow:hidden!important;z-index:1;
}
#cartoonMap .maplibregl-map,
#cartoonMap .maplibregl-canvas-container,
#cartoonMap .maplibregl-canvas{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
}
#cartoonMap .maplibregl-canvas{outline:none}
.maplibregl-control-container{display:none!important}

/* soft paper treatment without a repeated texture */
#cartoonMap:after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.22),transparent 28%),
    radial-gradient(circle at 80% 76%,rgba(255,246,206,.18),transparent 32%),
    linear-gradient(rgba(255,251,235,.035),rgba(255,251,235,.035));
}

/* vector-map readability */
#cartoonMap .maplibregl-canvas{
  filter:saturate(1.08) contrast(.97) brightness(1.01);
}

/* top bar */
.cm-top{
  position:fixed;left:0;right:0;top:0;z-index:40;
  display:grid;grid-template-columns:360px minmax(280px,620px) auto 52px;
  align-items:start;gap:16px;
  padding:0 16px;
  pointer-events:none;
}
.cm-top>*{pointer-events:auto}
.cm-brand{
  display:flex;align-items:center;gap:10px;
  min-height:76px;padding:11px 17px 11px 10px;
  border-radius:0 0 24px 0;
  background:rgba(255,255,255,.98);
  color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow);
}
.cm-brand-pin{width:48px;height:56px;display:grid;place-items:center;flex:none;color:var(--green)}
.cm-brand-pin svg{width:48px;height:56px;display:block}
.cm-brand strong{display:block;font-size:23px;line-height:1;font-weight:900;letter-spacing:-.04em}
.cm-brand strong span{color:var(--green)}
.cm-brand small{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:750}
.cm-search{
  display:flex;align-items:center;gap:9px;
  height:50px;margin-top:13px;
  padding:0 10px;
  border:1px solid rgba(21,43,67,.08);
  background:rgba(255,255,255,.97);
  border-radius:15px;box-shadow:0 10px 26px rgba(28,55,68,.11);
}
.cm-search-icon{font-size:27px;line-height:1;color:var(--ink)}
.cm-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;font-weight:750}
.cm-search button{border:0;background:transparent;color:#8490a0;font-size:26px;line-height:1;cursor:pointer}
.cm-view-switch{display:flex;margin-top:13px;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(28,55,68,.11)}
.cm-view-switch button,.cm-view-switch a{
  height:50px;padding:0 17px;border:0;background:#fff;color:var(--muted);
  text-decoration:none;font-size:13px;font-weight:850;display:inline-flex;align-items:center;gap:7px;cursor:pointer
}
.cm-view-switch .is-active{background:var(--green);color:#fff}
.cm-account{
  width:52px;height:52px;margin-top:12px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  box-shadow:0 10px 26px rgba(28,55,68,.11);text-decoration:none
}
.cm-account svg{width:25px;height:25px}

.cm-radius-control{display:grid;gap:7px}
.cm-radius-value{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cm-radius-value strong{font-size:18px;color:var(--green-dark);font-weight:950}
.cm-radius-value span{color:var(--muted);font-size:10px;font-weight:750}
.cm-radius-scale{display:flex;justify-content:space-between;color:#8a96a3;font-size:9px;font-weight:750}
.cm-range{display:block;width:100%;height:22px;margin:1px 0 0;cursor:pointer;accent-color:var(--green)}
.cm-range:focus{outline:none}

/* filter card */
.cm-filters{
  position:fixed;left:16px;top:98px;z-index:40;width:350px;
  background:rgba(255,255,255,.98);border-radius:22px;box-shadow:var(--shadow);
  overflow:visible;
}
.cm-filter-section{padding:18px 20px;border-bottom:1px solid #f0ece3}
.cm-filter-section:last-child{border-bottom:0}
.cm-filter-section h2{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:15px;line-height:1.25;font-weight:900
}
.cm-section-icon{width:20px;height:20px;flex:none;color:var(--green)}
.cm-filter-section h2>strong{margin-left:auto;color:var(--green)}
.cm-select{
  width:100%;height:46px;padding:0 13px;border:1px solid var(--line);
  border-radius:12px;background:#fbfaf6;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  font-weight:850;cursor:pointer
}
.cm-fuel-menu{
  position:absolute;left:20px;right:20px;top:77px;z-index:60;
  padding:5px;background:#fff;border:1px solid #eee8db;border-radius:13px;
  box-shadow:var(--shadow)
}
.cm-fuel-menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:11px 12px;border-radius:9px;color:var(--ink);font-weight:750;cursor:pointer}
.cm-fuel-menu button:hover{background:#f3fbf6;color:var(--green-dark)}
.cm-range{width:100%;accent-color:var(--green)}
.cm-filter-title{
  width:100%;border:0;background:transparent;padding:0;display:flex;align-items:center;
  gap:9px;color:var(--ink);font-weight:900;cursor:pointer
}
.cm-filter-title>span:first-child{display:flex;align-items:center;gap:9px}
.cm-filter-title em{font-style:normal;min-width:24px;height:24px;padding:0 7px;display:grid;place-items:center;margin-left:auto;border-radius:999px;background:#e9f8ef;color:var(--green-dark);font-size:12px}
#cmExtraFilters{display:grid;gap:11px;margin-top:14px}
#cmExtraFilters label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#42546a}
#cmExtraFilters input{width:18px;height:18px;accent-color:var(--green)}
.cm-filters.collapsed #cmExtraFilters{display:none}

/* station card */
.cm-station-layer{
  position:fixed;left:16px;bottom:16px;z-index:45;width:470px;
  padding:17px 20px 18px;border:1px solid rgba(24,169,103,.10);
  border-radius:22px;background:rgba(255,255,255,.98);box-shadow:var(--shadow);
}
.cm-card-close{
  position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;border-radius:50%;
  background:#f2f4f6;color:#66768a;font-size:21px;cursor:pointer
}
.cm-card-head{display:flex;align-items:center;gap:12px;padding-right:30px}
.cm-card-logo{
  width:56px;height:56px;flex:none;display:grid;place-items:center;overflow:hidden;
  border:4px solid #fff;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(28,55,68,.12);
  color:var(--green);font-size:23px;font-weight:900
}
.cm-card-logo img{width:100%;height:100%;object-fit:contain}
.cm-card-title{min-width:0;flex:1}
.cm-card-title strong{display:block;font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-card-title span{display:block;margin-top:4px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-favorite{
  width:42px;height:42px;border:0;border-radius:50%;background:#f4f6f7;color:#aeb8c0;
  font-size:22px;cursor:pointer
}
.cm-favorite.is-favorite{color:var(--gold);background:#fff8df}
.cm-card-meta{display:flex;gap:16px;margin:14px 0 11px;padding-top:11px;border-top:1px solid #f0ede5;color:#57697d;font-size:12px;font-weight:800}
.cm-card-price-row{display:flex;align-items:end;justify-content:space-between;gap:10px}
.cm-card-price-row small{color:#8390a0;font-size:10px;font-weight:750}
.cm-card-price-row div small{display:block;margin-bottom:3px;color:var(--green-dark);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.cm-card-price-row strong{display:block;color:var(--green-dark);font-size:29px;letter-spacing:-.04em;font-weight:950}
.cm-details{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:44px;margin-top:13px;border-radius:12px;
  background:var(--green);color:#fff;text-decoration:none;font-size:13px;font-weight:900;
}

/* legend and controls */
.cm-legend{
  position:fixed;right:16px;bottom:16px;z-index:40;
  display:flex;gap:15px;padding:12px 15px;border-radius:15px;
  background:rgba(255,255,255,.96);box-shadow:var(--shadow);
  color:#53647a;font-size:11px;font-weight:800
}
.cm-legend i{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:6px;vertical-align:-2px}
.cm-legend .favorite{background:var(--gold)}
.cm-legend .cheap{background:var(--green)}
.cm-legend .other{background:#c1c9d2}
.cm-map-buttons{
  position:fixed;right:16px;bottom:112px;z-index:40;
  display:grid;gap:10px
}
.cm-map-buttons>button,.cm-zoom-group button{
  width:52px;height:52px;border:0;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:var(--shadow);font-size:27px;font-weight:850;cursor:pointer
}
.cm-zoom-group{display:grid;gap:8px}
.cm-locate-btn{color:#1678ec!important}
.cm-attribution{position:fixed;right:8px;bottom:5px;z-index:12;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.72);color:#68798b;font-size:8px;font-weight:800;pointer-events:none}
.cm-toast{position:fixed;left:50%;bottom:25px;z-index:100;transform:translateX(-50%);padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;box-shadow:var(--shadow)}

/* hand-drawn vegetation, tied to real forest polygon positions */
#cmIllustrationOverlay{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.cm-illustrated-tree{position:absolute;width:42px;height:54px;transform-origin:50% 100%;opacity:.9;filter:drop-shadow(0 2px 2px rgba(47,91,52,.18))}
.cm-illustrated-tree svg{display:block;width:100%;height:100%}


/* First-visit fuel choice — aligned with the MaPompe guest-auth modal. */
.cm-fuel-choice{
  position:fixed!important;
  inset:0!important;
  z-index:120!important;
  display:grid!important;
  place-items:center!important;
  padding:20px!important;
  background:rgba(0,26,53,.62)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.cm-fuel-choice-card{
  position:relative!important;
  width:min(620px,100%)!important;
  max-height:min(90vh,760px)!important;
  overflow:auto!important;
  padding:28px 28px 24px!important;
  border:1px solid rgba(255,255,255,.96)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.99)!important;
  box-shadow:0 30px 90px rgba(4,18,34,.32)!important;
}
.cm-fuel-choice-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.cm-fuel-choice-icon{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f5fff9,#dff7eb)!important;
  border:1px solid #b8e6ce!important;
  color:#00824A!important;
  font-size:30px!important;
  box-shadow:0 10px 24px rgba(0,130,74,.12)!important;
}
.cm-fuel-choice-kicker{
  margin:0 0 4px!important;
  color:#001A35!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
}
.cm-fuel-choice-eyebrow{
  display:block!important;
  color:#00824A!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
.cm-fuel-choice-card h2{
  margin:18px 0 8px!important;
  color:#001A35!important;
  font-size:clamp(27px,5vw,36px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
.cm-fuel-choice-intro{
  max-width:520px!important;
  margin:0 0 20px!important;
  color:#5C6F80!important;
  font-size:14px!important;
  line-height:1.55!important;
}
.cm-choice-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.cm-choice-item{
  min-height:76px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  padding:11px 12px!important;
  border:1px solid #dfe7eb!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff 0%,var(--fuel-soft,#f8fbfb) 100%)!important;
  color:#001A35!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.cm-choice-item:hover{
  transform:translateY(-1px)!important;
  border-color:var(--fuel-color,#00B95F)!important;
  box-shadow:0 8px 20px rgba(0,26,53,.08)!important;
}
.cm-choice-fuel{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  border-radius:13px!important;
  background:var(--fuel-color,#00B95F)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)!important;
}
.cm-choice-item:first-child .cm-choice-fuel{color:#001A35!important}
.cm-choice-copy{min-width:0!important}
.cm-choice-copy strong{
  display:block!important;
  color:#001A35!important;
  font-size:14px!important;
  font-weight:950!important;
}
.cm-choice-copy small{
  display:block!important;
  margin-top:3px!important;
  color:#5C6F80!important;
  font-size:10px!important;
  font-weight:750!important;
}
.cm-fuel-choice-memory{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin-top:16px!important;
  padding:11px 13px!important;
  border:1px solid #e5eaf0!important;
  border-radius:14px!important;
  background:#f7f9fb!important;
  color:#435266!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:750!important;
}
.cm-fuel-choice-memory span:first-child{
  width:23px!important;
  height:23px!important;
  flex:0 0 23px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:rgba(0,185,95,.10)!important;
  color:#00824A!important;
  font-size:12px!important;
  font-weight:950!important;
}
@media(max-width:700px){
  .cm-fuel-choice{padding:12px!important}
  .cm-fuel-choice-card{
    width:100%!important;
    max-height:92vh!important;
    padding:22px 17px 17px!important;
    border-radius:22px!important;
  }
  .cm-fuel-choice-icon{width:50px!important;height:50px!important;flex-basis:50px!important;font-size:25px!important}
  .cm-fuel-choice-kicker{font-size:10px!important}
  .cm-fuel-choice-eyebrow{font-size:8px!important}
  .cm-fuel-choice-card h2{margin-top:15px!important;font-size:26px!important}
  .cm-fuel-choice-intro{font-size:13px!important;margin-bottom:15px!important}
  .cm-choice-grid{grid-template-columns:1fr!important;gap:8px!important}
  .cm-choice-item{min-height:68px!important;padding:9px 10px!important;border-radius:14px!important}
  .cm-choice-fuel{width:44px!important;height:44px!important;font-size:10px!important}
  .cm-choice-copy strong{font-size:13px!important}
}
/* Never cover the WebGL station canvas with a cosmetic pseudo-element. */
#cartoonMap:after{display:none!important}

/* Final station marker rules: MapLibre owns the geographic position. */
.maplibregl-marker{pointer-events:auto!important;z-index:25!important}
.cm-pin-wrap{
  display:flex!important;
  position:relative!important;
  flex-direction:column!important;
  align-items:center!important;
  cursor:pointer!important;
  transform:translateY(-3px)!important;
  filter:drop-shadow(0 4px 5px rgba(20,45,60,.16));
  pointer-events:auto!important;
}
.cm-pin-logo{
  width:54px!important;height:54px!important;
  border:5px solid #fff!important;
  border-radius:50%!important;
  background:#fff!important;
  display:grid!important;place-items:center!important;
  overflow:hidden!important;
}
.cm-pin-logo img{width:100%!important;height:100%!important;object-fit:contain!important;display:block}
.cm-pin-price{
  margin-top:4px!important;
  min-width:74px!important;
  padding:5px 9px!important;
  border:1px solid rgba(21,43,67,.06)!important;
  border-radius:10px!important;
  background:#fffdf5!important;
  color:#17324c!important;
  font-size:14px!important;font-weight:900!important;
  line-height:1.1!important;text-align:center!important;
  white-space:nowrap!important;
  box-shadow:0 4px 11px rgba(21,43,67,.10);
}
.cm-pin-wrap.best .cm-pin-logo{
  width:68px!important;height:68px!important;
  border:5px solid #fff!important;
  box-shadow:0 0 0 5px rgba(24,169,103,.32),0 8px 19px rgba(24,169,103,.22)!important;
}
.cm-pin-wrap.best .cm-pin-price{
  background:#effcf4!important;
  color:#0d8b55!important;
  border-color:#bfe8cf!important;
}
.cm-pin-wrap.favorite .cm-pin-logo{
  box-shadow:0 0 0 4px #efbd39,0 5px 14px rgba(20,45,60,.15)!important;
}
.cm-pin-wrap.selected .cm-pin-logo{
  box-shadow:0 0 0 4px #1677e9,0 6px 15px rgba(22,119,233,.18)!important;
}
@media(max-width:900px){
 .cm-pin-logo{width:43px!important;height:43px!important;border-width:4px!important}
 .cm-pin-price{min-width:62px!important;font-size:11px!important;padding:4px 6px!important}
 .cm-pin-wrap.best .cm-pin-logo{width:56px!important;height:56px!important}
 .cm-pin-wrap.best .cm-pin-price{font-size:12px!important}
}

/* Screenshot pass: closer to the reference proportions. */
.cm-pin-wrap{
  transform:translateY(-2px)!important;
}
.cm-pin-logo{
  width:42px!important;height:42px!important;
  border-width:4px!important;
}
.cm-pin-price{
  min-width:61px!important;
  margin-top:2px!important;
  padding:4px 7px!important;
  border-radius:8px!important;
  font-size:12px!important;
  line-height:1!important;
}
.cm-pin-wrap.best .cm-pin-logo{
  width:56px!important;height:56px!important;
  border-width:4px!important;
}
.cm-pin-wrap.best .cm-pin-price{
  min-width:67px!important;
  font-size:13px!important;
}
.cm-pin-wrap.favorite .cm-pin-logo{
  box-shadow:0 0 0 3px #efbd39,0 4px 10px rgba(20,45,60,.13)!important;
}
.cm-station-layer{
  width:430px!important;
  padding:14px 18px 15px!important;
  border-radius:20px!important;
}
.cm-card-logo{width:50px!important;height:50px!important}
.cm-card-price-row strong{font-size:26px!important}
.cm-details{height:40px!important;margin-top:10px!important}
.cm-top{
  grid-template-columns:360px minmax(320px,760px) auto 52px!important;
}

/* CRITICAL: MapLibre owns .cm-marker-root transform. Only the inner visual may be offset. */
.cm-marker-root{
  position:relative!important;
  width:82px!important;
  height:102px!important;
  margin:0!important;
  padding:0!important;
  transform:none;
  pointer-events:none;
  overflow:visible!important;
}
.cm-marker-root .cm-pin-wrap{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  transform:translate(-50%,-4px)!important;
  pointer-events:auto!important;
  display:flex!important;
  visibility:visible!important;
}
.cm-marker-root .cm-pin-wrap.is-cheapest-focus{
  transform:translate(-50%,-4px) scale(1.06)!important;
  transform-origin:50% 100%!important;
}
.cm-marker-root .cm-pin-wrap.best{
  transform:translate(-50%,-4px)!important;
}

/* ============================================================
   REFERENCE DESIGN PASS — desktop composition
   ============================================================ */
.cm-top{
  grid-template-columns:340px minmax(360px,620px) max-content 52px!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:0 14px!important;
}
.cm-brand{
  width:340px!important;
  min-height:72px!important;
  padding:9px 15px 9px 10px!important;
  border-radius:0 0 22px 0!important;
  box-shadow:0 12px 28px rgba(25,55,70,.14)!important;
}
.cm-brand-pin,.cm-brand-pin svg{width:44px!important;height:54px!important}
.cm-brand strong{font-size:23px!important}
.cm-brand small{font-size:9.5px!important}
.cm-search{
  width:100%!important;
  max-width:620px!important;
  height:50px!important;
  margin-top:11px!important;
  border-radius:16px!important;
}
.cm-view-switch{
  width:max-content!important;
  max-width:175px!important;
  margin-top:11px!important;
  border-radius:15px!important;
}
.cm-view-switch button,.cm-view-switch a{
  height:50px!important;
  padding:0 15px!important;
  white-space:nowrap!important;
}
.cm-account{
  margin-top:10px!important;
  width:50px!important;height:50px!important;
}
.cm-filters{
  left:10px!important;
  top:93px!important;
  width:345px!important;
  border-radius:22px!important;
  box-shadow:0 18px 40px rgba(25,55,70,.16)!important;
}
.cm-filter-section{padding:17px 19px!important}
.cm-filter-section h2{font-size:14px!important;margin-bottom:11px!important}
.cm-select{height:45px!important;border-radius:12px!important;background:#fbf8ef!important}
.cm-range{
  height:6px!important;
  accent-color:var(--green)!important;
  cursor:pointer!important;
}
#cmExtraFilters{
  gap:9px!important;
  margin-top:13px!important;
}
#cmExtraFilters label{
  min-height:29px!important;
  font-size:12.5px!important;
}
#cmExtraFilters input{
  appearance:none!important;
  width:20px!important;height:20px!important;
  border:1.5px solid #b9c2ca!important;
  border-radius:5px!important;
  background:#fff!important;
  flex:none!important;
  position:relative!important;
}
#cmExtraFilters input:checked{
  background:var(--green)!important;
  border-color:var(--green)!important;
}
#cmExtraFilters input:checked:after{
  content:""!important;
  position:absolute!important;
  left:5px!important;top:2px!important;
  width:5px!important;height:9px!important;
  border:solid #fff!important;border-width:0 2px 2px 0!important;
  transform:rotate(45deg)!important;
}
.cm-station-layer{
  left:14px!important;bottom:14px!important;
  width:405px!important;
  padding:15px 17px 16px!important;
  border-radius:21px!important;
  box-shadow:0 18px 42px rgba(25,55,70,.17)!important;
}
.cm-card-logo{width:50px!important;height:50px!important}
.cm-card-title strong{font-size:16px!important}
.cm-card-title span{font-size:11.5px!important}
.cm-card-meta{margin:11px 0 9px!important}
.cm-card-price-row strong{font-size:28px!important}
.cm-details{height:41px!important;border-radius:11px!important}
.cm-legend{
  right:14px!important;bottom:14px!important;
  padding:10px 13px!important;border-radius:14px!important;
  gap:12px!important;font-size:10px!important;
}
.cm-map-buttons{
  right:14px!important;bottom:103px!important;gap:9px!important;
}
.cm-map-buttons>button,.cm-zoom-group button{
  width:50px!important;height:50px!important;
  font-size:25px!important;
}

/* Cartoon station treatment: the map owns the point; the pin is the illustration. */
.cm-marker-root .cm-pin-wrap{transform:translate(-50%,-3px)!important}
.cm-pin-wrap .cm-pin-logo{
  width:46px!important;height:46px!important;
  border:4px solid #fff!important;
}
.cm-pin-wrap .cm-pin-price{
  min-width:64px!important;
  margin-top:3px!important;
  padding:4px 7px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
.cm-pin-wrap.best .cm-pin-logo{
  width:59px!important;height:59px!important;
  box-shadow:0 0 0 5px rgba(24,169,103,.25),0 7px 17px rgba(24,169,103,.18)!important;
}
.cm-pin-wrap.best .cm-pin-price{font-size:13px!important}

/* Keep the illustrative forest decoration subtle and sparse. */
.cm-illustrated-tree{width:36px!important;height:48px!important;opacity:.82!important}

.cm-user-location-marker{
  position:relative!important;width:32px!important;height:32px!important;
  display:grid!important;place-items:center!important;pointer-events:none!important;
}
.cm-user-location-pulse{
  position:absolute!important;inset:0!important;border-radius:50%!important;
  background:rgba(22,120,236,.20)!important;border:1px solid rgba(22,120,236,.15)!important;
  animation:cm-location-pulse 2s ease-out infinite!important;
}
.cm-user-location-core{
  position:relative!important;width:15px!important;height:15px!important;
  border-radius:50%!important;background:#1678ec!important;
  border:3px solid #fff!important;z-index:2!important;
  box-shadow:0 2px 8px rgba(12,74,140,.30)!important;
}
@keyframes cm-location-pulse{
  0%{transform:scale(.45);opacity:.75}
  65%{transform:scale(1.15);opacity:.16}
  100%{transform:scale(1.28);opacity:0}
}

/* ============================================================
   CARTOON ILLUSTRATION POLISH
   ============================================================ */
#cartoonMap:before{
  content:"";
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 18%,rgba(255,255,255,.19) 0 18%,transparent 42%),
    radial-gradient(ellipse at 88% 22%,rgba(255,248,212,.16) 0 16%,transparent 40%),
    radial-gradient(ellipse at 56% 92%,rgba(220,239,177,.13) 0 16%,transparent 42%);
}
#cartoonMap .maplibregl-canvas{
  filter:saturate(1.02) contrast(.96) brightness(1.015);
}
.cm-illustrated-tree:nth-child(3n){opacity:.76!important}
.cm-illustrated-tree:nth-child(3n) svg{transform:scale(.84)}
.cm-illustrated-tree:nth-child(4n) svg{transform:scale(1.12)}

/* Rich vector illustration layer: no raster textures, no tiled background images. */
#cmIllustrationOverlay{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.cm-illustration-tree{
  position:absolute!important;
  width:46px!important;height:58px!important;
  transform-origin:50% 100%!important;
  opacity:.92!important;
  filter:drop-shadow(0 2px 2px rgba(48,95,55,.16));
}
.cm-illustration-tree svg{width:100%;height:100%;display:block}
.cm-illustration-boat{
  position:absolute!important;
  width:76px!important;height:48px!important;
  opacity:.88!important;
  filter:drop-shadow(0 2px 2px rgba(34,87,112,.13));
}
.cm-illustration-boat svg{width:100%;height:100%;display:block}

@media(max-width:900px){
 .cm-illustration-tree{width:34px!important;height:44px!important}
 .cm-illustration-boat{width:60px!important;height:38px!important}
}

/* Dense illustrated landscape layer */
.cm-illustration-cluster{
  position:absolute!important;
  width:150px!important;height:86px!important;
  transform-origin:50% 100%!important;
  opacity:.94!important;
  filter:drop-shadow(0 2px 2px rgba(50,94,53,.12));
}
.cm-illustration-cluster svg{width:100%;height:100%;display:block}
.cm-illustration-hill{
  position:absolute!important;
  width:180px!important;height:90px!important;
  transform:translate(-50%,-50%)!important;
  opacity:.8!important;
}
.cm-illustration-hill svg{width:100%;height:100%;display:block}

/* ============================================================
   TERRAIN ILLUSTRATION — soft topographic relief across real green
   vector areas. These are non-raster SVG contours clipped to OSM
   landcover polygons.
   ============================================================ */
#cmIllustrationOverlay{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.cm-relief-svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:hidden!important;
}
.cm-illustration-tree{
  position:absolute!important;
  width:48px!important;
  height:58px!important;
  transform-origin:50% 100%!important;
  opacity:.94!important;
  filter:drop-shadow(0 2px 2px rgba(47,91,52,.13));
}
.cm-illustration-tree svg{display:block;width:100%;height:100%}
.cm-illustration-boat{
  position:absolute!important;
  width:76px!important;
  height:48px!important;
  opacity:.9!important;
  filter:drop-shadow(0 2px 2px rgba(34,87,112,.12));
}
.cm-illustration-boat svg{display:block;width:100%;height:100%}

/* Hide the old single-hill treatment; relief rings now provide the terrain. */
.cm-illustration-hill{display:none!important}

@media(max-width:900px){
  .cm-illustration-tree{width:34px!important;height:44px!important}
  .cm-illustration-boat{width:60px!important;height:38px!important}
}

/* Decorative trees are real MapLibre markers: their geographic anchors remain stable through pan/zoom. */
#cmFixedTrees{position:absolute!important;inset:0!important;z-index:9!important;pointer-events:none!important}
.cm-fixed-tree{
  position:relative!important;
  width:46px!important;height:54px!important;
  margin:0!important;padding:0!important;
  pointer-events:none!important;
  transform-origin:50% 100%!important;
  opacity:.9!important;
}
.cm-fixed-tree svg{display:block;width:100%;height:100%}

/* Disable the previous screen-projected illustration systems. */
#cmIllustrationOverlay{display:none!important}
.cm-relief-svg{display:none!important}
.cm-illustration-hill{display:none!important}
.cm-illustration-cluster{display:none!important}

/* Trees intentionally disabled: keep relief/vector map only. */
#cmFixedTrees,
.cm-fixed-tree,
#cmIllustrationOverlay .cm-illustration-tree,
#cmIllustrationOverlay .cm-illustration-cluster{
  display:none!important;
}

.cm-brand-select{position:relative!important;display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;height:46px!important;padding:0 12px!important;border:1px solid #dfe7e2!important;border-radius:13px!important;background:linear-gradient(180deg,#ffffff 0%,#f8fbf9 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 10px rgba(20,65,45,.05)!important;cursor:pointer!important}
.cm-brand-select:focus-within{border-color:#70c89b!important;box-shadow:0 0 0 3px rgba(24,169,103,.12),inset 0 1px 0 rgba(255,255,255,.8)!important}
.cm-brand-select-icon{width:26px!important;height:26px!important;display:grid!important;place-items:center!important;flex:none!important;border-radius:8px!important;background:#e9f8ef!important;color:var(--green-dark)!important;font-size:14px!important}
.cm-brand-select .cm-filter-select{appearance:none!important;-webkit-appearance:none!important;width:100%!important;height:100%!important;padding:0 26px 0 0!important;border:0!important;outline:0!important;background:transparent!important;color:var(--ink)!important;font-size:13px!important;font-weight:850!important;cursor:pointer!important}
.cm-brand-select-arrow{position:absolute!important;right:12px!important;top:50%!important;transform:translateY(-55%)!important;color:var(--green-dark)!important;font-size:19px!important;font-weight:900!important;pointer-events:none!important}

/* Full-width brand selector inside the filter card. */
#cmExtraFilters .cm-filter-subsection{width:100%!important;min-width:0!important}
#cmExtraFilters .cm-brand-select{display:flex!important;width:100%!important;min-width:0!important;flex:1 1 100%!important;align-self:stretch!important;margin:6px 0 0!important;padding:0 12px!important;overflow:hidden!important}
#cmExtraFilters .cm-brand-select .cm-filter-select{display:block!important;flex:1 1 auto!important;min-width:0!important;width:0!important;max-width:none!important}

/* Main-site visual alignment: shared header, city search and station sheet. */
.cm-city-search{
  position:fixed!important;left:50%!important;top:78px!important;transform:translateX(-50%)!important;z-index:35!important;
  display:flex!important;align-items:center!important;gap:9px!important;width:min(460px,calc(100vw - 32px))!important;height:48px!important;
  padding:0 8px 0 12px!important;border:1px solid rgba(15,36,61,.08)!important;border-radius:15px!important;
  background:rgba(255,255,255,.96)!important;box-shadow:0 10px 26px rgba(11,31,51,.14)!important;backdrop-filter:blur(14px)!important;
}
.cm-city-search:focus-within{box-shadow:0 0 0 3px rgba(18,138,75,.12),0 10px 26px rgba(11,31,51,.14)!important;border-color:rgba(18,138,75,.28)!important}
.cm-city-search-icon{width:28px!important;height:28px!important;display:grid!important;place-items:center!important;flex:0 0 28px!important;color:#5b6b7c!important}
.cm-city-search-icon svg{width:19px!important;height:19px!important;display:block!important}
.cm-city-search input{width:100%!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#10233a!important;font:700 13px/1.2 Inter,system-ui,sans-serif!important}
.cm-city-search input::placeholder{color:#8b97a6!important}
.cm-city-search button{width:36px!important;height:36px!important;border:0!important;border-radius:11px!important;background:#0b1f33!important;color:#fff!important;display:grid!important;place-items:center!important;flex:none!important;cursor:pointer!important}
.cm-city-search button svg{width:17px!important;height:17px!important}

.cm-filters{top:136px!important;z-index:31!important}

.cm-station-layer{
  position:fixed!important;left:50%!important;right:auto!important;bottom:14px!important;transform:translateX(-50%)!important;
  width:min(720px,calc(100vw - 24px))!important;max-height:min(62vh,560px)!important;overflow:auto!important;
  padding:10px 18px 18px!important;border:1px solid rgba(15,36,61,.08)!important;border-radius:22px!important;
  background:rgba(255,255,255,.98)!important;box-shadow:0 18px 55px rgba(11,31,51,.24)!important;z-index:45!important;
}
.cm-card-close{position:absolute!important;top:10px!important;right:12px!important;width:34px!important;height:34px!important;border:1px solid #e6ebf0!important;border-radius:12px!important;background:#f8fafc!important;color:#607086!important;font-size:21px!important;line-height:1!important;cursor:pointer!important}
.cm-card-brand-row{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;padding:3px 43px 0 0!important}
.cm-card-logo{width:46px!important;height:46px!important;flex:0 0 46px!important;display:grid!important;place-items:center!important;overflow:hidden!important;border:0!important;border-radius:14px!important;background:#0b1f33!important;color:#fff!important;font-size:18px!important;font-weight:900!important;box-shadow:none!important}
.cm-card-logo img{width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important}
.cm-card-title{min-width:0!important;flex:1!important}
.cm-card-title strong{display:block!important;color:#0b1f33!important;font-size:17px!important;line-height:1.2!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cm-card-title span{display:block!important;margin-top:3px!important;color:#5b6b7c!important;font-size:11px!important;font-weight:700!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cm-card-brand-row .cm-favorite{width:40px!important;height:40px!important;flex:0 0 40px!important;border:0!important;border-radius:12px!important;background:#f3f6f9!important;color:#aab4bf!important;font-size:21px!important;cursor:pointer!important}
.cm-card-brand-row .cm-favorite.is-favorite{color:#efbd39!important;background:#fff8df!important}
.cm-card-address-block{margin-top:11px!important;padding:10px 12px!important;border-radius:13px!important;background:#f7f9fb!important;border:1px solid #edf1f5!important}
.cm-card-section-label{display:block!important;margin-bottom:3px!important;color:#8b97a6!important;font-size:9px!important;font-weight:950!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.cm-card-address-block p{margin:0!important;color:#435266!important;font-size:12px!important;line-height:1.4!important}
.cm-card-info-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:9px!important}
.cm-card-info{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;min-height:58px!important;padding:9px 10px!important;border:1px solid #e5eaf0!important;border-radius:13px!important;background:#fff!important}
.cm-card-info-icon{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;flex:0 0 30px!important;border-radius:9px!important;background:#f1f5f9!important;color:#0b1f33!important;font-size:14px!important;font-weight:900!important}
.cm-card-info div{min-width:0!important}.cm-card-info small{display:block!important;margin-bottom:2px!important;color:#94a3b8!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.04em!important}.cm-card-info strong{display:block!important;color:#0b1f33!important;font-size:12px!important;line-height:1.2!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cm-card-section{margin-top:13px!important}.cm-card-section-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:10px!important;margin-bottom:7px!important}.cm-card-section-head>span{color:#8b97a6!important;font-size:9px!important;font-weight:950!important;letter-spacing:.08em!important;text-transform:uppercase!important}.cm-card-section-head small{color:#94a3b8!important;font-size:9px!important;font-weight:750!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.cm-card-prices{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.cm-card-price{min-width:0!important;padding:9px 9px!important;border:1px solid #e4e9ef!important;border-radius:12px!important;background:#f7f9fb!important}
.cm-card-price span{display:block!important;color:#64748b!important;font-size:9px!important;font-weight:950!important;letter-spacing:.05em!important;text-transform:uppercase!important}.cm-card-price strong{display:block!important;margin-top:3px!important;color:#0b1f33!important;font-size:15px!important;line-height:1.15!important;font-weight:950!important}.cm-card-price small{display:block!important;margin-top:3px!important;color:#94a3b8!important;font-size:8px!important;font-weight:800!important}.cm-card-price.is-on{background:#0b1f33!important;border-color:#0b1f33!important}.cm-card-price.is-on span,.cm-card-price.is-on strong{color:#fff!important}.cm-card-price.is-on small{color:rgba(255,255,255,.7)!important}
.cm-card-services{display:flex!important;flex-wrap:wrap!important;gap:6px!important}.cm-card-service{padding:6px 8px!important;border:1px solid #e5eaf0!important;border-radius:999px!important;background:#f7f9fb!important;color:#53647a!important;font-size:9px!important;font-weight:800!important}
.cm-card-empty{grid-column:1/-1!important;padding:10px!important;border-radius:11px!important;background:#f7f9fb!important;color:#8b97a6!important;font-size:11px!important;text-align:center!important}
.cm-card-actions{display:grid!important;grid-template-columns:1.2fr 1fr 1fr!important;gap:7px!important;margin-top:13px!important}.cm-card-action{display:flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;padding:0 10px!important;border-radius:11px!important;text-decoration:none!important;font-size:11px!important;font-weight:900!important;cursor:pointer!important}.cm-card-action.primary{background:#0b1f33!important;color:#fff!important;border:1px solid #0b1f33!important}.cm-card-action.secondary{background:#f6f8fa!important;color:#0b1f33!important;border:1px solid #e5eaf0!important}
@media(max-width:900px){
 .cm-city-search{top:72px!important;width:calc(100vw - 24px)!important}
 .cm-filters{top:124px!important}
 .cm-station-layer{left:8px!important;right:8px!important;bottom:8px!important;transform:none!important;width:auto!important;max-height:65vh!important;padding:9px 12px 13px!important}
 .cm-card-info-grid{grid-template-columns:1fr 1fr!important}.cm-card-info:nth-child(3){display:none!important}.cm-card-prices{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cm-card-actions{grid-template-columns:1fr 1fr!important}.cm-card-actions .primary{grid-column:1/-1}.cm-card-section-head small{max-width:45%}
}

/* City search open/close control. */
.cm-city-search-toggle{
  position:fixed!important;right:12px!important;top:78px!important;z-index:36!important;
  width:48px!important;height:48px!important;display:grid!important;place-items:center!important;
  border:1px solid rgba(15,36,61,.08)!important;border-radius:15px!important;
  background:rgba(255,255,255,.96)!important;color:#0b1f33!important;
  box-shadow:0 10px 26px rgba(11,31,51,.14)!important;backdrop-filter:blur(14px)!important;
  cursor:pointer!important;transition:transform .18s ease,background .18s ease,color .18s ease!important;
}
.cm-city-search-toggle:hover{transform:translateY(-1px)!important}
.cm-city-search-toggle.is-open{background:#0b1f33!important;color:#fff!important}
.cm-city-search-toggle svg{width:19px!important;height:19px!important}
.cm-city-search[hidden]{display:none!important}
@media(min-width:901px){
  .cm-city-search{width:min(410px,calc(100vw - 128px))!important;}
}
@media(max-width:900px){
  .cm-city-search-toggle{top:72px!important;right:12px!important;width:46px!important;height:46px!important}
  .cm-city-search{top:72px!important;left:12px!important;right:68px!important;transform:none!important;width:auto!important}
}


/* Cartoon-only search integrated into the shared main topbar. */
.cartoon-map-app .topbar{z-index:40!important}
.cartoon-map-app .cm-topbar-search{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex:0 0 46px!important;
  min-width:46px!important;
  transition:flex-basis .2s ease,flex-grow .2s ease!important;
}
.cartoon-map-app .cm-topbar-search.is-open{
  flex:1 1 min(430px,42vw)!important;
  min-width:0!important;
  max-width:460px!important;
}
.cartoon-map-app .cm-topbar-search-toggle{
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  background:#fff!important;
  color:#0b1f33!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
}
.cartoon-map-app .cm-topbar-search-toggle:hover{
  background:#f7fafc!important;
  transform:none!important;
}
.cartoon-map-app .cm-topbar-search-toggle.is-open{
  background:#0b1f33!important;
  color:#fff!important;
  border-color:#0b1f33!important;
}
.cartoon-map-app .cm-topbar-search-toggle svg{
  width:19px!important;
  height:19px!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:auto!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:44px!important;
  margin:0!important;
  padding:0 7px 0 10px!important;
  border-radius:14px!important;
  box-shadow:none!important;
  background:rgba(247,249,251,.96)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search:focus-within{
  box-shadow:0 0 0 3px rgba(18,138,75,.10)!important;
  border-color:rgba(18,138,75,.28)!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search[hidden]{
  display:none!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search-icon{
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search input{
  font-size:12px!important;
}
.cartoon-map-app .cm-topbar-search .cm-city-search button{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
}
@media(max-width:700px){
  .cartoon-map-app .cm-topbar-search.is-open{
    flex:1 1 auto!important;
    max-width:none!important;
  }
  .cartoon-map-app .cm-topbar-search .cm-city-search{
    height:42px!important;
  }
  .cartoon-map-app .cm-topbar-search-toggle{
    width:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }
}


/* Price ranking parity with the main map. */
.cartoon-map-app .cm-pin-wrap.cheap .cm-pin-price{color:#128a4b!important}
.cartoon-map-app .cm-pin-wrap.pricey .cm-pin-price{color:#c43c1a!important}
.cartoon-map-app .cm-pin-wrap.mid .cm-pin-price{color:#17324c!important}
.cartoon-map-app .cm-pin-wrap.favorite .cm-pin-logo{box-shadow:0 0 0 3px #efbd39,0 4px 10px rgba(20,45,60,.13)!important}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus{
  z-index:30!important;
  transform:translate(-50%,-5px) scale(1.16)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-logo{
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:0 0 0 5px rgba(22,163,74,.18),0 8px 19px rgba(22,163,74,.22)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-price{
  min-width:67px!important;
  background:linear-gradient(135deg,#15803d,#16a34a)!important;
  border-color:rgba(255,255,255,.95)!important;
  color:#fff!important;
  font-weight:950!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus.favorite .cm-pin-logo{
  box-shadow:0 0 0 5px rgba(22,163,74,.18),0 0 0 8px rgba(239,189,57,.50),0 8px 19px rgba(22,163,74,.22)!important;
}
.cartoon-map-app .cheapest-card{
  top:78px!important;
  left:376px!important;
  z-index:34!important;
}
.cartoon-map-app .cheapest-card[hidden]{display:none!important}
.cartoon-map-app .cheapest-card-price{color:#128a4b!important}

.cm-mobile-filter-close{
  display:none;
}

.cm-mobile-filter-btn{
  display:none;
  position:fixed!important;
  left:10px!important;
  bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  z-index:50!important;
  min-height:46px!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  color:#0b1f33!important;
  box-shadow:0 10px 28px rgba(11,31,51,.20)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  align-items:center!important;
  gap:7px!important;
  font:850 12px/1 Inter,system-ui,sans-serif!important;
}
.cm-mobile-filter-btn span{font-size:16px!important}
.cm-mobile-filter-btn em{
  min-width:20px!important;height:20px!important;padding:0 6px!important;
  display:grid!important;place-items:center!important;border-radius:999px!important;
  background:#e9f8ef!important;color:#0d8752!important;font-style:normal!important;font-size:10px!important;
}
.cm-mobile-filter-btn.is-active{background:#0b1f33!important;color:#fff!important;border-color:#0b1f33!important}
.cm-mobile-filter-btn.is-active em{background:#fff!important;color:#0b1f33!important}

@media(max-width:900px){
  /* The map mode switch is unnecessary on the Cartoon mobile view. */
  .cartoon-map-app .cm-view-switch,
  .cartoon-map-app .map-mode-switch,
  .cartoon-map-app .map-view-switch,
  .cartoon-map-app .map-mode,
  .cartoon-map-app [data-map-mode],
  .cartoon-map-app [data-view-switch]{
    display:none!important;
  }

  .cartoon-map-app .cheapest-card{
    top:76px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
  }
  .cartoon-map-app .cm-filters{
    display:none!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-height:min(62vh,520px)!important;
    overflow:auto!important;
    z-index:48!important;
    border-radius:18px!important;
    box-shadow:0 18px 45px rgba(11,31,51,.24)!important;
    padding-top:56px!important;
  }

    .cartoon-map-app .cm-mobile-filter-close{
    position:absolute!important;
    top:10px!important;
    right:12px!important;
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:34px!important;
    padding:0!important;
    border:1px solid #e6ebf0!important;
    border-radius:12px!important;
    background:#f8fafc!important;
    color:#607086!important;
    box-shadow:none!important;
    font-size:21px!important;
    line-height:1!important;
    cursor:pointer!important;
    z-index:2!important;
  }
  .cartoon-map-app .cm-mobile-filter-close span{
    display:block!important;
    font-size:21px!important;
    line-height:1!important;
  }
  .cartoon-map-app .cm-filters.mobile-open{display:block!important}
  .cartoon-map-app .cm-filters.mobile-open #cmExtraFilters{display:none!important}
  .cartoon-map-app .cm-filters.mobile-open:not(.collapsed) #cmExtraFilters{display:grid!important}

  /* Mobile: the filter choices are a real dropdown/accordion. */
  .cartoon-map-app .cm-filter-title{
    min-height:46px!important;
    padding:0 2px!important;
    border-radius:12px!important;
    background:#f7faf8!important;
  }
  .cartoon-map-app .cm-filter-title > span:first-child{
    padding-left:8px!important;
  }
  .cartoon-map-app .cm-filter-title em{
    margin-left:auto!important;
    margin-right:3px!important;
  }
  .cartoon-map-app .cm-filter-title #cmFilterArrow{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#0d8752!important;
    box-shadow:0 2px 7px rgba(20,65,45,.08)!important;
  }
  .cartoon-map-app .cm-filter-section:last-child{
    padding-bottom:12px!important;
  }
  .cartoon-map-app .cm-mobile-filter-btn{
    display:flex!important;
    left:10px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  .cartoon-map-app .cm-legend{display:none!important}
  .cartoon-map-app .cm-map-buttons{
    right:10px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  .cartoon-map-app .cm-map-buttons .cm-locate-btn{display:none!important}
  .cartoon-map-app .cm-station-layer{bottom:64px!important}
  .cartoon-map-app #cmCardServicesSection{display:none!important}
}


/* Mobile filter dropdown starts closed when the panel itself opens. */
@media(max-width:900px){
  .cartoon-map-app .cm-filters.mobile-open.collapsed #cmExtraFilters{
    display:none!important;
  }
}

/* Station services: compact square icon grid for quick scanning. */
.cartoon-map-app .cm-card-services{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(38px,1fr))!important;
  gap:7px!important;
  width:100%!important;
}
.cartoon-map-app .cm-card-service{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e5eaf0!important;
  border-radius:10px!important;
  background:#f7f9fb!important;
  color:#0b1f33!important;
  font-size:17px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  cursor:default!important;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.cartoon-map-app .cm-card-service:hover,
.cartoon-map-app .cm-card-service:focus-visible{
  background:#fff!important;
  border-color:#b8dfc9!important;
  box-shadow:0 4px 10px rgba(20,65,45,.08)!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}
.cartoon-map-app .cm-card-service[title="AdBlue"]{
  font-size:8px!important;
  letter-spacing:-.02em!important;
}
@media(max-width:900px){
  .cartoon-map-app .cm-card-services{
    grid-template-columns:repeat(6,38px)!important;
  }
}
@media(max-width:420px){
  .cartoon-map-app .cm-card-services{
    grid-template-columns:repeat(5,38px)!important;
  }
}


/* Service filters: selectable square icons, no visible native checkboxes. */
.cartoon-map-app .cm-service-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin-top:8px!important;
}
.cartoon-map-app .cm-service-choice{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #dfe7e2!important;
  border-radius:12px!important;
  background:#f8faf9!important;
  color:#53647a!important;
  cursor:pointer!important;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.cartoon-map-app .cm-service-choice:hover{
  transform:translateY(-1px)!important;
  border-color:#9adcbc!important;
  background:#fff!important;
  box-shadow:0 5px 13px rgba(20,65,45,.08)!important;
}
.cartoon-map-app .cm-service-choice:focus-within{
  outline:3px solid rgba(24,169,103,.13)!important;
  outline-offset:2px!important;
}
.cartoon-map-app .cm-service-choice input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.cartoon-map-app .cm-service-icon{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:inherit!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  user-select:none!important;
}
.cartoon-map-app .cm-service-choice input:checked + .cm-service-icon{
  background:linear-gradient(145deg,#15803d,#16a34a)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 7px 15px rgba(22,163,74,.22)!important;
}
.cartoon-map-app .cm-service-choice input:checked + .cm-service-icon::after{
  content:'✓'!important;
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#128a4b!important;
  font-size:10px!important;
  font-weight:950!important;
  box-shadow:0 2px 5px rgba(11,31,51,.12)!important;
}
.cartoon-map-app .cm-service-choice:nth-child(6) .cm-service-icon{
  font-size:9px!important;
  letter-spacing:-.03em!important;
}
@media(max-width:900px){
  .cartoon-map-app .cm-service-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
  }
}
@media(max-width:420px){
  .cartoon-map-app .cm-service-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
}


/* Service tiles: completely hide the native checkbox. */
.cartoon-map-app #cmExtraFilters .cm-service-choice input.cm-service-filter{
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}


/* Station card services use readable labels; icon tiles remain only in filters. */
.cartoon-map-app .cm-card-services{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  width:100%!important;
}
.cartoon-map-app .cm-card-service{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  padding:6px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #e5eaf0!important;
  border-radius:999px!important;
  background:#f7f9fb!important;
  color:#53647a!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-align:center!important;
  user-select:text!important;
  cursor:default!important;
  box-shadow:none!important;
}
.cartoon-map-app .cm-card-service:hover{
  transform:none!important;
  background:#f7f9fb!important;
  border-color:#e5eaf0!important;
  box-shadow:none!important;
}


/* Cartoon topbar search: the trigger is replaced by the search field when open. */
@media(min-width:701px){
  .cartoon-map-app .topbar{
    display:flex!important;
    align-items:center!important;
  }
  .cartoon-map-app .topbar .brand{
    flex:0 1 280px!important;
    min-width:190px!important;
    max-width:280px!important;
  }
  .cartoon-map-app .cm-topbar-search{
    flex:0 0 44px!important;
    min-width:44px!important;
    width:44px!important;
    margin-left:auto!important;
  }
  .cartoon-map-app .cm-topbar-search.is-open{
    flex:1 1 520px!important;
    width:auto!important;
    max-width:560px!important;
  }
}
.cartoon-map-app .cm-topbar-search.is-open .cm-topbar-search-toggle{
  display:none!important;
}
.cartoon-map-app .cm-topbar-search.is-open .cm-city-search{
  display:flex!important;
}
.cartoon-map-app .cm-city-search[hidden]{
  display:none!important;
}

@media(max-width:700px){
  .cartoon-map-app .topbar .brand{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .cartoon-map-app .cm-topbar-search{
    flex:0 0 42px!important;
    min-width:42px!important;
    width:42px!important;
  }
  .cartoon-map-app .cm-topbar-search.is-open{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
  }
  .cartoon-map-app .cm-topbar-search.is-open .cm-city-search{
    width:100%!important;
    height:42px!important;
  }
}

/* Cheapest banner: same placement/proportions as the production map. */
.cartoon-map-app .cheapest-card{
  top:calc(80px + var(--safe-top))!important;
  left:12px!important;
  right:auto!important;
  width:min(380px,calc(100vw - 24px))!important;
  z-index:34!important;
}
@media(max-width:600px){
  .cartoon-map-app .cheapest-card{
    top:calc(76px + var(--safe-top))!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
  }
}


/* Final desktop/map-marker polish. */
.cartoon-map-app .cm-pin-wrap{
  position:relative!important;
}
.cartoon-map-app .cm-pin-favorite{
  position:absolute!important;
  top:-8px!important;
  right:-8px!important;
  z-index:4!important;
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:#fff8df!important;
  color:#b8861b!important;
  font-size:14px!important;
  line-height:1!important;
  box-shadow:0 3px 8px rgba(184,134,27,.20)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus{
  transform:translate(-50%,-4px) scale(1.06)!important;
  filter:drop-shadow(0 5px 10px rgba(18,138,75,.20))!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-logo{
  box-shadow:
    0 0 0 3px rgba(18,138,75,.75),
    0 0 0 7px rgba(18,138,75,.16),
    0 7px 16px rgba(18,138,75,.18)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-price{
  background:#effaf3!important;
  color:#128a4b!important;
  border-color:#bfe3cc!important;
  box-shadow:0 4px 11px rgba(18,138,75,.12)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-favorite{
  color:#b8861b!important;
  background:#fff8df!important;
}
.cartoon-map-app .cm-pin-wrap.cheap .cm-pin-price{color:#128a4b!important}
.cartoon-map-app .cm-pin-wrap.pricey .cm-pin-price{color:#c43c1a!important}
.cartoon-map-app .cm-pin-wrap.mid .cm-pin-price{color:#17324c!important}

/* Search toggle: only one control is visible in either state. */
.cartoon-map-app .cm-topbar-search .cm-city-search-toggle[hidden]{display:none!important}
.cartoon-map-app .cm-topbar-search .cm-city-search[hidden]{display:none!important}

/* Desktop topbar: keep the brand compact and prevent the search from
   pushing the identity or location control onto another line. */
@media(min-width:901px){
  .cartoon-map-app .topbar{
    min-height:60px!important;
  }
  .cartoon-map-app .topbar .brand{
    flex:0 1 300px!important;
    min-width:190px!important;
    max-width:300px!important;
  }
  .cartoon-map-app .cm-topbar-search{
    flex:0 0 44px!important;
    min-width:44px!important;
    width:44px!important;
  }
  .cartoon-map-app .cm-topbar-search.is-open{
    flex:1 1 520px!important;
    width:min(520px,54vw)!important;
    min-width:320px!important;
    max-width:560px!important;
  }
  .cartoon-map-app .cm-topbar-search .cm-city-search{
    max-width:none!important;
  }
}

/* The production-style cheapest banner sits below the topbar. */
.cartoon-map-app .cheapest-card{
  top:calc(80px + var(--safe-top))!important;
  left:12px!important;
  width:min(380px,calc(100vw - 24px))!important;
}
.cartoon-map-app .cheapest-card:hover{
  transform:translateY(-1px)!important;
}
@media(max-width:600px){
  .cartoon-map-app .cheapest-card{
    top:calc(76px + var(--safe-top))!important;
  }
}


/* Mobile search: replace the brand area instead of squeezing all topbar controls. */
@media(max-width:900px){
  .cartoon-map-app .topbar.cm-search-open .brand{
    display:none!important;
  }
  .cartoon-map-app .topbar.cm-search-open .cm-topbar-search{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }
  .cartoon-map-app .topbar.cm-search-open .cm-city-search{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    border-radius:13px!important;
  }
  .cartoon-map-app .topbar.cm-search-open .cm-topbar-search-toggle{
    display:none!important;
  }
  .cartoon-map-app .topbar.cm-search-open{
    gap:7px!important;
  }
}

/* Favorite marker star stays visible above the logo. */
.cartoon-map-app .cm-pin-favorite{
  pointer-events:none!important;
}


/* Dynamic service filters: compact list, like the brand selector. */
.cartoon-map-app .cm-service-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  max-height:250px!important;
  overflow:auto!important;
  padding-right:2px!important;
}
.cartoon-map-app .cm-service-option{
  position:relative!important;
  min-width:0!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:5px 9px 5px 6px!important;
  border:1px solid #dfe7e2!important;
  border-radius:11px!important;
  background:#f8faf9!important;
  color:#435266!important;
  text-align:left!important;
  cursor:pointer!important;
  font:800 11px/1.15 Inter,system-ui,sans-serif!important;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.cartoon-map-app .cm-service-option:hover{
  background:#fff!important;
  border-color:#9adcbc!important;
  transform:translateY(-1px)!important;
  box-shadow:0 4px 10px rgba(20,65,45,.07)!important;
}
.cartoon-map-app .cm-service-option.is-selected{
  background:#eefaf3!important;
  border-color:#6dca99!important;
  color:#0d8752!important;
  box-shadow:0 0 0 2px rgba(24,169,103,.08)!important;
}
.cartoon-map-app .cm-service-option-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#fff!important;
  border:1px solid #e7ece9!important;
  font-size:16px!important;
  line-height:1!important;
}
.cartoon-map-app .cm-service-option.is-selected .cm-service-option-icon{
  background:#18a967!important;
  border-color:#18a967!important;
  color:#fff!important;
}
.cartoon-map-app .cm-service-option:nth-child(6) .cm-service-option-icon{
  font-size:8px!important;
  letter-spacing:-.03em!important;
}
.cartoon-map-app .cm-service-option-label{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.cartoon-map-app .cm-service-option::after{
  content:'+'!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
  color:#9aa7b5!important;
  font-size:14px!important;
  font-weight:900!important;
}
.cartoon-map-app .cm-service-option.is-selected::after{
  content:'✓'!important;
  color:#128a4b!important;
}
.cartoon-map-app .cm-service-empty{
  display:block!important;
  grid-column:1/-1!important;
  padding:10px 11px!important;
  border:1px dashed #dce5df!important;
  border-radius:10px!important;
  color:#8996a4!important;
  background:#fafcfb!important;
  font-size:10px!important;
  font-weight:750!important;
}
@media(max-width:600px){
  .cartoon-map-app .cm-service-list{
    grid-template-columns:1fr!important;
    max-height:220px!important;
  }
}


/* Final marker states: match the production map's favorite/price/24H language. */
.cartoon-map-app .cm-pin-favorite{display:none!important}
.cartoon-map-app .cm-pin-logo{position:relative!important}
.cartoon-map-app .cm-pin-24h{
  position:absolute!important;
  top:-7px!important;
  right:-7px!important;
  z-index:5!important;
  display:grid!important;
  place-items:center!important;
  min-width:26px!important;
  height:17px!important;
  padding:0 5px!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#111827!important;
  box-shadow:0 2px 7px rgba(11,31,51,.12)!important;
  font:900 8px/1 Inter,system-ui,sans-serif!important;
  letter-spacing:.02em!important;
  pointer-events:none!important;
}
.cartoon-map-app .cm-pin-price{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
.cartoon-map-app .cm-pin-price-favorite{
  display:inline-block!important;
  color:#b8861b!important;
  font-size:12px!important;
  line-height:1!important;
  text-shadow:0 1px 1px rgba(255,255,255,.7)!important;
}
.cartoon-map-app .cm-pin-wrap.cheap .cm-pin-price{
  background:#effaf3!important;
  border-color:#bfe3cc!important;
  color:#128a4b!important;
}
.cartoon-map-app .cm-pin-wrap.pricey .cm-pin-price{
  background:#fff2ee!important;
  border-color:#f0c8bb!important;
  color:#c43c1a!important;
}
.cartoon-map-app .cm-pin-wrap.mid .cm-pin-price{
  background:#fffdf5!important;
  border-color:rgba(21,43,67,.06)!important;
  color:#17324c!important;
}
.cartoon-map-app .cm-pin-wrap.favorite .cm-pin-logo{
  box-shadow:0 0 0 3px #efbd39,0 4px 10px rgba(184,134,27,.14)!important;
}
.cartoon-map-app .cm-pin-wrap.favorite .cm-pin-price{
  background:linear-gradient(135deg,#fffdf7 0%,#fff7df 58%,#f5e5b3 100%)!important;
  color:#5b4817!important;
  border-color:rgba(202,157,48,.52)!important;
  box-shadow:0 4px 11px rgba(80,60,20,.12)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-price{
  background:linear-gradient(135deg,#15803d,#16a34a)!important;
  border-color:rgba(255,255,255,.95)!important;
  color:#fff!important;
  box-shadow:0 5px 13px rgba(18,138,75,.16)!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-price-favorite{
  color:#f6c945!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-logo{
  box-shadow:0 0 0 3px rgba(18,138,75,.74),0 0 0 7px rgba(18,138,75,.14),0 7px 16px rgba(18,138,75,.16)!important;
}

/* 24H badge must be allowed to sit outside the logo circle. */
.cartoon-map-app .cm-pin-logo{overflow:visible!important}
.cartoon-map-app .cm-pin-logo img{border-radius:50%!important}


/* Desktop cartoon filter panel position. */
@media(min-width:901px){
  .cartoon-map-app .cm-filters{
    top:150px!important;
    z-index:31!important;
  }
}

/* Search submit: solid magnifier. */
.cartoon-map-app .cm-topbar-search .cm-city-search button svg{
  width:18px!important;
  height:18px!important;
  display:block!important;
}

/* 24H badge: move slightly further to the right of the station logo. */
.cartoon-map-app .cm-pin-24h{
  right:-11px!important;
  top:-7px!important;
}


@media(max-width:900px){
  .cartoon-map-app .mi-options{display:none!important}
}


@media(max-width:900px){
  .cartoon-map-app .cm-mobile-filter-btn{z-index:20!important}
}


/* ============================================================
   MAPOMPE BRAND PALETTE — production visual identity
   ============================================================ */
.cartoon-map-app{
  --green:#00B95F;
  --green-dark:#00824A;
  --ink:#001A35;
  --muted:#5C6F80;
  --cream:#F6F8F2;
  --paper:#FFFFFF;
  --line:#DDE5EA;
  --gold:#FFCD00;
  --blue:#0077D7;
  --brand-red:#FA0019;
  --fuel-gazole:#FFCD00;
  --fuel-e10:#9BDC46;
  --fuel-sp95:#00B95F;
  --fuel-sp98:#00824A;
  --fuel-e85:#0077D7;
  --fuel-gplc:#009FB8;
}

/* Core MaPompe UI */
.cartoon-map-app .cm-section-icon,
.cartoon-map-app .cm-filter-section h2>strong,
.cartoon-map-app .cm-filter-title em,
.cartoon-map-app .cm-brand-select-icon,
.cartoon-map-app .cm-brand-select-arrow{
  color:var(--green)!important;
}
.cartoon-map-app .cm-filter-title em{
  background:rgba(0,185,95,.10)!important;
  color:var(--green-dark)!important;
}
.cartoon-map-app .cm-range{
  accent-color:var(--green)!important;
}
.cartoon-map-app .cm-select{
  color:var(--ink)!important;
  border-color:var(--line)!important;
  background:#fff!important;
}
.cartoon-map-app .cm-fuel-menu button:hover{
  background:rgba(0,185,95,.08)!important;
  color:var(--green-dark)!important;
}
.cartoon-map-app .cm-brand-select{
  border-color:var(--line)!important;
  background:#fff!important;
}
.cartoon-map-app .cm-brand-select:focus-within{
  border-color:var(--green)!important;
  box-shadow:0 0 0 3px rgba(0,185,95,.12)!important;
}
.cartoon-map-app #cmExtraFilters input{
  accent-color:var(--green)!important;
}

/* Brand-red accent */
.cartoon-map-app .cm-choice-kicker{
  color:var(--brand-red)!important;
}
.cartoon-map-app .cm-topbar-search-toggle.is-open{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
}

/* Fuel selector — same order as MaPompe */
.cartoon-map-app .cm-fuel-menu button:nth-child(1){color:#001A35!important;background:rgba(255,205,0,.14)!important}
.cartoon-map-app .cm-fuel-menu button:nth-child(2){color:#3c6b15!important;background:rgba(155,220,70,.13)!important}
.cartoon-map-app .cm-fuel-menu button:nth-child(3){color:#006f3d!important;background:rgba(0,185,95,.11)!important}
.cartoon-map-app .cm-fuel-menu button:nth-child(4){color:#00663a!important;background:rgba(0,130,74,.10)!important}
.cartoon-map-app .cm-fuel-menu button:nth-child(5){color:#005aa4!important;background:rgba(0,119,215,.10)!important}
.cartoon-map-app .cm-fuel-menu button:nth-child(6){color:#007d91!important;background:rgba(0,159,184,.10)!important}

/* Station price semantics */
.cartoon-map-app .cm-pin-wrap.cheap .cm-pin-price{
  color:#00824A!important;
}
.cartoon-map-app .cm-pin-wrap.mid .cm-pin-price{
  color:var(--ink)!important;
}
.cartoon-map-app .cm-pin-wrap.pricey .cm-pin-price{
  color:var(--brand-red)!important;
}
.cartoon-map-app .cm-pin-wrap.favorite .cm-pin-logo{
  box-shadow:0 0 0 3px var(--gold),0 4px 10px rgba(0,26,53,.13)!important;
}
.cartoon-map-app .cm-pin-wrap.favorite .cm-pin-price{
  color:#6a5700!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-price{
  background:var(--green)!important;
  border-color:#fff!important;
  color:#fff!important;
}
.cartoon-map-app .cm-pin-wrap.is-cheapest-focus .cm-pin-logo{
  box-shadow:0 0 0 4px rgba(0,185,95,.72),0 0 0 8px rgba(0,185,95,.14),0 7px 16px rgba(0,185,95,.18)!important;
}

/* Filter button / controls */
.cartoon-map-app .cm-mobile-filter-btn.is-active{
  background:var(--ink)!important;
  color:#fff!important;
  border-color:var(--ink)!important;
}
.cartoon-map-app .cm-mobile-filter-btn.is-active em{
  background:#fff!important;
  color:var(--ink)!important;
}
.cartoon-map-app .cm-filter-title{
  color:var(--ink)!important;
}
.cartoon-map-app .cm-filter-title > span:first-child svg{
  color:var(--green)!important;
}

/* Primary station action */
.cartoon-map-app .cm-card-action.primary{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:#fff!important;
}
.cartoon-map-app .cm-card-action.secondary{
  color:var(--ink)!important;
  border-color:var(--line)!important;
}

/* Guest favorite popup */
.cartoon-map-app .favorite-auth-icon{
  background:linear-gradient(135deg,#fffdf4,#fff0b8)!important;
  border-color:#ead06a!important;
  color:#b59400!important;
}
.cartoon-map-app .favorite-auth-primary{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
}
.cartoon-map-app .favorite-auth-secondary{
  border-color:var(--line)!important;
  color:var(--ink)!important;
}
.cartoon-map-app .favorite-auth-benefit > span:first-child{
  background:rgba(0,185,95,.10)!important;
  color:var(--green-dark)!important;
}

/* Final fuel popup polish: no legacy logo/icon, typography-led MaPompe header. */
.cm-fuel-choice-head{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:9px!important;
  padding-bottom:18px!important;
  border-bottom:1px solid #e7edf1!important;
}
.cm-fuel-choice-brand{
  display:flex!important;
  align-items:baseline!important;
  letter-spacing:-.055em!important;
  line-height:1!important;
  font-size:30px!important;
  font-weight:950!important;
}
.cm-fuel-choice-brand span{color:#001A35!important}
.cm-fuel-choice-brand strong{color:#FA0019!important;font-weight:950!important}
.cm-fuel-choice-eyebrow{
  display:block!important;
  color:#00824A!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
}
.cm-fuel-choice-card h2{
  margin:22px 0 9px!important;
  font-size:clamp(26px,4vw,34px)!important;
  letter-spacing:-.04em!important;
}
.cm-fuel-choice-intro{
  max-width:500px!important;
  margin:0 0 22px!important;
  font-size:13px!important;
}
@media(max-width:700px){
  .cm-fuel-choice-brand{font-size:27px!important}
  .cm-fuel-choice-head{padding-bottom:15px!important}
  .cm-fuel-choice-card h2{margin-top:18px!important;font-size:25px!important}
  .cm-fuel-choice-intro{margin-bottom:16px!important}
}


/* Mobile app: keep the shared menu drawer usable on short screens and small devices. */
@media (max-width:900px){
  body.cartoon-map-app .drawer{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    width:min(88vw,380px);
    max-width:calc(100vw - 12px);
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));
  }
  body.cartoon-map-app .drawer[hidden]{
    display:none!important;
  }
  body.cartoon-map-app .drawer-head{
    flex:0 0 auto;
    gap:10px;
    margin:0 0 10px;
    padding:0 0 12px;
    border-bottom:1px solid var(--line);
  }
  body.cartoon-map-app .drawer-head-sub{
    display:block;
    max-width:calc(100vw - 100px);
    overflow-wrap:anywhere;
  }
  body.cartoon-map-app .drawer-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    gap:12px;
    padding:0 2px 12px;
  }
  body.cartoon-map-app .drawer-group{
    gap:3px;
  }
  body.cartoon-map-app .drawer-nav a,
  body.cartoon-map-app .drawer-submenu summary{
    box-sizing:border-box;
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 10px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  body.cartoon-map-app .drawer-nav .drawer-link-icon{
    flex:0 0 24px;
  }
  body.cartoon-map-app .drawer-submenu-links{
    padding:4px 0 4px 34px;
  }
  body.cartoon-map-app .drawer-submenu-links a{
    min-height:44px;
    padding:10px 8px;
  }
  body.cartoon-map-app #closeMenu{
    min-height:44px;
    padding:8px 10px;
    border-radius:10px;
    white-space:nowrap;
  }
}
@media (max-width:420px){
  body.cartoon-map-app .drawer{
    width:calc(100vw - 12px);
    padding-left:10px;
    padding-right:10px;
  }
  body.cartoon-map-app .drawer-nav{
    gap:10px;
  }
}


/* Native Capacitor navigation: reserve space for the bottom tab bar on the map. */
@media (max-width:900px){
  html.is-native-app body.cartoon-map-app .cm-mobile-filter-btn,
  html.is-native-app body.cartoon-map-app .cm-map-buttons{
    bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
  }
  html.is-native-app body.cartoon-map-app .cm-station-layer{
    bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    max-height:calc(100dvh - 170px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  html.is-native-app body.cartoon-map-app .cm-filters{
    bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
    max-height:min(62vh,calc(100dvh - 120px))!important;
  }
  html.is-native-app body.cartoon-map-app .cm-toast{
    bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
    max-width:calc(100vw - 24px);
    white-space:normal!important;
    text-align:center;
  }
  html.is-native-app body.cartoon-map-app .cm-attribution{
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }
  html.is-native-app body.cartoon-map-app.cm-navigation-active .mapompe-native-nav{
    display:none!important;
  }
}