/* =========================================================
   VINKONA — компоненты интерфейса
   Городской комбобокс, селект услуг, календарь, модалки.
   ========================================================= */

/* ================= ПОЛЕ + ПОПОВЕР ================= */
.field{ position:relative; }
.field.is-open{ border-color:var(--clay); background:var(--white); }

.select__value{
  width:100%; min-width:0;
  display:block; text-align:left;
  padding:0; border:0; background:transparent;
  font-size:15px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.select__value.is-placeholder,
input.is-placeholder{ color:var(--ink-40); font-weight:500; }
.field.is-open .field__caret{ transform:rotate(180deg); }
.field__caret{ transition:transform .25s var(--ease); }

.pop{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  min-width:100%; width:max-content; max-width:340px;
  padding:8px;
  border-radius:var(--r-lg);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
  opacity:0; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.pop.is-on{ opacity:1; transform:none; }

/* Раскрытие вверх — когда снизу не хватает места */
.pop--above{ top:auto; bottom:calc(100% + 10px); transform:translateY(6px); }
.pop--above.is-on{ transform:none; }

.pop__label{
  padding:8px 12px 6px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-40);
}
.pop__list{ max-height:min(320px, 46vh); overflow-y:auto; overscroll-behavior:contain; }

.pop__empty{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 20px; text-align:center;
}
.pop__empty .ico{ width:26px; height:26px; color:var(--blush); }
.pop__empty p{ font-size:14.5px; font-weight:700; }
.pop__empty span{ font-size:12.5px; color:var(--ink-55); max-width:230px; }

.pop__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:6px; padding:10px 12px 6px;
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-55);
}
.pop__foot .link-arrow{ font-size:13px; }

/* ================= ОПЦИИ ================= */
.opt{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px;
  border-radius:var(--r-md);
  text-align:left; font-size:14.5px; font-weight:600; color:var(--ink);
  transition:background-color .16s var(--ease);
}
.opt__main{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt__main mark{ background:var(--blush-200); color:var(--clay-700); border-radius:3px; padding:0 1px; }
.opt__sub{
  flex:0 1 auto; min-width:0; max-width:56%; margin-left:auto;
  font-size:12px; font-weight:500; color:var(--ink-40);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opt__hint{ flex:none; color:var(--clay); }
.opt:hover,.opt.is-active{ background:var(--cream); }
.opt.is-active .opt__main{ color:var(--clay-700); }
.opt--flat{ padding-left:14px; }

.opt-group + .opt-group{ margin-top:4px; padding-top:4px; border-top:1px solid var(--line); }
.opt-group__title{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:11px 12px 8px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--clay);
  border-radius:var(--r-md);
  transition:background-color .16s var(--ease);
}
.opt-group__title .ico{ color:var(--clay); }
.opt-group__title em{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink-40);
}
.opt-group__title[data-type]:hover,
.opt-group__title.is-active{ background:var(--clay-tint); }
.opt-group__title--static{ cursor:default; }

/* Поиск внутри поповера */
.pop__search{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; margin-bottom:6px;
  border-radius:var(--r-md);
  background:var(--cream);
}
.pop__search .ico{ color:var(--clay); flex:none; }
.pop__search input{
  width:100%; border:0; background:transparent; outline:none;
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.pop__search input::placeholder{ color:var(--ink-40); font-weight:500; }

/* ================= КАЛЕНДАРЬ ================= */
.pop--calendar{ width:308px; max-width:calc(100vw - 32px); padding:12px; }
.pop--city{ max-width:380px; }

.cal__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.cal__month{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; letter-spacing:-.01em;
}
.cal__nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none;
  border-radius:var(--r-full);
  color:var(--ink);
  background:var(--cream);
  transition:all .2s var(--ease);
}
.cal__nav .ico{ transform:rotate(180deg); }
.cal__nav--next .ico{ transform:none; }
.cal__nav:hover:not(:disabled){ background:var(--clay); color:var(--white); }
.cal__nav:disabled{ opacity:.35; cursor:default; }

.cal__quick{ display:flex; gap:6px; margin-bottom:10px; }
.cal__quick button{
  flex:1;
  padding:7px 8px; border-radius:var(--r-full);
  background:var(--cream); border:1px solid transparent;
  font-size:12px; font-weight:600; color:var(--ink-70);
  transition:all .2s var(--ease);
}
.cal__quick button:hover{ background:var(--clay); color:var(--white); }

.cal__week{
  display:grid; grid-template-columns:repeat(7,1fr);
  margin-bottom:4px;
}
.cal__week span{
  text-align:center; padding:4px 0;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-40);
}
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }

.cal__day{
  display:flex; align-items:center; justify-content:center;
  height:36px; border-radius:var(--r-full);
  font-size:13.5px; font-weight:600; color:var(--ink);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.cal__day:hover:not(:disabled):not(.cal__day--out){ background:var(--cream); }
.cal__day--out{ color:var(--ink-40); opacity:.45; cursor:default; }
.cal__day--weekend:not(.cal__day--out):not(.cal__day--off){ color:var(--clay); }
.cal__day--off{ color:var(--ink-40); opacity:.4; cursor:default; text-decoration:line-through; }
.cal__day--today{ box-shadow:inset 0 0 0 1.5px var(--clay); }
.cal__day--sel,
.cal__day--sel:hover{ background:var(--clay); color:var(--white); box-shadow:var(--sh-clay); }

.cal__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
}
.cal__reset{
  font-size:13px; font-weight:600; color:var(--ink-55);
  transition:color .2s var(--ease);
}
.cal__reset:hover{ color:var(--clay); }

/* ================= ЧИПЫ ФОРМЫ ================= */
.search__chips .chip.is-active{ background:var(--clay); border-color:var(--clay); color:var(--white); }

/* ================= МОДАЛКИ: ОБЩЕЕ ================= */
.modal__box--auth{ max-width:520px; max-height:min(90vh, 920px); }

/* Табы вход / регистрация */
.auth__tabs{
  display:flex; gap:4px; padding:6px;
  margin:0 26px;
  border-radius:var(--r-full);
  background:var(--cream);
}
.auth__tab{
  flex:1; padding:11px 16px;
  border-radius:var(--r-full);
  font-size:14.5px; font-weight:700; color:var(--ink-55);
  transition:all .22s var(--ease);
}
.auth__tab:hover{ color:var(--ink); }
.auth__tab.is-active{ background:var(--white); color:var(--clay); box-shadow:var(--sh-xs); }

.auth__body{ padding:24px 26px 30px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.auth__title{
  font-family:var(--font-display);
  font-size:24px; font-weight:600; letter-spacing:-.015em;
}
.auth__lead{ margin-top:8px; font-size:14px; line-height:1.6; color:var(--ink-70); }

.auth__form{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }

/* Поля ввода */
.input{
  display:flex; flex-direction:column; gap:6px;
}
.input__label{ font-size:12.5px; font-weight:700; color:var(--ink-70); }
.input__box{
  display:flex; align-items:center; gap:9px;
  padding:13px 15px;
  border-radius:var(--r-md);
  background:var(--cream);
  border:1.5px solid transparent;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.input__box:focus-within{ border-color:rgba(62,57,53,.26); background:var(--white); }
.input__box .ico{ color:var(--clay); flex:none; }
.input__box input{
  width:100%; min-width:0;
  border:0; background:transparent; outline:none;
  font-size:15px; font-weight:600; color:var(--ink);
}
.input__box input::placeholder{ color:var(--ink-40); font-weight:500; }
.input__box--error{ border-color:#C0554F; background:#FDF3F2; }
.input__hint{ font-size:12px; color:var(--ink-55); }
.input__hint--error{ color:#C0554F; font-weight:600; }
.input__toggle{
  flex:none; color:var(--ink-40);
  transition:color .2s var(--ease);
}
.input__toggle:hover{ color:var(--clay); }

/* Выбор роли при регистрации */
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.role{
  display:flex; flex-direction:column; gap:6px;
  padding:16px 14px;
  border-radius:var(--r-lg);
  background:var(--white);
  border:1.5px solid var(--line);
  text-align:left;
  transition:all .22s var(--ease);
}
.role:hover{ border-color:var(--blush); }
.role.is-active{ border-color:var(--clay); background:var(--clay-tint); }
.role__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:13px;
  background:var(--cream); color:var(--clay);
  transition:all .22s var(--ease);
}
.role.is-active .role__icon{ background:var(--clay); color:var(--white); }
.role strong{ font-size:14.5px; font-weight:700; }
.role span{ font-size:12px; line-height:1.45; color:var(--ink-55); }

/* Чекбокс-согласие */
.check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:12.5px; line-height:1.5; color:var(--ink-70);
  cursor:pointer;
}
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check__box{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex:none; margin-top:1px;
  border-radius:6px;
  border:1.5px solid var(--line-strong);
  background:var(--white);
  transition:all .2s var(--ease);
}
.check__box .ico{ width:13px; height:13px; color:var(--white); opacity:0; }
.check input:checked + .check__box{ background:var(--clay); border-color:var(--clay); }
.check input:checked + .check__box .ico{ opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid rgba(62,57,53,.38); outline-offset:2px; }
.check a{ color:var(--clay); font-weight:600; text-decoration:underline; text-decoration-color:var(--blush); }

/* Разделитель «или» */
.auth__or{
  display:flex; align-items:center; gap:12px;
  margin:4px 0;
  font-size:12px; color:var(--ink-40);
}
.auth__or::before,.auth__or::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* Кнопки-способы входа */
.oauth{ display:flex; gap:10px; }
.oauth button{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px;
  border-radius:var(--r-md);
  background:var(--white);
  border:1.5px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink);
  transition:all .2s var(--ease);
}
.oauth button:hover{ border-color:var(--clay); color:var(--clay); }
.oauth .ico{ color:inherit; }

.auth__foot{
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-55); text-align:center;
}
.auth__foot button{
  color:var(--clay); font-weight:700;
  text-decoration:underline; text-decoration-color:var(--blush);
}

/* Шаги регистрации мастера */
.steps-mini{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.steps-mini span{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:800;
  background:var(--cream); color:var(--ink-40);
}
.steps-mini span.is-done{ background:var(--clay); color:var(--white); }

/* Шапка модалки авторизации */
.auth__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 26px 18px;
}
.auth__top .round-btn{ width:42px; height:42px; }
.auth__top .round-btn:hover{ background:var(--clay); border-color:var(--clay); color:var(--white); }

.auth__tabs.is-dim{ opacity:.5; }

/* Строка «запомнить меня» + «забыли пароль» */
.auth__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.auth__link{
  font-size:12.5px; font-weight:700; color:var(--clay);
  text-decoration:underline; text-decoration-color:var(--blush);
}

/* Подсказка про анкету мастера */
.auth__note{
  display:flex; align-items:flex-start; gap:9px;
  padding:13px 15px;
  border-radius:var(--r-md);
  background:var(--clay-tint);
  font-size:12.5px; line-height:1.55; color:var(--clay-700);
}
.auth__note .ico{ flex:none; margin-top:1px; color:var(--clay); }

/* ================= МОДАЛКА ГОРОДА: ПОИСК ================= */
.modal__search{
  display:flex; align-items:center; gap:9px;
  padding:12px 15px; margin-bottom:22px;
  border-radius:var(--r-md);
  background:var(--cream);
}
.modal__search .ico{ color:var(--clay); flex:none; }
.modal__search input{
  width:100%; border:0; background:transparent; outline:none;
  font-size:15px; font-weight:600; color:var(--ink);
}
.modal__search input::placeholder{ color:var(--ink-40); font-weight:500; }

.modal__empty{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:32px 20px; text-align:center;
}
.modal__empty .ico{ width:28px; height:28px; color:var(--blush); }
.modal__empty p{ font-size:15px; font-weight:700; }
.modal__empty span{ font-size:13px; color:var(--ink-55); max-width:280px; }

/* ================= ПОДЛОЖКА ПОД НИЖНИЙ ЛИСТ ================= */
.pop-backdrop{
  position:fixed; inset:0; z-index:55;
  background:rgba(62,57,53,.42);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .22s var(--ease);
}
.pop-backdrop.is-on{ opacity:1; }

/* ================= МОБИЛЬНЫЕ НАСТРОЙКИ ================= */
@media (max-width:720px){
  .pop{ width:auto; min-width:100%; max-width:calc(100vw - 32px); }
  .opt__sub{ display:none; }
  .roles{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  /* Календарь превращаем в нижний лист — так удобнее попадать пальцем */
  .pop--calendar{
    position:fixed; left:12px; right:12px; bottom:12px; top:auto;
    width:auto; min-width:0; max-width:none;
    transform:translateY(16px);
  }
  .pop--calendar.is-on{ transform:none; }
  .auth__body{ padding:20px 18px 24px; }
  .auth__tabs{ margin:0 18px; }
  .modal__box--auth{ max-height:92vh; }
}