/* Кастомні випадайки, календар і вибір часу (web/ui.js) — обтічні форми в стилі Hroomy */
.dd{position:relative}
.dd-native{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%;height:100%}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line,#E6DFC9);background:var(--cream,#FBF8F0);color:var(--ink,#1F2A24);font-family:inherit;font-weight:500;font-size:15px;line-height:1.25;transition:border .2s,box-shadow .2s,background .2s}
.dd-btn:hover{border-color:#cfc6a8}
.dd-btn .dd-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-btn svg{flex:none;width:18px;height:18px;color:var(--soft,#5E675F);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.dd-btn.open{border-color:var(--green,#2F5D3F);box-shadow:0 0 0 4px rgba(47,93,63,.14)}
.dd-btn.open svg{transform:rotate(180deg)}
.dd-btn:focus-visible{outline:none;border-color:var(--green,#2F5D3F);box-shadow:0 0 0 4px rgba(47,93,63,.14)}
.dd-btn.pill{width:auto;display:inline-flex;border-radius:999px;padding:7px 12px;font-weight:600;font-size:13px;gap:6px;background:transparent}
.dd-btn.pill svg{width:15px;height:15px}

.ui-pop{position:fixed;z-index:3000;background:var(--card,#FFFDF8);border:1.5px solid var(--line,#E6DFC9);border-radius:20px;box-shadow:0 18px 44px rgba(27,58,39,.20),0 3px 10px rgba(27,58,39,.08);padding:6px;transform-origin:top center;animation:uiIn .16s cubic-bezier(.2,.8,.2,1);font-family:inherit;color:var(--ink,#1F2A24)}
.ui-pop.up{transform-origin:bottom center}
@keyframes uiIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes uiUp{from{transform:translateY(28px);opacity:0}}
@keyframes uiFade{from{opacity:0}}
.ui-back{position:fixed;inset:0;z-index:2999;background:rgba(20,40,28,.38);animation:uiFade .18s ease}
.ui-list{max-height:min(268px,calc(var(--pop-mh,400px) - 14px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line,#E6DFC9) transparent}
.ui-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:11px 13px;border:0;background:none;border-radius:14px;font-family:inherit;font-weight:500;font-size:15px;line-height:1.25;color:inherit;cursor:pointer}
.ui-opt:hover,.ui-opt:focus-visible{background:var(--cream,#F3EEDD);outline:none}
.ui-opt.on{background:#E2EFE5;color:var(--deep,#1B3A27);font-weight:600}
.ui-opt svg{width:17px;height:17px;color:var(--green,#2F5D3F);flex:none}

/* календар */
.cal{width:min(320px,calc(100vw - 24px));padding:10px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.cal-nav{width:36px;height:36px;border-radius:50%;border:0;background:var(--cream,#F3EEDD);color:var(--deep,#1B3A27);display:grid;place-items:center;cursor:pointer;flex:none}
.cal-nav:hover{background:#E2EFE5}.cal-nav[disabled]{opacity:.35;pointer-events:none}
.cal-nav svg{width:18px;height:18px}
.cal-t{flex:1;border:0;background:none;border-radius:999px;padding:8px 10px;font-family:inherit;font-weight:700;font-size:15px;line-height:1;color:var(--deep,#1B3A27);cursor:pointer;text-transform:none}
.cal-t:hover{background:var(--cream,#F3EEDD)}
.cal-w{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.cal-w span{text-align:center;font-size:11.5px;font-weight:600;color:var(--soft,#5E675F);padding:4px 0;text-transform:uppercase}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-d{aspect-ratio:1;border:0;background:none;border-radius:50%;font-family:inherit;font-weight:500;font-size:14.5px;line-height:1;color:var(--ink,#1F2A24);cursor:pointer;display:grid;place-items:center}
.cal-d:hover{background:#E2EFE5}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--leaf,#79AE86)}
.cal-d.sel{background:var(--green,#2F5D3F);color:#fff;font-weight:700}
.cal-d[disabled]{opacity:.28;pointer-events:none}
.cal-d.pad{visibility:hidden;pointer-events:none}
.cal-yg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-height:264px;overflow:auto;overscroll-behavior:contain;padding:2px}
.cal-mg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px}
.cal-y{border:0;background:none;border-radius:999px;padding:11px 4px;font-family:inherit;font-weight:500;font-size:14.5px;line-height:1;color:var(--ink,#1F2A24);cursor:pointer;text-transform:none}
.cal-y:hover{background:#E2EFE5}.cal-y.sel{background:var(--green,#2F5D3F);color:#fff;font-weight:700}.cal-y[disabled]{opacity:.28;pointer-events:none}
.cal-f{display:flex;justify-content:space-between;margin-top:8px;padding:0 4px 2px}
.cal-link{border:0;background:none;color:var(--green,#2F5D3F);font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;padding:8px 10px;border-radius:999px;cursor:pointer}
.cal-link:hover{background:var(--cream,#F3EEDD)}

/* час */
.tp{width:208px;padding:10px}
.tp-c{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tp-col{max-height:216px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.tp-col::-webkit-scrollbar{display:none}
.tp-i{border:0;background:none;border-radius:999px;padding:10px 0;font-family:inherit;font-weight:600;font-size:16px;line-height:1;color:var(--ink,#1F2A24);cursor:pointer;text-align:center}
.tp-i:hover{background:#E2EFE5}.tp-i.on{background:var(--green,#2F5D3F);color:#fff}
.tp-f{display:flex;justify-content:flex-end;margin-top:8px}

input[data-date],input[data-time]{cursor:pointer;caret-color:transparent;background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:40px!important}
input[data-date]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E675F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='4'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E")}
input[data-time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E675F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}

/* компактніше на телефоні */
@media (max-width:640px){
  .ui-pop{border-radius:18px;padding:5px}
  .ui-list{max-height:min(236px,calc(var(--pop-mh,400px) - 14px))}
  .ui-opt{padding:9px 12px;font-size:14px;border-radius:12px;gap:8px}
  .ui-opt svg{width:15px;height:15px}
  .dd-btn{padding:11px 12px;font-size:14.5px;border-radius:13px}
  .dd-btn svg{width:16px;height:16px}
  .cal{width:min(288px,calc(100vw - 20px));padding:8px}
  .cal-nav{width:32px;height:32px}.cal-nav svg{width:16px;height:16px}
  .cal-t{font-size:14px;padding:7px 8px}
  .cal-w span{font-size:10.5px;padding:3px 0}
  .cal-g{gap:1px}
  .cal-d{font-size:13px;aspect-ratio:auto;height:34px}
  .cal-yg{max-height:216px;gap:2px}.cal-y{font-size:13.5px;padding:9px 2px}
  .cal-mg{gap:2px}
  .cal-link{font-size:12.5px;padding:6px 9px}
  .tp{width:172px;padding:8px}
  .tp-col{max-height:176px}.tp-i{font-size:14.5px;padding:8px 0}
}

@media (max-width:640px){
  .ui-pop.sheetmode{left:0;right:0;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));margin:0 auto;width:min(360px,calc(100vw - 20px));max-height:72vh;overflow:auto;border-radius:22px;animation:uiUp .2s cubic-bezier(.2,.8,.2,1);transform:none}
  .ui-pop.sheetmode.cal{width:min(330px,calc(100vw - 20px));padding:10px}
}
.ui-pop.cal,.ui-pop.tp{overflow:auto;overscroll-behavior:contain}
.ui-pop{box-sizing:border-box}