/* ============================================================
   The LK as an installable app — the phone layer.
   Loaded by components/pwa-head on the login, the partner cabinet and
   the reception. Desktop is untouched: every layout rule sits under a
   phone/tablet query; the always-on rules are the iPhone safe-area
   paddings (0 everywhere else), the install hint and the «Ещё» sheet
   (only ever shown on phones, by js/lk-pwa.js) and the iOS 26 pan rule
   (only ever active on an iPhone/iPad, by js/lk-pwa.js).
   ============================================================ */

/* ── iPhone safe areas (viewport-fit=cover): landscape notch sides ── */
body{ padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }

/* ── the «Установить приложение» hint ── */
.sk-install{
  position:fixed; z-index:1000; left:12px; right:12px;
  bottom:calc(12px + var(--sk-install-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  max-width:460px; margin:0 auto; display:flex; align-items:center; gap:12px;
  padding:12px 10px 12px 12px; border-radius:18px; background:#fff; border:1px solid #E7E0D0;
  box-shadow:0 14px 38px rgba(21,23,63,.22); color:#1D1D1D;
  font-family:inherit; animation:skInstallIn .28s cubic-bezier(.4,0,.2,1);
}
@keyframes skInstallIn{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
.sk-install__icon{ flex:none; width:44px; height:44px; border-radius:12px; }
.sk-install__body{ flex:1; min-width:0; }
.sk-install__title{ font-size:15px; font-weight:800; line-height:1.25; }
.sk-install__text{ margin-top:2px; font-size:13px; line-height:1.4; color:#6B7280; }
.sk-install__share{ display:inline-flex; vertical-align:-3px; width:17px; height:17px; margin:0 3px 0 1px; color:#1D1F76; }
.sk-install__share svg{ width:17px; height:17px; }
.sk-install__go{ flex:none; min-height:44px; padding:0 16px; border:0; border-radius:12px; cursor:pointer;
  background:#1D1F76; color:#fff; font:inherit; font-size:14px; font-weight:800; }
.sk-install__go[hidden]{ display:none; }
.sk-install__close{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px;
  background:transparent; color:#6B7280; cursor:pointer; }
.sk-install__close svg{ width:18px; height:18px; }

/* ============================================================
   iOS 26 — the fixed bars follow the pan the keyboard leaves behind
   (WebKit bug 297779; the client app's ADR 0161, ported). js/lk-pwa.js sets
   html.sk-vv-pan + --sk-vv-top while visualViewport.offsetTop stays above 0
   after the keyboard closed — iOS only, never while a field has the focus,
   never on a zoomed page. `translate`, not `transform`: it composes with the
   shells' own transforms (.bk-refresh centring, the sheets' slide-in).
   ⛔ Only TOP-LEVEL fixed elements belong here: a translated element is the
   containing block of the fixed elements inside it, which would move twice
   (.modal__overlay inside .modal, .sk-customise-panel inside its overlay).
   ⛔ A new top-level fixed bar or overlay must be added, or it will sit too
   high in the same moment (LkPwaTest pins the list).
   ============================================================ */
html.sk-vv-pan :is(.tap-bar, .sk-install, .sk-more, .bk-refresh, .modal, .so-mback, .ac-mback, .rc-mback, .pr-loading, .sk-modal-overlay, .sk-customise-overlay){
  translate:0 var(--sk-vv-top, 0px);
}
/* fixed only on these widths (main.css / this file); elsewhere they are absolute */
@media (max-width:1199px){
  html.sk-vv-pan .page-partner .header__nav{ translate:0 var(--sk-vv-top, 0px); }
}
@media (max-width:767px){
  html.sk-vv-pan :is(.litepicker, .drop-block__content, .drop-block__overlay){ translate:0 var(--sk-vv-top, 0px); }
}
@media (max-width:600px){
  html.sk-vv-pan .nav-company__name{ translate:0 var(--sk-vv-top, 0px); }
}

/* ============================================================
   Touch screens: iOS zooms the page into any editable thing under 16px —
   every field, select, text area and contenteditable is 16px. Any width:
   an iPad in landscape zooms too.
   ============================================================ */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea, [contenteditable]:not([contenteditable=false]){ font-size:16px !important; }
}

/* ============================================================
   Phones and tablets (touch, ≤1199px — where the bottom bars live)
   ============================================================ */
@media (pointer:coarse) and (max-width:1199px){
  /* 44px touch targets on the controls people press most */
  .mk .mk-btn, .mk .mk-select, .mk .mk-input{ min-height:44px; }
  /* `body` in front: the pages' own <style> comes later and would win a tie */
  body .btn, body .ac-cancel, body .rc-cancel, body .so-cancel, body .rc-mini,
  body .sb-submit, body .sb-faqbtn, body .ve-add, body .ve-ib{ min-height:44px; }
  body .pa-ib, body .ac-ib, body .rc-ib, body .so-ib{ min-width:44px; min-height:44px; }
  .header__logo{ display:inline-flex; align-items:center; padding:11px 0; margin:-11px 0; }
  .header__exit a{ min-width:44px; min-height:44px; justify-content:center; }
  .bk-history summary{ min-height:44px; }
  .mk-switch{ min-height:44px; }
}

/* ============================================================
   Reception (layoutreception: .page-partner) — the bottom nav
   ============================================================ */
@media (max-width:1199px){
  /* Three or four tabs («Записи» when the venue answers its own bookings) share
     the width equally and never run off the edge; labels wrap under the icon. */
  .page-partner .header__nav ul{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:2px;
    padding:8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  }
  .page-partner .header__nav li{ min-width:0; }
  .page-partner .header__nav li a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    min-height:56px; padding:4px 2px; border-radius:12px; text-align:center; -webkit-tap-highlight-color:transparent;
  }
  .page-partner .header__nav li.active a{ background:#FFF4D8; }
  .page-partner .header__nav li p{ font-size:11.5px; line-height:1.2; overflow-wrap:anywhere; }
}

@media (max-width:900px){
  /* the visitor-check screens (user, needpay, payed, hasvisit…): less side padding
     so the photo, the document check and the service list get the width.
     `.page-partner` in front: the layout's own <style> comes after this file. */
  .page-partner .rx-card__body{ padding:20px 16px; }
  .page-partner .rx-avatar{ width:132px; height:132px; }
  .page-partner .rx-name{ font-size:24px; }
  .page-partner .rx-actions{ flex-direction:column-reverse; gap:10px; }
  .page-partner .rx-btn{ width:100%; padding:16px 18px; }
  .page-partner .rx-gate{ padding:16px; }
  .page-partner .rx-gate__check{ min-height:52px; }
  /* no hover lifts on touch: they stick after a tap */
  .page-partner .rx-step:hover, .page-partner .rx-card:hover{ transform:none; }
  /* the pay flow has three steps in the row: tighter, so no title is cut */
  .page-partner .rx-steps:has(> .rx-step:nth-child(3)){ gap:6px; }
  .page-partner .rx-steps:has(> .rx-step:nth-child(3)) .rx-step{ flex-direction:column; justify-content:center; padding:9px 6px; gap:6px; text-align:center; }
  .page-partner .rx-steps:has(> .rx-step:nth-child(3)) .rx-step__dot{ width:28px; height:28px; border-radius:9px; }
  .page-partner .rx-steps:has(> .rx-step:nth-child(3)) .rx-step__title{ font-size:12px; }
}

/* ============================================================
   Partner cabinet (layout + partner.menu) — the bottom tab bar
   ============================================================ */
/* «Ещё» is a phone-bar tab only: the desktop side menu lists every section. */
.sk-more-item{ display:none; }

@media (max-width:767px){
  /* The menu's own style makes its list a column (right for the desktop side
     menu). Here it is ONE row of equal tabs that fits a 360px phone: four
     sections and «Ещё» (js/lk-pwa.js), icons over short labels. Nothing scrolls
     sideways, so nothing hides past the edge. */
  .tap-bar{ padding-bottom:env(safe-area-inset-bottom, 0px); border-radius:16px 16px 0 0; box-shadow:0 -6px 22px rgba(21,23,63,.08); border-top:1px solid #ECE6D6; }
  .tap-bar .left-aside__middle{ margin:0; overflow:visible; padding:0; }
  .tap-bar .left-aside__nav .left-aside__list{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:2px; overflow:visible;
    padding:8px max(6px, env(safe-area-inset-right, 0px)) 8px max(6px, env(safe-area-inset-left, 0px)); margin:0;
  }
  .tap-bar .left-aside__nav .left-aside__item{ min-width:0; }
  .tap-bar .left-aside__nav .left-aside__item.sk-tab-more{ display:none; }
  .tap-bar .left-aside__nav .sk-more-item{ display:block; }
  .tap-bar .left-aside__nav .left-aside__link{
    flex-direction:column; justify-content:center; gap:4px; width:100%; min-width:0; min-height:56px;
    padding:6px 2px; border-radius:12px; text-align:center; -webkit-tap-highlight-color:transparent;
  }
  .tap-bar .left-aside__nav .left-aside__link:hover{ transform:none; }
  .tap-bar .left-aside__nav .left-aside__link span,
  .tap-bar .left-aside__nav .left-aside__link[data-short]::after{ font-size:10.5px; line-height:1.15; white-space:normal; max-width:100%; }
  .tap-bar .left-aside__nav .left-aside__link[data-short] span{ display:none; }
  .tap-bar .left-aside__nav .left-aside__link[data-short]::after{ content:attr(data-short); }
  .tap-bar .left-aside__nav .left-aside__link.active{ background:#FFF4D8; }
  .tap-bar .sk-more-tab{ border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; }
  /* the page clears the bar */
  .page-layout main{ margin-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* the «Аккаунт» switcher (layout): the whole row, the select takes what is left
     (its 240px max ran 3px past a 360px screen on every page) */
  body .sk-sw1{ display:flex; width:100%; }
  body .sk-sw1 select{ flex:1; min-width:0; max-width:none; text-overflow:ellipsis; }
}

/* ── the «Ещё» sheet (a body child: see js/lk-pwa.js) ── */
.sk-more{ position:fixed; inset:0; z-index:1001; display:flex; flex-direction:column; justify-content:flex-end; }
.sk-more[hidden]{ display:none; }
.sk-more__backdrop{ position:absolute; inset:0; background:rgba(17,18,63,.45); }
.sk-more__panel{ position:relative; max-height:80vh; overflow:auto; overscroll-behavior:contain;
  padding:6px max(12px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  border-radius:20px 20px 0 0; background:#fff; box-shadow:0 -14px 38px rgba(21,23,63,.22);
  animation:skMoreIn .22s cubic-bezier(.4,0,.2,1); }
@keyframes skMoreIn{ from{ transform:translateY(24px); opacity:.4; } to{ transform:none; opacity:1; } }
.sk-more__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 8px 6px; }
.sk-more__title{ font-size:15px; font-weight:800; color:#1D1D1D; }
.sk-more__close{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; background:transparent; color:#6B7280; cursor:pointer; }
.sk-more__close svg{ width:18px; height:18px; }
.sk-more__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.sk-more__link{ display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 12px; border-radius:14px;
  background:#F8F5EC; color:#1D1D1D; font-size:14px; font-weight:700; line-height:1.2; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.sk-more__link.active{ background:#FFF4D8; color:#1D1F76; box-shadow:inset 0 0 0 1.5px #F2C96B; }
.sk-more__link svg{ flex:none; width:22px; height:22px; }
.sk-more__link span{ min-width:0; overflow-wrap:break-word; }
html.sk-more-open, html.sk-more-open body{ overflow:hidden; }

/* ============================================================
   «Записи» (both doors: partner cabinet and reception) — CSS only: the view
   and its logic belong to the МастерКлюч work. `body` in front: the page's own
   <style> comes after this file.
   ============================================================ */
@media (max-width:640px){
  /* The toolbar of «Записи»/«Занятия» (the one followed by the filters): two
     equal columns, labels wrap inside the button, an odd last one takes the row. */
  body .mk-toolbar:has(+ .bk-filters){ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  body .mk-toolbar:has(+ .bk-filters) > .mk-btn{ width:100%; min-width:0; min-height:44px; padding:6px 10px; gap:6px;
    font-size:13px; line-height:1.2; white-space:normal; text-align:center; }
  body .mk-toolbar:has(+ .bk-filters) > .mk-btn:last-child:nth-child(odd){ grid-column:1 / -1; }
  body .mk-toolbar:has(+ .bk-filters) > .mk-btn .mk-ico{ flex:none; }
  /* The filters: the venue on its own row (venue names are long), the day and the
     kind of session side by side (the kind gets a little more) — never wider than
     the screen. */
  body .bk-filters{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:8px; width:100%; }
  body .bk-filters > .mk-select, body .bk-filters > .mk-input, body .bk-filters > .mk-btn{ width:100%; min-width:0; max-width:none; }
  body .bk-filters > select[name=place], body .bk-filters > .bk-filters__clear{ grid-column:1 / -1; }
  body .bk-filters > .mk-select{ text-overflow:ellipsis; }
  /* iOS gives a date field the width of its own content and ignores min-width:0 */
  body .bk-filters > .mk-input[type=date]{ -webkit-appearance:none; appearance:none; display:block; text-align:left; }
  body .bk-filters > .mk-input[type=date]::-webkit-date-and-time-value{ text-align:left; }
  .bk-actions .mk-btn{ min-height:46px; }
  .bk-refresh{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* «Настройки»: a venue's two state pills wrap instead of running off the card */
  body .st-venue__state{ display:flex; flex-wrap:wrap; gap:6px; max-width:100%; }
}

/* ============================================================
   The date-range calendar (Litepicker: «Отчеты», reception «История») — on a
   phone ONE month (the bundle asks for it, front/src/js/modules/inputs.js) in a
   sheet above the bottom bar, inside the screen. Litepicker writes its own
   top/left inline, hence !important.
   ============================================================ */
@media (max-width:767px){
  body .litepicker{
    position:fixed !important; z-index:1002 !important; left:50% !important; right:auto !important;
    top:auto !important; bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%); max-width:calc(100vw - 16px); box-shadow:0 14px 38px rgba(21,23,63,.22);
  }
  body .litepicker .container__months, body .litepicker .container__months.columns-2{ width:auto; max-width:100%; }
}

/* ============================================================
   Login (layoutauth)
   ============================================================ */
@media (max-width:575px){
  .login{ width:100%; }
  .login-form .btn{ min-height:48px; }
}