/* =============================================================================
   ARO Product Card B2B Table – Stylesheet
   Selektoren: vollständig, abgeleitet aus template.php
   UIkit 3 kompatibel – keine !important-Overrides ohne Begründung
   ============================================================================= */


/* ── 1. GRID-WRAPPER ─────────────────────────────────────────────────────────
   .aro-b2b-grid
   Äußerster Container; umschließt alle Produkt-Cards.
   Erzeugt durch uk-grid, überschreibbar hier für Abstände etc.
   --------------------------------------------------------------------------- */
.aro-b2b-grid {
    /* Beispiel: Abstände anpassen (uk-grid-medium setzt bereits 30px) */
}

.aro-b2b-grid>.aro-b2b-filterable {
    /* Hülle um jede Card (uk-width-1-1) */
}

.aro-prd-unit {
    /* td bleibt table-cell für korrektes vertical-align */
}

.aro-prd-unit-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Headline + Info-Button: Desktop nebeneinander, linksbündig */
.aro-headline-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 639px) {

    /* Mobile: zentriert, info-button über headline */
    .aro-headline-wrap {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }

    .aro-b2b-card.uk-card {
        border-radius: unset !important;
    }
}

.aro-prd-card-content {
    padding: var(--juju-margin-large) 0 var(--juju-margin-large) var(--juju-margin-large) !important;
}

/* ── 2. FILTERABLE WRAPPER ───────────────────────────────────────────────────
   .aro-b2b-filterable
   Jedes Produkt liegt in diesem div (data-categories, data-tags).
   JS-Filter setzt display: none auf nicht-passende Items.
   --------------------------------------------------------------------------- */
.aro-b2b-filterable {
    transition: opacity 0.2s ease;
}

.aro-b2b-filterable[hidden],
.aro-b2b-filterable.aro-hidden {
    display: none !important;
    /* JS-Filter-Toggle */
}


/* ── 3. CARD CONTAINER ───────────────────────────────────────────────────────
   .aro-b2b-card
   uk-card uk-card-default + uk-grid (inline, erzeugt flexibles 2-spaltiges Layout)
   --------------------------------------------------------------------------- */
.aro-b2b-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none !important;
}


/* ── 4. BILD-SPALTE ─────────────────────────────────────────────────────────
   .aro-b2b-card-image
   Responsive Bild-Hälfte der Card. Breite via uk-width-{image_width}@s.
   --------------------------------------------------------------------------- */
.aro-b2b-card-image {
    position: relative;
    /* Für .aro-b2b-card__sale-badge */
    overflow: hidden;
}

/* Hintergrundbild-Div (inline style: background-image, cover, center) */
.aro-b2b-card-image>div {
    min-height: 250px;
    /* Fallback falls kein inline-style gesetzt */
    transition: transform 0.4s ease;
}


/* ── 5. SALE-BADGE ───────────────────────────────────────────────────────────
   .aro-b2b-card__sale-badge
   Wird nur gerendert wenn mindestens eine Variante im Angebot ist.
   Positioned: absolute (relativ zu .aro-b2b-card-image).
   --------------------------------------------------------------------------- */
.aro-b2b-card__sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--uk-color-danger, #f0506e);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 1;
}


/* ── 6. CARD HEADER (Titel + Info-Icon) ──────────────────────────────────────
   .aro-b2b-card .uk-card-body > .uk-flex.uk-flex-middle
   h3 + uk-icon-button (Info-Tooltip)
   --------------------------------------------------------------------------- */
.aro-b2b-card .uk-card-body {
    padding: 24px;
    /* UIkit-Default anpassbar */
}

.aro-b2b-card .uk-card-body>.uk-flex {
    margin-bottom: 12px;
}

.aro-b2b-card .uk-card-body h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* Info-Tooltip Icon-Button */
.aro-b2b-card .uk-icon-button[uk-icon="info"] {
    color: var(--uk-color-muted, #999);
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    flex-shrink: 0;
    transition: color 0.2s;
}

.aro-b2b-card .uk-icon-button[uk-icon="info"]:hover {
    color: var(--uk-color-primary, #1e87f0);
}


/* ── 7. VARIANTEN-TABELLE ────────────────────────────────────────────────────
   .aro-b2b-table
   uk-table uk-table-divider uk-table-middle
   --------------------------------------------------------------------------- */
.aro-b2b-table {
    width: 100%;
    margin: 0;
}

/* Tabellen-Header */
.aro-b2b-table thead tr {
    /* UIkit übernimmt Farbe via uk-table-divider */
}

.aro-b2b-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--uk-color-muted, #999);
    padding-bottom: 8px;
    white-space: nowrap;
}



/* ── 8. VARIANTEN-ZEILEN ─────────────────────────────────────────────────────
   .aro-b2b-row
   Jede Variante = eine tr mit data-* Attributen.
   --------------------------------------------------------------------------- */
.aro-b2b-row {
    transition: background-color 0.15s ease;
}

.aro-b2b-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Zeile mit aktiver Menge im Warenkorb */
.aro-b2b-row.aro-b2b-row--in-cart {
    background-color: rgba(30, 135, 240, 0.04);
}

/* Zeilen-Zellen allgemein */
.aro-b2b-row td {
    vertical-align: middle;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* Erste Zelle: Label + Lager-Dot */
.aro-b2b-row td:first-child {
    white-space: nowrap;
    width: 1%;
    /* Schrumpft auf Mindestbreite des Inhalts */
}

/* Letzte Zelle: Menge – etwas Abstand nach rechts */
.aro-b2b-row td:last-child {
    padding-right: 24px;
}

/* Einzelpreis */
.aro-b2b-row td.uk-text-nowrap {
    white-space: nowrap;
}


/* ── 9. LAGER-AMPEL-DOT ──────────────────────────────────────────────────────
   .aro-stock-dot
   Kleiner Kreis links vor dem Varianten-Label.
   Modifikatoren: --green, --yellow, --red
   --------------------------------------------------------------------------- */
.aro-stock-dot {
    display: inline-block;
    margin-right: 1em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aro-stock-dot--green {
    background-color: #32d296;
}

.aro-stock-dot--yellow {
    background-color: #faa05a;
}

.aro-stock-dot--red {
    background-color: #f0506e;
}


/* ── 10. GESAMTPREIS-ZELLE ───────────────────────────────────────────────────
   .aro-total-price
   Wird per JS dynamisch befüllt (qty × price_raw).
   --------------------------------------------------------------------------- */
.aro-total-price,
.aro-unit-type {
    font-weight: 700;
    color: var(--uk-color-emphasis, #333);
    white-space: nowrap;
}

/* ── 10b. PREIS-ANZEIGE (Custom Sale-Stacking) ──────────────────────────────
   .aro-price-stack       Wrapper: Preise vertikal gestapelt
   .aro-price-original    Originalpreis (durchgestrichen, dezent)
   .aro-price-sale        Angebotspreis (normal, gleicher Tag)
   .aro-price-single      Einzel-Preis (kein Sale)
   --------------------------------------------------------------------------- */
.aro-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.3;
}

.aro-price-original {
    text-decoration: line-through;
    opacity: 0.55;
    font-size: 0.85em;
}

.aro-price-sale {
    font-weight: 600;
}

.aro-price-single {
    font-weight: 400;
}

/* ── 11. MENGENWÄHLER ────────────────────────────────────────────────────────
   .aro-qty-select            Wrapper (flex)
   .aro-qty-btn               ± Buttons
   .aro-qty-minus             Minus-Button
   .aro-qty-plus              Plus-Button
   .aro-qty-input             Zahleneingabe
   --------------------------------------------------------------------------- */
.aro-qty-select {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    height: 45px;
    overflow: visible;
}

.aro-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: auto;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--uk-color-default, #444);
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    user-select: none;
}

.aro-qty-btn:hover {
    background-color: var(--uk-color-primary, #1e87f0);
    color: #fff;
}

.aro-qty-btn:active {
    background-color: var(--uk-color-primary-active, #0e6dcd);
    color: #fff;
}

.aro-qty-btn:disabled,
.aro-qty-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.aro-qty-minus,
.aro-qty-plus {
    border-radius: 50%;
    background: var(--aro-button-primary-gradient);
    color: #fff;
}

.aro-qty-minus:hover,
.aro-qty-plus:hover {
    opacity: 0.9;
}


.aro-qty-input {
    width: 73px;
    height: 100%;
    border: 1px solid var(--juju-primary-background);
    border-radius: 50px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    color: var(--uk-color-emphasis, #333);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0 4px;
}

.aro-qty-input::-webkit-inner-spin-button,
.aro-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.aro-qty-input:focus {
    outline: none;
    background-color: rgba(30, 135, 240, 0.05);
}


/* ── 12. ADD-TO-CART BUTTON ──────────────────────────────────────────────────
   .aro-atc-btn               Basis-Button (icon: cart)
   .aro-atc-btn--remove       Aktiver Zustand (icon: close, in Warenkorb)
   --------------------------------------------------------------------------- */
.aro-atc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    height: 45px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    background: var(--aro-button-primary-gradient);
    color: #fff;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.aro-atc-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.aro-atc-btn:active {
    transform: scale(0.95);
}

/* Remove-Zustand (X-Icon, Variante bereits im Warenkorb) */
.aro-atc-btn.aro-atc-btn--remove {
    background-color: var(--uk-color-danger, #f0506e);
}

.aro-atc-btn.aro-atc-btn--remove:hover {
    background-color: #d4304f;
}

/* Icon innerhalb des Buttons */
.aro-atc-btn [uk-icon] {
    display: flex;
}

/* Loading-Zustand (per JS gesetzt) */
.aro-atc-btn.aro-atc-btn--loading {
    pointer-events: none;
    opacity: 0.6;
}


/* ── 13. LEER-HINWEIS ────────────────────────────────────────────────────────
   Gerendert wenn keine Produkte gefunden → uk-alert-warning
   --------------------------------------------------------------------------- */
.aro-b2b-grid+.uk-alert-warning,
.uk-alert-warning[uk-alert] p {
    /* UIkit-Standard, hier anpassbar */
}


/* ── 14. RESPONSIVE ──────────────────────────────────────────────────────────
   UIkit bricht das Grid unter dem @s Breakpoint auf.
   Unterhalb davon: Bild oben, Tabelle darunter (stacked).
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {

    /* Bild-Div full-width auf Mobile */
    .aro-b2b-card-image {
        min-height: 200px;
    }

    .aro-b2b-card-image>div {
        min-height: 200px;
    }

    /* Tabelle scrollen auf kleinen Screens */
    .aro-b2b-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Qty-Buttons etwas kompakter */
    .aro-qty-btn {
        width: 28px;
    }

    .aro-qty-input {
        width: 36px;
    }

    .aro-prd-card-content {
        padding: var(--juju-margin-medium) 0 var(--juju-margin-medium) 28px !important;
    }

}

@media (min-width: 640px) {

    /* Bild-Spalte: Mindesthöhe passt sich an Content-Höhe an (uk-grid-match) */
    .aro-b2b-card-image {
        min-height: unset;
    }
}


/* ── 15. ANIMATIONEN / ÜBERGÄNGE ─────────────────────────────────────────────
   JS-gesteuerte Klassen für Feedback beim ATC-Prozess
   --------------------------------------------------------------------------- */

/* Kurze Flash-Animation bei Erfolg (per JS getriggert) */
@keyframes aro-flash-success {
    0% {
        background-color: transparent;
    }

    40% {
        background-color: rgba(50, 210, 150, 0.2);
    }

    100% {
        background-color: transparent;
    }
}

.aro-b2b-row.aro-flash-success {
    animation: aro-flash-success 0.6s ease forwards;
}

/* Shake bei Fehler */
@keyframes aro-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.aro-b2b-row.aro-shake {
    animation: aro-shake 0.4s ease;
}

/* ── 16. SECURITY / VERIFICATION ─────────────────────────────────────────────
   Blur-Effekt für Preise, wenn B2B-Kunde noch nicht genehmigt ist
   --------------------------------------------------------------------------- */
.aro-blurred-price {
    display: inline-block;
    filter: blur(5px);
    user-select: none;
    pointer-events: auto;
    cursor: not-allowed;
    opacity: 0.75;
    color: inherit;
}

/* Doppelte Absicherung: spezifischer Selektor in Tabellen-Kontext */
.aro-b2b-table td .aro-blurred-price,
.aro-b2b-table .aro-total-price .aro-blurred-price {
    display: inline-block;
    filter: blur(3px) !important;
    user-select: none !important;
}

/* ── 17. AUTO-SYNC FEEDBACK ──────────────────────────────────────────────────
   Visuelles Zeilen-Feedback für den Debounce-Sync
   --------------------------------------------------------------------------- */

/* Ausstehend: Änderung erkannt, Debounce-Timer läuft */
.aro-b2b-row.aro-row-pending .aro-qty-select {
    opacity: 0.85;
}

/* Wird gesynct: AJAX läuft */
.aro-b2b-row.aro-row-syncing .aro-qty-select {
    opacity: 0.5;
    pointer-events: none;
}

/* Erfolgreich gesynct: kurzes grünes Highlight */
.aro-b2b-row.aro-row-synced {
    animation: aro-sync-confirm 0.5s ease;
}

.aro-b2b-row.aro-row-synced .aro-qty-input {
    border-color: #48bb78;
    transition: border-color 0.3s ease;
}

@keyframes aro-sync-confirm {
    0% {
        background-color: transparent;
    }

    30% {
        background-color: rgba(72, 187, 120, 0.08);
    }

    100% {
        background-color: transparent;
    }
}

/* ── 18. RESPONSIVE: MOBILE LAYOUT (< 640px / @s) ───────────────────────────
   3 Zeilen pro Variante:
   Zeile 1: ● Einheit (fett, links) + Einzelpreis (rechts)
   Zeile 2: "Gesamt:" (muted, links) + Gesamtpreis (fett, rechts)
   Zeile 3: [ - ]  [  Menge  ]  [ + ]  (volle Breite)
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {

    /* thead ausblenden */
    .aro-b2b-table thead {
        display: none;
    }

    /* Tabellen-Standardverhalten aufheben */
    .aro-b2b-table,
    .aro-b2b-table tbody {
        display: block;
    }

    /* Trennlinie zwischen Varianten */
    .aro-b2b-row+.aro-b2b-row {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Jede Zeile: 2-Spalten / 3-Zeilen Grid */
    .aro-b2b-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 12px;
        padding: 20px 0;
    }

    .aro-b2b-row td {
        display: block;
        border: none;
        padding: 0;
    }

    /* ── Zeile 1: ● Einheit (links, fett) + Einzelpreis (rechts) ── */

    .aro-b2b-row td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    /* Label fett */
    .aro-b2b-row td:nth-child(1) .aro-prd-unit-inner p {
        font-weight: 700;
        margin: 0;
    }

    .aro-b2b-row td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        text-align: right !important;
        align-self: center;
        white-space: nowrap;
        /* Kein padding-right auf Mobile */
        padding-right: 0;
    }

    /* "/St." nur auf Mobile via ::after */
    .aro-price-sale::after,
    .aro-price-single::after {
        content: "/St.";
        font-size: 0.85em;
        opacity: 0.75;
    }

    /* Sale-Preise auf Mobile: vertikal gestapelt, beide rechts */
    .aro-price-stack {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }

    .aro-price-original {
        font-size: 0.78em;
        opacity: 0.5;
    }

    .aro-price-sale,
    .aro-price-single {
        font-weight: 600;
    }

    /* ── Zeile 2: "Gesamt:" (muted) + Gesamtpreis (fett, rechts) ── */

    .aro-b2b-row td:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        justify-content: center;
        gap: var(--juju-margin-small);
        align-items: baseline;
        padding-top: 6px;
        padding-bottom: 0px;
    }

    /* "Gesamt:" Label */
    .aro-b2b-row td:nth-child(3)::before {
        content: "Gesamt:";
        font-weight: 400;
        opacity: 0.6;
        font-size: 0.9em;
    }

    /* Gesamtpreis fett */
    .aro-b2b-row td:nth-child(3).aro-total-price {
        font-weight: 700;
    }

    /* ── Zeile 3: Qty (volle Breite, zentriert) ──────────────────── */

    .aro-b2b-row td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        padding-top: 14px;
    }

    .aro-b2b-row td:nth-child(4) .aro-qty-select {
        justify-content: center !important;
        width: 100%;
    }

    /* Qty-Input nimmt verfügbaren Platz */
    .aro-qty-input {
        flex: 1;
        max-width: none;
        width: auto;
        text-align: center;
    }
}