/* Panel [v97] - Services page (app/front/modified/services.twig).
   Every category is a closed card; (+) opens a table of its services.
   Used by guests (body.afg) and customers (body.afu); everything is scoped
   to .afsv / .afsv-zone so no other page is touched. */

.afsv-zone{ --s-brand:#036CB6; --s-brand-2:#2A83C2; --s-ink:#0B1F3A; --s-text:#2B3A4F; --s-muted:#5B6B82;
  --s-line:#E3EBF4; --s-alt:#F5F8FC; --s-tint:#E6F0F8; --s-green:#7CB82F; --s-green-2:#6AA624; }
.afsv{ max-width:1180px; margin:0 auto; padding:0 18px; position:relative; z-index:2; font-size:16px; }

/* guest page: the whole list sits on the brand blue, like the band above it */
body.afg .afsv-zone{ padding-bottom:70px; }
body.afg .afsv-zone .afsv-lead{ color:#fff; opacity:.92; text-align:center; font-size:17px; margin:-14px auto 26px; max-width:640px; position:relative; z-index:1; }
/* footer.twig opens with a <br> that showed as a white strip under the blue list */
body.afg .afsv-end + br{ display:none; }
/* customer pages already have the blue background */
body.afu .afsv-zone{ padding:8px 0 30px; }
body.afu .afsv .afsv-title{ color:#fff !important; font-size:28px; font-weight:800; margin:6px 0 4px; }
body.afu .afsv .afsv-lead{ color:#fff; opacity:.9; margin:0 0 18px; font-size:15px; }

.afsv-intro{ background:#fff; border-radius:18px; padding:18px 22px; margin:0 0 16px; color:var(--s-text); box-shadow:0 10px 26px rgba(6,40,92,.14); }

/* ---------- top bar: filter + search ---------- */
.afsv .afsv-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 16px; flex-wrap:wrap; }
.afsv .afsv-bar__left{ display:flex; gap:10px; flex-wrap:wrap; }
.afsv .afsv-dd{ position:relative; }
.afsv .afsv-btn{ display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 20px; border:0; border-radius:14px;
  background:#fff; color:var(--s-brand); font-weight:700; font-size:16px; cursor:pointer; box-shadow:0 8px 20px rgba(6,40,92,.18); line-height:1; }
.afsv .afsv-btn:hover{ background:#F2F7FC; }
.afsv .afsv-btn svg{ width:17px; height:17px; flex:0 0 auto; }
.afsv .afsv-btn .afsv-caret{ width:12px; height:12px; transition:transform .2s; }
.afsv .afsv-btn[aria-expanded="true"] .afsv-caret{ transform:rotate(180deg); }
.afsv .afsv-btn__label{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.afsv .afsv-menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:270px; max-width:min(420px, 90vw); max-height:60vh; overflow:auto;
  background:#fff; border-radius:14px; padding:8px; box-shadow:0 18px 40px rgba(6,40,92,.25); }
.afsv .afsv-menu[hidden]{ display:none; }
.afsv .afsv-menu__item, .afsv .afsv-menu a{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none;
  color:var(--s-ink) !important; font-size:15px; font-weight:600; text-align:left; cursor:pointer; text-decoration:none !important; line-height:1.35; }
.afsv .afsv-menu__item:hover, .afsv .afsv-menu a:hover{ background:var(--s-tint); }
.afsv .afsv-menu__item.is-on{ background:var(--s-tint); color:var(--s-brand) !important; }
.afsv .afsv-menu__item img{ width:20px !important; height:20px !important; object-fit:contain; display:block; margin:0 !important; }
.afsv .afsv-search{ position:relative; flex:1 1 360px; max-width:520px; margin:0; }
.afsv .afsv-search svg{ position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; color:var(--s-muted); pointer-events:none; }
.afsv .afsv-search input{ width:100% !important; height:50px; border:0 !important; border-radius:14px; padding:0 16px 0 46px !important; font-size:16px;
  background:#fff !important; color:var(--s-ink) !important; box-shadow:0 8px 20px rgba(6,40,92,.18) !important; outline:0; }
.afsv .afsv-search input:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 8px 20px rgba(6,40,92,.18) !important; }
.afsv .afsv-search input::placeholder{ color:#8A97AA; }

/* ---------- category cards ---------- */
.afsv .afsv-cat{ background:#fff; border-radius:18px; margin:0 0 12px; box-shadow:0 8px 22px rgba(6,40,92,.14); overflow:hidden; }
.afsv .afsv-cat[hidden]{ display:none; }
.afsv .afsv-cat__head{ display:flex; align-items:center; gap:14px; width:100%; min-height:72px; padding:14px 22px; border:0; background:#fff;
  text-align:left; cursor:pointer; color:var(--s-ink); font-size:19px; font-weight:700; line-height:1.3; }
.afsv .afsv-cat__head:hover{ background:#FAFCFE; }
/* focus ring only for keyboard users, not after a mouse click */
.afsv button:focus, .afsv a:focus, .afsv-modal button:focus, .afsv-modal a:focus{ outline:none; }
.afsv button:focus-visible, .afsv a:focus-visible, .afsv-modal button:focus-visible, .afsv-modal a:focus-visible{ outline:3px solid rgba(3,108,182,.45); outline-offset:2px; }
.afsv .afsv-cat__head:focus-visible{ outline-offset:-3px; }
.afsv .afsv-cat__pm{ position:relative; flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:#4A5A70; transition:background .2s; }
.afsv .afsv-cat__pm::before, .afsv .afsv-cat__pm::after{ content:""; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px; }
.afsv .afsv-cat__pm::before{ width:12px; height:2.5px; margin:-1.25px 0 0 -6px; }
.afsv .afsv-cat__pm::after{ width:2.5px; height:12px; margin:-6px 0 0 -1.25px; transition:transform .2s; }
.afsv .afsv-cat.is-open .afsv-cat__pm{ background:var(--s-brand); }
.afsv .afsv-cat.is-open .afsv-cat__pm::after{ transform:scaleY(0); }
.afsv .afsv-cat__icon{ display:inline-flex; align-items:center; flex:0 0 auto; }
.afsv .afsv-cat__icon:empty{ display:none; }
.afsv .afsv-cat__icon img{ width:26px !important; height:26px !important; object-fit:contain; display:block; margin:0 !important; }
.afsv .afsv-cat__name{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.afsv .afsv-cat__count{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--s-brand); background:var(--s-tint); border-radius:20px; padding:4px 11px; white-space:nowrap; }
.afsv .afsv-cat__body[hidden]{ display:none; }

/* ---------- services table ---------- */
.afsv .afsv-scroll{ overflow-x:auto; }
.afsv .afsv-table{ width:100%; border-collapse:collapse; margin:0; background:#fff; font-size:15.5px; }
/* the global Panel table rule (thead th: pale, UPPERCASE, 12px, !important) is overridden here */
.afsv .afsv-table th{ background:var(--s-brand) !important; color:#fff !important; font-weight:700; text-align:left; padding:14px 16px; border:0; font-size:15px !important;
  text-transform:none !important; letter-spacing:0 !important; vertical-align:bottom; white-space:nowrap; }
.afsv .afsv-table td{ padding:14px 16px; border:0; border-top:1px solid var(--s-line); color:var(--s-text); vertical-align:middle; line-height:1.45; }
.afsv .afsv-table tbody tr:nth-child(even) td{ background:var(--s-alt); }
.afsv .afsv-table tr[hidden]{ display:none; }
.afsv .afsv-table .afsv-id{ width:70px; color:var(--s-muted); font-weight:600; }
.afsv .afsv-table .afsv-name{ color:var(--s-ink); font-weight:600; min-width:240px; overflow-wrap:anywhere; }
.afsv .afsv-table .afsv-rate{ white-space:nowrap; font-weight:700; color:var(--s-ink); }
.afsv .afsv-table .afsv-num{ white-space:nowrap; }
.afsv .afsv-table .afsv-time{ min-width:140px; }
.afsv .afsv-act{ width:1%; white-space:nowrap; text-align:right; }
.afsv .afsv-act .afsv-b{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:36px; padding:0 14px; margin:3px 0 3px 6px; border:0; border-radius:10px;
  font-size:14px; font-weight:700; cursor:pointer; text-decoration:none !important; line-height:1; }
.afsv .afsv-b--view{ background:var(--s-tint); color:var(--s-brand) !important; }
.afsv .afsv-b--view:hover{ background:#D6E7F5; }
.afsv .afsv-b--buy{ background:var(--s-green); color:#fff !important; }
.afsv .afsv-b--buy:hover{ background:var(--s-green-2); }
.afsv .afsv-desc[hidden]{ display:none; }
/* (!) next to "Average Time" */
.afsv .afsv-tip{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; border-radius:50%;
  background:#fff; color:var(--s-brand); font-size:12px; font-weight:800; cursor:help; vertical-align:1px; }
.afsv .afsv-tip::after{ content:attr(data-tip); position:absolute; right:-8px; top:calc(100% + 10px); width:240px; padding:10px 12px; border-radius:10px;
  background:var(--s-ink); color:#fff; font-size:13px; font-weight:500; line-height:1.45; white-space:normal; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .15s; z-index:5; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.afsv .afsv-tip:hover::after, .afsv .afsv-tip:focus::after{ opacity:1; visibility:visible; }
.afsv .afsv-empty{ background:#fff; border-radius:18px; padding:26px; text-align:center; color:var(--s-muted); font-size:16px; box-shadow:0 8px 22px rgba(6,40,92,.14); }
.afsv .afsv-empty[hidden]{ display:none; }

/* ---------- "View" window ---------- */
.afsv-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(8,24,46,.55); }
.afsv-modal[hidden]{ display:none; }
.afsv-modal__card{ width:100%; max-width:580px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; }
.afsv-modal__head{ display:flex; align-items:flex-start; gap:12px; padding:20px 22px 12px; }
.afsv-modal__title{ flex:1 1 auto; margin:0; font-size:19px !important; font-weight:800; color:#0B1F3A !important; line-height:1.35; overflow-wrap:anywhere; }
.afsv-modal__x{ flex:0 0 36px; width:36px; height:36px; border:0; border-radius:50%; background:#EEF3F9; color:#0B1F3A; font-size:22px; line-height:1; cursor:pointer; }
.afsv-modal__facts{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 12px; }
.afsv-modal__facts span{ background:#E6F0F8; color:#0B1F3A; border-radius:10px; padding:6px 10px; font-size:13.5px; }
.afsv-modal__facts b{ color:#036CB6; font-weight:700; margin-right:4px; }
.afsv-modal__body{ padding:4px 22px 18px; overflow:auto; color:#2B3A4F; font-size:15.5px; line-height:1.7; overflow-wrap:anywhere; }
.afsv-modal__foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid #E3EBF4; }
.afsv-modal__foot a, .afsv-modal__foot button{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 22px; border:0; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer; text-decoration:none !important; }
.afsv-modal__close{ background:#EEF3F9; color:#0B1F3A; }
.afsv-modal__buy{ background:#7CB82F; color:#fff !important; }
body.afsv-noscroll{ overflow:hidden; }

/* ---------- phones: each service becomes a small card ---------- */
@media (max-width: 767px){
  .afsv{ padding:0 12px; }
  .afsv .afsv-bar{ flex-direction:column; align-items:stretch; }
  .afsv .afsv-bar__left{ width:100%; }
  .afsv .afsv-dd{ flex:1 1 auto; }
  .afsv .afsv-btn{ width:100%; justify-content:center; }
  .afsv .afsv-search{ max-width:none; flex:0 0 auto; }
  .afsv .afsv-menu{ left:0; right:0; min-width:0; max-width:none; }
  .afsv .afsv-cat__head{ font-size:16.5px; padding:12px 14px; gap:11px; min-height:62px; }
  .afsv .afsv-cat__pm{ flex-basis:24px; width:24px; height:24px; }
  .afsv .afsv-cat__count{ font-size:12px; padding:3px 9px; }
  .afsv .afsv-scroll{ overflow:visible; }
  .afsv .afsv-table thead{ display:none; }
  .afsv .afsv-table, .afsv .afsv-table tbody, .afsv .afsv-table tr, .afsv .afsv-table td{ display:block; width:100%; }
  .afsv .afsv-table tr{ padding:12px 14px; border-top:1px solid var(--s-line); }
  .afsv .afsv-table tbody tr:nth-child(even){ background:var(--s-alt); }
  .afsv .afsv-table td, .afsv .afsv-table tbody tr:nth-child(even) td{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:4px 0; border:0; background:none; text-align:right; min-width:0; }
  .afsv .afsv-table td::before{ content:attr(data-label); flex:0 0 auto; color:var(--s-muted); font-weight:600; font-size:13.5px; text-align:left; }
  /* higher than the even-row rule above, so every row's name stays left */
  .afsv .afsv-table tbody tr td.afsv-name, .afsv .afsv-table tbody tr:nth-child(even) td.afsv-name{ display:block; text-align:left; font-size:15.5px; padding:0 0 6px; min-width:0; }
  .afsv .afsv-table tbody tr td.afsv-name::before{ display:none; }
  .afsv .afsv-table .afsv-id, .afsv .afsv-table .afsv-time{ width:auto; min-width:0; }
  .afsv .afsv-act{ width:100%; justify-content:flex-end; padding-top:8px !important; }
  .afsv .afsv-act::before{ display:none; }
  .afsv .afsv-act .afsv-b{ flex:1 1 0; margin:0 0 0 8px; height:40px; }
  .afsv .afsv-act .afsv-b:first-of-type{ margin-left:0; }
  .afsv-modal{ align-items:flex-end; padding:0; }
  .afsv-modal__card{ max-width:none; border-radius:20px 20px 0 0; max-height:90vh; }
}