/* Sistema pulsanti condiviso — Prisma / stage / color app */

:is(body.body-stage, body.body-color-app, body.body-palette-app) {
    --btn-h: 38px;
    --btn-px: 0.85rem;
    --btn-fs: 0.8125rem;
    --btn-fw: 600;
    --btn-icon: 36px;
    --btn-hit: 44px;
    --btn-radius: 9999px;
    --btn-focus-ring: #136ef5;

    --btn-primary-bg: var(--color-primary-500, #136ef5);
    --btn-primary-bg-hover: var(--color-primary-700, #0f57c4);
    --btn-primary-fg: #fff;

    --btn-secondary-bg: var(--color-secondary-800, #f0f0f0);
    --btn-secondary-bg-hover: var(--color-secondary-900, #e5e5e5);
    --btn-secondary-fg: var(--color-secondary-950, #141414);
    --btn-secondary-border: rgba(0, 0, 0, 0.18);

    --btn-ghost-bg: transparent;
    --btn-ghost-bg-hover: rgba(0, 0, 0, 0.06);
    --btn-ghost-fg: inherit;

    --btn-chip-bg: #fff;
    --btn-chip-bg-hover: rgba(19, 110, 245, 0.06);
    --btn-chip-bg-active: rgba(19, 110, 245, 0.08);
    --btn-chip-border: rgba(0, 0, 0, 0.12);
    --btn-chip-fg: #141414;

    --btn-seg-bg: transparent;
    --btn-seg-bg-hover: rgba(0, 0, 0, 0.06);
    --btn-seg-bg-active: #fff;
    --btn-seg-fg: #141414;

    --btn-icon-bg: transparent;
    --btn-icon-bg-hover: rgba(0, 0, 0, 0.06);
    --btn-icon-fg: inherit;
}

@media (max-width: 48rem) {
    :is(body.body-stage, body.body-color-app, body.body-palette-app) {
        --btn-h: 34px;
    }
}

@media (prefers-color-scheme: dark) {
    :is(body.body-color-app, body.body-palette-app) {
        --btn-ghost-bg-hover: rgba(255, 255, 255, 0.08);
        --btn-chip-bg: #1a1a1a;
        --btn-chip-bg-hover: rgba(255, 255, 255, 0.08);
        --btn-chip-bg-active: rgba(91, 155, 255, 0.15);
        --btn-chip-border: rgba(255, 255, 255, 0.14);
        --btn-chip-fg: #f5f5f5;
        --btn-seg-bg-hover: rgba(255, 255, 255, 0.08);
        --btn-seg-bg-active: #2a2a2a;
        --btn-seg-fg: #f5f5f5;
        --btn-icon-bg-hover: rgba(255, 255, 255, 0.08);
    }
}

:is(body.body-stage, body.body-color-app, body.body-palette-app)
    :is(button, a, [role='tab'], [role='radio'], [role='button']):focus-visible {
    outline: 2px solid var(--btn-focus-ring);
    outline-offset: 2px;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    min-height: var(--btn-h);
    height: var(--btn-h);
    padding: 0 var(--btn-px);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-fg);
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn:focus-visible,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn:active {
    text-decoration: none;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn:disabled,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: transparent;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--primary:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--primary:focus-visible {
    background-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border-color: var(--btn-secondary-border);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--secondary:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--secondary:focus-visible {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-fg);
    border-color: var(--btn-secondary-border);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--ghost {
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-fg);
    border-color: transparent;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--ghost:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--ghost:focus-visible {
    background-color: var(--btn-ghost-bg-hover);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--chip {
    background-color: var(--btn-chip-bg);
    color: var(--btn-chip-fg);
    border-color: var(--btn-chip-border);
    font-weight: 500;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--chip:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--chip:focus-visible {
    background-color: var(--btn-chip-bg-hover);
    color: var(--btn-chip-fg);
    border-color: var(--btn-chip-border);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--chip.is-active,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--chip[aria-pressed='true'] {
    background-color: var(--btn-chip-bg-active);
    color: var(--btn-chip-fg);
    border-color: var(--btn-chip-border);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--segmented {
    min-height: var(--btn-h);
    height: var(--btn-h);
    padding: 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background-color: var(--btn-seg-bg);
    color: var(--btn-seg-fg);
    border-color: transparent;
    border-radius: 8px;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--segmented:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--segmented:focus-visible {
    background-color: var(--btn-seg-bg-hover);
    color: var(--btn-seg-fg);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--segmented[aria-pressed='true'],
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--segmented.is-active {
    background-color: var(--btn-seg-bg-active);
    color: var(--btn-seg-fg);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--icon {
    position: relative;
    width: var(--btn-icon);
    height: var(--btn-icon);
    min-width: var(--btn-icon);
    min-height: var(--btn-icon);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--btn-icon-bg);
    color: var(--btn-icon-fg);
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--icon:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--icon:focus-visible {
    background-color: var(--btn-icon-bg-hover);
    color: var(--btn-icon-fg);
}

@media (max-width: 48rem) {
    :is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn--icon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--btn-hit);
        height: var(--btn-hit);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn.btn--linkish {
    background: transparent;
    border-color: transparent;
    font-weight: 500;
    text-decoration: none;
}

:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn.btn--linkish:hover,
:is(body.body-stage, body.body-color-app, body.body-palette-app) :is(a, button).btn.btn--linkish:focus-visible {
    background-color: var(--btn-ghost-bg-hover);
    text-decoration: none;
    color: inherit;
}

:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--linkish,
:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--linkish:hover,
:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--linkish:focus-visible {
    color: var(--color-secondary-550, #595959);
    text-decoration: none;
    background-color: transparent;
}

:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--linkish:hover,
:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--linkish:focus-visible {
    background-color: rgba(0, 0, 0, 0.05);
}

:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--secondary {
    flex: 1 1 auto;
    min-width: 120px;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff;
    color: #141414;
    border-color: #0a0a0a;
}

:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--secondary:hover,
:is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--secondary:focus-visible {
    background-color: #f0f0f0;
    color: #141414;
    border-color: #0a0a0a;
}

@media (prefers-color-scheme: dark) {
    :is(body.body-stage, body.body-color-app) .mfr-consent__banner .mfr-consent__btn.btn.btn--secondary {
        background-color: #fff;
        color: #141414;
        border-color: #0a0a0a;
    }

    :is(body.body-stage, body.body-color-app) .mfr-consent__banner .mfr-consent__btn.btn.btn--secondary:hover,
    :is(body.body-stage, body.body-color-app) .mfr-consent__banner .mfr-consent__btn.btn.btn--secondary:focus-visible {
        background-color: #f0f0f0;
        color: #141414;
    }
}

@media (max-width: 47.9375rem) {
    :is(body.body-stage, body.body-color-app) .mfr-consent__btn.btn.btn--secondary {
        min-height: var(--btn-hit);
        height: auto;
    }
}

@media (max-width: 48rem) {
    body.body-stage .section-navbar-mobile-sticky-foot :is(a, button).btn,
    body.body-stage .section-navbar-mobile-sticky-foot .secondary-button.btn,
    body.body-stage .section-footer-stage__newsletter-button.btn {
        min-height: 34px;
        height: 34px;
    }
}

body.body-stage .section-navbar :is(a, button).primary-button.btn:focus-visible,
body.body-stage .section-navbar :is(a, button).btn--primary.btn:focus-visible,
/* Bridge: componenti legacy + .btn (hover solo background) */
.color-explore__tag.btn--chip:hover,
.color-explore__tag.btn--chip.is-active {
    border-color: var(--btn-chip-border);
}

.color-explore__pagination-btn.btn--chip:hover:not(.is-active),
.color-explore__pagination-btn.btn--chip:focus-visible:not(.is-active) {
    border-color: var(--btn-chip-border);
    color: var(--btn-chip-fg);
    font-weight: 500;
}

.color-explore__pagination-btn.btn--chip.is-active {
    font-weight: 600;
}

.pv-chrome__icon-btn.btn--icon,
.pv-chrome__export--icon.btn--icon {
    width: var(--btn-icon);
    height: var(--btn-icon);
    min-width: var(--btn-icon);
    min-height: var(--btn-icon);
    border-radius: 8px;
}

.pv-segmented__btn.btn--segmented {
    min-height: 34px;
    height: 34px;
}

body.body-stage .section-footer-stage__legal .btn--linkish {
    min-height: auto;
    height: auto;
    padding: 0.35rem 0.5rem;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

body.body-stage .section-footer-stage__legal .btn--linkish:hover,
body.body-stage .section-footer-stage__legal .btn--linkish:focus-visible {
    color: inherit;
}

@media (max-width: 48rem) {
    .pv-rp-swatch--tint {
        position: relative;
    }

    .pv-rp-swatch--tint::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--btn-hit);
        height: var(--btn-hit);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
}

.pv-rp-swatch--tint:hover {
    border-color: var(--pv-rp-border, rgba(0, 0, 0, 0.12));
}