/* Spare parts kit picker (TK11730). */

.hbe-kit-picker {
    &.is-selected {
        /* Centered: one card left-aligned strands it from the Next button. */
        .hbe-kit-grid {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            max-width: 380px;
            margin: 0 auto 1rem;
        }

        .hbe-kit-card:not(.is-chosen) {
            display: none;
        }

        /* The title reserves two lines to align grid cards; alone it's a hole. */
        .hbe-kit-card .hbe-pump-content .hbe-pump-title {
            min-height: 0;
            margin-bottom: 0;
        }

        .hbe-kit-change {
            display: block;
            max-width: 380px;
            margin-inline: auto;
        }
    }

    &.is-invalid {
        .hbe-kit-sizes {
            border-top-color: #f87171;
        }

        .hbe-kit-size {
            border-color: #f87171;
        }
    }
}

.hbe-kit-card {
    cursor: pointer;

    .hbe-pump-image {
        display: block;
        position: relative;
    }

    &.is-chosen {
        border-color: #635ea7;
        box-shadow:
            0 4px 12px rgb(99 93 167 / 0.15),
            0 2px 4px rgb(99 93 167 / 0.1),
            0 1px 2px rgb(99 93 167 / 0.05);

        .hbe-pump-image::after {
            content: '✓';
            position: absolute;
            inset-block-start: 0.75rem;
            inset-inline-end: 0.75rem;
            display: grid;
            place-items: center;
            width: 1.75rem;
            height: 1.75rem;
            /* Optical: the glyph's ink sits low in its box. */
            padding-bottom: 1px;
            border-radius: 50%;
            background: linear-gradient(135deg, #635ea7 0%, #574fa5 100%);
            color: #fff;
            font-size: 0.85rem;
            font-weight: 700;
            line-height: 1;
            /* Clears the card image, which is z-index 2. */
            z-index: 3;
        }
    }
}

.hbe-quick-view-actions .hbe-kit-choose.is-sized {
    background: #f5f4fa;
    font-weight: 600;
    color: #616875;
    cursor: default;

    /* / '' keeps the glyph out of the accessible name. */
    &::before {
        content: '✓ ' / '';
        color: #635ea7;
        font-weight: 700;
    }
}

.hbe-kit-fits-open {
    display: block;
    width: 100%;
    line-height: 1.5;
}

.hbe-popular-pumps-grid .hbe-kit-card .hbe-pump-image {
    aspect-ratio: 4 / 3;
}

.hbe-popular-pumps-grid .hbe-kit-card .hbe-pump-content {
    padding: 1.25rem;
    gap: 0.75rem;

    .hbe-pump-title {
        font-size: 1.1rem;
        min-height: 2.9rem;
        margin-bottom: 0;
    }
}

.hbe-kit-sizes {
    margin-bottom: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;

    /* Settled: the alternatives leave the flow so nothing reflows around them. */
    &.is-settled {
        .hbe-kit-size[aria-pressed='false'] {
            display: none;
        }

        .hbe-kit-change-size {
            display: inline-block;
        }
    }
}

.hbe-kit-sizes-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
}

.hbe-kit-size-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hbe-kit-size {
    padding: 0.5rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    background: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition-property: color, background-color, border-color, scale;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

    &:hover {
        border-color: #635ea7;
        color: #635ea7;
    }

    &:active {
        scale: 0.96;
    }

    /* Named so the view transition glides it between rows. */
    &[aria-pressed='true'] {
        background: linear-gradient(135deg, #635ea7 0%, #574fa5 100%);
        border-color: transparent;
        color: #fff;
        view-transition-name: hbe-kit-chosen-size;
    }
}

.hbe-kit-change-size {
    display: none;
    order: 1;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    /* Matches the chip's box so the row can't grow when this appears. */
    line-height: 34px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    cursor: pointer;

    &:hover {
        color: #635ea7;
    }
}

.hbe-kit-change {
    display: none;
    padding: 0.55rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    background: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    cursor: pointer;
    transition-property: color, border-color, scale;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

    &:hover {
        border-color: #635ea7;
        color: #635ea7;
    }

    &:active {
        scale: 0.96;
    }
}

.hbe-kit-select {
    transition-property: scale;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

    &:active {
        scale: 0.96;
    }
}

/* Chosen but sizeless: a dashed placeholder, not a done step. */
.hbe-popular-pumps-grid
    .hbe-pump-card
    .hbe-pump-content
    .hbe-pump-actions
    .hbe-kit-select.is-awaiting {
    border: 1px dashed #a5a1cd;
    background: #fff;
    /* Overrides the card CTA's inherited !important, here and on hover. */
    color: #635ea7 !important;
    box-shadow: none;

    /* Its gradient overlay fades in on hover and swallows the placeholder. */
    &::before {
        opacity: 0 !important;
    }

    &:hover {
        border-color: #635ea7;
        background: #f9f9fc;
        color: #574fa5 !important;
        transform: none;
        box-shadow: none;
    }
}

/* Sized is a state, not an action: don't compete with Next. */
.hbe-popular-pumps-grid
    .hbe-pump-card
    .hbe-pump-content
    .hbe-pump-actions
    .hbe-kit-select.is-sized {
    background: #f5f4fa;
    color: #616875 !important;
    box-shadow: none;

    &::before {
        opacity: 0 !important;
    }

    /* / '' keeps the glyph out of the accessible name. */
    .hbe-kit-select-label::before {
        content: '✓ ' / '';
        color: #635ea7;
        font-weight: 700;
    }

    /* Reports the choice; the chip's Change button does the changing. */
    cursor: default;

    &:hover {
        background: #f5f4fa;
        color: #616875 !important;
        transform: none;
        box-shadow: none;
    }
}

.hbe-kit-size:focus-visible,
.hbe-kit-change:focus-visible,
.hbe-kit-change-size:focus-visible,
.hbe-kit-select:focus-visible {
    outline: 2px solid #635ea7;
    outline-offset: 2px;
}

.hbe-kit-error {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b91c1c;
}

/* What the chosen provider charges, said once above the grid. */
.hbe-kit-coverage {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* !important beats the display GF's conditional logic writes inline. */
.gfield.hbe-kit-no-payment,
.gfield.hbe-kit-hidden-product {
    display: none !important;
}

/* Added by JS, so no-JS visitors keep the original GF dropdowns. */
.hbe-kit-field-hidden {
    display: none !important;
}

/* Field 401's container also holds the picker, so only its label and input go. */
.hbe-kit-field-driven > *:not(.hbe-kit-picker) {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hbe-kit-picker :is(.hbe-kit-size, .hbe-kit-change, .hbe-kit-select) {
        transition-duration: 1ms;
    }
}

/* Thumb targets on touch only; a mouse keeps four chips on one line. */
@media (pointer: coarse) {
    .hbe-kit-size,
    .hbe-kit-change,
    .hbe-kit-select {
        min-height: 44px;
    }

    .hbe-kit-size {
        padding-inline: 1.1rem;
    }
}

/* On step 1 the step map is the only other thing on the page. */
#gf_page_steps_66:has(#gf_step_66_1.gf_step_active) {
    display: none;
}