/* 25.8 — one look for buttons, chips, fields and the selected state on every public page.
   Loaded last. Admin (body.is-admin) keeps its own styles. The transfer form (#trForm) and the
   catalogue filter row were tuned separately and are left as they are.

   Sizes:   large 50px (main action) · regular 44px · small 34px (chips, compact actions)
   Shapes:  buttons and chips are pills; fields and tiles have 14px corners
   Colours: blue = main action; soft grey = secondary; selected = soft blue with blue text */

:root{
 --ui-blue:var(--apple-blue,#0071e3);
 --ui-blue-press:#0062c4;
 --ui-blue-soft:rgba(0,113,227,.12);
 --ui-fill:rgba(120,120,128,.12);
 --ui-fill-press:rgba(120,120,128,.22);
 --ui-ink:var(--apple-ink,#1d1d1f);
 --ui-ink-2:var(--apple-ink-2,#6e6e73);
 --ui-surface:var(--apple-surface,#fff);
 --ui-line:rgba(0,0,0,.08);
 --ui-tile-shadow:0 0 0 .5px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.05);
 --ui-ring:0 0 0 3px rgba(0,113,227,.32);
 --ui-h-l:50px;--ui-h-m:44px;--ui-h-s:34px;
 --ui-r-tile:14px;
 --ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}

/* ---------- Buttons ---------- */
html body:not(.is-admin) #app .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:var(--ui-h-m)!important;padding:0 20px!important;border:0!important;border-radius:999px!important;font-family:var(--f-body)!important;font-size:15px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.01em!important;text-align:center!important;text-decoration:none!important;white-space:normal;box-shadow:none!important;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .2s ease,color .2s ease!important}
html body:not(.is-admin) #app .btn.small{min-height:var(--ui-h-s)!important;padding:0 14px!important;font-size:14px!important;font-weight:500!important}
html body:not(.is-admin) #app .btn.block{width:100%!important;min-height:var(--ui-h-l)!important;font-size:17px!important}
html body:not(.is-admin) #app :is(.btn-sea,.btn-accent,.btn-primary){background:var(--ui-blue)!important;color:#fff!important}
html body:not(.is-admin) #app .btn-ghost{background:var(--ui-fill)!important;color:var(--ui-ink)!important}
html body:not(.is-admin) #app .btn:not(:disabled):active{transform:scale(.97)}
html body:not(.is-admin) #app :is(.btn-sea,.btn-accent,.btn-primary):not(:disabled):active{background:var(--ui-blue-press)!important}
html body:not(.is-admin) #app .btn-ghost:not(:disabled):active{background:var(--ui-fill-press)!important}
@media (hover:hover){
 html body:not(.is-admin) #app :is(.btn-sea,.btn-accent,.btn-primary):not(:disabled):hover{background:var(--ui-blue-press)!important;color:#fff!important}
 html body:not(.is-admin) #app .btn-ghost:not(:disabled):hover{background:var(--ui-fill-press)!important;color:var(--ui-ink)!important}
}
html body:not(.is-admin) #app .btn:disabled,html body:not(.is-admin) #app .btn[aria-disabled=true]{opacity:.4!important;transform:none!important}
/* buttons at the bottom of a sheet are large */
html body:not(.is-admin) #app .price-actions .btn{min-height:var(--ui-h-l)!important;font-size:16px!important;font-weight:600!important}

/* ---------- Chips (categories, districts, quick dates) ---------- */
html body:not(.is-admin) #app :is(.chip.chip.chip,.cal-shortcuts.cal-shortcuts>button,.tour-section-nav.tour-section-nav>a){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:var(--ui-h-s)!important;height:auto!important;padding:0 14px!important;border:0!important;border-radius:999px!important;background:var(--ui-fill)!important;color:var(--ui-ink)!important;font-family:var(--f-body)!important;font-size:14px!important;font-weight:500!important;line-height:1.2!important;white-space:nowrap!important;box-shadow:none!important;transition:transform .12s ease,background-color .2s ease,color .2s ease!important}
html body:not(.is-admin) #app :is(.chip.chip.chip,.cal-shortcuts.cal-shortcuts>button,.tour-section-nav.tour-section-nav>a):is(.on,[aria-pressed=true],[aria-selected=true]){background:var(--ui-blue-soft)!important;color:var(--ui-blue)!important;font-weight:600!important}
html body:not(.is-admin) #app :is(.chip.chip.chip,.cal-shortcuts.cal-shortcuts>button,.tour-section-nav.tour-section-nav>a):not(:disabled):active{transform:scale(.96)}
@media (hover:hover){html body:not(.is-admin) #app :is(.chip.chip.chip,.cal-shortcuts.cal-shortcuts>button,.tour-section-nav.tour-section-nav>a):not(.on):not([aria-pressed=true]):not([aria-selected=true]):hover{background:var(--ui-fill-press)!important;color:var(--ui-ink)!important}}
html body:not(.is-admin) #app .chip>:is(small,b,i,span:not(:first-child)){color:inherit;opacity:.6}

/* ---------- Segmented control (install page tabs) ---------- */
html body:not(.is-admin) #app .tabs.inst-tabs{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px!important;padding:2px!important;border-radius:999px!important;background:var(--ui-fill)!important}
html body:not(.is-admin) #app .tabs.inst-tabs>button{min-height:32px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--ui-ink)!important;font:500 14px/1.2 var(--f-body)!important;box-shadow:none!important}
html body:not(.is-admin) #app .tabs.inst-tabs>button:is(.on,[aria-selected=true],[aria-pressed=true]){background:var(--ui-surface)!important;font-weight:600!important;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)!important}

/* ---------- Lists that open a window (fleet, trip picker, tour booking) ---------- */
html body:not(.is-admin) #app :is(select,input).select-hidden{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
html body:not(.is-admin) #app .select-btn{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;width:100%!important;min-width:0!important;border:0!important;cursor:pointer;font-family:var(--f-body)!important;text-align:left!important;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .2s ease!important}
html body:not(.is-admin) #app .select-btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body:not(.is-admin) #app .select-btn::after{content:"";flex:none;width:12px;height:8px;background:var(--ui-chevron) no-repeat center/contain;transition:transform .2s ease}
html body:not(.is-admin) #app .select-btn[aria-expanded=true]::after{transform:rotate(180deg)}
/* as a white field */
html body:not(.is-admin) #app :is(.fleet-filters,#tripPicker) .select-btn{min-height:48px!important;padding:0 16px!important;border-radius:var(--ui-r-tile)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;font-size:16px!important;font-weight:400!important;box-shadow:var(--ui-tile-shadow)!important}
html body:not(.is-admin) #app :is(.fleet-filters,#tripPicker) .select-btn:active{transform:scale(.99)}
html body:not(.is-admin) #app :is(.fleet-filters,#tripPicker) .field>span{display:block;margin:0 0 6px!important;font:500 13px/1.25 var(--f-body)!important;color:var(--ui-ink-2)!important;letter-spacing:0!important}
html body:not(.is-admin) #app #tripPicker .field,html body:not(.is-admin) #app .fleet-filters .field{display:block;position:relative}
/* inside a booking row: the value on the right */
html body:not(.is-admin) #app #booking .select-btn{width:auto!important;max-width:60%;min-height:44px!important;padding:0 2px 0 8px!important;margin-left:auto!important;background:transparent!important;color:var(--ui-ink)!important;font-size:16px!important;font-weight:500!important;box-shadow:none!important;justify-content:flex-end!important}
html body:not(.is-admin) #app #booking .field:has(.select-btn){position:relative}

/* ---------- Option lists inside a window: plain rows, a blue tick on the chosen one ---------- */
html body .popover .plist{display:grid!important;gap:0!important}
html body .popover .plist>button{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important;min-height:46px!important;padding:10px 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--ui-ink)!important;box-shadow:none!important;text-align:left!important}
html body .popover .plist>button+button{box-shadow:inset 0 .5px 0 var(--ui-line)!important}
html body .popover .plist>button>span{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:10px!important;flex:1;min-width:0}
html body .popover .plist>button b{font:400 16px/1.3 var(--f-body)!important;color:var(--ui-ink)!important}
html body .popover .plist>button small{font:400 13px/1.3 var(--f-body)!important;color:var(--ui-ink-2)!important}
html body .popover .plist>button[aria-selected=true] b{font-weight:600!important;color:var(--ui-blue)!important}
html body .popover .plist>button svg{width:18px!important;height:18px!important;flex:none;color:var(--ui-blue)!important}
html body .popover .plist>button:not(:disabled):active{background:var(--ui-fill)!important}
@media (hover:hover){html body .popover .plist>button:not(:disabled):hover{background:var(--ui-fill)!important}}
html body .popover .plist>button:disabled{opacity:.4}
html body .popover .pop-title{margin:2px 4px 8px!important;font:600 17px/1.3 var(--f-body)!important;color:var(--ui-ink)!important}
html body .popover.sheet[data-kind=select]{border-radius:22px 22px 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));max-height:70dvh;overflow:auto}
html body .popover:not(.sheet)[data-kind=select]{max-height:min(420px,60vh);overflow:auto;padding:10px}

/* ---------- Dialogs: a sheet from the bottom on the phone, a centred card on the computer ---------- */
html body dialog:is(.telegram-signin-dialog,.terms-dialog,.request-result-dialog,.tourist-dialog,.profile-editor){border:0!important;border-radius:22px!important;background:var(--ui-surface)!important;box-shadow:0 20px 60px rgba(0,0,0,.18)!important}
html body dialog:is(.telegram-signin-dialog,.terms-dialog,.request-result-dialog,.tourist-dialog,.profile-editor)::backdrop{background:rgba(0,0,0,.32)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html body dialog:is(.telegram-signin-dialog,.terms-dialog,.request-result-dialog,.tourist-dialog,.profile-editor) :is(.receipt-close,header [data-terms-close]){width:30px!important;height:30px!important;border:0!important;border-radius:50%!important;background:var(--ui-fill)!important;color:var(--ui-ink-2)!important;box-shadow:none!important}
@media (max-width:640px){
 html body dialog:is(.telegram-signin-dialog,.terms-dialog,.request-result-dialog,.tourist-dialog,.profile-editor)[open]{position:fixed!important;inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:90dvh!important;margin:0!important;border-radius:22px 22px 0 0!important;padding-top:28px!important;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;animation:ui-sheet-in .32s cubic-bezier(.32,.72,0,1)}
 html body dialog:is(.telegram-signin-dialog,.terms-dialog,.request-result-dialog,.tourist-dialog,.profile-editor)[open]::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(60,60,67,.3)}
}
/* the scrolling text of a dialog takes focus for screen readers; it needs no ring */
html body dialog :is(.terms-body,[tabindex="-1"]):focus{outline:none!important}
@keyframes ui-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){html body dialog[open]{animation:none!important}}

/* ---------- Sign-in buttons: one look for every provider ---------- */
html body:not(.is-admin) :is(#app,dialog) :is(summary.signin-provider,button.signin-provider){display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:var(--ui-h-l)!important;padding:0 18px!important;border:0!important;border-radius:var(--ui-r-tile)!important;background:var(--ui-surface)!important;color:var(--ui-ink)!important;font:600 16px/1.2 var(--f-body)!important;box-shadow:var(--ui-tile-shadow)!important}
html body:not(.is-admin) :is(#app,dialog) :is(summary.signin-provider,button.signin-provider):active{transform:scale(.98)}

/* ---------- Text links that looked like buttons ---------- */
html body:not(.is-admin) #app button.terms-link{display:inline!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ui-blue)!important;font:inherit!important;text-decoration:none!important;box-shadow:none!important}

/* ---------- Focus: a soft blue ring, only for keyboard ---------- */
html body:not(.is-admin) #app :is(button,a,summary):focus:not(:focus-visible){outline:none}
html body:not(.is-admin) #app :is(button,a,summary):focus-visible{outline:none!important;box-shadow:var(--ui-ring)!important}
html body:not(.is-admin) #app :is(.fleet-filters,#tripPicker) select.input:focus-visible{outline:none!important;box-shadow:var(--ui-tile-shadow),var(--ui-ring)!important}

/* ---------- Text selection ---------- */
html body:not(.is-admin) ::selection{background:rgba(0,113,227,.2)}

@media (prefers-reduced-motion:reduce){
 html body:not(.is-admin) #app :is(.btn,.chip,.cal-shortcuts>button,.signin-provider){transition:none!important;transform:none!important}
}

/* Section links on the tour page are plain chips (no blue outline) */
html body:not(.is-admin) #app .tour-section-nav.tour-section-nav{gap:8px!important}
html body:not(.is-admin) #app .tour-section-nav.tour-section-nav>a{text-decoration:none!important}

/* ---------- 26.0 — page details ---------- */
/* Page titles share one size: 48px on the computer, 27px on the phone */
html body:not(.is-admin) #app :is(.wrap.section>h1:first-child,.comfort-page h1){font-size:48px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.025em!important;margin-bottom:8px!important}
html body:not(.is-admin) #app :is(.wrap.section>h1:first-child,.comfort-page h1)+:is(p,.sub){font-size:16px!important;line-height:1.45!important;color:var(--ui-ink-2)!important}
html body:not(.is-admin) #app .wrap.section>h1:first-child+.sub+.btn{margin-top:16px!important}
@media (max-width:640px){html body:not(.is-admin) #app :is(.wrap.section>h1:first-child,.comfort-page h1){font-size:27px!important;letter-spacing:-.02em!important}}
/* One back control on the tour page: the floating one on the phone */
@media (max-width:900px){html body:not(.is-admin):has(.floating-page-back:not([hidden])) #app .tour-back-control{display:none!important}}
/* Back and forward links carry the same chevron as the other back buttons */
html body:not(.is-admin) #app .btn>svg{width:16px;height:16px;flex:none}
/* A picture that fails to load shows a small caption, not giant text */
html body:not(.is-admin) #app img{font-size:12px;line-height:1.3;color:var(--ui-ink-2);overflow:hidden}
/* Sliders in the brand blue */
html body:not(.is-admin) #app input[type=range]{accent-color:var(--ui-blue)}

/* ---------- 26.1 — transfer form: «Откуда», «Куда», «Время» open the shared window ---------- */
html body:not(.is-admin) #app #trForm .select-btn{cursor:pointer;text-align:left!important}
html body:not(.is-admin) #app #trForm .select-btn::after{display:none}
/* time window: two iPhone-style wheels with a band in the middle */
html body .popover[data-kind=time] .wheels{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;height:200px;margin:4px 0 0;user-select:none;-webkit-user-select:none}
html body .popover[data-kind=time] .wheel-band{position:absolute;left:0;right:0;top:80px;height:40px;border-radius:10px;background:var(--ui-fill);pointer-events:none}
html body .popover[data-kind=time] .wheel{position:relative;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;padding:80px 0;box-sizing:border-box;outline:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
html body .popover[data-kind=time] .wheel::-webkit-scrollbar{display:none}
html body .popover[data-kind=time] .wheel:focus-visible{box-shadow:none}
html body .popover[data-kind=time] .wheel:focus-visible [data-wheel-item].on{color:var(--ui-blue)!important}
html body .popover[data-kind=time] [data-wheel-item]{display:block!important;width:100%!important;height:40px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scroll-snap-align:center;font:400 22px/40px var(--f-body)!important;font-variant-numeric:tabular-nums;color:var(--ui-ink-2)!important;text-align:center!important;transition:color .15s ease}
html body .popover[data-kind=time] [data-wheel-item].on{color:var(--ui-ink)!important;font-weight:500!important}
html body .popover[data-kind=time] .wheel[data-wheel=h] [data-wheel-item]{text-align:right!important;padding-right:14px!important}
html body .popover[data-kind=time] .wheel[data-wheel=m] [data-wheel-item]{text-align:left!important;padding-left:14px!important}
html body .popover[data-kind=time] .wheel-colon{position:relative;font:500 22px/40px var(--f-body);color:var(--ui-ink)}
html body .popover[data-kind=time] [data-time-done]{margin-top:14px!important;width:100%!important;min-height:var(--ui-h-l)!important;border:0!important;border-radius:999px!important;background:var(--ui-blue)!important;color:#fff!important;font:600 17px/1.2 var(--f-body)!important}
html body .popover.sheet[data-kind=time]{border-radius:22px 22px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:85dvh;overflow:auto}
html body .popover:not(.sheet)[data-kind=time]{padding:14px}
html body:not(.is-admin) #app #trPanel #trForm :is(.transfer-route-fields,.v152-rows,.v152-group)>.field>.select-hidden,html body:not(.is-admin) #app #trPanel #trForm .field>.select-hidden{position:absolute!important;inset:auto!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important}