/* Общие элементы корзины (ТЗ 4): кнопка в шапке, уведомления, счётчик количества, кнопки, поля.
   Подключается на всех страницах. Размеры и цвета — из макета Figma «ВСП · Корзина · компоненты и состояния». */

:root {
  --vsp-ink: #0d0d0d;
  --vsp-yellow: #ffe02b;
  --vsp-yellow-h: #ffd000;
  --vsp-dark-h: #2a2a2a;
  --vsp-panel: #1c1c1c;
  --vsp-grey: #f1f1f1;
  --vsp-bg: #f0f0f0;
  --vsp-red: #e5484d;
  --vsp-red-dark: #ff6b6f;
  --vsp-warn: #fff6bf;
  --vsp-head: 'Unbounded', 'Jost', 'Segoe UI', Tahoma, sans-serif;
  --vsp-text: 'Jost', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- кнопка корзины в шапке ---------- */

.vsp-hcart {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  font-family: var(--vsp-text);
  color: #fff;
  transition: background-color .15s;
}
.vsp-hcart__icon { display: block; background: center / contain no-repeat; }
.vsp-hcart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1;
}

.vsp-hcart--desktop {
  height: 44px;
  margin: -5px 0 0 24px;
  padding: 10px 10px 10px 16px;
  gap: 10px;
  background: var(--vsp-ink);
  border-radius: 40px;
}
.vsp-hcart--desktop:hover { background: var(--vsp-dark-h); color: #fff; }
.vsp-hcart--desktop .vsp-hcart__icon { width: 20px; height: 20px; background-image: url(../../image/premium/ui-cart-white.svg); background-size: 15.33px 17px; }
.vsp-hcart__text { font-size: 16px; font-weight: 500; }
.vsp-hcart--desktop .vsp-hcart__count {
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  border-radius: 12px;
  font-size: 13px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.vsp-hcart--desktop.is-filled .vsp-hcart__count { background: var(--vsp-yellow); color: var(--vsp-ink); }

.vsp-hcart--mobile {
  width: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 40px;
  background: var(--vsp-grey);
}
.vsp-hcart--mobile .vsp-hcart__icon { width: 22px; height: 22px; background-image: url(../../image/premium/ui-cart-dark.svg); background-size: 16.67px 18.5px; }
.vsp-hcart--mobile .vsp-hcart__count {
  position: absolute;
  top: -6px;
  left: 30px;
  height: 20px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 11px;
  background: #fff;
  border: 2px solid rgba(13, 13, 13, .25);
  color: var(--vsp-ink);
}
.vsp-hcart--mobile.is-filled .vsp-hcart__count { background: var(--vsp-yellow); border-color: #fff; }
.vsp-hcart--mobile.is-big .vsp-hcart__count { left: 18px; }

header .bottom .wrap { align-items: flex-start; }
header .bottom #search { margin-left: 24px; flex-shrink: 0; width: 170px; }
header #search .search-field { max-width: 150px; }
header .bottom nav { flex: 1 1 auto; min-width: 0; max-width: none !important; }
.header_mobile .head_top .vsp-hcart--mobile { margin-right: auto; margin-left: 4px; }

/* Меню, поиск и корзина без наложений (правки 03.11): на средних ширинах корзина — значок со счётчиком,
   ниже 1200 px включается существующая мобильная шапка (меню не помещается в одну полосу). */
@media (max-width: 1599px) {
  .vsp-hcart--desktop { padding: 10px 10px 10px 14px; }
  .vsp-hcart--desktop .vsp-hcart__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1199px) {
  .header_mobile { display: block; width: 100%; height: 86px; padding-top: 13px; background: #ffe02b; position: relative; top: 0; z-index: 50; }
  #header { display: none; }
}

.vsp-hcart:focus-visible,
.vsp-btn:focus-visible,
.vsp-qty button:focus-visible,
.vsp-toast button:focus-visible,
.vsp-toast a:focus-visible {
  outline: 3px solid var(--vsp-ink);
  outline-offset: 2px;
}
.vsp-btn--dark:focus-visible,
.vsp-hcart--desktop:focus-visible,
.vsp-toast a:focus-visible,
.vsp-toast button:focus-visible { outline-color: var(--vsp-yellow); }

/* ---------- кнопки ---------- */

.vsp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 66px;
  padding: 18px 32px;
  border: 0;
  border-radius: 60px;
  font: 600 18px/1.2 var(--vsp-text);
  color: var(--vsp-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.vsp-btn--yellow { background: var(--vsp-yellow); }
.vsp-btn--yellow:hover { background: var(--vsp-yellow-h); color: var(--vsp-ink); }
.vsp-btn--dark { background: var(--vsp-ink); color: #fff; }
.vsp-btn--dark:hover { background: var(--vsp-dark-h); color: #fff; }
.vsp-btn--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vsp-ink); }
.vsp-btn--outline:hover { background: var(--vsp-yellow); color: var(--vsp-ink); }
.vsp-btn[disabled],
.vsp-btn.is-disabled { opacity: .4; cursor: default; pointer-events: none; }
.vsp-btn--grey,
.vsp-btn--grey:hover { background: #cfcfcf; color: #7a7a7a; cursor: default; }

.vsp-btn__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  font: 600 15px/1 var(--vsp-text);
  background: var(--vsp-ink);
  color: var(--vsp-yellow);
}
.vsp-btn--dark .vsp-btn__circle { background: var(--vsp-yellow); color: var(--vsp-ink); }

.vsp-btn__icon { display: inline-block; flex-shrink: 0; background: center no-repeat; }
.vsp-btn__icon--cart17 { width: 17px; height: 17px; background-image: url(../../image/premium/ui-cart-17.svg); }
.vsp-btn__icon--cart18 { width: 18px; height: 18px; background-image: url(../../image/premium/cart-18.svg); }
.vsp-btn__icon--cart18w { width: 18px; height: 18px; background-image: url(../../image/premium/ui-cart-btn-white.svg); }

/* ---------- счётчик количества ---------- */

.vsp-qty { display: flex; flex-direction: column; gap: 8px; }
.vsp-qty__label { font: 400 14px/1.3 var(--vsp-text); color: rgba(13, 13, 13, .6); }
.vsp-qty__ctrl {
  display: flex;
  align-items: center;
  width: max-content;
  height: 48px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .16);
}
.vsp-qty button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: center / 18px 18px no-repeat;
  cursor: pointer;
}
.vsp-qty__minus { background-image: url(../../image/premium/ui-minus.svg) !important; }
.vsp-qty__plus { background-image: url(../../image/premium/ui-plus.svg) !important; }
.vsp-qty__minus:disabled { background-image: url(../../image/premium/ui-minus-disabled.svg) !important; cursor: default; }
.vsp-qty__plus:disabled { background-image: url(../../image/premium/ui-plus-disabled.svg) !important; cursor: default; }
.vsp-qty input {
  width: 64px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: 600 18px/1 var(--vsp-text);
  color: var(--vsp-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.vsp-qty input::-webkit-outer-spin-button,
.vsp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vsp-qty input:focus { outline: none; }
.vsp-qty__ctrl:focus-within { box-shadow: inset 0 0 0 2px var(--vsp-yellow); }
.vsp-qty__error { display: none; font: 400 13px/1.3 var(--vsp-text); color: var(--vsp-red); white-space: nowrap; }
.vsp-qty.is-error .vsp-qty__ctrl { box-shadow: inset 0 0 0 2px var(--vsp-red); }
.vsp-qty.is-error input { color: var(--vsp-red); }
.vsp-qty.is-error .vsp-qty__error { display: block; }
.vsp-qty.is-disabled .vsp-qty__ctrl { background: var(--vsp-grey); }
.vsp-qty.is-disabled input { color: rgba(13, 13, 13, .35); }

/* ---------- уведомления ---------- */

.vsp-toasts {
  position: fixed;
  z-index: 10050;
  top: 158px;
  right: max(16px, calc((100vw - 1280px) / 2));
  width: 440px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.vsp-toast {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background: var(--vsp-ink);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .22));
  pointer-events: auto;
  font-family: var(--vsp-text);
  animation: vsp-toast-in .18s ease-out;
}
@keyframes vsp-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vsp-toast { animation: none; } }
.vsp-toast__top { display: flex; align-items: flex-start; gap: 14px; }
.vsp-toast__icon { width: 26px; height: 26px; flex-shrink: 0; background: center no-repeat; }
.vsp-toast__icon--ok { background-image: url(../../image/premium/ui-check-circle-yellow.svg); }
.vsp-toast__icon--trash { background-image: url(../../image/premium/ui-trash-toast.svg); }
.vsp-toast__icon--alert { background-image: url(../../image/premium/ui-alert-toast.svg); }
.vsp-toast__text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vsp-toast__title { font-size: 18px; font-weight: 600; color: #fff; }
.vsp-toast__line { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .7); overflow-wrap: anywhere; }
.vsp-toast__close {
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 22px;
  background: url(../../image/premium/ui-close-toast.svg) center / 20px 20px no-repeat;
  cursor: pointer;
}
.vsp-toast__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vsp-toast__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 40px;
  font: 600 15px/1 var(--vsp-text);
  text-decoration: none;
  cursor: pointer;
}
.vsp-toast__btn--yellow { background: var(--vsp-yellow); color: var(--vsp-ink); }
.vsp-toast__btn--yellow:hover { background: var(--vsp-yellow-h); color: var(--vsp-ink); }
.vsp-toast__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.vsp-toast__btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.vsp-toast__btn--undo::before { content: ''; width: 18px; height: 18px; background: url(../../image/premium/ui-undo.svg) center no-repeat; }

@media (max-width: 767px) {
  .vsp-toasts { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; max-width: none; }
  .vsp-toast { padding: 18px; gap: 14px; }
}

/* ---------- поля форм (тёмные формы: подбор, заявка, консультация) ---------- */

.vsp-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vsp-field__label { font: 400 14px/1.4 var(--vsp-text); color: rgba(255, 255, 255, .7); }
.vsp-field input,
.vsp-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  font: 400 17px/1.4 var(--vsp-text);
  color: var(--vsp-ink);
  outline: none;
  box-shadow: none;
  transition: box-shadow .15s;
}
.vsp-field textarea { height: 132px; padding: 16px 18px; resize: vertical; }
.vsp-field input::placeholder,
.vsp-field textarea::placeholder { color: rgba(13, 13, 13, .45); opacity: 1; }
.vsp-field input:focus,
.vsp-field textarea:focus { box-shadow: inset 0 0 0 3px var(--vsp-yellow); }
.vsp-field.is-error input,
.vsp-field.is-error textarea,
.vsp-field .wpcf7-not-valid { box-shadow: inset 0 0 0 3px var(--vsp-red); }
.vsp-field__hint { font: 400 13px/1.35 var(--vsp-text); color: rgba(255, 255, 255, .5); }
.vsp-field__error,
.vsp-field .wpcf7-not-valid-tip,
.vsp-consent .wpcf7-not-valid-tip { display: block; font: 400 13px/1.35 var(--vsp-text); color: var(--vsp-red-dark); }
.vsp-field.is-error .vsp-field__hint { display: none; }
.vsp-field input:disabled,
.vsp-field textarea:disabled,
.is-sending .vsp-field input,
.is-sending .vsp-field textarea { opacity: .55; }

.vsp-consent { display: flex; flex-direction: column; gap: 8px; }
.vsp-consent label,
.vsp-consent .wpcf7-list-item-label { font: 400 14px/1.4 var(--vsp-text); color: rgba(255, 255, 255, .8); }
.vsp-consent a { color: inherit; text-decoration: underline; text-decoration-skip-ink: none; }
.vsp-consent .wpcf7-list-item { margin: 0; }
.vsp-consent label,
.vsp-consent .wpcf7-list-item label { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer; }
.vsp-consent .wpcf7-list-item { display: block; }
.vsp-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vsp-consent input[type="checkbox"]:checked { background: var(--vsp-yellow); }
.vsp-consent input[type="checkbox"]:checked::after { content: '✓'; font: 600 14px/1 var(--vsp-text); color: var(--vsp-ink); }
.vsp-consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--vsp-yellow); outline-offset: 2px; }
.vsp-consent.is-error input[type="checkbox"],
.vsp-consent .wpcf7-not-valid input[type="checkbox"] { box-shadow: inset 0 0 0 2px var(--vsp-red); }

/* ---------- формы Contact Form 7 на тёмном фоне (подбор, консультация) ---------- */

.vsp-form .wpcf7 { width: 100%; }
.vsp-form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.vsp-form .wpcf7-form > p { margin: 0; }
.vsp-form .wpcf7-form br { display: none; }
.vsp-form .wpcf7-form-control-wrap { display: block; }
.vsp-form .vspf-row { display: flex; gap: 16px; }
.vsp-form .vspf-row > * { flex: 1; }
.vsp-form .vspf-submit {
  width: 100%;
  min-height: 66px;
  padding: 18px 32px;
  border: 0;
  border-radius: 60px;
  background: var(--vsp-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 600 18px/1.2 var(--vsp-text);
  color: var(--vsp-ink);
  cursor: pointer;
  transition: background-color .15s;
}
.vsp-form .vspf-submit:hover { background: var(--vsp-yellow-h); }
.vsp-form .vspf-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vsp-form .wpcf7-form.submitting .vspf-submit { background: rgba(255, 224, 43, .5); pointer-events: none; }
.vsp-form .wpcf7-form.submitting .vsp-field input,
.vsp-form .wpcf7-form.submitting .vsp-field textarea { opacity: .55; pointer-events: none; }
.vsp-form .wpcf7-spinner { display: none; }
.vsp-form .wpcf7-response-output { display: none; margin: 0 !important; }
.vsp-form .wpcf7-form.failed .wpcf7-response-output,
.vsp-form .wpcf7-form.aborted .wpcf7-response-output,
.vsp-form .wpcf7-form.spam .wpcf7-response-output {
  display: block;
  padding: 16px !important;
  border: 1px solid var(--vsp-red) !important;
  border-radius: 14px;
  background: rgba(229, 72, 77, .15);
  font: 400 16px/1.42 var(--vsp-text);
  color: #fff;
}
.vsp-form .vspf-err-tel { display: block; margin-top: 4px; font: 700 20px/1.12 var(--vsp-head); color: var(--vsp-yellow) !important; text-decoration: none; }
.vsp-form .wpcf7-form.sent .wpcf7-response-output,
.vsp-form .wpcf7-form.invalid .wpcf7-response-output { display: none !important; }
.vsp-form .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.vsp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}