/* Marketing mock of the real customer inbox (templates/_product_visual.html).
   Colours, spacing and labels follow static/inbox.css and garage.css so the
   public pages show the dashboard customers actually get. Everything here is
   static decoration: no links, no controls, no script (CSP: style-src 'self').
   Views: .th-mock-split (list + selected enquiry, the desktop layout),
   .th-mock-inbox (phone-width list) and .th-mock-enquiry (one open enquiry). */

.th-mock {
  --mock-ink: #172421;
  --mock-muted: #5e6b67;
  --mock-line: #d8dfdc;
  --mock-brand: #0b9f6e;
  --mock-brand-dark: #087653;
  --mock-brand-soft: #e6f7f0;
  --mock-page: #f5f6f5;
  --mock-topbar: #16352f;
  --mock-new: #15569b;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  border: 1px solid #c3cfcb;
  border-radius: 18px;
  background: var(--mock-page);
  color: var(--mock-ink);
  box-shadow: 0 22px 55px rgba(12, 45, 39, 0.16);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-align: left;
}

.th-mock *,
.th-mock *::before,
.th-mock *::after {
  box-sizing: border-box;
}

/* Specific enough to beat the public pages' own paragraph styling. */
.th-mock .mock-body div > p {
  margin: 0;
  color: var(--mock-ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.th-mock svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Phone-sized views sit on their own, so they keep a phone's proportions. */
.th-mock-inbox,
.th-mock-enquiry {
  max-width: 440px;
  margin-inline: auto;
}

/* Dark Trade Hook top navigation (base.html .topbar). */
.mock-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 10px 16px;
  background: var(--mock-topbar);
  color: #fff;
}

.mock-topbar > strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mock-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mock-nav > span,
.mock-nav > b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mock-nav .mock-account {
  color: #d3e2dd;
  font-weight: 600;
  text-decoration: none;
}

/* Phones hide the business name and the Enquiries link, as the real nav does. */
.th-mock-inbox .mock-account,
.th-mock-inbox .mock-nav > b,
.th-mock-enquiry .mock-account,
.th-mock-enquiry .mock-nav > b {
  display: none;
}

.mock-eyebrow {
  display: block;
  color: var(--mock-brand);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Enquiry list (garage_dashboard.html .inbox-list) ---------------- */

.mock-list {
  min-width: 0;
  padding: 14px 16px 16px;
}

.mock-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mock-heading strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.mock-count {
  color: var(--mock-muted);
  font-size: 12px;
  white-space: nowrap;
}

.mock-usage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--mock-line);
  border-radius: 10px;
  background: #fff;
  color: #45534f;
  font-size: 12.5px;
  white-space: nowrap;
}

.mock-usage b {
  font-weight: 800;
}

.mock-usage b::after {
  content: "•";
  margin-left: 8px;
  color: #a9b6b1;
}

.mock-usage span {
  font-weight: 650;
}

.mock-usage em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--mock-brand-dark);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 800;
}

.mock-tabs {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin: 12px 0 10px;
  border-bottom: 1px solid var(--mock-line);
}

.mock-tabs > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: -1px;
  padding: 7px 4px 8px;
  border-bottom: 3px solid transparent;
  color: #45534f;
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

.mock-tabs > span > b {
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8ecea;
  color: #45534f;
  font-size: 11px;
  font-weight: 750;
}

.mock-tabs .is-active {
  border-color: var(--mock-brand);
  color: var(--mock-brand-dark);
}

.mock-tabs .is-active > b {
  background: var(--mock-brand-soft);
  color: var(--mock-brand-dark);
}

.mock-more svg {
  font-size: 12px;
}

.mock-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.mock-search-field {
  overflow: hidden;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #c9d3cf;
  border-radius: 8px;
  background: #fff;
  color: #6b7a75;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #86afa5;
  border-radius: 8px;
  background: #fff;
  color: var(--mock-brand-dark);
  font-size: 12.5px;
  font-weight: 750;
}

.mock-filter svg {
  font-size: 15px;
}

.mock-card {
  margin-top: 8px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--mock-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 4px 0 var(--mock-new);
}

.mock-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.mock-card-head strong {
  width: 100%;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mock-status {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--mock-new);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mock-card-head small {
  color: var(--mock-muted);
  font-size: 12px;
}

.th-mock .mock-body .mock-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 6px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 700;
}

.mock-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 5px;
  color: var(--mock-muted);
  font-size: 11.5px;
}

.mock-chips b {
  color: var(--mock-ink);
  font-weight: 750;
}

.mock-urgent {
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff0e7;
  color: #7c3b13;
}

/* Reply is the primary action; Call and WhatsApp are icon buttons. */
.mock-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.mock-card-actions > b {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--mock-brand);
  border-radius: 6px;
  background: var(--mock-brand);
  color: #fff;
  font-weight: 750;
}

.mock-card-actions > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 36px;
  border: 1px solid #86afa5;
  border-radius: 6px;
  background: #fff;
  color: var(--mock-brand-dark);
  font-size: 18px;
}

/* ---- Selected enquiry (_enquiry_pane.html) ----------------------------- */

.mock-pane {
  min-width: 0;
  padding: 16px 18px 18px;
}

.mock-back {
  display: block;
  margin-bottom: 12px;
  color: var(--mock-brand-dark);
  font-size: 13px;
  font-weight: 750;
}

.mock-pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mock-customer {
  min-width: 0;
}

.mock-customer > strong {
  display: block;
  margin: 2px 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mock-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--mock-muted);
  font-size: 12px;
}

.mock-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: #dcecff;
  color: var(--mock-new);
  font-size: 11px;
  font-weight: 850;
}

.mock-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mock-primary > b,
.mock-primary > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #86afa5;
  border-radius: 6px;
  background: #fff;
  color: var(--mock-brand-dark);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.mock-primary > b {
  border-color: var(--mock-brand);
  background: var(--mock-brand);
  color: #fff;
}

.mock-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--mock-line);
  border-radius: 10px;
  background: #fff;
}

.mock-need > strong {
  display: block;
  margin: 3px 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.mock-need .mock-chips {
  margin-top: 0;
  font-size: 12px;
}

.mock-statuses {
  margin-top: 12px;
}

.mock-statuses > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.mock-statuses > div > b,
.mock-statuses > div > span {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #aebbb7;
  border-radius: 6px;
  background: #fff;
  color: #263632;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.mock-statuses > div > b {
  border-color: var(--mock-brand);
  background: var(--mock-brand);
  color: #fff;
}

.mock-bubble {
  width: fit-content;
  max-width: 84%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--mock-line);
  border-radius: 12px;
  background: #fff;
}

.mock-bubble.is-you {
  margin-left: auto;
  border-color: #bfe6d5;
  background: var(--mock-brand-soft);
}

.mock-bubble small {
  display: block;
  margin-top: 3px;
  color: var(--mock-muted);
  font-size: 11px;
}

.mock-composer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3e9e7;
}

.mock-label {
  display: block;
  font-size: 12.5px;
  font-weight: 750;
}

.mock-textarea {
  display: block;
  min-height: 46px;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid #c9d3cf;
  border-radius: 8px;
  background: #fff;
  color: #6b7a75;
}

.mock-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.mock-composer-actions small {
  color: var(--mock-muted);
  font-size: 11px;
  line-height: 1.35;
}

.mock-composer-actions > b {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--mock-brand);
  color: #fff;
  font-weight: 750;
}

/* The opened enquiry on a phone stacks Reply by text full width, then
   Call customer and WhatsApp side by side, as the real pane does. */
.th-mock-enquiry .mock-pane-head {
  display: block;
}

.th-mock-enquiry .mock-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}

.th-mock-enquiry .mock-primary > b {
  grid-column: 1 / -1;
}

.th-mock-enquiry .mock-statuses > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---- Desktop split pane (.inbox-layout at 1024px and up) --------------- */

@media (min-width: 821px) {
  .th-mock-split .mock-body {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  .th-mock-split .mock-list {
    padding-right: 14px;
  }

  .th-mock-split .mock-tabs {
    gap: 0;
  }

  .th-mock-split .mock-tabs > span {
    padding-inline: 3px;
    font-size: 11.5px;
  }

  .th-mock-split .mock-tabs > span > b {
    padding-inline: 5px;
    font-size: 10.5px;
  }

  .th-mock-split .mock-body .mock-card > p {
    -webkit-line-clamp: 1;
  }

  .th-mock-split .mock-pane {
    border-left: 1px solid var(--mock-line);
  }

  .th-mock-split .mock-primary > b,
  .th-mock-split .mock-primary > span {
    padding-inline: 11px;
    font-size: 12.5px;
  }

  /* The pane carries the actions, so the cards stay compact (inbox.css). */
  .th-mock-split .mock-card-actions {
    display: none;
  }

  .th-mock-split .mock-card.is-selected {
    border-color: var(--mock-brand);
    box-shadow: inset 4px 0 var(--mock-brand), 0 0 0 2px var(--mock-brand-soft);
  }
}

/* Below that the landing mock becomes the phone inbox: list only, the
   enquiry opens on its own screen (mode-list / mode-detail in the real app). */
@media (max-width: 820px) {
  .th-mock-split {
    max-width: 440px;
    margin-inline: auto;
  }

  .th-mock-split .mock-pane,
  .th-mock-split .mock-account,
  .th-mock-split .mock-nav > b {
    display: none;
  }
}

/* Small phones: the same layout, slightly tighter so nothing is cut off. */
@media (max-width: 400px) {
  .mock-topbar {
    gap: 10px;
    padding-inline: 12px;
  }

  .mock-nav {
    gap: 10px;
    font-size: 11.5px;
  }

  .mock-list {
    padding-inline: 12px;
  }

  .mock-tabs > span {
    padding-inline: 2px;
    font-size: 12px;
  }

  .mock-tabs > span > b {
    padding-inline: 5px;
    font-size: 10.5px;
  }

  .mock-pane {
    padding-inline: 12px;
  }
}

/* The narrowest phones (320px): rows may wrap rather than clip. */
@media (max-width: 350px) {
  .mock-topbar > strong {
    font-size: 14px;
  }

  .mock-nav {
    gap: 7px;
    font-size: 10.5px;
  }

  .mock-usage,
  .mock-tabs {
    flex-wrap: wrap;
  }

  .mock-usage {
    row-gap: 2px;
  }

  .mock-tabs > span {
    font-size: 11.5px;
  }
}
.mock-caption{margin:8px 0 0;text-align:center;color:#5b6b67;font-size:13px}