/* WMG Restock Notify — Glocke + Header-Panel (2026-07-29) */

/* Glocke neben dem Merkzettel (Maxia-Tabelle) */
.wmg-restock-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.wmg-restock-bell {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: #6b6b6b;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color .15s ease;
}
.wmg-restock-bell:hover { color: #000; }
/* 31.07.2026: Aktiv = farbig statt schwarz — so erkennt man auf einen Blick,
   welche Artikel abonniert sind. 06.08.2026: global ROT (User-Wunsch: nach dem
   Tippen in der Maxia-Tabelle sofort sichtbar, dass es geklappt hat) —
   vorher Bernstein auf der PDP, rot nur im Merkzettel. */
.wmg-restock-bell.is-active { color: #c0392b; }
.wmg-restock-bell.is-active .icon svg,
.wmg-restock-bell.is-active svg { fill: #f2b8b5; }
.wmg-restock-bell .icon { color: currentColor; }
.wmg-restock-pop { animation: wmg-restock-pop .3s ease; }
@keyframes wmg-restock-pop { 50% { transform: scale(1.25) rotate(-8deg); } }

/* Header-Glocke: Optik wie die Header-Aktionen (Icon + Label darunter) */
.wmg-restock-header {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.wmg-restock-header-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #1a1a1a;
    padding: 0 10px;
    position: relative;
    font: inherit;
}
.wmg-restock-header-btn:hover { color: #000; }
.wmg-restock-header-label {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.wmg-restock-header-badge {
    position: absolute;
    top: -6px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #000;
    color: #fff;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
}
/* Im Sticky-Header (kompakt) Label ausblenden wie beim Rest */
.wmg-restock-header-sticky .wmg-restock-header-label { display: none; }

/* Panel */
.wmg-restock-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2147483300;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e3e3e3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    border-radius: 6px;
    overflow: hidden;
}
.wmg-restock-panel-head {
    padding: 10px 14px;
    font-size: 12px;
    color: #6b6b6b;
    border-bottom: 1px solid #eee;
}
.wmg-restock-empty {
    padding: 18px 14px;
    font-size: 13.5px;
    color: #6b6b6b;
    text-align: center;
}
.wmg-restock-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}
.wmg-restock-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-bottom: 1px solid #f2f2f2;
}
.wmg-restock-item:last-child { border-bottom: none; }
.wmg-restock-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: #1a1a1a;
}
.wmg-restock-item-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    flex: 0 0 auto;
}
.wmg-restock-item-noimg { display: inline-block; }
.wmg-restock-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wmg-restock-item-name {
    font-size: 13.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wmg-restock-item-number {
    font-size: 12px;
    color: #6b6b6b;
}
.wmg-restock-item-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    flex: 0 0 auto;
}
.wmg-restock-item-remove:hover { color: #c00; }

/* Nur Icon in der Aktionsreihe (Label auf User-Wunsch vorerst aus);
   Ausrichtung an den Nachbar-Icons (Icon oben, wie Merkliste/Konto) */
.wmg-restock-header-label { display: none; }
.wmg-restock-header-btn { padding: 2px 12px 0; }
.wmg-restock-header-btn svg { width: 26px; height: 26px; }

/* 05.08.2026: Sichtbares Label neben der Glocke ("Benachrichtige mich").
   Ueberschreibt das line-height:0 der reinen Icon-Variante weiter oben. */
.wmg-restock-bell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.wmg-restock-bell-label {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
.wmg-restock-bell:hover .wmg-restock-bell-label { text-decoration: underline; }

/* ===== 05.08.2026 abends: Glocke in der Lieferzeit-Zelle + Merkzettel-Tabelle ===== */

/* Glocke unter dem Lieferstatus (Produkt-Spalte der Maxia-Tabelle) */
.wmg-restock-bell-inline {
    padding: 2px 0 0;
    margin-top: 2px;
}
.wmg-delivery-sub .wmg-restock-bell { color: #6b6b6b; }
.wmg-delivery-sub .wmg-restock-bell:hover { color: #000; }

/* Label nur zeigen, wo Platz ist (schmale Viewports: nur Glocke + Tooltip) */
@media (max-width: 767px) {
    .wmg-restock-bell-label { display: none; }
}

/* Merkzettel-Erinnerungen: Zeilen-Optik wie die Maxia-Varianten-Tabelle */
.wmg-wl-reminders { margin: 40px 0 24px; }
.wmg-wl-reminders-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.wmg-wl-reminders-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.wmg-wl-reminders-hint { font-size: .875rem; color: #666; margin: 0; }
.wmg-wl-reminders-empty { font-size: .9375rem; color: #666; }

.wmg-wl-rem-table { width: 100%; border-collapse: collapse; }
.wmg-wl-rem-table thead th {
    background: #2f2f2f;
    color: #fff;
    text-align: left;
    font-size: .875rem;
    font-weight: 600;
    padding: 12px 16px;
}
.wmg-wl-rem-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e6e4e0;
    vertical-align: middle;
}
/* neutralisiert das Grid-Layout der alten Wmg-Regel (Staging laedt beide CSS) */
.wmg-wl-rem-table .wmg-wl-rem-row { display: table-row; }
.wmg-wl-rem-th-img, .wmg-wl-rem-td-img { width: 72px; }
.wmg-wl-rem-th-del, .wmg-wl-rem-td-del { width: 56px; text-align: right; }
.wmg-wl-rem-td-img img { max-width: 56px; max-height: 56px; object-fit: contain; display: block; }
.wmg-wl-rem-name { color: inherit; text-decoration: none; font-size: .9375rem; }
.wmg-wl-rem-name:hover { text-decoration: underline; }
.wmg-wl-rem-nr {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8125rem;
    color: #666;
}
.wmg-wl-rem-del {
    background: none;
    border: 0;
    padding: 4px;
    color: #999;
    line-height: 1;
    font-size: 1.125rem;
    cursor: pointer;
}
.wmg-wl-rem-del:hover { color: #c0392b; }

/* ===== 06.08.2026: Gemergter Merkzettel (eine Tabelle fuer Artikel + Abos) ===== */
.wmg-wl-merged-page { padding: 8px 0 32px; }
.wmg-wl-merged-page .wishlist-headline { margin-bottom: 4px; }
.wmg-wl-merged-page .wmg-wl-reminders-hint { margin-bottom: 16px; }

.wmg-wl-th-price, .wmg-wl-td-price { width: 120px; white-space: nowrap; }
.wmg-wl-td-price { font-weight: 600; }

/* Label-Umschaltung: inaktiv "Benachrichtige mich", aktiv "Benachrichtigung aktiv" */
.wmg-bell-on { display: none; }
.wmg-restock-bell.is-active .wmg-bell-on { display: inline; }
.wmg-restock-bell.is-active .wmg-bell-off { display: none; }

/* Im Merkzettel: aktive Glocke ROT (auf der Produktseite bleibt Bernstein) */
.wmg-wl-merged .wmg-restock-bell.is-active { color: #c0392b; }
.wmg-wl-merged .wmg-restock-bell.is-active .icon svg,
.wmg-wl-merged .wmg-restock-bell.is-active svg { fill: #f2b8b5; }
.wmg-wl-merged .wmg-restock-bell.is-active .wmg-restock-bell-label { color: #c0392b; }

@media (max-width: 575px) {
    .wmg-wl-th-price, .wmg-wl-td-price { width: 84px; }
    .wmg-wl-rem-th-img, .wmg-wl-rem-td-img { width: 56px; }
}