/* ==================================================
   NWS – Services Enhancement Stylesheet
   Scope: services-2.html, service-single.html, service-table.html,
   tableServ*.html, web*.html only. Not referenced by any other page,
   so the rest of the site is unaffected. Reuses the existing design
   tokens from css/colors/scheme-1.css and css/style.css
   (--primary-color, --secondary-color, --primary-gradient, --bg-light,
   --body-font) to stay inside the site's visual scheme.
   ================================================== */

/* ---------- hero badge ---------- */
.svc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}

.svc-hero-badge i { color: #9db8ff; font-size: 14px; }

/* ---------- sidebar navigation ---------- */
.svc-sidenav-title {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: #9a9bb0;
  margin-bottom: 16px;
}

/* Bootstrap's .row stretches .col-lg-3 to match the tall content column
   (default flex align-items:stretch), but its own child div (.svc-sidenav-col)
   does NOT inherit that height automatically — without this, position:sticky
   only had ~380px of natural content height to move within and lost its
   stickiness a short way down the page. Stretching the wrapper to 100% gives
   the sticky nav the whole column's height to follow within. */
@media (min-width: 992px) {
  .svc-sidenav-col { height: 100%; }
}

.svc-sidenav-list { position: sticky; top: 110px; }

.svc-side-link {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--bg-light);
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.svc-side-link i {
  font-size: 19px;
  width: 24px;
  text-align: center;
  color: var(--primary-color);
  flex-shrink: 0;
  transition: color .25s ease;
}

.svc-side-link h5 { margin: 0; font-size: 14.5px; line-height: 1.3; }

.svc-side-link .svc-arrow { margin-left: auto; opacity: 0; transition: opacity .2s ease; font-size: 18px; }

.svc-side-link:hover { transform: translateX(4px); text-decoration: none; }

.svc-side-link.active {
  background: linear-gradient(var(--primary-gradient));
}

.svc-side-link.active i,
.svc-side-link.active h5 { color: #fff; }

.svc-side-link.active .svc-arrow { opacity: 1; }

.svc-sidenav-spacer { display: none; }
.svc-scroll-hint { display: none; }

@media (max-width: 991px) {
  /* Always-visible "service switcher" bar on mobile/tablet: pinned to the
     viewport (not just its own column) so sibling services stay one tap
     away no matter how far the visitor has scrolled. position:sticky was
     tried first but only holds while its own (very short) column is on
     screen, so it lost stickiness after a few hundred pixels — position:fixed
     pins it to the viewport itself. header{} is position:absolute (not
     fixed) and only overlaps the very top of the page, so this never
     collides with it once the user has scrolled past the hero. */
  .svc-sidenav-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 950;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 12px 46px 12px 14px;
    margin: 0;
    border-radius: 0;
    /* solid background, not backdrop-filter: blurring everything behind a
       fixed element forces a re-composite on every scroll frame, which is a
       common source of scroll jank on weaker/older mobile GPUs */
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(20, 20, 45, .12);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .svc-side-link { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; }
  .svc-side-link:hover { transform: none; }

  /* visual cue that the bar scrolls sideways: a fade into the bar's own
     background plus a gently nudging arrow, so the "more services" scroll
     affordance isn't missed. Sits on top of (not inside) the scrolling list,
     so it stays put regardless of scroll position. Left/right shown or
     hidden by the small inline script based on actual scroll position — a
     right-only hint that never went away made it look like the list simply
     never ends. */
  .svc-scroll-hint {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    height: 71px;
    width: 58px;
    z-index: 951;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }

  .svc-scroll-hint.is-visible { opacity: 1; }

  .svc-scroll-hint-right { right: 0; justify-content: flex-end; padding-right: 12px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 60%); }
  .svc-scroll-hint-left { left: 0; justify-content: flex-start; padding-left: 12px; background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 60%); }

  .svc-scroll-hint i {
    color: #fff;
    background: linear-gradient(var(--primary-gradient));
    font-size: 17px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), .35);
    animation: svcScrollHint 1.6s ease-in-out infinite;
  }

  .svc-scroll-hint-left i { animation-name: svcScrollHintLeft; }

  @keyframes svcScrollHint {
    0%, 100% { transform: translateX(0); opacity: .85; }
    50% { transform: translateX(4px); opacity: 1; }
  }

  @keyframes svcScrollHintLeft {
    0%, 100% { transform: translateX(0); opacity: .85; }
    50% { transform: translateX(-4px); opacity: 1; }
  }

  .svc-sidenav-title { display: none; }

  /* reserves the vertical space the fixed bar takes out of the flow, so the
     hero/content below it doesn't jump up underneath it */
  .svc-sidenav-spacer { display: block; height: 72px; }

  /* the fixed bar already adds 72px of reserved space above the content;
     without this the section's own 40px top padding stacks on top of that
     and reads as a big dead gap under the hero */
  .svc-content-section { padding-top: 16px; }
}

/* ---------- intro media frame ---------- */
/* position:relative only — no overflow:hidden here. The badge overlay
   below the image is absolutely positioned and, at narrower desktop widths,
   wraps to more lines and grows taller than the image; overflow:hidden on
   this wrapper was silently clipping the bottom of that badge text. Rounding
   is applied to the image and the gradient overlay individually instead, so
   both stay visually rounded without clipping the overlapping badge. */
.svc-media-frame { position: relative; }

.svc-media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--primary-gradient));
  opacity: .12;
  pointer-events: none;
  border-radius: 16px;
}

.svc-media-frame img {
  display: block;
  border-radius: 16px;
  /* the intro logo graphics (images/logo1 (1).svg / (3).svg) render their
     wordmark in a fairly low-contrast blue on dark navy; boosting contrast
     here (scoped to just this image, not the source file) makes the text
     clearly legible without touching the asset itself */
  filter: contrast(1.4) brightness(1.08);
}

/* ---------- feature cards ---------- */
.svc-feature-card {
  background: var(--bg-light);
  border-radius: 14px;
  padding: 34px 28px;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}

.svc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(20, 20, 45, .12);
}

.svc-icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--primary-gradient));
  margin-bottom: 20px;
}

.svc-icon-tile i { font-size: 23px; color: #fff; }

.svc-feature-card h4 { margin-bottom: 10px; font-size: 18.5px; }
.svc-feature-card p { margin-bottom: 0; }

/* ---------- process steps: static 1-2-3 timeline ----------
   All three steps shown at once, connected by a line on tablet/desktop
   and stacked on mobile — no interaction required. */
.svc-steps-static-row { margin-top: 8px; position: relative; }

.svc-step-static { text-align: center; padding: 0 8px; }

.svc-step-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: var(--bg-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  position: relative;
  z-index: 1;
  transition: background .3s ease, box-shadow .3s ease;
}

.svc-step-circle span { font-size: 20px; font-weight: 700; font-family: var(--body-font); color: var(--primary-color); transition: color .3s ease; }

/* small interactive touch: the step nearest the cursor (desktop) or nearest
   the viewport center while scrolling (mobile, via IntersectionObserver in
   pageScript()) lights up white with the number reading blue against it */
@media (hover: hover) {
  .svc-step-static:hover .svc-step-circle { background: #fff; box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), .35); }
  .svc-step-static:hover .svc-step-circle span { color: var(--primary-color); }
}

.svc-step-static.is-active .svc-step-circle { background: #fff; box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), .35); }
.svc-step-static.is-active .svc-step-circle span { color: var(--primary-color); }

.svc-step-static h4 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.svc-step-static p {
  color: rgba(255, 255, 255, .65);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 240px;
}

@media (min-width: 768px) {
  .svc-steps-line::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 16.6667%;
    right: 16.6667%;
    height: 1px;
    background: rgba(255, 255, 255, .15);
    z-index: 0;
  }
}

@media (max-width: 767px) {
  .svc-step-circle { width: 56px; height: 56px; }
  .svc-step-static p { max-width: 320px; }
}

/* ---------- related services ---------- */
.svc-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-light);
  border-radius: 12px;
  padding: 18px 20px;
  height: 100%;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}

.svc-related-card:hover { background: linear-gradient(var(--primary-gradient)); transform: translateY(-3px); text-decoration: none; }
.svc-related-card:hover h5,
.svc-related-card:hover i { color: #fff; }

.svc-related-card i { font-size: 21px; color: var(--primary-color); flex-shrink: 0; transition: color .25s ease; }
.svc-related-card h5 { margin: 0; font-size: 14.5px; line-height: 1.3; transition: color .25s ease; }

/* ---------- FAQ ---------- */
/* Native <details>/<summary> — see build-services.js's faqItemsHtml() for
   why this isn't the theme's jQuery accordion. */
.svc-faq .accordion { display: flex; flex-direction: column; gap: 14px; }

.svc-faq-item {
  background: var(--bg-light);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}

.svc-faq-item:hover { box-shadow: 0 16px 34px rgba(20, 20, 45, .1); transform: translateY(-2px); }

.svc-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
  list-style: none;
}

/* hide the native disclosure triangle — the custom chevron replaces it */
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::marker { content: ""; }

.svc-faq-item[open] summary { background: rgba(var(--primary-color-rgb), .07); }

.svcfaq-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(var(--primary-gradient));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.svcfaq-q-text { flex: 1; line-height: 1.35; }

.svcfaq-chevron {
  flex-shrink: 0;
  font-size: 19px;
  color: var(--primary-color);
  transition: transform .3s ease;
}

.svc-faq-item[open] .svcfaq-chevron { transform: rotate(180deg); }

.svc-faq-answer {
  padding: 0 24px 24px 76px;
  margin: 0;
}

.svc-faq-answer p { margin: 0; }

/* ---------- outline button for light backgrounds ---------- */
/* The theme's own .btn-line is built for dark/.text-light sections (its
   border and hover state are white-based) and its .fx-slide hover swaps in
   a data-hover attribute we never set — on a light background both add up
   to an invisible border and blank text on hover. This is a self-contained
   replacement for the light sections this redesign introduces (callouts,
   admin-panel CTA, subcards): blue text at rest, filled blue gradient with
   white text on hover — no data-hover, no fx-slide dependency. */
.svc-btn-outline {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.svc-btn-outline:hover {
  background: linear-gradient(var(--primary-gradient));
  border-color: transparent;
  color: #fff;
  text-decoration: none;
}

/* ---------- callout banner (cross-links to related content) ---------- */
.svc-callout {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-light);
  border-radius: 16px;
  padding: 26px 30px;
  margin-top: 8px;
}

.svc-callout i {
  font-size: 26px;
  color: #fff;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(var(--primary-gradient));
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-callout .svc-callout-text { flex: 1; }
.svc-callout h5 { margin-bottom: 4px; }
.svc-callout p { margin: 0; }

@media (max-width: 575px) {
  .svc-callout { flex-direction: column; text-align: center; }
}

/* ---------- table of contents chips (pillar pages) ---------- */
.svc-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }

.svc-toc a {
  background: var(--bg-light);
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--body-font-color);
  transition: background .25s ease, color .25s ease;
}

.svc-toc a:hover { background: linear-gradient(var(--primary-gradient)); color: #fff; }

/* ---------- narrative content cards (pillar pages) ---------- */
.svc-content-card {
  background: var(--bg-light);
  border-radius: 16px;
  padding: 36px;
  margin-bottom: 24px;
  scroll-margin-top: 110px;
}

.svc-content-card h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.svc-content-card h3 i {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(var(--primary-gradient));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
}

.svc-subcard { background: #fff; border-radius: 12px; padding: 24px; height: 100%; }
.svc-subcard h5 { display: flex; align-items: center; gap: 10px; }
.svc-subcard h5 i { color: var(--primary-color); font-size: 18px; }

/* ---------- category mega cards (hub page) ---------- */
.svc-mega-card {
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
}

.svc-mega-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .12);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: #fff !important;
  transition: background .2s ease;
}

.svc-mega-pill:hover { background: rgba(255, 255, 255, .28); }
.svc-mega-pill i { font-size: 13px; }

/* ---------- prev/next page-through navigation ---------- */
.svc-pag-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-light);
  border-radius: 14px;
  padding: 20px 26px;
  height: 100%;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}

.svc-pag-card:hover {
  background: linear-gradient(var(--primary-gradient));
  transform: translateY(-3px);
  text-decoration: none;
}

.svc-pag-card:hover .svc-pag-text small { color: rgba(255, 255, 255, .8); }
.svc-pag-card:hover .svc-pag-text strong { color: #fff; }
.svc-pag-card:hover .svc-pag-arrow { background: rgba(255, 255, 255, .25); color: #fff; }

.svc-pag-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 18px;
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}

.svc-pag-text { display: flex; flex-direction: column; min-width: 0; }
.svc-pag-text small { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #9a9bb0; margin-bottom: 2px; transition: color .25s ease; }
.svc-pag-text strong { font-size: 15.5px; font-weight: 600; color: #35404e; transition: color .25s ease; }

.svc-pag-next { flex-direction: row-reverse; text-align: right; }
.svc-pag-next .svc-pag-text { align-items: flex-end; }

/* ---------- generic section anchor offset (fixed header) ---------- */
[id] { scroll-margin-top: 100px; }

/* ---------- TableServ price calculator ---------- */
.svc-price-base {
  background: var(--bg-light);
  border: 2px solid var(--primary-color);
  border-radius: 16px;
  padding: 28px 30px;
}

.svc-price-base-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.svc-price-base-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.svc-price-tag {
  background: linear-gradient(var(--primary-gradient));
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--body-font);
  padding: 10px 22px;
  border-radius: 50px;
  white-space: nowrap;
}

.svc-price-tag small { font-size: 14px; font-weight: 500; opacity: .85; }

.svc-price-includes { list-style: none; padding: 0; margin: 0; }

.svc-price-includes li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: rgba(53, 64, 78, .85);
}

.svc-price-includes li:last-child { margin-bottom: 0; }

.svc-price-includes li::before {
  content: "\eed8";
  font-family: "IcoFont";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-color);
  font-size: 18px;
}

.svc-price-vat-note {
  font-size: 12px;
  color: rgba(53, 64, 78, .55);
  margin: 16px 0 0;
}

.svc-price-addon-group-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--primary-color);
  margin: 22px 0 10px;
}

.svc-price-addon-group-heading:first-of-type { margin-top: 0; }

.svc-price-addons { display: flex; flex-direction: column; gap: 12px; }
.svc-price-addons + .svc-price-addon-group-heading { margin-top: 24px; }

.svc-price-addon {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-light);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.svc-price-addon:hover { background: rgba(var(--primary-color-rgb), .06); }

.svc-price-addon input[type="checkbox"],
.svc-price-addon input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.svc-price-addon-radio .svc-price-addon-check { border-radius: 50%; }

.svc-price-addon-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid rgba(53, 64, 78, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.svc-price-addon input:checked ~ .svc-price-addon-check {
  background: linear-gradient(var(--primary-gradient));
  border-color: transparent;
  color: #fff;
}

.svc-price-addon.is-checked { border-color: var(--primary-color); }

.svc-price-addon-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.svc-price-addon-title { font-weight: 700; color: #35404e; }
.svc-price-addon-desc { font-size: 13.5px; color: rgba(53, 64, 78, .65); }

.svc-price-addon-value {
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
  text-align: right;
}
.svc-price-addon-value small { display: block; font-weight: 500; font-size: 11.5px; color: rgba(53, 64, 78, .55); }

.svc-price-summary {
  position: sticky;
  top: 110px;
  background: var(--bg-light);
  border-radius: 16px;
  padding: 28px 26px;
}

.svc-price-summary h4 { margin-bottom: 18px; }

.svc-price-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(53, 64, 78, .8);
  padding: 8px 0;
  border-bottom: 1px solid rgba(53, 64, 78, .08);
}

.svc-price-summary-total,
.svc-price-summary-onetime {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  font-weight: 700;
}

.svc-price-summary-total { font-size: 20px; color: var(--primary-color); }
.svc-price-summary-onetime { font-size: 14.5px; color: #35404e; margin-top: 8px; }

.svc-price-disclaimer {
  font-size: 12.5px;
  color: rgba(53, 64, 78, .6);
  margin: 16px 0 18px;
}

@media (max-width: 991px) {
  .svc-price-summary { position: static; margin-top: 24px; }
}

@media (max-width: 575px) {
  .svc-price-base-header { flex-direction: column; align-items: flex-start; }
  .svc-price-addon { flex-wrap: wrap; }
  .svc-price-addon-value { margin-left: 40px; }
}

/* ---------- addon "Mehr erfahren" trigger + detail modal ---------- */
.svc-price-addon-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--body-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
}

.svc-price-addon-more i { font-size: 13px; }
.svc-price-addon-more:hover { text-decoration: underline; }

.svc-addon-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.svc-addon-modal .modal-header {
  border-bottom: 1px solid rgba(53, 64, 78, .08);
  padding: 22px 26px;
}

.svc-addon-modal .modal-title { font-weight: 700; color: #35404e; }

.svc-addon-modal .modal-body { padding: 24px 26px; }

.svc-addon-modal .modal-body h6 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--primary-color);
  margin: 20px 0 10px;
}

.svc-addon-modal .modal-body h6:first-of-type { margin-top: 4px; }

.svc-addon-modal .svc-price-tag-sm {
  display: inline-block;
  background: linear-gradient(var(--primary-gradient));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--body-font);
  padding: 6px 16px;
  border-radius: 50px;
}

.svc-addon-modal .svc-price-tag-sm small { font-size: 12px; font-weight: 500; opacity: .85; }

.svc-addon-modal .svc-price-includes li { font-size: 14.5px; }

.svc-addon-modal-benefit {
  font-size: 14px;
  color: rgba(53, 64, 78, .75);
  margin: 0;
}

.svc-addon-modal .modal-footer {
  border-top: 1px solid rgba(53, 64, 78, .08);
  padding: 16px 26px;
}

.svc-addon-modal .modal-footer .svc-btn-outline {
  background: none;
  cursor: pointer;
}

.svc-addon-modal .modal-footer .svc-btn-outline:hover {
  background: linear-gradient(var(--primary-gradient));
  color: #fff;
}

@media (max-width: 575px) {
  .svc-addon-modal .modal-dialog { margin: 12px; }
  .svc-addon-modal .modal-header,
  .svc-addon-modal .modal-body,
  .svc-addon-modal .modal-footer { padding-left: 18px; padding-right: 18px; }
}

/* ---------- addon group note (radio-tier explanations etc.) ---------- */
.svc-price-addon-qty-note {
  font-size: 12.5px;
  font-style: italic;
  color: rgba(53, 64, 78, .55);
  margin-top: 4px;
}

/* ---------- "more modules coming" note at the end of the addon list ---------- */
.svc-price-addons-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1.5px dashed rgba(53, 64, 78, .25);
  border-radius: 12px;
  font-size: 13.5px;
  font-style: italic;
  color: rgba(53, 64, 78, .6);
}

.svc-price-addons-note i { font-size: 18px; color: var(--primary-color); flex-shrink: 0; }