/*
 * Naabrent component layer (design-system.md).
 * Small, hand-written CSS for the bespoke components a classless Pico
 * baseline does not provide: top bar, nav, listing cards, badges/pills,
 * verification badge, notification bell, chat, availability states.
 * ADR-0004: no build step, plain CSS + custom properties only.
 */

/* Respect reduced-motion preferences everywhere (accessibility.md). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile-first global guards (mobile-first-ui.md §1): no body-level horizontal
   scroll at any width, and no element is ever wider than its container. */
html, body { overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

/* Form controls: never smaller than 16px so iOS Safari doesn't auto-zoom on
   focus (mobile-first-ui.md §5). */
input, select, textarea { font-size: max(16px, var(--fs-base)); }

body {
  background: var(--surface-page);
}

/* Skip link (accessibility.md) -------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  color: var(--text-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-control) 0;
}

.skip-link:focus {
  left: 0;
}

/* Focus ring everywhere, never removed without replacement ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Top navigation ------------------------------------------------------------ */
/* Branded deep-green band so the app has presence at the top (visual-refresh §5). */
.site-header {
  background: var(--color-primary-strong);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.nav-bar__brand {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: #fff;
  text-decoration: none;
  margin-right: var(--space-2);
}

.nav-bar__links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.nav-bar__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
}

.nav-bar__links a:hover,
.nav-bar__links a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
}

.nav-bar__spacer {
  flex: 1 1 auto;
}

.nav-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.neighbourhood-switcher select {
  margin: 0;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  border: 1px solid transparent;
}

/* Single-neighbourhood label (no switcher needed) on the green band. */
.neighbourhood-current {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 500;
}

/* Chrome sitting on the deep-green band: keep controls light & legible. */
.site-header .nav-toggle,
.site-header .dropdown > summary[role="button"] {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.site-header .nav-toggle:hover,
.site-header .dropdown > summary[role="button"]:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

.nav-bar__end > a:not([role="button"]) {   /* "Log in" text link */
  color: #fff;
}

.nav-bar__end > a[role="button"] {          /* "Sign up" — inverted CTA on the band */
  background: #fff;
  color: var(--color-primary-strong);
  border-color: #fff;
}

/* Mobile-first navigation (mobile-first-ui.md §3) ---------------------------- */
/* Base (mobile ≤767px): stacked, collapsible nav. Top row = brand | bell |
   hamburger; everything else lives in the collapsible menu as full-width,
   ≥44px rows. */
.nav-bar { row-gap: var(--space-2); }

.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Mobile top-row order: brand | (bell) | flag | toggle. The brand takes the
   free space so the bell/flag/toggle cluster sits at the right. */
.nav-bar__spacer { display: none; }              /* no spacer while stacked */
.nav-bar__brand { margin-right: auto; }
.notification-bell { order: 0; }
.language-flag { order: 0; }
.nav-toggle { order: 0; }

.nav-bar__links,
.nav-bar__end {
  flex-basis: 100%;
  display: none;                                  /* hidden until toggled open */
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.site-header.is-open .nav-bar__links,
.site-header.is-open .nav-bar__end { display: flex; }

/* Full-width, ≥44px tap rows in the open menu */
.nav-bar__links a,
.nav-bar__end > a,
.nav-bar__end .dropdown > summary,
.neighbourhood-current,
.neighbourhood-switcher select {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
}

.nav-bar__links a:hover,
.nav-bar__end > a:hover { background: rgba(255,255,255,0.12); }

/* Profile dropdown panel items: ensure ≥44px tap rows too. */
.dropdown li a { min-height: 44px; display: flex; align-items: center; }

/* --- md (≥768px): horizontal bar, matches Pico's desktop switch --- */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-bar__spacer { display: block; flex: 1 1 auto; }
  .nav-bar__links,
  .nav-bar__end { display: flex; flex-direction: row; flex-basis: auto;
                  align-items: center; padding-top: 0; gap: var(--space-4); }
  .nav-bar__links a,
  .nav-bar__end > a,
  .nav-bar__end .dropdown > summary,
  .neighbourhood-current,
  .neighbourhood-switcher select { width: auto; min-height: 40px; }
  .nav-bar__brand { margin-right: 0; }        /* desktop uses the spacer instead */
  .notification-bell { margin-left: 0; }
  .language-flag { order: 1; }                /* sits at the far right of the bar */
}

/* Language flag picker -------------------------------------------------------
   Current language's flag as a compact icon button (like the bell); clicking
   opens a <details> dropdown listing every language (flag + native name). */
.language-flag { position: relative; margin: 0; }

/* Scoped under .site-header so these beat Pico's default form-control styling
   for `details.dropdown > summary` (which otherwise paints a light/white
   background box behind the flag). */
.site-header .language-flag > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}
.language-flag > summary::-webkit-details-marker { display: none; }
.language-flag > summary::after { display: none !important; }  /* kill Pico's caret */
.site-header .language-flag > summary:hover { background: rgba(255, 255, 255, 0.12); }
.site-header .language-flag > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The flag graphic itself. flex:0 0 auto stops it collapsing in the flex row
   of a dropdown option. A faint neutral hairline defines it on any backdrop. */
.flag {
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 17px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.language-flag > summary .flag { width: 24px; height: 16px; }

/* Dropdown options: flag + native name, ≥44px tap rows on a light panel. */
.language-flag ul { min-width: 11rem; }
.language-flag ul li { padding: 0; }
.language-flag ul button.language-flag__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.language-flag ul button.language-flag__option:hover {
  background: var(--surface-sunken);
}
.language-flag ul button.language-flag__option.is-active {
  font-weight: 600;
}
.language-flag ul button.language-flag__option.is-active::after {
  content: "\2713";           /* ✓ */
  margin-left: auto;
  color: var(--color-primary);
}

/* Notification bell ---------------------------------------------------------- */
.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}

.notification-bell:hover {
  background: rgba(255, 255, 255, 0.12);
}

.notification-bell__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

.notification-panel {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-width: 360px;
}

.notification-panel li {
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
}

.notification-panel li:last-child {
  border-bottom: none;
}

.notification-panel a {
  text-decoration: none;
  color: var(--text-primary);
}

.notification-panel .is-unread {
  font-weight: 600;
}

/* Icon sprite --------------------------------------------------------------- */
.icon {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  fill: none;
  vertical-align: -0.15em;
}

/* Cards ----------------------------------------------------------------------*/
/* Mobile-first (mobile-first-ui.md §4.2): exactly one column on phones (no
   horizontal overflow), 2+ from 576px, roomier from 768/1024px. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0;
  margin: var(--space-4) 0;
  list-style: none;
}

@media (min-width: 576px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

.listing-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.listing-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.listing-card__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.listing-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-ink);
  object-fit: cover;
  width: 100%;
}

/* Photo-less cards read as an intentional, colourful category mosaic rather
   than a wall of broken-image icons (visual-refresh §5). */
.listing-card__photo--empty {
  flex-direction: column;
  gap: var(--space-1);
  background: var(--cat-bg, var(--color-primary-50));
  color: var(--cat-ink, var(--color-primary-ink));
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-3);
  text-align: center;
}

.listing-card__photo--empty .icon {
  width: 1.8em;
  height: 1.8em;
}

/* Listing detail photo gallery: a simple stacked set of full-width images
   (ADR-0008). Kept intentionally simple — no carousel JS. */
.listing-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.listing-gallery__image {
  /* Show the whole image on the detail page — no fixed ratio, no crop.
     Capped so a tall image doesn't dominate; letterboxed on the muted panel. */
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  background: var(--surface-muted);
  border-radius: var(--radius-card);
}

/* Thumbnails with a Remove control on the listing-edit page (ADR-0008). */
.photo-manager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.photo-manager__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 120px;
}

.photo-manager__image {
  width: 120px;
  height: 80px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md, 6px);
}

.listing-card__body {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.listing-card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.listing-card__meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.listing-card__provider {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Pills & badges -------------------------------------------------------------*/
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.pill--free {
  background: var(--color-primary-50);
  color: var(--color-primary-active);
  font-weight: 500;
}

.pill--price {
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 500;
}

.pill--distance {
  color: var(--text-muted);
}

/* Category colour map, shared by the chip and the photo placeholder. Each
   category sets a tint (--cat-bg) + AA-safe ink (--cat-ink); components read
   them so the mapping lives in one place (visual-refresh §2.8). */
[data-category="power-tools"],
[data-category="hand-tools"],
[data-category="building-renovation"] {
  --cat-bg: var(--color-primary-50);
  --cat-ink: var(--color-primary-ink);
}
[data-category="garden-outdoor"] { --cat-bg: #eaf3e0; --cat-ink: #3a5a17; }
[data-category="household"],
[data-category="cleaning"] {
  --cat-bg: var(--color-secondary-50);
  --cat-ink: var(--color-secondary-ink);
}
[data-category="vehicles-transport"] { --cat-bg: #eceaf4; --cat-ink: #3e357a; }
[data-category="services"] {
  --cat-bg: var(--color-amber-50);
  --cat-ink: var(--color-amber-ink);
}
[data-category="other"] {
  --cat-bg: var(--surface-sunken);
  --cat-ink: var(--text-secondary);
}

.pill--category {
  background: var(--cat-bg, var(--surface-sunken));
  color: var(--cat-ink, var(--text-secondary));
  border: 1px solid transparent;
  font-weight: 500;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-amber-ink);   /* AA for the small numeric rating */
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.rating .icon {
  color: var(--color-amber);       /* star glyph: 3:1 is fine for an icon */
}

.rating__stars {
  letter-spacing: 1px;
}

.rating__value {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Status pills (booking / membership states) --------------------------------*/
.status-pill {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid transparent;
}

/* Five distinct treatments across the lifecycle; the visible text label is the
   non-colour cue (visual-refresh §2.9). */
.status-pill--requested,
.status-pill--pending {
  background: var(--warning-50);
  color: var(--warning-ink);
}

.status-pill--approved,
.status-pill--active {
  background: var(--success-50);
  color: var(--success-ink);
}

.status-pill--denied,
.status-pill--cancelled,
.status-pill--declined {
  background: var(--danger-50);
  color: var(--danger-ink);
}

.status-pill--awaiting_confirmation {
  background: var(--info-50);
  color: var(--info-ink);
}

.status-pill--completed {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* Empty states ---------------------------------------------------------------*/
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

/* Inline messages / toasts ---------------------------------------------------*/
.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
}

.message--success {
  background: var(--success-50);
  color: var(--success-ink);
  border-color: var(--color-primary-100);
}

.message--error,
.message--danger {
  background: var(--danger-50);
  color: var(--danger-ink);
  border-color: var(--danger);
}

.message--warning {
  background: var(--warning-50);
  color: var(--warning-ink);
}

.message--info {
  background: var(--info-50);
  color: var(--info-ink);
}

/* Field errors ---------------------------------------------------------------*/
.field-error {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: -8px;
  margin-bottom: var(--space-2);
}

.field-hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Availability calendar / blocks ---------------------------------------------*/
.availability-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.availability-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
  align-items: center;
  flex-wrap: wrap;
}

/* Chat -------------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 120px;
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-3);
  /* Muted panel, not white — so the conversation log doesn't read as an input. */
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-3);
}

/* Centre the "no messages yet" placeholder in the empty panel. */
.chat > p {
  margin: auto;
  text-align: center;
}

.chat-message {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  border-bottom-left-radius: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* My messages: solid brand fill so the two sides read at a glance
   (colour + alignment, two cues). */
.chat-message--mine {
  align-self: flex-end;
  background: var(--color-primary);
  border-color: transparent;
  color: var(--text-on-primary);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--space-1);
}

.chat-message--mine .chat-message__meta {
  color: rgba(255, 255, 255, 0.8);
}

.chat-message__meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}

.chat-form {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  min-height: 48px;
  resize: vertical;
}

/* Pico makes <button> width:100% by default, which in this flex row collapsed
   the textarea to nothing. Keep the Send button to its own width. */
.chat-form button {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  align-self: stretch;
}

/* Tables -> cards on mobile (mobile-first-ui.md §4.5, §4.6) ------------------ */
/* Base (mobile): each row is a card; each cell is a label:value line. */
.table-reflow table,
.table-reflow thead,
.table-reflow tbody,
.table-reflow tr,
.table-reflow td { display: block; width: 100%; }

.table-reflow thead { display: none; }           /* headers move into data-label */

.table-reflow tbody tr {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.table-reflow td {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border: none;
}

.table-reflow td::before {
  content: attr(data-label);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* The actions cell: buttons full-width, stacked, ≥44px. Some action cells
   (e.g. my_listings.html) mix plain links with form buttons — treat both the
   same way so every action row-item reaches the touch-target minimum. */
.table-reflow td.cluster { flex-direction: column; align-items: stretch; }
.table-reflow td.cluster::before { margin-bottom: var(--space-1); }
.table-reflow td.cluster button,
.table-reflow td.cluster > a {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* md: restore real table layout */
@media (min-width: 768px) {
  .table-reflow table { display: table; }
  .table-reflow thead { display: table-header-group; }
  .table-reflow tbody { display: table-row-group; }
  .table-reflow tr { display: table-row; background: none; border: none;
                     box-shadow: none; padding: 0; margin: 0; }
  .table-reflow td { display: table-cell; }
  .table-reflow td::before { content: none; }
}

/* Tabs ---------------------------------------------------------------------*/
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  flex-wrap: nowrap;
  overflow-x: auto;
}

.tabs a {
  padding: var(--space-3);
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  white-space: nowrap;
}

.tabs a[aria-current="page"] {
  color: var(--color-primary-active);
  border-bottom-color: var(--color-primary);
}

@media (min-width: 768px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Utility --------------------------------------------------------------------*/
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cluster {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* CTA button clusters (e.g. home hero/dashboard actions): full-width stacked
   buttons on mobile, inline row from sm (mobile-first-ui.md §4.1). Scoped to
   [role=button] children so it never touches pill/status clusters. */
.cluster > [role="button"] { width: 100%; }

@media (min-width: 576px) {
  .cluster > [role="button"] { width: auto; }
}

.text-muted {
  color: var(--text-muted);
}

.text-secondary {
  color: var(--text-secondary);
}

.mt-0 {
  margin-top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sticky-action {
  position: sticky;
  bottom: 0;
  background: var(--surface-page);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

/* Reserve bottom space so the sticky "Request to book" action and the chat
   FAB never overlap on phones (mobile-first-ui.md §4.3). The only two allowed
   max-width exceptions in this file, both FAB-related. */
@media (max-width: 767px) {
  main.container { padding-bottom: calc(56px + 2 * var(--space-4)); }
  .sticky-action { padding-right: calc(56px + var(--space-3)); }
}

/* Booking detail actions: full-width, stacked, unambiguous on mobile
   (mobile-first-ui.md §4.4). */
@media (max-width: 767px) {
  .cluster > form { flex: 1 1 100%; }
  .cluster > form button { width: 100%; }
}

/* Floating chat popup (bottom-right, all pages) ----------------------------- */
.chat-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 900;
}

.chat-fab__btn {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chat-fab__btn .icon {
  width: 1.6em;
  height: 1.6em;
}

.chat-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}

.chat-fab__badge.is-hidden {
  display: none;
}

/* Base (mobile): near-full-screen bottom sheet — leaves a small top gap and
   clears the FAB, never covers the composer (mobile-first-ui.md §4.7). */
.chat-pop {
  position: fixed;
  right: var(--space-3);
  left: var(--space-3);
  bottom: calc(var(--space-3) + 64px);
  width: auto;
  min-height: 180px;
  max-height: calc(100dvh - 96px);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 900;
}

.chat-pop[hidden] {
  display: none;
}

#chat-pop-body {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 96px);
  min-height: 0;
}

/* From 576px: floating card, not a full-width sheet. */
@media (min-width: 576px) {
  .chat-pop {
    left: auto;
    right: var(--space-4);
    bottom: calc(var(--space-4) + 68px);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
    max-height: min(70vh, 540px);
  }
  #chat-pop-body { max-height: min(70vh, 540px); }
}

.chat-pop__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.chat-pop__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pop__close,
.chat-pop__back {
  width: auto;
  margin: 0;
  padding: 0 var(--space-2);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.chat-pop__empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.chat-convos {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.chat-convo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}

.chat-convo:hover {
  background: var(--surface-muted);
}

.chat-convo__sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.chat-convo__unread {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}

/* Reuse the .chat log styling, but fill the popup (no outer border/margin). */
.chat--pop {
  flex: 1;
  min-height: 140px;
  border: none;
  border-radius: 0;
  margin: 0;
}

.chat-form--pop {
  padding: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Date + 24h time-slot picker (booking form): date grows, time select sits beside it.
   Allowed to wrap on narrow phones so the two controls never overflow
   (mobile-first-ui.md §4.3). */
.datetime-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.datetime-field input[type="date"] {
  flex: 1 1 60%;
  min-width: 0;
  margin: 0;
}

.datetime-field select {
  flex: 1 1 30%;
  width: auto;
  margin: 0;
}

/* Account pages (allauth) — centred card on the branded chrome --------------- */
.auth-page main#main-content {
  max-width: 26rem;
  margin: var(--space-7) auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.auth-page main#main-content h1 {
  margin-top: 0;
}

.auth-page form {
  margin: 0;
}

.auth-page form button[type="submit"] {
  width: 100%;
}

/* Address autocomplete (ADR-0009 addendum: In-AKS replaces the map-pin) ------*/
.address-search {
  margin-bottom: var(--space-4);
}

.address-search__combobox {
  position: relative;
}

.address-search__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
  max-height: 16rem;
  overflow-y: auto;
}

.address-search__option {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.address-search__option:hover,
.address-search__option.is-active {
  background: var(--surface-muted);
}

.address-search__status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}