/* ==========================================================================
   BSR Tools — shared stylesheet
   No external fonts/frameworks are loaded — everything renders offline.
   ========================================================================== */

:root {
  --color-primary: #FF3131;      /* BSR Tools red — brand accent */
  --color-primary-dark: #D91616;
  --color-ink: #06233D;          /* BSR Tools navy — header/footer */
  --color-ink-soft: #123252;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F6F8;
  --color-border: #E3E5E9;
  --color-text: #1D2129;
  --color-text-muted: #5B6270;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 30px rgba(20, 24, 31, 0.12);
  --max-width: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 12px; color: var(--color-ink); letter-spacing: -0.01em; }
h1 { font-weight: 800; }
h2 { font-weight: 800; font-size: 32px; }
h3 { font-weight: 700; }
p { margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--color-text-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 8px rgba(255, 49, 49, 0.25); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(255, 49, 49, 0.32); }
.btn-dark { background: var(--color-ink); color: #fff; }
.btn-dark:hover { background: var(--color-ink-soft); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { background: transparent; border-color: var(--color-border); color: var(--color-ink); }
.btn-outline-dark:hover { background: var(--color-bg-alt); }
.btn-block { width: 100%; }

/* Top utility bar */
.topbar {
  background: var(--color-ink);
  color: #cfd3da;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 18px; }

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
  color: var(--color-ink);
}
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}
.logo-img {
  height: 40px;
  width: auto;
  border-radius: 7px;
  display: block;
}
.main-nav { display: flex; gap: 26px; }
.main-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.main-nav a:hover { color: var(--color-primary); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.basket-link { display: inline-flex; align-items: center; gap: 8px; }
.basket-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-actions .btn { display: none; }
}

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--color-ink) 0%, #23293A 100%);
  color: #fff;
  padding: 88px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { color: #fff; font-size: 44px; }
.hero p.lead { color: #C9CDD6; font-size: 18px; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-stats div strong { display: block; font-size: 24px; color: #fff; }
.hero-stats div span { font-size: 13px; color: #9EA4B2; }

.hero-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.hero-panel h3 { font-size: 18px; }
.quick-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--color-text-muted);
}
.quick-form input, .quick-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
}
.quick-form .btn { margin-top: 20px; }

/* Hero ad tiles — replaces the old "Get a fast quote" form in the hero's
   right-hand slot with promotional banners (Dan's request, matching the
   bold colour-block style of competitor sites like Speedy Hire). Purely
   promotional/internal — no third-party ad network involved. */
.hero-ads {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ad-tile {
  display: block;
  border-radius: var(--radius);
  padding: 24px 26px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.ad-tile-primary {
  background: linear-gradient(120deg, var(--color-primary) 0%, #C41E1E 100%);
  padding: 32px 28px;
}
.ad-tile-secondary {
  background: linear-gradient(120deg, var(--color-ink) 0%, #23293A 100%);
  border: 1px solid rgba(255,255,255,0.12);
}
.ad-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.ad-tile h3 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 8px;
  line-height: 1.1;
}
.ad-tile p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin: 0 0 14px;
}
.ad-cta {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}

/* Trust strip */
.trust-strip {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 26px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-soft);
}
.trust-item .icon-badge { color: var(--color-primary); font-size: 20px; }
@media (max-width: 800px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cards / grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 950px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* grid-3 holds paragraph-heavy info cards (Delivery & Collection, About,
     Trade accounts) — those still need full width to read comfortably. */
  .grid-3 { grid-template-columns: 1fr; }
  /* grid-4 holds lightweight category tiles and equipment cards — kept at
     2-up on phones (tightened further below) so the page reads as a grid,
     like the desktop layout, instead of one long single-file scroll. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.category-card {
  padding: 26px 20px;
  text-align: center;
}
.category-card .icon-badge {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(232, 114, 12, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.category-card h4 { font-size: 16px; margin-bottom: 4px; }
.category-card span { font-size: 13px; color: var(--color-text-muted); }

.equip-card .thumb {
  height: 210px;
  overflow: hidden;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.equip-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.card:hover .equip-card .thumb img,
.equip-card:hover .thumb img { transform: scale(1.04); }
.equip-card .body { padding: 20px 22px 22px; }
.equip-card h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.equip-card .meta { font-size: 13px; color: var(--color-text-muted); margin-bottom: 14px; }
.equip-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.equip-card .price { font-size: 21px; font-weight: 800; color: var(--color-ink); }
.equip-card .price span { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }

/* Compact homepage "Popular Items" cards — no description/spec-list, no
   secondary View Details button (equip-card.js), and a smaller, quieter
   placeholder mark so a row of teaser cards reads as a curated showcase
   rather than a trimmed-down catalogue card. */
.equip-card-compact .thumb { height: 150px; }
.equip-card-compact .img-placeholder-mark { width: 38px; height: 38px; font-size: 13px; border-radius: 8px; }
.equip-card-compact .img-placeholder-label { font-size: 10px; }
.equip-card-compact .body { padding: 16px 18px 18px; }
.equip-card-compact h4 { font-size: 16px; margin-bottom: 4px; }
.equip-card-compact .price-row { margin-bottom: 12px; }

/* Promo banner — full-width strip at the very top of the homepage, above
   the header, per Dan's "advertisement at the top of the front page"
   request. Copy reuses the same verified pricing already shown in the
   hero ad tiles, never invented offers. */
.promo-banner {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.promo-banner strong { color: #FF7A7A; font-weight: 800; }
.promo-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .promo-banner { padding: 8px 12px; font-size: 11.5px; }
  .equip-card-compact .thumb { height: 100px; }
}

/* Mobile density pass — Dan's "make mobile look more like desktop, less
   long and squashed" request. Desktop keeps its full-size cards; phones
   get a genuinely compact 2-up grid (set above) with smaller imagery and
   tighter text so four category tiles or four equipment cards read as a
   grid, not an endless single column. */
@media (max-width: 560px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 30px; }
  .hero { padding: 48px 0 56px; }
  .hero-actions { margin-top: 18px; }
  .hero-ads { margin-top: 24px; gap: 12px; }
  .ad-tile { padding: 18px 20px; }
  .ad-tile-primary { padding: 22px 20px; }
  .ad-tile h3 { font-size: 19px; }

  .category-card { padding: 16px 10px; }
  .category-card .icon-badge { width: 40px; height: 40px; font-size: 18px; margin-bottom: 8px; }
  .category-card h4 { font-size: 13px; margin-bottom: 0; }

  .equip-card .thumb { height: 110px; }
  .equip-card .body { padding: 12px 12px 14px; }
  .equip-card h4 { font-size: 14px; margin-bottom: 3px; }
  .equip-card .meta { font-size: 11px; margin-bottom: 8px; }
  .equip-card .price-row { margin-bottom: 8px; }
  .equip-card .price { font-size: 16px; }
  .equip-card .price span { font-size: 10px; }
  .equip-card .body .btn { padding: 9px 12px; font-size: 12px; }
}

/* Branded placeholder — replaces plain "Photo coming soon" text wherever a
   real product image hasn't been uploaded yet (migration 0099). Used inside
   .thumb (catalogue cards) and .gallery-main (product detail page). */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, #E9EBEF 100%);
}
.img-placeholder-mark {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.img-placeholder-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-primary);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  text-align: center;
  padding: 10px;
}
.step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin: 0 auto 14px;
}
.step h4 { font-size: 16px; }
.step p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 0; }

/* Reviews summary (aggregate rating above the testimonial cards) */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 14px;
}
.reviews-summary-stars { color: var(--color-primary); letter-spacing: 2px; font-size: 16px; }
.reviews-summary-score { font-weight: 800; color: var(--color-ink); }
.reviews-summary-note { color: var(--color-text-muted); font-size: 13px; }

/* Trade / finance CTA cards (homepage) */
.trade-cta-card {
  padding: 26px;
  text-align: left;
}
.trade-cta-card h4 { font-size: 16px; margin-bottom: 6px; }
.trade-cta-card .btn { margin-top: 14px; }

/* Testimonials */
.testimonial {
  padding: 26px;
}
.testimonial .stars { color: var(--color-primary); margin-bottom: 12px; letter-spacing: 2px; }
.testimonial p { font-style: italic; color: var(--color-ink-soft); }
.testimonial .who { font-weight: 700; font-size: 14px; margin-top: 12px; font-style: normal; }
.testimonial .who span { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 13px; }

/* CTA band */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #B9BEC9;
  padding: 56px 0 24px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid h4 { color: #fff; font-size: 14px; margin-bottom: 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Catalogue: page header */
.page-header {
  background: var(--color-ink);
  color: #fff;
  padding: 44px 0;
}
.page-header h1 { color: #fff; margin-bottom: 6px; }
.page-header p { color: #B9C2D0; margin: 0; }

/* Catalogue: filter bar */
.filter-bar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  box-shadow: var(--shadow);
  margin-top: -30px;
  position: relative;
  z-index: 5;
}
.filter-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.filter-field input, .filter-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.filter-reset {
  padding: 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-reset:hover { background: var(--color-border); }
@media (max-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 560px) {
  .filter-bar { grid-template-columns: 1fr; }
}

.results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 20px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Catalogue: equipment grid + cards */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 950px) { .catalogue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .catalogue-grid { grid-template-columns: 1fr; } }

.equip-card .thumb { position: relative; }
.stock-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 20px;
  background: #1E8E4A;
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 24, 31, 0.18);
  z-index: 2;
}
.stock-badge.out { background: #B23A3A; }
.stock-badge.limited { background: #C97A1E; }
.category-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.spec-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spec-list li {
  font-size: 12px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 3px 9px;
  border-radius: 20px;
}
.price-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.price-table div {
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--color-border);
}
.price-table div:last-child { border-right: none; }
.price-table .p-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 2px;
}
.price-table .p-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
}
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}

/* About / Contact page */
.info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.info-card h4 { font-size: 16px; margin-bottom: 14px; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.info-list li:last-child { border-bottom: none; }
.info-list .icon-badge {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 49, 49, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table td { padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--color-ink); }

.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chips span {
  font-size: 13px;
  font-weight: 600;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  padding: 6px 12px;
  border-radius: 20px;
}

.map-placeholder {
  height: 220px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #ECEEF1, #ECEEF1 12px, #E4E6EA 12px, #E4E6EA 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.form-card h3 { font-size: 20px; }
.form-card .form-sub { color: var(--color-text-muted); margin-bottom: 22px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* .form-field is an alias of .field — a few admin pages (equipment type
   detail, asset detail, the Extend Hire / Add Equipment panels on booking
   detail) were built using that name, which never had its own styling,
   so those fields were falling back to unstyled browser defaults
   (inline labels, tiny inputs, no consistent spacing). Styled identically
   here rather than renaming the class across every page that uses it. */
.field, .form-field { margin-bottom: 16px; }
.field label, .form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea,
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.field textarea, .form-field textarea { resize: vertical; min-height: 100px; }

.form-success {
  display: none;
  background: #E9F7EF;
  border: 1px solid #BEE6CE;
  color: #1E6B3A;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 18px;
}
.form-success.show { display: block; }

/* Onboarding wizard — shared progress bar (register.html + my-account.html) */
.wizard-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  padding: 4px 0;
}
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 78px; text-align: center; flex-shrink: 0; }
.wizard-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #EDEDED; color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.wizard-step-label { font-size: 11px; color: var(--color-text-muted); max-width: 92px; line-height: 1.3; }
.wizard-step-done .wizard-step-dot { background: #2F7D4F; color: #fff; }
.wizard-step-done .wizard-step-label { color: var(--color-ink); }
.wizard-step-current .wizard-step-dot { background: var(--color-ink); color: #fff; }
.wizard-step-current .wizard-step-label { color: var(--color-ink); font-weight: 600; }
.wizard-step-connector { width: 30px; height: 2px; background: #E3E3E3; margin: 13px 2px 0; flex-shrink: 0; }
@media (max-width: 640px) {
  .wizard-step-connector { width: 12px; }
  .wizard-step { min-width: 56px; }
  .wizard-step-label { display: none; }
}

.wizard-holding-panel { text-align: center; padding: 30px 20px; }
.wizard-holding-panel h3 { margin: 0 0 8px; }

/* Account type choice (register.html Step 0) */
.account-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 700px) {
  .account-type-grid { grid-template-columns: 1fr; }
}
.account-type-card {
  text-align: left;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-type-card:hover { border-color: var(--color-ink); }
.account-type-card h4 { margin: 0 0 10px; font-size: 17px; }
.account-type-card ul { margin: 0 0 16px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); flex-grow: 1; }
.account-type-card ul li { margin-bottom: 4px; }
.account-type-pick {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

/* Admin nav — small unread-notification hint dot (migration 0065) */
.nav-notify-badge {
  position: absolute;
  top: -3px;
  right: -11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0483E;
  box-shadow: 0 0 0 2px var(--color-ink);
}

/* Trade application fieldsets (My Account business details) */
.account-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 16px 4px;
  margin: 0 0 20px;
}
.account-fieldset legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 8px;
}

/* Equipment detail page */
.breadcrumb {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 18px 0;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span.sep { margin: 0 6px; }
.breadcrumb span.current { color: var(--color-ink); font-weight: 600; }

.detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.gallery-main {
  height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .gallery-main { height: 300px; } }

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumbs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery-thumbs img:hover { opacity: 1; }
.gallery-thumbs img.active { border-color: var(--color-primary); opacity: 1; }

.detail-panel h1 { font-size: 28px; margin-bottom: 8px; }
.fleet-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.detail-panel .price-table { margin-top: 4px; }
.detail-panel .spec-list { margin-top: 4px; }

/* Duration selector + price calculator (equipment detail page) */
.hire-calculator {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 18px 0 20px;
  background: var(--color-bg-alt);
}
.hire-calculator-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.duration-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.duration-option {
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.duration-option:hover { border-color: var(--color-primary); }
.duration-option.active {
  border-color: var(--color-primary);
  background: rgba(255, 49, 49, 0.06);
}
.duration-option .duration-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.duration-option .duration-price {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
}
.price-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dashed var(--color-border);
  padding-top: 14px;
}
.price-summary-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.price-summary-value { font-size: 30px; font-weight: 800; color: var(--color-ink); }
.price-summary-sub { font-size: 12px; color: var(--color-text-muted); display: block; text-align: right; }

.mini-policy-list { margin-bottom: 18px; }
.mini-policy-list li { padding: 9px 0; }

/* Feature bullets (equipment_features, migration 0100) */
.feature-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 14px;
  color: var(--color-text);
}
.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1E8E4A;
  font-weight: 800;
}

/* Delivery / Collection / Cross Hire fulfilment badges (product page) */
.fulfilment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.fulfilment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 20px;
}

.cta-secondary-row {
  display: flex;
  gap: 10px;
}
.cta-secondary-row .btn { font-size: 13px; padding: 11px 14px; }

/* Enlarge-image lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 35, 61, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

/* Specifications table (equipment_specifications, migration 0100) */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.specs-table tr { border-bottom: 1px solid var(--color-border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table tr:nth-child(even) { background: var(--color-bg-alt); }
.specs-table td {
  padding: 12px 20px;
  font-size: 14px;
}
.specs-table td:first-child {
  font-weight: 700;
  color: var(--color-ink);
  width: 40%;
}
.specs-table td:last-child { color: var(--color-text); }

/* Downloads list (equipment_documents, migration 0100) */
.downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .downloads-list { grid-template-columns: 1fr; } }
.downloads-list li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.downloads-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.downloads-list a:hover { color: var(--color-primary); }
.downloads-list .download-icon { font-size: 18px; }
.downloads-list .download-type {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.not-found {
  text-align: center;
  padding: 90px 20px;
}
.not-found h2 { margin-bottom: 10px; }

.related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 950px) { .related-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-row { grid-template-columns: 1fr; } }

/* Pricing page */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 950px) { .policy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .policy-grid { grid-template-columns: 1fr; } }

.policy-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
}
.policy-card .icon-badge {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 49, 49, 0.1);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.policy-card h4 { font-size: 15px; margin-bottom: 8px; }
.policy-card p { font-size: 13px; color: var(--color-text-muted); margin: 0; }

.delivery-bands { list-style: none; margin: 16px 0 0; padding: 0; }
.delivery-bands li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.delivery-bands li:last-child { border-bottom: none; }
.delivery-bands li span:last-child { font-weight: 700; color: var(--color-ink); white-space: nowrap; }

.vat-note {
  background: #FFF4E5;
  border: 1px solid #F1D6A8;
  color: #7A4E00;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 40px;
}

.category-group { margin-bottom: 52px; }
.category-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-ink);
}
.category-group-head h3 { font-size: 20px; margin: 0; }
.category-group-head span { font-size: 13px; color: var(--color-text-muted); }

.price-table-full {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-table-full th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.price-table-full th.num, .price-table-full td.num { text-align: right; }
.price-table-full td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  vertical-align: middle;
}
.price-table-full tr:last-child td { border-bottom: none; }
.price-table-full tr:hover td { background: var(--color-bg-alt); }
.price-table-full .item-name { font-weight: 700; color: var(--color-ink); }
.price-table-full .item-avail { font-size: 12px; color: var(--color-text-muted); font-weight: 400; }
.price-table-full .num { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.price-table-full .btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }

@media (max-width: 800px) {
  .price-table-full thead { display: none; }
  .price-table-full, .price-table-full tbody, .price-table-full tr, .price-table-full td {
    display: block;
    width: 100%;
  }
  .price-table-full tr { padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
  .price-table-full td { padding: 3px 0; border-bottom: none; }
  .price-table-full td.num::before { content: attr(data-label) ": "; font-weight: 400; color: var(--color-text-muted); }
  .price-table-full td.action { padding-top: 10px; }
}

/* Hire Basket page */
.basket-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .basket-layout { grid-template-columns: 1fr; }
}

.basket-item {
  display: flex;
  gap: 18px;
  padding: 18px;
  margin-bottom: 16px;
}
.basket-item-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
}
.basket-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basket-item-thumb .img-placeholder-mark { width: 34px; height: 34px; font-size: 11px; border-radius: 7px; }
.basket-item-thumb .img-placeholder-label { display: none; }
.basket-item-body { flex: 1; min-width: 0; }
.basket-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.basket-item-top h4 { font-size: 16px; margin: 2px 0 4px; }
.basket-item-top h4 a { color: inherit; }

.remove-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.remove-btn:hover { color: var(--color-primary); }

.waitlist-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #FDECEC;
  color: #B23A3A;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.waitlist-inline-note {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 4px 0 10px;
}

.basket-item-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
}
.qty-btn {
  background: var(--color-bg-alt);
  border: none;
  width: 30px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-ink);
}
.qty-btn:hover { background: var(--color-border); }
.qty-input {
  width: 44px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 14px;
  font-family: inherit;
}
.duration-select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.basket-item-price {
  margin-left: auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-ink);
  white-space: nowrap;
}

.basket-summary { position: sticky; top: 90px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.summary-row span:last-child { font-weight: 700; color: var(--color-ink); }
.summary-row.muted { font-size: 12px; color: var(--color-text-muted); }
.summary-row.muted span:last-child { font-weight: 400; color: var(--color-text-muted); }
.summary-row.total { border-bottom: none; padding-top: 14px; }
.summary-row.total span:last-child { font-size: 22px; }
.summary-row.deposit {
  background: var(--color-bg-alt);
  margin: 10px -22px 0;
  padding: 12px 22px;
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.empty-basket {
  text-align: center;
  padding: 80px 20px;
}
.empty-basket h2 { margin-bottom: 8px; }
.empty-basket p { color: var(--color-text-muted); margin-bottom: 24px; }

/* Booking form + confirmation */
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .radio-group { grid-template-columns: 1fr; } }
.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(255, 49, 49, 0.06);
}
.radio-option input { accent-color: var(--color-primary); width: 16px; height: 16px; }

.file-input-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 8px 0 20px;
}
.terms-row input { margin-top: 3px; accent-color: var(--color-primary); }

.booking-recap {
  position: sticky;
  top: 90px;
}
.booking-recap-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}
.booking-recap-item:last-child { border-bottom: none; }
.booking-recap-item .ri-name { font-weight: 600; color: var(--color-ink); }
.booking-recap-item .ri-meta { color: var(--color-text-muted); font-size: 12px; display: block; }

.confirmation-hero {
  text-align: center;
  padding: 50px 20px 20px;
}
.confirmation-hero .check-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(30, 142, 74, 0.12);
  color: #1E8E4A;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.confirmation-hero .booking-ref {
  display: inline-block;
  font-family: var(--font, monospace);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 8px;
  margin-top: 10px;
}

.summary-block { margin-bottom: 32px; }
.summary-block h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.detail-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  font-size: 14px;
}
@media (max-width: 640px) { .detail-kv { grid-template-columns: 1fr; } }
.detail-kv div span { display: block; }
.detail-kv div .kv-label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.detail-kv div .kv-value { font-weight: 600; color: var(--color-ink); }

@media print {
  .site-header, .topbar, .build-notice, .site-footer, .no-print { display: none !important; }
}

/* Admin back office */
.admin-header {
  background: var(--color-ink);
  color: #fff;
  padding: 14px 0;
}
.admin-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-header .logo { color: #fff; }
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #B9C2D0;
}
.admin-header-right strong { color: #fff; }
.admin-role-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(255,255,255,0.12);
  padding: 3px 9px;
  border-radius: 20px;
}

.admin-login-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.admin-login-card { width: 100%; max-width: 380px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 16px;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  display: block;
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--color-ink); }

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 20px;
}
.status-quote { background: #F1EAFB; color: #5B3FA5; }
.status-new { background: #E6F1FB; color: #185FA5; }
.status-confirmed { background: #EAF3DE; color: #3B6D11; }
.status-out { background: #FAEEDA; color: #854F0B; }
.status-partially_returned { background: #F3E8D6; color: #8A5A0B; }
.status-returned { background: #E1F5EE; color: #0F6E56; }
.status-completed { background: #E4E9F7; color: #2A3E8C; }
.status-cancelled { background: #FCEBEB; color: #A32D2D; }

/* Customer profile statuses */
.status-active { background: #EAF3DE; color: #3B6D11; }
.status-blocked { background: #FCEBEB; color: #A32D2D; }
.status-suspended { background: #FBF2E3; color: #8A5A0B; }

/* Document verification statuses */
.status-pending { background: #FBF2E3; color: #8A5A0B; }
.status-verified { background: #EAF3DE; color: #3B6D11; }
.status-rejected { background: #FCEBEB; color: #A32D2D; }

/* Customer completion statuses (migrations 0063/0064) */
.status-draft { background: #F0F0F0; color: #666; }
.status-awaiting_email_verification { background: #F0F0F0; color: #666; }
.status-incomplete { background: #F3E8D6; color: #8A5A0B; }
.status-ready_to_submit { background: #E6F1FB; color: #185FA5; }
.status-awaiting_review { background: #E4E9F7; color: #2A3E8C; }
.status-changes_requested { background: #FBF2E3; color: #8A5A0B; }

.onboarding-step-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
}
.onboarding-step-btn.step-done { border-color: #3B6D11; color: #3B6D11; background: #EAF3DE; }
.onboarding-step-btn.step-current { border-color: #C9862B; color: #8A5A0B; background: #FBF2E3; }

.admin-section { margin-bottom: 40px; }
.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-section-head h3 { font-size: 17px; margin: 0; }
.admin-section-head span { font-size: 13px; color: var(--color-text-muted); }

.admin-table-wrap {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--color-bg-alt); }
.admin-table a.row-link { color: var(--color-ink); font-weight: 700; }
.admin-table a.row-link:hover { color: var(--color-primary); }
.admin-empty-row td {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px 14px;
}

/* Reusable inline overlay panel — used by the Customer Register's New
   Customer form and other quick-add/quick-edit panels that shouldn't
   force a full page navigation. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 35, 61, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 200;
}
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 480px;
}

.status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Placeholder banner used only during build phase */
.build-notice {
  background: #FFF4E5;
  border-bottom: 1px solid #F1D6A8;
  color: #7A4E00;
  font-size: 13px;
  text-align: center;
  padding: 8px 12px;
}