/* =========================================================
   Прототип FitNow — дизайн-система з Figma
   navy/600 #02066F · orange/600 #ED4B00 · Inter
   ========================================================= */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;
}
.screen{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;background:#fff;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#15151A;font-feature-settings:'cv11';
}
.screen::-webkit-scrollbar{width:0}

.phone__viewport{
  --navy-600:#02066F; --navy-500:#252983; --navy-50:#F0F0F6;
  --or-600:#ED4B00; --or-500:#F06424;
  --g-0:#fff; --g-50:#F7F7FA; --g-100:#EEEEF2; --g-200:#E2E2E9;
  --g-300:#C9CAD4; --g-400:#A6A7B5; --g-500:#7D7E8F; --g-600:#5C5D6D;
  --g-700:#43434F; --g-900:#15151A;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#15151A;
}

.scr{min-height:100%;display:flex;flex-direction:column;padding-top:64px}
.scr--center{align-items:center;justify-content:center;text-align:center;padding:56px 24px}

/* ---------- Кнопки ---------- */
.btn-primary{
  width:100%;height:48px;border:0;border-radius:12px;background:var(--navy-600);color:#fff;
  font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;transition:background .15s,transform .06s;
}
.btn-primary:active{transform:scale(.99);background:#02055D}
.btn-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--navy-50);
  color:var(--navy-600);font-size:12px;font-weight:600;display:inline-grid;place-items:center;
}
.btn-white{
  width:100%;height:48px;border:0;border-radius:12px;background:#fff;color:var(--navy-600);
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}
.btn-link{
  width:100%;height:44px;border:0;background:transparent;color:var(--navy-600);
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}
.btn-link--light{color:#fff}

/* ---------- Онбординг: шапка й прогрес ---------- */
.ob-top{
  display:flex;align-items:center;justify-content:center;position:relative;
  height:44px;padding:0 24px;
}
.ob-step{font-size:14px;font-weight:500;color:var(--g-500)}
.ob-back{
  position:absolute;left:24px;display:inline-flex;align-items:center;gap:4px;
  border:0;background:none;padding:0;font-family:inherit;font-size:15px;font-weight:500;
  color:var(--g-900);cursor:pointer;
}
.ob-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ob-back--empty{position:static}
.ob-progress{display:flex;gap:8px;padding:12px 24px 0}
.ob-progress i{flex:1;height:4px;border-radius:99px;background:var(--g-100)}
.ob-progress i.is-on{background:var(--or-600)}

.ob-heading{padding:24px 24px 0}
.ob-heading h1{margin:0 0 4px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:.4px}
.ob-heading p{margin:0;font-size:16px;line-height:24px;letter-spacing:-.4px;color:var(--g-600)}

.ob-body{flex:1;padding:24px 24px 12px}
.ob-actions{
  position:sticky;bottom:0;background:#fff;padding:12px 24px 26px;
  display:flex;flex-direction:column;gap:2px;
}

/* ---------- Пошук ---------- */
.search{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;margin-bottom:20px;
  border:1px solid var(--g-200);border-radius:12px;background:#fff;
}
.search svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--g-500);stroke-width:1.7;stroke-linecap:round}
.search input{
  flex:1;border:0;outline:none;font:inherit;font-size:16px;color:var(--g-900);background:none;
}
.search input::placeholder{color:var(--g-500)}

/* ---------- Сітка активностей ---------- */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 16px}
.act{
  border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.act__img{
  position:relative;display:block;width:100%;aspect-ratio:107/96;border-radius:12px;overflow:hidden;
  background:var(--g-100);transition:box-shadow .14s;
}
.act__img img{width:100%;height:100%;object-fit:cover;display:block}

/* стан «обрано»: рамка navy/500 3px + білий кант + біла вуаль 50% */
.act.is-on .act__img{border:3px solid #252983;background:var(--navy-600)}
.act.is-on .act__img img{border-radius:9px}
.act.is-on .act__img::after{
  content:"";position:absolute;inset:0;background:rgba(2,6,111,.38);pointer-events:none;
}
.act__check{
  position:absolute;top:8px;right:8px;z-index:2;width:20px;height:20px;border-radius:4px;
  background:var(--navy-600);display:grid;place-items:center;
}
.act__check svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act__label{font-size:14px;line-height:20px;font-weight:500;color:var(--g-900)}

/* ---------- Рядки (формат, місто) ---------- */
.row{
  width:100%;display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:12px;
  border:1px solid var(--g-100);border-radius:12px;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .14s,background .14s;
}
.row.is-on{border-color:var(--navy-600);background:var(--g-50)}
.row__text{flex:1;display:flex;flex-direction:column;gap:2px}
.row__text b{font-size:16px;line-height:22px;font-weight:600;color:var(--g-900)}
.row__text i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-500)}
.row__thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.row__name{flex:1;font-size:16px;line-height:22px;font-weight:500}
.checkbox{
  width:20px;height:20px;border-radius:4px;border:1.5px solid var(--g-300);flex:none;
  display:grid;place-items:center;transition:background .14s,border-color .14s;
}
.checkbox.is-on{background:var(--navy-600);border-color:var(--navy-600)}
.checkbox svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.radio{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--g-300);flex:none;
  display:grid;place-items:center;transition:border-color .14s;
}
.radio.is-on{border-color:var(--navy-600);border-width:2px}
.radio.is-on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy-600)}

/* ---------- Вітальний екран ---------- */
.scr--welcome{padding:0;position:relative;justify-content:flex-end;min-height:100%;background:#0B0B0F;overflow:hidden}
.welcome__bg{
  position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  object-fit:cover;display:block;background:#0B0B0F;
}
.welcome__shade{
  position:absolute;left:0;right:0;top:391px;height:485px;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.8) 48%,
    rgba(0,0,0,1) 77%,
    rgba(0,0,0,1) 100%);
}
.welcome__logo{position:absolute;top:72px;left:24px;z-index:2;color:var(--navy-600);line-height:0}
.welcome__logo img{width:109px;height:16px;display:block}
.welcome__bottom{position:relative;z-index:2;padding:0 24px 33px}
.welcome__bottom h1{
  margin:0 0 4px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:.4px;color:#fff;
}
.welcome__bottom p{
  margin:0 0 56px;font-size:16px;line-height:24px;letter-spacing:-.4px;color:#fff;
}
.welcome__bottom .btn-white{
  background:#fff;color:var(--navy-600);letter-spacing:-.2px;margin-bottom:8px;
}
.welcome__bottom .btn-link{color:#fff;height:48px;letter-spacing:-.2px}

/* ---------- Підбір ---------- */
.loading__text{font-size:16px;line-height:24px;color:var(--g-900);margin:0}

/* ---------- Bottom-sheet ---------- */
.sheet-layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.sheet-layer > *{pointer-events:auto}
.sheet-layer.is-on .scrim{opacity:1}
.sheet-layer.is-on .sheet{transform:translateY(0)}
.scrim{position:absolute;inset:0;background:rgba(10,10,20,.42);opacity:0;transition:opacity .24s ease}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:82%;overflow-y:auto;background:#fff;
  border-radius:24px 24px 0 0;padding:10px 20px 28px;transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);box-shadow:0 -12px 40px rgba(10,10,20,.18);
}
.sheet--tall{max-height:92%}
.sheet__grip{width:38px;height:4px;border-radius:99px;background:#DCDCE4;margin:6px auto 14px;cursor:pointer}

/* ---------- Шити фільтрів ---------- */
.sheet--filter{height:612px;max-height:612px;padding:0;display:flex;flex-direction:column;overflow:hidden}
.fs{display:flex;flex-direction:column;height:100%}
.fs__head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  height:40px;margin:16px 24px 0;
}
.fs__head h3{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.fs__close{
  width:40px;height:40px;border:0;border-radius:999px;background:var(--g-50);cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.fs__close svg{width:20px;height:20px;fill:none;stroke:var(--g-900);stroke-width:1.8;stroke-linecap:round}
.fs__body{flex:1;min-height:0;overflow-y:auto;padding:24px 24px 130px;scrollbar-width:none}
.fs__body::-webkit-scrollbar{display:none}
.fs__foot{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:24px 24px 33px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 38%);
}
.fs__clear,.fs__save{
  flex:1;height:48px;border-radius:12px;font-family:inherit;font-size:16px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.fs__clear{border:1px solid var(--g-200);background:#fff;color:var(--navy-600)}
.fs__save{border:0;background:var(--navy-600);color:#fff}
.fs__badge{
  min-width:23px;height:20px;padding:0 6px;border-radius:999px;background:var(--navy-50);
  color:var(--navy-600);font-size:10px;font-weight:500;display:inline-grid;place-items:center;
}
.fs__search{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;margin-bottom:20px;
  border:1px solid var(--g-400);border-radius:8px;background:#fff;
}
.fs__search svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--g-500);stroke-width:1.7;stroke-linecap:round}
.fs__search input{flex:1;border:0;outline:none;font:inherit;font-size:16px;background:none;color:var(--g-900)}
.fs__search input::placeholder{color:var(--g-500)}

.fs__list{display:flex;flex-direction:column;gap:12px}

/* картка-рядок вибору */
.scard-row{
  display:flex;align-items:center;gap:12px;width:100%;height:76px;padding:16px;
  border:1px solid var(--g-200);border-radius:12px;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .14s,background .14s;
}
.scard-row--sm{height:56px}
.scard-row.is-on{border-color:var(--navy-600);background:var(--g-50)}
.scard-row__text{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.scard-row__text b{font-size:18px;line-height:24px;font-weight:600;color:var(--g-900)}
.scard-row__text i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-600)}
.fcheck{
  width:20px;height:20px;border-radius:4px;border:1.5px solid var(--g-400);flex:none;
  display:grid;place-items:center;transition:background .14s,border-color .14s;
}
.fcheck.is-on{background:var(--navy-600);border-color:var(--navy-600)}
.fcheck svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* чипси зручностей — за макетом 255:19072 */
.fs__chips{display:flex;flex-wrap:wrap;gap:12px 16px}
.achip{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  border:1px solid var(--g-200);border-radius:999px;background:var(--g-50);
  cursor:pointer;font-family:inherit;font-size:14px;line-height:20px;color:var(--g-600);
  transition:background .14s,border-color .14s,color .14s;
}
.achip__ico{width:16px;height:16px;flex:none;fill:currentColor}
.achip__x{width:20px;height:20px;flex:none;fill:currentColor;margin-right:-4px;opacity:.9}
.achip.is-on{background:var(--navy-600);border-color:var(--navy-600);color:#fff}

/* активний чипс фільтра на головній */
.fchip.is-on{border-color:var(--navy-600)}

/* порожній результат */
.empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;
}
.empty b{font-size:16px;font-weight:600}
.empty span{font-size:14px;line-height:20px;color:var(--g-600);max-width:280px}
.empty__btn{
  margin-top:8px;height:44px;padding:0 20px;border:1px solid var(--g-200);border-radius:12px;
  background:#fff;color:var(--navy-600);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.hrow__empty{font-size:13px;color:var(--g-500);padding:8px 0}

/* ---------- Тост ---------- */
.toast{
  position:absolute;left:50%;bottom:44px;transform:translate(-50%,14px);z-index:60;
  background:rgba(21,21,26,.94);color:#fff;font-size:13.5px;line-height:1.4;padding:11px 18px;
  border-radius:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
  max-width:82%;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Заглушка ---------- */
.stub{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:56px 34px;text-align:center;background:linear-gradient(#FBFBFD,#F4F4F8);
}
.stub__badge{
  position:absolute;top:66px;left:50%;transform:translateX(-50%);background:var(--navy-50);
  color:var(--navy-600);font-size:11.5px;font-weight:660;text-transform:uppercase;
  letter-spacing:.07em;padding:5px 11px;border-radius:8px;
}
.stub__art{
  width:74px;height:74px;border-radius:22px;background:#fff;border:1px solid var(--g-200);
  display:grid;place-items:center;margin-bottom:6px;
}
.stub__art svg{width:34px;height:34px;fill:none;stroke:var(--navy-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stub__title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.stub__hint{margin:0;font-size:14.5px;color:var(--g-600);line-height:1.5}
.stub__note{margin:10px 0 0;font-size:13px;color:var(--g-500);line-height:1.55;border-top:1px dashed var(--g-200);padding-top:14px}

/* =============== Головний екран =============== */
.scr--home{padding-top:64px;position:relative;height:100%;overflow:hidden}
.home__top{flex:none;padding:24px 0 0;background:#fff}

/* сегментований контрол */
.segmented{
  display:flex;gap:8px;margin:0 24px;padding:4px;height:40px;
  background:var(--g-50);border-radius:8px;
}
.seg{
  flex:1;min-width:0;border:0;background:transparent;border-radius:4px;cursor:pointer;font-family:inherit;
  font-size:14px;line-height:20px;font-weight:500;color:var(--g-600);transition:background .16s,color .16s;
}
.seg.is-on{background:#fff;color:var(--g-900);box-shadow:0 1px 4px rgba(10,5,38,.06)}
.fs .segmented{margin:0 0 20px;width:100%}

/* чипси фільтрів */
.fchips{
  display:flex;gap:8px;padding:16px 24px;overflow-x:auto;scrollbar-width:none;
}
.fchips::-webkit-scrollbar{display:none}
.fchip{
  flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;
  border:1px solid var(--g-200);border-radius:999px;background:#fff;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--g-900);white-space:nowrap;
}
.fchip__count{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--navy-600);
  color:#fff;font-size:12px;font-weight:600;display:inline-grid;place-items:center;
}
.ico-12{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* секції */
.home__body{flex:1;min-height:0;overflow-y:auto;padding-bottom:130px;scrollbar-width:none}
.home__body::-webkit-scrollbar{display:none}
.hsec + .hsec{margin-top:24px}
.hsec__head{display:flex;align-items:center;justify-content:space-between;height:32px;margin:0 24px 12px}
.hsec__head h2{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.hsec__more{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--navy-600);padding:6px 4px;
}
.hrow{
  display:flex;gap:16px;padding:0 24px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline:24px;scrollbar-width:none;
}
.hrow::-webkit-scrollbar{display:none}

/* картка студії */
.scard{
  flex:none;width:180px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  text-align:left;display:flex;flex-direction:column;scroll-snap-align:start;
}
.scard__photo{
  position:relative;display:block;width:180px;height:120px;border-radius:12px;overflow:hidden;
  background:var(--g-100);margin-bottom:8px;
}
.scard__photo img{width:100%;height:100%;object-fit:cover;display:block}
.scard__badge{
  position:absolute;top:8px;left:8px;background:var(--or-600);color:#fff;font-size:12px;
  font-weight:600;padding:3px 8px;border-radius:999px;
}
.scard__over{
  position:absolute;left:8px;bottom:8px;background:rgba(21,21,26,.82);color:#fff;font-size:12px;
  font-weight:500;padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px);
}
.scard__name{font-size:16px;line-height:22px;font-weight:600;color:var(--g-900);margin-bottom:2px}
.scard__sub{font-size:12px;line-height:16px;color:var(--g-500);margin-bottom:2px}
.scard__price{font-size:12px;line-height:16px;color:var(--g-900);margin-bottom:4px}
.scard__price i{font-style:normal;color:var(--g-500);margin-left:4px}
.scard__rating{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--g-900)}
.scard__rating i{font-style:normal;color:var(--g-500)}
.star{width:12px;height:12px;fill:#C73F00}

/* ---- вкладка «Тренування»: слайдер дат ---- */
.days{
  display:flex;gap:12px;padding:16px 24px;overflow-x:auto;
  scroll-padding-inline:24px;scrollbar-width:none;
}
.days::-webkit-scrollbar{display:none}
.day{
  flex:none;width:56px;height:56px;border:0;border-radius:999px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;font-family:inherit;transition:background .15s;
}
.day b{font-size:18px;line-height:22px;font-weight:600;color:var(--g-900)}
.day i{font-size:12px;line-height:14px;font-style:normal;font-weight:500;color:var(--g-500)}
.day.is-next{background:var(--g-100)}
.day.is-next b{color:var(--g-400)}
.day.is-on{background:var(--navy-50)}
.day.is-on b,.day.is-on i{color:var(--navy-600)}

/* ---- картка тренування ---- */
.wlist{display:flex;flex-direction:column;gap:8px;padding:24px 24px 0}
.wcard{
  display:flex;gap:12px;width:100%;padding:11px;border:1px solid var(--g-100);border-radius:12px;
  background:#fff;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s;
}
.wcard:active{border-color:var(--g-300)}
.wcard__img{width:107px;height:90px;border-radius:8px;object-fit:cover;flex:none;background:var(--g-100)}
.wcard__info{flex:1;min-width:0;display:flex;flex-direction:column}
.wcard__top{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.wcard__head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.wcard__title{font-size:16px;line-height:22px;font-weight:600;color:var(--g-900)}
.wcard__tag{
  display:inline-block;padding:2px 8px;border-radius:6px;background:#E8F1FE;color:#1863D6;
  font-size:10px;line-height:14px;font-weight:500;
}
.wcard__price{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.wcard__price b{font-size:14px;line-height:20px;font-weight:500;color:var(--g-900)}
.wcard__price i{font-size:10px;line-height:14px;font-style:normal;color:var(--g-500)}
.wcard__meta,.wcard__spots{
  display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;
}
.wcard__meta{color:var(--g-600);margin-bottom:6px}
.wcard__spots{color:#197C44}
.ico-13{width:13px;height:13px;flex:none;fill:currentColor}

/* нижня навігація — за макетом 255:17841 */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;height:124px;padding:6px 15px 43px;z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 46%);pointer-events:none;
}
.tabbar__pill{
  display:flex;gap:8px;height:76px;padding:8px;background:#fff;border:1px solid var(--g-100);
  border-radius:999px;box-shadow:0 4px 12px rgba(10,5,38,.08);pointer-events:auto;
}
.tab{
  flex:1;height:60px;display:flex;flex-direction:column;align-items:center;gap:0;
  border:0;background:none;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:10px;line-height:12px;font-weight:500;color:var(--g-500);padding:8px 0 0;
}
.tab__ico{width:24px;height:24px;fill:var(--g-500);margin-bottom:6px}
.tab span{display:block}
.tab.is-on{color:var(--navy-600)}
.tab.is-on .tab__ico{fill:var(--navy-600)}

/* =============== Профіль студії =============== */
.scr--studio{padding:0;height:100%;overflow:hidden}
.sp__scroll{height:100%;overflow-y:auto;scrollbar-width:none}
.sp__scroll::-webkit-scrollbar{display:none}

.sp__hero{position:relative;height:280px;background:#01033A}
.sp__gallery{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sp__gallery::-webkit-scrollbar{display:none}
.sp__gallery img{
  flex:none;width:100%;height:100%;object-fit:cover;display:block;scroll-snap-align:start;
}
/* одиночне фото в шапці (екран тренування) */
.sp__hero > img{width:100%;height:100%;object-fit:cover;display:block}
.sp__round{
  position:absolute;top:64px;width:32px;height:32px;border:0;border-radius:999px;background:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 2px 8px rgba(10,5,38,.14);
}
.sp__round--back{left:24px}
.sp__round--share{right:24px}
.sp__round svg{width:16px;height:16px;fill:var(--g-900)}
.sp__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;display:flex;gap:4px;pointer-events:none}
.sp__dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);transition:width .2s,background .2s}
.sp__dots i.is-on{width:16px;background:#fff}

.sp__info{padding:16px 24px 0}
.sp__title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sp__title h1{margin:0;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.03em}
.sp__rate{display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;padding-top:6px;white-space:nowrap}
.sp__rate i{font-style:normal;color:var(--g-500)}
.sp__addr{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--g-900)}
.sp__facts{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.sp__facts span{display:flex;align-items:center;gap:8px;font-size:16px;line-height:24px;color:var(--g-900)}
.sp__facts .ico-16{color:var(--g-600)}
.ico-18{width:18px;height:18px;flex:none;fill:currentColor}
.ico-16{width:16px;height:16px;flex:none;fill:currentColor}
.ico-20{width:20px;height:20px;flex:none;fill:currentColor}

.sp__tabs{
  display:flex;gap:8px;padding:32px 24px 0;overflow-x:auto;scroll-padding-inline:24px;scrollbar-width:none;
}
.sp__tabs::-webkit-scrollbar{display:none}
.stab-btn{
  flex:none;display:inline-flex;align-items:center;gap:8px;color:var(--g-600);height:44px;padding:0 16px;
  border:1px solid var(--g-200);border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;
  font-size:14px;color:var(--g-600);white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
}
.stab-btn.is-on{background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.stab-btn.is-on .ico-18{fill:#fff}

.sp__body{padding-top:24px;padding-bottom:40px}
.sp__body .days{padding-top:0}
.sp__body .wlist{padding-top:8px}

.stab{padding:0 24px}
.stab__text{margin:0 0 8px;font-size:15px;line-height:22px;color:var(--g-700)}
.stab__h{margin:24px 0 12px;font-size:16px;line-height:22px;font-weight:600;color:var(--g-900)}
.stab__chips{display:flex;flex-wrap:wrap;gap:8px}
.achip--static{cursor:default;font-size:13px;height:36px;padding:0 14px}
.stab__map{
  margin-top:12px;height:120px;border-radius:12px;background:var(--g-100);display:grid;place-items:center;
  color:var(--g-500);font-size:13px;
}

.trainer{
  display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--g-100);
  border-radius:12px;margin-bottom:8px;
}
.trainer img{width:56px;height:56px;border-radius:999px;object-fit:cover;flex:none}
.trainer__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trainer__info b{font-size:16px;line-height:22px;font-weight:600}
.trainer__info i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-500)}
.trainer__rate{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--g-900)}

.rsum{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.rsum b{font-size:34px;line-height:38px;font-weight:600;letter-spacing:-.03em}
.rsum__col{display:flex;flex-direction:column;gap:4px}
.rsum__stars{display:flex;gap:2px}
.rsum__stars .star{width:14px;height:14px}
.rsum i{font-style:normal;font-size:13px;color:var(--g-500)}
.review{padding:14px 0;border-top:1px solid var(--g-100)}
.review__top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.review__top b{font-size:15px;font-weight:600}
.review__top i{font-style:normal;font-size:12px;color:var(--g-500);margin-left:auto}
.review__stars{display:flex;gap:1px}
.review p{margin:0;font-size:14px;line-height:20px;color:var(--g-700)}

/* =============== Деталі тренування =============== */
.scr--workout{padding:0;height:100%;overflow:hidden;position:relative}
.wd__scroll{height:100%;overflow-y:auto;scrollbar-width:none;padding-bottom:160px}
.wd__scroll::-webkit-scrollbar{display:none}

.wd__title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 0}
.wd__left{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.wd__left h1{margin:0;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.03em}
.wd__right{display:flex;flex-direction:column;align-items:flex-end}
.wd__right b{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.03em}
.wd__right i{font-size:16px;line-height:24px;font-style:normal;color:var(--g-500)}

.wd__studio{
  display:flex;align-items:center;gap:8px;width:calc(100% - 48px);margin:32px 24px 0;padding:0;
  border:0;background:none;cursor:pointer;font-family:inherit;text-align:left;
}
.wd__studio{color:var(--g-600)}
.wd__studio span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wd__studio b{font-size:16px;line-height:22px;font-weight:600;color:var(--g-900)}
.wd__studio i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-500)}

.wd__tiles{display:flex;flex-wrap:wrap;gap:8px;padding:32px 24px 0}
.wtile{
  flex:1 1 calc(50% - 4px);display:flex;align-items:center;gap:8px;height:56px;padding:0 12px;
  background:var(--g-50);border-radius:12px;min-width:0;
}
.wtile--wide{flex:1 1 100%}
.wtile__ico{width:18px;height:18px;flex:none;fill:var(--navy-600)}
.wtile__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.wtile__text i{font-size:10px;line-height:12px;font-style:normal;font-weight:500;color:var(--g-500)}
.wtile__text b{font-size:14px;line-height:20px;font-weight:500;color:var(--g-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.wd__trainer{
  display:flex;align-items:center;gap:10px;margin:8px 24px 0;height:56px;padding:0 12px;
  background:var(--g-50);border-radius:12px;
}
.wd__avatar{
  width:40px;height:40px;border-radius:999px;background:var(--navy-50);display:grid;place-items:center;flex:none;
}
.wd__avatar svg{width:18px;height:18px;fill:var(--navy-600)}
.wd__tname{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.wd__tname i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-500)}
.wd__tname b{font-size:14px;line-height:20px;font-weight:500}
.wd__trate{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600}

.wd__about{padding:32px 24px 0}
.wd__about h2{margin:0 0 8px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.wd__about p{margin:0;font-size:16px;line-height:24px;color:var(--g-600)}

.wd__foot{
  position:absolute;left:0;right:0;bottom:0;padding:24px 24px 57px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 32%);
}

/* =============== Бронювання =============== */
.scr--bk{padding:0;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column}
.bk__scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:64px 0 130px}
.bk__scroll::-webkit-scrollbar{display:none}

.bk__nav{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px}
.bk__back{
  width:32px;height:32px;border:0;border-radius:999px;background:var(--g-50);cursor:pointer;
  display:grid;place-items:center;padding:0;color:var(--g-900);
}
.bk__nav h2{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}

/* картка-підсумок бронювання */
.bk__sum{
  display:flex;align-items:center;gap:10px;margin:24px 24px 0;padding:11px;
  background:var(--g-50);border:1px solid var(--g-100);border-radius:12px;
}
.bk__sum img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.bk__sum-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bk__sum-info b{font-size:14px;line-height:20px;font-weight:500}
.bk__sum-info i{font-size:12px;line-height:16px;font-style:normal;color:var(--g-500)}
.bk__sum-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bk__sum-price{display:flex;gap:6px;font-size:12px;line-height:16px}
.bk__sum-price b{font-weight:400;color:var(--g-900)}
.bk__sum-price i{font-style:normal;color:var(--g-500)}
.bk__badge{padding:2px 8px;border-radius:6px;font-size:10px;line-height:14px;font-weight:500}
.bk__badge--green{background:#E7F6ED;color:#197C44}
.bk__badge--navy{background:var(--navy-50);color:var(--navy-600)}
.bk__badge--amber{background:#FDF3E2;color:#9A6308}

.bk__head{padding:24px 24px 0}
.bk__head h1{margin:0 0 4px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.bk__head p{margin:0;font-size:16px;line-height:24px;color:var(--g-600)}

/* поля */
.bk__form{padding:20px 24px 0;display:flex;flex-direction:column;gap:20px}
.field-bk{display:flex;flex-direction:column;gap:6px}
.field-bk > span{font-size:14px;line-height:20px;font-weight:500;color:var(--g-900)}
.field-bk input{
  width:100%;min-width:0;height:48px;padding:0 16px;border:1px solid var(--g-300);border-radius:8px;background:#fff;
  font:inherit;font-size:16px;color:var(--g-900);outline:none;transition:border-color .15s;
}
.field-bk input::placeholder{color:var(--g-500)}
.field-bk input:focus{border-color:var(--navy-600)}
.field-row{display:flex;gap:12px}
.field-row .field-bk{flex:1 1 0;min-width:0}
.save-card{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--g-600);cursor:pointer}

.bk__foot{
  flex:none;padding:16px 24px 33px;background:#fff;border-top:1px solid var(--g-100);
}
.bk__foot--two{display:flex;flex-direction:column;gap:4px;border-top:0}

/* OTP */
.otp{display:flex;gap:16px;justify-content:center;padding:24px 24px 0}
.otp__cell{
  width:64px;height:64px;border:1px solid var(--g-400);border-radius:8px;background:#fff;
  text-align:center;font:inherit;font-size:24px;font-weight:600;color:var(--g-900);outline:none;
}
.otp__cell:focus{border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(2,6,111,.1)}
.otp__resend{margin:20px 0 0;text-align:center;font-size:12px;color:var(--navy-600)}

/* варіанти оплати — за макетом 753:6609 */
.bk__nav--center{position:relative;justify-content:center}
.bk__nav--center .bk__back{position:absolute;left:24px}
.bk__nav--center h2{font-size:18px}

.opt{
  position:relative;display:flex;align-items:center;gap:12px;width:calc(100% - 48px);
  margin:0 24px;padding:14px 16px;border:1px solid var(--g-200);border-radius:12px;background:#fff;
  cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s;
}
.opt--once{margin-top:24px}
.opt.is-on{border-color:#252983;background:var(--g-50)}
.opt__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.opt__name{font-size:14px;line-height:20px;font-weight:500;color:var(--g-600)}
.opt.is-on .opt__name{color:var(--navy-600)}
.opt__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.opt__row b{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em;color:var(--g-900)}
.opt__row i{font-size:16px;line-height:24px;font-style:normal;color:var(--g-500)}
.radio-bk{
  width:20px;height:20px;border-radius:999px;border:1.5px solid var(--g-300);flex:none;
  display:grid;place-items:center;transition:border-color .15s;
}
.opt.is-on .radio-bk{border-color:var(--navy-600);border-width:1.5px}
.opt.is-on .radio-bk::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--navy-600)}

.bk__promo{
  margin:40px 24px 24px;text-align:center;font-size:20px;line-height:26px;
  font-weight:600;letter-spacing:-.02em;
}

.plans{display:flex;flex-direction:column;gap:12px}
.plan{overflow:hidden}
.plan__pop{
  position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:133px;height:24px;background:var(--navy-600);color:#fff;
  font-size:10px;line-height:24px;font-weight:500;text-align:center;
  border-radius:0 0 8px 8px;white-space:nowrap;
}
.plan__tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  font-size:10px;line-height:12px;font-weight:500;
}
.tag--rate{background:#FDF3DE;color:#9A6308}
.tag--bonus{background:#E9F1FE;color:#1863D6}

/* деталі обраного тарифу — інлайн під списком */
.plan-details{margin:24px 24px 0}
.plan-details h4{margin:0 0 12px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.plan-details ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.plan-details li{display:flex;gap:12px;align-items:flex-start}
.plan-details li .ico-16{flex:none;margin-top:2px;fill:var(--navy-600)}
.plan-details li span{font-size:12px;line-height:18px;color:var(--g-600)}

/* замовлення */
.order{margin:24px 24px 0;display:flex;flex-direction:column;gap:12px}
.order__row{display:flex;justify-content:space-between;font-size:16px;line-height:24px;color:var(--g-600)}
.order__row--total{
  padding-top:12px;border-top:1px solid var(--g-100);
  font-size:18px;font-weight:600;color:var(--g-900);
}
.apple-pay{
  display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 48px);
  margin:24px 24px 0;height:48px;border:0;border-radius:12px;background:#000;color:#fff;
  font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;
}
.apay{width:18px;height:22px;fill:#fff}
.order__or{
  display:flex;align-items:center;gap:12px;margin:20px 24px 0;
  font-size:12px;color:var(--g-500);
}
.order__or::before,.order__or::after{content:"";flex:1;height:1px;background:var(--g-100)}

/* успіх */
.scr--done .bk__scroll{padding-top:100px}
.done__ico{
  width:64px;height:64px;margin:0 auto;border-radius:999px;background:#E7F6ED;
  display:grid;place-items:center;
}
.done__ico .ico-16{width:28px;height:28px;fill:#197C44}
.done__title{margin:24px 0 12px;text-align:center;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.03em}
.scr--done .bk__badge--amber{display:block;width:fit-content;margin:0 auto}
.done__list{list-style:none;margin:24px 24px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.done__list li{
  position:relative;padding-left:16px;font-size:12px;line-height:18px;color:var(--g-600);
}
.done__list li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:999px;background:var(--g-300);
}


.act-empty{margin:24px 0 0;text-align:center;font-size:14px;line-height:20px;color:var(--g-500)}