/* Zuto Business Directory mobile-first styles */
:root { --zuto-teal: #0f766e; --zuto-bg: #f0fdfa; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; }
.skip-link:focus { left: 0; background: #fff; padding: .75rem 1rem; }
.sticky-search, .sticky-filters { position: sticky; z-index: 40; background: var(--zuto-bg); }
.sticky-search { top: 0; padding: .5rem 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sticky-filters { top: 3.5rem; padding-bottom: .5rem; }
.btn, .fab, .tab, input, select, textarea, button { min-height: 44px; min-width: 44px; }
.fab-bar { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; }
.fab { border-radius: 50%; width: 48px; height: 48px; border: 0; background: var(--zuto-teal); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.fab[hidden] { display: none !important; }
.gallery-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem; }
.gallery-swipe img { scroll-snap-align: start; max-height: 220px; border-radius: 8px; }
:focus-visible { outline: 3px solid #14b8a6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (prefers-contrast: more) { .card { border-width: 2px; } .btn, .fab { border: 2px solid #000; } }
@media (max-width: 768px) { .wrap { padding: .75rem; } .hero h1 { font-size: 1.35rem; } }

/* Owner listing + admin review — shared desktop/mobile chrome */
.zb-listing-stack, .zb-review-list { display: grid; gap: 1rem; }
.zb-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 1.1rem 1.2rem;
}
.zb-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.zb-meta { color: #94a3b8; font-size: .85rem; margin-bottom: .75rem; }
.zb-badge {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: color-mix(in srgb, #0F766E 22%, transparent); color: #99f6e4; margin-right: .35rem;
}
.zb-actions, .zb-case-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.zb-actions .btn, .zb-actions button, .zb-case-actions button {
  min-height: 44px; border-radius: 10px; padding: .55rem 1rem; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: #e2e8f0; cursor: pointer; font-weight: 600;
}
.zb-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.zb-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .85rem; }
.zb-stat strong { display: block; font-size: 1.25rem; }
.zb-stat span { font-size: .75rem; color: #94a3b8; }
.zb-filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.25rem; }
.zb-filter-row label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: #94a3b8; }
.zb-filter-row input, .zb-filter-row select { min-height: 44px; min-width: 140px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0f172a; color: #e2e8f0; padding: 0 .7rem; }
.zb-diff { width: 100%; border-collapse: collapse; }
.zb-diff th, .zb-diff td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .85rem; vertical-align: top; }
.zb-diff .is-conflict { color: #fca5a5; }
.zb-case-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
@media (max-width: 720px) {
  .zb-diff, .zb-diff thead, .zb-diff tbody, .zb-diff tr, .zb-diff th, .zb-diff td { display: block; width: 100%; }
  .zb-diff thead { display: none; }
  .zb-diff tr { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .75rem; margin-bottom: .75rem; }
  .zb-diff td { border: 0; padding: .25rem 0; }
  .zb-diff td::before { content: attr(data-label); display: block; font-size: .7rem; color: #64748b; text-transform: uppercase; }
}
