/**
 * ASN Validation – Nichtmitglied
 * Stylesheet für Warenkorb-Warnungen und ungültige Produkt-Markierungen.
 *
 * Scope: .woocommerce-cart, .woocommerce-checkout
 * Abhängigkeit: WooCommerce Standard-CSS (woocommerce-layout)
 */

/* ── Ungültige Warenkorb-Zeile ─────────────────────────────────────────────── */

/**
 * Markierung orientiert sich am WooCommerce .woocommerce-error-Styling:
 * roter Rand (#cc0000), rosa/roter Hintergrund – visuell konsistent mit
 * der Hinweisbox darüber.
 *
 * Gilt für Classic Cart (woocommerce-cart-form tr) und
 * Block Cart (tr.wc-block-cart-items__row).
 */
tr.asn-invalid-cart-item,
tr[data-asn-invalid="true"] {
    background-color: #fef7f7 !important;
    outline: 2px solid #cc0000;
    outline-offset: -1px;
    position: relative;
}

/* ── Badge / Label ─────────────────────────────────────────────────────────── */

/**
 * Kleines Label unterhalb des Produktnamens.
 * Farbe passend zur WooCommerce-Fehlerfarbe.
 */
.asn-invalid-badge {
    display: inline-block;
    margin-top: 4px;
    margin-left: 0;
    padding: 2px 8px;
    background-color: #cc0000;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 3px;
    white-space: nowrap;
}

/* Block Cart: Badge als Block unter dem Namen */
.wc-block-components-product-name + .asn-invalid-badge {
    display: block;
    width: fit-content;
    margin-top: 6px;
}

/* ── Warnmeldung (WooCommerce Notice) ─────────────────────────────────────── */

.woocommerce-error .asn-invalid-product-list {
    margin: 0.4em 0 0 1.2em;
    padding: 0;
    list-style: disc;
}

.woocommerce-error .asn-invalid-product-list li {
    margin: 0.2em 0;
    font-weight: 600;
}

/* ── Login-Link in der Fehlermeldung ───────────────────────────────────────── */

.woocommerce-error .asn-login-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.woocommerce-error .asn-login-link:hover {
    opacity: 0.8;
}

/* ── Zugänglichkeit / Focus ────────────────────────────────────────────────── */

tr.asn-invalid-cart-item:focus-within,
tr[data-asn-invalid="true"]:focus-within {
    outline-color: #990000;
    outline-width: 3px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    tr.asn-invalid-cart-item,
    tr[data-asn-invalid="true"] {
        outline-width: 1px;
    }
}