/* =========================================================
   WIDGET: PAYMENT ICONS — Premium Card 2026
   Card-Wrapper, Glassmorphism-Pills, Gold-Gradient,
   Dark Mode, Reduced Motion, Container Queries, BFSG
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
.kw-pi {
    --kw-pi-icon-color: var(--kwl-focus, #7B6835);
    --kw-pi-icon-hover: var(--kwl-primary, #00315d);
    --kw-pi-label-color: var(--kwl-text, #333333);
    --kw-pi-pill-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 6%, var(--kwl-bg, #ffffff));
    --kw-pi-pill-border: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, var(--kwl-border, #e2e8f0));
    --kw-pi-pill-bg-hover: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 14%, var(--kwl-bg, #ffffff));
    --kw-pi-pill-border-hover: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, var(--kwl-border, #e2e8f0));
    --kw-pi-pill-shadow-hover: 0 4px 12px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, transparent);
    --kw-pi-icon-radius: var(--kwl-radius-md, 8px);
    --kw-pi-gap: var(--kwl-space-md, 1rem);
    --kw-pi-transition: 200ms;
    --kw-pi-easing: var(--kwl-ease-default);

    /* Layout */
    padding: var(--kwl-space-lg, 1.5rem);
    font-family: var(--kwl-font-body);
}

/* ---------------------------------------------------------
   2. Titel — Gold-Gradient-Separator
   --------------------------------------------------------- */
.kw-pi__title {
    font-family: var(--kwl-font-heading);
    line-height: var(--kwl-lh-heading);
    color: var(--kwl-text, #1a202c);
    margin: 0 0 var(--kwl-space-md, 1rem) 0;
    padding-bottom: var(--kwl-space-md, 1rem);
}

h2.kw-pi__title {
    font-size: var(--kwl-fsize-h2);
}

h3.kw-pi__title {
    font-size: var(--kwl-fsize-h3);
}

h4.kw-pi__title {
    font-size: var(--kwl-fsize-h4, clamp(1rem, 0.95rem + 0.5vw, 1.25rem));
}

h5.kw-pi__title {
    font-size: var(--kwl-fsize-small, clamp(0.875rem, 0.85rem + 0.3vw, 1.125rem));
}

span.kw-pi__title {
    font-size: var(--kwl-fsize-body);
}

/* ---------------------------------------------------------
   3. Liste + Items — Glassmorphism-Pills
   --------------------------------------------------------- */
.kw-pi__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--kw-pi-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    container-type: inline-size;
    container-name: pi-list;
}

.kw-pi__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kwl-space-xs, 0.25rem);
    min-width: 44px;
    min-height: 44px;
    padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
    justify-content: center;
    cursor: default;
    background: var(--kw-pi-pill-bg);
    border: 1px solid var(--kw-pi-pill-border);
    border-radius: var(--kw-pi-icon-radius);
    transition: transform var(--kw-pi-transition) var(--kw-pi-easing),
                box-shadow var(--kw-pi-transition) var(--kw-pi-easing),
                border-color var(--kw-pi-transition) var(--kw-pi-easing),
                background-color var(--kw-pi-transition) var(--kw-pi-easing);
}

@media (hover: hover) {
    .kw-pi__item:hover {
        transform: translateY(-3px) scale(1.04);
        background: var(--kw-pi-pill-bg-hover);
        border-color: var(--kw-pi-pill-border-hover);
        box-shadow: var(--kw-pi-pill-shadow-hover);
    }

    .kw-pi__item:hover .kw-pi__icon {
        color: var(--kw-pi-icon-hover);
    }
}

/* ---------------------------------------------------------
   4. Icon — pointer-events: none fuer zuverlaessige Tooltips
   --------------------------------------------------------- */
.kw-pi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: var(--kwl-lh-none);
    color: var(--kw-pi-icon-color);
    pointer-events: none;
}

.kw-pi__icon svg {
    display: block;
    height: auto;
    max-width: 100%;
    fill: currentColor;
    transition:
        filter var(--kw-pi-transition) var(--kw-pi-easing),
        opacity var(--kw-pi-transition) var(--kw-pi-easing);
}

/* sr-only Spans und Labels: auch keine Pointer-Events abfangen */
.kw-pi__item > .sr-only,
.kw-pi__label {
    pointer-events: none;
}

/* ---------------------------------------------------------
   5. Labels — BFSG: min. 4.5:1 Kontrast, gut lesbar
   --------------------------------------------------------- */
.kw-pi__label {
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-small, clamp(0.75rem, 0.73rem + 0.1vw, 0.875rem));
    line-height: var(--kwl-lh-snug);
    color: var(--kw-pi-label-color);
    text-align: center;
    white-space: nowrap;
    font-weight: var(--kwl-fw-medium);
}

/* ---------------------------------------------------------
   6. Modifier: Graustufen (.kw-pi--grayscale)
   --------------------------------------------------------- */
.kw-pi--grayscale .kw-pi__icon svg {
    filter: grayscale(100%);
    opacity: 0.4;
}

.kw-pi--grayscale .kw-pi__label {
    opacity: 0.5;
}

@media (hover: hover) {
    .kw-pi--grayscale .kw-pi__item:hover .kw-pi__icon svg {
        filter: grayscale(0%);
        opacity: 1;
    }

    .kw-pi--grayscale .kw-pi__item:hover .kw-pi__label {
        opacity: 1;
    }
}

/* ---------------------------------------------------------
   7. Modifier: Icon-Hintergrund (.kw-pi--icon-bg)
   Glassmorphism-Kreis innerhalb der Pill
   --------------------------------------------------------- */
/* Icon-Circle Bridge: Widget → Shared [data-kwl-icon-circle] */
.kw-pi--icon-bg [data-kwl-icon-circle] {
    --kwl-icon-size: 48px;
    transition:
        background-color var(--kw-pi-transition) var(--kw-pi-easing),
        border-color var(--kw-pi-transition) var(--kw-pi-easing);
}

@media (hover: hover) {
    .kw-pi--icon-bg .kw-pi__item:hover [data-kwl-icon-circle] {
        background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, transparent);
        border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 35%, transparent);
    }
}

/* ---------------------------------------------------------
   8. Container Queries
   --------------------------------------------------------- */
@container pi-list (max-width: 300px) {
    .kw-pi__list {
        gap: var(--kwl-space-sm, 0.5rem);
    }

    .kw-pi__item {
        padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
    }

    .kw-pi__icon svg {
        width: 24px;
    }

    .kw-pi--icon-bg [data-kwl-icon-circle] {
        --kwl-icon-size: 36px;
    }
}

/* ---------------------------------------------------------
   9. Focus-Visible (BFSG)
   --------------------------------------------------------- */
.kw-pi__item:focus-visible {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   10. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .kw-pi {
        --kw-pi-icon-color: var(--kwl-text, #f7fafc);
        --kw-pi-icon-hover: var(--kwl-accent, #BD9B5C);
        --kw-pi-label-color: var(--kwl-text, #d4d4d4);
        --kw-pi-pill-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 6%, var(--kwl-bg, #1a202c));
        --kw-pi-pill-border: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, var(--kwl-border, #4a5568));
        --kw-pi-pill-bg-hover: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 14%, var(--kwl-bg, #1a202c));
        --kw-pi-pill-border-hover: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, var(--kwl-border, #4a5568));
        --kw-pi-pill-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .kw-pi__title {
        color: var(--kwl-text, #f7fafc);
    }

    .kw-pi--icon-bg [data-kwl-icon-circle] {
        background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, var(--kwl-bg, #1a202c));
        border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 18%, var(--kwl-border, #4a5568));
    }

    .kw-pi__item:focus-visible {
        outline-color: var(--kwl-focus, #c9a84c);
    }
}

/* ---------------------------------------------------------
   11. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .kw-pi__item,
    .kw-pi--icon-bg [data-kwl-icon-circle],
    .kw-pi__icon svg {
        transition: none;
    }

    @media (hover: hover) {
        .kw-pi__item:hover {
            transform: none;
        }
    }
}