/* ============================================================================
   APILOX ICON SET
   ----------------------------------------------------------------------------
   The app's own icons (images/*.png), swapped in for the matching Phosphor
   glyph wherever one exists. Rendered as a CSS mask + background-color:
   currentColor rather than a plain <img>, so the icon still recolors with
   its surrounding text exactly like the icon font did (active/hover states,
   status colors) -- no JS changes needed anywhere this is used.

     <span class="aicon aicon-search"></span>

   Sized in `em` off the element's own font-size, same as the icon font was,
   so it drops into an existing button/label/heading at whatever size that
   context already set without needing a size override per site.
   ============================================================================ */
.aicon{
  display:inline-block; width:1em; height:1em; flex-shrink:0;
  background-color:currentColor; vertical-align:-0.125em;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* WhatsApp is the one full-color brand mark in the set -- a real <img>,
   not a mask, so its own green stays green regardless of the surrounding
   text color. Sized the same em-off-font-size way as .aicon so it still
   drops into an existing context without a per-site override. */
.aicon-whatsapp{ display:inline-block; width:1em; height:1em; flex-shrink:0; object-fit:contain; vertical-align:-0.125em; }

.aicon-calendar{ -webkit-mask-image:url(../images/calendar.png); mask-image:url(../images/calendar.png); }
.aicon-search{ -webkit-mask-image:url(../images/search.png); mask-image:url(../images/search.png); }
.aicon-clock{ -webkit-mask-image:url(../images/clock.png); mask-image:url(../images/clock.png); }
.aicon-location{ -webkit-mask-image:url(../images/location.png); mask-image:url(../images/location.png); }
.aicon-payment{ -webkit-mask-image:url(../images/payment.png); mask-image:url(../images/payment.png); }
.aicon-trash{ -webkit-mask-image:url(../images/trash.png); mask-image:url(../images/trash.png); }
.aicon-download{ -webkit-mask-image:url(../images/download.png); mask-image:url(../images/download.png); }
.aicon-request{ -webkit-mask-image:url(../images/request.png); mask-image:url(../images/request.png); }
.aicon-gallery{ -webkit-mask-image:url(../images/gallery.png); mask-image:url(../images/gallery.png); }
.aicon-mail{ -webkit-mask-image:url(../images/mail.png); mask-image:url(../images/mail.png); }
.aicon-notes{ -webkit-mask-image:url(../images/notes.png); mask-image:url(../images/notes.png); }
.aicon-delivery{ -webkit-mask-image:url(../images/delivery.png); mask-image:url(../images/delivery.png); }
.aicon-import{ -webkit-mask-image:url(../images/import.png); mask-image:url(../images/import.png); }
.aicon-list{ -webkit-mask-image:url(../images/list.png); mask-image:url(../images/list.png); }
.aicon-grid{ -webkit-mask-image:url(../images/grid.png); mask-image:url(../images/grid.png); }
.aicon-privacy{ -webkit-mask-image:url(../images/privacy.png); mask-image:url(../images/privacy.png); }
.aicon-support{ -webkit-mask-image:url(../images/support.png); mask-image:url(../images/support.png); }
.aicon-staff-add{ -webkit-mask-image:url(../images/staff-add.png); mask-image:url(../images/staff-add.png); }
.aicon-stock-add{ -webkit-mask-image:url(../images/stock%20add.png); mask-image:url(../images/stock%20add.png); }