/* Bottom tab bar and the category sheet it opens.
 * ---------------------------------------------------------------------------
 * Phones only (below 768px), where the burger drawer is the only way through
 * the site and every destination costs two taps.
 *
 * Everything here is written with logical properties - inset-inline, padding-
 * inline, border-inline - so there is nothing to mirror for Arabic and nothing
 * for rtl.css to get wrong. That is deliberate: the header's physical rules are
 * exactly what broke the RTL mobile layout, and this file should never join
 * them. See RtlBreakpointScopeTest.
 * ------------------------------------------------------------------------- */

.bottom-nav,
.bottom-sheet,
.bottom-sheet__backdrop {
    display: none;
}

@media (max-width: 767.98px) {

    /* The cart moved to the tab bar; two of them on one screen is one too many,
       and the header bar is the tighter of the two for space. */
    .header__action--cart { display: none; }

    /* The bar ------------------------------------------------------------- */

    .bottom-nav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
        align-items: stretch;
        background: #16151a;
        border-top: 1px solid #222227;
        /* Clears the iPhone home indicator without leaving a gap on Android. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 2px 8px;
        color: #bdbdbd;
        background: none;
        border: 0;
        text-decoration: none;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav__item:hover,
    .bottom-nav__item:focus-visible {
        color: #fff;
        text-decoration: none;
    }

    .bottom-nav__item--active {
        color: #fff;
    }

    /* A short bar along the top edge of the active tab, the way the header
       marks its active link. */
    .bottom-nav__item--active::before {
        content: '';
        position: absolute;
        top: -1px;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: #6164ff;
    }

    .bottom-nav__icon {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none;
    }

    .bottom-nav__label {
        font-size: 10px;
        line-height: 12px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Unread count, pinned to the icon rather than the tab, so it sits with the
       bell whatever the label's width. */
    .bottom-nav__badge {
        position: absolute;
        top: 4px;
        inset-inline-start: calc(50% + 5px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #ff5a5a;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    .bottom-nav__avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        flex: none;
    }

    /* Room for the bar, so it never covers the end of a page. */
    body.has-bottom-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* The auction button floats at the bottom too; lift it clear. */
    body.has-bottom-nav .auction-float {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* The sheet ----------------------------------------------------------- */

    /* A class selector beats the UA's [hidden] rule, so the sheet would stay in
       the tab order while closed. Put `hidden` back in charge. */
    .bottom-sheet[hidden],
    .bottom-sheet__backdrop[hidden] { display: none; }

    .bottom-sheet__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .bottom-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1060;
        max-height: 78vh;
        background: #16151a;
        border-radius: 20px 20px 0 0;
        border-top: 1px solid #222227;
        transform: translateY(101%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-sheet--open { transform: translateY(0); }
    .bottom-sheet__backdrop--open { opacity: 1; pointer-events: auto; }

    .bottom-sheet__grip {
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: #3a3a42;
        margin: 8px auto 0;
        flex: none;
    }

    .bottom-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px 10px;
        flex: none;
    }

    .bottom-sheet__title {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
    }

    .bottom-sheet__close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        background: #222227;
        color: #bdbdbd;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

    .bottom-sheet__close:hover { color: #fff; }

    .bottom-sheet__body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px 20px;
    }

    .bottom-sheet__group-title {
        font-size: 11px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #7c7c88;
        margin: 14px 0 4px;
    }

    .bottom-sheet__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 0;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid #222227;
    }

    .bottom-sheet__link:last-child { border-bottom: 0; }
    .bottom-sheet__link:hover { color: #6164ff; text-decoration: none; }

    /* An <img>, not a character: emoji are drawn by the reader's own font, so
       the sheet looked like a different product on every platform and like a
       row of boxes where no colour emoji font is installed. */
    .bottom-sheet__link-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #1d1c22;
        padding: 7px;
        object-fit: contain;
        display: block;
        flex: none;
    }

    .bottom-sheet__link-text { flex: 1 1 auto; min-width: 0; }

    .bottom-sheet__link-name {
        display: block;
        font-size: 14px;
        line-height: 18px;
    }

    .bottom-sheet__link-note {
        display: block;
        font-size: 11px;
        line-height: 15px;
        color: #7c7c88;
    }

    /* Points along the reading direction, so it flips with the document. */
    .bottom-sheet__chevron {
        width: 16px;
        height: 16px;
        flex: none;
        color: #55555f;
        transform: rotate(0deg);
    }

    [dir="rtl"] .bottom-sheet__chevron { transform: rotate(180deg); }

    body.sheet-open { overflow: hidden; }
}