/* ==========================================================================
   Car Services — global polish layer (polish.css)
   --------------------------------------------------------------------------
   Loaded once, right after theme.css, by the shared header partials — so every
   page that uses the site chrome gets the same refinement without per-page
   work.

   Ground rules (deliberate, please keep):
   - VISUAL-ONLY properties: colour, border, radius, shadow, transition,
     typography. No display / position / size changes on generic selectors,
     so no existing layout can move or break.
   - Every colour comes from theme.css tokens (with literal fallbacks), so the
     palette stays exactly the brand navy #172a74 / teal #21a9af family.
   - Low specificity, no !important — any page that intentionally styles a
     component keeps winning.
   - All added motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---- 0. Reclaim the brand tokens Bootstrap hijacks -------------------------
   Bootstrap 4 declares :root { --blue:#007bff; --teal:#20c997; ... } and its
   stylesheet usually loads after each page's own <style> block — so every page
   that uses var(--blue)/var(--teal) as its BRAND token silently renders
   Bootstrap's palette instead (verified live on /marketplace: --blue resolved
   to #007bff, turning all Browse/Search buttons off-brand). polish.css loads
   after Bootstrap, so re-declaring here restores the brand everywhere. */
:root {
  --blue: var(--color-primary-blue, #172a74);
  --teal: var(--color-primary-teal, #21a9af);
}

/* ---- 0b. Accessible ink shades of the brand colours ------------------------
   Measured live: the brand teal #21a9af carries white text at only 2.85:1 and
   reads on white at 2.73:1 — both well under the 4.5:1 minimum for body text.
   The emerald CTA #10b981 is worse at 2.54:1.

   The brand palette itself is NOT changed: #172a74 / #21a9af stay exactly as
   they are for fills, gradients and decoration. These are deeper shades of the
   SAME hues, used only where a colour has to carry text. */
:root {
  /* Deepened once more after the glass wash darkened page backgrounds to
     #e7ecf6: at #17797d the back-link fell to 4.36:1. This reads 5.5:1 both as
     text on the wash and as a fill carrying white text. */
  --color-teal-ink: #15686c;
  --color-success-ink: #047857; /* 5.5:1 with white — same emerald, deeper */
  --color-green-ink: #1e7e34;   /* 5.2:1 with white — for Bootstrap greens */
}

/* Teal CTAs that carry white text */
.b-btn-primary {
  background: var(--color-teal-ink, #17797d);
  border-color: var(--color-teal-ink, #17797d);
}
.b-btn-primary:hover,
.b-btn-primary:focus {
  background: #12666a;
  border-color: #12666a;
}
/* Teal used as link text on a light background.
   `.category-page-header .back-link` is defined per-page with two classes, so
   match that specificity rather than reaching for !important. */
.back-link,
a.back-link,
.category-page-header .back-link,
.category-page-header a.back-link {
  color: var(--color-teal-ink, #17797d);
}

/* Emerald CTAs that carry white text */
.btn-book-now,
.btn-hero.hero-view-btn,
.btn-view-mechanic {
  background: var(--color-success-ink, #047857);
}
.btn-book-now:hover,
.btn-hero.hero-view-btn:hover,
.btn-view-mechanic:hover {
  background: #036a4d;
}

/* Bootstrap greens */
.btn-success {
  background-color: var(--color-green-ink, #1e7e34);
  border-color: var(--color-green-ink, #1e7e34);
}
.btn-success:hover,
.btn-success:focus {
  background-color: #19672b;
  border-color: #19672b;
}
.badge-success {
  background-color: var(--color-green-ink, #1e7e34);
}

/* Bootstrap's muted grey lands at 4.48:1 — a hair under 4.5. Bootstrap ships
   this utility as `color:#6c757d!important`, so matching that flag is the only
   way to override it; this is a like-for-like utility replacement, not a
   specificity escalation. */
.text-muted {
  color: #5c636a !important;
}

/* Shared breadcrumbs (views/partials/breadcrumbs.ejs) carried no styling of
   their own, so links fell back to Bootstrap's #007bff — 3.71:1 on the pale
   page background. Brand them and give the trail some structure. */
.csl-breadcrumbs {
  font-size: var(--font-size-sm, 0.875rem);
}
.csl-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}
.csl-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.csl-breadcrumbs-item + .csl-breadcrumbs-item::before {
  content: "/";
  color: var(--color-text-light, #6b7280);
  opacity: 0.65;
}
.csl-breadcrumbs-item a {
  color: var(--color-primary-blue, #172a74);
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
}
.csl-breadcrumbs-item a:hover,
.csl-breadcrumbs-item a:focus {
  color: var(--color-teal-ink, #17797d);
  text-decoration: underline;
}
.csl-breadcrumbs-item.is-current span {
  color: var(--color-text-light, #6b7280);
}

/* ---- 1. Typography rhythm ------------------------------------------------
   NOTE: no `color` on headings — many pages set white headings over the brand
   gradient, and a global colour would flip them dark (verified live before
   removal). Rhythm only. */
h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h4, h5, h6, .h4, .h5, .h6 {
  line-height: 1.3;
}
p {
  line-height: 1.65;
}
small, .small {
  line-height: 1.5;
}
hr {
  border-top-color: var(--color-border-alt, #e5e7eb);
}
::selection {
  background: color-mix(in srgb, var(--color-primary-teal, #21a9af) 25%, #ffffff);
  color: var(--color-text-dark, #1f2937);
}

/* ---- 1b. Default link colour ----------------------------------------------
   Unstyled links fall back to Bootstrap's #007bff, which reads at only 3.7–3.8:1
   on the pale page backgrounds used across the site. Brand navy reads 12:1.
   Scoped to links WITHOUT their own class so nothing already designed is
   touched, and never applied inside dark/branded chrome where links are white. */
a:not([class]) {
  color: var(--color-primary-blue, #172a74);
}
a:not([class]):hover,
a:not([class]):focus {
  color: var(--color-teal-ink, #17797d);
}
/* Keep light-on-dark chrome exactly as designed */
.header-blue a:not([class]),
.navbar a:not([class]),
footer a:not([class]),
.hero-section a:not([class]),
.cs-hero a:not([class]) {
  color: inherit;
}

/* ---- 2. Navbar legibility -------------------------------------------------
   Bootstrap's navbar-dark leaves links at 50% white, which reads washed-out
   over the brand gradient. Lift resting/hover/active states. */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--transition-fast, 120ms ease), opacity var(--transition-fast, 120ms ease);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  font-weight: var(--font-weight-semibold, 600);
}
.navbar-dark .navbar-brand {
  letter-spacing: 0.04em;
}

/* ---- 3. Forms — one consistent, modern control style --------------------- */
.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  border-color: var(--color-border, #d1d5db);
  border-radius: var(--radius, 8px);
  color: var(--color-text-dark, #1f2937);
  transition: border-color var(--transition-fast, 120ms ease),
    box-shadow var(--transition-fast, 120ms ease);
}
.form-control::placeholder,
textarea::placeholder {
  color: var(--color-text-light, #6b7280);
  opacity: 0.8;
}
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
  border-color: var(--color-primary-teal, #21a9af);
  box-shadow: 0 0 0 0.2rem rgba(33, 169, 175, 0.18);
  outline: none;
}
/* Weight only — labels also appear over dark hero forms, so no colour here */
label,
.form-label,
.col-form-label {
  font-weight: var(--font-weight-medium, 500);
}
.form-text,
.invalid-feedback,
.valid-feedback {
  line-height: 1.4;
}
/* Native date/number pickers inherit the same face */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="number"].form-control {
  color: var(--color-text-dark, #1f2937);
}

/* ---- 4. Buttons ----------------------------------------------------------- */
.btn {
  border-radius: var(--radius-pill, 8px);
  transition: transform var(--transition-fast, 120ms ease),
    box-shadow var(--transition-fast, 120ms ease),
    background-color var(--transition-fast, 120ms ease),
    border-color var(--transition-fast, 120ms ease),
    color var(--transition-fast, 120ms ease),
    filter var(--transition-fast, 120ms ease);
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary-teal, #21a9af);
  outline-offset: 2px;
  box-shadow: none;
}
/* Brand-align Bootstrap's default blue primary with the palette navy */
.btn-primary {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover, #153066);
  border-color: var(--color-primary-hover, #153066);
}
.btn-primary:not(:disabled):active {
  background-color: #101f56;
  border-color: #101f56;
}
.btn-outline-primary {
  color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
  color: #fff;
}
.btn-info {
  background-color: var(--color-primary-teal, #21a9af);
  border-color: var(--color-primary-teal, #21a9af);
}
.btn-info:hover,
.btn-info:focus {
  background-color: #1a9196;
  border-color: #1a9196;
}
.btn-link {
  color: var(--color-primary-blue, #172a74);
}
.btn-link:hover {
  color: var(--color-primary-teal, #21a9af);
}

/* ---- 5. Cards & panels ----------------------------------------------------- */
.card {
  border-color: var(--color-border-alt, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  transition: box-shadow var(--transition, 240ms ease);
}
.card-header {
  border-bottom-color: var(--color-border-alt, #e5e7eb);
}
.card-footer {
  border-top-color: var(--color-border-alt, #e5e7eb);
}

/* ---- 6. Tables -------------------------------------------------------------- */
.table thead th {
  border-bottom: 2px solid var(--color-border-alt, #e5e7eb);
  color: var(--color-text-dark, #1f2937);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table td,
.table th {
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: rgba(33, 169, 175, 0.05);
}

/* ---- 7. Bootstrap components — dropdowns, modals, alerts, badges, nav-pills */
.dropdown-menu {
  border-color: var(--color-border-alt, #e5e7eb);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}
.dropdown-item {
  transition: background-color var(--transition-fast, 120ms ease),
    color var(--transition-fast, 120ms ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(33, 169, 175, 0.1);
  color: var(--color-text-dark, #1f2937);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary-blue, #172a74);
  color: #fff;
}
.modal-content {
  border: none;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(16, 25, 47, 0.18));
}
.modal-header {
  border-bottom-color: var(--color-border-alt, #e5e7eb);
}
.modal-footer {
  border-top-color: var(--color-border-alt, #e5e7eb);
}
.alert {
  border-radius: var(--radius, 8px);
}
.badge {
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
}
.badge-primary {
  background-color: var(--color-primary-blue, #172a74);
}
.badge-info {
  background-color: var(--color-primary-teal, #21a9af);
}
.nav-pills .nav-link.active {
  background-color: var(--color-primary-blue, #172a74);
}
.nav-tabs .nav-link.active {
  color: var(--color-primary-blue, #172a74);
  font-weight: var(--font-weight-semibold, 600);
}
.page-item.active .page-link {
  background-color: var(--color-primary-blue, #172a74);
  border-color: var(--color-primary-blue, #172a74);
}
.page-link {
  color: var(--color-primary-blue, #172a74);
}
.page-link:hover {
  color: var(--color-primary-hover, #153066);
  background-color: rgba(33, 169, 175, 0.08);
}
.progress-bar {
  background-color: var(--color-primary-teal, #21a9af);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-primary-teal, #21a9af);
  border-color: var(--color-primary-teal, #21a9af);
}

/* ---- 8. Footer refinement --------------------------------------------------- */
footer.footer a {
  transition: color var(--transition-fast, 120ms ease), opacity var(--transition-fast, 120ms ease);
}
footer.footer a:hover {
  color: var(--color-primary-teal, #21a9af);
  text-decoration: none;
}
footer.footer .footer-heading {
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.92;
  margin-bottom: 0.9rem;
}
footer.footer .footer-links li {
  margin-bottom: 0.45rem;
}
footer.footer .footer-links a {
  opacity: 0.82;
}
footer.footer .footer-links a:hover {
  opacity: 1;
}
footer.footer .footer-description {
  opacity: 0.8;
  line-height: 1.6;
}
footer.footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color var(--transition-fast, 120ms ease),
    border-color var(--transition-fast, 120ms ease),
    transform var(--transition-fast, 120ms ease);
}
footer.footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
footer.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0.85;
}

/* ---- 9. Details: scrollbar, images, disabled states ------------------------- */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-bg-alt, #f8fafc);
  }
  ::-webkit-scrollbar-thumb {
    background: #c3cad6;
    border-radius: 8px;
    border: 2px solid var(--color-bg-alt, #f8fafc);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9aa6b8;
  }
}
.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
}
img {
  object-position: center;
}

/* ==========================================================================
   GLASS LAYER — modern glassmorphism, site-wide
   --------------------------------------------------------------------------
   Two moves make the whole site read "glassy" without touching any layout:

   1. An ambient page wash: instead of flat white/grey, the page carries two
      very faint brand-tinted glows (teal top-right, navy bottom-left). On its
      own it is barely visible — its job is to give frosted panels something
      to blur.
   2. A frosted-panel recipe applied to the card classes that already exist
      across the site. Translucent white + backdrop blur + hairline highlight
      border + soft deep shadow. Text stays dark-on-near-white, so every
      contrast ratio fixed above is preserved.

   Pages that set their own body background keep it (same specificity, page
   CSS loads after this file's <link> in the shared header).
   ========================================================================== */

/* ---- G1. Ambient wash --------------------------------------------------------
   Written as `html body` (specificity 0,0,2) so it beats the plain
   `body { background: #f8fafc }` rules pages declare later, without needing
   !important. Pages that deliberately set a *branded* body background use a
   class or higher specificity and still win. */
html body {
  background-color: #e7ecf6;
  background-image:
    radial-gradient(56% 50% at 90% -4%, rgba(33, 169, 175, 0.2), transparent 66%),
    radial-gradient(50% 46% at 0% 104%, rgba(23, 42, 116, 0.17), transparent 64%),
    radial-gradient(38% 34% at 50% 46%, rgba(90, 141, 255, 0.08), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* The homepage hero owns the full viewport and supplies its own gradient. */
html body.home-page {
  background-image: none;
}

/* ---- G1b. Let the wash reach the page ----------------------------------------
   Full-bleed page/section wrappers paint a flat near-white (#f8fafc and
   friends) that completely hides the wash, leaving the frosted panels nothing
   to blur. Those wrappers become transparent so the ambient tint shows through.

   Deliberately limited to page- and section-level wrappers. Small components
   that use the same neutral as a genuine fill — chips, previews, stat cards,
   empty states, reminder rows — keep it; clearing those would flatten the
   design rather than glassify it.

   Prefixed `html body` (0,0,3) to beat the pages' own `.x { background: … }`
   inline rules, which load after this file. */
html body .directory-section,
html body .categories-section,
html body .listings-section,
html body .quick-page,
html body .marketplace-page,
html body .marketplace-category-page,
html body .marketplace-category-hub-page,
html body .amp-list-page,
html body [class$="-detail-page"] {
  background-color: transparent;
}

/* ---- G2. Frosted panel recipe ------------------------------------------------ */
.card,
.b-card,
.cat-card,
.sub-card,
.sub-plans-hub-inner,
.hla-sidebar-card,
.dropdown-menu,
.modal-content {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  /* Brighter top edge, softer bottom — reads like a lit pane of glass. */
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 34px rgba(16, 25, 47, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* Solid-enough fallback where backdrop-filter isn't supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .b-card,
  .cat-card,
  .sub-card,
  .sub-plans-hub-inner,
  .hla-sidebar-card,
  .dropdown-menu,
  .modal-content {
    background-color: rgba(255, 255, 255, 0.94);
  }
}
/* Hover: panels lift a touch more */
.card:hover,
.b-card:hover,
.cat-card:hover {
  box-shadow: 0 14px 44px rgba(16, 25, 47, 0.16);
}
/* Keep the panels' own headers readable over the frost */
.card .card-header {
  background-color: rgba(255, 255, 255, 0.5);
}

/* ---- G3. Glass chips: filter pills & sort controls --------------------------- */
.filter-pill,
.sort-select {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(16, 25, 47, 0.06);
}

/* ---- G4. Modal backdrop blurs the page behind it ------------------------------ */
.modal-backdrop.show {
  background: rgba(10, 18, 45, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 1;
}

/* ---- 10. Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .dropdown-item,
  .form-control,
  .custom-select,
  .navbar-dark .navbar-nav .nav-link,
  footer.footer a {
    transition: none;
  }
}

/* ==========================================================================
   11. COMPACT HERO + SMALLER LISTING TEXT
   Client review: hero blocks pushed the actual content below the fold, and the
   text on listing/post cards was oversized. Reduce both without touching the
   palette. Scoped with `html body` so it wins over the per-page <style> blocks
   that load before this file, but keeps ordinary specificity.
   ========================================================================== */

/* --- Hero: roughly half the vertical space it used to take --- */
html body .hero-section,
html body .hero-content,
html body .page-hero,
html body .info-hero {
  padding-top: 40px;
  padding-bottom: 28px;
}
@media (max-width: 767.98px) {
  html body .hero-section,
  html body .hero-content,
  html body .page-hero,
  html body .info-hero {
    padding-top: 26px;
    padding-bottom: 20px;
  }
}
/* Heroes that reserved a full screen no longer need to — the title is one word. */
html body .hero-section[style*="min-height"],
html body .page-hero[style*="min-height"] { min-height: 0 !important; }
html body .hero,
html body .hero-section { min-height: 0; }

html body .hero-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
html body .hero-subtitle {
  font-size: 0.975rem;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 60ch;
}
html body .hero-cta { margin-top: 6px; }
html body .hero-stats { margin-top: 12px; }
@media (max-width: 767.98px) {
  html body .hero-title { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  html body .hero-subtitle { font-size: 0.9rem; }
}

/* --- Listing / post cards: smaller, tighter copy --- */
html body .post-card,
html body .vehicle-card,
html body .listing-card,
html body .vsh-card,
html body .pch-card,
html body .afd-card {
  font-size: 0.9rem;
  line-height: 1.45;
}
html body .card-title,
html body .post-title,
html body .listing-title,
html body .vehicle-card .card-title,
html body .afd-card-title {
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 4px;
}
html body .card-text,
html body .post-text,
html body .post-body,
html body .listing-description,
html body .card-description {
  font-size: 0.875rem;
  line-height: 1.45;
}
html body .post-meta,
html body .listing-meta,
html body .card-meta,
html body .post-author-name {
  font-size: 0.8rem;
}
html body .post-price,
html body .listing-price,
html body .card-price { font-size: 1.05rem; line-height: 1.2; }
html body .badge,
html body .listing-badge,
html body .cat-card-badge { font-size: 0.72rem; }

/* Long descriptions on cards clamp instead of stretching the grid. */
html body .card-text,
html body .post-text,
html body .listing-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Section headings between hero and the grid were competing with the hero. */
html body .section-title { font-size: 1.35rem; line-height: 1.25; margin-bottom: 10px; }
html body .listings-header { margin-bottom: 12px; }