/* КАРАДЕСК — блок «Когда позвонить?» в формах заявки (callpick.js). Цвета приходят из поля телефона формы:
   --cp-fg (текст), --cp-muted (подписи), --cp-bg (фон поля), --cp-bd (рамка), --cp-r (скругление); data-theme = dark | light. */
.cp{grid-column:1/-1;display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0;color:var(--cp-fg,#fff)}
.cp[data-theme=light]{--cp-on-bg:var(--cp-fg,#0b0b0c);--cp-on-fg:#fff}
.cp[data-theme=dark]{--cp-on-bg:var(--cp-fg,#fff);--cp-on-fg:#0b0b0c}
.cp .cp-legend{float:left;width:100%;padding:0;margin:0 0 2px;font-size:14px;line-height:1.3;color:var(--cp-muted,#a6a6ac)}
.cp .cp-legend+*{clear:both}
.form .cp .cp-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form .cp .cp-mode{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:10px 14px;border-radius:var(--cp-r,14px);
  border:1px solid var(--cp-bd,rgba(255,255,255,.1));background:var(--cp-bg,rgba(255,255,255,.06));color:var(--cp-fg,#fff);cursor:pointer;transition:background .2s,color .2s,border-color .2s;font-size:15px;line-height:1.25}
.form .cp .cp-mode input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;border:0;background:none}
.form .cp .cp-t{font-weight:640}
.form .cp .cp-s{font-size:12.5px;opacity:.72}
.form .cp .cp-mode:has(input:checked){background:var(--cp-on-bg);color:var(--cp-on-fg);border-color:var(--cp-on-bg)}
.form .cp .cp-mode:has(input:checked) .cp-s{opacity:.8}
.form .cp .cp-mode:has(input:focus-visible){outline:2px solid var(--cp-fg,#fff);outline-offset:2px}
.form .cp .cp-mode:has(input:disabled){opacity:.45;cursor:not-allowed}
.form .cp .cp-mode:has(input:disabled) input{cursor:not-allowed}
.form .cp .cp-when{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
.form .cp .cp-when[hidden]{display:none}
.form .cp .cp-f{display:grid;gap:6px;font-size:13px;color:var(--cp-muted,#a6a6ac);min-width:0}
.form .cp select{width:100%;min-width:0;height:48px;padding:0 34px 0 14px;border-radius:var(--cp-r,14px);border:1px solid var(--cp-bd,rgba(255,255,255,.1));
  background-color:var(--cp-bg,rgba(255,255,255,.06));color:var(--cp-fg,#fff);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.form .cp select:focus{outline:none;border-color:var(--cp-fg,#fff)}
.form .cp select:focus-visible{outline:2px solid var(--cp-fg,#fff);outline-offset:2px}
.form .cp select option{color:#0b0b0c;background:#fff}
.form .cp select.field-error{outline:2px solid #e5484d;outline-offset:1px}
.form .cp .cp-tz{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--cp-muted,#a6a6ac)}
.form .cp .cp-note{margin:0;font-size:12px;line-height:1.45;color:var(--cp-muted,#a6a6ac);opacity:.9}
@media (max-width:420px){
  .form .cp .cp-mode{padding:9px 11px;font-size:14px}
  .form .cp .cp-s{font-size:12px}
  .form .cp .cp-when{grid-template-columns:1fr 1fr}
  .form .cp select{padding:0 28px 0 11px;background-position:calc(100% - 16px) 21px,calc(100% - 11px) 21px}
}