/*
    tyre-sizes - the "All sizes available for ..." list on a brand/model page.

    The size groups ("All 205", "All 215"...) fold: each is a compact bar
    with the width, a count and a chevron, and opens into a card with its
    rows inside. Folded by default, so a model with sixty sizes is a short
    stack of widths rather than a long scroll. The size search opens the
    right group and marks the row - tinted, with a red bar down its left
    edge - so you can see which row you were sent to.

    The markup is a page-builder block (tbl_blockfieldref), so nothing here
    depends on a markup change: 1scripts.js adds the folding classes, the
    count and the is-match flag, and this sheet draws them. Loaded on the
    results/tyrepage pages from MasterPageGlobal; harmless where the list
    is absent.
*/

/* ---------------------------------------------------------- the bars -- */

.tyre-sizes__block--folding {
    margin: 0 0 6px;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

.tyre-sizes__block--folding .tyre-sizes__row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    border-radius: 0;
    background-color: #F5F6F8;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.tyre-sizes__block--folding .tyre-sizes__row-top:hover {
    background-color: #EEF0F3;
}

.tyre-sizes__block--folding .tyre-sizes__row-top:focus-visible {
    outline: 2px solid #ff0801;
    outline-offset: -2px;
}

/* open: a hairline under the bar separates it from the rows */
.tyre-sizes__block--folding:not(.is-folded) .tyre-sizes__row-top {
    border-bottom: 1px solid #E8E8E8;
}

/* chevron: down when folded, up when open */
.tyre-sizes__block--folding .tyre-sizes__row-top:after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: auto;
    margin-top: -4px;
    border-right: 2px solid #202020;
    border-bottom: 2px solid #202020;
    transform: rotate(45deg);
    transition: transform 0.15s ease, margin-top 0.15s ease;
}

.tyre-sizes__block--folding:not(.is-folded) .tyre-sizes__row-top:after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.tyre-sizes__count {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* --------------------------------------------------------- the rows -- */

.tyre-sizes__block--folding.is-folded .tyre-sizes__row {
    display: none;
}

.tyre-sizes__block--folding .tyre-sizes__row {
    margin: 0;
    padding: 12px 14px;
    scroll-margin-top: 96px;
}

/* -------------------------------------------------------- the match -- */

.tyre-sizes__block--folding .tyre-sizes__row.is-match {
    background-color: #FFF3F2;
    box-shadow: inset 3px 0 0 #ff0801;
    animation: tyre-sizes-pulse 1.6s ease-out 1;
}

.tyre-sizes__row.is-match .tyre-sizes__name {
    color: #ff0801;
    font-weight: 700;
}

@keyframes tyre-sizes-pulse {
    0%   { background-color: #FFD9D6; }
    100% { background-color: #FFF3F2; }
}

@media (prefers-reduced-motion: reduce) {
    .tyre-sizes__block--folding .tyre-sizes__row.is-match {
        animation: none;
    }
}

/* ----------------------------------------------------------- phones -- */

@media all and (max-width: 599px) {
    .tyre-sizes__block--folding .tyre-sizes__row-top {
        padding: 11px 14px;
        font-size: 14px;
    }

    /* the price is absolutely positioned at right: 0 on phones; inside the
       card that is the card's edge, so bring it in line with the padding */
    .tyre-sizes__block--folding .tyre-sizes__price {
        right: 14px;
    }
}