/*
 * TTF Nav: "My garage" (owner, 2026-10-06): the header buttons, the panel and My Account › My garage
 * (ttf-nav/garage.php prints them, assets/garage.js fills them in). Look 1 of the picker: white, thin lines, the shop's
 * red for actions. Desktop: "My garage / Add your car" beside "My Account", a round car icon with the saved cars'
 * count; the panel drops down under it. Below 1200 px (the theme's phone header): a car icon before the cart, and the
 * panel rises as a sheet from the bottom over a shade. Class prefix ttf-garage.
 */

/* ---- The header buttons: the theme's quick buttons, as <button>s (the theme fills every button). ---- */
.ttf-garage-button .ttf-garage-open {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    box-shadow: none;
    color: var(--color-text-primary, #212529);
    font-family: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
.ttf-garage-button .ttf-garage-open:hover,
.ttf-garage-button .ttf-garage-open:focus { background: none; color: var(--color-text-primary, #212529); }
.ttf-garage-button .ttf-garage-open:focus-visible { outline: 2px solid #D81D33; outline-offset: 3px; }
.ttf-garage-button--desktop { margin-right: 1.5rem; }
.ttf-garage-icon {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F3F5;
    color: #212529;
}
.ttf-garage-icon .ttf-garage-car { width: 20px; height: 20px; }
.ttf-garage-open--car .ttf-garage-icon { background: #FFF0F2; color: #D81D33; }
.ttf-garage-open[aria-expanded="true"] .ttf-garage-icon { box-shadow: 0 0 0 2px #D81D33; }
.ttf-garage-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #D81D33;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ttf-garage-badge[hidden] { display: none; }
.ttf-garage-text { display: inline-flex; flex-direction: column; white-space: nowrap; }
.ttf-garage-name { font-size: .9375rem; font-weight: 700; }
.ttf-garage-sub { font-size: .75rem; font-weight: 400; color: #6C757D; }
.ttf-garage-button--phone { margin-right: .75rem; }
.ttf-garage-button--phone .ttf-garage-icon { width: 34px; height: 34px; }

/* ---- The panel ---- */
.ttf-garage[hidden] { display: none !important; }
.ttf-garage {
    position: absolute;
    z-index: 10000;
    width: 360px;
    max-width: calc(100vw - 16px);
    color: var(--color-text-primary, #212529);
    font-family: 'Krub', sans-serif;
    font-size: .875rem;
    line-height: 1.4;
    outline: none;
}
.ttf-garage__panel {
    box-sizing: border-box;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid #DEE2E6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
.ttf-garage__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.ttf-garage .ttf-garage__title {
    --ttf-h2: 1rem; /* ttf-page-zoom.php sizes every h2 through this property, with !important */
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
}
.ttf-garage .ttf-garage__close,
.ttf-garage-page .ttf-garage__remove,
.ttf-garage .ttf-garage__remove {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: #ADB5BD;
    cursor: pointer;
}
.ttf-garage .ttf-garage__close::before,
.ttf-garage .ttf-garage__remove::before,
.ttf-garage-page .ttf-garage__remove:not(.ttf-garage__remove--text)::before { content: '\2715'; font-size: .9rem; line-height: 1; }
.ttf-garage .ttf-garage__close:hover,
.ttf-garage .ttf-garage__remove:hover { background: #F1F3F5; color: #495057; }
.ttf-garage__label {
    margin: .25rem 0 .4rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #868E96;
}
.ttf-garage__active { margin-bottom: .75rem; }
.ttf-garage__card { padding: .65rem .75rem; border: 1.5px solid #212529; border-radius: 10px; }
.ttf-garage__name { font-size: .9375rem; font-weight: 800; }
.ttf-garage__meta { color: #868E96; }
.ttf-garage__none { margin: 0 0 .75rem; color: #6C757D; }
.ttf-garage__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.ttf-garage__btn,
.ttf-garage .ttf-garage__btn {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: #D81D33;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ttf-garage__shop::after { content: '\00a0\2192'; }
.ttf-garage .ttf-garage__btn:hover { background: #B8162B; color: #fff; }
.ttf-garage .ttf-garage__ghost,
.ttf-garage-page .ttf-garage__ghost {
    display: inline-flex;
    align-items: center;
    height: auto;
    margin: 0;
    padding: .3rem .8rem;
    border: 1.5px solid #CED4DA;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: #212529;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ttf-garage .ttf-garage__ghost:hover,
.ttf-garage-page .ttf-garage__ghost:hover { border-color: #212529; background: #fff; color: #212529; }
.ttf-garage__list { margin: 0 0 .25rem; padding: 0; list-style: none; }
.ttf-garage__car { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 8px; }
.ttf-garage__car:hover { background: #F8F9FA; }
.ttf-garage__car-name { flex: 1 1 auto; min-width: 0; }
.ttf-garage__car-name strong { display: block; font-weight: 700; }
.ttf-garage__car-name small { display: block; color: #868E96; font-size: .8125rem; }
.ttf-garage__in-use {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #FFF0F2;
    color: #B8162B;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.ttf-garage__msg { margin: .25rem 0 .5rem; color: #6C757D; }
.ttf-garage__msg--error { color: #B8162B; }
.ttf-garage__guest { margin-bottom: .5rem; padding: .7rem .8rem; border-radius: 10px; background: #F8F9FA; }
.ttf-garage__guest p { margin: 0; color: #495057; }
.ttf-garage .ttf-garage__add,
.ttf-garage-page .ttf-garage__add {
    display: block;
    width: 100%;
    height: auto;
    margin: .35rem 0 0;
    padding: .55rem .5rem;
    border: 0;
    border-top: 1px solid #E9ECEF;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #D81D33;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.ttf-garage .ttf-garage__add::before,
.ttf-garage-page .ttf-garage__add::before { content: '+\00a0'; }
.ttf-garage .ttf-garage__add:hover,
.ttf-garage-page .ttf-garage__add:hover { background: none; color: #B8162B; text-decoration: underline; text-underline-offset: 3px; }
.ttf-garage button:focus-visible,
.ttf-garage a:focus-visible,
.ttf-garage-page button:focus-visible { outline: 2px solid #D81D33; outline-offset: 2px; }
.ttf-garage .ttf-garage__manage { display: block; padding: .35rem .5rem 0; color: #495057; font-weight: 600; text-decoration: none; }
.ttf-garage .ttf-garage__manage::after { content: '\00a0\2192'; }
.ttf-garage .ttf-garage__manage:hover { color: #D81D33; }

/* The picker's steps inside the panel or the page (ttfPicker.openForm): stacked, full width. */
.ttf-garage__form[hidden] { display: none; }
.ttf-garage__form { padding: .25rem .5rem .5rem; }
.ttf-garage__form .ttf-picker__form { flex-direction: column; align-items: stretch; gap: .5rem; }
.ttf-garage__form .ttf-picker__field,
.ttf-garage__form .ttf-picker__field--gen,
.ttf-garage__form .ttf-picker__field--member { width: 100%; }
.ttf-garage__form .ttf-picker__field select { height: 2.5rem; }

/* My Account › My garage. */
.ttf-garage-page { max-width: 40rem; font-size: .9375rem; }
.ttf-garage-page .ttf-garage__list--page { border: 1px solid #E9ECEF; border-radius: 10px; }
.ttf-garage-page .ttf-garage__car { padding: .7rem .9rem; border-radius: 0; }
.ttf-garage-page .ttf-garage__car + .ttf-garage__car { border-top: 1px solid #E9ECEF; }
.ttf-garage-page .ttf-garage__remove--text {
    width: auto;
    height: auto;
    padding: .3rem .4rem;
    border-radius: 4px;
    color: #6C757D;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ttf-garage-page .ttf-garage__remove--text:hover { background: none; color: #B8162B; }
.ttf-garage-page .ttf-garage__add { width: auto; border-top: 0; padding-left: 0; }
.ttf-garage-page .ttf-garage__form { max-width: 26rem; padding-left: 0; }

/* Below 1200 px: a sheet from the bottom over a shade; the page behind it stays put. */
@media (max-width: 1199.98px) {
    .ttf-garage {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100000;
        display: flex;
        align-items: flex-end;
        width: auto;
        max-width: none;
        background: rgba(33, 37, 41, .45);
    }
    .ttf-garage__panel {
        width: 100%;
        max-height: 85vh;
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
    }
    .ttf-garage__panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 4px;
        background: #CED4DA;
    }
    html.ttf-garage-lock,
    html.ttf-garage-lock body { overflow: hidden; }
}