/**
 * Petka Better Swatch
 *
 * Every rule is scoped to .pbsw.pbsw-on, the class the mixin puts on a swatch block, so
 * it outranks theme rules such as ".swatch-option.selected" without !important. All sizes
 * and colours are --pbsw-* tokens; the admin re-declares them in an inline style block.
 */

.pbsw {
    --pbsw-text: #2b2b2b;
    --pbsw-muted: #7a7a7a;
    --pbsw-bg: #f3f3f3;
    --pbsw-border: #e2e2e2;
    --pbsw-hover-border: #b5b5b5;
    --pbsw-accent: #2b2b2b;
    --pbsw-accent-text: #ffffff;
    --pbsw-selected-bg: #ffffff;
    --pbsw-na-ring: #c4c4c4;
    --pbsw-surface: #ffffff;
    --pbsw-tip-bg: #2b2b2b;
    --pbsw-tip-text: #ffffff;
    --pbsw-font-size: 14px;
    --pbsw-weight: 500;
    --pbsw-label-weight: 600;
    --pbsw-height: 40px;
    --pbsw-pad: 16px;
    --pbsw-radius: 10px;
    --pbsw-gap: 8px;
    --pbsw-dot: 30px;
    --pbsw-ring-gap: 3px;
    --pbsw-ring: 2px;
    --pbsw-na: 0.3;
    --pbsw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ attribute rows */

.pbsw.pbsw-on .swatch-attribute-label {
    font-weight: var(--pbsw-label-weight);
    color: var(--pbsw-text);
}

.pbsw.pbsw-on .swatch-attribute-selected-option {
    padding-left: 10px;
    color: var(--pbsw-muted);
    font-weight: 400;
}

.pbsw.pbsw-on .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pbsw-gap);
    margin-top: 10px;
    margin-bottom: 14px;
}

/* ------------------------------------------------------------------ every option */

.pbsw.pbsw-on .swatch-option {
    position: relative;
    float: none;
    box-sizing: border-box;
    margin: 0;
    overflow: visible;
    outline: none;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.22s var(--pbsw-ease),
        transform 0.22s var(--pbsw-ease);
}

.pbsw.pbsw-on .swatch-option:focus-visible {
    outline: 2px solid var(--pbsw-accent);
    outline-offset: 3px;
}

/* The theme's diagonal "crossed out" line is replaced by fading and a tooltip. */
.pbsw.pbsw-on .swatch-option.disabled::after {
    content: none;
    background: none;
}

/* ------------------------------------------------------------------ text swatches: base */

.pbsw.pbsw-on .swatch-option.text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pbsw-height);
    height: var(--pbsw-height);
    padding: 0 var(--pbsw-pad);
    border: 1px solid transparent;
    border-radius: var(--pbsw-radius);
    background: var(--pbsw-bg);
    color: var(--pbsw-text);
    font-size: var(--pbsw-font-size);
    font-weight: var(--pbsw-weight);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
}

.pbsw.pbsw-on .swatch-option.text:not(.disabled):active {
    transform: scale(0.96);
}

/* Unavailable: the same option at a fraction of its colour, never struck through. */
.pbsw.pbsw-on .swatch-option.text.disabled {
    background: color-mix(in srgb, var(--pbsw-bg) calc(var(--pbsw-na) * 100%), transparent);
    border-color: color-mix(in srgb, var(--pbsw-border) calc(var(--pbsw-na) * 100%), transparent);
    color: color-mix(in srgb, var(--pbsw-text) calc(var(--pbsw-na) * 100%), transparent);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* 1. Soft - light tiles, the chosen one lifted onto white with an accent outline. */
.pbsw.pbsw--soft.pbsw-on .swatch-option.text:not(.disabled):hover {
    border-color: var(--pbsw-hover-border);
}

.pbsw.pbsw--soft.pbsw-on .swatch-option.text.selected {
    background: var(--pbsw-selected-bg);
    border-color: var(--pbsw-accent);
    box-shadow: 0 0 0 1px var(--pbsw-accent), 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 2. Outline - white with a hairline, the chosen one with a heavy border. */
.pbsw.pbsw--outline.pbsw-on .swatch-option.text {
    background: var(--pbsw-surface);
    border-color: var(--pbsw-border);
}

.pbsw.pbsw--outline.pbsw-on .swatch-option.text.disabled {
    background: var(--pbsw-surface);
}

.pbsw.pbsw--outline.pbsw-on .swatch-option.text:not(.disabled):hover {
    border-color: var(--pbsw-hover-border);
}

.pbsw.pbsw--outline.pbsw-on .swatch-option.text.selected {
    background: var(--pbsw-selected-bg);
    border-color: var(--pbsw-accent);
    box-shadow: inset 0 0 0 1px var(--pbsw-accent);
}

/* 3. Pill - capsules, the chosen one filled with the accent. */
.pbsw.pbsw--pill.pbsw-on .swatch-option.text {
    border-radius: 999px;
}

.pbsw.pbsw--pill.pbsw-on .swatch-option.text:not(.disabled):not(.selected):hover {
    background: color-mix(in srgb, var(--pbsw-bg) 88%, var(--pbsw-text));
}

.pbsw.pbsw--pill.pbsw-on .swatch-option.text.selected {
    background: var(--pbsw-accent);
    border-color: var(--pbsw-accent);
    color: var(--pbsw-accent-text);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pbsw-accent) 30%, transparent);
}

/* 4. Minimal - bare text, a line grows under the hovered and the chosen option. */
.pbsw.pbsw--minimal.pbsw-on .swatch-option.text {
    min-width: 0;
    padding: 0 calc(var(--pbsw-pad) * 0.5);
    border-color: transparent;
    background: transparent;
    color: var(--pbsw-muted);
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text.disabled {
    background: transparent;
    border-color: transparent;
    color: color-mix(in srgb, var(--pbsw-muted) calc(var(--pbsw-na) * 100%), transparent);
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text:not(.disabled)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pbsw-hover-border);
    transform: translateX(-50%);
    transition: width 0.28s var(--pbsw-ease), background-color 0.2s ease;
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text:not(.disabled):hover {
    color: var(--pbsw-text);
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text:not(.disabled):hover::after {
    width: 40%;
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text.selected {
    color: var(--pbsw-text);
}

.pbsw.pbsw--minimal.pbsw-on .swatch-option.text.selected::after {
    width: calc(100% - var(--pbsw-pad));
    background: var(--pbsw-accent);
}

/* 5. Elevated - white cards that lift on hover; the chosen one gets a check mark. */
.pbsw.pbsw--elevated.pbsw-on .swatch-option.text {
    background: var(--pbsw-surface);
    border-color: var(--pbsw-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.pbsw.pbsw--elevated.pbsw-on .swatch-option.text.disabled {
    background: var(--pbsw-surface);
    box-shadow: none;
}

.pbsw.pbsw--elevated.pbsw-on .swatch-option.text:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.pbsw.pbsw--elevated.pbsw-on .swatch-option.text.selected {
    border-color: var(--pbsw-accent);
    box-shadow: 0 0 0 1px var(--pbsw-accent), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.pbsw.pbsw--elevated.pbsw-on .swatch-option.text.selected::after {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        var(--pbsw-accent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 11px no-repeat;
    box-shadow: 0 0 0 2px var(--pbsw-surface);
    animation: pbsw-pop 0.32s var(--pbsw-ease);
}

@keyframes pbsw-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ------------------------------------------------------------------ colour swatches */

/*
 * A dot inside a ring of its own colour, with a gap of page background between them:
 * box-shadow draws both, so nothing shifts when the ring changes.
 */
.pbsw.pbsw-on .swatch-option.color {
    --pbsw-ring-color: color-mix(in srgb, var(--pbsw-c, var(--pbsw-hover-border)) 45%, transparent);
    --pbsw-ring-now: var(--pbsw-ring);

    width: var(--pbsw-dot);
    min-width: var(--pbsw-dot);
    height: var(--pbsw-dot);
    margin: calc(var(--pbsw-ring-gap) + var(--pbsw-ring) + 1px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0 var(--pbsw-ring-gap) var(--pbsw-surface),
        0 0 0 calc(var(--pbsw-ring-gap) + var(--pbsw-ring-now)) var(--pbsw-ring-color);
}

.pbsw.pbsw-on .swatch-option.color:not(.disabled):hover {
    --pbsw-ring-color: var(--pbsw-c, var(--pbsw-hover-border));
    transform: scale(1.06);
}

.pbsw.pbsw-on .swatch-option.color.selected {
    --pbsw-ring-color: var(--pbsw-c, var(--pbsw-accent));
    --pbsw-ring-now: calc(var(--pbsw-ring) + 1px);
}

/* White and near-white would draw an invisible ring: give those a hairline and a grey ring. */
.pbsw.pbsw-on .swatch-option.color.pbsw-light {
    --pbsw-c: var(--pbsw-hover-border);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.14),
        0 0 0 var(--pbsw-ring-gap) var(--pbsw-surface),
        0 0 0 calc(var(--pbsw-ring-gap) + var(--pbsw-ring-now)) var(--pbsw-ring-color);
}

/* Unavailable: the colour at a fraction of its strength inside a grey ring. */
.pbsw.pbsw-on .swatch-option.color.disabled {
    --pbsw-ring-color: var(--pbsw-na-ring);
    --pbsw-ring-now: var(--pbsw-ring);
    transform: none;
    cursor: not-allowed;
}

.pbsw.pbsw-on .swatch-option.color.disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pbsw-surface);
    opacity: calc(1 - var(--pbsw-na));
}

.pbsw.pbsw-on .swatch-option.image {
    border: 0;
    border-radius: var(--pbsw-radius);
    box-shadow: 0 0 0 1px var(--pbsw-border);
}

.pbsw.pbsw-on .swatch-option.image.selected {
    box-shadow: 0 0 0 var(--pbsw-ring-gap) var(--pbsw-surface), 0 0 0 calc(var(--pbsw-ring-gap) + var(--pbsw-ring)) var(--pbsw-accent);
}

.pbsw.pbsw-on .swatch-option.image.disabled {
    opacity: var(--pbsw-na);
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ unavailable tooltip */

.pbsw.pbsw-on .swatch-option.disabled::before {
    content: attr(data-pbsw-na);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 30;
    padding: 7px 11px;
    border-radius: 7px;
    background: var(--pbsw-tip-bg);
    color: var(--pbsw-tip-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.16s ease, transform 0.2s var(--pbsw-ease), visibility 0.16s;
}

/* Colour swatches already get Magento's own preview tooltip above them - use below. */
.pbsw.pbsw-on .swatch-option.color.disabled::before,
.pbsw.pbsw-on .swatch-option.image.disabled::before {
    top: calc(100% + 12px);
    bottom: auto;
    transform: translate(-50%, -4px);
}

.pbsw.pbsw-on .swatch-option.disabled:hover::before,
.pbsw.pbsw-on .swatch-option.disabled:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ clear selection */

.pbsw.pbsw-on .pbsw-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 10px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pbsw-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.25s var(--pbsw-ease), color 0.15s ease, visibility 0.2s;
}

.pbsw.pbsw-on .pbsw-clear::before {
    content: '';
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.4s var(--pbsw-ease);
}

.pbsw.pbsw-on.pbsw-has-selection .pbsw-clear {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.pbsw.pbsw-on .pbsw-clear:hover,
.pbsw.pbsw-on .pbsw-clear:focus {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--pbsw-text);
}

.pbsw.pbsw-on .pbsw-clear:hover::before {
    transform: rotate(-200deg);
}

/* ------------------------------------------------------------------ product lists */

.pbsw.pbsw-on.pbsw--listing {
    --pbsw-height: 30px;
    --pbsw-pad: 10px;
    --pbsw-font-size: 12px;
    --pbsw-dot: 20px;
    --pbsw-gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .pbsw.pbsw-on .swatch-option,
    .pbsw.pbsw-on .swatch-option::before,
    .pbsw.pbsw-on .swatch-option::after,
    .pbsw.pbsw-on .pbsw-clear,
    .pbsw.pbsw-on .pbsw-clear::before {
        transition: none;
        animation: none;
    }
}