/* OK-NO UX fixes after static migration: icons, mobile menu, header usability */
html, body { max-width: 100%; overflow-x: hidden; }
.wrapper { overflow-x: clip; }
.header-logo a { display: inline-flex; align-items: center; }
.header-logo img { height: auto; max-width: min(240px, 48vw); }
.header-phones a { white-space: nowrap; }
.header-phones span img { display: block; width: 22px !important; height: 22px !important; object-fit: contain; }
.header-toggle button,
.header-phone-toggle button,
.header-search button,
.modal-mobile-close { position: relative; color: #26282B; }
.header-toggle button {
  -webkit-mask-image: url('/assets/theme/gallery-windows/images/menu.svg') !important;
  mask-image: url('/assets/theme/gallery-windows/images/menu.svg') !important;
  background-color: #26282B !important;
}
.header-phone-toggle button:before {
  -webkit-mask-image: url('/assets/theme/gallery-windows/images/phone.svg') !important;
  mask-image: url('/assets/theme/gallery-windows/images/phone.svg') !important;
  background-color: #26282B !important;
}
.header-search button,
.search-form button {
  -webkit-mask-image: url('/assets/theme/gallery-windows/images/search.svg') !important;
  mask-image: url('/assets/theme/gallery-windows/images/search.svg') !important;
}
.modal-mobile-close {
  -webkit-mask-image: url('/assets/theme/gallery-windows/images/close.svg') !important;
  mask-image: url('/assets/theme/gallery-windows/images/close.svg') !important;
  background-color: #26282B !important;
}
.header-toggle button::before,
.header-toggle button::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0;
}
.header-toggle button::before { top: 10px; box-shadow: 0 7px 0 currentColor; }
.header-toggle button::after { top: 24px; }
@supports not ((mask-image: url('/assets/theme/gallery-windows/images/menu.svg')) or (-webkit-mask-image: url('/assets/theme/gallery-windows/images/menu.svg'))) {
  .header-toggle button { background: transparent !important; }
  .header-toggle button::before,
  .header-toggle button::after { opacity: 1; }
}
.modal-mobile:not(.show) { visibility: hidden; pointer-events: none; }
.modal-mobile:not(.show) .modal-mobile-wrap { transform: translateX(110%) !important; }
.modal-mobile.show { visibility: visible; pointer-events: auto; }
@media (max-width: 1180px) {
  .header-nav { display: none !important; }
  .hide-lg { display: flex !important; }
  .header-wrap { gap: 12px; }
}
@media (max-width: 768px) {
  .header-top .lang-menu { display: none; }
  .header-bottom { display: none !important; }
  .header-right { margin-left: auto; }
  .header-logo img { max-width: 190px; }
  .header-phone-toggle { display: flex !important; }
  .header-phones { position: absolute; right: 0; top: 100%; z-index: 120; background: #fff; padding: 12px; border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 16%); }
  .header-phones:not(.active) { display: none !important; }
}
.form-message { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-weight: 600; line-height: 1.35; }
.form-message.is-success { background: #e8f7ee; color: #166534; }
.form-message.is-error { background: #fff1f2; color: #9f1239; }
form button[disabled] { opacity: .7; cursor: wait; }
