/**
 * Small grooming-van doodle + tiny icon slots.
 *
 * Assets:
 *   - images/icons/grooming-van-doodle.png  (lavender monoline, transparent)
 *   - images/icons/grooming-van-doodle.svg  (solid silhouette for CSS masks)
 *
 * Scope kept narrow so it does NOT fight wagn-main-icons.css for large/main
 * slots (.tile-icon--vehicle, .spotlight-tile__icon--vehicle, begin-step
 * badges, blog Quick Launch). Those use images/icons/main/grooming-van.png.
 *
 * Applied to:
 *   - soft background doodles (.doodle--icon-vehicle) — SVG mask / currentColor
 *   - tiny chrome slots (.action__ico, .vehicle-card__ico, .lf-benefit__icon) — PNG
 *   - form-rail art (.mk-form-van) — PNG
 *   - profit-calculator fleet meters (.pc-fleet-viz__van) — PNG
 */

:root {
  --grooming-van-icon: url("images/icons/grooming-van-doodle.png");
  --grooming-van-doodle-mask: url("images/icons/grooming-van-doodle.svg");
}

/* Background doodles: restore mask so soft/teal currentColor tints work */
.doodle--icon-vehicle {
  --doodle-icon: var(--grooming-van-doodle-mask);
  -webkit-mask: var(--doodle-icon) center / contain no-repeat !important;
  mask: var(--doodle-icon) center / contain no-repeat !important;
  background: currentColor !important;
  background-image: none !important;
  aspect-ratio: 320 / 258;
}

.doodle--icon-vehicle.doodle--soft {
  opacity: 0.14;
}

.doodle--icon-vehicle.doodle--teal {
  opacity: 0.22;
}

/* Form-confidence rail mark */
.mk-form-van__body {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent var(--van-icon, var(--grooming-van-icon)) center / contain no-repeat !important;
}

.mk-form-van.is-locked .mk-form-van__body {
  background: transparent var(--van-icon, var(--grooming-van-icon)) center / contain no-repeat !important;
  filter: none;
}

/* Profit calculator fleet meters */
.pc-fleet-viz__van {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent var(--fleet-icon, var(--grooming-van-icon)) center / contain no-repeat !important;
}

/* Inline mask slots that opted into the doodle icon class */
.action__ico.grooming-van-ico,
.lf-benefit__icon.grooming-van-ico::after {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent var(--mask, var(--grooming-van-icon)) center / contain no-repeat !important;
}

.action__ico.grooming-van-ico {
  width: 1.5rem;
  height: 1.2rem;
}

.lf-benefit__icon.grooming-van-ico::after {
  width: 1.4rem;
  height: 1.15rem;
}

/*
 * Vehicle-card callouts: force paw (never van silhouette).
 * Homepage markup already uses paw.svg + --mask; this covers any leftover
 * grooming-van-ico class or cached CSS that still targets the van.
 */
.vehicle-card__ico.grooming-van-ico::after {
  -webkit-mask-image: var(--mask, url("images/icons/paw.svg")) !important;
  mask-image: var(--mask, url("images/icons/paw.svg")) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  background: var(--purple) !important;
  background-image: none !important;
  width: 0.78rem;
  height: 0.78rem;
}