/* Календарь заказов клиента (assets/orders-cal.js): кнопка в шапке + боковая панель-сплит. Без inline-стилей — строгий CSP кабинета. */
:root { --ocal-w:404px; }

/* ── кнопка ── */
.ocal-btn { position:relative; cursor:pointer; }
.ocal-btn[hidden] { display:none; }
/* на главной и в кабинете кнопка берёт вид соседей (.ct / .cab-nav-a): шрифт, цвет, линия иконки — их, свои только у страниц услуг */
.ocal-btn.ct { opacity:1; }
.ocal-btn.ct svg { opacity:.6; transition:opacity .35s; }
.ocal-btn.ct:hover svg, .ocal-btn.ct:focus-visible svg, .ocal-btn.ct.on svg { opacity:1; }
.ocal-btn.ct:hover, .ocal-btn.ct:focus-visible { opacity:1; }
.ocal-btn.on::before { content:""; position:absolute; inset:-6px -8px; border:1px solid rgba(245,245,245,.45); border-radius:10px; background:rgba(245,245,245,.06); pointer-events:none; }
.ocal-pg { font:inherit; color:inherit; background:none; border:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; opacity:.7; transition:opacity .3s; }
.ocal-pg svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; } .ocal-pg:hover, .ocal-pg:focus-visible, .ocal-pg.on { opacity:1; outline:none; }
.ocal-cab { display:inline-flex; align-items:center; gap:8px; }
/* кабинет: как соседние пункты меню — без рамки, открытое состояние — подчёркивание, счётчик не тускнеет */
.ocal-cab { opacity:1; }
.ocal-cab svg, .ocal-cab > span { opacity:.65; transition:opacity .35s; }
.ocal-cab:hover svg, .ocal-cab:hover > span, .ocal-cab:focus-visible svg, .ocal-cab:focus-visible > span, .ocal-cab.on svg, .ocal-cab.on > span { opacity:1; }
.ocal-cab.on::before { display:none; }
.ocal-cab.on::after { transform:scaleX(1); }
.ocal-cab .ocal-bdg { top:-2px; right:-14px; }
.ocal-cab svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.ocal-bdg { position:absolute; top:-7px; right:-9px; min-width:15px; height:15px; padding:0 4px; box-sizing:border-box; border-radius:99px; background:#f5f5f5; color:#0a0a0a;
  font:500 9px/15px -apple-system,"Helvetica Neue",Arial,sans-serif; font-style:normal; text-align:center; letter-spacing:0; text-transform:none; opacity:1; animation:ocal-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.ocal-bdg[hidden] { display:none; }
@keyframes ocal-pop { from { transform:scale(.4); opacity:0; } }

/* ── панель-сплит ── */
.ocal { position:fixed; z-index:900; top:0; right:0; bottom:0; width:var(--ocal-w); max-width:100vw; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;
  padding:0; background:rgba(14,14,15,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-left:1px solid rgba(245,245,245,.14);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.9); color:#f5f5f5; font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; line-height:1.4;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.ocal[hidden] { display:none; }
.ocal-bd { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 22px 6px; scrollbar-width:thin; scrollbar-color:rgba(245,245,245,.18) transparent; }
.ocal.on { transform:none; }
.ocal.instant { transition:none; }
:where(.ocal) :where(button, a) { font:inherit; color:inherit; }   /* :where — нулевая специфичность, иначе перебивает размеры шрифта у ссылок панели */
:where(.ocal) button { background:none; border:0; cursor:pointer; }
.ocal button:focus-visible, .ocal a:focus-visible { outline:1px solid rgba(245,245,245,.6); outline-offset:2px; }
/* сплит: страница сдвигается, а не перекрывается (широкие экраны) */
html.ocal-push .ck { right:calc(var(--ocal-w) + 16px); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), right .5s cubic-bezier(.16,1,.3,1); }
/* страницы услуг при открытой панели: шапка уплотняется, чтобы кнопка «Заказать онлайн» не падала на вторую строку */
html.ocal-push .pg-top { gap:12px 16px; }
html.ocal-push .pg-nav { gap:4px 14px; }
html.ocal-push .pg-nav a { letter-spacing:.09em; }
html.ocal-push .pg-top > .pg-btn { padding:10px 12px; letter-spacing:.16em; }
html.ocal-push body { margin-right:var(--ocal-w); transition:margin-right .5s cubic-bezier(.16,1,.3,1); }
.ocal-hd { flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 22px 4px; }
.ocal-t { margin:0; font-size:18px; font-weight:300; letter-spacing:-.005em; }
.ocal-s { margin:5px 0 0; font-size:12px; color:rgba(245,245,245,.6); }
.ocal-s2 { margin:1px 0 0; font-size:12px; color:rgba(245,245,245,.45); } .ocal-s2.late { color:#e8c547; } .ocal-s2[hidden] { display:none; }
.ocal-x { flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid rgba(245,245,245,.3) !important; border-radius:50%; transition:background .25s, border-color .25s; }
.ocal-x svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.ocal-x:hover { background:rgba(245,245,245,.08); border-color:rgba(245,245,245,.55) !important; }
.ocal-mh { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.ocal-mn { font-size:17px; font-weight:300; }
.ocal-nv { display:flex; gap:6px; }
.ocal-ar { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid rgba(245,245,245,.16) !important; border-radius:50%; transition:background .25s; }
.ocal-ar svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.ocal-ar:hover:not(:disabled) { background:rgba(245,245,245,.08); } .ocal-ar:disabled { opacity:.25; cursor:default; }
.ocal-wd { display:grid; grid-template-columns:repeat(7,1fr); padding:2px 0 4px; text-align:center; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,245,.38); }
.ocal-gr { display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px; }
.ocal-e { height:44px; }
.ocal-d { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:44px; border-radius:10px; transition:background .2s, box-shadow .2s; }
.ocal-d b { font-weight:300; font-size:13.5px; }
.ocal-d.we b { opacity:.6; } .ocal-d.past b { opacity:.3; }
.ocal-d.has { background:rgba(245,245,245,.035); }
.ocal-d:hover, .ocal-d:focus-visible { background:rgba(245,245,245,.1); }
.ocal-d.sel { background:rgba(245,245,245,.1); box-shadow:inset 0 0 0 1px #f5f5f5; }
.ocal-d.soon b { color:#e8c547; opacity:1; font-weight:400; }
.ocal-d.today::after { content:""; position:absolute; top:5px; right:8px; width:4px; height:4px; border-radius:50%; background:#f5f5f5; animation:ocal-ping 2.4s ease-out infinite; }
@keyframes ocal-ping { 0% { box-shadow:0 0 0 0 rgba(245,245,245,.55); } 70%, 100% { box-shadow:0 0 0 7px rgba(245,245,245,0); } }
.ocal-mk { display:flex; gap:3px; margin-top:4px; height:6px; font-style:normal; }
.ocal-m { display:inline-block; width:6px; height:6px; border-radius:50%; box-sizing:border-box; }
.ocal-m.work { background:#f5f5f5; } .ocal-m.wait { border:1.3px solid #f5f5f5; } .ocal-m.ready { background:#e8c547; } .ocal-m.new { background:rgba(245,245,245,.4); } .ocal-m.done { background:rgba(245,245,245,.18); }
.ocal-lg { display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 2px 0; font-size:11px; color:rgba(245,245,245,.55); }
.ocal-lg span { display:flex; align-items:center; gap:6px; }

/* выбранный день */
.ocal-day { margin-top:14px; padding:12px 14px; border:1px solid rgba(245,245,245,.18); border-radius:12px; background:rgba(245,245,245,.04); }
.ocal-dh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.ocal-dh b { font-size:13px; font-weight:400; } .ocal-dh small { font-size:10.5px; opacity:.5; }
.ocal-or { display:grid; grid-template-columns:auto 1fr; column-gap:8px; padding:7px 0; border-top:1px solid rgba(245,245,245,.08); font-size:12px; }
.ocal-on { font-weight:400; text-decoration:none; } a.ocal-on { text-decoration:underline; text-decoration-color:rgba(245,245,245,.35); text-underline-offset:3px; }
.ocal-op { color:rgba(245,245,245,.75); }
.ocal-os { grid-column:2; margin-top:2px; font-style:normal; font-size:10.5px; letter-spacing:.04em; color:rgba(245,245,245,.55); }
.ocal-os.ready { color:#e8c547; }
.ocal-df { margin:6px 0 0; padding-top:8px; border-top:1px solid rgba(245,245,245,.08); font-size:11px; color:rgba(245,245,245,.5); }

/* ближайшие сроки */
.ocal-nh { margin:18px 0 8px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,245,245,.4); }
.ocal-nr { display:flex; align-items:center; gap:12px; padding:10px 4px; margin:0 -4px; border-top:1px solid rgba(245,245,245,.08); border-radius:8px; text-decoration:none; transition:background .25s; }
.ocal-nr:hover { background:rgba(245,245,245,.05); }
.ocal-nd { flex:none; width:40px; text-align:center; } .ocal-nd b { display:block; font-size:20px; font-weight:300; line-height:1; }
.ocal-nd small { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.45; }
.ocal-nr.soon .ocal-nd b { color:#e8c547; }
.ocal-nm { flex:1; min-width:0; } .ocal-nm b { display:block; font-size:13px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocal-nm .ocal-os { display:block; margin:1px 0 0; }
.ocal-nr em { flex:none; font-style:normal; font-size:11.5px; color:rgba(245,245,245,.5); white-space:nowrap; }
.ocal-empty { margin:0; padding:6px 0 2px; font-size:12.5px; color:rgba(245,245,245,.5); }
.ocal-fr { display:flex; gap:10px; padding:8px 0; border-top:1px solid rgba(245,245,245,.08); text-decoration:none; font-size:12px; }
.ocal-fr b { font-weight:400; } .ocal-fr span { color:rgba(245,245,245,.6); }
.ocal-ft { flex:none; display:flex; flex-direction:column; gap:8px; padding:13px 22px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(245,245,245,.1); background:rgba(14,14,15,.98); }
.ocal-lk { align-self:flex-start; padding-bottom:2px; border-bottom:1px solid rgba(245,245,245,.3); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; }
.ocal-lk:hover { border-color:#f5f5f5; }
.ocal-note { font-size:11.5px; color:rgba(245,245,245,.5); } .ocal-note:empty { display:none; }

/* подсказка при наведении на день */
.ocal-tip { position:fixed; z-index:1000; width:290px; box-sizing:border-box; padding:12px 14px; border:1px solid rgba(245,245,245,.2); border-radius:12px; background:rgba(18,18,20,.985);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.9); color:#f5f5f5; font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; pointer-events:none; }
.ocal-tip[hidden] { display:none; }
.ocal-tip.in { animation:ocal-tip .22s cubic-bezier(.16,1,.3,1) both; } .ocal-tip.in.below { animation-name:ocal-tip-b; }
@keyframes ocal-tip { from { opacity:0; transform:translateY(6px) scale(.97); } } @keyframes ocal-tip-b { from { opacity:0; transform:translateY(-6px) scale(.97); } }
.ocal-th { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; } .ocal-th b { font-size:13px; font-weight:400; } .ocal-th small { font-size:10.5px; opacity:.5; }
.ocal-tf { margin-top:6px; padding-top:8px; border-top:1px solid rgba(245,245,245,.08); font-size:11px; color:rgba(245,245,245,.5); }
.ocal-tip .ocal-pt { position:absolute; bottom:-6px; width:10px; height:10px; margin-left:-5px; border:0; border-right:1px solid rgba(245,245,245,.2); border-bottom:1px solid rgba(245,245,245,.2); background:rgba(18,18,20,.985); transform:rotate(45deg); }
.ocal-tip.below .ocal-pt { bottom:auto; top:-6px; border:0; border-left:1px solid rgba(245,245,245,.2); border-top:1px solid rgba(245,245,245,.2); }
.ocal-tip .ocal-or { font-size:12px; }

.ocal-bk { position:fixed; inset:0; z-index:899; background:rgba(0,0,0,.55); animation:ocal-fade .3s ease both; }
@keyframes ocal-fade { from { opacity:0; } }
html.ocal-lock { overflow:hidden; }

/* движение: волна дней при открытии, смена месяца, выбор */
.ocal.wave .ocal-d { animation:ocal-rise .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(200ms + var(--i, 0) * 9ms); }
@keyframes ocal-rise { from { opacity:0; transform:translateY(8px) scale(.88); } to { opacity:1; transform:none; } }
.ocal.nav-f .ocal-gr, .ocal.nav-f .ocal-mn { animation:ocal-fwd .4s cubic-bezier(.16,1,.3,1) both; } .ocal.nav-b .ocal-gr, .ocal.nav-b .ocal-mn { animation:ocal-back .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes ocal-fwd { from { opacity:0; transform:translateX(18px); } } @keyframes ocal-back { from { opacity:0; transform:translateX(-18px); } }
.ocal-d.sel .ocal-m, .ocal-mk .ocal-m { animation:ocal-dot .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ocal-dot { from { transform:scale(0); } }
.ocal-day { animation:ocal-up .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes ocal-up { from { opacity:0; transform:translateY(6px); } }

/* средние экраны: панель поверх страницы; телефон: нижняя шторка */
@media (max-width:1099px) { .ocal { box-shadow:-30px 0 80px -10px rgba(0,0,0,.95); } }
@media (max-width:560px) {
  .ocal { top:auto; left:0; right:0; width:auto; max-height:88dvh; border-left:0; border-top:1px solid rgba(245,245,245,.16); border-radius:22px 22px 0 0; padding:0;
    transform:translateY(100%); box-shadow:0 -20px 50px -16px rgba(0,0,0,.9); }
  .ocal::before { content:""; flex:none; display:block; width:40px; height:4px; margin:10px auto 0; border-radius:2px; background:rgba(245,245,245,.25); }
  .ocal-hd { padding:12px 16px 4px; } .ocal-bd { padding:0 16px 6px; } .ocal-ft { padding:12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .ocal.on { transform:none; }
  .ocal-d, .ocal-e { height:42px; }
}
@media (prefers-reduced-motion:reduce) { .ocal, .ocal *, .ocal-tip, .ocal-bdg, .ocal-bk, html.ocal-push body { animation:none !important; transition:none !important; } }