/* Pasabuy — mobile/tablet: the offcanvas nav menu (< xl) and small-screen layout tweaks. */

/* mobile/tablet nav menu (offcanvas from the right) */
.nav-sheet { --bs-offcanvas-width: min(80vw, 360px); --bs-offcanvas-bg: #fff; border-radius: 20px 0 0 20px; }
.nav-sheet .offcanvas-header { padding: 1.1rem 1.25rem .5rem; }
.nav-sheet .offcanvas-body { padding: .25rem 1rem 1.5rem; }
.nav-sheet hr { margin: .75rem .25rem; border-color: var(--pb-border); opacity: 1; }
.sheet-user { display: flex; align-items: center; gap: .75rem; padding: .75rem; margin-bottom: .5rem; border-radius: 14px; background: var(--pb-bg); color: var(--pb-navy); }
.sheet-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97ad; padding: .6rem .75rem .35rem; }
.sheet-link { display: flex; align-items: center; gap: .9rem; min-height: 48px; padding: .55rem .75rem; border-radius: 12px; color: var(--pb-text); font-weight: 500; font-size: 1rem; }
.sheet-link > .bi { font-size: 1.15rem; width: 1.4rem; text-align: center; color: #4b5873; }
.sheet-link:hover { background: var(--pb-bg); color: var(--pb-text); }
.sheet-link.active { background: var(--pb-primary-soft); color: var(--pb-primary); font-weight: 600; }
.sheet-link.active > .bi { color: var(--pb-primary); }

/* mobile: the price/action column drops under the details — give it the full card width and make "Withdraw offer" a clear, full-width button */
@media (max-width: 575.98px) {
  .offer-item .offer-side { width: 100%; text-align: left !important; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
  .offer-item .offer-side > .mb-2 { margin-bottom: .75rem !important; }
  .offer-item .offer-side > .btn, .offer-item .offer-side > .d-grid { flex: 0 0 100%; }
  .offer-item .btn-withdraw { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); padding: .6rem 1rem; font-size: 1rem; font-weight: 600; }
}

@media (max-width: 575px) {
  .hero { padding: 3rem 0 4.5rem; }
  .hero-card { transform: none; margin: 1.5rem 0 0; max-width: none; }
  .page-head h1 { font-size: 1.45rem; }
  .route.big { font-size: 1.3rem; }
}

@media (max-width: 575px) { .demo-bar select { max-width: 200px; } }