/**
 * WooReady → Variation Swatches – Frontend Theme Override
 *
 * Bringt das eingebettete Vario-Plugin auf das WooReady-Apple-Design.
 * Wird NACH avs-frontend-css geladen, um die --avs-*-Tokens neu zu setzen.
 * Modul-Akzentfarbe: Mint #00C7BE.
 *
 * @package WooReadyDEB2B\Modules\VariantLoop
 */

/* ── Quiet-Authority Token-Override ────────────────────────────────────── */
.avs-wrapper {
    --avs-accent:           #00C7BE;
    --avs-accent-soft:      rgba(0, 199, 190, 0.18);
    --avs-accent-strong:    #00A89F;
    --avs-selected-color:   #00C7BE;
    --avs-hover-color:      #1D1D1F;
    --avs-text:             #1D1D1F;
    --avs-text-secondary:   #86868B;
    --avs-border:           #D1D1D6;
    --avs-border-soft:      #F2F2F7;
    --avs-surface:          #FFFFFF;
    --avs-surface-raised:   #FFFFFF;
    --avs-surface-recessed: #F9F9FB;
    --avs-oos-color:        #FF3B30;
    --avs-tooltip-bg:       rgba(29, 29, 31, 0.92);
    --avs-tooltip-text:     #FFFFFF;
    --avs-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
    --avs-shadow-md:        0 2px 8px rgba(0, 0, 0, 0.08);
    --avs-shadow-focus:     0 0 0 3px rgba(0, 199, 190, 0.25);
    --avs-radius-sm:        8px;
    --avs-radius-md:        10px;
    --avs-radius-lg:        12px;
    --avs-transition:       0.18s cubic-bezier(0.25, 0.1, 0.25, 1);

    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--avs-text);
    -webkit-font-smoothing: antialiased;
}

.avs-wrapper * {
    box-sizing: border-box;
}

/* ── Attribut-Label ────────────────────────────────────────────────────── */
.avs-wrapper .avs-attribute-label,
.avs-wrapper label[for^="avs-"] {
    color: var(--avs-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

/* ── Swatch-Liste (Container) ──────────────────────────────────────────── */
.avs-wrapper .avs-options,
.avs-wrapper [role="radiogroup"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Swatch (Basis) ────────────────────────────────────────────────────── */
/* Hohe Spezifität nötig, um Theme-Button-Overrides zu neutralisieren.
   Viele WP-Themes stylen `button` global mit Padding, Display usw. */
.avs-wrapper .avs-swatch,
.avs-wrapper .avs-swatches .avs-swatch {
    border: 1.5px solid var(--avs-border);
    background: var(--avs-surface);
    cursor: pointer;
    transition:
        transform var(--avs-transition),
        box-shadow var(--avs-transition),
        border-color var(--avs-transition),
        background-color var(--avs-transition);
    overflow: hidden;
    position: relative;
    /* Theme-Reset — verhindert button-Styles des Themes */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.avs-wrapper .avs-swatch:hover {
    transform: translateY(-1px);
    box-shadow: var(--avs-shadow-md);
    border-color: var(--avs-text-secondary);
}

.avs-wrapper .avs-swatch:focus-visible,
.avs-wrapper .avs-swatch:focus {
    outline: none;
    box-shadow: var(--avs-shadow-focus);
    border-color: var(--avs-accent);
}

/* ── Form-Override (weichere Ecken als Vario-Default) ─────────────────── */
.avs-wrapper.avs-shape--rounded .avs-swatch,
.avs-wrapper .avs-swatch--button {
    border-radius: var(--avs-radius-md) !important;
}

.avs-wrapper.avs-shape--square .avs-swatch {
    border-radius: 4px !important;
}

.avs-wrapper.avs-shape--circle .avs-swatch {
    border-radius: 50% !important;
}

/* ── Größen feiner abgestuft ──────────────────────────────────────────── */
/* Explizite !important-Werte, damit Theme-Button-Styles die Swatch-
   Dimensionen nicht überschreiben (häufig: `button { width:auto; }`). */
.avs-wrapper.avs-size--small .avs-swatch  { height: 28px !important; min-width: 28px !important; width: 28px !important; max-width: 28px; }
.avs-wrapper.avs-size--medium .avs-swatch { height: 36px !important; min-width: 36px !important; width: 36px !important; max-width: 36px; }
.avs-wrapper.avs-size--large .avs-swatch  { height: 44px !important; min-width: 44px !important; width: 44px !important; max-width: 44px; }

/* Button-Labels brauchen flexible Breite */
.avs-wrapper .avs-swatch--button {
    width: auto !important;
    max-width: none;
    min-width: 44px !important;
    padding: 0 14px !important;
    font-weight: 500;
    font-size: 13px;
    color: var(--avs-text);
    line-height: 1;
}

.avs-wrapper .avs-swatch--button:hover {
    background: var(--avs-surface-recessed);
}

/* ── Selected State – kein gelber Native-Border, sondern Mint-Ring ───── */
.avs-wrapper .avs-swatch.avs-selected,
.avs-wrapper .avs-swatch[aria-checked="true"] {
    border-color: var(--avs-accent);
    box-shadow:
        0 0 0 2px var(--avs-surface),
        0 0 0 4px var(--avs-accent),
        var(--avs-shadow-sm);
    transform: translateY(-1px);
}

.avs-wrapper .avs-swatch--button.avs-selected,
.avs-wrapper .avs-swatch--button[aria-checked="true"] {
    background: var(--avs-accent);
    color: #FFFFFF;
    border-color: var(--avs-accent);
}

/* ── Color/Dual-Color ─────────────────────────────────────────────────── */
.avs-swatch--color > span,
.avs-swatch--dual_color > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* Kontrast-Ring für sehr helle Farben (z.B. Weiß):
   Die Hintergrundfarbe wird inline via PHP gesetzt.
   Hier nur der innere Schatten als visueller Kontrast-Rand. */
.avs-swatch--color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ── Image-Swatches ───────────────────────────────────────────────────── */
.avs-swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ── Out-of-Stock – diagonale Linie + Opazität ────────────────────────── */
.avs-wrapper .avs-swatch.avs-out-of-stock,
.avs-wrapper .avs-swatch[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
    filter: grayscale(0.6);
}

.avs-wrapper .avs-swatch.avs-out-of-stock::before,
.avs-wrapper .avs-swatch[aria-disabled="true"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px),
            var(--avs-oos-color) calc(50% - 1px),
            var(--avs-oos-color) calc(50% + 1px),
            transparent calc(50% + 1px));
    pointer-events: none;
    border-radius: inherit;
}

/* ── Tooltips ─────────────────────────────────────────────────────────── */
.avs-swatch[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--avs-tooltip-bg);
    color: var(--avs-tooltip-text);
    padding: 6px 10px;
    border-radius: var(--avs-radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 10;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.avs-swatch[data-tooltip]:hover::after,
.avs-swatch[data-tooltip]:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Archive-Swatches (Loop) – kompakter, runder ──────────────────────── */
.avs-archive-swatches {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}

.avs-archive-attribute {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.avs-archive-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 1.5px solid var(--avs-border);
    border-radius: 50%;
    background: var(--avs-surface);
    text-decoration: none;
    transition:
        transform var(--avs-transition),
        border-color var(--avs-transition),
        box-shadow var(--avs-transition);
    overflow: hidden;
}

.avs-archive-swatch:hover {
    transform: translateY(-1px);
    border-color: var(--avs-accent);
    box-shadow: var(--avs-shadow-sm);
}

.avs-archive-swatch--active {
    border-color: var(--avs-accent);
    box-shadow:
        0 0 0 2px var(--avs-surface),
        0 0 0 3px var(--avs-accent);
}

.avs-archive-swatch--color > span,
.avs-archive-swatch--dual_color > span {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: block;
}

.avs-archive-swatch--button {
    border-radius: var(--avs-radius-sm);
    padding: 0 10px;
    height: 26px;
    font-size: 12px;
    font-weight: 500;
    color: var(--avs-text);
    background: var(--avs-surface-recessed);
}

.avs-archive-swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avs-archive-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--avs-text-secondary);
    border: 1.5px dashed var(--avs-border);
    border-radius: 50%;
    background: transparent;
}

/* ── Availability-Badge ───────────────────────────────────────────────── */
.avs-archive-availability {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

.avs-archive-availability--instock {
    background: rgba(52, 199, 89, 0.12);
    color: #248A3D;
}

.avs-archive-availability--outofstock {
    background: rgba(255, 59, 48, 0.12);
    color: #C7372F;
}

.avs-archive-availability--onbackorder {
    background: rgba(255, 149, 0, 0.12);
    color: #B86E00;
}

/* ── Preloader (Skeleton) ─────────────────────────────────────────────── */
.avs-archive-swatches--preload .avs-archive-swatch {
    animation: avs-pulse 1.4s ease-in-out infinite;
}

@keyframes avs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .avs-swatch,
    .avs-archive-swatch {
        transition: none;
    }
    .avs-swatch:hover,
    .avs-swatch.avs-selected,
    .avs-archive-swatch:hover {
        transform: none;
    }
    .avs-archive-swatches--preload .avs-archive-swatch {
        animation: none;
    }
}