/*
 * Plugin vm_lieferstatus – Ampelfarben der umgeschriebenen Verfügbarkeitszeilen.
 *
 * Das Plugin setzt neben der Theme-Klasse .status-N zusätzlich .vm-status-N. Grund:
 *  - NOVA kennt nur .status-0/1/2, für die vierte Farbe (blau) gibt es dort nichts.
 *  - Shop-eigenes CSS überschreibt .status-N gerne mit !important, dann zeigt das Plugin
 *    eine andere Farbe an als im Backend ausgewählt.
 * Deshalb bringt das Plugin die Farben für seine eigenen Zeilen selbst mit.
 *
 * Anpassen: die vier Variablen in :root im „Eigenes CSS" des Templates überschreiben,
 * z. B.  :root { --vm-status-1: #ffc107; }
 */
:root {
    --vm-status-0: #b90000; /* rot   – nicht verfügbar */
    --vm-status-1: #e0a800; /* gelb  – knapp */
    --vm-status-2: #1c871e; /* grün  – verfügbar */
    --vm-status-3: #0d6efd; /* blau  – neutraler Hinweis */
}

/*
 * Die doppelte Klasse (.vm-status.vm-status-N) plus die Kontext-Selektoren heben die
 * Spezifität über Theme-Regeln wie „.delivery-status .status-1" an; !important schlägt
 * zusätzlich vorhandene !important-Regeln aus dem „Eigenes CSS" des Shops.
 */
.vm-status.vm-status-0,
.delivery-status .vm-status.vm-status-0,
.signal_image.vm-status.vm-status-0 {
    color: var(--vm-status-0) !important;
}

.vm-status.vm-status-1,
.delivery-status .vm-status.vm-status-1,
.signal_image.vm-status.vm-status-1 {
    color: var(--vm-status-1) !important;
}

.vm-status.vm-status-2,
.delivery-status .vm-status.vm-status-2,
.signal_image.vm-status.vm-status-2 {
    color: var(--vm-status-2) !important;
}

.vm-status.vm-status-3,
.delivery-status .vm-status.vm-status-3,
.signal_image.vm-status.vm-status-3 {
    color: var(--vm-status-3) !important;
}

/* Abstand zwischen Icon und Text der umgeschriebenen Zeilen. */
.vm-status .status-icon {
    margin-right: 0.35em;
}