/* ==========================================================================
   Servero design system
   A small, hand-rolled layer on top of Bootstrap 5's grid/utilities/JS
   components (modal, collapse, dropdown). Bootstrap supplies structure;
   everything about how Servero actually looks lives here, prefixed `sv-`
   so it never collides with a Bootstrap class.
   ========================================================================== */

:root {
  /* Surfaces */
  --sv-bg:            #f6f7fb;
  --sv-surface:       #ffffff;
  --sv-surface-alt:   #f1f5fb;   /* soft cool panels: step cards, quote highlight */
  --sv-surface-warm:  #f1f5fb;   /* soft cool panels (was a warm orange tint) */

  /* Borders */
  --sv-border:        #e4e7ee;
  --sv-border-soft:   #edf0f6;

  /* Text */
  --sv-heading:       #101828;
  --sv-text:          #344054;
  --sv-body:          #475467;
  --sv-muted:         #667085;
  --sv-on-primary:    #ffffff;

  /* Brand - royal blue, matching the Master of All Trades mark */
  --sv-primary:       #4169e1;
  --sv-primary-dark:  #3454b4;
  --sv-primary-light: #e6ecfb;
  --sv-accent:        #4169e1;   /* was green - one brand blue everywhere */
  --sv-accent-dark:   #3454b4;
  --sv-accent-light:  #e6ecfb;
  --sv-gold:          #d99a2b;

  /* Status */
  --sv-success:       #3454b4;   /* positive states use the brand blue, not green */
  --sv-success-dark:  #2a4494;
  --sv-success-bg:    #e6ecfb;
  --sv-warning:       #475467;   /* pending/attention: neutral slate, not orange */
  --sv-warning-bg:    #eef1f5;
  --sv-danger:        #dc2626;
  --sv-danger-bg:     #fef2f2;
  --sv-info:          #175cd3;
  --sv-info-bg:       #eff4ff;

  /* Footer */
  --sv-footer-bg:     #0d1a22;
  --sv-footer-fg:     #a3b2ba;
  --sv-footer-rule:   #1c2f39;

  /* Shape */
  --sv-r-card:  0;
  --sv-r-panel: 0;
  --sv-r-tile:  0;
  --sv-r-btn:   0;
  --sv-r-pill:  0;
  --sv-r-input: 0;

  /* Shadow */
  --sv-shadow-card:   0 4px 16px rgba(16, 24, 40, 0.06);
  --sv-shadow-tile:   0 2px 10px rgba(16, 24, 40, 0.05);
  --sv-shadow-search: 0 12px 28px rgba(16, 24, 40, 0.1);
  --sv-shadow-btn:    0 2px 8px rgba(65, 105, 225, 0.22);
  --sv-shadow-soft:   0 1px 3px rgba(16, 24, 40, 0.04);

  --sv-maxw: 1200px;
}

/* --------------------------------------------------------------- Base --- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Horizontal-overflow safety net. Nothing on the page is meant to be wider
   than the viewport, but a wide table (see .sv-table-wrap below), a long
   unbroken string, or any other component that briefly computes wider
   than the screen would otherwise push the *entire* page into horizontal
   scroll - on mobile that reads as content "leaking" off the right edge
   instead of staying inside its card. This is a backstop, not a fix for
   any one component: `overflow-x: hidden` only ever clips at the
   html/body edge, so a component that needs its own internal scrolling
   (a wide table, a code block) still needs that handled locally too. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Sticky footer: without this, a short page (an empty inbox, a thin legal
   page) leaves the footer sitting right under the content instead of
   pinned to the bottom of the viewport - the "footer is floating"
   problem. `main` is the only flex item that grows, so it always fills
   whatever space the content doesn't, pushing the footer down to the
   bottom on short pages while changing nothing on long ones (where
   content already exceeds 100vh and this rule has no effect either way). */
body {
  background-color: var(--sv-bg);
  color: var(--sv-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer, body > .sv-footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6, .sv-heading-font {
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--sv-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--sv-primary); text-decoration: none; }
a:hover { color: var(--sv-primary-dark); }

.sv-container {
  max-width: var(--sv-maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.sv-muted { color: var(--sv-muted) !important; }
.sv-section { padding: 4rem 0; }
.sv-section-sm { padding: 2.5rem 0; }
.visually-hidden-focusable:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------- Buttons -- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--sv-r-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.sv-btn-primary { background: var(--sv-primary); color: #fff; box-shadow: var(--sv-shadow-btn); }
.sv-btn-primary:hover { background: var(--sv-primary-dark); color: #fff; }
.sv-btn-accent { background: var(--sv-accent); color: #fff; }
.sv-btn-accent:hover { background: var(--sv-accent-dark); color: #fff; }
.sv-btn-outline { background: transparent; border-color: var(--sv-border); color: var(--sv-heading); }
.sv-btn-outline:hover { border-color: var(--sv-primary); color: var(--sv-primary); }
.sv-btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.sv-btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.sv-btn-ghost { background: transparent; border-color: transparent; color: var(--sv-primary); padding-left: 0.5rem; padding-right: 0.5rem; }
.sv-btn-ghost:hover { background: var(--sv-primary-light); }
.sv-btn-danger { background: var(--sv-danger); color: #fff; }
.sv-btn-danger:hover { background: #b91c1c; color: #fff; }
.sv-btn-outline-danger { background: transparent; border-color: #f3c2c2; color: var(--sv-danger); }
.sv-btn-outline-danger:hover { background: var(--sv-danger-bg); border-color: var(--sv-danger); color: var(--sv-danger); }
.sv-btn:disabled, .sv-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Green 'go' button - used for the lead-credit Buy action, which greys out
   into a plainly inert control while no Payments integration is active
   (see leads/templates/leads/wallet.html). */
.sv-btn-success { background: var(--sv-success); color: #fff; box-shadow: var(--sv-shadow-btn); }
.sv-btn-success:hover { background: var(--sv-success-dark); color: #fff; }
.sv-btn-success:disabled,
.sv-btn-success:disabled:hover { background: var(--sv-border); color: var(--sv-muted); box-shadow: none; }
.sv-btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.sv-btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.sv-btn-pill { border-radius: var(--sv-r-pill); }
.sv-btn-block { width: 100%; }
.sv-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --------------------------------------------------------------- Forms -- */
.sv-input, .sv-select, textarea.sv-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--sv-border);
  border-radius: var(--sv-r-input);
  background: var(--sv-surface);
  color: var(--sv-text);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sv-input:focus, .sv-select:focus, textarea.sv-input:focus {
  outline: none;
  border-color: var(--sv-primary);
  box-shadow: 0 0 0 3px var(--sv-primary-light);
}
.sv-label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--sv-heading); margin-bottom: 0.35rem; }
.sv-help { font-size: 0.82rem; color: var(--sv-muted); margin-top: 0.3rem; }
.sv-field { margin-bottom: 1.25rem; }
/* Checkbox lists inside a console form (e.g. the pack picker on a lead
   credit deal). Django renders CheckboxSelectMultiple as a <ul>, so the
   list bullets and indent have to come off before it reads as a field. */
.sv-check-grid ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.sv-check-grid li { margin-bottom: 0.35rem; }
.sv-check-grid label { margin-left: 0.4rem; }
.sv-error { color: var(--sv-danger); font-size: 0.82rem; margin-top: 0.3rem; }
.sv-form-errors {
  background: var(--sv-danger-bg); color: var(--sv-danger);
  border-radius: var(--sv-r-panel); padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}
.sv-radio-group { display: flex; flex-direction: column; gap: 0.6rem; }
.sv-radio-card {
  display: flex; align-items: flex-start; gap: 0.75rem;
  border: 1.5px solid var(--sv-border); border-radius: var(--sv-r-panel);
  padding: 0.9rem 1rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.sv-radio-card:has(input:checked) { border-color: var(--sv-primary); background: var(--sv-primary-light); }

/* ------------------------------------------------ Service picker (form) -
   Grouped, searchable "Services you offer" checklist on the provider form
   (see providers/_provider_form.html) - a Bootstrap accordion of
   categories, restyled to match the rest of Servero's design system rather
   than Bootstrap's own default look, so a pro isn't scrolling a long flat
   checkbox list to find their services. */
.sv-search-bar-sm { padding: 0.2rem 0.2rem 0.2rem 0.9rem; margin-bottom: 1rem; }
.sv-search-bar-sm input { padding: 0.5rem 0; font-size: 0.9rem; }

.sv-service-accordion {
  border: 1.5px solid var(--sv-border); border-radius: var(--sv-r-panel);
  overflow: hidden;
}
.sv-service-accordion .accordion-item { border: none; border-bottom: 1px solid var(--sv-border-soft); background: var(--sv-surface); }
.sv-service-accordion .accordion-item:last-child { border-bottom: none; }
.sv-service-accordion .accordion-item.d-none { display: none; }
.sv-service-accordion .accordion-button {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.65rem;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--sv-heading);
  background: var(--sv-surface); padding: 0.85rem 1.1rem; box-shadow: none;
}
@media (max-width: 575.98px) {
  .sv-service-accordion .accordion-button { padding: 0.75rem 0.85rem; font-size: 0.88rem; }
  .sv-service-accordion .accordion-body { padding: 0.25rem 0.85rem 0.85rem; }
  .sv-service-row { padding: 0.55rem 0.7rem; font-size: 0.85rem; }
}
.sv-service-accordion .accordion-button:not(.collapsed) { background: var(--sv-primary-light); color: var(--sv-primary-dark); }
.sv-service-accordion .accordion-button:focus { box-shadow: 0 0 0 3px var(--sv-primary-light); z-index: 1; }
.sv-service-accordion .accordion-button::after { margin-left: auto; flex-shrink: 0; }
.sv-service-cat-icon { color: var(--sv-primary); font-size: 1.05rem; flex-shrink: 0; }
.sv-service-cat-name { flex: 1; min-width: 0; }
.sv-service-cat-count {
  font-size: 0.74rem; font-weight: 700; color: var(--sv-primary-dark); background: #fff;
  padding: 0.15rem 0.55rem; border-radius: var(--sv-r-pill); margin-right: 0.35rem;
}
.sv-service-cat-count:empty { display: none; }
.sv-service-accordion .accordion-button.collapsed .sv-service-cat-count { background: var(--sv-primary-light); }
.sv-service-accordion .accordion-body { padding: 0.25rem 1.1rem 1.1rem; }

.sv-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (max-width: 575.98px) { .sv-service-grid { grid-template-columns: 1fr; } }
.sv-service-row { padding: 0.6rem 0.85rem; font-size: 0.88rem; }
.sv-service-row.d-none { display: none; }
.sv-service-empty { padding: 0.5rem 0.1rem 0; }

/* --------------------------------------------------------------- Cards -- */
.sv-card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border-soft);
  border-radius: var(--sv-r-card);
  box-shadow: var(--sv-shadow-card);
  padding: 1.75rem;
}
.sv-card-flat { border-radius: var(--sv-r-panel); box-shadow: var(--sv-shadow-soft); padding: 1.25rem; }
.sv-panel { background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); }

/* --------------------------------------------------------------- Badges - */
.sv-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; padding: 0.28rem 0.7rem;
  border-radius: var(--sv-r-pill); text-transform: uppercase; letter-spacing: 0.03em;
}
.sv-badge-success { background: var(--sv-success-bg); color: var(--sv-success); }
.sv-badge-warning { background: var(--sv-warning-bg); color: var(--sv-warning); }
.sv-badge-danger  { background: var(--sv-danger-bg);  color: var(--sv-danger); }
.sv-badge-info    { background: var(--sv-info-bg);    color: var(--sv-info); }
.sv-badge-neutral { background: var(--sv-border-soft); color: var(--sv-muted); }
.sv-badge-accent  { background: var(--sv-accent-light); color: var(--sv-accent-dark); }
/* Promotions on lead credit packs (leads/templates/leads/wallet.html).
   Deliberately the danger red rather than the success green: green is
   already the Buy button and the "verified" badge on this site, so a green
   sale flash beside a green button reads as one blob. Red is the
   conventional sale colour and contrasts with the action. */
.sv-badge-sale { background: var(--sv-danger-bg); color: var(--sv-danger); }
.sv-sale-save { color: var(--sv-success); font-weight: 600; margin-left: 0.35rem; }
.sv-pack-on-sale { border-color: var(--sv-danger); }

.sv-stars { color: var(--sv-gold); font-size: 0.9rem; letter-spacing: 1px; }
.sv-stars .bi-star { color: var(--sv-border); }

/* -------------------------------------------------------------- Topbar - */
.sv-topbar {
  background: var(--sv-surface);
  border-bottom: 1px solid var(--sv-border-soft);
  position: sticky; top: 0; z-index: 1030;
}
.sv-topbar-inner {
  max-width: var(--sv-maxw); margin: 0 auto; padding: 0.85rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
@media (max-width: 575.98px) {
  .sv-topbar-inner { padding: 0.65rem 0.85rem; gap: 0.6rem; }
  .sv-logo { height: 28px; }
}
.sv-brand { display: flex; align-items: center; color: var(--sv-heading); font-weight: 700; }
.sv-brand:hover { color: var(--sv-heading); }
.sv-logo { height: 36px; width: auto; display: block; }
.sv-nav-toggle {
  background: transparent; border: 1px solid var(--sv-border); border-radius: var(--sv-r-btn);
  font-size: 1.3rem; padding: 0.3rem 0.6rem; color: var(--sv-heading); flex-shrink: 0;
}
.sv-nav-toggle:hover { background: var(--sv-primary-light); border-color: var(--sv-primary-light); }
.sv-nav-end { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
@media (max-width: 575.98px) {
  .sv-nav-end { gap: 0.35rem; }
  .sv-nav-end .sv-btn-sm { padding: 0.45rem 0.65rem; }
}
.sv-nav-signin { padding: 0.55rem 0.9rem; font-weight: 600; color: var(--sv-heading); }
@media (max-width: 400px) { .sv-nav-signin { padding: 0.55rem 0.5rem; font-size: 0.88rem; } }
.sv-avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sv-primary); color: #fff;
  border: none; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sv-inbox-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.75rem; border-radius: var(--sv-r-btn);
  color: var(--sv-body); font-weight: 600; font-size: 0.9rem;
}
.sv-inbox-link i { font-size: 1.1rem; }
.sv-inbox-link:hover, .sv-inbox-link.is-active { background: var(--sv-primary-light); color: var(--sv-primary-dark); }
.sv-unread-pill {
  background: var(--sv-accent); color: #fff; font-size: 0.68rem; font-weight: 700;
  border-radius: 50%; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.sv-dropdown { border-radius: var(--sv-r-panel); border: 1px solid var(--sv-border); box-shadow: var(--sv-shadow-card); padding: 0.4rem; min-width: 220px; }
.sv-dropdown .dropdown-item { border-radius: 0; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.sv-dropdown .dropdown-item:hover { background: var(--sv-primary-light); }

/* ------------------------------------------------------------- Sidebar - */
/* Bootstrap's offcanvas component - its own show/hide, backdrop, and
   focus-trap behavior, so this only needs to style what's inside it. */
.sv-sidebar { width: 300px; }
.sv-sidebar .offcanvas-header { border-bottom: 1px solid var(--sv-border-soft); padding: 1rem 1.25rem; }
.sv-sidebar .offcanvas-body { padding: 0.75rem; }
.sv-sidebar-nav { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; gap: 0.15rem; }
.sv-sidebar-nav a {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: var(--sv-r-btn);
  color: var(--sv-body); font-weight: 500; font-size: 0.95rem;
}
.sv-sidebar-nav a i { font-size: 1.1rem; width: 1.3rem; text-align: center; color: var(--sv-muted); flex-shrink: 0; }
.sv-sidebar-nav a:hover, .sv-sidebar-nav a.is-active { background: var(--sv-primary-light); color: var(--sv-primary-dark); }
.sv-sidebar-nav a:hover i, .sv-sidebar-nav a.is-active i { color: var(--sv-primary-dark); }
.sv-sidebar-footer { padding: 1rem 0.85rem 0.5rem; display: flex; justify-content: center; }

/* Frosted-glass sidebar: a floating white translucent panel inset from the
   screen edges. Sized to always fit - never wider than the screen minus a
   gutter, never taller than the visible height. */
.offcanvas.sv-sidebar {
  top: 12px; bottom: 12px; left: 12px; height: auto;
  width: min(300px, calc(100vw - 24px));
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Fully off-screen when closed (the inset would otherwise leave a sliver). */
  transform: translateX(calc(-100% - 24px));
}
.offcanvas.sv-sidebar.showing, .offcanvas.sv-sidebar.show:not(.hiding) { transform: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .offcanvas.sv-sidebar {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .offcanvas.sv-sidebar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sv-sidebar .offcanvas-header { border-bottom-color: rgba(16, 24, 40, 0.07); }
.sv-sidebar .offcanvas-body { overflow-y: auto; }
.sv-sidebar-nav a { color: var(--sv-heading); border: 1px solid transparent; }
.sv-sidebar-nav a:hover, .sv-sidebar-nav a.is-active {
  background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); color: var(--sv-primary-dark);
}
/* Lighter dim behind it so the page shows through the glass. */
.offcanvas-backdrop.show { opacity: 0.18; }

/* --------------------------------------------------------------- Hero --- */
.sv-hero {
  background: var(--sv-surface);
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.sv-hero-inner { position: relative; z-index: 1; }
.sv-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
@media (max-width: 991.98px) { .sv-hero-grid { grid-template-columns: 1fr; gap: 2rem; } }

.sv-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--sv-primary-light); color: var(--sv-primary-dark);
  font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.8rem;
  border-radius: var(--sv-r-pill); margin-bottom: 1.1rem;
}
.sv-hero h1 { font-size: clamp(2rem, 3.6vw, 2.85rem); max-width: 560px; line-height: 1.15; }
.sv-hero h1 .sv-accent-word { color: var(--sv-primary); }
.sv-hero p.sv-lede { color: var(--sv-body); font-size: 1.1rem; max-width: 520px; margin-top: 1rem; }

.sv-search-card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border-soft);
  border-radius: var(--sv-r-card);
  box-shadow: var(--sv-shadow-search);
  padding: 1.35rem;
  margin-top: 1.75rem;
  max-width: 620px;
}
.sv-search-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; }
@media (max-width: 767.98px) { .sv-search-grid { grid-template-columns: 1fr; } }

.sv-trust-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.75rem; }
.sv-trust-stat { display: flex; align-items: baseline; gap: 0.4rem; }
.sv-trust-stat .num { font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--sv-heading); }
.sv-trust-stat .label { color: var(--sv-muted); font-size: 0.85rem; }

/* -------------------------------------------------------- Hero collage - */
.sv-hero-collage { position: relative; height: 380px; }
.sv-hero-collage img, .sv-hero-collage .sv-cat-fallback {
  position: absolute; object-fit: cover; border-radius: var(--sv-r-card);
  box-shadow: var(--sv-shadow-card); border: 4px solid var(--sv-surface);
}
.sv-hero-collage .c1 { width: 62%; height: 72%; top: 0; left: 0; z-index: 2; }
.sv-hero-collage .c2 { width: 48%; height: 46%; bottom: 0; right: 0; z-index: 3; }
.sv-hero-collage .c3 { width: 34%; height: 34%; top: 8%; right: 4%; z-index: 1; }
@media (max-width: 991.98px) { .sv-hero-collage { height: 300px; } }

/* ---------------------------------------------------------- Categories - */
.sv-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.75rem; }
.sv-section-head p { margin: 0.25rem 0 0; }

.sv-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 991.98px) { .sv-cat-grid { grid-template-columns: repeat(2, 1fr); } }
/* Phones: two cards per row (was one) so all eight categories fit in far less
   scrolling, with the label sizes trimmed to suit the narrower cards. */
@media (max-width: 575.98px) {
  .sv-section-head { flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.25rem; }
  .sv-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .sv-cat-card .sv-cat-label { padding: 0.6rem 0.65rem; gap: 0.25rem; }
  .sv-cat-card .sv-cat-name { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
  .sv-cat-card .sv-cat-count { font-size: 0.7rem; }
  .sv-cat-fallback i { font-size: 2rem; }
}
.sv-cat-more { margin-top: 1.25rem; }
.sv-cat-all-top { white-space: nowrap; }

.sv-cat-card {
  position: relative; display: block; border-radius: var(--sv-r-tile); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--sv-shadow-tile); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sv-cat-card:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow-card); }
.sv-cat-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-cat-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.sv-cat-fallback i { font-size: 2.75rem; color: rgba(255,255,255,0.5); }
.sv-cat-card .sv-cat-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.15) 55%, rgba(10,10,10,0) 75%);
}
.sv-cat-card .sv-cat-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem;
  color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
}
/* A pill with its own solid background, not a bare text color relying on
   the scrim gradient behind it - a light photo, a bright fallback tint, or
   (see the standalone .sv-cat-name rule below, used by the unrelated
   .sv-cat-tile component) another rule's color declaration winning the
   cascade could all otherwise leave the name unreadable. Sized to the text
   itself (inline-block, no forced width) rather than a full-width bar. */
.sv-cat-card .sv-cat-name {
  display: inline-block; max-width: 100%;
  font-weight: 700; font-size: 0.9rem; line-height: 1.3;
  color: #fff; background: rgba(10, 10, 10, 0.6);
  padding: 0.3rem 0.75rem; border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.sv-cat-card .sv-cat-count { font-size: 0.76rem; color: rgba(255,255,255,0.85); padding-left: 0.2rem; }

.sv-cat-tile {
  background: var(--sv-surface); border-radius: var(--sv-r-tile); box-shadow: var(--sv-shadow-tile);
  padding: 1.5rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--sv-border-soft); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sv-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow-card); }
.sv-cat-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--sv-primary-light);
  color: var(--sv-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.sv-cat-tile:nth-child(3n+2) .sv-cat-icon { background: var(--sv-accent-light); color: var(--sv-accent-dark); }
.sv-cat-name { font-weight: 600; color: var(--sv-heading); font-size: 0.98rem; }
.sv-cat-count { font-size: 0.8rem; color: var(--sv-muted); }

.sv-cat-banner { position: relative; border-radius: var(--sv-r-card); overflow: hidden; height: 200px; margin-bottom: 2rem; }
.sv-cat-banner img { width: 100%; height: 100%; object-fit: cover; }
.sv-cat-banner .sv-cat-fallback i { font-size: 3.5rem; }
.sv-cat-banner .sv-cat-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,0.68) 0%, rgba(10,10,10,0.1) 60%, rgba(10,10,10,0) 100%); }
.sv-cat-banner .sv-cat-banner-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem; color: #fff; }

/* ---------------------------------------------------------- How it works */
.sv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 767.98px) { .sv-steps { grid-template-columns: 1fr; } }
.sv-step-card { background: var(--sv-surface-alt); border-radius: var(--sv-r-card); padding: 2rem; position: relative; }
.sv-step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--sv-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Sora', sans-serif;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------- Provider card */
.sv-provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 991.98px) { .sv-provider-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sv-provider-grid { grid-template-columns: 1fr; } }

.sv-provider-card { display: block; color: inherit; }
.sv-provider-card:hover { color: inherit; }
/* Also the class on <img class="sv-provider-cover"> when a pro has set a
   cover_image (providers.models.ProviderProfile.cover_image) - width/
   object-fit here are no-ops on the plain initial-letter <div> below but
   make the <img> variant fill this exact same box, so every layout that
   already sizes/positions .sv-provider-cover (the grid card above and
   .sv-search-list's horizontal override further down) doesn't need its
   own rule for the image case. */
.sv-provider-cover {
  height: 140px; border-radius: var(--sv-r-tile) var(--sv-r-tile) 0 0;
  background: linear-gradient(135deg, var(--sv-primary-light), var(--sv-accent-light));
  display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif;
  font-size: 2rem; font-weight: 700; color: var(--sv-primary-dark);
  width: 100%; object-fit: cover;
}
.sv-provider-body { border: 1px solid var(--sv-border-soft); border-top: none; border-radius: 0 0 var(--sv-r-tile) var(--sv-r-tile); padding: 1.1rem 1.25rem; background: var(--sv-surface); box-shadow: var(--sv-shadow-tile); }
.sv-provider-name { font-weight: 700; color: var(--sv-heading); margin-bottom: 0.15rem; }
.sv-provider-meta { font-size: 0.85rem; color: var(--sv-muted); }
.sv-verified-tick { color: var(--sv-primary); }

/* Subscriber photo carousel on a provider card - takes the place of the
   single static .sv-provider-cover image/tile above for a subscribing pro
   with more than one portfolio photo (see main/components/_provider_card.
   html). Sits inside the same box .sv-provider-cover already sizes (140px
   tall in the grid layout, stretched to the row height in .sv-search-list
   below), so no separate height rule is needed here - each slide is
   absolutely positioned to stack on top of the others and cross-fades via
   the `.is-active` toggle the card's own inline script drives (mirrors
   ads/_sponsor_slider.html's rotation timer, without the clickable-dot
   part - see that template for why: this card is one big <a>, and a
   <button> dot nested inside it would be invalid, click-fighting markup). */
.sv-provider-carousel { position: relative; padding: 0; overflow: hidden; }
.sv-provider-carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.sv-provider-carousel-slide.is-active { opacity: 1; }
.sv-provider-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 0.5rem; z-index: 1;
  display: flex; justify-content: center; gap: 0.3rem;
}
.sv-provider-carousel-dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.sv-provider-carousel-dot.is-active { background: #fff; }

/* ------------------------------------------------------------ Ad banners --
   {% ad_banner %} (ads/templates/ads/_ad_banner.html). These classes were
   missing entirely until now - the templates referenced them, so on a real
   page the ad box rendered as a bare, unstyled label with no border, no
   background, and no dashed placeholder at all, nothing like the intended
   look. Ported from a sibling project's proven `.cc-ad-*` rules (same
   design, `cc-` renamed to `sv-` and colors swapped for this file's own
   `--sv-*` tokens) rather than designed from scratch. */

.sv-ad-wrapper {
  max-width: var(--sv-maxw);
  /* Bottom margin too, not just top - with only a top margin, whatever
     comes right after the ad box (a category grid, a provider grid...)
     sat flush against it with no gap at all, which is what made "there's
     no space between the ad and the listing below it" a real, visible bug
     rather than just a design nitpick. */
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.sv-ad-wrapper-bottom { margin: 0 auto 4rem; }

.sv-ad-banner {
  width: 100%;
  min-height: 90px;
  background-color: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-r-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sv-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--sv-shadow-tile);
  overflow: hidden;
  padding: 0.5rem;
  box-sizing: border-box;
}
.sv-ad-label { margin-bottom: 0.25rem; font-size: 0.65rem; color: var(--sv-border); }
.sv-ad-placeholder {
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-bg);
  border-radius: 0;
  border: 1px dashed var(--sv-border);
  color: var(--sv-muted);
  font-size: 0.85rem;
  box-sizing: border-box;
}
.sv-ad-dev {
  padding: 15px;
  text-align: center;
  color: var(--sv-muted);
  font-size: 13px;
  text-transform: none;
}

@media (max-width: 575.98px) {
  .sv-ad-wrapper { padding: 0 1rem; }
}

/* Native sponsor cards (ads.models.Sponsor) shown in an ad slot instead of
   an empty box, whenever the master ad switch is on but no real AdSense
   unit is configured for that slot yet - see ads/templatetags/ads.py's
   _ad_context() for the exact fallback order, and
   ads/templates/ads/_sponsor_slider.html for the markup/script this
   styles. One slide shows at a time, auto-advancing - `.is-active` is
   toggled by that script, not by CSS alone, since the rotation needs a
   timer. */
.sv-sponsor-slider { position: relative; width: 100%; overflow: hidden; }
.sv-sponsor-slide {
  display: none;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  width: 100%;
}
.sv-sponsor-slide.is-active { display: flex; }
.sv-sponsor-slide-img {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--sv-r-tile); flex-shrink: 0;
}
.sv-sponsor-slide-icon {
  width: 56px; height: 56px; border-radius: var(--sv-r-tile); background: var(--sv-primary-light);
  color: var(--sv-primary); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.sv-sponsor-slide-body { min-width: 0; }
.sv-sponsor-slide-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--sv-primary);
}
.sv-sponsor-slide-name { font-weight: 700; color: var(--sv-heading); font-size: 0.95rem; }
.sv-sponsor-slide-tagline { color: var(--sv-body); font-size: 0.82rem; margin-top: 0.1rem; }
.sv-sponsor-slide-cta {
  display: inline-block; margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600;
  color: var(--sv-primary); text-decoration: none;
}
.sv-sponsor-slide-cta:hover { text-decoration: underline; }

.sv-sponsor-slider-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.5rem; }
.sv-sponsor-slider-dot {
  width: 6px; height: 6px; border-radius: 50%; border: none; background: var(--sv-border);
  padding: 0; cursor: pointer;
}
.sv-sponsor-slider-dot.is-active { background: var(--sv-primary); }

/* Narrower slots (a vertical {% ad_banner %} or the sidebar drawer) stack
   the card instead of laying it out as a row. */
.sv-ad-vertical .sv-sponsor-slide,
.sv-side-ad-body .sv-sponsor-slide {
  flex-direction: column;
  text-align: center;
}
.sv-ad-vertical .sv-sponsor-slide-body,
.sv-side-ad-body .sv-sponsor-slide-body {
  text-align: center;
}

/* ------------------------------------------- Sponsored Partners drawer --
   {% ad_sidebar %} (ads/templates/ads/_ad_sidebar.html) - same missing-CSS
   gap as the ad banner above. Simpler than the sibling project this was
   ported from on purpose: that one reserves a layout gutter so page
   content is never covered (see its own CSS for the --cc-side-ad-left/
   right custom properties and the body classes that set them). Servero's
   drawer is deliberately position:fixed and floats OVER the page instead -
   see _ad_sidebar.html's own docstring - so none of that gutter machinery
   is needed here, only the panel itself and its open/close slide. */
.sv-side-ad {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1020;
}
.sv-side-ad-left  { left: 0; }
.sv-side-ad-right { right: 0; }

.sv-side-ad-panel {
  width: 260px;
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  box-shadow: 4px 6px 24px rgba(16, 24, 40, 0.12);
  transform: translateX(0);
  transition: transform 0.28s ease, opacity 0.2s ease;
  opacity: 1;
}
.sv-side-ad-left .sv-side-ad-panel {
  border-left: none;
  border-radius: 0 var(--sv-r-tile) var(--sv-r-tile) 0;
}
.sv-side-ad-right .sv-side-ad-panel {
  border-right: none;
  border-radius: var(--sv-r-tile) 0 0 var(--sv-r-tile);
  box-shadow: -4px 6px 24px rgba(16, 24, 40, 0.12);
}

.sv-side-ad-left.is-closed .sv-side-ad-panel  { transform: translateX(-102%); }
.sv-side-ad-right.is-closed .sv-side-ad-panel { transform: translateX(102%); }
.sv-side-ad.is-closed .sv-side-ad-panel {
  opacity: 0;
  pointer-events: none;
}

.sv-side-ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--sv-border);
}
.sv-side-ad-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--sv-muted);
}
.sv-side-ad-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--sv-muted);
  cursor: pointer;
  padding: 0 0.15rem;
}
.sv-side-ad-close:hover { color: var(--sv-heading); }
.sv-side-ad-body {
  padding: 0.9rem;
  /* A scroll container, not a growing box - a sponsor card (image +
     name + tagline + button) can run taller than the AdSense placeholder
     this drawer was originally sized for, and the drawer itself is
     position:fixed with no layout of its own to grow into. Capped height
     plus scroll keeps the panel a fixed, predictable size regardless of
     how much content ends up inside it. */
  max-height: min(70vh, 420px);
  overflow-y: auto;
}

/* The reopen tab. Vertical text keeps it inside a narrow gutter even
   though Servero doesn't reserve one - it just sits over the edge. */
.sv-side-ad-open {
  position: absolute;
  top: 0;
  border: 1px solid var(--sv-border);
  background: var(--sv-surface);
  color: var(--sv-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0.85rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.15s;
}
.sv-side-ad-open-label { writing-mode: vertical-rl; display: block; }
.sv-side-ad-left .sv-side-ad-open {
  left: 0;
  border-left: none;
  border-radius: 0 var(--sv-r-btn) var(--sv-r-btn) 0;
  box-shadow: 2px 3px 12px rgba(16, 24, 40, 0.12);
}
.sv-side-ad-right .sv-side-ad-open {
  right: 0;
  border-right: none;
  border-radius: var(--sv-r-btn) 0 0 var(--sv-r-btn);
  box-shadow: -2px 3px 12px rgba(16, 24, 40, 0.12);
}
.sv-side-ad-right .sv-side-ad-open-label { writing-mode: vertical-lr; }

.sv-side-ad.is-closed .sv-side-ad-open { opacity: 1; pointer-events: auto; }

/* Below this width there's no room for the drawer without covering
   content it was never meant to sit on top of - hide it instead. */
@media (max-width: 991.98px) {
  .sv-side-ad { display: none; }
}

/* ------------------------------------------------- Search + map (pros) --
   Two panes filling the space below the topbar: a scrolling results column
   and a map that tracks the same results, side by side above roughly
   tablet width and stacked (map first, short) below it. Used for the pro
   directory today; any other "browse + map" listing (a category's pros, a
   province page) is meant to reuse these same classes rather than grow its
   own copy - see provider_directory.html. */
.sv-search-page {
  display: grid; grid-template-columns: minmax(360px, 480px) 1fr;
  height: calc(100vh - 68px);
  overflow: hidden;
}
@media (max-width: 899.98px) {
  /* Stacked layout scrolls as one normal page (map first, fixed height,
     then the list) - the split-pane framing above only makes sense
     side by side, so drop the fixed height/clip here. */
  .sv-search-page { grid-template-columns: 1fr; height: auto; overflow: visible; }
}

.sv-search-results { padding: 1.5rem clamp(1rem, 3vw, 2rem); overflow-y: auto; }

.sv-search-bar {
  display: flex; align-items: center; gap: 0.6rem; background: var(--sv-surface);
  border: 1.5px solid var(--sv-border); border-radius: var(--sv-r-pill);
  padding: 0.3rem 0.3rem 0.3rem 1.1rem; box-shadow: var(--sv-shadow-soft); margin-bottom: 1.1rem;
}
.sv-search-bar:focus-within { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-light); }
.sv-search-bar i { color: var(--sv-muted); }
.sv-search-bar input {
  flex: 1; border: none; outline: none; background: none; padding: 0.55rem 0; font-size: 0.95rem;
}
.sv-search-bar button {
  border: none; border-radius: var(--sv-r-pill); background: var(--sv-primary); color: #fff;
  font-weight: 600; padding: 0.6rem 1.3rem; font-size: 0.9rem; flex-shrink: 0;
}
.sv-search-bar button:hover { background: var(--sv-primary-dark); }

.sv-search-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.sv-search-count { font-weight: 700; color: var(--sv-heading); }
.sv-search-filters { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sv-search-filters select.sv-select { width: auto; min-width: 150px; padding: 0.5rem 0.8rem; font-size: 0.88rem; }

.sv-search-list { display: flex; flex-direction: column; gap: 0.9rem; }
.sv-search-list .sv-provider-card {
  display: flex; gap: 1rem; align-items: stretch; background: var(--sv-surface);
  border: 1px solid var(--sv-border-soft); border-radius: var(--sv-r-tile);
  box-shadow: var(--sv-shadow-tile); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sv-search-list .sv-provider-card:hover { box-shadow: var(--sv-shadow-card); transform: translateY(-2px); }
.sv-search-list .sv-provider-cover { width: 108px; height: auto; border-radius: 0; flex-shrink: 0; font-size: 1.6rem; }
.sv-search-list .sv-provider-body { border: none; border-radius: 0; box-shadow: none; flex: 1; padding: 0.9rem 1.1rem; }

.sv-search-map-col { position: sticky; top: 68px; height: calc(100vh - 68px); background: var(--sv-border-soft); }
.sv-map { width: 100%; height: 100%; }
@media (max-width: 899.98px) {
  .sv-search-map-col { position: static; height: 320px; order: -1; }
}

.sv-pin-wrap { background: none; border: none; }
.sv-pin {
  display: block; width: 20px; height: 20px; border-radius: 50% 50% 50% 0;
  background: var(--sv-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,0.35);
  transform: rotate(-45deg);
}
.sv-map-popup { font-family: 'Inter', sans-serif; min-width: 160px; }
.sv-map-popup a { font-weight: 700; color: var(--sv-heading); text-decoration: none; display: block; margin-bottom: 0.2rem; }
.sv-map-popup a:hover { color: var(--sv-primary); }
.sv-map-popup .meta { font-size: 0.8rem; color: var(--sv-muted); }

/* -------------------------------------------------------------- Quotes - */
.sv-quote-card { border: 1.5px solid var(--sv-border); border-radius: var(--sv-r-panel); padding: 1.25rem; background: var(--sv-surface); }
.sv-quote-card.is-accepted { border-color: var(--sv-primary); background: var(--sv-primary-light); }
.sv-quote-price { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--sv-primary-dark); }

/* --------------------------------------------------------------- Inbox - */
.sv-inbox-list { border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); overflow: hidden; }
.sv-inbox-row { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sv-border-soft); align-items: center; }
.sv-inbox-row:last-child { border-bottom: none; }
.sv-inbox-row:hover { background: var(--sv-bg); }
.sv-thread { display: flex; flex-direction: column; gap: 0.75rem; max-height: 55vh; overflow-y: auto; padding: 1rem; }
.sv-bubble { max-width: 70%; padding: 0.65rem 0.95rem; border-radius: 0; font-size: 0.92rem; }
.sv-bubble-mine { align-self: flex-end; background: var(--sv-primary); color: #fff; border-bottom-right-radius: 4px; }
.sv-bubble-theirs { align-self: flex-start; background: var(--sv-surface-alt); color: var(--sv-text); border-bottom-left-radius: 4px; }
.sv-bubble-time { font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; display: block; }

/* -------------------------------------------------------------- Footer - */
/* No margin-top: with `main` now flex-filling the space above it (see
   the sticky-footer rules near the top of this file), a margin here
   would leave the footer sitting a few dozen pixels below an otherwise
   viewport-filling page instead of flush against the bottom - the last
   bit of the "footer is floating" gap. The 3.5rem top padding already
   gives the footer's own content the same breathing room a margin did,
   without reintroducing that gap. */
.sv-footer { background: var(--sv-footer-bg); color: var(--sv-footer-fg); padding: 3.5rem 0 1.5rem; }
.sv-footer-inner { max-width: var(--sv-maxw); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 767.98px) { .sv-footer-inner { grid-template-columns: 1fr 1fr; } }
.sv-footer-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.6rem; font-family: 'Sora', sans-serif; }
.sv-footer-tag { font-size: 0.88rem; max-width: 260px; }
.sv-footer-links-title { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.9rem; }
.sv-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sv-footer-list a { color: var(--sv-footer-fg); font-size: 0.9rem; }
.sv-footer-list a:hover { color: #fff; }
/* Policy links: a second row of columns lined up under the ones above */
.sv-footer-policies { margin-top: 2.5rem; padding-top: 2.25rem; position: relative; }
.sv-footer-policies::before {
  content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem;
  border-top: 1px solid var(--sv-footer-rule);
}
@media (max-width: 767.98px) { .sv-footer-policies > div:first-child { grid-column: 1 / -1; } }
.sv-footer-copyright {
  max-width: var(--sv-maxw); margin: 2.5rem auto 0; padding: 1.25rem 1.5rem 0;
  border-top: 1px solid var(--sv-footer-rule); font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.sv-footer-badge { display: inline-flex; line-height: 0; opacity: 0.9; transition: opacity 0.15s ease; }
.sv-footer-badge:hover { opacity: 1; }

/* -------------------------------------------------------------- Alerts - */
.sv-messages { max-width: var(--sv-maxw); margin: 1rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sv-message { padding: 0.85rem 1.1rem; border-radius: var(--sv-r-panel); font-size: 0.9rem; }
.sv-message.success { background: var(--sv-success-bg); color: var(--sv-success); }
.sv-message.error   { background: var(--sv-danger-bg);  color: var(--sv-danger); }
.sv-message.warning, .sv-message.info { background: var(--sv-info-bg); color: var(--sv-info); }

/* ----------------------------------------------------------- Dashboards */
.sv-page-header { padding: 2.5rem 0 1.5rem; }

/* Provider "channel banner" - providers.models.ProviderProfile.banner_image,
   rendered by provider_detail.html right above .sv-page-header, inside its
   own .sv-container so it lines up with the heading/quote-card row right
   below it rather than bleeding to the browser edges (a full-bleed
   version just read as stretched-out, not "banner-shaped"). Rounded to
   match the rest of the site's card-style imagery now that it sits
   inset rather than flush with the viewport edge. */
.sv-provider-banner {
  width: 100%; height: 220px; overflow: hidden; margin-top: 1.5rem;
  border-radius: var(--sv-r-card); background: var(--sv-border-soft);
}
.sv-provider-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767.98px) { .sv-provider-banner { height: 130px; } }
.sv-tab-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--sv-border); margin-bottom: 2rem; overflow-x: auto; }
.sv-tab-nav a { padding: 0.75rem 1rem; font-weight: 600; color: var(--sv-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.sv-tab-nav a.is-active { color: var(--sv-primary); border-color: var(--sv-primary); }
.sv-empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--sv-muted); }
.sv-empty-state .bi { font-size: 2.5rem; color: var(--sv-border); margin-bottom: 1rem; display: block; }

/* A data table (console user/pro/booking/etc lists) is often wider than a
   phone screen once every column has real content in it - long emails,
   full names, dates, a status badge, an action button. Without this
   wrapper that width used to force the whole page to scroll sideways,
   which on the console's user tables meant people's usernames and emails
   scrolled half off the edge of the screen instead of staying inside
   their card. `-webkit-overflow-scrolling` gives it momentum scrolling on
   iOS; the table itself is untouched; every console list template wraps
   its <table class="sv-table"> in <div class="sv-table-wrap"> for this. */
.sv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--sv-r-panel);
  /* A styled, always-visible scrollbar rather than the browser default -
     Firefox honours the two properties below; Chrome/Edge/most Android
     browsers honour the ::-webkit-scrollbar rules underneath. iOS Safari
     doesn't let any site style or force-show its scrollbar (it's a
     transient overlay that only appears mid-scroll, by OS design, no
     matter what CSS says) - .sv-table-hint below is what covers that case,
     so the affordance isn't relying on a scrollbar existing at all. */
  scrollbar-width: thin;
  scrollbar-color: var(--sv-muted) var(--sv-border-soft);
}
.sv-table-wrap::-webkit-scrollbar { height: 8px; }
.sv-table-wrap::-webkit-scrollbar-track { background: var(--sv-border-soft); border-radius: 0; }
.sv-table-wrap::-webkit-scrollbar-thumb { background: var(--sv-muted); border-radius: 0; }
.sv-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--sv-heading); }

/* Explicit "there's more to the right" affordance for touch screens, where
   a scrollbar may not show at all until mid-scroll (see above) - without
   this a table that's wider than the phone just looks cut off at the
   right edge, the exact "leaking" complaint this is fixing. Hidden above
   the point a table would realistically ever need to scroll. */
.sv-table-hint {
  display: none; align-items: center; gap: 0.4rem;
  font-size: 0.76rem; color: var(--sv-muted); margin: 0.5rem 0 0;
}
.sv-table-hint i { font-size: 0.9rem; }
@media (max-width: 767.98px) {
  .sv-table-hint { display: flex; }
}

.sv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sv-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sv-muted); padding: 0.75rem 1rem; border-bottom: 1px solid var(--sv-border); white-space: nowrap; }
.sv-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--sv-border-soft); vertical-align: middle; }
.sv-table tr:hover td { background: var(--sv-bg); }

/* ------------------------------------------------------------- Console - */
/* minmax(0, 1fr) + min-width: 0 on the content column: without them a wide
   table inside it sets the column's minimum width, and the whole console
   page scrolls sideways instead of just the table. */
.sv-console-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; }
.sv-console-main { min-width: 0; }
@media (max-width: 850px) { .sv-console-shell { grid-template-columns: minmax(0, 1fr); } }
.sv-console-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.sv-console-nav a { padding: 0.6rem 0.9rem; border-radius: var(--sv-r-btn); color: var(--sv-body); font-weight: 500; font-size: 0.9rem; }
.sv-console-nav a:hover, .sv-console-nav a.is-active { background: var(--sv-primary-light); color: var(--sv-primary-dark); }
.sv-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 850px) { .sv-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.sv-stat-card { background: var(--sv-surface); border: 1px solid var(--sv-border-soft); border-radius: var(--sv-r-panel); padding: 1.25rem; }
.sv-stat-card .num { font-family: 'Sora', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--sv-heading); }
.sv-stat-card .label { font-size: 0.82rem; color: var(--sv-muted); }
.sv-console-banner { background: var(--sv-heading); color: #fff; font-size: 0.82rem; padding: 0.5rem 1.5rem; text-align: center; }

/* Maintenance-mode banner shown to admins on every console page while the
   public site is showing the repair page - see console/views.site_settings
   and main/middleware.py. Was previously unstyled (rendered as plain block
   text); this is the first real styling for it. */
.sv-maintenance-banner {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: var(--sv-warning); color: #1a1200; font-size: 0.85rem; font-weight: 600;
  padding: 0.7rem 1.5rem; text-align: center;
}
.sv-maintenance-banner form { margin: 0; }

/* "Signed in as" bar - see main/templates/main/_impersonation_bar.html for
   why this uses a colour that appears nowhere else on the site. */
.sv-impersonation-bar {
  position: sticky; top: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: #7c2d92; color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 0.65rem 1.5rem; text-align: center;
}
.sv-impersonation-bar form { margin: 0; }
.sv-impersonation-bar button {
  padding: 0.4rem 0.9rem; border-radius: var(--sv-r-btn); border: 1px solid rgba(255,255,255,0.55);
  background: transparent; color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.sv-impersonation-bar button:hover { background: rgba(255,255,255,0.16); }

/* Console user-management: a labelled row with a control on the right
   (Actions panel, Permissions panel) - one shape reused across
   user_detail.html and user_confirm_delete.html. */
.sv-action-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--sv-border-soft); flex-wrap: wrap;
}
.sv-action-row:first-child { border-top: none; padding-top: 0; }
.sv-action-row .sv-action-desc { font-size: 0.82rem; color: var(--sv-muted); margin-top: 0.15rem; max-width: 46ch; }
.sv-note-danger, .sv-note-warn {
  border-radius: var(--sv-r-panel); padding: 0.9rem 1.1rem; font-size: 0.88rem; margin-bottom: 1rem;
}
.sv-note-danger { background: var(--sv-danger-bg); color: var(--sv-danger); }
.sv-note-warn { background: var(--sv-warning-bg); color: #6b4d00; }

/* Portfolio photo lightbox - shared modal markup/JS lives in base.html;
   this is just sizing for it, since the Bootstrap modal defaults are
   tuned for text dialogs, not a big centered photo. */
.sv-lightbox-trigger { cursor: zoom-in; }
.sv-lightbox-dialog { max-width: min(92vw, 960px); }
.sv-lightbox-content { background: transparent; border: none; box-shadow: none; }
.sv-lightbox-img {
  width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--sv-r-panel); background: #0b0b0c;
}

/* ------------------------------------------------ Bootstrap navbar skin -- */
.sv-navbar {
  background: var(--sv-surface); border-bottom: 1px solid var(--sv-border-soft);
  min-height: 68px; padding-top: 0.6rem; padding-bottom: 0.6rem; z-index: 1030;
}
.sv-navbar .navbar-brand { padding: 0; }
.sv-navbar .nav-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--sv-body); font-weight: 500; font-size: 0.95rem;
  padding: 0.5rem 0.8rem !important; border-radius: 0;
}
.sv-navbar .nav-link i { font-size: 1.05rem; color: var(--sv-muted); }
.sv-navbar .nav-link:hover { color: var(--sv-heading); background: var(--sv-bg); }
.sv-navbar .nav-link.active { color: var(--sv-primary-dark); background: var(--sv-primary-light); }
.sv-navbar .nav-link.active i, .sv-navbar .nav-link:hover i { color: inherit; }
.sv-navbar .btn-primary {
  --bs-btn-bg: var(--sv-primary); --bs-btn-border-color: var(--sv-primary);
  --bs-btn-hover-bg: var(--sv-primary-dark); --bs-btn-hover-border-color: var(--sv-primary-dark);
  --bs-btn-active-bg: var(--sv-primary-dark); --bs-btn-active-border-color: var(--sv-primary-dark);
}
.sv-nav-cta { font-weight: 600; padding: 0.5rem 1rem; border-radius: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.sv-navbar .sv-avatar-btn::after { display: none; }
.sv-navbar .sv-avatar-btn { padding: 0; }
.sv-navbar .sv-avatar-btn:hover, .sv-navbar .sv-avatar-btn.show { background: var(--sv-primary-dark); color: #fff; }
.sv-nav-badge { font-size: 0.68rem; font-weight: 600; }
.sv-icon-btn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.45rem; color: var(--sv-heading); border-radius: 0; padding: 0; text-decoration: none;
}
.sv-icon-btn:hover { background: var(--sv-bg); color: var(--sv-heading); }
.sv-navbar .navbar-toggler:focus, .sv-sidebar-toggle:focus-visible { box-shadow: 0 0 0 3px var(--sv-primary-light); }
.sv-sidebar-toggle { border: 1px solid var(--sv-border); }
@media (max-width: 575.98px) {
  .sv-navbar { min-height: 60px; }
  .sv-navbar .sv-logo { height: 28px; }
}
.sv-sidebar-nav .badge { font-size: 0.7rem; }

/* ===================================================================
   Mobile hardening (phones and small tablets)
   One block, last in the file, so it wins over the desktop rules above
   without touching them. Breakpoints match the rest of this file
   (575.98 / 767.98 / 850 / 899.98).
   =================================================================== */

/* Long emails, URLs and business names must wrap, never push the page
   sideways. */
body { overflow-wrap: break-word; }
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

/* Mobile browsers' address bar makes 100vh taller than the screen; dvh is
   the visible height where supported. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .sv-search-page { height: calc(100dvh - 68px); }
  .sv-search-map-col { height: calc(100dvh - 68px); }
}

/* Touch targets: at least ~44px tall on touch screens (Apple/Google
   guidance), without changing how buttons look with a mouse. */
@media (pointer: coarse) {
  .sv-btn { min-height: 44px; }
  .sv-btn-sm { min-height: 40px; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .form-switch .form-check-input { width: 2.5em; }
  .sv-console-nav a { min-height: 40px; }
}

@media (max-width: 767.98px) {
  /* iOS Safari zooms the page into any field under 16px on focus and
     never zooms back out - 16px stops that. */
  .sv-input, .sv-select, textarea.sv-input, input, select, textarea,
  .sv-search-bar input, .sv-search-bar-sm input,
  .sv-search-filters select.sv-select { font-size: 16px; }

  /* Tables: tighter cells so more fits before the sideways scroll. */
  .sv-table { font-size: 0.85rem; }
  .sv-table th, .sv-table td { padding: 0.6rem 0.65rem; }

  /* Title + action rows (Bootstrap d-flex headers used all over the
     templates) wrap instead of squeezing or overflowing. */
  .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }

  .sv-card { padding: 1.1rem; }
  .sv-map, .sv-search-map-col { height: 240px; }
}

@media (max-width: 575.98px) {
  .sv-container { padding-left: 1rem; padding-right: 1rem; }
  h1, .h1 { font-size: 1.6rem; }
  .h3 { font-size: 1.3rem; }

  /* Search filters: one per line, full width. */
  .sv-search-filters > * { flex: 1 1 100%; }
  .sv-search-filters select.sv-select { width: 100%; min-width: 0; }

  /* Console/admin action rows: the control goes under its label, and an
     inline "reason + button" form stacks to full width. */
  .sv-action-row { align-items: stretch; }
  .sv-action-row > span, .sv-action-row > form { flex: 1 1 100%; }
  .sv-action-row > form.d-flex { flex-wrap: wrap; }
  .sv-action-row > form .sv-input { flex: 1 1 100%; }
  .sv-action-row > form .sv-btn { flex: 1 1 auto; }

  /* Full-width primary buttons in stacked button groups read better. */
  .d-flex.gap-2 > .sv-btn-lg { flex: 1 1 100%; }

  /* Banners with a button: stack. */
  .sv-maintenance-banner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .sv-stat-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .sv-search-list .sv-provider-cover { width: 84px; }
}

/* Pro search: the city box was a fixed 170px inline style. */
.sv-city-input { width: 170px; }
@media (max-width: 575.98px) { .sv-city-input { width: 100%; } }

/* Console on phones: the 18-link sidebar becomes one swipeable row of
   chips above the content instead of a screen-long list. */
@media (max-width: 850px) {
  .sv-console-shell { gap: 1rem; }
  .sv-console-nav {
    flex-direction: row; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .sv-console-nav a {
    flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--sv-border);
    border-radius: var(--sv-r-pill); padding: 0.45rem 0.85rem; font-size: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
  }
  .sv-console-nav hr { display: none; }
}

/* ==========================================================================
   Legal documents, consent and cookie banner (legal app)
   ========================================================================== */
.sv-legal-page { max-width: 1100px; }
/* One column unless the page actually has a contents list (.has-toc, set
   in legal/document.html). The old rule made every legal page two columns
   on desktop, so a page with no contents list (Third-Party Services) had
   its whole body squeezed into the 240px sidebar slot. minmax(0, 1fr) and
   min-width: 0 stop a wide table from stretching the grid past the screen
   instead of scrolling inside its own box. */
.sv-legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.sv-legal-layout > * { min-width: 0; }
@media (min-width: 992px) { .sv-legal-layout.has-toc { grid-template-columns: 240px minmax(0, 1fr); } }
.sv-legal-toc { position: sticky; top: 90px; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); padding: 1rem 1.1rem; font-size: .9rem; }
.sv-legal-toc-title { font-weight: 600; color: var(--sv-heading); margin-bottom: .5rem; }
.sv-legal-toc ol { padding-left: 1.1rem; margin: 0; }
.sv-legal-toc li { margin: .25rem 0; }
@media (max-width: 991.98px) { .sv-legal-toc { position: static; } }
.sv-legal-body { max-width: 760px; line-height: 1.7; color: var(--sv-text); overflow-wrap: break-word; }
.sv-legal-body h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; scroll-margin-top: 90px; }
.sv-legal-body h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; scroll-margin-top: 90px; }
.sv-legal-body ul, .sv-legal-body ol { padding-left: 1.3rem; }
.sv-legal-body li { margin: .3rem 0; }
.sv-legal-callout { background: var(--sv-info-bg); border-left: 4px solid var(--sv-primary); border-radius: 10px; padding: .9rem 1.1rem; margin: 1rem 0; color: var(--sv-heading); }
.sv-legal-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--sv-border); border-radius: 12px; }
.sv-legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--sv-surface); }
.sv-legal-table th, .sv-legal-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--sv-border-soft); vertical-align: top; text-align: left; }
.sv-legal-table th { background: var(--sv-surface-alt); color: var(--sv-heading); font-weight: 600; }
/* Long unbroken text (URLs like jsdelivr.com/terms/privacy-policy-...)
   used to set the table's minimum width; let it wrap inside the cell. */
.sv-legal-table td { overflow-wrap: anywhere; }
.sv-legal-table tbody tr:last-child td { border-bottom: 0; }

/* Phones: a 5-column table can't fit, and a sideways-scrolling legal table
   is unreadable. Each row becomes a card; each cell shows its column name
   (data-label, added by legal/markup.py) above the value. */
@media (max-width: 640px) {
  .sv-legal-table-wrap { border: 0; overflow: visible; }
  .sv-legal-table-stack, .sv-legal-table-stack tbody, .sv-legal-table-stack tr, .sv-legal-table-stack td { display: block; width: 100%; }
  .sv-legal-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sv-legal-table-stack { background: transparent; }
  .sv-legal-table-stack tr { background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: 12px; margin-bottom: .75rem; overflow: hidden; }
  .sv-legal-table-stack td { border-bottom: 1px solid var(--sv-border-soft); padding: .55rem .85rem; }
  .sv-legal-table-stack tr td:last-child { border-bottom: 0; }
  .sv-legal-table-stack td:first-child { background: var(--sv-surface-alt); font-weight: 600; color: var(--sv-heading); }
  .sv-legal-table-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-muted); margin-bottom: .15rem; }
}
.sv-legal-print { background: none; border: 0; padding: 0; color: var(--sv-primary); cursor: pointer; }
.sv-legal-history summary { cursor: pointer; font-weight: 600; }
.sv-legal-index { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sv-legal-index-item { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; }
.sv-legal-index-item:hover { border-color: var(--sv-primary); }
.sv-legal-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.sv-legal-check input { margin-top: .25rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; }
.sv-legal-accept-list { padding-left: 1.2rem; }
.sv-legal-accept-list li { margin-bottom: .5rem; }
.sv-legal-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.55; }

.sv-cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; justify-content: center; pointer-events: none; }
.sv-cookie-inner { pointer-events: auto; max-width: 880px; width: 100%; background: var(--sv-surface); color: var(--sv-text); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); box-shadow: 0 12px 40px rgba(16, 24, 40, .18); padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.sv-cookie-inner p { flex: 1 1 320px; }
.sv-cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media print { .sv-cookie-banner, .sv-navbar, .sv-footer, .sv-legal-toc, .sv-legal-print { display: none !important; } }


/* ==========================================================================
   Console lists with archive / delete (Requests, Bookings, Audit log)
   ========================================================================== */
.sv-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.sv-list-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sv-export-group { display: inline-flex; gap: .35rem; }

.sv-archive-tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-pill); }
.sv-archive-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: var(--sv-r-pill); font-size: .85rem; font-weight: 500; color: var(--sv-body); white-space: nowrap; }
.sv-archive-tabs a:hover { color: var(--sv-primary); }
.sv-archive-tabs a.is-active { background: var(--sv-primary-light); color: var(--sv-primary-dark); font-weight: 600; }

.sv-list-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.sv-list-filters .sv-input, .sv-list-filters .sv-select { width: auto; flex: 1 1 180px; max-width: 260px; min-width: 0; }
.sv-date-field { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--sv-muted); flex: 0 1 190px; }
.sv-date-field .sv-input { max-width: none; }

.sv-archive-old { margin-bottom: .75rem; font-size: .9rem; }
.sv-archive-old summary { cursor: pointer; color: var(--sv-primary); font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }
.sv-archive-old-form { margin-top: .6rem; padding: .85rem 1rem; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); max-width: 560px; }
.sv-archive-old-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0 .5rem; }
.sv-archive-old-row .sv-input { width: 110px; }

.sv-bulk-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; margin-bottom: .6rem; background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); box-shadow: var(--sv-shadow-soft); }
.sv-bulk-all { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--sv-body); cursor: pointer; margin: 0; }
.sv-bulk-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.sv-table .sv-cell-select { width: 2.25rem; padding-right: 0; }
.sv-table input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--sv-primary); cursor: pointer; vertical-align: middle; }
.sv-table .sv-cell-actions { text-align: right; white-space: nowrap; }
.sv-table .sv-cell-actions .sv-btn + .sv-btn { margin-left: .3rem; }
.sv-table tr.is-archived td { color: var(--sv-muted); }
.sv-table tr.is-selected td { background: var(--sv-primary-light); }
.sv-audit-table .sv-cell-detail { white-space: pre-line; max-width: 340px; overflow-wrap: anywhere; }
/* Icon-only row buttons on mid widths to keep the row on one line. */
@media (min-width: 768px) and (max-width: 1439.98px) { .sv-table .sv-cell-actions .sv-btn-label { display: none; } }
@media (min-width: 768px) { .sv-table-cards td.sv-cell-title { min-width: 170px; } }

.sv-confirm-card { max-width: 720px; }
.sv-confirm-counts { margin: .75rem 0 0; padding-left: 1.2rem; }
.sv-confirm-counts li { margin: .2rem 0; }
.sv-confirm-list { max-height: 320px; overflow: auto; padding: .5rem .75rem .5rem 1.9rem; margin: 0; background: var(--sv-bg); border-radius: 10px; font-size: .88rem; }
.sv-confirm-list li { margin: .25rem 0; overflow-wrap: anywhere; }
.sv-confirm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Phones: each table row becomes a card - title on top with its checkbox,
   then label/value lines (from data-label), then full-width action
   buttons. No sideways scrolling, nothing cut off. */
@media (max-width: 767.98px) {
  .sv-table-wrap:has(.sv-table-cards) { overflow: visible; }
  .sv-table-cards, .sv-table-cards tbody { display: block; width: 100%; }
  .sv-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sv-table-cards tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-panel); padding: .75rem .9rem; margin-bottom: .6rem; box-shadow: var(--sv-shadow-soft); }
  .sv-table-cards tr:hover td { background: transparent; }
  .sv-table-cards tr.is-selected { border-color: var(--sv-primary); background: var(--sv-primary-light); }
  .sv-table-cards tr.is-selected td { background: transparent; }
  .sv-table-cards tr.is-archived { background: var(--sv-bg); }
  .sv-table-cards td { display: flex; gap: .75rem; justify-content: space-between; align-items: baseline; padding: .3rem 0; border: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .sv-table-cards td[data-label]::before { content: attr(data-label); flex: 0 0 auto; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-muted); text-align: left; }
  .sv-table-cards td.sv-cell-title { display: block; text-align: left; font-weight: 600; font-size: .95rem; color: var(--sv-heading); padding: 0 2.25rem .45rem 0; margin-bottom: .2rem; border-bottom: 1px solid var(--sv-border-soft); }
  .sv-table-cards td.sv-cell-title::before { content: none; }
  .sv-table-cards td.sv-cell-select { position: absolute; top: .7rem; right: .8rem; width: auto; padding: 0; }
  .sv-table-cards td.sv-cell-select input[type=checkbox] { width: 1.35rem; height: 1.35rem; }
  .sv-table-cards td.sv-cell-actions { justify-content: stretch; gap: .5rem; padding-top: .6rem; margin-top: .3rem; border-top: 1px solid var(--sv-border-soft); }
  .sv-table-cards td.sv-cell-actions .sv-btn { flex: 1 1 0; justify-content: center; margin: 0; }
  .sv-table-cards td.sv-cell-actions:empty { display: none; }
  .sv-table-cards .sv-cell-detail { max-width: none; white-space: normal; text-align: left; flex-direction: column; align-items: stretch; gap: .15rem; }
  .sv-table-cards tr.sv-empty-row { display: block; }
  .sv-table-cards tr.sv-empty-row td { display: block; text-align: center; }

  .sv-list-head { align-items: stretch; }
  .sv-list-head > h1 { flex: 1 1 100%; }
  .sv-list-head-actions { flex: 1 1 100%; }
  .sv-list-head form.sv-list-head-actions .sv-btn { flex: 1 1 0; }
  .sv-archive-tabs { display: flex; width: 100%; }
  .sv-archive-tabs a { flex: 1 1 0; justify-content: center; padding-left: .4rem; padding-right: .4rem; }
  .sv-list-filters > * { flex: 1 1 100% !important; max-width: none !important; }
  .sv-date-field { flex: 1 1 calc(50% - .25rem) !important; }
  .sv-list-filters .sv-btn { flex: 1 1 calc(50% - .25rem) !important; }
  .sv-bulk-bar { top: 0; }
  .sv-bulk-actions { flex: 1 1 100%; }
  .sv-bulk-actions .sv-btn { flex: 1 1 0; }
  .sv-confirm-actions .sv-btn { flex: 1 1 100%; }
}


/* ---- Square look + mobile polish (site-wide override) ---------------- */
:root { --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-pill: 0; }
.btn, .form-control, .form-select, .input-group-text, .card, .alert, .badge, .dropdown-menu, .dropdown-item,
.modal-content, .nav-link, .nav-pills .nav-link, .list-group-item, .offcanvas, .toast, .accordion-item,
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5, .rounded-pill, .img-thumbnail,
.sv-card, .sv-card-flat, .sv-panel, .sv-btn, .sv-input, .sv-badge, .sv-dropdown, .sv-note, .sv-note-warn,
.sv-inbox-row, .sv-stat-card, .sv-empty-state, .sv-navbar, .sv-nav-link { border-radius: 0 !important; }
/* keep true circles (avatars, icon dots) round */
.rounded-circle, .sv-avatar, [class*="avatar"] { border-radius: 50% !important; }

@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  img, video, svg { max-width: 100%; height: auto; }
  .sv-container { padding-left: 1rem; padding-right: 1rem; }
  .sv-btn, .btn { min-height: 44px; }
  .sv-table, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sv-inbox-row { flex-wrap: wrap; gap: .75rem; }
  .sv-inbox-row > .d-flex, .sv-card-flat > .d-flex > .d-flex { flex-wrap: wrap; }
  .sv-page-header h1, h1 { font-size: 1.6rem; }
  input, select, textarea { font-size: 16px; } /* stops iOS zoom on focus */
}
@media (max-width: 575.98px) {
  .sv-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .d-flex.gap-2 > .sv-btn, .d-flex.gap-2 > form > .sv-btn { flex: 1 1 auto; }
}

/* ---- Compact footer ---------------------------------------------------- */
.sv-footer { padding: 1.75rem 0 1rem; }
.sv-footer-inner { gap: 1rem 1.5rem; }
.sv-footer-brand { margin-bottom: .3rem; font-size: 1.05rem; }
.sv-footer-tag { font-size: .8rem; line-height: 1.4; margin-bottom: 0; }
.sv-footer-links-title { margin-bottom: .45rem; font-size: .75rem; }
.sv-footer-list { gap: .3rem; }
.sv-footer-list a { font-size: .84rem; }
.sv-footer-policies { margin-top: 1.1rem; padding-top: 1.1rem; }
.sv-footer-copyright { margin-top: 1rem; padding-top: .75rem; }
@media (max-width: 767.98px) {
  .sv-footer { padding: 1.25rem 0 .9rem; }
  .sv-footer-inner { gap: .9rem 1rem; }
  .sv-footer-inner > div:first-child .sv-footer-tag { display: none; }
  .sv-footer-policies > div:first-child { display: none; }
  .sv-footer-list { gap: .15rem; }
  .sv-footer-list a { display: inline-block; padding: .3rem 0; }
}

/* ---- Icon-based hero tiles and category cards (no photos) ------------- */
.sv-hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.sv-hero-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 120px; padding: 1rem .6rem; text-align: center; text-decoration: none;
  background: var(--sv-primary-light); color: var(--sv-primary-dark);
  border: 1px solid var(--sv-border-soft); font-weight: 600; font-size: .9rem; transition: background .15s, transform .15s;
}
.sv-hero-tile i { font-size: 1.9rem; line-height: 1; }
.sv-hero-tile:nth-child(even) { background: var(--sv-accent-light); color: var(--sv-accent-dark); }
.sv-hero-tile:hover { transform: translateY(-2px); background: var(--sv-surface); }
@media (max-width: 991.98px) { .sv-hero-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .sv-hero-tiles { grid-template-columns: repeat(2, 1fr); } .sv-hero-tile { min-height: 96px; } }

.sv-cat-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .sv-cat-icon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .sv-cat-icon-grid { grid-template-columns: 1fr; gap: .6rem; } }
.sv-cat-icon-card {
  display: flex; align-items: center; gap: .85rem; padding: .95rem 1rem; text-decoration: none;
  background: var(--sv-surface); border: 1px solid var(--sv-border); color: var(--sv-heading);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sv-cat-icon-card:hover { border-color: var(--sv-primary); transform: translateY(-2px); box-shadow: var(--sv-shadow-tile); }
.sv-cat-icon-badge {
  flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sv-primary-light); color: var(--sv-primary-dark); font-size: 1.5rem;
}
.sv-cat-icon-card:nth-child(even) .sv-cat-icon-badge { background: var(--sv-accent-light); color: var(--sv-accent-dark); }
.sv-cat-icon-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sv-cat-icon-name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sv-cat-icon-count { font-size: .8rem; color: var(--sv-muted); }
.sv-cat-icon-go { color: var(--sv-muted); }
.sv-svc-icon { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-primary-light); color: var(--sv-primary-dark); font-size: 1.15rem; }

/* ---- Hero slideshow (real category photos, looping) -------------------- */
.sv-hero-slides { position: relative; height: 380px; overflow: hidden; background: var(--sv-surface-warm, #eef1f3); box-shadow: var(--sv-shadow-card); }
.sv-hero-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .9s ease; text-decoration: none; }
.sv-hero-slide.is-active { opacity: 1; z-index: 1; }
.sv-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,0) 55%); }
.sv-hero-slide-cap { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; color: #fff; font-weight: 600; font-size: 1.1rem; display: inline-flex; gap: .5rem; align-items: center; }
.sv-hero-dots { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: flex; gap: .4rem; }
.sv-hero-dots span { width: 18px; height: 4px; background: rgba(255,255,255,.45); }
.sv-hero-dots span.is-active { background: #fff; }
@media (max-width: 991.98px) { .sv-hero-slides { height: 260px; } }
@media (prefers-reduced-motion: reduce) { .sv-hero-slide { transition: none; } }

/* ---- Full-bleed hero carousel (search card unchanged) ------------------ */
.sv-hero.sv-hero-full { background: linear-gradient(135deg, #12303f, #2b4a5c); min-height: min(86svh, 720px); display: flex; align-items: center; padding: 3.5rem 0 4.5rem; isolation: isolate; position: relative; overflow: hidden; }
.sv-hero.sv-hero-full::before { content: ""; display: block; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8,16,22,.62) 0%, rgba(8,16,22,.42) 45%, rgba(8,16,22,.74) 100%); }
.sv-hf-slide { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease-in-out; }
.sv-hf-slide.is-active { opacity: 1; }
.sv-hf-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); will-change: transform; }
.sv-hf-slide.is-active .sv-hf-img { animation: sv-kenburns 9.5s ease-out forwards; }
@keyframes sv-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.sv-hero-full .sv-hf-inner { position: relative; z-index: 1; width: 100%; }
.sv-hero-full h1 { color: #fff; max-width: 640px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.sv-hero-full h1 .sv-accent-word { color: #fff; border-bottom: 3px solid #f2b705; }
.sv-hero-full p.sv-lede { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.sv-hero-full .sv-search-card { box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.sv-hf-caption { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.sv-hf-badge { background: rgba(8,16,22,.72); color: #fff; padding: .45rem .8rem; font-size: .9rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(4px); }
.sv-hf-badge:hover { background: rgba(8,16,22,.9); color: #fff; }
.sv-hf-dots { display: flex; gap: .35rem; }
.sv-hf-dots span { width: 18px; height: 4px; background: rgba(255,255,255,.45); }
.sv-hf-dots span.is-active { background: #fff; }
@media (max-width: 767.98px) { .sv-hero.sv-hero-full { padding: 2.25rem 0 4rem; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .sv-hf-slide { transition-duration: .01s; } .sv-hf-slide.is-active .sv-hf-img { animation: none; } }

/* Keep side gutters when .sv-container is combined with .sv-section(-sm) */
.sv-container.sv-section, .sv-container.sv-section-sm, .sv-container.sv-page-header { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 575.98px) { .sv-container.sv-section, .sv-container.sv-section-sm, .sv-container.sv-page-header { padding-left: 1rem; padding-right: 1rem; } }

/* Navbar: never wrap link labels onto two lines */
.sv-navbar a, .sv-navbar button, .sv-nav-signin { white-space: nowrap; }
.sv-hf-slide picture { display: block; width: 100%; height: 100%; }
@media (max-width: 767.98px) { .sv-hf-slide.is-active .sv-hf-img { animation-name: sv-kenburns-sm; } }
@keyframes sv-kenburns-sm { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- How it works page ------------------------------------------------- */
.sv-hiw-head { background: var(--sv-surface); border-bottom: 1px solid var(--sv-border); padding: 3rem 0 1.75rem; }
.sv-hiw-kicker { color: var(--sv-primary-dark); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .5rem; }
.sv-hiw-head h1 { max-width: 760px; margin: 0 0 .75rem; }
.sv-hiw-lede { max-width: 640px; color: var(--sv-muted); font-size: 1.05rem; margin: 0 0 1.5rem; }
.sv-hiw-jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-hiw-jump a { padding: .45rem .9rem; border: 1px solid var(--sv-border); background: var(--sv-surface); color: var(--sv-heading); font-weight: 600; font-size: .9rem; text-decoration: none; }
.sv-hiw-jump a:hover { border-color: var(--sv-primary); color: var(--sv-primary-dark); }
.sv-hiw { padding-top: 2rem; padding-bottom: 3rem; }
.sv-hiw-block { padding: 2.25rem 0; border-bottom: 1px solid var(--sv-border); scroll-margin-top: 80px; }
.sv-hiw-block:last-of-type { border-bottom: 0; }
.sv-hiw-title { max-width: 640px; margin-bottom: 1.5rem; }
.sv-hiw-title h2 { margin: .35rem 0 .35rem; }
.sv-hiw-title p { color: var(--sv-muted); margin: 0; }
.sv-hiw-tag { display: inline-block; background: var(--sv-primary-light); color: var(--sv-primary-dark); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; }
.sv-hiw-tag-alt { background: var(--sv-accent-light); color: var(--sv-accent-dark); }
.sv-hiw-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; counter-reset: none; }
.sv-hiw-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: var(--sv-surface); border: 1px solid var(--sv-border); }
.sv-hiw-num { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-primary); color: #fff; font-weight: 700; }
.sv-hiw-steps h3 { font-size: 1.02rem; margin: 0 0 .25rem; }
.sv-hiw-steps p { margin: 0; color: var(--sv-muted); font-size: .94rem; }
.sv-hiw-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.sv-hiw-cols h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.sv-hiw-cols p { color: var(--sv-muted); }
.sv-hiw-panel { padding: 1.25rem; background: var(--sv-surface); border: 1px solid var(--sv-border); }
.sv-hiw-list { margin: 0; padding-left: 1.1rem; color: var(--sv-muted); }
.sv-hiw-list li { margin-bottom: .5rem; }
.sv-hiw-faq details { border: 1px solid var(--sv-border); background: var(--sv-surface); padding: .9rem 1rem; margin-bottom: .6rem; }
.sv-hiw-faq summary { cursor: pointer; font-weight: 600; color: var(--sv-heading); }
.sv-hiw-faq details p { margin: .6rem 0 0; color: var(--sv-muted); }
.sv-hiw-cta { text-align: center; padding: 2.5rem 1rem 0; }
@media (max-width: 767.98px) {
  .sv-hiw-steps, .sv-hiw-cols { grid-template-columns: 1fr; }
  .sv-hiw-head { padding: 2rem 0 1.25rem; }
}