/* Bogensport Deal des Monats — Frontend
 * Neutrale, themetaugliche Styles. Alle Klassen-Prefix `bdm-`.
 * Keine globalen Selektoren, keine `body`-Rules, keine Theme-Resets.
 */

.bdm-deal {
    --bdm-radius: 8px;
    --bdm-pad: 24px;
    --bdm-accent: #c2410c;
    --bdm-bg: #fff;
    --bdm-text: #1f1f1f;
    --bdm-muted: #6b6b6b;

    background: var(--bdm-bg);
    color: var(--bdm-text);
    border: 1px solid #e5e5e5;
    border-radius: var(--bdm-radius);
    overflow: hidden;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
}

.bdm-deal--hero {
    --bdm-pad: 36px;
    border-color: var(--bdm-accent);
}

.bdm-deal--inline {
    flex-direction: row;
    align-items: center;
    --bdm-pad: 16px;
}

.bdm-deal--inline .bdm-deal__banner { flex: 0 0 200px; }
.bdm-deal--inline .bdm-deal__body { padding: var(--bdm-pad); flex: 1 1 auto; }

.bdm-deal--highlight { box-shadow: 0 4px 18px rgba(194, 65, 12, .12); border-color: var(--bdm-accent); }

.bdm-deal__banner { line-height: 0; }
.bdm-deal__banner img { display: block; width: 100%; height: auto; }

.bdm-deal__body { padding: var(--bdm-pad); }

.bdm-deal__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bdm-accent);
    margin: 0 0 8px;
}

.bdm-deal__title {
    font-size: 1.5em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--bdm-text);
}

.bdm-deal__description {
    color: var(--bdm-muted);
    line-height: 1.55;
    margin: 0 0 16px;
}

.bdm-deal__cta-wrap { margin: 0; }

.bdm-deal__cta.button {
    display: inline-block;
    background: var(--bdm-accent);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: filter .15s ease;
}
.bdm-deal__cta.button:hover { filter: brightness(.93); color: #fff; }

/* ── Badge auf Loop & Single ───────────────────────────────────────────── */

.bdm-badge {
    --bdm-badge-bg: #c2410c;
    --bdm-badge-fg: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bdm-badge-bg);
    color: var(--bdm-badge-fg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
    z-index: 5;
}
.bdm-badge__icon { font-size: 12px; line-height: 1; }

/* Loop: absolut positioniert relativ zum Produkt-Item */
.bdm-badge--loop {
    position: absolute;
    margin: 8px;
}
.bdm-badge--top-right    { top: 0; right: 0; }
.bdm-badge--top-left     { top: 0; left: 0; }
.bdm-badge--bottom-right { bottom: 0; right: 0; }
.bdm-badge--bottom-left  { bottom: 0; left: 0; }

/* WooCommerce: Sicherstellen dass das Loop-Item position:relative hat,
   damit unser Badge sich daran orientieren kann. Sehr scoped — nur wenn
   tatsächlich ein Badge daneben gerendert wird (CSS hier wirkt nur, wenn
   das CSS überhaupt enqueued ist; das wiederum passiert nur wenn show_badge_on_loop=1). */
.woocommerce ul.products li.product:has(.bdm-badge--loop),
.woocommerce-page ul.products li.product:has(.bdm-badge--loop) {
    position: relative;
}

/* Single-Page: inline neben Title */
.bdm-badge--single { margin: 0 0 12px; }

/* ── Rabatt-Badge (rund, oben-links, zeigt %-Zahl) ───────────────────────
   Immer aktiv wenn BDM_Resolver::get_effective_discount() > 0.
   Position absolut relativ zum Produkt-Item — WC-Loop-LI bekommt
   position:relative via :has()-Selektor weiter unten. */

.bdm-discount-badge {
    --bdm-disc-bg: #dc2626;       /* sattes Rot — Signalfarbe fuer Rabatt */
    --bdm-disc-fg: #ffffff;
    --bdm-disc-size: 58px;

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--bdm-disc-size);
    height: var(--bdm-disc-size);
    padding: 0;

    background: var(--bdm-disc-bg);
    color: var(--bdm-disc-fg);
    border: 2px solid #fff;
    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-align: center;

    box-shadow: 0 2px 10px rgba(220, 38, 38, .35);
    z-index: 6;
    pointer-events: none;
}

/* Loop: oben-links am Produktbild */
.bdm-discount-badge--loop {
    position: absolute;
    top: 10px;
    left: 10px;
    transform: rotate(-8deg);
}

/* Single-Produktseite: inline oberhalb Titel */
.bdm-discount-badge--single {
    margin: 0 0 14px;
    --bdm-disc-size: 66px;
    font-size: 16px;
}

/* LI-Container absolut positionierbar machen (nur wenn Badge drin) */
.woocommerce ul.products li.product:has(.bdm-discount-badge),
.woocommerce-page ul.products li.product:has(.bdm-discount-badge) {
    position: relative;
}

/* Mobile: kleinerer Badge */
@media (max-width: 640px) {
    .bdm-discount-badge { --bdm-disc-size: 48px; font-size: 12px; }
    .bdm-discount-badge--loop { top: 6px; left: 6px; }

    .bdm-deal--inline { flex-direction: column; }
    .bdm-deal--inline .bdm-deal__banner { flex: none; width: 100%; }
}