/* public/garages/garage-directory.css */
/* ═══════════════════════════════════════════════════════════════════════
   GARAGE DIRECTORY OVERLAY — TRUSTaFIX owner dashboard
   Full-screen overlay. Scoped under .gd-overlay. No global rules.
   Two theme keys: trustafix-garage-theme (this file), trustafix-map-theme
   (Leaflet tiles, owned by fleet-trips.js / garage-map.js).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── [hidden] OVERRIDE ───────────────────────────────────────────────── */
/* The user-agent default rule `[hidden] { display: none }` is overridden
   by any author rule that sets `display:` on the same element. Three
   elements in this feature carry both `hidden` and an explicit display
   rule:
     - #gd-header-back (has .gd-icon-btn → display: inline-flex)
     - #gd-pagination   (has .gd-pagination → display: flex)
     - #gd-modal        (has .gd-modal → display: flex)
   Without the rules below, they stay in the layout and the tab order even
   when hidden. This block restores the intended behaviour. */

   .gd-overlay [hidden],
.gd-overlay[hidden],
.gd-modal[hidden],
.gd-modal [hidden] {
  display: none !important;
}

/* ─── THEME VARIABLES ─────────────────────────────────────────────────── */

.gd-overlay {
  /* Light theme (default) */
  --gd-bg:            #f4f7fc;
  --gd-surface:       #ffffff;
  --gd-surface-2:     #f8fafc;
  --gd-border:        #e2e8f0;
  --gd-border-strong: #cbd5e1;
  --gd-text:          #1e2a3a;
  --gd-text-muted:    #6c7a89;
  --gd-text-dim:      #94a3b8;
  --gd-accent:        #f39c12;
  --gd-accent-dark:   #e67e22;
  --gd-accent-soft:   rgba(243, 156, 18, 0.12);
  --gd-green:         #15803d;
  --gd-green-bg:      #dcfce7;
  --gd-amber:         #d97706;
  --gd-amber-soft:    rgba(217, 119, 6, 0.12);
  --gd-red:           #dc2626;
  --gd-red-soft:      rgba(220, 38, 38, 0.10);
  --gd-blue:          #2563eb;
  --gd-blue-bg:       #dbeafe;
  --gd-blue-soft:     rgba(37, 99, 235, 0.14);
  --gd-radius-card:   16px;
  --gd-radius-pill:   999px;
  --gd-shadow-card:   0 2px 8px rgba(15, 23, 42, 0.05);
  --gd-shadow-hover:  0 12px 28px rgba(15, 23, 42, 0.10);
  --gd-shadow-modal:  0 24px 60px rgba(15, 23, 42, 0.35);
  --gd-shadow-fab:    0 8px 24px rgba(243, 156, 18, 0.40);
}

.gd-overlay[data-theme="dark"] {
  --gd-bg:            #0f172a;
  --gd-surface:       #1e293b;
  --gd-surface-2:     #0b1220;
  --gd-border:        #334155;
  --gd-border-strong: #475569;
  --gd-text:          #e2e8f0;
  --gd-text-muted:    #94a3b8;
  --gd-text-dim:      #64748b;
  --gd-accent:        #f39c12;
  --gd-accent-dark:   #fbbf24;
  --gd-accent-soft:   rgba(243, 156, 18, 0.18);
  --gd-green:         #86efac;
  --gd-green-bg:      #14532d;
  --gd-amber:         #fbbf24;
  --gd-amber-soft:    rgba(251, 191, 36, 0.16);
  --gd-red:           #fca5a5;
  --gd-red-soft:      rgba(252, 165, 165, 0.14);
  --gd-blue:          #93c5fd;
  --gd-blue-bg:       #1e3a8a;
  --gd-blue-soft:     rgba(147, 197, 253, 0.16);
  --gd-shadow-card:   0 2px 8px rgba(0, 0, 0, 0.25);
  --gd-shadow-hover:  0 12px 28px rgba(0, 0, 0, 0.45);
  --gd-shadow-modal:  0 24px 60px rgba(0, 0, 0, 0.55);
  --gd-shadow-fab:    0 8px 24px rgba(243, 156, 18, 0.45);
}

/* ─── ROOT SHELL ──────────────────────────────────────────────────────── */

.gd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--gd-bg);
  color: var(--gd-text);
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  -webkit-font-smoothing: antialiased;
}

.gd-overlay[hidden] {
  display: none;
}

.gd-overlay.gd-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.gd-overlay *,
.gd-overlay *::before,
.gd-overlay *::after {
  box-sizing: border-box;
}

/* ─── HEADER ──────────────────────────────────────────────────────────── */

.gd-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--gd-surface);
  border-bottom: 1px solid var(--gd-border);
  box-shadow: var(--gd-shadow-card);
}

.gd-header__text {
  flex: 1;
  min-width: 0;
}

.gd-header__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gd-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.gd-header__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gd-text-muted);
}

.gd-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gd-icon-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gd-border);
  color: var(--gd-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gd-icon-btn:hover {
  background: var(--gd-surface-2);
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}

.gd-icon-btn:focus-visible {
  outline: 3px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-icon-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.gd-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── TOOLBAR ─────────────────────────────────────────────────────────── */

.gd-toolbar {
  flex-shrink: 0;
  padding: 16px 20px 12px;
  background: var(--gd-surface);
  border-bottom: 1px solid var(--gd-border);
}

.gd-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gd-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.gd-search:focus-within {
  border-color: var(--gd-accent);
}

.gd-search svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gd-text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}

.gd-search input::placeholder {
  color: var(--gd-text-dim);
}

.gd-my-garages-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
  color: var(--gd-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.gd-my-garages-btn:hover:not([disabled]) {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}

.gd-my-garages-btn[aria-pressed="true"] {
  background: var(--gd-accent);
  border-color: var(--gd-accent);
  color: #1e2a3a;
}

.gd-my-garages-btn:focus-visible {
  outline: 3px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-my-garages-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.gd-my-garages-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-my-garages-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--gd-accent);
  color: #1e2a3a;
}

.gd-my-garages-btn[aria-pressed="true"] .gd-my-garages-btn__count {
  background: #1e2a3a;
  color: var(--gd-accent);
}

.gd-segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
}

.gd-segmented button {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--gd-text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.gd-segmented button:hover {
  color: var(--gd-text);
}

.gd-segmented button[aria-pressed="true"] {
  background: var(--gd-surface);
  color: var(--gd-accent);
  box-shadow: var(--gd-shadow-card);
}

.gd-segmented button:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-segmented svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-distance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
  color: var(--gd-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.gd-distance-btn:hover {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}

.gd-distance-btn[aria-pressed="true"] {
  background: var(--gd-accent);
  border-color: var(--gd-accent);
  color: #1e2a3a;
}

.gd-distance-btn:focus-visible {
  outline: 3px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-distance-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-distance-msg {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--gd-text-muted);
  font-style: italic;
}


/* ─── CONTENT AREA ────────────────────────────────────────────────────── */

.gd-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
}

.gd-content::-webkit-scrollbar { width: 8px; }
.gd-content::-webkit-scrollbar-track { background: transparent; }
.gd-content::-webkit-scrollbar-thumb {
  background: var(--gd-border);
  border-radius: 4px;
}
.gd-content::-webkit-scrollbar-thumb:hover {
  background: var(--gd-border-strong);
}

.gd-count {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--gd-text-muted);
}

.gd-count strong {
  color: var(--gd-text);
  font-weight: 700;
}

/* ─── GRID ────────────────────────────────────────────────────────────── */

.gd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ─── CARD ────────────────────────────────────────────────────────────── */

.gd-card {
  position: relative;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--gd-shadow-card);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.gd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-hover);
  border-color: var(--gd-accent);
}


/* ─── CARD ENHANCEMENTS: cover photo, tagline, capability chips ─── */

/* `overflow: hidden` lets the cover photo's corners clip cleanly against
   the card's 16px border radius. No other element in the card relies on
   overflow being visible. */
.gd-card {
  overflow: hidden;
}

/* A cover photo adds 74px of top padding (60px banner + 14px gap). The
   modifier class is set by renderCard() only when coverPhotoUrl exists.
   If the image fails to load, the delegated error handler removes this
   class and the card collapses back to its base padding. */
.gd-card--with-cover {
  padding-top: 74px;
}

/* The cover is absolutely positioned so it does not participate in the
   card's flex column gap. Full-bleed across the top edge. */
.gd-card__cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  overflow: hidden;
  background: var(--gd-surface-2);
}

.gd-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tagline: single line, ellipsised. `title` attribute on the element
   carries the full text for hover and screen readers. */
.gd-card__tagline {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gd-text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Visible details affordance. Small, muted, distinct from the name above
   it. Uses accent colour on the arrow so the eye catches the direction of
   travel without the link competing with the garage name. */
.gd-card__details-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gd-accent);
  cursor: pointer;
  transition: color 0.15s, gap 0.15s;
}

.gd-card__details-link:hover {
  color: var(--gd-accent-dark);
  gap: 6px;
}

.gd-card__details-link:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.gd-card__details-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Capability chip row — up to three capability chips plus one optional
   price-range chip. Wraps to a second line if the card is narrow. */
.gd-card__capabilities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.gd-card__capability {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--gd-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  background: var(--gd-accent-soft);
  color: var(--gd-accent-dark);
}

/* Priority capabilities get their own accent colour so the eye can pick
   them out at a glance in a scan of the grid. */
.gd-card__capability--roadside {
  background: var(--gd-blue-soft);
  color: var(--gd-blue);
}

.gd-card__capability--emergency {
  background: var(--gd-red-soft);
  color: var(--gd-red);
}

.gd-card__capability--mobile {
  background: var(--gd-amber-soft);
  color: var(--gd-amber);
}

/* Lower-priority capabilities use a neutral treatment so they do not
   compete visually with the priority ones above. */
.gd-card__capability--walkins,
.gd-card__capability--parking,
.gd-card__capability--waiting {
  background: var(--gd-surface-2);
  color: var(--gd-text-muted);
  border-color: var(--gd-border);
}

/* Price range chip — distinct from capabilities. Bold text, neutral
   background, subtle border. */
.gd-card__capability--price {
  background: var(--gd-surface-2);
  color: var(--gd-text);
  border-color: var(--gd-border);
  font-weight: 800;
}


.gd-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gd-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0b3c5d, #0f4a70);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-card__avatar svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gd-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--gd-radius-pill);
  white-space: nowrap;
}

.gd-card__badge svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__badge--verified {
  color: var(--gd-green);
  background: var(--gd-green-bg);
}

.gd-card__badge--roadside {
  color: var(--gd-blue);
  background: var(--gd-blue-bg);
}

.gd-card__fav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gd-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}

.gd-card__fav:hover {
  background: var(--gd-accent-soft);
  color: var(--gd-accent);
}

.gd-card__fav:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-card__fav[aria-pressed="true"] {
  color: var(--gd-accent);
}

.gd-card__fav[aria-pressed="true"] svg {
  fill: currentColor;
}

.gd-card__fav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gd-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gd-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
}

.gd-card__stars {
  display: inline-flex;
  gap: 1px;
  color: #f59e0b;
}

.gd-card__stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}

.gd-card__stars svg.gd-star--empty {
  fill: var(--gd-border);
}

.gd-card__score {
  font-weight: 700;
  color: var(--gd-text);
}

.gd-card__reviews {
  color: var(--gd-text-dim);
}

.gd-card__location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--gd-text-muted);
}

.gd-card__location svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__distance {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gd-text-muted);
  background: var(--gd-surface-2);
  padding: 2px 8px;
  border-radius: var(--gd-radius-pill);
  white-space: nowrap;
}

/* Region — muted fact about place. Sits directly under the location line
   so the two read as a pair. Smaller and dimmer than the location itself
   so the eye prioritises the specific address. */
.gd-card__region {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gd-text-dim);
  line-height: 1.3;
}

.gd-card__specialties {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.gd-card__specialties li {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--gd-radius-pill);
  background: var(--gd-surface-2);
  color: var(--gd-text-muted);
  border: 1px solid var(--gd-border);
}

.gd-card__hours {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 2px;
}

.gd-card__hours svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__hours--open    { color: var(--gd-green); }
.gd-card__hours--closing { color: var(--gd-amber); }
.gd-card__hours--closed  { color: var(--gd-text-dim); }

.gd-card__trust {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--gd-text-dim);
}

.gd-card__response {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--gd-text-muted);
}

.gd-card__response-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gd-card__response-dot--same_day     { background: var(--gd-green); }
.gd-card__response-dot--within_a_day { background: var(--gd-amber); }
.gd-card__response-dot--few_days     { background: var(--gd-text-dim); }

.gd-card__repair-log {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--gd-text-muted);
  font-weight: 500;
}

.gd-card__repair-log svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-card__parts-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  margin-top: 4px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 8px;
  color: var(--gd-accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.gd-card__parts-link:hover {
  border-color: var(--gd-accent);
  background: var(--gd-accent-soft);
  color: var(--gd-accent-dark);
}

.gd-card__parts-link:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-card__parts-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Actions row — stacked. View Details is the primary action and sits
   above Map. Both buttons are full width because there are now only two
   and the primary must be unmissable. */

   .gd-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gd-border);
}

.gd-card__actions .gd-btn {
  min-height: 46px;
}

/* View Details remains the visual primary through its fill colour and
   weight, not through occupying a full row. Both buttons share the row
   equally, so neither looks subordinate in size. */
.gd-card__actions .gd-btn--primary {
  font-size: 0.9rem;
  font-weight: 800;
}

/* ─── BUTTONS (shared) ────────────────────────────────────────────────── */

.gd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.gd-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-btn--ghost {
  background: var(--gd-surface-2);
  border-color: var(--gd-border);
  color: var(--gd-text);
}

.gd-btn--ghost:hover {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}

.gd-btn--primary {
  background: var(--gd-accent);
  color: #1e2a3a;
}

.gd-btn--primary:hover {
  background: var(--gd-accent-dark);
}

.gd-btn--danger {
  background: var(--gd-surface-2);
  border-color: var(--gd-border);
  color: var(--gd-red);
}

.gd-btn--danger:hover {
  border-color: var(--gd-red);
  background: var(--gd-red-soft);
}

.gd-btn:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}



/* ─── MAP VIEW ────────────────────────────────────────────────────────── */

.gd-map-wrap {
  width: 100%;
  height: calc(100vh - 340px);
  min-height: 420px;
  border-radius: var(--gd-radius-card);
  overflow: hidden;
  border: 1px solid var(--gd-border);
  background: var(--gd-surface);
}

.gd-map {
  width: 100%;
  height: 100%;
}

.gd-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  padding: 40px 20px;
  text-align: center;
  color: var(--gd-text-muted);
  background: var(--gd-surface);
  border: 1px dashed var(--gd-border);
  border-radius: var(--gd-radius-card);
}

.gd-map-empty svg {
  width: 40px;
  height: 40px;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-map-empty strong {
  color: var(--gd-text);
  font-size: 0.95rem;
}

.gd-map-empty p {
  margin: 0;
  font-size: 0.85rem;
  max-width: 340px;
}

/* Marker pin (created by garage-map.js as L.divIcon) */
.gd-pin {
  background: transparent !important;
  border: none !important;
}

.gd-pin__body {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

.gd-pin__body--open    { background: var(--gd-green); }
.gd-pin__body--closing { background: var(--gd-amber); }
.gd-pin__body--closed  { background: var(--gd-text-dim); }

.gd-pin__inner {
  position: absolute;
  inset: 6px;
  background: #ffffff;
  border-radius: 50%;
}

/* Leaflet controls scoped to the directory map only.
   These must never leak to fleet-trips.js or hire-inspections.js maps. */
.gd-map .leaflet-control-zoom a {
  background: var(--gd-surface);
  color: var(--gd-text);
  border-color: var(--gd-border);
}

.gd-map .leaflet-control-zoom a:hover {
  background: var(--gd-surface-2);
  color: var(--gd-accent);
}

.gd-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85);
  color: #334155;
  font-size: 10px;
}

.gd-overlay[data-theme="dark"] .gd-map .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
}

.gd-map .ft-map-theme-toggle {
  display: none; /* the overlay has its own theme toggle in the header */
}


/* ─── GALLERY VIEW ────────────────────────────────────────────────────── */

.gd-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Toolbar: search + count ── */
.gd-gallery__toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gd-gallery__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
  cursor: text;
  transition: border-color 0.15s;
}

.gd-gallery__search:focus-within {
  border-color: var(--gd-accent);
}

.gd-gallery__search > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-gallery__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gd-text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}

.gd-gallery__search input::placeholder {
  color: var(--gd-text-dim);
}

.gd-gallery__search-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gd-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.gd-gallery__search-clear:hover {
  background: var(--gd-border);
  color: var(--gd-text);
}

.gd-gallery__search-clear:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-gallery__search-clear svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-gallery__count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gd-text-muted);
}

/* ── Groups container ── */
.gd-gallery__groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gd-gallery__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gd-gallery__group-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gd-border);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gd-text);
  line-height: 1.3;
}

.gd-gallery__group-heading-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--gd-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gd-gallery__group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-gallery__group-count {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gd-text-muted);
  white-space: nowrap;
}

/* ── Photo grid — every tile has a fixed 4:3 aspect ratio ──
   Uniform tiles keep the wall calm: no single photo dominates its row,
   and portrait shots do not push the grid taller than its neighbours. */
.gd-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.gd-gallery__item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}

.gd-gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-hover);
}

.gd-gallery__item:focus-visible {
  outline: 3px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gd-gallery__caption {
  padding: 8px 10px;
  font-size: 0.72rem;
  color: var(--gd-text-muted);
  border-top: 1px solid var(--gd-border);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Empty state (no photos anywhere) ── */
.gd-gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gd-text-muted);
  background: var(--gd-surface);
  border: 1px dashed var(--gd-border);
  border-radius: var(--gd-radius-card);
}

.gd-gallery-empty svg {
  width: 44px;
  height: 44px;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 10px;
}

.gd-gallery-empty strong {
  display: block;
  color: var(--gd-text);
  font-size: 0.95rem;
}

.gd-gallery-empty p {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

/* ── Responsive column counts ── */
@media (max-width: 1400px) {
  .gd-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .gd-gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gd-gallery__groups { gap: 24px; }
}

@media (max-width: 700px) {
  .gd-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gd-gallery__groups { gap: 20px; }
  .gd-gallery__group-heading { font-size: 0.92rem; }
  .gd-gallery__group { gap: 10px; }
}

@media (max-width: 420px) {
  .gd-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .gd-gallery__item { border-radius: 8px; }
  .gd-gallery__caption { padding: 6px 8px; font-size: 0.7rem; }
}


.gd-gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gd-text-muted);
  background: var(--gd-surface);
  border: 1px dashed var(--gd-border);
  border-radius: var(--gd-radius-card);
}

.gd-gallery-empty svg {
  width: 44px;
  height: 44px;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 10px;
}

.gd-gallery-empty strong {
  display: block;
  color: var(--gd-text);
  font-size: 0.95rem;
}

.gd-gallery-empty p {
  margin: 6px 0 0;
  font-size: 0.85rem;
}


/* ─── CHAT SLOT ───────────────────────────────────────────────────────── */

/* The chat widget is dark-themed. Framed inside a light overlay, it reads
   as a console. This is intentional. Do not lighten it. The slot provides
   a neutral dark container; the widget fills it. */
.gd-chat-slot {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  min-height: 420px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--gd-radius-card);
  color: #e2e8f0;
}

/* ─── PAGINATION ──────────────────────────────────────────────────────── */

.gd-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0 40px;
  flex-wrap: wrap;
}

.gd-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gd-text);
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.gd-page-btn:hover:not([disabled]):not(.gd-page-btn--active) {
  border-color: var(--gd-accent);
  color: var(--gd-accent);
}

.gd-page-btn:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

.gd-page-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gd-page-btn--active {
  background: var(--gd-accent);
  border-color: var(--gd-accent);
  color: #1e2a3a;
  cursor: default;
}

.gd-page-btn--ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.gd-page-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── FLOATING CHAT BUTTON ────────────────────────────────────────────── */

.gd-fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gd-accent);
  color: #1e2a3a;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--gd-shadow-fab);
  transition: background 0.15s, transform 0.15s;
  z-index: 10;
}

.gd-fab:hover {
  background: var(--gd-accent-dark);
  transform: translateY(-2px);
}

.gd-fab:focus-visible {
  outline: 3px solid var(--gd-accent);
  outline-offset: 3px;
}

.gd-fab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* ─── RATE MODAL ──────────────────────────────────────────────────────── */

.gd-rate-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  background: rgba(15, 23, 42, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gd-rate-box {
  background: var(--gd-surface);
  color: var(--gd-text);
  padding: 28px 26px;
  border-radius: 16px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--gd-shadow-modal);
}

.gd-rate-box h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gd-text);
}

.gd-rate-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  user-select: none;
}

.gd-rate-star {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gd-border);
  transition: color 0.1s, transform 0.1s;
}

.gd-rate-star:hover,
.gd-rate-star.gd-rate-star--active {
  color: var(--gd-accent);
  transform: scale(1.05);
}

.gd-rate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ─── EMPTY STATES ────────────────────────────────────────────────────── */

.gd-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gd-text-muted);
}

.gd-empty svg {
  width: 48px;
  height: 48px;
  stroke: var(--gd-text-dim);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}

.gd-empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--gd-text);
}

.gd-empty p {
  margin: 0 0 16px;
  font-size: 0.85rem;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.gd-empty__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--gd-accent);
  color: #1e2a3a;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.gd-empty__action:hover {
  background: var(--gd-accent-dark);
}

.gd-empty__action:focus-visible {
  outline: 2px solid var(--gd-accent);
  outline-offset: 2px;
}

/* ─── SKELETON LOADER ─────────────────────────────────────────────────── */

.gd-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gd-skeleton-card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gd-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--gd-surface-2) 0%,
    var(--gd-border) 50%,
    var(--gd-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: gd-skeleton-shimmer 1.5s ease-in-out infinite;
}

.gd-skeleton-line--wide   { width: 70%; }
.gd-skeleton-line--medium { width: 45%; }
.gd-skeleton-line--short  { width: 30%; }

@keyframes gd-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
  .gd-grid,
  .gd-skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gd-gallery { column-count: 3; }
}

@media (max-width: 1000px) {
  .gd-grid,
  .gd-skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gd-gallery { column-count: 2; }
  .gd-header__title { font-size: 1.05rem; }
  .gd-modal__facility { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .gd-header {
    padding: 12px 14px;
    gap: 8px;
  }
  .gd-header__title { font-size: 1rem; }
  .gd-header__sub   { font-size: 0.72rem; }

  .gd-toolbar { padding: 12px 14px 10px; }
  .gd-content { padding: 14px; }

  .gd-grid,
  .gd-skeleton-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gd-gallery { column-count: 1; }

  /* Toolbar row as a two-column grid.
     Search spans both columns on line 1.
     My Garages and Sort by distance share line 2.
     The segmented control spans both columns on line 3.
     Visual order is arranged here; DOM order is unchanged so tab
     order and screen-reader order match what the user sees. */
  .gd-search-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search    search"
      "mygarages distance"
      "segmented segmented";
    gap: 8px;
  }

  .gd-search         { grid-area: search;    min-width: 0; }
  .gd-my-garages-btn { grid-area: mygarages; justify-content: center; }
  .gd-distance-btn   { grid-area: distance;  justify-content: center; }

  .gd-segmented {
    grid-area: segmented;
    width: 100%;
    justify-content: space-between;
  }
  .gd-segmented button {
    flex: 1;
    justify-content: center;
  }

  .gd-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gd-chips::-webkit-scrollbar { display: none; }
  .gd-chip { flex-shrink: 0; }

  .gd-map-wrap {
    height: calc(100vh - 340px);
    min-height: 320px;
  }

  .gd-fab {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }

  .gd-pagination { gap: 4px; }
  .gd-page-btn { min-width: 36px; height: 36px; font-size: 0.8rem; }

  .gd-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .gd-modal__panel {
    max-width: 100%;
    max-height: 92vh;
    padding: 24px 20px 20px;
    border-radius: 20px 20px 0 0;
  }
}

@media (max-width: 380px) {
  .gd-card__specialties li:nth-child(n+3) { display: none; }
  .gd-modal__facility { gap: 6px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gd-overlay,
  .gd-card,
  .gd-btn,
  .gd-chip,
  .gd-page-btn,
  .gd-fab,
  .gd-gallery__item,
  .gd-segmented button,
  .gd-icon-btn,
  .gd-modal,
  .gd-modal__panel,
  .gd-rate-star {
    transition: none;
  }

  .gd-card:hover,
  .gd-gallery__item:hover,
  .gd-fab:hover,
  .gd-modal__panel,
  .gd-modal.gd-modal--open .gd-modal__panel {
    transform: none;
  }

  .gd-skeleton-line {
    animation: none;
    background: var(--gd-surface-2);
  }
}