/* ── States ── */
.st-hint { color: var(--hint); text-align: center; padding: 40px 16px; font-size: 15px; }
.st-err  { color: var(--red);  text-align: center; padding: 40px 16px; font-size: 15px; }

.state-load { text-align: center; padding: 48px 16px 40px; color: var(--hint); }
.state-load::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--brd);
    border-top-color: var(--btn);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Drawer ── */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 80vw);
    background: var(--bg);
    z-index: 301;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.drawer.open { transform: translateX(0); }

.drawer-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: 32px;
}

.drawer-logo {
    font-size: 20px;
    font-weight: 800;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--brd);
    color: var(--btn);
}

.drawer-nav { padding: 6px 0; }

.drawer-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    width: 100%;
    cursor: pointer;
    transition: background .12s;
    box-sizing: border-box;
}
.drawer-item:active { background: var(--sec); }

.drw-ico { font-size: 20px; flex-shrink: 0; line-height: 1; }
.drw-lbl { flex: 1; color: var(--text); font-size: 15px; font-weight: 500; }
.drw-ext { color: var(--hint); font-size: 14px; }

.drawer-sep { height: 1px; background: var(--brd); margin: 4px 0; }

/* ── Bottom sheets ── */
.sheet-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }

.bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-radius: var(--r-card) var(--r-card) 0 0;
    z-index: 401;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    max-height: 80vh;
    overflow-y: auto;
}
.bottom-sheet.open { transform: translateY(0); }

.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--brd);
    border-radius: 2px;
    margin: 12px auto 4px;
}

.sheet-hdr {
    display: flex;
    align-items: center;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--brd);
}
.sheet-ttl { flex: 1; font-size: 16px; font-weight: 700; }
.sheet-close {
    all: unset;
    cursor: pointer;
    color: var(--hint);
    font-size: 18px;
    padding: 4px 8px;
}

.sheet-body { padding: 8px 16px 20px; }

/* ── Sort options ── */
.sort-opt {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 12px;
    font-size: 15px;
    cursor: pointer;
    border-radius: var(--r2);
    color: var(--text);
    transition: background .12s;
}
.sort-opt + .sort-opt { border-top: 1px solid var(--brd); }
.sort-opt:active { background: var(--sec); }
.sort-opt.on {
    color: var(--btn);
    font-weight: 600;
}

/* ── Filter sheet ── */
.filter-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
    margin-top: 8px;
}

.price-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.price-inp {
    flex: 1;
    border: 1.5px solid var(--brd);
    border-radius: var(--r2);
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    -webkit-appearance: none;
    min-width: 0;
}
.price-inp:focus { border-color: var(--btn); }
.price-sep { color: var(--hint); font-size: 18px; flex-shrink: 0; }

.filter-apply-btn { margin-bottom: 10px; }