/* =====================================================================
   ProVita Sport 3.0: the ProVita 1.0 site, improved. Loaded after style.css and premium.css.
   - Navigation bar laid out like 2.0 (top strip, five two-line items, booking button,
     drop-down menu on phones and tablets), in the 1.0 colours.
   - Section colours alternate: light (paper), navy, light, navy...
   - Interactive map, booking-first contact band, colour flow between sections.
   ===================================================================== */

/* ---------- brand mint: the original provita.co.rs logo colour everywhere (owner, 2026-10-20) ---------- 1.0 used a green (#99f4bd, hover #c7ffdc); 3.0 uses the logo mint #7dd3c5 for buttons,accents and lines. */ :root{--mint:#7dd3c5;--mint-600:#5fbfaf;--mint-hi:#a3e3d8}
.btn-mint:hover{background:var(--mint-hi);box-shadow:0 8px 28px #7dd3c51f}
.book-list li::before{background:#2f8f80}
.note.mint{background:#e3f4f1;border-color:#c4e6e0;color:#134b44}

/* ---------- navigation bar ---------- */ .nbar{position:sticky;top:0;z-index:100;color:#fff;background:var(--ink-2)}
.nbar a{text-decoration:none!important}
.nb-util{background:var(--ink-2);border-bottom:1px solid var(--d-line);font-size:13.5px}
.nb-util-in{display:flex;align-items:stretch;justify-content:space-between;gap:24px;min-height:38px}
.nb-util-l,.nb-util-r{display:flex;align-items:stretch}
.nb-util a,.nb-util span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:#c9d5e0}
.nb-util-l>*+*{margin-left:28px}
.nb-util .ico{width:15px;height:15px;color:var(--mint)}
.nb-util-r>*{padding:0 18px;border-left:1px solid var(--d-line)}
.nb-util-r>*:last-child{padding-right:0}
.nb-util-r a{color:#fff;font-weight:600}
.nb-util-r .nb-book{color:var(--mint)}
@media (hover:hover) and (pointer:fine){.nb-util a:hover{color:var(--mint)}.nb-util-r .nb-book:hover{color:#fff}}
.nb-bar{background:var(--grad-head);border-bottom:1px solid var(--d-line);transition:box-shadow .3s}
.nbar.is-scrolled .nb-bar{box-shadow:0 8px 30px #06183038}
.nb-in{display:flex;align-items:stretch;min-height:86px}
.nb-logo{display:flex;align-items:center;flex:none;line-height:0}
.nb-logo img{height:40px;width:auto;transform:translateY(3px)} /* centres the PRO VITA block of the mark */ .nb-nav{flex:1 1 auto;display:flex;align-items:stretch;margin:0 18px 0 26px;border-left:1px solid var(--d-line);border-right:1px solid var(--d-line)}
.nb-nav a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 8px;color:#fff;text-align:center;white-space:nowrap;transition:background-color .15s}
.nb-nav a+a{border-left:1px solid var(--d-line)}
.nb-nl{font-size:16px;font-weight:600;line-height:1.1;letter-spacing:-.005em}
.nb-ns{font-size:12.5px;font-weight:500;line-height:1;color:#a9bacb}
.nb-nav a[aria-current=page]{background:rgba(255,255,255,.08)}
.nb-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--mint)}
.nb-nav a[aria-current=page] .nb-ns{color:var(--mint)}
.nb-nav a::before{content:"";position:absolute;left:22%;right:22%;bottom:16px;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .nb-nav a:hover{background:rgba(255,255,255,.06)}
  .nb-nav a:not([aria-current=page]):hover::before{transform:scaleX(1)}
}
.nb-cta{align-self:center;flex:none;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;margin-left:auto;background:var(--mint);color:var(--ink);white-space:nowrap;font:700 12.5px/1 var(--font);text-transform:uppercase;letter-spacing:.08em;transition:background-color .2s,transform .16s var(--ease)}
.nb-cta .ico{width:18px;height:18px}
.nb-cta:active{transform:scale(.97)}
.nb-cta-short{display:none}
@media (hover:hover) and (pointer:fine){.nb-cta:hover{background:var(--mint-hi)}}
.nb-menu-btn{display:none;position:relative;align-self:center;flex:none;width:46px;height:46px;margin-left:10px;padding:0;border:1px solid var(--d-line-2);background:transparent;color:#fff;cursor:pointer;transition:border-color .16s}
.nb-menu-btn span{position:absolute;left:13px;right:13px;height:2px;background:currentColor;transition:transform .26s var(--ease)}
.nb-menu-btn span:first-child{top:17px}
.nb-menu-btn span:last-child{top:25px}
.nb-menu-btn[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.nb-menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){.nb-menu-btn:hover{border-color:#fff}}
@media (max-width:1359px){
  .nb-logo img{height:36px}
  .nb-nav{margin:0 14px 0 20px}
  .nb-nl{font-size:15px}
  .nb-ns{font-size:12px}
  .nb-cta{padding:0 18px}
}
@media (max-width:1199px){
  .nb-nav{display:none}
  .nb-menu-btn{display:inline-block}
  .nb-in{min-height:74px}
}
@media (max-width:960px){.nb-util-l span{display:none}} /* hours stay in the menu and footer */ @media (max-width:760px){.nb-util{display:none}}
@media (max-width:600px){
  .nb-in{min-height:64px}
  .nb-logo img{height:30px;transform:translateY(2px)}
  .nb-cta{height:42px;padding:0 14px;font-size:12px;letter-spacing:.05em}
  .nb-menu-btn{width:42px;height:42px;margin-left:8px}
  .nb-menu-btn span{left:12px;right:12px}
  .nb-menu-btn span:first-child{top:15px}
  .nb-menu-btn span:last-child{top:23px}
  .nb-cta-long{display:none}.nb-cta-short{display:inline}
}
@media (max-width:374px){.nb-cta{width:42px;padding:0;justify-content:center}.nb-cta-short{display:none}}
/* a phone held sideways: the bar scrolls away instead of covering half the view (main.js reads this) */ @media (max-height:500px){.nbar{position:static}}

/* ---------- menu: drops down below the bar (phones and tablets) ---------- */ .nb-menu{position:fixed;top:var(--nb-top,64px);left:0;right:0;bottom:0;z-index:95}
.nb-scrim{position:absolute;inset:0;background:rgba(3,10,25,.55);opacity:0;transition:opacity .22s}
.nb-panel{position:relative;max-height:calc(100dvh - var(--nb-top,64px));overflow-y:auto;overscroll-behavior:contain;background:var(--header-blue);border-bottom:1px solid var(--d-line);box-shadow:0 24px 60px rgba(3,10,25,.45);transform:translateY(-10px);opacity:0;transition:transform .24s var(--ease),opacity .2s var(--ease)}
.nb-menu-in{padding-top:6px;padding-bottom:22px}
.nb-menu[data-open] .nb-scrim{opacity:1}
.nb-menu[data-open] .nb-panel{transform:none;opacity:1}
.nb-svc li{border-bottom:1px solid var(--d-line)}
.nb-svc a{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;color:#fff;text-decoration:none!important}
.nb-svc img{width:52px;height:52px;object-fit:cover;background:#fff}
.nb-svc .t{display:grid;gap:4px;font-size:17px;font-weight:600;line-height:1.2}
.nb-svc small{font-size:13.5px;font-weight:500;color:#a9bacb}
.nb-svc .p{font-size:15px;font-weight:600;white-space:nowrap}
.nb-svc a[aria-current=page] .t,.nb-svc a[aria-current=page] small{color:var(--mint)}
.nb-svc a[aria-current=page]::after{content:"";position:absolute;left:-12px;top:12px;bottom:12px;width:3px;background:var(--mint)}
.nb-links{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--d-line)}
.nb-links a{display:flex;align-items:center;gap:9px;height:56px;color:#fff;font-weight:600;font-size:15.5px;text-decoration:none!important}
.nb-links a+a{padding-left:16px;border-left:1px solid var(--d-line)}
.nb-links .ico{width:17px;height:17px;color:var(--mint)}
.nb-mbook{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:18px;background:var(--mint);color:var(--ink);text-decoration:none!important;font:700 14px/1 var(--font);text-transform:uppercase;letter-spacing:.08em}
.nb-mbook .ico{width:19px;height:19px}
.nb-minfo{margin-top:16px;font-size:14.5px;line-height:1.6;color:#a9bacb}
.nb-minfo a{color:#fff;font-weight:600}
.nb-panel .nb-stag{opacity:0;transform:translateY(6px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.nb-menu[data-open] .nb-stag{opacity:1;transform:none;transition-delay:var(--d,0ms)}
@media (min-width:1200px){.nb-menu{display:none}}

/* ---------- section colours alternate: light,navy,light ... ---------- */ /* Light pieces read --ink/--muted/--line/--blue/--paper; on navy those point at the light-on-dark values. */ .svc-sec.tone-w,.sec.tone-w,.pbody.tone-w,.band.tone-w{background:var(--paper);color:var(--ink)}
.sec.tone-b,.pbody.tone-b{background:var(--grad-head)}
.tone-b{color:#fff;--ink:#fff;--muted:var(--d-muted);--faint:var(--d-faint);--line:rgba(213,231,247,.16);--line-2:rgba(213,231,247,.1);--blue:var(--mint);--paper:rgba(255,255,255,.04)}
.tone-b .btn-mint,.tone-b .btn-line:hover{color:#0a2140}
.tone-b .prep li,.tone-b .formtable,.tone-b .report,.tone-b .tiles,.tone-b .tile,.tone-b .prep > p{background:rgba(255,255,255,.04)}
@media (hover:hover){.tone-b .tile:hover{background:rgba(255,255,255,.08)}}
.tone-b .cico,.tone-b .with-cico::before{border-color:var(--d-line-2)}
.tone-b .note.mint .ico,.tone-b .note.mint::before{color:#134b44}

/* service pages: every block is its own band of colour */ .pbody .wrap{padding-block:0}

/* home,Naše usluge on light: the 1.0 dark rows in ink */ .svc-sec.tone-w .svc-cols{color:var(--faint);border-top-color:var(--line)}
.svc-sec.tone-w .svc,.svc-sec.tone-w .svc li,.svc-sec.tone-w .svc > .svc-row{border-color:var(--line)}
.svc-sec.tone-w .svc-row{color:var(--ink)}
.svc-sec.tone-w .svc-n,.svc-sec.tone-w .svc-row::before{color:var(--faint)}
.svc-sec.tone-w .svc-row:hover .svc-n,.svc-sec.tone-w .svc-row:hover::before{color:var(--ink)}
.svc-sec.tone-w .svc-img{background:#fff}
.svc-sec.tone-w .svc-img::after{border-color:var(--line)}
.svc-sec.tone-w .svc-d{color:var(--muted)}
.svc-sec.tone-w .svc-dur{color:var(--ink)}
.svc-sec.tone-w .svc-price small,.svc-sec.tone-w .lbl{color:var(--muted)}
.svc-sec.tone-w .svc-go,.svc-sec.tone-w .svc-row::after{border-color:var(--line);color:var(--ink)}

/* home,Online zakazivanje on navy: one centred column (owner removed the card),booking button below */ .tone-b .book-list li::before{background:var(--mint)}
.book-solo{grid-template-columns:minmax(0,760px);justify-content:center}
.book-solo .book-intro{justify-items:center;text-align:center}
.book-solo .book-intro h2{max-width:none}
.book-solo .book-list{width:100%;text-align:left}
.book-solo .btn{margin-top:14px}
@media (max-width:600px){.book-solo .btn{width:100%;justify-content:space-between}}
/* the contact lines ("Za sve ostale preglede…") sit in the same block,under the booking button (owner, 2026-10-20) */ .book-solo{row-gap:0}
.book-contact{display:grid;justify-items:center;gap:22px;margin-top:56px;padding-top:48px;border-top:1px solid var(--line);text-align:center}
.book-contact>p{max-width:36ch;font-size:21px;line-height:1.45;color:#fff}
.book-contact .band-c{justify-content:center}
.book-contact .band-c .btn.btn-mail{margin-left:0;padding-inline:20px}
@media (max-width:600px){
  .book-contact{justify-items:stretch;margin-top:40px;padding-top:36px}
  .book-contact>p{font-size:18px}
}

/* ---------- location: interactive map (Leaflet + OpenStreetMap, no cookies) ---------- */ .loc{border-top:0}
.loc-map.lmap{height:480px;background:#e9edf1;color:var(--ink);border:1px solid var(--line)}
.loc-map.lmap::before{display:none}
.lmap-nojs{position:absolute;inset:0;display:grid;place-items:center;font-weight:600}
.lmap.leaflet-container{font-family:var(--font)}
.lmap .leaflet-tile-pane{filter:saturate(.85)}
.lmap .leaflet-control-zoom{border:1px solid var(--d-line-2);box-shadow:none}
.lmap .leaflet-control-zoom a{width:38px;height:38px;line-height:36px;background:#0a2140e6;color:#fff;border-bottom-color:var(--d-line);font:500 20px/36px var(--font);text-decoration:none}
.lmap .leaflet-control-zoom a:hover{background:#0e2a50;color:var(--mint)}
.lmap .leaflet-control-attribution{background:#0a2140bf;color:#c9d5e0;font-size:10.5px}
.lmap .leaflet-control-attribution a{color:#fff}
.lpin{position:relative;width:44px;height:44px}
.lpin-dot{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%!important;background:#0a2140;border:4px solid #fff;box-shadow:0 0 0 3px var(--mint),0 6px 18px rgba(0,0,0,.35)}
.lpin-ring{position:absolute;inset:0;border-radius:50%!important;border:3px solid #0a2140;opacity:0}
@media (prefers-reduced-motion:no-preference){.lpin-ring{animation:lpin-pulse 2200ms var(--ease) 600ms 3}}
@keyframes lpin-pulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.9);opacity:0}}
.lmap .leaflet-popup-content-wrapper{background:#0a2140;color:#fff;border:1px solid var(--d-line-2);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.lmap .leaflet-popup-tip{background:#0a2140}
.lmap .leaflet-popup-content{margin:14px 18px;font-size:15px;line-height:1.45}
.lmap .leaflet-popup-content b{display:block;font-size:16px;font-weight:600}
.lmap .leaflet-popup-content a{display:inline-block;margin-top:8px;color:var(--mint);font-weight:600}
@media (max-width:980px){
  /* phones and tablets: the map comes first,then the address,buses and stops */ .loc .loc-map.lmap{position:relative;top:auto;order:-1;height:360px}
}
@media (max-width:600px){.loc .loc-map.lmap{height:300px}}

/* ---------- contact band: online booking first; light after a navy block ---------- */ .band.tone-w::after{display:none}
.band.tone-w .band-c .btn-line:not(.btn-mail){border-color:var(--ink)}
.band.tone-w .band-c .btn+.btn{border-left-color:var(--ink)}
.band.tone-w .band-c .btn.btn-mail{border-color:transparent}
@media (max-width:600px){.band.tone-w .band-c .btn.btn-mail{border-color:var(--ink)}}

/* InBody: booking button inside the note */ .note.note-book{align-items:center;flex-wrap:wrap}
.note-book .btn{margin-left:auto}

/* ---------- colour flow: each section starts in the colour of the one above it ---------- */ @supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) {
    .morph{position:relative;isolation:isolate}
    .morph::before{
      content:"";position:absolute;inset:0 0 auto 0;height:min(100vh,100%);z-index:-1;pointer-events:none;
      background:linear-gradient(to bottom,var(--prev) 0%,var(--prev) 30%,transparent 72%);
      transform-origin:top;animation:morph-out linear both;animation-timeline:view();animation-range:entry 0% entry 45%;
    }
  }
}
@keyframes morph-out{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* ---------- home hero: the photo fills the right side from the bar to the bottom and fades only on its left edge into the navy (owner, 2026-10-20: no fade at the top, bottom or right). Each photo sets its own focal point inline (--fx wide screens, --fx-m narrower panels and phones). ---------- */ .hero::before,.hero-bg::after{background:none}
.hero-bg{
  /* the photo starts just after the headline (headline ≈ 8 × its font size, inside the 1.0 wrap) */
  top:0;bottom:0;left:calc(max(48px, 50vw - 688px) + clamp(422px, 37.2vw, 602px) + 24px);border:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%);
}
.hero .slide .fg{object-position:var(--fx,52%) 45%}
@media (min-width:801px){
  /* InBody: the studio photo's own background is a flat #f7f7f7,so the panel takes that colour and the photo sits seamlessly in the middle of it (never tinted, no blurred copy) */ .hero .slide.contain{background:#f7f7f7}
  .hero .slide.contain .blur{display:none}
  .hero .slide.contain .fg{inset:0;width:100%;height:100%;max-width:none;padding:40px 0 28px;object-fit:contain;object-position:58% 50%}
  /* caption and dots sit on a small navy plate,like the photo counter,so they read on light photos too */ .hero-ctrl{display:flex;align-items:center;justify-self:end;gap:22px;margin:0 0 28px;padding:12px 16px;border:1px solid #ffffff35;background:#0a2140c9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .hero-cap{text-align:left}
  .hero-cap b{white-space:nowrap}
}
@media (min-width:801px) and (max-width:899px){.hero-ctrl{flex-wrap:wrap;gap:8px 22px}}
@media (min-width:1150px) and (max-width:1330px){.hero-bg{left:552px}}
@media (max-width:1149px){.hero-bg{left:min(calc(54.5vw + 6px), 520px)}}
@media (max-width:1330px){.hero .slide .fg{object-position:var(--fx-m,var(--fx,52%)) 45%}}
@media (max-width:800px){
  /* phones: the photo stays behind the text as in 1.0,with a shade over it for legibility */ /* phones (owner, 2026-10-21, option C): the photo stands clear at the top in full colour,nothing over it; the title,caption and dots sit below it on navy. Only the photo's bottom edge melts into the navy. */ /* photo height: at least 62vw (380px on tablets),taller on tall phones so there is no empty navy under the title */ .hero{--ph:clamp(min(62vw,380px),calc(100svh - var(--mh,65px) - 510px + 6vw),min(80vw,380px))}
  .hero::before{bottom:0;background:linear-gradient(180deg,rgba(10,33,64,0) 0,rgba(10,33,64,0) calc(var(--ph) * .65),#0a2140 var(--ph))}
  .hero-bg{top:0;left:0;right:0;bottom:auto;height:var(--ph);opacity:1;-webkit-mask-image:none;mask-image:none}
  .hero .slide .fg{filter:none}
  .hero .wrap{padding-top:calc(var(--ph) - 6vw)}
}

/* ---------- home hero: title + photos only; on opening the first screen ends about halfway through the first service row "01" (owner, 2026-10-20: a fully visible row made the hero too small and the photos too cropped) ---------- */ .hero-copy{padding-block:10px 40px}
@media (min-width:801px){
  .hero{min-height:clamp(360px, calc(100svh - var(--mh, 126px) - 253px), 760px)}
  .hero .wrap{padding-top:36px}
  .svc-sec .wrap{padding-top:56px}
  .svc-head{padding-bottom:24px}
  .svc-row{padding-block:20px;min-height:128px}
}
@media (max-width:800px){
  .hero{min-height:calc(100svh - var(--mh, 65px) - 235px)}
  .hero-copy{padding-bottom:30px}
  .svc-sec .wrap{padding-top:52px}
}
@media (max-width:600px){.svc-sec .wrap{padding-top:44px}}

/* ---------- InBody page header: the device photo on its own flat #f7f7f7 background (owner, 2026-10-20: no box, no blurred haze, no visible edges). Wide screens: a light panel right of the text,fading only on its left edge. Narrower screens: a light band above the text. Never tinted. ---------- */ .phdr.is-studio .slide.contain{background:#f7f7f7}
.phdr.is-studio .slide.contain .blur{display:none}
.phdr.is-studio .slide.contain .fg{display:block;inset:0;width:100%;height:100%;max-width:none;padding:56px 32px 48px;object-fit:contain;object-position:50% 52%;transform:none;outline:0;box-shadow:none}
@media (min-width:1000px){
  .phdr.is-studio::before{background:none}
  .phdr.is-studio .phdr-bg{
    top:0;bottom:0;left:696px;opacity:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
  }
}
@media (min-width:1150px) and (max-width:1330px){.phdr.is-studio .phdr-bg{left:756px}}
@media (min-width:1331px){.phdr.is-studio .phdr-bg{left:calc(max(48px, 50vw - 688px) + 724px)}}
@media (max-width:999px){
  .phdr.is-studio{padding-top:min(80vw,380px)}
  .phdr.is-studio::before{display:none}
  .phdr.is-studio .phdr-bg{inset:0 0 auto 0;height:min(80vw,380px);opacity:1}
  .phdr.is-studio .slide.contain .fg{padding:24px 16px 20px}
}

/* home services list: kardio and grupni show one centred "Na upit" across the duration and price columns (owner, 2026-10-20) */ .svc-ask{grid-column:span 2;justify-self:center;text-align:center;font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
@media (max-width:1149px){.svc-ask{grid-row:2;grid-column:3}}
@media (max-width:600px){.svc-ask{grid-row:2;grid-column:2 / -1;font-size:16px}}

/* footer on phones and tablets: "Radno vreme" left,"Usluge" right,so the hours are not read as the hours of the services next to them (owner, 2026-10-21) */ @media (max-width:860px){
  .ftr-top>#termini{order:2;padding-left:0;padding-right:18px;border-left:0}
  .ftr-top>div:nth-child(2){order:3;padding-left:18px;padding-right:0;border-left:1px solid var(--d-line)}
}