/* =====================================================================
   Service Panel — toned background, a scene, and the frosted info card.

   Scenes (.szs--*) are absolutely placed compositions inside .sz-svc__art.
   Their geometry adapts to the width of the panel itself (a container
   query on .sz-svc), not to the screen: the same panel sits in a
   narrow tab, a wide tab or on its own, and only its own width matters.

   Inside a closed tab (.sz-tabs__panel without .is-active) the scene's
   pieces wait off-stage and settle in when the tab opens.
   ===================================================================== */

.sz-w.sz-svc{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:30px;
  box-shadow:var(--sz-s2);
  background-color:transparent;
  container:szs / inline-size;
}
/* inline-size containment needs a width from outside: fill the container row too */
.e-con > .elementor-widget-sz-service-panel{width:var(--container-widget-width,100%)}
/* in a tab the frame belongs to the tab */
.sz-tabs__panel .sz-w.sz-svc{border-radius:0;box-shadow:none}

/* ---------- tones: gradient behind --szs-tone so a Style background can switch it off ---------- */
.sz-svc.sz-svc--dark{
  background-color:var(--sz-navy);
  background-image:var(--szs-tone,radial-gradient(70% 60% at 80% 0%,#22395A 0%,var(--sz-navy) 62%));
}
.sz-svc.sz-svc--peach{
  background-color:#FFFAF7;
  background-image:var(--szs-tone,radial-gradient(70% 70% at 85% 10%,#FFE3D4 0%,transparent 60%),radial-gradient(60% 60% at 0% 100%,#FFF1EA 0%,transparent 60%));
}
.sz-svc.sz-svc--cool{
  background-color:#F8F9FB;
  background-image:var(--szs-tone,radial-gradient(70% 70% at 15% 0%,#E6ECF3 0%,transparent 60%),radial-gradient(60% 60% at 100% 100%,#FFE9DE 0%,transparent 55%));
}
.sz-svc.sz-svc--grid{background-color:#FCFCFD}
/* graph paper on its own layer: its 40px tiling must never apply to a user's image */
.sz-svc.sz-svc--grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--szs-tone,linear-gradient(rgba(13,27,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,42,.045) 1px,transparent 1px));
  background-size:40px 40px;
}

/* ---------- visual area ---------- */
.sz-svc .sz-svc__art{
  position:relative;
  flex:1 1 auto;
  min-height:320px;
}
.sz-svc .sz-svc__art--empty{min-height:0}
.sz-svc .sz-svc__media{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}

/* ---------- info card ---------- */
.sz-svc .sz-svc__card{
  position:relative;z-index:3;
  display:grid;grid-template-columns:var(--szs-card-cols,1fr auto);gap:14px 20px;align-items:end;
  margin:0 14px 14px;padding:20px 20px 18px;
  border-radius:22px;
  background-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
          backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 10px 30px -14px rgba(13,27,42,.25);
}
.sz-svc .sz-svc__text{
  grid-column:1/-1;
  margin:0;padding:0;max-width:52ch;
  font-family:var(--sz-font);font-size:16px;font-weight:400;line-height:1.5;letter-spacing:normal;
  text-align:start;text-indent:0;text-wrap:wrap;hyphens:manual;
  color:var(--sz-ink);
}
.sz-svc .sz-svc__gets{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sz-svc .sz-svc__get{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;margin:0;padding:0 11px 0 8px;
  border-radius:99px;
  background-color:rgba(13,27,42,.05);
  font-family:var(--sz-font);font-size:13px;font-weight:500;line-height:1;
  color:var(--sz-ink);
  list-style:none;
}
.sz-svc .sz-svc__get::marker{content:none}
.sz-svc .sz-svc__get::before{content:none}
.sz-svc .sz-svc__get-icon{display:inline-grid;place-items:center;color:var(--sz-orange);font-size:14px}
.sz-svc .sz-svc__get-icon svg,.sz-svc .sz-svc__get-icon i{width:1em;height:1em}
.sz-svc .sz-svc__get-icon svg.szi{stroke-width:2.4}
.sz-svc .sz-svc__get-icon svg:not(.szi){fill:currentColor}

.sz-svc .sz-svc__btn{
  justify-self:var(--szs-btn-self,auto);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;margin:0;padding:0 18px;
  border:0;border-radius:99px;
  background-color:var(--sz-navy);
  box-shadow:0 10px 24px -10px rgba(13,27,42,.6);
  font-family:var(--sz-font);font-size:14px;font-weight:600;line-height:1;letter-spacing:normal;
  color:#fff;text-decoration:none;white-space:nowrap;
  cursor:pointer;
  transition:transform .35s var(--sz-spring),box-shadow .3s var(--sz-ease),background-color .3s;
}
.sz-svc .sz-svc__btn:is(:hover,:focus,:visited,:active){color:#fff;text-decoration:none}
.sz-svc .sz-svc__btn:is(:hover,:focus-visible){background-color:var(--sz-navy-2);transform:translateY(-1px)}
.sz-svc .sz-svc__btn:active{transform:scale(.96)}
.sz-svc .sz-svc__btn:focus-visible{outline:2px solid var(--sz-orange);outline-offset:3px}

/* ---------- pause / play (shown by the script only while something moves) ---------- */
.sz-svc .sz-svc__motion{
  position:absolute;top:10px;inset-inline-end:10px;z-index:8;
  display:grid;place-items:center;
  width:30px;height:30px;min-height:0;margin:0;padding:0;
  border:0;border-radius:50%;
  background-color:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--sz-s1);
  color:var(--sz-navy);
  font:inherit;line-height:1;text-transform:none;
  cursor:pointer;opacity:.7;
  transition:opacity .2s,transform .2s var(--sz-spring);
}
.sz-svc .sz-svc__motion[hidden]{display:none}
.sz-svc .sz-svc__motion:is(:hover,:focus,:active){background-color:rgba(255,255,255,.72);color:var(--sz-navy);box-shadow:var(--sz-s1)}
.sz-svc .sz-svc__motion:is(:hover,:focus-visible){opacity:1}
.sz-svc .sz-svc__motion:active{transform:scale(.92)}
.sz-svc .sz-svc__motion:focus{outline:none}
.sz-svc .sz-svc__motion:focus-visible{outline:2px solid var(--sz-orange);outline-offset:2px}
.sz-svc .sz-svc__motion svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sz-svc .sz-svc__motion .sz-svc__motion-play{display:none;fill:currentColor;stroke:none}
.sz-svc .sz-svc__motion.is-paused .sz-svc__motion-pause{display:none}
.sz-svc .sz-svc__motion.is-paused .sz-svc__motion-play{display:inline}

/* editor only: notes about input the widget had to work around */
.sz-svc .sz-svc__editor-note{position:absolute;top:10px;inset-inline-start:10px;z-index:9;display:grid;gap:4px;max-width:min(360px,70%);padding:10px 12px;border-radius:12px;background:#FFF6D9;box-shadow:var(--sz-s2);font-family:var(--sz-font);font-size:12px;line-height:1.4;color:#5B4A1B}
.sz-svc .sz-svc__editor-note b{font-weight:600;color:#8A7330}

/* =====================================================================
   Scenes — the shared frame. Each scene's own styles are in
   widgets/scenes/<scene>.css, loaded only where that scene is used.

   A scene is drawn on a design stage (695×400 px; a scene may define a
   compact stage for narrow panels) and scaled to fit its panel. The
   runtime sets the exact scale (--k) and centres it vertically (--ty);
   the steps below are its first-paint guess, from the panel's width.
   ===================================================================== */
.szs .szs-stage{
  --k:1;
  position:absolute;top:0;left:50%;
  width:695px;height:400px;margin-left:-347.5px;
  transform:translateY(var(--ty,0px)) scale(var(--k));
  transform-origin:50% 0;
  font-family:var(--sz-font);color:var(--sz-ink);
  -webkit-font-smoothing:antialiased;
}
.szs .szs-stage *,.szs .szs-stage *::before,.szs .szs-stage *::after{box-sizing:border-box}
.szs .szs-stage :is(i,b,em,small){font-style:normal}
@container szs (max-width:690px){.szs .szs-stage:not(.is-fit){--k:.92}}
@container szs (max-width:640px){.szs .szs-stage:not(.is-fit){--k:.85}}
@container szs (max-width:600px){.szs .szs-stage:not(.is-fit){--k:.8}}

/* narrow panels: the scene's compact stage (520 wide), same idea */
@container szs (max-width:560px){
  .szs .szs-stage{width:520px;margin-left:-260px}
  .szs .szs-stage:not(.is-fit){--k:1}
}
@container szs (max-width:520px){.szs .szs-stage:not(.is-fit){--k:.92}}
@container szs (max-width:480px){.szs .szs-stage:not(.is-fit){--k:.85}}
@container szs (max-width:440px){.szs .szs-stage:not(.is-fit){--k:.77}}
@container szs (max-width:400px){.szs .szs-stage:not(.is-fit){--k:.69}}
@container szs (max-width:360px){.szs .szs-stage:not(.is-fit){--k:.62}}
@container szs (max-width:320px){.szs .szs-stage:not(.is-fit){--k:.55}}

/* pieces settle in when their tab opens */
.szs .szs-stage > *{transition:opacity .6s var(--sz-ease),translate .9s var(--sz-spring)}
.sz-tabs__panel:not(.is-active) .szs .szs-stage > *{opacity:0;translate:0 24px}
.sz-tabs__panel.is-active .szs .szs-stage > :nth-child(2){transition-delay:.06s}
.sz-tabs__panel.is-active .szs .szs-stage > :nth-child(3){transition-delay:.12s}
.sz-tabs__panel.is-active .szs .szs-stage > :nth-child(4){transition-delay:.18s}

/* Decorative loops move only while the scene is live: on screen, in an open
   tab, not paused, not "Still", motion allowed. */
.sz-svc .szs:not(.is-live) *,.sz-svc .szs:not(.is-live) *::before,.sz-svc .szs:not(.is-live) *::after{animation-play-state:paused}

/* ---------- narrow panel: the card ---------- */
@container szs (max-width:484px){
  .sz-svc .sz-svc__card{margin:0 10px 10px;padding:16px}
  .sz-svc .sz-svc__text{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .sz-svc .szs *,.sz-svc .szs *::before,.sz-svc .szs *::after{animation:none;transition:none}
}