/* NFM 2026-11: shared form states (kv-forms.js). Loaded after front/dist/css/index.css. */

/* Error text under a field. .input is a reversed flex column, so the text (its first child) is shown at the bottom. */
.kv-field-error,
.kv-form-message {
  color: #c41230;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 6px;
}

.kv-form-message {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #c41230;
  border-radius: 6px;
  background: rgba(196, 18, 48, 0.05);
}

.input.kv-has-error .input__label {
  color: #c41230;
}

label.checkbox.kv-has-error .checkbox__text,
label.file.kv-has-error .file__text {
  color: #c41230;
}

.g-recaptcha.error > div {
  outline: 1px solid #c41230;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Submit in progress: no second click, visible state. */
button[type="submit"].is-sending,
button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* Success popup: how to reach the manager right away. */
.kv-success-contacts {
  margin-top: 12px;
}

.kv-success-phone {
  color: #c41230;
  font-weight: 600;
  white-space: nowrap;
}

.kv-success-hours {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.8;
}

/* iOS Safari zooms into any field with a font smaller than 16px. */
@media only screen and (max-width: 767px) {
  .input__input,
  .input__textarea,
  .input__input--h44,
  .popup__form input,
  .popup__form textarea,
  .popup__form select,
  .contacts__form input,
  .contacts__form textarea {
    font-size: 16px;
  }
}

/* ---------- TZ 4.1: call button in the mobile header (opens the callback popup) ---------- */
button.header__btn {
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0;
}
.header__btn--call {
  display: none;
}
@media only screen and (max-width: 1200px) {
  .header__btn--call {
    display: flex;
    min-width: 44px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
.kv-callback-phone {
  margin: -6px 0 16px;
}

/* ---------- TZ 4.2: sticky «Get a price» bar on product pages (phones only) ---------- */
.kv-sticky-cta {
  display: none;
}
@media only screen and (max-width: 767px) {
  .kv-sticky-cta:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100; /* over the product tab arrows (100, earlier in the markup), under the popups (101) */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  }
  .kv-sticky-cta__price {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    font-family: inherit;
  }
  .kv-sticky-cta__call {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #c41230;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .kv-sticky-cta__call svg {
    fill: #c41230;
  }
  body.kv-has-sticky-cta {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
/* Narrow phones (320–399px): the logo and the buttons shrink a little to make room for the call button. */
@media only screen and (max-width: 399px) {
  .header__logo {
    flex: 0 1 140px;
    max-width: 140px;
    min-width: 0;
  }
  .header__btn {
    font-size: 11px;
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* TZ 3.9: «Get a price» next to «More» on the product cards of category and search pages. */
.card__btn-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.card__btn-box .card__btn {
  padding-left: 28px;
  padding-right: 28px;
  font-family: inherit;
  cursor: pointer;
}
.card__btn--price {
  background: #c41230;
  border-color: #c41230;
  color: #fff;
}
@media only screen and (min-width: 1025px) {
  .card__btn--price:hover {
    background: #a30f28;
    border-color: #a30f28;
  }
}
.card__btn--price:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.kv-price-product {
  margin: -10px 0 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: #c41230;
}
.kv-price-product[hidden] {
  display: none;
}

/* TZ 5.1: the product gallery images sit in <picture> (WebP); a deferred slide keeps its place until it loads. */
.product__for-item picture,
.product__nav-item picture {
  display: block;
}
.product__for-item img {
  height: auto;
}
.product__for-item img.kv-deferred {
  background: #fff; /* its aspect ratio is set inline from the theme's popup size */
}

/* TZ 4.4: on phones and tablets the contacts in the menu drawer get 44px touch targets
   (they were 19-21px high text links). The «callback» link keeps its look and gets a larger invisible hit area. */
@media only screen and (max-width: 1200px) {
  .header__contacts-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .header__contacts-btn {
    position: relative;
  }
  .header__contacts-btn::after {
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -8px;
    right: -8px;
  }
  .header__btn {
    min-width: 44px;
  }
}

/* WebP for card images: the <picture> wrapper takes no box, so the card layout stays as it was. */
.card__img > picture,
.catalog-category__img > picture,
.brands__item-img > picture,
.product__tabs-for-img > picture {
  display: contents;
}