/* Versandanzeige – kompakt */
.versandanzeige {
    background: var(--va-bg);
    border: 1px solid var(--va-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 20px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.versandanzeige::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: var(--va-accent);
}

/* Countdown-Zeile: Label links, Digits rechts */
.versandanzeige__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.versandanzeige__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--va-accent);
    line-height: 1.3;
}

.versandanzeige__countdown {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.versandanzeige__digit {
    background: #1d1d1f;
    border-radius: 6px;
    padding: 4px 7px 3px;
    min-width: 32px;
    text-align: center;
}

.versandanzeige__digit span {
    font-family: -apple-system, 'SF Mono', 'Menlo', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.versandanzeige__digit small {
    display: none;
}

.versandanzeige__sep {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--va-accent);
    opacity: 0.5;
}

/* Info-Zeilen unter dem Countdown */
.versandanzeige__info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.versandanzeige__versand,
.versandanzeige__lieferung {
    font-size: 14px;
    color: #48484a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.versandanzeige__versand strong,
.versandanzeige__lieferung strong {
    color: #1d1d1f;
}

.versandanzeige__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--va-accent);
    flex-shrink: 0;
}

/* Zustand ohne Countdown (B/C/D/E) */
.versandanzeige__simple {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.versandanzeige__simple-title {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.versandanzeige__simple-sub {
    font-size: 14px;
    color: #6e6e73;
}

.versandanzeige__feiertag-name {
    font-size: 12px;
    color: #86868b;
    font-style: italic;
}

/* === Farben === */
.versandanzeige--aktiv {
    --va-accent: #0071e3;
    --va-bg: rgba(0,113,227,0.04);
    --va-border: rgba(0,113,227,0.12);
    --va-glow: rgba(0,113,227,0.35);
}
.versandanzeige--aktiv .versandanzeige__digit { background: #0071e3; }

.versandanzeige--warn {
    --va-accent: #ff9500;
    --va-bg: rgba(255,149,0,0.05);
    --va-border: rgba(255,149,0,0.18);
    --va-glow: rgba(255,149,0,0.35);
}
.versandanzeige--warn .versandanzeige__digit { background: #ff9500; }

.versandanzeige--critical {
    --va-accent: #ff3b30;
    --va-bg: rgba(255,59,48,0.05);
    --va-border: rgba(255,59,48,0.18);
    --va-glow: rgba(255,59,48,0.35);
}
.versandanzeige--critical .versandanzeige__digit {
    background: #ff3b30;
    animation: va-pulse 1.2s ease-in-out infinite;
}

.versandanzeige--morgen {
    --va-accent: #0071e3;
    --va-bg: rgba(0,113,227,0.03);
    --va-border: rgba(0,113,227,0.1);
    --va-glow: rgba(0,113,227,0.3);
}

.versandanzeige--kein-versand {
    --va-accent: #8e8e93;
    --va-bg: rgba(142,142,147,0.04);
    --va-border: rgba(142,142,147,0.12);
    --va-glow: rgba(142,142,147,0.2);
}

.versandanzeige--feiertag {
    --va-accent: #ff9500;
    --va-bg: rgba(255,149,0,0.04);
    --va-border: rgba(255,149,0,0.14);
    --va-glow: rgba(255,149,0,0.3);
}

/* ==========================================
   DARK MODE – Neon-Glow-Rahmen
   ========================================== */
.dark .versandanzeige {
    background: rgba(30, 32, 38, 0.8);
    border-color: var(--va-accent);
    box-shadow: 0 0 12px var(--va-glow), inset 0 0 12px rgba(0,0,0,0.3);
}

.dark .versandanzeige::before {
    box-shadow: 0 0 8px var(--va-glow);
}

.dark .versandanzeige__label {
    color: var(--va-accent);
    text-shadow: 0 0 8px var(--va-glow);
}

.dark .versandanzeige__sep {
    color: var(--va-accent);
    opacity: 0.6;
}

.dark .versandanzeige__digit {
    box-shadow: 0 0 6px var(--va-glow);
}

.dark .versandanzeige__info {
    border-top-color: rgba(255,255,255,0.08);
}

.dark .versandanzeige__versand,
.dark .versandanzeige__lieferung {
    color: rgba(255,255,255,0.6);
}

.dark .versandanzeige__versand strong,
.dark .versandanzeige__lieferung strong {
    color: #f5f5f7;
}

.dark .versandanzeige__simple-title {
    color: #f5f5f7;
}

.dark .versandanzeige__simple-sub {
    color: rgba(255,255,255,0.5);
}

.dark .versandanzeige__feiertag-name {
    color: rgba(255,255,255,0.45);
}

.dark .versandanzeige__dot {
    box-shadow: 0 0 4px var(--va-glow);
}

/* Aktiv: Digits im Dark Mode neon */
.dark .versandanzeige--aktiv .versandanzeige__digit {
    background: rgba(0,113,227,0.9);
    box-shadow: 0 0 10px rgba(0,113,227,0.5);
}

.dark .versandanzeige--warn .versandanzeige__digit {
    background: rgba(255,149,0,0.9);
    box-shadow: 0 0 10px rgba(255,149,0,0.5);
}

.dark .versandanzeige--critical .versandanzeige__digit {
    background: rgba(255,59,48,0.9);
    box-shadow: 0 0 10px rgba(255,59,48,0.5);
}

/* Animations */
@keyframes va-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.versandanzeige--aktiv .versandanzeige__digit:last-of-type span,
.versandanzeige--warn .versandanzeige__digit:last-of-type span,
.versandanzeige--critical .versandanzeige__digit:last-of-type span {
    animation: va-tick 1s step-end infinite;
}

@keyframes va-tick {
    50% { opacity: 0.5; }
}

/* Mobil */
@media (max-width: 480px) {
    .versandanzeige { padding: 12px 14px; border-radius: 10px; }
    .versandanzeige__digit { min-width: 28px; padding: 3px 5px 2px; }
    .versandanzeige__digit span { font-size: 0.9rem; }
    .versandanzeige__label { font-size: 12px; }
    .versandanzeige__row { gap: 8px; }
}