/**
 * Gedeelde meldingsblokken op de productpagina (Geus Extra's).
 *
 * Meerdere modules zetten een melding bij het product: de allergie-waarschuwing
 * (mijn-dieren), de "binnenkort verwacht"-melding (atum-inbound-stock) en in de
 * toekomst mogelijk meer. Die tekenden elk hun eigen doos — andere randen, andere
 * hoeken, andere breedte, wel/geen schaduw — waardoor de productpagina onrustig werd.
 *
 * Alles gebruikt nu dit ene component. Een module kiest alleen nog een kleurvariant
 * (--warning / --info) en levert een icoon, titel en tekst; de vorm komt hiervandaan.
 *
 * Markup:
 *   <div class="geus-notice geus-notice--info">
 *     <span class="geus-notice__icon">📦</span>
 *     <div class="geus-notice__body">
 *       <div class="geus-notice__title">Titel</div>
 *       <div class="geus-notice__text">Toelichting</div>
 *       <div class="geus-notice__meta">Kleine voetnoot</div>
 *     </div>
 *   </div>
 */

.geus-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
    box-sizing: border-box;
}

/* Twee meldingen onder elkaar horen als een setje te ogen, niet als losse blokken. */
.geus-notice + .geus-notice {
    margin-top: 8px;
}

.geus-notice__icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.3;
}

.geus-notice__body {
    min-width: 0;
}

.geus-notice__title {
    font-weight: 600;
    margin: 0 0 1px;
}

.geus-notice__text {
    margin: 0;
}

.geus-notice__meta {
    margin-top: 2px;
    font-size: 0.85em;
    opacity: 0.75;
}

/* Waarschuwing — bijv. allergie voor het dier van de klant. */
.geus-notice--warning {
    border-color: #f3c9c9;
    border-left-color: #e74c3c;
    background: #fff5f5;
    color: #b3261e;
}

/* Informatief — bijv. voorraad die onderweg is. */
.geus-notice--info {
    border-color: #d6e4f0;
    border-left-color: #3b82f6;
    background: #f4f8fb;
    color: #2c3e50;
}

.geus-notice--info .geus-notice__meta {
    color: #6b7a89;
    opacity: 1;
}