/**
 * UI states — Figma «Компоненты» (628:5232)
 * Primary / Secondary / Search / Tags / Tabbar / Links
 */

:root {
  --yz-blue-hover: #2e7698;
  --yz-blue-active: #256985;
  --yz-blue-disabled: rgba(58, 149, 191, 0.4);
  --yz-blue-100: rgba(58, 149, 191, 0.1);
  --yz-transition: 0.18s ease;
}

/* ── Primary button ── */
.yz-header__btn--primary,
.yz-footer__btn,
.yz-error-page__btn--primary,
.yz-nav-menu__btn--primary,
.yz-form-result__btn--primary,
.yz-callback-modal__submit,
.yz-booking-modal__submit {
  transition: background-color var(--yz-transition), opacity var(--yz-transition);
}

.yz-header__btn--primary:hover,
.yz-footer__btn:hover,
.yz-error-page__btn--primary:hover,
.yz-nav-menu__btn--primary:hover,
.yz-form-result__btn--primary:not(:disabled):hover,
.yz-callback-modal__submit:not(:disabled):hover,
.yz-booking-modal__submit:not(:disabled):hover {
  background: var(--yz-blue-hover);
}

.yz-header__btn--primary:active,
.yz-footer__btn:active,
.yz-error-page__btn--primary:active,
.yz-nav-menu__btn--primary:active,
.yz-form-result__btn--primary:not(:disabled):active,
.yz-callback-modal__submit:not(:disabled):active,
.yz-booking-modal__submit:not(:disabled):active {
  background: var(--yz-blue-active);
}

.yz-header__btn--primary:disabled,
.yz-footer__btn:disabled,
.yz-error-page__btn--primary:disabled,
.yz-nav-menu__btn--primary:disabled,
.yz-form-result__btn--primary:disabled,
.yz-callback-modal__submit:disabled,
.yz-booking-modal__submit:disabled {
  background: var(--yz-blue-disabled);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Secondary (ghost) — Figma Style=Secondary ── */
.yz-error-page__btn--ghost,
.yz-nav-menu__btn--ghost,
.yz-form-result__btn--ghost {
  transition: background-color var(--yz-transition), color var(--yz-transition);
}

.yz-error-page__btn--ghost:hover,
.yz-nav-menu__btn--ghost:hover,
.yz-form-result__btn--ghost:not(:disabled):hover {
  background: var(--yz-blue);
  color: #fff;
}

.yz-error-page__btn--ghost:active,
.yz-nav-menu__btn--ghost:active,
.yz-form-result__btn--ghost:not(:disabled):active {
  background: var(--yz-blue-hover);
  color: #fff;
}

.yz-form-result__btn--ghost:disabled {
  background: var(--yz-blue-100);
  color: var(--yz-blue-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Text links (Заказать звонок) ── */
.yz-header__callback,
.yz-footer__callback,
.yz-header__mobile-bar .yz-header__callback {
  transition: color var(--yz-transition), opacity var(--yz-transition);
}

.yz-header__callback:hover,
.yz-footer__callback:hover,
.yz-header__mobile-bar .yz-header__callback:hover {
  color: var(--yz-blue-hover);
}

/* ── Search — Figma 8003:200 (Default / Hover / Active / Completed) ── */
.yz-header__search form,
.yz-error-page__search,
.yz-header__mobile-search-form {
  transition: border-color var(--yz-transition);
}

.yz-header__search form:hover:not(:focus-within),
.yz-error-page__search:hover:not(:focus-within),
.yz-header__mobile-search-form:hover:not(:focus-within) {
  border-color: #bebebe;
}

.yz-header__search form:focus-within,
.yz-error-page__search:focus-within,
.yz-header__mobile-search-form:focus-within {
  border-color: var(--yz-blue);
}

.yz-header__search input:focus,
.yz-error-page__search-input:focus,
.yz-header__mobile-search-input:focus {
  color: var(--yz-text);
}

/* ── Tags / chips ── */
.yz-error-page__tag {
  transition: background-color var(--yz-transition), color var(--yz-transition);
}

.yz-error-page__tag:hover,
.yz-error-page__tag:focus-visible {
  background: var(--yz-blue-100);
  color: var(--yz-blue);
}

.yz-error-page__tag:active {
  background: var(--yz-blue);
  color: #fff;
}

/* ── Tabbar — Figma 8007:905 / 8039:2779 ── */
.yz-tabbar__item {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--yz-transition);
}

.yz-tabbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yz-tabbar__item.is-active {
  color: #3a95bf;
}

.yz-tabbar__item.is-disabled {
  color: #bebebe;
  pointer-events: none;
}

.yz-tabbar__item.is-active img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(28%) saturate(878%) hue-rotate(162deg) brightness(92%) contrast(88%);
}

.yz-tabbar__item.is-disabled img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(92%) contrast(86%);
}

/* ── Burger & mobile icon buttons ── */
.yz-header__burger,
.yz-header__mobile-icon {
  transition: border-color var(--yz-transition), background-color var(--yz-transition);
}

.yz-header__burger:hover,
.yz-header__mobile-icon:not(.yz-social):hover {
  border-color: var(--yz-blue);
}

/* ── Desktop nav triggers — Figma Menu 8003:542 ── */
.yz-header__nav-trigger,
.yz-header__nav-link {
  transition: color var(--yz-transition), border-color var(--yz-transition);
}

.yz-header__nav-trigger:hover,
.yz-header__nav-trigger:focus-visible {
  color: var(--yz-blue);
  border-bottom-color: var(--yz-blue);
}

.yz-header__nav-link:hover,
.yz-header__nav-link:focus-visible {
  color: var(--yz-blue);
}

/* ── Dropdown / mega menu items ── */
.yz-menu-item {
  transition: background-color var(--yz-transition), color var(--yz-transition);
}

a.yz-menu-item:hover,
button.yz-menu-item:hover,
a.yz-menu-item:focus-visible,
button.yz-menu-item:focus-visible {
  background: var(--yz-blue-100);
  color: var(--yz-blue);
}

/* ── Mobile nav menu items ── */
.yz-nav-menu__item {
  transition: color var(--yz-transition), background-color var(--yz-transition);
}

.yz-nav-menu__item:hover,
.yz-nav-menu__item:focus-visible {
  color: var(--yz-blue);
}

.yz-nav-menu__item--parent:active {
  background: var(--yz-blue-100);
}

/* ── Modal fields — Figma Input 6002:294 ── */
.yz-callback-modal__input,
.yz-callback-modal__select,
.yz-booking-modal__input,
.yz-booking-modal__select {
  transition: border-color var(--yz-transition);
}

.yz-callback-modal__input:hover:not(:focus),
.yz-callback-modal__select:hover:not(:focus),
.yz-booking-modal__input:hover:not(:focus),
.yz-booking-modal__select:hover:not(:focus) {
  border-color: #bebebe;
}

.yz-callback-modal__input:focus,
.yz-callback-modal__select:focus,
.yz-booking-modal__input:focus,
.yz-booking-modal__select:focus {
  border-color: var(--yz-blue);
}

.yz-callback-modal__select-arrow,
.yz-booking-modal__select-arrow {
  transition: transform var(--yz-transition);
}

.yz-callback-modal__select-wrap:has(.yz-callback-modal__select:focus) .yz-callback-modal__select-arrow,
.yz-booking-modal__select-wrap:has(.yz-booking-modal__select:focus) .yz-booking-modal__select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Social icons — Figma 2396:9472 «Элементы Шапки» ── */
.yz-social {
  display: block;
  flex-shrink: 0;
  border-radius: var(--yz-radius, 10px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-decoration: none;
  transition: background-image var(--yz-transition), background-color var(--yz-transition), opacity var(--yz-transition);
}

.yz-social--size-44 {
  width: 44px;
  height: 44px;
}

.yz-social--light.yz-social--size-44:not(.yz-social--ok) {
  background-size: 100% 100%;
}

.yz-social--size-40 {
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
}

/* TG — Default / Hover (общий fallback) */
.yz-social--tg:not(.yz-social--light) {
  background-image: url('../img/social-tg-default.svg');
}

.yz-social--tg:not(.yz-social--light):hover,
.yz-social--tg:not(.yz-social--light):focus-visible {
  background-image: url('../img/social-tg-hover.svg');
}

/* TG — Light / Hover (подвал на тёмном) */
.yz-social--tg.yz-social--light {
  background-image: url('../img/footer-social-tg.svg');
}

.yz-social--tg.yz-social--light:hover,
.yz-social--tg.yz-social--light:focus-visible {
  background-image: url('../img/social-tg-hover.svg');
  background-size: 100% 100%;
}

/* MAX — Default / Hover */
.yz-social--max:not(.yz-social--light) {
  background-image: url('../img/social-max-default.svg');
}

.yz-social--max:not(.yz-social--light):hover,
.yz-social--max:not(.yz-social--light):focus-visible {
  background-image: url('../img/social-max-hover.svg');
}

.yz-social--max.yz-social--light {
  background-image: url('../img/footer-social-max.svg');
}

.yz-social--max.yz-social--light:hover,
.yz-social--max.yz-social--light:focus-visible {
  background-image: url('../img/social-max-hover.svg');
}

/* Шапка — Figma №2 1:1215 / 1:1694: brand-иконки (после default, чтобы перекрыть) */
.yz-header__social .yz-social--tg:not(.yz-social--light),
.yz-header__mobile-right .yz-social--tg:not(.yz-social--light) {
  background-image: url('../img/social-tg-hover.svg');
}

.yz-header__social .yz-social--max:not(.yz-social--light),
.yz-header__mobile-right .yz-social--max:not(.yz-social--light) {
  background-image: url('../img/social-max-hover.svg');
}

.yz-header__mobile-right .yz-social--size-40.yz-social--tg:not(.yz-social--light) {
  background-image: url('../img/social-tg-40.svg');
}

.yz-header__mobile-right .yz-social--size-40.yz-social--max:not(.yz-social--light) {
  background-image: url('../img/social-max-40.svg');
}

.yz-header__social .yz-social:not(.yz-social--light):hover,
.yz-header__social .yz-social:not(.yz-social--light):focus-visible,
.yz-header__mobile-right .yz-social:not(.yz-social--light):hover,
.yz-header__mobile-right .yz-social:not(.yz-social--light):focus-visible {
  opacity: 0.88;
}

/* Подвал head — Figma 1:1700: brand TG + MAX */
.yz-footer__head .yz-footer__social .yz-social--tg:not(.yz-social--light) {
  background-image: url('../img/social-tg-hover.svg');
}

.yz-footer__head .yz-footer__social .yz-social--max:not(.yz-social--light) {
  background-image: url('../img/social-max-hover.svg');
}

.yz-footer__head .yz-footer__social .yz-social:not(.yz-social--light):hover,
.yz-footer__head .yz-footer__social .yz-social:not(.yz-social--light):focus-visible {
  opacity: 0.88;
}

/* OK — Light / Hover (колонка подвала, Figma 1:5342) */
.yz-social--ok.yz-social--light {
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url('../img/footer-social-ok.svg');
  background-size: 14px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.yz-social--ok.yz-social--light:hover,
.yz-social--ok.yz-social--light:focus-visible {
  background-color: #f70;
  background-image: url('../img/social-ok-hover.svg');
}

.yz-social--ok.yz-social--light:active {
  background-color: #e56800;
}

/* YouTube — Light / Hover */
.yz-social--youtube.yz-social--light {
  background-image: url('../img/social-youtube.svg');
}

.yz-social--youtube.yz-social--light:hover,
.yz-social--youtube.yz-social--light:focus-visible {
  background-image: url('../img/social-youtube-hover.svg');
  background-size: 100% 100%;
}

/* VK — Light / Hover */
.yz-social--vk.yz-social--light {
  background-image: url('../img/social-vk.svg');
}

.yz-social--vk.yz-social--light:hover,
.yz-social--vk.yz-social--light:focus-visible {
  background-image: url('../img/social-vk-hover.svg');
  background-size: 100% 100%;
}

/* ── User / LK icon ── */
.yz-header__user {
  transition: border-color var(--yz-transition), background-color var(--yz-transition);
}

.yz-header__user:hover {
  border-color: var(--yz-blue);
  background: var(--yz-blue-100);
}

/* ── Footer column links ── */
.yz-footer__links a {
  transition: color var(--yz-transition);
}

/* ── Loading state — Figma Primary/Secondary Loading ── */
.yz-header__btn.is-loading,
.yz-footer__btn.is-loading,
.yz-error-page__btn.is-loading,
.yz-form-result__btn.is-loading,
.yz-callback-modal__submit.is-loading,
.yz-booking-modal__submit.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.yz-header__btn.is-loading::after,
.yz-footer__btn.is-loading::after,
.yz-error-page__btn.is-loading::after,
.yz-form-result__btn.is-loading::after,
.yz-callback-modal__submit.is-loading::after,
.yz-booking-modal__submit.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yz-spin 0.7s linear infinite;
}

.yz-form-result__btn--ghost.is-loading::after,
.yz-error-page__btn--ghost.is-loading::after,
.yz-nav-menu__btn--ghost.is-loading::after {
  border-color: rgba(58, 149, 191, 0.25);
  border-top-color: var(--yz-blue);
}

@keyframes yz-spin {
  to { transform: rotate(360deg); }
}