/* Famestate — Services (Quicpanel / roneybhai1).
   Layout follows the reference: a status line, a wide category filter beside a
   search field, then one table with ID / Service / Rate / Min / Max / Average
   time / Description / Order, split by full-width category bands.

   Presentation only. Every data-* hook the theme's filter and search scripts
   bind to is untouched, and this file replaces an inline <style> block that
   shipped with the page containing, among other things,
   `.body .form-control{width:0%}` — which collapsed every control to zero. */

/* ============================================================ STATUS LINE */
.fs-sv-bar-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-2) var(--fs-8);
  margin-bottom: var(--fs-4);
  padding: 14px var(--fs-5);
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-lg);
  background: #fff;
  box-shadow: 0 4px 16px -8px rgba(15, 23, 42, .08);
}
.fs-sv-bt { font-size: var(--fs-t-sm); color: var(--fs-muted); }
.fs-sv-bt b { font-weight: 700; color: var(--fs-ink); }
/* the three read as one line on desktop and stack evenly below it */
@media (min-width: 992px) { .fs-sv-bar-top { justify-content: space-between; } }

/* ============================================================ TOOLBAR */
.fs-sv-tools {
  display: flex;
  align-items: center;
  gap: var(--fs-4);
  margin-bottom: var(--fs-4);
}
.fs-sv-filter { display: flex; align-items: center; gap: var(--fs-3); flex: 1 1 46%; min-width: 0; }
.fs-sv-filter .component_filter_button { flex: 1; min-width: 0; }
.fs-sv-filter .dropdown { position: relative; }

.body .fs-sv .fs-sv-cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-3);
  width: 100%;
  height: 46px;
  padding: 0 var(--fs-4);
  border: 0;
  border-radius: var(--fs-r-sm);
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .55);
  font-size: var(--fs-t-body);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.body .fs-sv .fs-sv-cat-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px -10px rgba(79, 70, 229, .65); color: #fff; text-decoration: none; }
.body .fs-sv .fs-sv-cat-btn:focus-visible { outline: 2px solid var(--fs-brand); outline-offset: 2px; }
.body .fs-sv .fs-sv-cat-btn--alt {
  width: auto;
  border: 1px solid var(--fs-line);
  background: #fff;
  color: var(--fs-ink);
}
.body .fs-sv .fs-sv-cat-btn--alt:hover { border-color: #b6c7dd; background: var(--fs-soft); color: var(--fs-ink); }
.body .fs-sv .dropdown-toggle::after {
  margin-left: 2px;
  border: 0;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* search: input and its button read as one control */
.fs-sv-search { display: flex; flex: 1 1 46%; min-width: 0; }
.body .fs-sv .fs-sv-q {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 var(--fs-4);
  border: 1.5px solid var(--fs-line);
  border-right: 0;
  border-radius: var(--fs-r-sm) 0 0 var(--fs-r-sm);
  background: #fff;
  font-size: var(--fs-t-body);
  color: var(--fs-ink);
  transition: border-color .15s, box-shadow .15s;
}
.fs-sv-q::placeholder { color: #9db4c9; }
.fs-sv-q:focus, .fs-sv-q:focus-visible {
  border-color: var(--fs-brand);
  outline: 0;
  box-shadow: 0 0 0 3px var(--fs-brand-soft);
}
.body .fs-sv .fs-sv-q-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 46px;
  border: 0;
  border-radius: 0 var(--fs-r-sm) var(--fs-r-sm) 0;
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  font-size: var(--fs-t-body);
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease;
}
.body .fs-sv .fs-sv-q-btn:hover { filter: brightness(1.08); }

/* dropdown surface, shared by the category and guest-currency menus */
.body .fs-sv .fs-sv-menu {
  min-width: 260px;
  max-width: 420px;
  max-height: 360px;
  margin-top: var(--fs-2);
  padding: var(--fs-2);
  overflow-y: auto;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-r-md);
  background: #fff;
  box-shadow: var(--fs-e3);
}
.body .fs-sv .fs-sv-menu .dropdown-item {
  padding: var(--fs-2) var(--fs-3);
  border-radius: var(--fs-r-xs);
  font-size: var(--fs-t-sm);
  color: var(--fs-ink);
  white-space: normal;
  cursor: pointer;
}
.body .fs-sv .fs-sv-menu .dropdown-item:hover,
.body .fs-sv .fs-sv-menu .dropdown-item:focus {
  background: var(--fs-brand-soft);
  color: var(--fs-brand);
}

/* ============================================================ TABLE */
.fs-sv .fs-sv-card { padding: 0; overflow: hidden; border-radius: var(--fs-r-lg); box-shadow: 0 4px 16px -8px rgba(15, 23, 42, .08); }
.body .fs-sv .fs-sv-table { width: 100%; margin: 0; border-collapse: collapse; }
.body .fs-sv .fs-sv-table th {
  padding: var(--fs-3) var(--fs-4);
  border: 0;
  border-bottom: 1px solid var(--fs-line);
  background: #fff;
  text-align: left;
  font-size: var(--fs-t-micro);
  font-weight: 700;
  color: var(--fs-ink);
  white-space: nowrap;
}
.body .fs-sv .fs-sv-table td {
  padding: var(--fs-3) var(--fs-4);
  border: 0;
  border-bottom: 1px solid var(--fs-line);
  font-size: var(--fs-t-sm);
  color: var(--fs-ink);
  vertical-align: middle;
  /* Blue.css pins `.body .table tbody tr td{height:40px}`; harmless in a table,
     but it becomes a hard height once cells go block on mobile */
  height: auto;
}
.body .fs-sv .fs-sv-table tbody tr:last-child td { border-bottom: 0; }
.body .fs-sv .fs-sv-table tbody tr { transition: background-color .13s; }
@media (hover: hover) {
  .body .fs-sv .fs-sv-table tbody tr:not(.services-list-category-title):not(.fs-sv-subhead):not(.fs-sv-modal-row):hover td {
    background: var(--fs-soft);
  }
}

/* column widths — the service name takes whatever is left */
.fs-sv-c-id { width: 76px; }
.fs-sv-c-rate { width: 128px; }
.fs-sv-c-min, .fs-sv-c-max { width: 108px; }
.fs-sv-c-time { width: 148px; }
.fs-sv-c-desc { width: 150px; }
.fs-sv-c-act { width: 90px; text-align: center; }
.body .fs-sv .fs-sv-table th.fs-sv-c-act { text-align: center; }

.fs-sv-id { font-weight: 600; color: var(--fs-muted); font-variant-numeric: tabular-nums; }
.fs-sv-name { font-size: var(--fs-t-sm); line-height: 1.5; color: var(--fs-ink); }
.fs-sv-rate { font-weight: 700; color: var(--fs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-sv-num { color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-sv-time { font-size: var(--fs-t-cap); color: var(--fs-muted); }
.fs-sv-dash { color: var(--fs-muted); }

/* category band, and the column head repeated under it.

   Reported live: with dozens of services stacked under a band, and several
   bands one after another, the band and "its" rows read as one continuous
   blend once you scroll a little — nothing marks which rows you're still
   inside once the band that named them has scrolled out of view. Two
   minimal, no-new-color fixes rather than zebra-striping the rows (which
   would look busy on a page already carrying a brand gradient):
     1. the band sticks to the top of the viewport while its own rows are
        still passing underneath it, so the label is never out of sight.
     2. a visible gap before every band after the first, so a new category
        reads as a new section starting, not the next line of the old one. */
.body .fs-sv .fs-sv-table tr.services-list-category-title td { padding: 0; border-bottom: 0; }
.fs-sv-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px var(--fs-4);
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .35);
  text-align: center;
  font-size: var(--fs-t-sm);
  font-weight: 700;
  color: #fff;
}
.body .fs-sv .fs-sv-table tr.services-list-category-title:not(:first-of-type) .fs-sv-cat { margin-top: 22px; }
@media (max-width: 991px) {
  /* rows become one flat list of blocks here (see the >991px table rules
     below) — the same gap keeps a band reading as a new section starting */
  .body .fs-sv .fs-sv-table tr.services-list-category-title:not(:first-of-type) td { margin-top: 22px; }
}

/* ---- "currently viewing" pill --------------------------------------------
   A real sticky band (position:sticky on the band itself) turned out to be a
   no-op here: the band and its services are flat SIBLING <tr> rows, not a
   band nested around the rows it labels, so there is no bounded container
   for it to stick "over" — confirmed live, it just scrolled away with its
   own single row. Categories can run 50+ services deep, so once the real
   band scrolls off, nothing on screen says which category you're still
   inside. This small pill is set by JS (services.twig) tracking scroll
   position against each band's location, not CSS alone. */
.fs-sv-catpill {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(88vw, 420px);
  padding: 8px 16px;
  border-radius: var(--fs-r-pill);
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .5);
  font-size: var(--fs-t-cap);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fs-sv-catpill.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .fs-sv-catpill { transition: opacity .01ms; } }
/* category icon / emoji / uploaded image (categories.category_icon) */
.fs-sv-cat__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 1;
  font-size: 1em;
}
.fs-sv-cat__ic img { width: 1.15em; height: 1.15em; object-fit: contain; border-radius: 3px; }
/* the icon helper hard-codes font-size:20px inline, which dwarfs the band text */
.fs-sv-cat__ic i { font-size: 1.05em !important; line-height: 1; }
.fs-sv-menu .fs-sv-cat__ic { margin-right: 8px; color: var(--fs-brand); }
.fs-sv-menu .fs-sv-cat__ic img { width: 1.05em; height: 1.05em; }
.fs-sv-menu .fs-sv-cat__ic i { font-size: 1em !important; }
.body .fs-sv .fs-sv-table tr.fs-sv-subhead td {
  padding: var(--fs-3) var(--fs-4);
  background: var(--fs-soft);
  font-size: var(--fs-t-cap);
  font-weight: 700;
  color: var(--fs-ink);
  white-space: nowrap;
}

/* the parked dialog row must never occupy space */
.body .fs-sv .fs-sv-modal-row,
.body .fs-sv .fs-sv-modal-cell { padding: 0 !important; border: 0 !important; height: 0; }

/* ---- row actions -------------------------------------------------------- */
.body .fs-sv .fs-sv-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--fs-4);
  border-radius: var(--fs-r-pill);
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  font-size: var(--fs-t-cap);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.body .fs-sv .fs-sv-details:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; text-decoration: none; }
.body .fs-sv .fs-sv-cart {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fs-brand), #6366f1);
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .55);
  font-size: var(--fs-t-body);
  color: #fff;
  transition: transform .15s ease, filter .15s ease;
}
.body .fs-sv .fs-sv-cart:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.06); color: #fff; text-decoration: none; }
.body .fs-sv .fs-sv-details:focus-visible,
.body .fs-sv .fs-sv-cart:focus-visible { outline: 2px solid var(--fs-brand); outline-offset: 2px; }

/* ============================================================ MODAL */
.fs-svm .fs-sv-modal { border: 0; border-radius: var(--fs-r-md); box-shadow: 0 24px 60px -20px rgba(16, 32, 56, .5); }
.fs-svm .modal-header {
  align-items: flex-start;
  gap: var(--fs-3);
  padding: var(--fs-4) var(--fs-5);
  border-bottom: 1px solid var(--fs-line);
}
.fs-sv-modal__head { min-width: 0; }
.fs-sv-modal__id {
  display: inline-block;
  margin-bottom: var(--fs-1);
  padding: var(--fs-1) var(--fs-3);
  border-radius: var(--fs-r-pill);
  background: var(--fs-soft);
  font-size: var(--fs-t-micro);
  font-weight: 700;
  color: var(--fs-muted);
  font-variant-numeric: tabular-nums;
}
.fs-svm .fs-sv-modal__title { margin: 0; font-size: var(--fs-t-h3); font-weight: 700; line-height: 1.4; color: var(--fs-ink); }
.fs-sv-x {
  flex: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--fs-r-xs);
  background: var(--fs-soft);
  font-size: var(--fs-t-h2);
  line-height: 1;
  color: var(--fs-muted);
  cursor: pointer;
}
.fs-sv-x:hover { background: #e6ecf6; color: var(--fs-ink); }
.fs-svm .modal-body { padding: var(--fs-4) var(--fs-5); }
.fs-sv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--fs-3);
  margin: 0 0 var(--fs-4);
  padding: 13px var(--fs-4);
  border-radius: 9px;
  background: var(--fs-soft);
}
.fs-sv-facts dt {
  margin: 0 0 3px;
  font-size: var(--fs-t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-sv-facts dd { margin: 0; font-size: var(--fs-t-body); font-weight: 700; color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-sv-desc {
  max-height: 46vh;
  overflow-y: auto;
  font-size: var(--fs-t-sm);
  line-height: 1.7;
  color: var(--fs-ink);
  overflow-wrap: anywhere;
}
.fs-sv-desc :last-child { margin-bottom: 0; }
.fs-sv-desc img { max-width: 100%; height: auto; border-radius: var(--fs-r-sm); }
.fs-svm .modal-footer { padding: var(--fs-3) var(--fs-5); border-top: 1px solid var(--fs-line); }
.fs-sv-close {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: var(--fs-r-sm);
  background: var(--fs-brand);
  font-size: var(--fs-t-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.fs-sv-close:hover { background: #4038c9; }

/* admin-managed copy blocks */
.fs-sv .fs-sv-note { margin-bottom: var(--fs-4); font-size: var(--fs-t-sm); line-height: 1.6; }
.fs-sv .fs-sv-note--end { margin: var(--fs-4) 0 0; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1199px) {
  .fs-sv-c-time { width: 120px; }
  .fs-sv-c-desc { width: 130px; }
}

@media (max-width: 991px) {
  .fs-sv-tools { flex-wrap: wrap; }
  .fs-sv-filter, .fs-sv-search { flex: 1 0 100%; }

  /* one card per service — the page itself never scrolls sideways */
  .body .fs-sv .fs-sv-table,
  .body .fs-sv .fs-sv-table tbody,
  .body .fs-sv .fs-sv-table tr,
  .body .fs-sv .fs-sv-table td { display: block; width: 100%; }
  .body .fs-sv .fs-sv-table thead,
  .body .fs-sv .fs-sv-table tr.fs-sv-subhead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .body .fs-sv .fs-sv-table tbody tr:not(.services-list-category-title):not(.fs-sv-modal-row) {
    padding: 6px var(--fs-4) var(--fs-3);
    border-bottom: 1px solid var(--fs-line);
  }
  .body .fs-sv .fs-sv-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-4);
    padding: var(--fs-2) 0!important;
    border: 0;
    text-align: right;
  }
  .body .fs-sv .fs-sv-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--fs-t-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fs-muted);
  }
  /* the name reads as the card's own title */
  .body .fs-sv .fs-sv-table td.fs-sv-c-name { display: block; text-align: left; }
  .body .fs-sv .fs-sv-table td.fs-sv-c-name::before { content: none; }
  .fs-sv-name { font-weight: 600; }
  /* the category band spans the row: it must not become a flex cell with an
     empty ::before label pushing its text to one side */
  .body .fs-sv .fs-sv-table tr.services-list-category-title td {
    display: block;
    padding: 0 !important;
    text-align: left;
  }
  .body .fs-sv .fs-sv-table tr.services-list-category-title td::before { content: none; }
  .fs-sv-c-id, .fs-sv-c-rate, .fs-sv-c-min, .fs-sv-c-max,
  .fs-sv-c-time, .fs-sv-c-desc, .fs-sv-c-act { width: auto; text-align: right; }
  .body .fs-sv .fs-sv-details { width: 100%; }
  .body .fs-sv .fs-sv-table tbody tr:hover td { background: transparent; }
}

@media (max-width: 575px) {
  .fs-sv-bar-top { gap: var(--fs-2); padding: var(--fs-3) 14px; }
  .fs-sv-bt { font-size: var(--fs-t-sm); }
}

/* Order action inside the description dialog — the dialog previously had no
   way to actually buy the service it was describing. */
.fs-sv-cart--wide{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
  border-radius:10px; background:linear-gradient(135deg, var(--fs-brand, var(--primary)), #6366f1); color:#fff; font-weight:700;
  font-size:.88rem; text-decoration:none; margin-right:auto;
  box-shadow:0 8px 20px -10px rgba(79, 70, 229, .55);
  transition:transform .15s ease, filter .15s ease; }
.fs-sv-cart--wide:hover{ transform:translateY(-1px); filter:brightness(1.06); color:#fff; text-decoration:none; }

/* ==========================================================================
   Service description dialog — fixes + compact pass
   ==========================================================================
   The dialog is authored inside a hidden <tr>. `.fs-sv-card{overflow:hidden}`
   clipped its footer, and forcing position:fixed here fought Bootstrap's fade
   transition and made it flicker — so the dialog is relocated to <body> in JS
   (see services.twig) and this file only styles it.

   The dialog lives in a hidden <tr> inside the table, and `.fs-sv-card` sets
   `overflow:hidden` to keep the table's rounded corners. That combination
   clipped the dialog: it opened, but its footer (and the order button) were
   cut off by the card. Lifting the dialog out of the clipping context with a
   fixed position fixes it without touching the markup. */

/* the row itself must still take no space in the table */
.body .fs-sv .fs-sv-modal-row,
.body .fs-sv .fs-sv-modal-cell { padding: 0 !important; border: 0 !important; height: 0; overflow: visible; }

/* ---- compact, readable dialog ---- */
.fs-svm .modal-dialog { max-width: 520px; margin: 1.75rem auto; }

.fs-svm .fs-sv-modal { border-radius: 16px; overflow: hidden; }

.fs-svm .modal-header {
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
}
.fs-svm .fs-sv-modal__title {
  font-size: 1rem !important;
  line-height: 1.45 !important;
  /* long provider titles used to push the dialog several lines tall before the
     content even started */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the body scrolls instead of the dialog growing past the viewport */
.fs-svm .modal-body {
  padding: 0 18px 16px !important;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* facts strip */
.fs-svm .fs-sv-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 14px; padding: 12px; border-radius: 12px; background: var(--fs-soft, #f5f7fb);
}
.fs-svm .fs-sv-facts > div { text-align: center; }
.fs-svm .fs-sv-facts dt {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fs-muted, #7a89a0); font-weight: 600; margin-bottom: 3px;
}
.fs-svm .fs-sv-facts dd { margin: 0; font-size: .95rem; font-weight: 700; color: var(--fs-ink, #16233a); }

/* description text — the provider HTML often ships empty <li> and stray <br>,
   which rendered as blank bullets with big gaps */
.fs-svm .fs-sv-desc { font-size: .88rem; line-height: 1.65; color: var(--fs-ink, #16233a); }
.fs-svm .fs-sv-desc p { margin: 0 0 8px; }
.fs-svm .fs-sv-desc p:empty,
.fs-svm .fs-sv-desc li:empty,
.fs-svm .fs-sv-desc ul:empty { display: none; }
.fs-svm .fs-sv-desc br + br { display: none; }
.fs-svm .fs-sv-desc ul,
.fs-svm .fs-sv-desc ol { margin: 0 0 10px; padding-left: 18px; }
.fs-svm .fs-sv-desc li { margin-bottom: 4px; }
.fs-svm .fs-sv-desc > *:last-child { margin-bottom: 0; }

.fs-svm .modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px !important; border-top: 1px solid var(--fs-line, #e6e8ee);
}

/* order action inside the dialog — it previously had no way to buy the service
   it was describing */
.fs-sv-cart--wide {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  background: linear-gradient(135deg, var(--fs-brand), #6366f1); color: #fff;
  font-weight: 700; font-size: .86rem; text-decoration: none;
  margin-right: auto; width: auto; height: auto;
  box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .55);
  transition: transform .15s ease, filter .15s ease;
}
.fs-sv-cart--wide:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; text-decoration: none; }

@media (max-width: 576px) {
  .fs-svm .modal-dialog { margin: 1rem; max-width: none; }
  .fs-svm .fs-sv-facts { grid-template-columns: 1fr; text-align: left; }
  .fs-svm .fs-sv-facts > div { display: flex; justify-content: space-between; align-items: baseline; }
  .fs-svm .fs-sv-facts dt { margin: 0; }
}


/* The dialog is moved to <body> on load (see services.twig), so it is no longer
   a descendant of .fs-sv and every `.fs-sv .modal…` rule in this file stopped
   matching — including the one that made the fade end at opacity 1. These
   restate the essentials against the dialog's own class. */
.fs-svm.modal.fade        { opacity: 0; transition: opacity .15s linear; }
.fs-svm.modal.fade.show,
.fs-svm.modal.fade.in     { opacity: 1; }
.fs-svm .fs-sv-modal      { background: #fff; color: var(--fs-ink, #16233a); }

/* subtle grow-in on the dialog card itself, on top of Bootstrap's own opacity
   fade above — matches the entrance polish used on cards elsewhere in the
   theme (pg-faq/sx-card). Respects reduced-motion like every other animation
   in this theme. */
.fs-svm .fs-sv-modal { transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.fs-svm.modal.fade.show .fs-sv-modal,
.fs-svm.modal.fade.in .fs-sv-modal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fs-svm .fs-sv-modal { transition: none; transform: none; }
}