/* Design system components — hubs, layout, nav, wizard, compare */

/* Hub / landing shared */
.hub-page { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.hub-breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.25rem; }
.hub-breadcrumb a { color: var(--accent); }
.hub-actions { margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hub-card { margin-bottom: 2rem; }
.hub-card h2 { margin-top: 0; }
.hub-muted { color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.banner-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.banner-info { background: var(--accentLight); border: 1px solid var(--border); color: var(--text); padding: 12px; border-radius: 8px; margin-bottom: 16px; }

/* Condition legend */
.condition-legend { margin: 12px 0 20px; font-size: 13px; }
.condition-legend summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.condition-legend__list { margin: 10px 0 0; padding: 0; }
.condition-legend__item { margin-bottom: 8px; }
.condition-legend__item dt { font-weight: 600; display: inline; }
.condition-legend__item dd { display: inline; margin: 0 0 0 6px; color: var(--muted); }

/* Icons */
.icon { vertical-align: -0.2em; margin-right: 6px; color: var(--accent); }
.value-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accentLight); margin-bottom: 8px; }

/* Empty / skeleton */
.empty-state--rich { text-align: center; padding: 48px 24px; }
.empty-state__icon { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }
.skeleton-card { background: linear-gradient(90deg, var(--card) 25%, var(--border) 50%, var(--card) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 8px; min-height: 180px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.load-more-wrap.is-loading .load-more-btn { opacity: 0.6; pointer-events: none; }

/* Listing card trust */
.listing-card__badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.listing-card__badges .verified-badge,
.listing-card__badges .listing-quality-badge { font-size: 10px; padding: 2px 8px; }
.listing-card__actions { padding: 0 14px 10px; position: relative; z-index: 1; }
.listing-sold-label { display: block; padding: 0 14px; color: var(--danger); font-weight: 600; font-size: 12px; }
.btn-compare-add { font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; color: var(--muted); }
.btn-compare-add:hover { color: var(--accent); border-color: var(--accent); }

/* Listing detail layout */
.listing-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.listing-detail-main { min-width: 0; }
.listing-detail-sidebar { position: sticky; top: 16px; }
.listing-sidebar-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.listing-sidebar-card .price-tag { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; display: block; }
.listing-sidebar-card .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.listing-sidebar-card .actions .btn,
.listing-sidebar-card .actions .btn-outline,
.listing-sidebar-card .actions .btn-save { width: 100%; text-align: center; }
.trust-tooltip { font-size: 12px; color: var(--muted); margin-top: 8px; }
.trust-tooltip summary { cursor: pointer; color: var(--accent); }

/* Mobile nav */
.mobile-nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 8px; padding: 8px 12px; cursor: pointer; color: #fff; font-weight: 600; margin-left: auto; }
.mobile-nav-panel { display: none; }
.mobile-nav-panel.is-open { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mobile-nav-panel a { color: rgba(255, 255, 255, 0.85); font-weight: 500; padding: 4px 0; }
.mobile-nav-panel a:hover { color: #fff; }
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); z-index: 100; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
.mobile-bottom-nav a { font-size: 11px; text-align: center; color: var(--muted); padding: 4px 8px; }
.mobile-bottom-nav a.is-active { color: var(--accent); font-weight: 600; }

/* Dashboard tabs & wizard */
.dashboard-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.dashboard-tabs a { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dashboard-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.dashboard-panel[hidden] { display: none !important; }

.wizard-progress { margin-bottom: 20px; }
.wizard-progress__bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.wizard-progress__fill { height: 100%; background: var(--accent); transition: width 0.25s ease; }
.wizard-progress__label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.wizard-steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wizard-step-label { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--muted); }
.wizard-step-label.is-active { background: var(--accentLight); color: var(--accent); border-color: var(--accent); }
.wizard-pane[hidden] { display: none !important; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 20px; gap: 12px; }

/* Compare bar */
.compare-bar { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 20px; border-radius: 999px; font-size: 14px; z-index: 99; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none; }
.compare-bar.is-visible { display: flex; align-items: center; gap: 12px; }
.compare-bar a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Form focus */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Filter checkboxes */
.filter-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; cursor: pointer; }
.filter-check input { accent-color: var(--accent); }

@media (max-width: 900px) {
  .listing-detail-layout { grid-template-columns: 1fr; }
  .listing-detail-sidebar { position: static; order: -1; }
  .site-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .mobile-bottom-nav { display: flex; }
  body { padding-bottom: 56px; }
  .compare-bar { bottom: 64px; }
}

@media (min-width: 901px) {
  .mobile-nav-panel { display: none !important; }
}