/* Shared pieces of the Daghri look: icons, letter badges, map markers. */
.ic { display: inline-block; vertical-align: middle; flex: none }
.mono {
  display: inline-grid; place-items: center; flex: none; border-radius: 14px;
  background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone);
  font-family: "Readex Pro", "IBM Plex Sans Arabic", sans-serif; font-weight: 700; line-height: 1;
}
.map-badge {
  display: grid; place-items: center; border-radius: 50%; background: #fff;
  border: 2px solid currentColor; box-shadow: 0 2px 8px rgba(16, 24, 22, .22);
}
.map-badge--brand { color: #0A6E5C }
.map-badge--pop { color: #D98E00 }
.map-badge--ink { color: #14211D }
.map-badge--ok { color: #1E8A4C }
.leaflet-div-icon.pin-icon, .pin-icon { background: none; border: 0 }
.ic-brand { color: #0A6E5C }
.brand-logo { display: inline-flex; align-items: center; gap: 6px; font-family: "Readex Pro", "IBM Plex Sans Arabic", sans-serif; line-height: 1 }
.brand-logo b { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em }
.brand-logo small { font-weight: 500; font-size: .95rem; opacity: .75 }
/* Route lines that flow toward the customer. */
.leaflet-interactive.flow { stroke-dasharray: 10 12; animation: flow 1.1s linear infinite }
@keyframes flow { to { stroke-dashoffset: -22 } }
/* Home pin that breathes while the order is on its way. */
.pin-live { position: relative; display: block }
.pin-live::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(10, 110, 92, .28); animation: pulse 1.8s ease-out infinite }
/* Trip progress under the map. */
.trip-bar { display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; font-weight: 600 }
.trip-bar .track { flex: 1; height: 8px; border-radius: 99px; background: rgba(10, 110, 92, .12); overflow: hidden }
.trip-bar .fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #0A6E5C, #FFB81C); transition: width .9s ease }
@media (prefers-reduced-motion: reduce) { .leaflet-interactive.flow, .pin-live::before { animation: none } }
/* A gentle pulse for things that are live (courier on the way, offers). */
.pulse { position: relative }
.pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid currentColor; opacity: .5; animation: pulse 1.6s ease-out infinite }
@keyframes pulse { from { transform: scale(.8); opacity: .55 } to { transform: scale(1.6); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none } }
.with-ic { display: flex; align-items: center; gap: 8px }
.wchat-attach { display: inline-grid; place-items: center }
.map-badge--bad { color: #C2362B }
/* Maps lay out left-to-right (Google's layer breaks in a right-to-left page); text inside stays Arabic. */
.leaflet-container { direction: ltr }
.leaflet-container .leaflet-control, .leaflet-container .leaflet-popup, .leaflet-container .leaflet-tooltip, .leaflet-container .pin-icon { direction: rtl }
/* Unread chat messages */
.unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 99px; background: #D7263D; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; vertical-align: middle }