/**
 * ASN WooCommerce Product Banner – Stylesheet
 *
 * Gestaltet den Button-Container, der nach dem Hinzufügen eines Produkts
 * in der WooCommerce-Erfolgsmeldung erscheint.
 *
 * Klassenstruktur:
 *   .asn-banner-actions          – Wrapper, Flexbox-Zeile
 *   .asn-banner-btn              – Basisstil beider Buttons
 *   .asn-banner-btn--primary     – „zum Warenkorb" (Hauptaktion, gefüllt)
 *   .asn-banner-btn--secondary   – „Buchung fortsetzen" (Sekundäraktion, Outline)
 *
 * Farbpalette orientiert sich am Standard-WooCommerce-Grün (#7F54B3 wird
 * nicht verwendet; stattdessen wird das Theme-eigene --wp--preset--color--primary
 * genutzt, sofern vorhanden, mit einem sicheren Fallback).
 *
 * Responsivität:
 *   Unterhalb von 480 px werden die Buttons untereinander gestapelt.
 */

/* ── Container ────────────────────────────────────────────────────────────── */

.asn-banner-actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    margin-top:      0.75rem;
    align-items:     center;
}

/* ── Basis-Button ─────────────────────────────────────────────────────────── */

.asn-banner-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.45em 1.1em;
    border-radius:    3px;
    font-size:        0.875rem;
    font-weight:      600;
    line-height:      1.4;
    text-decoration:  none;
    white-space:      nowrap;
    cursor:           pointer;
    transition:       background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.asn-banner-btn:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

/* ── Primary: „zum Warenkorb" ─────────────────────────────────────────────── */

.asn-banner-btn--primary {
    background-color: var(--wp--preset--color--primary, #FFB74D);
    color:            #fff;
    border:           2px solid transparent;
}

.asn-banner-btn--primary:hover,
.asn-banner-btn--primary:focus {
    background-color: var(--wp--preset--color--primary-dark, #165153);
    color:            #fff;
    text-decoration:  none;
}

/* ── Secondary: „Buchung fortsetzen" ─────────────────────────────────────── */

.asn-banner-btn--secondary {
    background-color: var(--wp--preset--color--primary, #FFB74D);
    color:            #fff;
    border:           2px solid transparent;
}

.asn-banner-btn--secondary:hover,
.asn-banner-btn--secondary:focus {
    background-color: var(--wp--preset--color--primary-dark, #165153);
    color:            #fff;
    text-decoration:  none;
}

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

@media (max-width: 480px) {
    .asn-banner-actions {
        flex-direction: column;
        align-items:    stretch;
    }

    .asn-banner-btn {
        width:          100%;
        text-align:     center;
    }
}

/* ── Anpassung an den WooCommerce Block Notice Container ──────────────────── */

/*
 * .wc-block-components-notice-banner__content ist standardmäßig ein
 * Block-Element → Buttons fallen unter den Text.
 * Wir schalten auf Flexbox um: Text links (flex: 1), Buttons rechts.
 */
.wc-block-components-notice-banner__content {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.5rem;
}

/* Text-Node hat kein eigenes Element → wir nutzen den ::before-Trick nicht,
   sondern lassen den Text natürlich fließen und drücken die .asn-banner-actions
   mit margin-left: auto nach rechts. */
.wc-block-components-notice-banner__content .asn-banner-actions {
    margin-left: auto;
    margin-top:  0;        /* reset aus dem allgemeinen Regel */
}

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

@media (max-width: 600px) {
    /* Unterhalb 600 px: alles untereinander, volle Breite */
    .wc-block-components-notice-banner__content {
        flex-direction: column;
        align-items:    flex-start;
    }

    .wc-block-components-notice-banner__content .asn-banner-actions {
        margin-left: 0;
        width:       100%;
    }
}