/* Блок «Запишитесь на удобное время»: форма + Яндекс Карта */
.booking-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:clamp(32px,4vw,56px)}
.booking-head .eyebrow{color:var(--muted);margin-bottom:24px}
.booking-head h2{font-size:clamp(40px,5.1vw,76px)}
.booking-head .lead{font-size:14px;color:var(--muted);max-width:380px}
.booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:stretch}
.booking .request{padding:clamp(24px,3vw,44px)}
.booking .request form{margin-top:0}

/* выбор услуги */
.booking .select{position:relative;display:block;margin-top:3px}
.booking select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;border:0;border-bottom:1px solid #bcbfb6;background:transparent;border-radius:0;color:var(--ink);font:inherit;font-size:12px;padding:12px 28px 12px 0;cursor:pointer}
.booking .select::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.booking select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* дни и время */
.booking fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
.booking legend{font-size:10px;font-weight:600;margin-bottom:10px;padding:0}
.days-row{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:stretch;gap:6px}
.days-nav{display:grid;place-items:center;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;cursor:pointer;transition:background-color .2s,border-color .2s}
.days-nav:hover{border-color:var(--ink)}
.days-nav:disabled{opacity:.3;cursor:default}
.days-track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.days-track::-webkit-scrollbar{display:none}
.days-track label,.slots-row label{position:relative;margin:0;cursor:pointer}
.days-track label{flex:0 0 calc((100% - 18px)/4);scroll-snap-align:start}
.days-track input,.slots-row input{position:absolute;opacity:0;pointer-events:none}
.days-track span,.slots-row span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:500;letter-spacing:-.02em;transition:background-color .2s,border-color .2s,color .2s}
.days-track span b,.slots-row span b{font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.days-track label:hover span,.slots-row label:hover span{border-color:var(--ink)}
.days-track input:checked+span,.slots-row input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.days-track input:checked+span b,.slots-row input:checked+span b{color:var(--accent)}
.days-track input:focus-visible+span,.slots-row input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.slots-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slots-row span{min-height:52px;font-size:12px}

/* карта */
.booking-map{position:relative;min-height:560px;background:#d6d4cd;overflow:hidden}
.booking-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.02)}
.booking-card{position:absolute;left:16px;bottom:16px;width:min(330px,calc(100% - 32px));background:var(--ink);color:#fff;padding:22px 24px}
.booking-card .eyebrow{font-size:8px;color:var(--accent);margin-bottom:12px}
.booking-addr{font-size:18px;letter-spacing:-.02em;line-height:1.3}
.booking-note{font-size:11px;color:#b6b8b4;margin-top:6px}
.booking-card dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 14px;padding-top:16px;border-top:1px solid #383a3b}
.booking-card dt{font-size:8px;letter-spacing:.12em;color:#8f918d;margin-bottom:6px}
.booking-card dd{font-size:12px;margin:0}
.booking-card .text-link{font-size:11px;color:var(--accent)}

@media(max-width:900px){
  .booking-head{flex-direction:column;align-items:flex-start;gap:20px}
  .booking-grid{grid-template-columns:1fr}
  .booking-map{min-height:420px}
}
@media(max-width:600px){
  .booking-head h2 br{display:none}
  .days-track label{flex-basis:calc((100% - 12px)/3)}
  .slots-row{grid-template-columns:repeat(2,1fr)}
  .booking-map{min-height:460px}
  .booking-card{left:12px;right:12px;bottom:12px;width:auto;padding:18px 20px}
}

/* --- v2: карта Яндекса (JS API) и свой выпадающий список --- */
.booking-map .ymap{position:absolute;inset:0}
.booking-map [class*="ground-pane"]{filter:grayscale(1) contrast(.92) brightness(1.04)}
.booking-map [class*="copyrights-pane"]{opacity:.8}
.ymark{position:relative;transform:translate(-20px,-50px);display:flex;align-items:center;gap:0;white-space:nowrap;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.ymark i{position:relative;display:grid!important;place-items:center;flex:0 0 40px;width:40px!important;min-width:40px;height:40px;box-sizing:border-box;background:var(--ink);font-style:normal}
.ymark i::after{content:"";width:12px;height:12px;background:var(--accent)}
.ymark b{display:block;height:40px;line-height:40px;padding:0 14px;background:#fff;color:var(--ink);font:600 12px/40px Manrope,system-ui,sans-serif;letter-spacing:-.01em}
.ymark::after{content:"";position:absolute;left:14px;top:40px;border:6px solid transparent;border-top-color:var(--ink)}
.ymark i::before{content:"";position:absolute;left:0;top:0;width:40px;height:40px;border:1px solid var(--accent);animation:ymark-ring 2.8s cubic-bezier(.22,.7,.18,1) infinite}
@keyframes ymark-ring{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
.ymap-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--muted)}

/* выпадающий список услуг */
.dd{position:relative;display:block;margin-top:3px}
.dd select{position:absolute;inset:0;opacity:0;pointer-events:none}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid #bcbfb6;background:transparent;color:#767a70;font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:border-color .2s}
.dd-btn.has-value{color:var(--ink)}
.dd-btn:hover,.dd.open .dd-btn{border-bottom-color:var(--ink)}
.dd-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dd-btn i{position:relative;width:12px;height:12px;flex:none;transition:transform .3s cubic-bezier(.22,.7,.18,1)}
.dd-btn i::before{content:"";position:absolute;left:2px;top:1px;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}
.dd.open .dd-btn i{transform:rotate(180deg)}
.dd-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 22px 40px -22px rgba(16,17,18,.45);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);clip-path:inset(0 0 100% 0);
  transition:opacity .25s,transform .35s cubic-bezier(.22,.7,.18,1),clip-path .4s cubic-bezier(.22,.7,.18,1),visibility .4s}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;clip-path:inset(0 0 0 0)}
.dd-group{font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 18px 6px}
.dd-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;font-size:12px;color:var(--ink);cursor:pointer;transition:background-color .15s}
.dd-opt small{font-size:10px;color:var(--muted)}
.dd-opt:hover,.dd-opt.active{background:#f1efea}
.dd-opt[aria-selected=true]{background:var(--ink);color:#fff}
.dd-opt[aria-selected=true] small{color:var(--accent)}
.dd.open .dd-opt{animation:dd-in .35s cubic-bezier(.22,.7,.18,1) both;animation-delay:calc(var(--n,0) * 18ms)}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dd-list,.dd-btn i{transition:none}.dd.open .dd-opt{animation:none}.ymark i::before{animation:none}}

/* --- v3: пошаговая форма + карта в одном блоке --- */
.js .bk-step{display:none}
.js .bk-step.bk-on{display:block;animation:bk-in .5s cubic-bezier(.22,.7,.18,1) both}
@keyframes bk-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.bk-step>div>*:first-child{margin-top:0}
.bk-skip{display:inline-block;margin:-6px 0 18px;padding:6px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bk-skip:hover{color:var(--ink)}
.hours{grid-template-columns:repeat(5,1fr)!important}
.hours span{min-height:44px!important;font-size:13px!important}
.hours input:disabled+span{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.booking .request .btn{margin-top:6px}
.booking .form-grid{grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:600px){.hours{grid-template-columns:repeat(3,1fr)!important}.booking .form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.js .bk-step.bk-on{animation:none}}

/* v4: карта не растягивается вслед за пошаговой формой — фиксированная высота и «липнет» сбоку */
@media(min-width:901px){
  .booking .booking-grid{align-items:start}
  .booking .booking-map{position:sticky;top:110px;height:min(640px,calc(100vh - 140px));min-height:520px}
}