/* ═══════════════════════════════════════════════════════════════
   ВЫБОР В ДВА КЛИКА (дата, время, формат)
   ═══════════════════════════════════════════════════════════════ */
.trig{width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  font:600 14px/1.2 var(--ui);letter-spacing:-.01em;color:var(--ink);background:var(--fill);
  border:.5px solid transparent;border-radius:11px;padding:9px 12px 9px 9px;
  transition:background .22s var(--e),box-shadow .25s var(--e),border-color .22s var(--e),transform .14s var(--e)}
.trig:hover{background:var(--fill-2)}
.trig:active{transform:scale(.99)}
.trig[aria-expanded="true"]{background:var(--raise);border-color:var(--acc-a40);box-shadow:0 0 0 4px var(--acc-a12)}
.trig .tl{flex:0 0 30px;height:30px;border-radius:9px;background:var(--raise);box-shadow:var(--sh-1);
  display:flex;align-items:center;justify-content:center;transition:background .22s var(--e)}
.trig:hover .tl{background:var(--acc-a12);box-shadow:none}
.trig[aria-expanded="true"] .tl{background:var(--acc)}
.trig[aria-expanded="true"] .tl svg{stroke:var(--on-acc)}
.trig .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trig .ph{color:var(--ink-3);font-weight:500}
.trig>svg{stroke:var(--ink-3);flex:0 0 auto;transition:transform .32s var(--e)}
.trig[aria-expanded="true"]>svg{transform:rotate(180deg)}
.pop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);background:var(--surface);
  border-radius:16px;padding:14px;border:.5px solid var(--hair);box-shadow:var(--sh-float);
  animation:pop .28s var(--e-out) both;transform-origin:top left}
.pop::before{content:"";position:absolute;top:-6px;left:22px;width:11px;height:11px;background:var(--surface);
  border-left:.5px solid var(--hair);border-top:.5px solid var(--hair);transform:rotate(45deg);border-radius:2px}
.pop-h{display:flex;align-items:center;gap:9px;margin:0 2px 11px}
.pop-h b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:1}
.pop-h .now{font:700 14px/1 var(--ui);color:var(--acc);letter-spacing:-.02em;background:var(--acc-a12);padding:6px 10px;border-radius:8px;animation:pop .2s var(--e-out) both}
.pop-h button{border:0;background:var(--fill);color:var(--ink-2);font:600 11.5px/1 var(--ui);cursor:pointer;
  padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:5px;
  transition:background .18s var(--e),color .18s var(--e),transform .14s var(--e)}
.pop-h button:hover{background:var(--fill-2);color:var(--ink)}
.pop-h button:active{transform:scale(.94)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.opt{position:relative;font:600 13px/1 var(--ui);padding:11px 6px;border-radius:11px;border:0;cursor:pointer;
  background:var(--fill);color:var(--ink);text-align:center;overflow:hidden;
  transition:background .18s var(--e),color .18s var(--e),transform .16s var(--e-spring),box-shadow .22s var(--e)}
.opt:hover{background:var(--acc);color:var(--on-acc);transform:translateY(-1px);box-shadow:0 5px 14px -5px var(--acc-a40)}
.opt:active{transform:scale(.94)}
.opt[aria-pressed="true"]{background:var(--acc-a12);color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc-a40)}
.opt-w{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px}
.opt-w i{width:28px;height:28px;border-radius:9px;background:var(--raise);box-shadow:var(--sh-1);flex:0 0 28px;
  display:flex;align-items:center;justify-content:center;font-style:normal;transition:background .18s var(--e)}
.opt-w:hover i{background:rgba(255,255,255,.18);box-shadow:none}
.opt-w i svg{stroke:var(--acc);transition:stroke .18s var(--e)}
.opt-w:hover i svg{stroke:var(--on-acc)}
.opt-w b{flex:1;font-weight:600}
.pop-free{margin-top:12px;padding-top:11px;border-top:.5px solid var(--hair)}
.pop-free input{width:100%;font:500 13px/1 var(--ui);background:var(--fill);border:.5px solid transparent;
  border-radius:10px;padding:10px 11px;transition:background .2s var(--e),border-color .2s var(--e),box-shadow .2s var(--e)}
.pop-free input:focus{outline:none;background:var(--raise);border-color:var(--acc-a40);box-shadow:0 0 0 4px var(--acc-a12)}
.pop-free label{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pick-in{width:100%;font:600 13.5px/1 var(--ui);color:var(--ink);background:var(--fill);
  border:.5px solid transparent;border-radius:10px;padding:10px 11px;cursor:pointer;
  transition:background .2s var(--e),box-shadow .2s var(--e),border-color .2s var(--e)}
.pick-in:hover{background:var(--fill-2)}
.pick-in:focus{outline:none;background:var(--raise);border-color:var(--acc-a40);box-shadow:0 0 0 4px var(--acc-a12)}
.pick-in::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.45;transition:opacity .2s}
.pick-in:hover::-webkit-calendar-picker-indicator{opacity:1}

/* циферблат */
.pop.pop-clock{left:0;right:auto;width:268px}
.clk{width:240px;margin:0 auto}
.clk-top{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:2px 0 12px}
.clk-top button{border:0;background:transparent;cursor:pointer;font:800 30px/1 var(--ui);letter-spacing:-.03em;
  color:var(--ink-3);padding:2px 4px;border-radius:8px;transition:color .2s var(--e),background .2s var(--e)}
.clk-top button:hover{background:var(--fill)}
.clk-top button.on{color:var(--acc)}
.clk-top span{font:800 30px/1 var(--ui);color:var(--ink-3);letter-spacing:-.03em}
.clk em{display:block;font-style:normal;font:600 10px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:9px}
.dial{position:relative;width:240px;height:240px;border-radius:50%;background:var(--fill);animation:dialin .3s var(--e-out) both}
@keyframes dialin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.dial .hub{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--acc)}
.dial .hand{position:absolute;left:50%;top:50%;height:2px;background:var(--acc);transform-origin:0 50%;
  border-radius:2px;transition:transform .36s var(--e-spring),width .32s var(--e);opacity:.9}
.dial .hand::after{content:"";position:absolute;right:-17px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--acc);opacity:.16}
.num{position:absolute;width:34px;height:34px;margin:-17px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:transparent;color:var(--ink);font:600 13.5px/1 var(--ui);letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;transition:background .18s var(--e),color .18s var(--e),transform .16s var(--e-spring)}
.num:hover{background:var(--acc-a12);transform:scale(1.1)}
.num.on{background:var(--acc);color:var(--on-acc)}
.clk-half{margin:0 auto 12px;width:150px}
.clk-half button{flex:1;font-size:11.5px;padding:6px 0}
.clk-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:.5px solid var(--hair)}
.clk-foot .lnk{border:0;background:transparent;color:var(--ink-3);font:600 11.5px/1 var(--ui);cursor:pointer;
  padding:6px 8px;border-radius:8px;transition:background .18s var(--e),color .18s var(--e)}
.clk-foot .lnk:hover{background:var(--fill);color:var(--ink)}
.clk-foot .sp{flex:1}
.clk-free{margin-top:10px;animation:pop .2s var(--e-out) both}
.clk-free input{width:100%;font:500 13px/1 var(--ui);background:var(--fill);border:.5px solid transparent;border-radius:10px;padding:10px 11px}
.clk-free input:focus{outline:none;background:var(--raise);border-color:var(--acc-a40);box-shadow:0 0 0 4px var(--acc-a12)}

/* быстрый выбор */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{font:600 12px/1 var(--ui);letter-spacing:-.01em;padding:7px 11px;border-radius:9px;border:0;cursor:pointer;
  background:var(--fill);color:var(--ink-2);white-space:nowrap;
  transition:background .18s var(--e),color .18s var(--e),transform .16s var(--e-spring),box-shadow .2s var(--e)}
.chip:hover{background:var(--raise);color:var(--ink);box-shadow:var(--sh-pop);transform:translateY(-1px)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{background:var(--acc);color:var(--on-acc);box-shadow:0 2px 7px var(--acc-a40)}
.chips-more{background:transparent;color:var(--ink-3);box-shadow:none;text-decoration:underline;text-underline-offset:3px}