/*
 * AidersPlus Marketplace — Design System
 * Tokens cloned from UI/UX prototype (marketplace.css)
 *


 */

:root {
  --green:   #0e3b2e;
  --green2:  #155744;
  --mint:    #e9f2ee;
  --cream:   #f7f3eb;
  --sand:    #e8ddcd;
  --ink:     #17231f;
  --muted:   #62706a;
  --white:   #fff;
  --amber:   #bd7a19;
  --red:     #a94442;
  --blue:    #2f5f8f;
  --line:    #dce4df;
  --shadow:  0 18px 48px rgba(17,48,38,.12);
  --radius:  18px;
  --serif:   Georgia, 'Times New Roman', serif;
  --sans:    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Max content width + responsive side gutter.
     History: 1180 (orig) → 1440 → 1600 → 1400 (2026-09-10).
     Going to 1600 caused content to touch the viewport edges on ~1500px
     laptops because the fallback `calc(100% - 36px)` gives only ~18px
     margin/side. Fix: modest cap + a viewport-scaled gutter via clamp,
     so margins are ALWAYS visible on every screen size. */
  --max:     1400px;
  --gutter:  clamp(24px, 6vw, 160px);   /* total left+right side margin */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fbfcfb;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Skip link */
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 99;
  background: var(--green); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* Shell / container */
.shell {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
  padding: 48px 0 72px;
}
.shell.narrow { width: min(780px, calc(100% - 36px)); }

/* Site Header */
.site-header {
  height: 78px;
  padding: 0 clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.brand img { width: 38px; height: 38px; object-fit: cover; }
.brand span { display: grid; line-height: 1.05; }
.brand b { font-family: var(--serif); font-size: 21px; color: var(--green); }
.brand small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.site-header nav { display: flex; gap: 24px; margin-right: auto; font-size: 14px; font-weight: 650; }
.site-header nav a:hover { color: var(--green2); }

/* Messages link with unread badge — small red pill next to the label so the
   user can see they have unread threads without opening the inbox. */
.nav-messages-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav-messages-link.has-unread { color: var(--green); }
.nav-msg-badge {
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  border-radius: 9px; display: inline-grid; place-items: center;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { border: 0; background: transparent; font-size: 24px; cursor: pointer; }

/* Profile avatar dropdown */
.profile-menu { position: relative; }
.profile-menu[open] .profile-dropdown { display: block; }
.profile-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  display: grid; place-items: center; cursor: pointer;
  list-style: none; border: 2px solid transparent;
  transition: border-color .15s;
}
.profile-avatar::-webkit-details-marker { display: none; }
.profile-menu[open] .profile-avatar { border-color: var(--green2); }
.profile-avatar:hover { border-color: var(--green2); }
.profile-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(10,29,22,.12);
  min-width: 220px; overflow: hidden; z-index: 100;
}
.profile-dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.profile-dropdown-item {
  display: block; padding: 10px 16px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
}
.profile-dropdown-item:hover { background: var(--mint); color: var(--green); }
.profile-dropdown-divider { height: 1px; background: var(--line); margin: 4px 0; }
.profile-dropdown-section {
  padding: 10px 16px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
}
.profile-dropdown-signout { color: var(--muted); }
.profile-dropdown-signout:hover { color: var(--red); background: #fff4f3; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--green); border-radius: 11px;
  background: var(--green); color: #fff;
  padding: 12px 18px; font-weight: 750; cursor: pointer;
  transition: .18s ease;
}
.button:hover { background: var(--green2); transform: translateY(-1px); }
.button.secondary { background: #fff; color: var(--green); }
.button.ghost { background: transparent; color: var(--green); border-color: var(--line); }
.button.light { background: #fff; color: var(--green); border-color: #fff; }
.button.danger { background: #fff4f3; color: var(--red); border-color: #efc9c7; }
.button.compact { padding: 8px 12px; font-size: 13px; }
.button.wide { width: 100%; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 5px 9px;
  background: var(--mint); color: var(--green);
  font-weight: 800; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge.amber { background: #fff4df; color: #87560d; }
.badge.red   { background: #fff0ef; color: var(--red); }
.badge.blue  { background: #edf4fb; color: var(--blue); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

/* Alerts */
.alert {
  border-left: 4px solid var(--green);
  background: var(--mint);
  padding: 14px 16px;
  border-radius: 9px;
  margin: 16px 0;
}
.alert.warning { border-color: var(--amber); background: #fff7e8; }
.alert.danger  { border-color: var(--red);   background: #fff2f1; }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-control { display: grid; gap: 7px; }
.form-control.full { grid-column: 1 / -1; }
.form-control label { font-size: 12px; font-weight: 800; }
.form-control input,
.form-control select,
.form-control textarea,
.form-control .field_with_errors input,
.form-control .field_with_errors select,
.form-control .field_with_errors textarea {
  width: 100%;
  border: 1px solid #cfdad4;
  border-radius: 10px;
  padding: 12px 13px;
  background: #fff;
  box-sizing: border-box;
  font: inherit;
}
.form-control textarea { min-height: 100px; resize: vertical; }
/* Rails wraps errored fields in <div class="field_with_errors">. Make that wrapper
   invisible to layout so it can't break grids / flex parents, and paint the errored
   input red so the user still sees which field is wrong. */
.field_with_errors { display: contents; }
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea { border-color: var(--red) !important; background: #fff7f6 !important; }
.field_with_errors label { color: var(--red); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.check input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.check.full { grid-column: 1 / -1; }
.field-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.text-link { color: var(--green); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.text-link:hover { color: var(--green2); }

/* Global announcement banner (admin-controlled via PlatformSetting) */
.announcement-banner {
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  text-align: center; border-bottom: 1px solid transparent;
}
.announcement-banner--green { background: var(--mint);    color: var(--green);  border-color: #cfe1d6; }
.announcement-banner--amber { background: #fef4e1;         color: #8b5a06;        border-color: #fde7a8; }
.announcement-banner--red   { background: #fee6e4;         color: #8a3735;        border-color: #efc9c7; }

/* Flash messages */
.flash-notice,
.flash-alert {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
  opacity: 1; transition: opacity 0.35s ease;
}
.flash-notice { background: var(--mint); color: var(--green); }
.flash-alert  { background: #fff2f1; color: var(--red); border-color: #efc9c7; }
.flash--hiding { opacity: 0; }
.flash-close {
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 0 0 16px;
  color: inherit; opacity: 0.6;
}
.flash-close:hover { opacity: 1; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.stat strong { display: block; font-family: var(--serif); font-size: 30px; }
.stat small { color: var(--muted); }

/* Site footer */
.site-footer {
  background: var(--ink); color: #dbe6e1;
  padding: 38px clamp(18px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr auto;
  gap: 26px; align-items: center; font-size: 12px;
}
.site-footer .brand b { color: #fff; }
.site-footer > div:nth-child(2) { display: flex; gap: 18px; }
.site-footer p { grid-column: 1 / -1; margin: 0; color: #91a29a; }

/* Kicker / eyebrow */
.kicker {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green2); font-weight: 800;
}

/* Toast */
.toast {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: 10px;
  box-shadow: var(--shadow); opacity: 0;
  transform: translateY(10px); pointer-events: none;
  transition: .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 900px) {
  .site-header nav { display: none; }
  .site-header { height: 68px; padding: 0 18px; }
  .header-actions { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div:nth-child(2) { flex-wrap: wrap; }
  .site-footer p { grid-column: auto; }
}

@media (max-width: 620px) {
  .brand small { display: none; }
  .shell { padding: 34px 0 54px; }
  .stats { grid-template-columns: 1fr; }
}

/* ─── M2: Listing Cards ─── */
.listing-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; display:block; transition:.15s ease; color:var(--ink); }
.listing-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.listing-card img { width:100%; height:240px; object-fit:cover; display:block; }
.listing-body { padding:16px; }
.listing-meta-top { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.listing-body h3 { margin:3px 0 4px; font-size:17px; }
.listing-body p { color:var(--muted); margin:0; font-size:13px; }
.listing-meta { display:flex; justify-content:space-between; align-items:flex-end; margin-top:14px; }
.price { font-weight:800; font-size:16px; }
.price span { font-weight:500; color:var(--muted); font-size:12px; }
.save { position:absolute; right:14px; top:14px; z-index:2; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.94); font-size:20px; cursor:pointer; display:grid; place-items:center; box-shadow:0 2px 8px rgba(10,29,22,.15); transition:transform .12s ease, background .15s; color:var(--ink); }
.save:hover { transform:scale(1.08); background:#fff; }
.save.is-saved { color:#e0335c; background:#fff; }

/* Nav heart — saved-listings shortcut in the header for renters */
.nav-heart { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--ink); text-decoration: none; transition: background .15s; }
.nav-heart:hover { background: var(--mint); }
.nav-heart-icon { font-size: 20px; line-height: 1; color: #e0335c; }
.nav-heart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1; }

/* Browse layout — exact prototype class names */
.search-panel { display:grid; grid-template-columns:1.3fr .8fr .7fr auto; background:#fff; padding:8px; border-radius:14px; max-width:990px; margin-top:30px; box-shadow:var(--shadow); color:var(--ink); }

/* .field — prototype name; .search-field — alias */
.field, .search-field { display:grid; gap:5px; padding:8px 14px; border-right:1px solid var(--line); }
.field:last-of-type, .search-field:last-of-type { border-right:0; }
.field label, .search-field label { font-size:10px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; color:var(--muted); }
.field input, .field select, .field textarea,
.search-field input, .search-field select { border:0; background:transparent; outline:0; color:var(--ink); padding:2px 0; width:100%; }

.category-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
/* .category — prototype name; .category-card — alias */
.category, .category-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:12px; min-height:130px; cursor:pointer; transition:.15s ease; text-align:left; color:var(--ink); text-decoration:none; }
.category:hover, .category-card:hover, .category.active, .category-card.active { border-color:var(--green); background:var(--mint); box-shadow:0 10px 26px rgba(14,59,46,.09); }
.category .emoji, .category-card .cat-icon { font-size:27px; }
.category strong, .category-card strong { font-size:14px; font-weight:700; }
.category small, .category-card small { color:var(--muted); font-size:12px; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0; }
.filter-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; }
.chip.active, .chip:hover { background:var(--green); color:#fff; border-color:var(--green); }
.results-count { color:var(--muted); font-size:13px; white-space:nowrap; }
.listings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* Listing detail */
.detail-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.7fr); gap:34px; }
.gallery { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:220px 220px; gap:10px; border-radius:var(--radius); overflow:hidden; }
.gallery img { width:100%; height:100%; object-fit:cover; }
.gallery img:first-child { grid-row:1/3; }
.sticky-sidebar { position:sticky; top:100px; }
.price-summary { display:grid; gap:12px; }
.price-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.price-row:last-child { border-bottom:0; }
.trust-note { background:var(--mint); border-radius:10px; padding:12px 14px; font-size:12px; color:var(--green2); margin-top:12px; }
.bundle-list { display:grid; gap:8px; margin:12px 0; }
.bundle-item { display:flex; gap:10px; align-items:center; font-size:14px; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:9px; }
.bundle-item .qty { background:var(--mint); color:var(--green); font-weight:800; font-size:12px; padding:2px 8px; border-radius:999px; }

/* Kanban */
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kanban-col { background:#edf1ef; border-radius:14px; padding:12px; }
.kanban-col-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kanban-col-header h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin:0; color:var(--muted); }
.kanban-count { background:var(--line); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
.kanban-card { background:#fff; border-radius:10px; padding:13px; margin:6px 0; box-shadow:0 4px 12px rgba(23,35,31,.06); font-size:12px; }
.kanban-card h4 { margin:0 0 4px; font-size:13px; }
.kanban-card .card-meta { color:var(--muted); font-size:11px; }

/* Hero section (photo background) */
/* background-image is injected as inline style via asset_path() in the ERB view */
.hero {
  min-height: 520px;
  display: grid;
  align-items: end;
  background: var(--green);
  color: #fff;
}
.hero-inner {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
  padding: 68px 0;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(46px,7vw,78px);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 720px;
  margin: 12px 0 18px;
}
.hero p { font-size: 18px; max-width: 600px; color: #e6eee9; margin: 0; }
.hero .kicker { color: rgba(255,255,255,.7); }

/* ─── Auth Pages ─── */
.auth-page {
  min-height: calc(100vh - 78px);
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    linear-gradient(135deg, rgba(14,59,46,.72) 0%, rgba(14,59,46,.35) 55%, rgba(247,243,234,.55) 100%),
    url(/assets/marketplace-hero-0450590df85765aa73d1e5ac06a24c5605c8993a2415448f7dff4b2656045c62.png) center/cover no-repeat fixed;
  position: relative;
}
.auth-card {
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 32px;
  box-sizing: border-box;
  box-shadow: 0 24px 60px rgba(10,29,22,.25), 0 6px 18px rgba(10,29,22,.10);
}
.auth-card.wide { width: min(520px, 100%); }
.auth-card .auth-brand {
  text-align: center;
  margin-bottom: 18px;
}
.auth-card .auth-brand b {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--green);
}
.auth-card h1 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 6px;
  text-align: center;
}
.auth-card .auth-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
}
/* Compact 4-step indicator inside auth cards */
.auth-card .steps {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 0 0 22px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.auth-card .steps .step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.auth-card .steps .step i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef3f0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.auth-card .steps .step.active i { background: var(--green); color: #fff; }
.auth-card .steps .step.done i   { background: var(--green); color: #fff; }
.auth-card .steps .sep {
  width: 14px;
  height: 1px;
  background: var(--line);
}
/* Two-column mini grid inside auth-card for first/last name pairs */
.auth-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .auth-card .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* Signup role picker — two-option "I want to…" radio group */
.role-picker { border: 0; padding: 0; margin: 0 0 18px; }
.role-picker legend { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: .02em; padding: 0; margin-bottom: 8px; }
.role-option { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; background: #fff; }
.role-option:has(input:checked) { border-color: var(--green); background: var(--mint); box-shadow: 0 0 0 3px rgba(14,59,46,.08); }
.role-option input[type=radio] { margin-top: 4px; accent-color: var(--green); width: 16px; height: 16px; }
.role-option strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
.role-option span { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.auth-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.auth-field label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .02em;
}
.auth-field input,
.auth-field select,
.auth-field textarea {
  border: 1px solid #cfdad4;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
  background: #fff;
  font-family: inherit;
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus { border-color: var(--green); }
.auth-field textarea { resize: vertical; min-height: 80px; }
.auth-field .field-hint {
  font-size: 11px;
  color: var(--muted);
}

/* Password field with show/hide toggle. .pw-wrap positions the toggle
   inside the input's visual box on the right; the input gets right-padding
   so typed characters never sit under the toggle button. */
.pw-wrap { position: relative; }
.pw-wrap input {
  padding-right: 60px !important;      /* space for the toggle button */
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.pw-toggle:hover { color: var(--green); background: #f4f7f5; }
.pw-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Required-field marker (red *) next to the label text */
.req-mark {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
  font-size: 14px;
}

/* Soft-disabled state — the button is clickable (so we can show a helpful
   error message) but visually shows it's not fully ready. */
[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
[aria-disabled="true"]:hover { opacity: .55; }

/* Locked fulfilment chip — shown when the listing only supports one
   fulfilment mode. No dropdown to fumble with; the hidden field carries the
   value so submission always lands with a valid option. */
.fulfilment-chip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px; margin-top: 2px;
  background: var(--mint); border: 1px solid #cfe1d6;
  border-radius: 10px;
}
.fulfilment-chip strong { color: var(--green); font-size: 14px; font-weight: 700; }
.fulfilment-chip span   { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Invalid field state — red border + red label + shake on submit-fail */
.auth-field--invalid label { color: #dc2626; }
.auth-field--invalid input,
.auth-field--invalid select,
.auth-field--invalid textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
  animation: field-shake .28s ease;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Inline error message below each field (empty by default, populated by JS
   or Rails on submit failure). Only takes vertical space when it has text. */
.field-inline-error {
  display: block;
  font-size: 12px;
  color: #dc2626;
  font-weight: 600;
  margin-top: 6px;
  min-height: 0;
  line-height: 1.4;
}
.field-inline-error:empty { display: none; }

/* Server-side error summary at the top of the form. Rails ships a bare
   <ul>; we style it as an alert card so it reads clearly. */
.field-error.field-error--summary {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 14px 16px;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.5;
}
.field-error--summary strong { display: block; margin-bottom: 6px; }
.field-error--summary ul { margin: 0; padding-left: 20px; }
.field-error--summary li { margin: 3px 0; }
.auth-form-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}
.auth-form-footer a { color: var(--green); font-weight: 600; }
.auth-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
}
.auth-links a { color: var(--green); }
.auth-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  margin: 12px 0;
}
.auth-check input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-error {
  background: #fff2f1;
  border: 1px solid #efc9c7;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--red);
  margin-bottom: 14px;
}
.field-error ul { margin: 4px 0 0 14px; padding: 0; }

/* ─── Layout utilities ─── */
.split { display: grid; grid-template-columns: 1fr 360px; gap: 28px; }
.grid  { display: grid; gap: 20px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.sticky { position: sticky; top: 100px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; }
.money { font-variant-numeric: tabular-nums; }

/* Page title / subtitle (inside shell) */
.page-title    { font-family: var(--serif); font-size: clamp(38px,6vw,68px); line-height: 1.02; letter-spacing: -.035em; margin: 10px 0 16px; }
.page-subtitle { font-size: 18px; color: var(--muted); max-width: 690px; }

/* Compact page-hero variant — same design language, tighter rhythm so the
   primary content card + its submit button fit above the fold. Opt-in via
   `.shell.page-compact`. */
.shell.page-compact               { padding-top: 18px; padding-bottom: 8px; }
.shell.page-compact .page-title   { font-size: clamp(24px, 3vw, 32px); margin: 4px 0 6px; }
.shell.page-compact .page-subtitle{ font-size: 14px; max-width: 620px; line-height: 1.5; }
.shell.page-compact .kicker       { font-size: 11px; }
.shell.page-compact + .shell.page-compact { padding-top: 0; padding-bottom: 24px; }
.shell.page-compact .card         { padding: 20px; }
.shell.page-compact .card .card   { padding: 16px; }
.shell.page-compact .card .steps  { margin-bottom: 14px; }
.shell.page-compact .grid.two     { margin: 14px 0 !important; gap: 12px; }
.section-head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.section-head h2, .card h2 { font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 0; }
.section-head p { color: var(--muted); margin: 4px 0 0; }

/* Info rows */
.info-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-row:last-child { border-bottom: 0; }

/* Dashboard */
.dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { border: 0; background: none; padding: 12px 15px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; }
.tabs button.active, .tabs a.active { color: var(--green); border-bottom-color: var(--green); }
.tabs a { display: inline-block; padding: 12px 15px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; text-decoration: none; }

/* List rows */
.list     { display: grid; gap: 10px; }
.list-row { display: grid; grid-template-columns: auto 1.4fr .9fr .8fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 13px; }
.list-row img { width: 66px; height: 58px; border-radius: 9px; object-fit: cover; }

/* Steps (wizard progress) */
.steps { display: flex; align-items: center; margin: 26px 0 34px; overflow-x: auto; }
.step  { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.step i { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #e5ebe8; font-style: normal; }
.step.done, .step.active,
.step.is-done, .step.is-active { color: var(--green); }
.step.done i, .step.active i,
.step.is-done i, .step.is-active i { background: var(--green); color: #fff; }
.step.is-done i::before { content: "✓"; }
.step.is-done i { font-size: 14px; }
.step.is-active { transform: scale(1.02); }
.step + .step::before { content: ""; width: 48px; height: 1px; background: var(--line); margin: 0 10px; flex-shrink: 0; }

/* Compact rental-request header — matches the density of the admin page
   headers so the form lands inside the viewport without a giant serif banner. */
.booking-ph {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 8px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px; flex-wrap: wrap;
}
.booking-ph-crumb {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
}
.booking-ph-title {
  font-family: var(--sans); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); margin: 0; line-height: 1.2;
}
.booking-ph-subtitle {
  font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5;
  max-width: 340px; text-align: right;
}
@media (max-width: 720px) { .booking-ph-subtitle { text-align: left; max-width: 100%; } }

/* Timeline */
.timeline { position: relative; display: grid; gap: 0; margin: 26px 0; }
.timeline-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding-bottom: 24px; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 18px; width: 2px; height: 64px; background: var(--line); margin-top: 28px; }
.timeline-item i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green); font-style: normal; font-weight: 900; }
.timeline-item.active i { background: var(--green); color: #fff; }

/* Messages */
.message-layout    { display: grid; grid-template-columns: 310px 1fr; min-height: 620px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.conversation-list { border-right: 1px solid var(--line); }
.conversation      { padding: 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 10px; cursor: pointer; }
.conversation.active { background: var(--mint); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.chat              { display: grid; grid-template-rows: auto 1fr auto; }
.chat-header       { padding: 16px; border-bottom: 1px solid var(--line); }
.chat-body         { padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #fafcfb; overflow-y: auto; }
.chat-compose      { border-top: 1px solid var(--line); padding: 16px; display: flex; gap: 10px; }
.chat-compose input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.bubble    { max-width: 72%; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.bubble.me { align-self: flex-end; background: var(--green); color: #fff; border-color: var(--green); }

/* Checklists */
.checklist { display: grid; gap: 10px; margin: 18px 0; }
.checklist label { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); padding: 14px; border-radius: 11px; cursor: pointer; }
.checklist input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; }

/* Photo drop zone */
.photo-drop { border: 2px dashed #aebeb6; background: #f7faf8; border-radius: 14px; padding: 34px; text-align: center; color: var(--muted); }

/* Operator console */
.operator { background: #f1f4f2; min-height: 100vh; }

/* Responsive browse */
@media (max-width:900px) {
  .search-panel { grid-template-columns:1fr; }
  .field, .search-field { border-right:0; border-bottom:1px solid var(--line); }
  .category-strip { grid-template-columns:repeat(3,1fr); }
  .listings-grid { grid-template-columns:repeat(2,1fr); }
  .detail-layout, .split { grid-template-columns:1fr; }
  .sticky-sidebar, .sticky { position:static; }
  .kanban { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .message-layout { grid-template-columns:230px 1fr; }
  .gallery { grid-template-rows:180px 180px; }
}
@media (max-width:620px) {
  .category-strip { grid-template-columns:repeat(2,1fr); }
  .listings-grid { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr; grid-template-rows:280px; }
  .gallery img:not(:first-child) { display:none; }
  .kanban, .grid.three, .grid.two, .stats, .form-grid { grid-template-columns:1fr; }
  .message-layout { grid-template-columns:1fr; }
  .conversation-list { display:none; }
  .list-row { grid-template-columns:auto 1fr auto; }
  .page-title { font-size:43px; }
}

/* ── Search page (Sharetribe-inspired) ─────────────────────────────────── */
.search-topbar { background:var(--mint); border-bottom:1px solid var(--line); padding:14px 0; }
.search-topbar > .shell { padding:0; }
.search-topbar-form { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:8px; align-items:center; }
.search-topbar-field { position:relative; display:flex; align-items:center; min-width:0; }
.search-topbar-field input, .search-topbar-field select { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-size:14px; width:100%; height:38px; }
.search-topbar-field input:focus, .search-topbar-field select:focus { border-color:var(--green); outline:0; box-shadow:0 0 0 3px var(--mint); }
/* hide the auto Safari/Chrome "search" X since our own chips handle clearing consistently across filters */
.search-topbar-field input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-topbar-field input[type=search]::-webkit-search-decoration    { -webkit-appearance:none; }
.search-topbar-field .clear-x { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--line); color:var(--ink); font-size:12px; line-height:1; text-decoration:none; }
.search-topbar-field .clear-x:hover { background:var(--muted); color:#fff; }
.search-topbar-submit .button { min-height:38px; padding:0 18px; }

.search-body.shell { padding:24px 0 60px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }

.search-filters { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; min-width:0; box-sizing:border-box; }
.search-filters-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.search-filters-head strong { font-size:14px; letter-spacing:.02em; }
.muted-link { color:var(--muted); font-size:12px; text-decoration:underline; }
.muted-link:hover { color:var(--green); }

.filter-group { border:0; padding:0; margin:0 0 18px; min-width:0; }
.filter-group legend { font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--muted); padding:0; margin-bottom:8px; }
.filter-check { display:flex; align-items:center; gap:9px; padding:6px 4px; cursor:pointer; font-size:14px; color:var(--ink); border-radius:6px; }
.filter-check:hover { background:var(--mint); }
.filter-check input[type=checkbox] { accent-color:var(--green); width:16px; height:16px; flex:none; }
.filter-price-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; }
.filter-price-row input { min-width:0; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; box-sizing:border-box; }
.filter-price-row .muted { color:var(--muted); font-size:12px; }

.search-results { min-width:0; }
.search-results-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:14px; }
.search-results-title { font-size:20px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.search-results-summary { color:var(--muted); font-size:13px; margin:0; }
.search-sort { display:flex; align-items:center; gap:8px; white-space:nowrap; flex:none; }
.search-sort label { font-size:12px; color:var(--muted); }
.search-sort select { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:13px; }

/* Active filter chips */
.active-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.filter-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; background:var(--mint); color:var(--green); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; }
.filter-chip strong { font-weight:700; }
.filter-chip .chip-x { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; color:var(--green); font-size:12px; line-height:1; text-decoration:none; border:1px solid var(--line); }
.filter-chip .chip-x:hover { background:var(--red); color:#fff; border-color:var(--red); }
.filter-chip-clear-all { padding:5px 12px; background:#fff; color:var(--red); border:1px dashed var(--red); border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; }
.filter-chip-clear-all:hover { background:#fff4f3; }

.search-empty { text-align:center; padding:60px 32px; margin-top:16px; }
.search-empty h3 { margin:0 0 8px; }
.search-empty p { margin:0 0 20px; }

@media (max-width:900px) {
  .search-body { grid-template-columns:1fr; gap:16px; }
  .search-filters { position:static; }
  .search-topbar-form { grid-template-columns:1fr 1fr; }
  .search-topbar-submit { grid-column:1 / -1; }
  .search-topbar-submit .button { width:100%; }
}
@media (max-width:520px) {
  .search-topbar-form { grid-template-columns:1fr; }
  .search-results-head { flex-direction:column; align-items:stretch; }
}

/* ===================== Settings Page ===================== */
.settings-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

/* Sidebar */
.settings-sidebar { display: grid; gap: 14px; }
.settings-user-card { padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.settings-user-name { font-size: 15px; font-weight: 700; margin: 10px 0 2px; color: var(--ink); }
.settings-user-email { font-size: 12px; color: var(--muted); margin: 0; }
.settings-role-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--mint); color: var(--green); }

/* Avatar upload */
.avatar-upload-wrap { position: relative; display: inline-block; cursor: pointer; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.settings-avatar-img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; display: block; }
.settings-avatar-initials { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; font-size: 22px; font-weight: 800; display: grid; place-items: center; }
.avatar-upload-overlay { position: absolute; inset: 0; background: rgba(10,29,22,.55); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; opacity: 0; transition: opacity .18s; border-radius: 50%; }
.avatar-upload-wrap:hover .avatar-upload-overlay { opacity: 1; }

/* Sidebar status cards */
.settings-status-card { padding: 16px 18px; }
.settings-status-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.settings-status-row { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-verified .status-dot { background: #1a7a4e; }
.status-verified { color: #1a7a4e; }
.status-pending .status-dot { background: #b45309; }
.status-pending { color: #b45309; }
.status-unverified .status-dot { background: var(--muted); }
.status-unverified { color: var(--muted); }
.settings-status-action { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; }
.settings-status-action:hover { text-decoration: underline; }

/* Supplier CTA card */
.settings-supplier-cta { padding: 16px 18px; border-color: var(--green); background: var(--mint); }

/* Right content */
.settings-content { display: grid; gap: 20px; }
.settings-section { overflow: hidden; }
.settings-section-header { padding: 18px 24px; border-bottom: 1px solid var(--line); }
.settings-section-header h2 { font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.settings-section-body { padding: 24px; }
.settings-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-danger .settings-section-header h2 { color: var(--red); }
.settings-danger { border-color: #efc9c7; }
.field-disabled { background: #f7f7f5 !important; color: var(--muted) !important; cursor: not-allowed; }

/* ===================== Modal (dialog) ===================== */
.ap-modal { border: 0; border-radius: 18px; padding: 0; box-shadow: 0 20px 60px rgba(10,29,22,.18); max-width: 480px; width: calc(100% - 40px); }
.ap-modal::backdrop { background: rgba(10,29,22,.45); backdrop-filter: blur(3px); }
.ap-modal-inner { padding: 32px 32px 28px; position: relative; }
.ap-modal-close { position: absolute; top: 16px; right: 18px; border: 0; background: transparent; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; padding: 4px; }
.ap-modal-close:hover { color: var(--ink); }
.ap-modal-icon { font-size: 32px; margin-bottom: 14px; }
.ap-modal-icon.danger { color: var(--red); }
.ap-modal-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 8px; font-family: var(--serif); }
.ap-modal-subtitle { font-size: 14px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
.ap-modal-detail-block { background: #fafaf8; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.ap-modal-detail-heading { font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.ap-modal-detail-heading:not(:first-child) { margin-top: 14px; }
.ap-modal-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--ink); }

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-row-2 { grid-template-columns: 1fr; }
}

/* ===================== Password validation ===================== */
.pw-strength-track { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 5px; display: none; }
.pw-strength-bar { height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }
.pw-strength-label { font-size: 11px; font-weight: 700; margin: 0 0 12px; min-height: 16px; }
.pw-match-status { font-size: 12px; font-weight: 700; margin: 6px 0 0; min-height: 16px; }
.pw-match-ok  { color: #16a34a; }
.pw-match-err { color: var(--red); }

/* ===================== Modal button layout ===================== */
.ap-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.ap-modal-btn {
  width: 100%; justify-content: center;
  padding: 13px 20px;
  font-size: 15px; font-weight: 700;
  font-family: var(--sans, "Inter", sans-serif);
  border-radius: 11px; border: 2px solid var(--green);
  background: var(--green); color: #fff;
  cursor: pointer; transition: background .15s, transform .1s;
}
.ap-modal-btn:hover { background: var(--green2); border-color: var(--green2); transform: translateY(-1px); }
.ap-modal-btn-danger {
  background: #c0392b; border-color: #c0392b; color: #fff;
}
.ap-modal-btn-danger:hover { background: #a93226; border-color: #a93226; }

/* ===================== Inbox / Messages ===================== */
/* ---------- Inbox: premium sidebar + main panel ---------------------
   Full-viewport-width layout (breaks out of .shell centering) so the
   sidebar hugs the left edge and feels substantial. Sidebar has a green
   wash + marketplace-hero image; each conversation row is a white card
   floating on the branded background.
   -------------------------------------------------------------------- */
.inbox-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;                                     /* breathing room between sidebar + main */
  align-items: stretch;                           /* both columns equal height */
  padding: 24px clamp(20px, 3vw, 40px) 40px;      /* left space + bottom cushion so it doesn't hug the footer */
  max-width: 1400px;
  margin: 0 auto;
  min-height: 560px;                              /* modest floor so empty state has presence */
  background: #fbfcfb;
}

.inbox-sidebar {
  display: flex;
  flex-direction: column;
  border-radius: 14px;                            /* rounded corners for the branded panel */
  overflow: hidden;                               /* clip inner scroll to the rounded corners */
  max-height: calc(100vh - 140px);                /* cap tall lists on short viewports */
}

/* Premium branded background: green wash + hero image; text and cards stay
   readable because the wash is opaque near-black on the left. */
.inbox-sidebar--premium {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(14, 59, 46, 0.96) 0%, rgba(14, 59, 46, 0.90) 60%, rgba(21, 87, 68, 0.86) 100%),
    url(/assets/marketplace-hero-0450590df85765aa73d1e5ac06a24c5605c8993a2415448f7dff4b2656045c62.png) center/cover no-repeat;
  box-shadow: 0 12px 32px rgba(14, 59, 46, .18);
}

.inbox-sidebar-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.inbox-title {
  font-family: var(--serif);
  font-size: 28px;                       /* smaller than page-title's 44+ */
  line-height: 1.1;
  margin: 0 0 4px;
  color: #ffffff;
  letter-spacing: -.01em;
}
.inbox-subtitle {
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.5;
}

.inbox-sidebar-scroll {
  padding: 12px 12px 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;                              /* scroll inside the rounded panel, not the page */
}

/* Section headers ("AS A CUSTOMER") — pill labels on the branded bg */
.inbox-section-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: 14px 12px 8px;
  border-bottom: 0;
}

.inbox-section-empty {
  font-size: 12.5px;
  color: rgba(255,255,255,.6);           /* readable on the branded sidebar */
  padding: 10px 12px;
  margin: 0;
  font-style: italic;
}

/* Conversation rows — white cards floating on the branded sidebar */
.inbox-thread-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 4px 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  text-decoration: none;
  transition: transform .1s, background .12s, box-shadow .12s;
}
.inbox-thread-row:hover {
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  transform: translateY(-1px);
}
.inbox-thread-row--active {
  background: #ffffff;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.inbox-thread-row--active .inbox-avatar { background: var(--green2); }

.inbox-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.inbox-thread-body { flex: 1; min-width: 0; }
.inbox-thread-name    { font-size: 13px; font-weight: 700; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-thread-listing { font-size: 12px; color: var(--muted); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-thread-date    { font-size: 11px; color: var(--muted); margin: 0; }

.inbox-status-badge {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}

/* Right panel — rounded white card that pairs with the branded sidebar */
.inbox-main {
  display: flex;
  flex-direction: column;
  padding: 28px clamp(20px, 3vw, 40px);
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(23, 34, 30, .05);
}

.inbox-main--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px;
}
.inbox-empty-icon { font-size: 44px; margin-bottom: 14px; }
.inbox-empty-title { font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.inbox-empty-sub   { font-size: 14px; color: var(--muted); margin: 0 0 20px; max-width: 360px; }

/* Responsive: at ≤820px the sidebar becomes a full-width top strip
   (typical mobile inbox pattern — pick a conversation, then read). */
@media (max-width: 820px) {
  .inbox-shell {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
    min-height: auto;
  }
  .inbox-sidebar {
    max-height: 360px;                            /* cap so main is reachable without scrolling */
  }
  .inbox-sidebar-header { padding: 22px 20px 16px; }
  .inbox-title { font-size: 24px; }
  .inbox-main  { padding: 24px 20px; min-height: 320px; }
}

.inbox-thread-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.inbox-thread-header-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.inbox-thread-header-meta  { font-size: 12px; color: var(--muted); margin: 0; }

.inbox-messages-container {
  flex: 1;
  overflow-y: auto;
  background: #f7faf8;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: 480px;
}

.inbox-compose {
  display: flex;
  gap: 8px;
}

.inbox-compose-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--sans, "Inter", sans-serif);
}
.inbox-compose-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,101,52,.08); }

/* ===================== Listing Wizard ===================== */

/* Two-column layout: narrow sidebar + wide form.
   The panel card is capped at viewport height so fields scroll internally
   while the sidebar and the Next/Back action bar stay pinned. */
.lw-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Sidebar ── */
.lw-sidebar { position: sticky; top: 88px; }

.lw-nav {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 0;
  margin-bottom: 12px;
  position: relative;
}
/* Vertical connector line running down the centre of the icons */
.lw-nav::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}

.lw-step-btn {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans, "Inter", sans-serif);
  transition: background .12s;
  text-decoration: none;
  color: inherit;
}
.lw-step-btn:hover:not([data-state="locked"]) { background: var(--mint); }
.lw-step-btn[data-state="locked"] { cursor: not-allowed; }

.lw-step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  position: relative;   /* sits above the ::before track */
  z-index: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.lw-step-check { display: none; }

/* ── State: active ── */
.lw-step-btn[data-state="active"] .lw-step-icon {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(22,101,52,.12);
}
.lw-step-btn[data-state="active"] .lw-step-label {
  color: var(--charcoal); font-weight: 700;
}

/* ── State: completed ── */
.lw-step-btn[data-state="completed"] .lw-step-icon {
  background: #dcfce7;
  border-color: #86efac;
  color: #16a34a;
}
.lw-step-btn[data-state="completed"] .lw-step-num-text { display: none; }
.lw-step-btn[data-state="completed"] .lw-step-check   { display: block; }
.lw-step-btn[data-state="completed"] .lw-step-label   { color: var(--charcoal); font-weight: 600; }

/* ── State: available (persisted listing, section not yet completed) ── */
.lw-step-btn[data-state="available"] .lw-step-icon {
  background: #fff;
  border-color: var(--line);
  color: var(--charcoal);
}
.lw-step-btn[data-state="available"] .lw-step-label { color: var(--charcoal); }

/* ── State: locked ── */
.lw-step-btn[data-state="locked"] .lw-step-icon { opacity: .55; }
.lw-step-btn[data-state="locked"] .lw-step-label,
.lw-step-btn[data-state="locked"] .lw-step-sublabel { color: var(--muted); }

.lw-step-text     { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lw-step-label    { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.lw-step-sublabel { font-size: 11px; color: var(--muted); font-weight: 500; }

.lw-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--mint);
  border: 1px solid #b6dece;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--charcoal);
  line-height: 1.5;
}
.lw-notice p { margin: 0; }

/* ── Panel area ── */
.lw-panels { min-width: 0; }

/* Compact breadcrumb row above the wizard — the big serif page title
   competed with the panel header ("Step 1 of 5 · Listing details") which
   already carries all the context. This is a lean nav bar instead. */
.shell.page-compact.lw-crumbs-row              { padding-top: 12px; padding-bottom: 8px; }
.shell.page-compact.lw-crumbs-row + .shell.page-compact { padding-top: 4px; }

.lw-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}
.lw-crumb-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .1s;
}
.lw-crumb-link:hover { color: var(--green); text-decoration: underline; }
.lw-crumb-sep       { color: #cbd5e1; }
.lw-crumb-current   { color: var(--charcoal); font-weight: 700; }

/* Each panel is a card that grows to fit its content — the sidebar stays
   sticky so it's still visible if the field list is long enough to require
   page scrolling. Fields do NOT scroll internally: hiding them behind an
   inner scrollbar makes the step feel emptier than it is. */
.lw-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.shell.page-compact .lw-panel { padding: 0; }

.lw-panel-header {
  padding: 18px 26px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lw-panel-step  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin: 0 0 2px; }
.lw-panel-title { font-size: 19px; font-weight: 800; margin: 0 0 2px; }
.lw-panel-desc  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

.lw-fields {
  padding: 18px 26px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-content: start;
}

.lw-field        { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lw-field.full   { grid-column: 1 / -1; }
.lw-field--checkbox { grid-column: 1 / -1; }

.lw-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: .01em;
}
.lw-req { color: var(--red, #dc2626); font-weight: 700; }

.lw-input,
.lw-select,
.lw-textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--sans, "Inter", sans-serif);
  color: var(--charcoal);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.lw-input:focus,
.lw-select:focus,
.lw-textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,101,52,.09);
}
.lw-input--half { max-width: 220px; }
.lw-textarea    { min-height: 90px; resize: vertical; }
.lw-select      { appearance: auto; }

.lw-field-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.09) !important;
}
.lw-err-msg   { font-size: 12px; color: #dc2626; font-weight: 600; }
.lw-hint      { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* Inline-validation counter states — same base sizing as .lw-hint but colored
   so suppliers see live progress toward the min description/bundle limits. */
.lw-hint--ok     { color: #0e5c2f; font-weight: 600; }
.lw-hint--warn   { color: #b04a1a; font-weight: 600; }
.lw-hint--danger { color: #dc2626; font-weight: 700; }

/* Photo-step counter (server-rendered, no JS — mirrors the details-step
   counters visually with a tinted card behind the message). */
.lw-photo-counter {
  display: block;
  padding: 10px 14px; margin-bottom: 14px;
  border-radius: 10px; font-size: 13px;
  background: #fafbfa; border: 1px solid var(--line);
}
.lw-photo-counter.lw-hint--ok   { background: #e6f4ec; border-color: #cfe1d6; color: #0e5c2f; }
.lw-photo-counter.lw-hint--warn { background: #fef4e1; border-color: #fde7a8; color: #8b5a06; }
.lw-inline-error {
  font-size: 13px;
  color: #dc2626;
  font-weight: 600;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 6px 26px 0;
}

.lw-error-banner { margin-bottom: 16px; }
.lw-error-banner ul { margin: 8px 0 0; padding-left: 18px; }

/* ── Bundle items ── */
.lw-bundle-row {
  display: grid;
  grid-template-columns: 1fr 72px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.lw-bundle-input,
.lw-bundle-qty {
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--sans, "Inter", sans-serif);
  color: var(--charcoal);
  width: 100%;
  box-sizing: border-box;
}
.lw-bundle-input:focus,
.lw-bundle-qty:focus  { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,101,52,.09); }
.lw-bundle-remove {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lw-bundle-remove:hover { border-color: #dc2626; color: #dc2626; }

/* ── Checkbox ── */
.lw-check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
}
.lw-check-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.lw-check-label strong { display: block; font-size: 14px; }
.lw-check-label small  { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.lw-vacation-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-column: 1 / -1;
}

/* ── Info boxes ── */
.lw-info-box {
  background: var(--snow, #f8f9fa);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--charcoal);
}
.lw-info-heading { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 4px; }
.lw-info-box p { margin: 0; }

/* ── Location map ── */
.lw-map-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
}
.lw-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lw-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  gap: 6px;
  pointer-events: none;
}
.lw-map-placeholder p { margin: 0; }
.lw-map-wrap iframe[src] + .lw-map-placeholder,
.lw-map-wrap iframe:not([style*="display:none"]) + .lw-map-placeholder { display: none; }

/* ── Photo drop zone + previews with remove ── */
.lw-photo-drop {
  border: 2px dashed var(--line);
  background: #f7faf8;
  border-radius: 14px;
  padding: 26px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lw-photo-drop:hover { border-color: var(--green); background: var(--mint); }

.lw-photo-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.lw-photo-preview-wrap {
  position: relative;
  width: 92px;
  height: 92px;
}
.lw-photo-thumb {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  display: block;
}
.lw-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  text-decoration: none;
  font-family: var(--sans, "Inter", sans-serif);
}
.lw-photo-remove:hover { background: #dc2626; color: #fff; text-decoration: none; }

/* ── Availability calendar ── */
.lw-cal-wrap {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.lw-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--snow, #f8f9fa);
}
.lw-cal-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--charcoal);
}
.lw-cal-nav-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lw-cal-nav-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--charcoal);
  padding: 0;
  font-weight: 700;
}
.lw-cal-nav-btn:hover { background: var(--mint); border-color: var(--green); color: var(--green); }
.lw-cal-today-btn {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green);
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.lw-cal-today-btn:hover { background: var(--mint); }

.lw-cal-header,
.lw-cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.lw-cal-header {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.lw-cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 0;
}
.lw-cal-body {
  padding: 4px;
  gap: 2px;
  background: #fff;
}
/* Sharetribe-style compact cells: fixed short height (~64px), date top-left,
   a small colored status pill at the bottom. Available cells get a subtle
   mint tint (Google-Calendar style) so it's clear at a glance the date is free. */
.lw-cal-cell {
  min-height: 64px;
  padding: 6px 6px 5px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition: background .1s, border-color .1s;
  user-select: none;
  border: 1.5px solid #d1fae5;
  background: #f0fdf4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.lw-cal-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--charcoal);
}
.lw-cal-status {
  font-size: 10px;
  font-weight: 700;
  align-self: center;
  letter-spacing: .01em;
}
.lw-cal-status--blocked::before { content: "● "; }

.lw-cal-cell:hover:not(.lw-cal-past):not(.lw-cal-empty) {
  background: #dcfce7;
  border-color: #86efac;
}
.lw-cal-empty {
  cursor: default;
  background: transparent;
  border-color: transparent;
}
.lw-cal-past {
  color: #cbd5e1;
  cursor: default;
  background: #fafafa;
  border-color: #f1f5f9;
}
.lw-cal-past .lw-cal-num    { color: #cbd5e1; }
.lw-cal-past .lw-cal-status { color: #cbd5e1; }

/* Today marker: subtle ring around the cell + underline on the number.
   No filled circle — that would clash with the red "blocked" background. */
.lw-cal-today {
  box-shadow: 0 0 0 2px var(--green) inset;
}
.lw-cal-today .lw-cal-num {
  position: relative;
  color: var(--green);
  font-weight: 800;
}
.lw-cal-today .lw-cal-num::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.lw-cal-blocked {
  background: #fef2f2;
  border-color: #fca5a5;
}
.lw-cal-blocked .lw-cal-num    { color: #b91c1c; }
.lw-cal-blocked .lw-cal-status { color: #dc2626; }
.lw-cal-blocked:hover:not(.lw-cal-past) { background: #fee2e2; }

/* Today + blocked: keep the red cell, but recolor the today marker so it
   still reads as "today" without visual clashing. */
.lw-cal-today.lw-cal-blocked {
  box-shadow: 0 0 0 2px #b91c1c inset;
}
.lw-cal-today.lw-cal-blocked .lw-cal-num       { color: #b91c1c; }
.lw-cal-today.lw-cal-blocked .lw-cal-num::after { background: #b91c1c; }

.lw-cal-legend {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--snow, #f8f9fa);
  flex-wrap: wrap;
}
.lw-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.lw-cal-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.lw-cal-dot--available { background: #f0fdf4; border-color: #86efac; }
.lw-cal-dot--blocked   { background: #fef2f2; border-color: #fca5a5; }
.lw-cal-dot--vacation  { background: #fff7ed; border-color: #fdba74; }

/* ── Manually blocked tags ── */
.lw-blocked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lw-blocked-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 20px;
  padding: 3px 8px 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}
.lw-blocked-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(220,38,38,.15);
  color: #dc2626;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.lw-blocked-remove:hover { background: #dc2626; color: #fff; }

/* ── Exceptions dialog (native <dialog>) ── */
dialog.lw-dialog {
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  width: 400px;
  max-width: 95vw;
  background: #fff;
}
dialog.lw-dialog::backdrop { background: rgba(15,23,42,.42); }
.lw-dialog-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lw-dialog-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}
.lw-dialog-close {
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0 4px;
}
.lw-dialog-close:hover { color: var(--charcoal); }
.lw-dialog-body { padding: 16px 20px 20px; }

/* ── Navigation actions (sticky footer) ── */
.lw-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lw-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .lw-sidebar { position: static; }
  .lw-nav {
    display: flex;
    overflow-x: auto;
    padding: 8px;
    gap: 6px;
  }
  .lw-nav::before { display: none; }
  .lw-step-btn {
    flex-direction: row;
    padding: 8px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    grid-template-columns: 26px auto;
    gap: 8px;
  }
  .lw-step-sublabel { display: none; }
  .lw-notice { display: none; }
  .lw-fields {
    grid-template-columns: 1fr;
    padding: 16px 18px 4px;
  }
  .lw-panel-header,
  .lw-actions { padding-left: 18px; padding-right: 18px; }
  .lw-input--half { max-width: 100%; }
  .lw-vacation-dates { grid-template-columns: 1fr; }
}

/* ===================== My Listings — Sharetribe-style grid ===================== */

.my-listings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.my-listings-title {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  margin: 0;
  color: var(--charcoal);
}

.my-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 24px;
}

.listing-tile {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  min-width: 0;
}

/* Hero image container */
.listing-tile-hero {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #eef2f0;
  aspect-ratio: 4/3;
  width: 100%;
}
.listing-tile-photo-link {
  display: block;
  width: 100%;
  height: 100%;
}
.listing-tile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.listing-tile-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  font-size: 48px;
  color: var(--muted);
  text-decoration: none;
}
.listing-tile-icon { font-size: 56px; }

/* Draft: no photo — placeholder with call-to-action inside */
.listing-tile-draft-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  gap: 12px;
  background: #eef2f0;
}
.listing-tile-draft-body p {
  margin: 0;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
}
.listing-tile-discard {
  color: var(--muted);
  text-decoration: underline;
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.listing-tile-discard:hover { color: #dc2626; }

/* Draft WITH photo: dim overlay carrying the CTAs */
.listing-tile-draft-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  gap: 10px;
  backdrop-filter: blur(2px);
}
.listing-tile-draft-overlay p {
  margin: 0;
  font-size: 13px;
  color: var(--charcoal);
}

/* Status pill (top-right) */
.listing-tile-status {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  color: var(--charcoal);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.listing-tile-status--live         { background: #dcfce7; color: #16a34a; }
.listing-tile-status--submitted,
.listing-tile-status--in_review    { background: #dbeafe; color: #1d4ed8; }
.listing-tile-status--returned,
.listing-tile-status--rejected     { background: #fee2e2; color: #dc2626; }
.listing-tile-status--deactivated  { background: #f1f5f9; color: #64748b; }
.listing-tile-status--suspended    { background: #fef3c7; color: #b45309; }

/* Body: price, title, links */
.listing-tile-body { padding-top: 10px; }
.listing-tile-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 4px;
}
.listing-tile-price-empty { color: var(--muted); font-weight: 600; }
.listing-tile-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 8px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing-tile-name-link {
  color: inherit;
  text-decoration: none;
}
.listing-tile-name-link:hover { color: var(--green); }
.listing-tile-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.listing-tile-link {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.listing-tile-link:hover { color: var(--charcoal); }
.listing-tile-link--strong { font-weight: 700; }
.listing-tile-sep { color: #cbd5e1; }

/* Empty state */
.my-listings-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}
.my-listings-empty h2 {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: 24px;
  color: var(--charcoal);
  margin: 0 0 8px;
}
.my-listings-empty p { margin: 0 0 20px; }

.pagy-wrap { display:flex; justify-content:center; margin-top:32px; }

/* ===================== Sharetribe-style photo tile grid ===================== */

.lw-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.lw-photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f5;
  border: 1.5px solid var(--line);
}
.lw-photo-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lw-photo-tile-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: var(--sans, "Inter", sans-serif);
}
.lw-photo-tile-remove:hover { background: #dc2626; color: #fff; text-decoration: none; }

/* Add-photo tile — dashed border, centered content, whole tile clickable */
.lw-photo-tile-add {
  background: #f7faf8;
  border: 2px dashed var(--line);
  transition: border-color .15s, background .15s;
  padding: 0;
  margin: 0;
}
.lw-photo-tile-add:hover {
  border-color: var(--green);
  background: var(--mint);
}
.lw-photo-tile-add-label {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 12px;
  text-align: center;
}
.lw-photo-tile-add-icon {
  font-size: 32px;
  color: var(--green);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 4px;
}
.lw-photo-tile-add-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal);
}
.lw-photo-tile-add-hint {
  font-size: 11px;
  color: var(--muted);
}

/* ===================== Supplier setup banner ===================== */

.supplier-setup-banner {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #78350f;
  font-size: 13px;
}
.supplier-setup-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  flex-wrap: wrap;
}
.supplier-setup-banner-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.supplier-setup-banner-lead strong { font-weight: 700; }
.supplier-setup-banner-sub {
  color: #92400e;
  margin-left: 6px;
  opacity: .9;
}
.supplier-setup-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #78350f;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1.5px solid #b45309;
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .1s, border-color .1s;
}
.supplier-setup-banner-cta:hover { color: #451a03; border-bottom-color: #451a03; }

@media (max-width: 640px) {
  .supplier-setup-banner-sub { display: none; }
}

/* Dropdown badge (unfinished setup count) */
.profile-dropdown-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===================== Supplier listing detail view ===================== */

/* Owner-view row: breadcrumb + primary actions */
.listing-owner-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.listing-owner-bar-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--charcoal);
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  flex-wrap: wrap;
}
.listing-owner-bar-view {
  font-size: 12.5px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.listing-owner-bar-link {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
}
.listing-owner-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Two-column layout: main content + sticky sidebar */
.listing-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.listing-detail-main { min-width: 0; }

.listing-detail-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Gallery */
.listing-gallery { margin-bottom: 20px; }
.listing-gallery-hero-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f5;
  aspect-ratio: 4/3;   /* closer-to-square frame: minimal cropping for typical listing photos */
}
.listing-gallery-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the frame edge-to-edge — no letterbox */
  object-position: center;
  display: block;
  cursor: zoom-in;
}
.listing-gallery-viewall {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--charcoal);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  font-family: var(--sans, "Inter", sans-serif);
  transition: background .1s, transform .05s;
}
.listing-gallery-viewall:hover { background: var(--mint); }
.listing-gallery-viewall:active { transform: scale(.98); }

/* Small thumb strip left-aligned below the hero — Sharetribe-style */
.listing-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.listing-gallery-thumb {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  cursor: zoom-in;
  transition: opacity .1s, border-color .1s;
  background: #f4f6f5;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.listing-gallery-thumb:hover {
  opacity: .9;
  border-color: var(--green);
}
.listing-gallery-more {
  width: 88px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  font-family: var(--sans, "Inter", sans-serif);
  flex-shrink: 0;
}
.listing-gallery-more:hover { background: #e2e8f0; }

/* ── Lightbox ── */
dialog.photo-lightbox {
  border: 0;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  padding: 0;
  width: min(96vw, 1400px);
  height: min(94vh, 900px);
  max-width: none;
  max-height: none;
  border-radius: 14px;
}
dialog.photo-lightbox::backdrop { background: rgba(0,0,0,.75); }

.photo-lightbox-stage {
  position: absolute;
  inset: 0;
  padding: 44px 72px 56px;
}
.photo-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* scale up small images to fill the stage; keep aspect ratio */
  border-radius: 6px;
}
.photo-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .1s;
}
.photo-lightbox-close:hover { background: rgba(255,255,255,.3); }

.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  padding-bottom: 4px;
  transition: background .1s;
}
.photo-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.photo-lightbox-nav--prev { left: 14px; }
.photo-lightbox-nav--next { right: 14px; }

.photo-lightbox-caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
}
.listing-gallery-empty {
  aspect-ratio: 16/9;
  background: var(--mint);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  margin-bottom: 24px;
}
.listing-gallery-empty p { margin: 0; font-weight: 600; }

/* Page-header row: title/badges/price on the left, primary actions on the right */
.listing-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.listing-detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.listing-detail-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 2px;   /* aligns visually with the badge row */
}

/* Legacy title block (kept for other pages that reference it) */
.listing-detail-title-block { margin-bottom: 22px; }
.listing-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
.listing-detail-title {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--charcoal);
  line-height: 1.15;
}
.listing-detail-price {
  margin: 0;
  font-size: 18px;
}
.listing-detail-price strong { color: var(--green); font-weight: 800; }
.listing-detail-price-unit { color: var(--muted); font-size: 14px; margin-left: 4px; }

/* Status badge colors (semantic per listing state) */
.badge.status-live         { background: #dcfce7; color: #15803d; }
.badge.status-draft        { background: #fef9c3; color: #a16207; }
.badge.status-submitted,
.badge.status-in_review    { background: #dbeafe; color: #1d4ed8; }
.badge.status-returned,
.badge.status-rejected     { background: #fee2e2; color: #b91c1c; }
.badge.status-deactivated  { background: #f1f5f9; color: #475569; }
.badge.status-suspended    { background: #fef3c7; color: #b45309; }

/* Detail cards */
.detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.detail-card--warning {
  background: #fffbeb;
  border-color: #fde68a;
}
.detail-card-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--charcoal);
}
.detail-card-lede {
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 12px;
}
.detail-card-body {
  color: var(--ink);
  line-height: 1.65;
  font-size: 14.5px;
}
.detail-card-body p:first-child { margin-top: 0; }
.detail-card-body p:last-child  { margin-bottom: 0; }

/* Bundle items list */
.bundle-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bundle-item-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}
.bundle-item-qty {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--green);
  padding: 2px 8px;
  background: var(--mint);
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
}
.bundle-item-name { font-weight: 700; font-size: 14px; color: var(--charcoal); }
.bundle-item-notes { color: var(--muted); font-size: 13px; font-style: italic; }

/* Key-value details table */
.detail-kv { margin: 0; }
.detail-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.detail-kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-kv-row dt { color: var(--muted); font-weight: 600; }
.detail-kv-row dd { margin: 0; font-weight: 700; color: var(--charcoal); text-align: right; }
.detail-kv-address { font-size: 12.5px; font-weight: 600; }

/* Submission gate list */
.gate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gate-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--charcoal);
}
.gate-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
}
.gate-done .gate-mark  { background: #dcfce7; color: #15803d; }
.gate-todo .gate-mark  { background: #fef3c7; color: #b45309; border: 1.5px solid #fde68a; }
.gate-done > span:nth-child(2) { color: var(--charcoal); }
.gate-todo > span:nth-child(2) { color: var(--charcoal); }
.gate-action {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Performance stats block */
.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.detail-stat-num {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: 26px;
  font-weight: 800;
  color: var(--charcoal);
}
.detail-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.detail-rating {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}
.detail-rating-stars { color: #f59e0b; font-size: 16px; }
.detail-rating-hint { color: var(--muted); font-size: 13px; }

/* Responsive */
@media (max-width: 900px) {
  .listing-detail-layout {
    grid-template-columns: 1fr;
  }
  .listing-detail-side { position: static; }
  .listing-owner-bar { flex-direction: column; align-items: stretch; }
  .listing-owner-bar-actions { justify-content: flex-start; }
}

/* ===================== Marketplace listing show — owner banner ===================== */

.own-listing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.own-listing-banner-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--charcoal);
  font-size: 13.5px;
  font-weight: 600;
}
.own-listing-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================== "About the supplier" card ===================== */

.supplier-card {
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
  transition: box-shadow .15s;
}
.supplier-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.supplier-card-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--charcoal);
}

.supplier-about {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.supplier-about-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mint);
}
.supplier-about-avatar--initials {
  display: grid;
  place-items: center;
  color: var(--green);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .02em;
}
.supplier-about-body { min-width: 0; flex: 1; }
.supplier-about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.supplier-about-header-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.supplier-about-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.supplier-about-name { font-size: 16px; color: var(--charcoal); font-weight: 800; }
.supplier-about-bio {
  color: var(--ink);
  font-size: 13.5px;
  margin: 8px 0 0;
  line-height: 1.6;
}
.supplier-about-bio--muted { color: var(--muted); }
.supplier-about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.supplier-about-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.supplier-about-chip svg { color: var(--muted); }
.supplier-about-sep { margin: 0 6px; color: #cbd5e1; }
.supplier-about-actions { margin-top: 10px; }

/* ===================== Public supplier profile page ===================== */

.supplier-profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}
.supplier-profile-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  position: sticky;
  top: 96px;
}
.supplier-profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 4px;
  background: var(--mint);
}
.supplier-profile-avatar--initials {
  display: grid;
  place-items: center;
  color: var(--green);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: .02em;
}
.supplier-profile-name {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.2;
}
.supplier-profile-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.supplier-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.supplier-profile-stat-num {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1;
}
.supplier-profile-stat-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-top: 4px;
}

.supplier-profile-main { min-width: 0; }

/* Listings grid on profile */
.supplier-profile-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.supplier-profile-listing {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s, box-shadow .12s;
}
.supplier-profile-listing:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.supplier-profile-listing-hero { aspect-ratio: 4/3; background: #f4f6f5; }
.supplier-profile-listing-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.supplier-profile-listing-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 36px; color: var(--muted);
}
.supplier-profile-listing-body { padding: 10px 12px; }
.supplier-profile-listing-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  margin: 0;
}
.supplier-profile-listing-price span {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
}
.supplier-profile-listing-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 4px 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.supplier-profile-listing-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .supplier-profile-layout { grid-template-columns: 1fr; }
  .supplier-profile-card { position: static; }
}

/* ===================== Similar listings section ===================== */
.similar-listings { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.similar-listings-title {
  font-family: var(--serif, "Playfair Display", serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--charcoal);
}
.similar-listings-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.similar-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.similar-listing {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s, box-shadow .12s;
}
.similar-listing:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.similar-listing-hero { aspect-ratio: 4/3; background: #f4f6f5; }
.similar-listing-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.similar-listing-placeholder { display: grid; place-items: center; height: 100%; font-size: 40px; color: var(--muted); }
.similar-listing-body { padding: 10px 12px; }
.similar-listing-price { font-size: 13px; font-weight: 800; color: var(--green); margin: 0; }
.similar-listing-price span { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.similar-listing-title {
  font-size: 14px; font-weight: 700; color: var(--charcoal); margin: 4px 0 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.similar-listing-meta { font-size: 11.5px; color: var(--muted); margin: 0; }

/* ===================== "No photo" placeholder (shared) ===================== */
.listing-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #94a3b8;
  border-radius: inherit;
}
.listing-no-image svg { opacity: .8; }
.listing-no-image p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #64748b;
}
/* Hero variant on the listing show page — capped so it doesn't dominate
   the viewport when a listing has no photos. Matches the aspect frame of
   the real photo hero. */
.listing-no-image--hero {
  aspect-ratio: 16 / 10;
  max-height: 360px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.listing-no-image--hero p { font-size: 14px; }
.listing-no-image--hero svg { width: 56px; height: 56px; }

/* Card variant — used on browse tiles + saved listings + supplier profile grid.
   Matches the 240px listing-card image slot so cards align across the grid. */
.listing-no-image--card {
  width: 100%;
  height: 240px;
  border-radius: 0;
}

/* Header "Post a new listing" CTA for suppliers */
.header-post-listing {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .header-post-listing span,
  .header-post-listing { padding-left: 10px; padding-right: 10px; }
}

/* ===================== Shared avatar (initials + person-icon fallback) ===================== */
.avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: var(--green);
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.avatar--initials { letter-spacing: .01em; }
.avatar--icon {
  color: #94a3b8;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.avatar--icon svg {
  width: 55%;
  height: 55%;
}

/* =========================================
   Admin console layout
   ========================================= */
.admin-body { background: #f6f7f5; margin: 0; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.admin-sidebar {
  /* Background image applied inline in the layout so `asset_path` works.
     Dark overlay + text colors below make nav items readable over any hero. */
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 18px 10px 24px;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
}
/* Text + hover states for the dark sidebar */
.admin-sidebar .admin-brand { color: #fff; border-bottom-color: rgba(255,255,255,.10); }
.admin-sidebar .admin-brand small { color: rgba(255,255,255,.55); }
.admin-sidebar .admin-nav-section { color: rgba(255,255,255,.45); }
.admin-sidebar .admin-nav-item { color: rgba(255,255,255,.82); }
.admin-sidebar .admin-nav-icon  { color: rgba(255,255,255,.55); }

.admin-sidebar .admin-nav-item:hover {
  background: rgba(255,255,255,.08); color: #fff;
}
.admin-sidebar .admin-nav-item:hover .admin-nav-icon { color: #fff; }

.admin-sidebar .admin-nav-item.is-active {
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
.admin-sidebar .admin-nav-item.is-active::before {
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.admin-sidebar .admin-nav-item.is-active:hover { background: rgba(255,255,255,.24); }
.admin-sidebar .admin-nav-item.is-active .admin-nav-icon { color: #fff; }

/* Default badge stays sand-on-ink; the active variant keeps its ghost look */
.admin-sidebar .admin-nav-badge { background: rgba(255,255,255,.20); color: #fff; }
.admin-sidebar .admin-nav-badge.attention { background: var(--amber); color: #fff; }
.admin-sidebar .admin-nav-badge.danger    { background: var(--red);   color: #fff; }
.admin-sidebar .admin-nav-item.is-active .admin-nav-badge { background: rgba(255,255,255,.30); }

/* Slim scrollbar so it doesn't split the hero image */
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.20); border-radius: 3px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
/* Scrollbar polish so the pattern isn't split by a chunky bar */
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(14,59,46,.15); border-radius: 3px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(14,59,46,.28); }
.admin-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 16px;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  transition: transform .12s;
}
.admin-brand:hover { transform: translateX(1px); }
.admin-brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.admin-brand small {
  display: block; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}

.admin-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.admin-nav-section {
  padding: 16px 12px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}

/* Nav items — icon + label + optional badge, left-side accent bar on hover/active */
.admin-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  text-decoration: none; border-radius: 10px;
  transition: background .18s ease, color .18s ease, transform .12s ease, padding-left .18s ease;
}
.admin-nav-item::before {
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 3px; height: 0; border-radius: 3px;
  background: var(--green); transform: translateY(-50%);
  transition: height .18s ease, opacity .18s ease;
  opacity: 0;
}
.admin-nav-item:hover {
  background: rgba(233,242,238,.7); color: var(--green);
  padding-left: 18px;
}
.admin-nav-item:hover::before { height: 18px; opacity: .5; }

.admin-nav-item.is-active {
  background: var(--green); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(14,59,46,.20);
}
.admin-nav-item.is-active::before {
  height: 22px; opacity: 1; background: #fff; left: -6px;
  box-shadow: 0 0 0 3px rgba(14,59,46,.15);
}
.admin-nav-item.is-active:hover {
  background: var(--green2); color: #fff; padding-left: 14px;
}
.admin-nav-item.is-active .admin-nav-icon { color: #fff; }

.admin-nav-icon {
  flex-shrink: 0; width: 18px; height: 18px;
  color: var(--muted);
  transition: color .18s ease, transform .12s ease;
}
.admin-nav-item:hover .admin-nav-icon { color: var(--green); transform: scale(1.08); }
.admin-nav-item span { flex: 1; }

/* Attention badges next to the label */
.admin-nav-badge {
  min-width: 20px; height: 18px; padding: 0 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--sand); color: var(--ink);
  transition: transform .12s ease;
}
.admin-nav-badge.attention { background: var(--amber); color: #fff; }
.admin-nav-badge.danger    { background: var(--red);   color: #fff; }
.admin-nav-item.is-active .admin-nav-badge {
  background: rgba(255,255,255,.25); color: #fff;
}
.admin-nav-item:hover .admin-nav-badge { transform: scale(1.06); }

/* Sidebar footer — sticky user chip */
.admin-sidebar-footer {
  position: sticky; bottom: 0;
  margin: 12px -10px 0; padding: 12px 10px;
  background: linear-gradient(180deg, rgba(247,248,246,0) 0%, #f7f8f6 40%);
  border-top: 1px solid var(--line);
}
.admin-sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .12s;
}
.admin-sidebar-user:hover { border-color: var(--green); }
.admin-sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  overflow: hidden; flex-shrink: 0;
}
.admin-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-sidebar-user-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.admin-sidebar-user-info strong {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.admin-sidebar-user-info small {
  font-size: 10px; color: var(--green); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.admin-topbar-env {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
.admin-topbar-actions { display: flex; align-items: center; gap: 16px; }
.admin-topbar-link {
  font-size: 13px; font-weight: 600;
  color: var(--green); text-decoration: none;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--line);
}
.admin-topbar-link:hover { background: var(--mint); }

.admin-content {
  flex: 1; padding: 28px; min-width: 0;
  /* Headroom so absolutely-positioned popovers on the last table row don't get
     clipped at the viewport edge — the user can scroll to reveal them. */
  padding-bottom: 120px;
}
/* Reset legacy .operator wrapper padding when nested in admin layout */
.admin-content .operator { background: transparent; min-height: auto; }
.admin-content .operator .shell { padding-left: 0; padding-right: 0; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .admin-content { padding: 20px; }
}

/* =========================================
   Admin console — sign-in page
   ========================================= */
.admin-auth-body {
  /* Fallback in case the inline background image fails to load (Sprockets/deploy). */
  background: linear-gradient(135deg, #0e3b2e 0%, #17231f 100%);
  min-height: 100vh; margin: 0;
  font-family: var(--sans);
}
.admin-auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 32px 20px;
}
/* Flash bars are designed for full-width layout headers; reshape them to sit
   above the sign-in card as narrow, centered pills. */
.admin-auth-shell .flash-notice,
.admin-auth-shell .flash-alert {
  width: 100%; max-width: 420px;
  border: 1px solid transparent; border-bottom: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(10,29,22,.05);
}
.admin-auth-shell .flash-alert { border-color: #efc9c7; }
.admin-auth-shell .flash-notice { border-color: #cfe1d6; }
/* Flash pills need their own subtle backdrop when the page background is a
   dark image — otherwise the mint/red bar looks washed out against green. */
.admin-auth-shell .flash-notice,
.admin-auth-shell .flash-alert {
  backdrop-filter: blur(2px);
}
.admin-auth-card {
  width: 100%; max-width: 420px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 32px 28px;
  /* Stronger shadow so the card lifts off the tinted hero background. */
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.18);
}
.admin-auth-brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.admin-auth-brand b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.admin-auth-brand small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.admin-auth-card h1 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
.admin-auth-subtitle { color: var(--muted); font-size: 14px; margin: 0 0 24px; line-height: 1.5; }
.admin-auth-footer {
  text-align: center; font-size: 13px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* =========================================
   Admin console — modern UI kit
   Compact, sans-serif, control-panel aesthetic.
   ========================================= */

/* Reset legacy .kicker + .page-title inside admin content */
.admin-content .kicker,
.admin-content .page-title,
.admin-content .page-subtitle { display: none; }
/* .shell + .stats + .operator are marketplace-layout wrappers. When any admin
   view still uses them, strip their outer padding/background so the console's
   own 28px padding isn't compounded into a giant empty band up top. */
.admin-content .shell,
.admin-content .shell.page-compact,
.admin-content .operator {
  width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; min-height: 0 !important;
}
.admin-content .card:not(.admin-card) {
  border-radius: 12px;
}

/* Page header */
.admin-ph {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-ph-info {
  min-width: 0; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.admin-ph-back {
  order: -2; width: 100%;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-decoration: none; margin-bottom: 2px;
}
.admin-ph-back:hover { color: var(--green); }
.admin-ph-crumb {
  order: -1; width: 100%;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 0;
}
.admin-ph-title {
  font-family: var(--sans); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); margin: 0;
  line-height: 1.2;
}
.admin-ph-count {
  display: inline-flex; align-items: center;
  padding: 2px 10px; font-size: 12px; font-weight: 700;
  border-radius: 999px;
  background: var(--mint); color: var(--green);
}
.admin-ph-subtitle {
  font-size: 13px; color: var(--muted); margin: 0;
  line-height: 1.4;
}
.admin-ph-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  flex-wrap: wrap;
}

/* Sharetribe-style search bar (pill with icon) */
.admin-search {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.admin-search-input {
  flex: 1; display: flex; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 16px;
  transition: border-color .12s, box-shadow .12s;
}
.admin-search-input:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14,59,46,.10);
}
.admin-search-input svg { color: var(--muted); flex-shrink: 0; }
.admin-search-input input[type="search"] {
  border: 0; outline: 0; background: transparent;
  padding: 11px 12px; font-size: 14px; font-family: var(--sans);
  color: var(--ink); flex: 1; min-width: 0;
}
.admin-search-input input[type="search"]::placeholder { color: var(--muted); }
.admin-search-select {
  padding: 10px 14px; font-size: 13px; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .12s;
}
.admin-search-select:focus,
.admin-search-select:hover {
  outline: none; border-color: var(--green);
}
.admin-search-btn { padding: 10px 18px; border-radius: 999px; }

/* Filter tabs (Booking status, Listing status, etc.) */
.admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-radius: 8px; transition: background .12s, color .12s;
  font-family: var(--sans);
}
.admin-tab:hover { background: var(--mint); color: var(--green); }
.admin-tab.is-active { background: var(--green); color: #fff; }

/* Notification bell (admin topbar) */
.notif-menu { position: relative; }
.notif-menu[open] .notif-panel { display: block; }
.notif-bell {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  list-style: none;
}
.notif-bell::-webkit-details-marker { display: none; }
.notif-bell:hover { background: var(--mint); color: var(--green); border-color: var(--green); }
.notif-menu[open] .notif-bell { background: var(--mint); border-color: var(--green); color: var(--green); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  border-radius: 9px; display: grid; place-items: center;
  border: 2px solid #fff;
  transition: transform .15s ease;
}
/* Fires when a live notification arrives (Stimulus toggles the class briefly) */
.notif-menu--pulse .notif-bell   { animation: notif-shake .8s ease; }
.notif-menu--pulse .notif-badge  { transform: scale(1.2); }
@keyframes notif-shake {
  0%,100% { transform: rotate(0); }
  15%     { transform: rotate(-8deg); }
  30%     { transform: rotate(8deg); }
  45%     { transform: rotate(-6deg); }
  60%     { transform: rotate(6deg); }
  75%     { transform: rotate(-3deg); }
  90%     { transform: rotate(3deg); }
}

.notif-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  width: 360px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(10,29,22,.14);
  overflow: hidden; z-index: 100;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.notif-panel-header strong { font-size: 14px; }
.notif-mark-read {
  background: none; border: 0; padding: 0;
  color: var(--green); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
}
.notif-mark-read:hover { text-decoration: underline; }
.notif-list { max-height: 400px; overflow-y: auto; }
/* Applies to both <a> and the <button> that button_to renders. Reset button
   defaults so it looks like the previous plain-link row. */
.notif-item {
  display: block; padding: 12px 16px;
  width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  text-decoration: none; color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background .12s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: #fafbfa; }
.notif-item.is-unread { background: rgba(233,242,238,.5); }
.notif-item strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.notif-item span   { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.notif-item time   { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; margin: 0; }

/* Notifications index page rows */
.notif-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row.is-unread { background: rgba(233,242,238,.4); }
.notif-row-body strong { font-size: 14px; }
.notif-row-body p { margin: 4px 0 6px; font-size: 13px; color: var(--muted); }
.notif-row-body small { font-size: 12px; color: var(--muted); }
.notif-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Listing review action card (admin listing show page) */
.admin-review-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--mint) 0%, #dfeee6 100%);
  border: 1px solid #cfe1d6; border-radius: 14px;
  flex-wrap: wrap;
}
.admin-review-info { display: flex; flex-direction: column; gap: 4px; }
.admin-review-badge {
  display: inline-block; width: fit-content;
  padding: 3px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--green); color: #fff; border-radius: 999px;
}
.admin-review-info p { margin: 0; font-size: 13px; color: var(--ink); }
.admin-review-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin modal (HTML5 dialog) */
.admin-modal {
  border: 0; border-radius: 16px; padding: 0;
  width: 100%; max-width: 480px;
  box-shadow: 0 30px 60px rgba(10,29,22,.25);
  background: #fff;
}
.admin-modal::backdrop {
  background: rgba(10,29,22,.55);
  backdrop-filter: blur(2px);
}
.admin-modal-inner {
  padding: 32px 28px 24px;
  position: relative;
  font-family: var(--sans);
}
.admin-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.admin-modal-close:hover { background: var(--mint); color: var(--green); }
.admin-modal-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
  font-size: 26px; font-weight: 800;
}
.admin-modal-icon.success { background: #e6f4ec; color: #0e5c2f; }
.admin-modal-icon.warning { background: #fef4e1; color: #8b5a06; }
.admin-modal-icon.danger  { background: #fee6e4; color: #8a3735; }
.admin-modal h2 {
  margin: 0 0 8px; text-align: center;
  font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.admin-modal-subtitle {
  margin: 0 0 20px; text-align: center;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
.admin-modal-subtitle strong { color: var(--ink); }
.admin-modal-form { display: flex; flex-direction: column; gap: 8px; }
.admin-modal-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.admin-modal-form input,
.admin-modal-form select,
.admin-modal-form textarea {
  padding: 10px 14px; font-size: 14px; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); width: 100%; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.admin-modal-form input:focus,
.admin-modal-form select:focus,
.admin-modal-form textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14,59,46,.10);
}
.admin-modal-form textarea { resize: vertical; min-height: 80px; }
.admin-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Kanban queue */
.admin-kanban {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1100px) { .admin-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .admin-kanban { grid-template-columns: 1fr; } }
.admin-kanban-col {
  background: #fafbfa; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 8px; border-bottom: 1px solid var(--line);
}
.admin-kanban-col-header h3 {
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--ink); letter-spacing: .01em;
}
.admin-kanban-card {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  text-decoration: none; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.admin-kanban-card:hover { border-color: var(--green); box-shadow: 0 4px 12px rgba(10,29,22,.06); }
.admin-kanban-card strong { font-size: 13px; font-weight: 600; }
.admin-kanban-card span { font-size: 12px; color: var(--muted); }

/* Stats row (Payouts, Dashboard, etc.) */
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1000px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.admin-stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-stat span {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.admin-stat strong {
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-family: var(--sans); letter-spacing: -.01em;
}

/* Admin forms (New/Edit pages) */
.admin-form { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.admin-form-error {
  padding: 14px 18px; border-radius: 10px;
  background: #fee6e4; border: 1px solid #f5b7b3; color: #8a3735;
}
.admin-form-error ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.admin-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 720px) { .admin-form-grid { grid-template-columns: 1fr; } }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field-full { grid-column: 1 / -1; }
.admin-field label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-field input[type="search"],
.admin-field input[type="email"],
.admin-field textarea,
.admin-field select {
  padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-family: var(--sans);
  transition: border-color .12s, box-shadow .12s;
}
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14,59,46,.10);
}
.admin-hint {
  font-size: 12px; color: var(--muted);
}

/* Emoji picker */
.admin-emoji-picker { display: flex; flex-direction: column; gap: 10px; }
.admin-emoji-picker-input {
  font-size: 20px !important;
  text-align: center;
  letter-spacing: 2px;
}
.admin-emoji-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
}
@media (max-width: 720px) { .admin-emoji-grid { grid-template-columns: repeat(6, 1fr); } }
.admin-emoji-btn {
  aspect-ratio: 1; font-size: 22px;
  background: #fafbfa; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, border-color .12s, transform .05s;
}
.admin-emoji-btn:hover {
  background: var(--mint); border-color: var(--green);
}
.admin-emoji-btn:active { transform: scale(0.94); }

/* Fixed checkbox layout — checkbox left, label right, inline */
.admin-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fafbfa; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.admin-checkbox:hover { background: var(--mint); border-color: var(--green); }
.admin-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--green); flex-shrink: 0;
}
.admin-checkbox span {
  display: flex; flex-direction: column; gap: 2px;
}
.admin-checkbox strong {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.admin-checkbox small {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
/* Hidden Rails-generated helper input for the checkbox shouldn't take a slot. */
.admin-checkbox input[type="hidden"] { display: none; }

/* Sticky form action bar */
.admin-form-actions {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 0 24px;
}

/* Cards */
.admin-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10,29,22,.03);
}
.admin-card + .admin-card { margin-top: 16px; }
.admin-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  gap: 12px;
}
.admin-card-header h2 {
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.admin-detail-card { padding: 0; }
.admin-detail-card > *:not(.admin-card-header) { padding: 16px 20px; }
.admin-detail-card > *:not(.admin-card-header):not(:last-child) {
  border-bottom: 1px solid var(--line);
}

/* Description list */
.admin-dl { margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-dl > div {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  gap: 12px;
}
.admin-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-dl > div:first-child { padding-top: 0; }
.admin-dl dt {
  font-size: 13px; color: var(--muted); font-weight: 500;
}
.admin-dl dd {
  font-size: 14px; color: var(--ink); font-weight: 600;
  margin: 0; text-align: right;
}

/* Filter bar */
.admin-filters { padding: 16px 20px; margin-bottom: 20px; }
.admin-filters-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.admin-filter { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.admin-filter label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.admin-filter input,
.admin-filter select {
  padding: 8px 12px; font-size: 13px; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
  transition: border-color .12s;
}
.admin-filter input:focus,
.admin-filter select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14,59,46,.12);
}
.admin-filter-actions {
  flex-direction: row; align-items: center; gap: 8px;
  min-width: auto;
}

/* Buttons */
.admin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s, color .12s;
  line-height: 1.2;
}
.admin-btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.admin-btn-primary:hover { background: var(--green2); border-color: var(--green2); }
.admin-btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.admin-btn-ghost:hover { background: var(--mint); border-color: var(--green); color: var(--green); }
.admin-btn-ghost-danger { color: var(--red); }
.admin-btn-ghost-danger:hover { background: #fef2f2; border-color: var(--red); color: var(--red); }
.admin-btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.admin-btn-danger:hover { background: #8a3735; border-color: #8a3735; }
.admin-btn-warning { background: var(--amber); color: #fff; border-color: var(--amber); }
.admin-btn-warning:hover { background: #9a6415; border-color: #9a6415; }

/* Chips */
.admin-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; font-size: 11px; font-weight: 700;
  border-radius: 999px; letter-spacing: .02em;
  background: var(--mint); color: var(--green);
  margin-right: 4px;
}
.admin-chip:last-child { margin-right: 0; }
.admin-chip-success { background: #e6f4ec; color: #0e5c2f; }
.admin-chip-warning { background: #fef4e1; color: #8b5a06; }
.admin-chip-danger { background: #fee6e4; color: #8a3735; }
.admin-chip-muted { background: #eef1ef; color: var(--muted); }

/* Table
   Intentionally NOT setting overflow-x here — any non-`visible` overflow value
   promotes overflow-y to auto too, which clips the row action dropdown at the
   table edge. If horizontal scroll is ever needed for wide tables, wrap the
   <table> in an inner scroll container and keep the dropdown outside it. */
.admin-table-wrap { overflow: visible; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table thead th {
  padding: 12px 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  text-align: left; background: #fafbfa;
  border-bottom: 1px solid var(--line);
}
.admin-table tbody td {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: #fafbfa; }
.admin-table-inline { border-radius: 0; }
.admin-table-inline thead th { background: transparent; padding: 8px 0; }
.admin-table-inline tbody td { padding: 10px 0; }
.admin-cell-muted { color: var(--muted); font-size: 13px; }
.admin-cell-right { text-align: right; }
.admin-table-actions-col { width: 56px; text-align: right; }

/* User cell (avatar + name/email) */
.admin-user-cell { display: flex; align-items: center; gap: 12px; }
.admin-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--green); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  flex-shrink: 0;
}
.admin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-cell-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-user-cell-info strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.admin-user-cell-info span { font-size: 12px; color: var(--muted); }

/* Row-level menu */
.admin-row-menu { position: relative; display: inline-block; }
.admin-row-menu > summary {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--muted); cursor: pointer;
  list-style: none; border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.admin-row-menu > summary::-webkit-details-marker { display: none; }
.admin-row-menu > summary:hover { background: var(--mint); color: var(--green); border-color: var(--line); }
.admin-row-menu[open] > summary { background: var(--mint); color: var(--green); border-color: var(--green); }
.admin-row-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(10,29,22,.14);
  min-width: 220px; overflow: hidden; z-index: 30;
}
/* When the row menu sits in the last two rows, flip it above the button so it
   doesn't collide with the viewport edge. This keeps every row's actions
   reachable without scrolling. */
.admin-table tbody tr:nth-last-child(-n+2) .admin-row-menu-panel {
  top: auto; bottom: calc(100% + 6px);
}
.admin-row-menu-item,
.admin-row-menu-item[type="submit"] {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans);
}
.admin-row-menu-item:hover { background: var(--mint); color: var(--green); }
.admin-row-menu-item-danger { color: var(--red); }
.admin-row-menu-item-danger:hover { background: #fef2f2; color: var(--red); }
.admin-row-menu-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* Pagination */
.admin-pagination { margin-top: 20px; display: flex; justify-content: center; }
.admin-pagination .pagy {
  display: flex; gap: 4px; font-size: 13px; font-family: var(--sans);
}
.admin-pagination .pagy a, .admin-pagination .pagy span {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none;
}
.admin-pagination .pagy a:hover { background: var(--mint); color: var(--green); }
.admin-pagination .pagy .current { background: var(--green); color: #fff; border-color: var(--green); }

/* Grid + status */
.admin-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) {
  .admin-grid-2 { grid-template-columns: 1fr; }
  .admin-ph { flex-direction: column; align-items: stretch; }
}

/* Empty state */
.admin-empty {
  background: #fff; border: 1px dashed var(--line);
  border-radius: 12px; padding: 40px 20px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.admin-empty p { color: var(--muted); margin: 0; font-size: 14px; }

/* Status block (banned/suspended banner inside show page) */
.admin-status-block {
  padding: 14px 16px; border-radius: 10px; margin-bottom: 16px;
  border: 1px solid transparent;
}
.admin-status-block p { margin: 0 0 4px; font-size: 13px; }
.admin-status-block-danger { background: #fef2f2; border-color: #fecaca; color: #7a1c1a; }
.admin-status-block-warning { background: #fefbe8; border-color: #fde7a8; color: #7a4a06; }
.admin-status-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.admin-inline-form > summary { list-style: none; cursor: pointer; }
.admin-inline-form > summary::-webkit-details-marker { display: none; }
.admin-status-form {
  margin-top: 10px; padding: 12px; border-radius: 10px;
  background: #fafbfa; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; min-width: 260px;
}
.admin-status-form label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
}
.admin-status-form input {
  padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; font-family: var(--sans);
}
.admin-muted { color: var(--muted); }

/* Redundant "OPERATOR CONSOLE" chip — sidebar already says CONSOLE. Hiding it
   would leave the topbar's justify-content:space-between with nothing on the
   left, so also flip to flex-end so actions right-align. */
.admin-topbar-env { display: none; }
.admin-topbar { justify-content: flex-end; padding: 10px 24px; }

/* =========================================
   Checkout — professional two-column layout
   ========================================= */
.co-shell {
  max-width: 1080px; margin: 0 auto;
  padding: 32px 24px 80px;
}
.co-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px; align-items: start;
}
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; gap: 24px; }
}

.co-form-column { min-width: 0; }
.co-title {
  font-family: var(--serif);
  font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 24px;
}

/* Listing card at the top of the form */
.co-listing-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.co-listing-thumb {
  width: 72px; height: 60px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--mint);
}
.co-listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-listing-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.co-listing-meta strong { font-size: 15px; color: var(--ink); }
.co-listing-meta > span { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.co-badge-small {
  padding: 2px 8px; background: var(--mint); color: var(--green);
  font-size: 11px; font-weight: 700; border-radius: 999px;
}
.co-listing-location { display: inline-flex; align-items: center; gap: 4px; }

/* Section blocks — each labelled area of the form */
.co-section {
  padding: 20px 22px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.co-section-head {
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 14px;
}
.co-section-head.co-lower { text-transform: lowercase; letter-spacing: .04em; }
.co-section-body { font-size: 14px; color: var(--ink); line-height: 1.5; }
.co-plain-text { padding: 12px 14px; background: #fafbfa; border-radius: 10px; }
.co-muted { color: var(--muted); }

/* Reassurance green banner */
.co-notice-ok {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 16px;
  background: #e6f4ec; border: 1px solid #cfe1d6; border-radius: 10px;
  color: #0e5c2f; font-size: 13px; line-height: 1.5;
}
.co-notice-ok svg { flex-shrink: 0; margin-top: 1px; }
.co-notice-ok strong { display: inline; color: #0e3b2e; }

/* Card details */
.co-card-details { margin-bottom: 14px; }
.co-field-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px;
}
.co-card-brands { display: inline-flex; gap: 6px; }
.co-card-brands span {
  padding: 2px 6px; background: #f0f3f1; color: var(--muted);
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  border-radius: 4px; text-transform: uppercase;
}
.co-stripe-mount {
  min-height: 60px; padding: 4px 0;
}
.co-stripe-loading {
  color: var(--muted); font-size: 13px; margin: 12px 4px;
}
.co-payment-error {
  padding: 10px 14px; margin-top: 10px;
  background: #fee6e4; border: 1px solid #f5b7b3; border-radius: 8px;
  color: #8a3735; font-size: 13px; font-weight: 500;
}
.co-fineprint {
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
  margin: 12px 0 0;
}
.co-fineprint-centered { text-align: center; margin: 12px 0 0; }

/* Optional add-on */
.co-addon {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fafbfa; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.co-addon:hover { background: var(--mint); border-color: var(--green); }
.co-addon input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--green); flex-shrink: 0;
}
.co-addon-title {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
.co-addon-title strong { font-size: 14px; color: var(--ink); }
.co-addon-price { font-size: 13px; font-weight: 700; color: var(--green); }
.co-addon-body { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Terms checkbox */
.co-terms {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; color: var(--ink); line-height: 1.6; cursor: pointer;
}
.co-terms input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--green); flex-shrink: 0;
}
.co-terms a { color: var(--green); text-decoration: underline; }

/* Confirm button */
.co-confirm-btn {
  width: 100%; padding: 16px 22px; margin-top: 20px;
  background: var(--green); color: #fff; font-weight: 700;
  font-size: 15px; font-family: var(--sans); letter-spacing: .01em;
  border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(14,59,46,.20);
  transition: background .12s, transform .05s, box-shadow .12s;
}
.co-confirm-btn:hover { background: var(--green2); box-shadow: 0 8px 20px rgba(14,59,46,.28); }
.co-confirm-btn:active { transform: translateY(1px); }
.co-confirm-btn[aria-disabled="true"] { opacity: .6; box-shadow: none; }
.co-confirm-btn[aria-disabled="true"]:hover { background: var(--green); }

/* ── Right column — booking overview ─────────────────────── */
.co-overview {
  position: sticky; top: 100px;
  padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(10,29,22,.04);
}
.co-overview-heading {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* Dates row — Booking start / Booking end */
.co-overview-dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.co-overview-dates > div { display: flex; flex-direction: column; gap: 2px; }
.co-overview-dates span {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.co-overview-dates strong { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.co-overview-dates em { font-size: 12px; color: var(--muted); font-style: normal; }

/* Price stack */
.co-overview-prices {
  margin: 14px 0 12px; display: flex; flex-direction: column; gap: 8px;
}
.co-overview-prices > div {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink);
}
.co-overview-prices dt { color: var(--muted); font-weight: 500; }
.co-overview-prices dd { margin: 0; font-weight: 600; }

.co-overview-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink);
}
.co-overview-total span { font-weight: 600; }
.co-overview-total strong { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

/* Deposit note inside the overview */
.co-overview-note {
  padding: 10px 12px; margin-top: 14px;
  background: var(--mint); border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: var(--green);
}
.co-overview-note strong { color: var(--green); font-weight: 700; }

/* Trust benefits list */
.co-benefits {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.co-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--ink); line-height: 1.5;
}
.co-benefit-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
}
.co-benefits strong { font-weight: 700; color: var(--ink); }

/* Bundle contents list (What's included on checkout) */
.co-bundle {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.co-bundle li {
  display: grid; grid-template-columns: 40px 1fr;
  align-items: baseline; gap: 12px;
  padding: 10px 12px;
  background: #fafbfa; border: 1px solid var(--line); border-radius: 10px;
}
.co-bundle-qty {
  font-weight: 800; font-size: 14px; color: var(--green);
  text-align: center;
  padding: 2px 6px; background: var(--mint); border-radius: 6px;
}
.co-bundle-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.co-bundle-notes {
  grid-column: 2; font-size: 12px; color: var(--muted);
  margin-top: 2px;
}

/* Rental details block (replaces the single-line address box) */
.co-rental-details {
  margin: 0; display: flex; flex-direction: column; gap: 12px;
}
.co-rental-details > div {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  align-items: baseline;
}
.co-rental-details dt {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.co-rental-details dd {
  margin: 0; font-size: 14px; color: var(--ink); font-weight: 500;
  line-height: 1.4;
}
.co-rental-details dd em {
  display: block; font-style: normal; font-size: 12px; color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 620px) {
  .co-rental-details > div { grid-template-columns: 1fr; }
}

/* Confirm button not-ready state — keep the brand color, subtle dimming */
.co-confirm-btn[aria-disabled="true"] {
  opacity: 1;
  background: var(--green);
  box-shadow: 0 3px 10px rgba(14,59,46,.14);
  position: relative;
}
.co-confirm-btn[aria-disabled="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  background: rgba(255,255,255,.28); pointer-events: none;
}

/* =========================================
   Static content pages (Terms, Rental Agreement, Privacy, FAQ)
   ========================================= */
.static-page { max-width: 720px; margin: 0 auto; color: var(--ink); }
.static-page-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px; margin-bottom: 28px;
}
.static-page-crumb {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  margin: 0 0 12px;
}
.static-page-crumb a { color: var(--muted); text-decoration: none; }
.static-page-crumb a:hover { color: var(--green); }
.static-page h1 {
  font-family: var(--serif); font-size: 32px; letter-spacing: -.01em;
  margin: 0 0 8px; color: var(--ink); line-height: 1.15;
}
.static-page-summary {
  font-size: 15px; color: var(--muted); line-height: 1.55; margin: 8px 0 12px;
}
.static-page-meta { font-size: 12px; color: var(--muted); margin: 0; }
.static-page-body {
  font-size: 15px; line-height: 1.75; color: var(--ink);
}
.static-page-body p { margin: 0 0 16px; }
.static-page-body a { color: var(--green); text-decoration: underline; }
.static-page-h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); margin: 32px 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.static-page-h2:first-child { margin-top: 0; }
.static-page-h3 {
  font-size: 15px; font-weight: 700;
  color: var(--ink); margin: 22px 0 8px;
}

/* ==========================================================================
   Booking confirmation page
   Celebratory hero + two-column card layout. Uses the shared design tokens
   (--green, --mint, --line, --radius) so the palette matches everything else.
   ========================================================================== */
/* Hero — brand image + strong green gradient wash so text stays crisp.
   Layered backgrounds (top → bottom):
   1. gradient overlay (dark brand green → transparent, left-to-right)
   2. brand image (marketplace-hero.png) sized to cover
   The gradient is opaque on the left where the copy sits and softens right,
   letting the image detail show through at the medallion's right shoulder. */
.bc-hero {
  position: relative;
  padding: 64px 0 52px;
  border-bottom: 1px solid #0a2e23;
  background:
    linear-gradient(90deg, rgba(14, 59, 46, 0.94) 0%, rgba(14, 59, 46, 0.78) 55%, rgba(21, 87, 68, 0.55) 100%),
    url(/assets/marketplace-hero-0450590df85765aa73d1e5ac06a24c5605c8993a2415448f7dff4b2656045c62.png) center/cover no-repeat;
}
/* Subtle decorative haze at the top so the site nav bar meets the hero cleanly */
.bc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1200px 320px at 20% 0%, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}
.bc-hero-inner {
  position: relative;      /* stacks above the ::before haze */
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.bc-medallion {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255,255,255,.9);
  display: grid; place-items: center;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.30);
  flex-shrink: 0;
}
.bc-medallion svg { width: 42px; height: 42px; }
.bc-hero-copy { flex: 1; min-width: 0; }
/* Eyebrow pill — glass/backdrop style now that the hero is dark */
.bc-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #ffffff;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bc-hero-title {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.08;
  margin: 4px 0 10px;
  color: #ffffff;
  letter-spacing: -.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.bc-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.86);
  margin: 0;
  max-width: 640px;
}
.bc-hero-sub b { color: #ffffff; font-weight: 600; }
/* Reference chip — stays white so the mono AP-… code jumps out */
.bc-ref-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 10px; padding: 7px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--green);
  margin-top: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.bc-ref-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(14, 59, 46, .18);
}

/* ==========================================================================
   Shared page hero band — reusable via views/shared/_page_hero.html.erb.
   Same visual treatment as .bc-hero (booking confirmation) but generalised
   for dashboards, onboarding, and other milestone pages.
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 56px 0 48px;
  /* Breathing room before the content that follows. Without this, the shell
     below (which uses padding-top:0 on the "no-double-margin" pattern) sits
     jammed against the hero's border-bottom. */
  margin-bottom: 36px;
  border-bottom: 1px solid #0a2e23;
  background:
    linear-gradient(90deg, rgba(14, 59, 46, 0.94) 0%, rgba(14, 59, 46, 0.78) 55%, rgba(21, 87, 68, 0.55) 100%),
    url(/assets/marketplace-hero-0450590df85765aa73d1e5ac06a24c5605c8993a2415448f7dff4b2656045c62.png) center/cover no-repeat;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1200px 320px at 20% 0%, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.page-hero-medallion {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255,255,255,.9);
  display: grid; place-items: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  flex-shrink: 0;
}
.page-hero-medallion svg { width: 36px; height: 36px; }
.page-hero-copy { flex: 1; min-width: 0; }
.page-hero-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #ffffff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-hero-title {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.08;
  margin: 4px 0 10px;
  color: #ffffff;
  letter-spacing: -.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.page-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.86);
  margin: 0;
  max-width: 680px;
  line-height: 1.55;
}
.page-hero-sub b, .page-hero-sub strong { color: #ffffff; font-weight: 600; }

@media (max-width: 900px) {
  .page-hero { padding: 40px 0 36px; margin-bottom: 24px; }
  .page-hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .page-hero-title { font-size: 30px; }
}

/* Two-column body layout */
.bc-body {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 0 auto;
  padding: 40px 0 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .bc-hero-inner { flex-direction: column; text-align: center; }
  .bc-hero-title { font-size: 32px; }
  .bc-body { grid-template-columns: 1fr; padding-top: 24px; }
}

/* Cards */
.bc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 20px;
}
.bc-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.bc-card-title svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

/* Detail rows inside the summary card */
.bc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed #eaeee9;
  font-size: 14px;
}
.bc-row:last-child { border-bottom: 0; }
.bc-row span { color: var(--muted); }
.bc-row strong { color: var(--ink); text-align: right; font-weight: 600; }

/* Receipt */
.bc-receipt-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0 4px;
  border-top: 2px solid var(--ink);
  margin-top: 10px;
  font-size: 15px;
}
.bc-receipt-total span { font-weight: 700; color: var(--ink); }
.bc-receipt-total strong {
  font-family: var(--serif);
  font-size: 22px; color: var(--green);
  font-weight: 700;
}
.bc-deposit-note {
  margin-top: 14px;
  background: #fef8e9;
  border: 1px solid #f2e2b6;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px; color: #6a4d10;
  display: flex; gap: 10px;
  align-items: flex-start;
}
.bc-deposit-note svg { width: 16px; height: 16px; flex-shrink: 0; color: #b58118; margin-top: 2px; }
.bc-deposit-note b { color: #3d2b06; }

/* Receipt action buttons — "View PDF" (primary) and "Download PDF" (ghost)
   sit just below the deposit note so they're discoverable at the natural end
   of the payment-receipt card. */
.bc-receipt-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.bc-receipt-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.bc-receipt-action:hover { border-color: var(--green); background: #f7faf8; color: var(--green); }
.bc-receipt-action svg { width: 15px; height: 15px; }
.bc-receipt-action--primary { background: var(--green); color: #fff; border-color: var(--green); }
.bc-receipt-action--primary:hover { background: var(--green2); border-color: var(--green2); color: #fff; }

/* What happens next — numbered step cards */
.bc-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.bc-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.bc-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint); color: var(--green);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.bc-step-body { font-size: 14px; line-height: 1.55; }
.bc-step-body b { color: var(--ink); }

.bc-primary-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff;
  padding: 12px 22px; border-radius: 10px;
  font-weight: 700; font-size: 14px;
  margin-top: 22px;
  transition: background .12s;
}
.bc-primary-cta:hover { background: var(--green2); color: #fff; }
.bc-primary-cta svg { width: 16px; height: 16px; }

/* Shown instead of the CTA when the JotForm base URL is unconfigured (placeholder
   ID or blank). Prevents users from landing on a JotForm 404. */
.bc-checklist-pending {
  margin-top: 22px;
  background: #f7faf8;
  border: 1px dashed #cfd9d3;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; gap: 12px;
  align-items: flex-start;
  font-size: 13px; color: var(--muted);
  line-height: 1.55;
}
.bc-checklist-pending svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.bc-checklist-pending b { color: var(--ink); display: block; margin-bottom: 2px; }

/* Right column — sticky booking overview */
.bc-aside { position: sticky; top: 100px; }
.bc-hero-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.bc-hero-photo {
  width: 100%; height: 170px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}
.bc-hero-card-body { padding: 18px 20px 20px; }
.bc-hero-card-title {
  font-family: var(--serif);
  font-size: 18px; margin: 0 0 4px;
  color: var(--ink); letter-spacing: -.01em;
}
.bc-hero-card-supplier {
  font-size: 13px; color: var(--muted); margin: 0 0 14px;
}
.bc-status-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-top: 1px solid #eef2ef;
}
.bc-status-line span { color: var(--muted); }
.bc-status-line strong { color: var(--ink); font-weight: 600; }
.bc-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #d7ecdf; color: var(--green);
  padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
}
.bc-status-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}

/* Action buttons stack */
.bc-actions {
  display: grid; gap: 8px;
}
.bc-action {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  transition: border-color .12s, background .12s;
}
.bc-action:hover { border-color: var(--green); background: #f7faf8; }
.bc-action svg { width: 14px; height: 14px; color: var(--muted); }

/* Trust strip */
.bc-trust {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f7faf8;
  border-radius: 12px;
  border: 1px solid #e6ede8;
  display: grid; gap: 10px;
}
.bc-trust-row { display: flex; gap: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.bc-trust-row svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ==========================================================================
   Sharetribe-style transaction page (renter/bookings/show + supplier/requests/show)
   Two-column layout: interleaved activity+message feed on the left, booking
   overview card on the right. Reusable via shared/_transaction_feed +
   shared/_transaction_sidebar partials.
   ========================================================================== */
.tx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .tx-layout { grid-template-columns: 1fr; gap: 20px; }
}

/* Slim breadcrumb above the transaction card — replaces the huge listing-title
   header on the old show pages. Compact + muted so the big serif headline
   *inside* the card is the visual anchor (Sharetribe pattern). */
.tx-crumb { padding-bottom: 12px !important; }
.tx-crumb-text {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Transaction card ---- */
.tx-transaction {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 34px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 480px;
}

/* Header: big avatar + state-summary headline (Sharetribe pattern) */
.tx-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.tx-header-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.tx-header-title {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 4px 0 0;
}

/* Named sections (Additional information, Activity) */
.tx-section { margin: 0; }
.tx-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.tx-section-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

/* Activity — bulleted list (dot marker, tight rhythm) */
.tx-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tx-activity-item {
  position: relative;
  padding: 4px 0 12px 22px;
}
.tx-activity-item::before {
  content: "";
  position: absolute;
  left: 6px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.tx-activity-item + .tx-activity-item::after {
  content: "";
  position: absolute;
  left: 8.5px; top: -4px; bottom: 24px;
  width: 1px;
  background: var(--line);
}
.tx-activity-text {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 3px;
}
.tx-activity-time {
  font-size: 12px;
  color: var(--muted);
}

/* ---- Messages ---- */
.tx-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Message row: avatar (theirs only) + bubble+time column */
.tx-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tx-msg--mine   { justify-content: flex-end; }
.tx-msg--theirs { justify-content: flex-start; }

.tx-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.tx-msg--mine .tx-msg-avatar { display: none; }

/* Bubble + time stack: bubble on top, time below (matches reference) */
.tx-msg-col {
  display: flex;
  flex-direction: column;
  max-width: 68%;
}
.tx-msg--mine   .tx-msg-col { align-items: flex-end; }
.tx-msg--theirs .tx-msg-col { align-items: flex-start; }

.tx-msg-bubble {
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.tx-msg--mine   .tx-msg-bubble {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tx-msg--theirs .tx-msg-bubble {
  background: #f4f7f5;
  color: var(--ink);
  border: 1px solid #e0e8e3;
  border-bottom-left-radius: 4px;
}
.tx-msg-time {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  padding: 0 2px;
}
.tx-msg-sender { font-weight: 700; }

/* Composer */
.tx-compose {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tx-compose-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  min-height: 68px;
  font-family: inherit;
}
.tx-compose-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 59, 46, .10);
}
.tx-compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tx-compose-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
  border-radius: 8px;
}
.tx-compose-attach:hover:not(:disabled) { background: #f7faf8; color: var(--green); }
.tx-compose-send { padding: 10px 22px !important; }

/* ---- Sidebar ---- */
.tx-sidebar {
  position: sticky; top: 100px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.tx-listing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.tx-listing-photo {
  width: 100%; height: 160px;
  object-fit: cover;
  display: block;
}
.tx-listing-body { padding: 14px 16px 16px; }
.tx-listing-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -.01em;
  display: block;
  margin: 0 0 4px;
}
.tx-listing-title:hover { color: var(--green2); text-decoration: underline; }
.tx-listing-supplier { font-size: 13px; color: var(--muted); margin: 0; }

.tx-overview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.tx-overview-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.tx-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tx-dates span  { font-size: 11.5px; color: var(--muted); display: block; }
.tx-dates strong{ font-size: 14px; color: var(--ink); font-weight: 700; display: block; margin-top: 2px; }
.tx-dates em    { font-size: 12px; color: var(--muted); font-style: normal; display: block; }

.tx-priceline {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 13.5px;
}
.tx-priceline span    { color: var(--muted); }
.tx-priceline strong  { color: var(--ink); font-weight: 700; }
.tx-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0 4px;
  border-top: 1px solid var(--ink);
  margin-top: 10px;
}
.tx-total span   { font-size: 14px; font-weight: 700; color: var(--ink); }
.tx-total strong { font-family: var(--serif); font-size: 20px; color: var(--green); font-weight: 700; }

.tx-action { margin-top: 16px; }
.tx-action .button.wide { width: 100%; text-align: center; }

.tx-note {
  font-size: 12px; color: var(--muted);
  margin: 12px 0 0; line-height: 1.5;
}
.tx-note--fine { font-size: 11px; padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 14px; }

/* ==========================================================================
   Sharetribe-style split inbox — left nav on branded background, right list.
   The left column is navigation, NOT conversation preview — clicking a row
   in the right list navigates to that transaction's page. Reference: the
   sharetribe.com /inbox/sales layout + Fidelia's earlier "premium sidebar
   with image" feedback that we're now restoring here.
   ========================================================================== */
.inbox-split {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin: 32px auto 72px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
  min-height: 520px;
  /* Left "little space" pad so the branded column doesn't hug the viewport edge */
  padding-left: 12px;
}

/* Left: premium branded section navigation. Green wash + hero image so the
   column feels substantial and matches the confirmation-page hero treatment.
   Height is modest (min 460px) so it feels present without dwarfing an
   empty-state right panel. Prior version pinned to viewport height which
   made it dominate short lists. */
.inbox-split-nav--branded {
  position: sticky; top: 90px;
  border-radius: 14px;
  overflow: hidden;
  min-height: 460px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(14, 59, 46, 0.96) 0%, rgba(14, 59, 46, 0.90) 55%, rgba(21, 87, 68, 0.86) 100%),
    url(/assets/marketplace-hero-0450590df85765aa73d1e5ac06a24c5605c8993a2415448f7dff4b2656045c62.png) center/cover no-repeat;
  box-shadow: 0 12px 32px rgba(14, 59, 46, .18);
}
.inbox-split-nav-inner { padding: 30px 22px 24px; }

.inbox-split-title {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  color: #ffffff;
}
.inbox-split-nav nav { display: flex; flex-direction: column; gap: 4px; }
.inbox-split-tab {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.inbox-split-tab:hover {
  background: rgba(255,255,255,.09);
  color: #ffffff;
}
.inbox-split-tab--active {
  background: #ffffff;
  color: var(--green);
  font-weight: 800;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
.inbox-split-tab-count {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.88);
}
.inbox-split-tab--active .inbox-split-tab-count {
  background: var(--mint);
  color: var(--green);
}

/* Right: conversation list panel */
.inbox-split-panel { min-height: 200px; }
.inbox-split-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  font-size: 13px; color: var(--muted);
}
.inbox-split-count { font-weight: 600; }

/* Sort dropdown — <details>/<summary> popover */
.inbox-sort { position: relative; }
.inbox-sort-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: border-color .12s, box-shadow .12s;
}
.inbox-sort-summary::-webkit-details-marker { display: none; }
.inbox-sort-summary:hover { border-color: #b8c4bd; }
.inbox-sort[open] .inbox-sort-summary {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 59, 46, .10);
}
.inbox-sort-summary strong { color: var(--ink); font-weight: 700; }
.inbox-sort-caret {
  display: inline-block;
  transition: transform .12s;
  color: var(--muted);
}
.inbox-sort[open] .inbox-sort-caret { transform: rotate(180deg); }

.inbox-sort-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(23, 34, 30, .18);
  z-index: 30;
}
.inbox-sort-option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.inbox-sort-option:hover { background: #f7faf8; }
.inbox-sort-option--active {
  background: var(--mint);
  color: var(--green);
  font-weight: 700;
}
.inbox-sort-check {
  display: inline-block;
  width: 14px;
  color: var(--green);
  font-weight: 900;
}

.inbox-conv-list { list-style: none; padding: 0; margin: 0; }
.inbox-conv-list li + li { margin-top: 6px; }

.inbox-conv-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.inbox-conv-row:hover {
  background: #f7faf8;
  border-color: var(--line);
  box-shadow: 0 6px 18px rgba(14, 59, 46, .08);
}

.inbox-conv-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.inbox-conv-body    { min-width: 0; }
.inbox-conv-name    { font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.inbox-conv-listing { color: var(--muted); font-size: 13.5px; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-conv-date    { color: var(--muted); font-size: 12.5px; margin: 0; }
.inbox-conv-badge   { font-size: 12px; font-weight: 700; white-space: nowrap; }

.inbox-split-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: #fbfcfb;
  max-width: 520px;
  margin: 0 auto;                    /* centre in the right panel */
}
.inbox-split-empty .inbox-empty-icon  { font-size: 44px; margin-bottom: 14px; }
.inbox-split-empty .inbox-empty-title { font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.inbox-split-empty .inbox-empty-sub   { font-size: 14px; color: var(--muted); margin: 0 0 22px; line-height: 1.55; }

/* Mobile: nav collapses above the list. Keep the branded background but
   drop the sticky positioning and pinning height. */
@media (max-width: 820px) {
  .inbox-split {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
    padding-left: 0;
  }
  .inbox-split-nav--branded {
    position: static;
    min-height: auto;
  }
  .inbox-split-nav-inner { padding: 22px 20px 18px; }
  .inbox-split-title { font-size: 22px; margin-bottom: 14px; }
  .inbox-split-nav nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .inbox-split-tab { flex: 1 1 auto; min-width: 140px; }
  .inbox-conv-row { padding: 12px 14px; gap: 12px; }
  .inbox-split-toolbar { flex-wrap: wrap; gap: 8px; }
}