/* =========================================================================
   Cleanic — live service map styles
   Mirrors the GOGO map so the two pages read as one product. Class names are
   cl- rather than g- so a change to one can never affect the other.
   ========================================================================= */

/* The map panel. No tiles: a washed canvas with a faint dot grid, so it reads
   as a plotted surface without depending on any tile server. The dot grid is
   drawn in CSS and cannot fail to load. */
.cl-map {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(163, 230, 53, .16) 0%, rgba(163, 230, 53, 0) 46%),
    radial-gradient(circle at 12% 82%, rgba(141, 182, 0, .10) 0%, rgba(141, 182, 0, 0) 44%),
    linear-gradient(180deg, #FBFDF4 0%, #F2F6E6 100%);
  background-color: #F2F6E6;
}
.cl-map-overlay { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.cl-map-links { position: absolute; left: 0; top: 0; pointer-events: none; }

/* washed out so the pins carry the eye, same as GOGO */

/* ── suburb pins ─────────────────────────────────────────────────────── */
.cl-map-pin {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; align-items: center; gap: 7px;
}
.cl-map-badge {
  width: 27px; height: 27px; border-radius: 4px; position: relative; display: grid; place-items: center;
  background: #A3E635; color: #0B0B0B; flex: 0 0 auto;
  border: 2.5px solid #fff; box-shadow: 0 6px 16px rgba(11, 11, 11, .30), 0 1px 0 rgba(11, 11, 11, .12);
}
.cl-map-pin.depot .cl-map-badge { width: 33px; height: 33px; background: linear-gradient(180deg,#1a1a1a 0%,#0a0a0a 100%); color: #fff; }
.cl-map-pin.tone-lime .cl-map-badge { background: linear-gradient(180deg, #A7CE2E, #8DB600); }
.cl-map-pin.tone-gold .cl-map-badge { background: linear-gradient(180deg, #C6EE6A, #A3E635); }
.cl-map-pin.tone-navy .cl-map-badge { background: linear-gradient(180deg, #2A3550, #232328); color: #fff; }

.cl-map-chip {
  background: #fff; border-radius: 4px; padding: 5px 10px;
  border: 1px solid rgba(11, 11, 11, .10); box-shadow: 0 6px 16px rgba(11, 11, 11, .14);
  display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap;
}
.cl-map-chip b { font-size: 12px; font-weight: 800; color: #0B0B0B; }
.cl-map-chip i { font-style: normal; font-size: 9.5px; font-weight: 700; color: rgba(11, 11, 11, .52); }
.cl-map-chip.hub { padding: 6px 11px; }
.cl-map-chip.hub b { font-size: 13.5px; }

/* the depot pulses: it is the one fixed point in the system */
.cl-map-pin.depot .cl-map-badge::after {
  content: ""; position: absolute; inset: -6px; border-radius: 4px;
  border: 2px solid rgba(141, 182, 0, .55); animation: clPulse 2.6s ease-out infinite;
}
@keyframes clPulse {
  0% { transform: scale(.85); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}

/* ── collection vans ─────────────────────────────────────────────────── */
.cl-map-van { position: absolute; transform: translate(-50%, -50%); }
.cl-map-van-body {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #C6EE6A, #8DB600 62%, #6C8C00); color: #0B0B0B;
  border: 2px solid #fff; box-shadow: 0 5px 14px rgba(11, 11, 11, .26);
}
.cl-map-van-ring {
  position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid rgba(141, 182, 0, .75); animation: clRing 2s ease-out infinite;
}
@keyframes clRing {
  0% { transform: scale(.7); opacity: 1; }
  80% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* ── the veil, so copy on top stays readable ─────────────────────────── */
.cl-map-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 253, 244, .80) 0%, rgba(255, 253, 244, .40) 36%, rgba(255, 253, 244, .04) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%);
}

.cl-map-credit {
  position: absolute; right: 12px; bottom: 8px; z-index: 6;
  font-size: 9.5px; font-weight: 700; color: rgba(11, 11, 11, .42);
  background: rgba(255, 255, 255, .78); border-radius: 4px; padding: 2px 7px;
}

/* SVG glyphs render the same everywhere */
.cl-map-badge svg { width: 56%; height: 56%; fill: #0B0B0B; display: block; }
.cl-map-pin.tone-navy .cl-map-badge svg,
.cl-map-pin.depot .cl-map-badge svg { fill: #fff; }
.cl-map-van-body svg { width: 58%; height: 58%; fill: #0B0B0B; display: block; }

@media (max-width: 900px) {
  /* The names stay on a phone. Hiding them came from GOGO, where the map sits
     under a booking card and the labels collide with it; here the map is the
     hero background and the pins are the point, so an unnamed dot tells the
     customer nothing. Smaller, not absent. */
  .cl-map-chip { padding: 3px 7px; }
  .cl-map-chip b { font-size: 10px; }
  .cl-map-chip i { display: none; }        /* the "same day" note is desktop-only */
  .cl-map-chip.hub b { font-size: 11px; }
  .cl-map-van-body { width: 24px; height: 24px; }
  .cl-map-scrim {
    background: linear-gradient(180deg, rgba(255, 253, 244, .86) 0%, rgba(255, 253, 244, .40) 32%, rgba(255, 253, 244, 0) 58%, rgba(255, 253, 244, .22) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-map-van-ring, .cl-map-pin.depot .cl-map-badge::after { animation: none; }
}


/* The hero already had a mesh and a rain layer at 0.55 and 0.5 opacity. Over a
   map those read as noise, so they are eased back rather than removed: the
   motion is still there, the tiles stay legible underneath. */
.hero .mesh-canvas { opacity: 0.20 !important; }
.hero .rain-layer { opacity: 0.22 !important; }