/* common/header/css/icons.css */
/* ===== ИКОНКИ ЧЕРЕЗ CSS MASK ===== */
/* Плоские иконки только для Telegram, WhatsApp, Email - Вариант 3 */

/* Иконка каталога - ОСТАВЛЯЕМ СТАРУЮ (контурную) */
.icon-catalog {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='19' rx='2' ry='2'/%3E%3Cline x1='8' y1='9' x2='16' y2='9'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='19' rx='2' ry='2'/%3E%3Cline x1='8' y1='9' x2='16' y2='9'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
}

/* Иконка Telegram - ПЛОСКАЯ (Вариант 3) */
.icon-telegram {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.69-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.36-.49.99-.74 3.84-1.67 6.4-2.78 7.68-3.32 3.66-1.55 4.42-1.82 4.91-1.83.11 0 .35.02.51.14.13.1.17.23.18.33-.01.09 0 .3-.01.48z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.69-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.36-.49.99-.74 3.84-1.67 6.4-2.78 7.68-3.32 3.66-1.55 4.42-1.82 4.91-1.83.11 0 .35.02.51.14.13.1.17.23.18.33-.01.09 0 .3-.01.48z'/%3E%3C/svg%3E");
}

/* Иконка WhatsApp - ПЛОСКАЯ (Вариант 3) */
.icon-whatsapp {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.96.53 3.88 1.54 5.56L2 22l4.64-1.58c1.61.87 3.44 1.34 5.4 1.34 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.91-9.91-9.91zm0 18.18c-1.64 0-3.25-.44-4.65-1.27l-.33-.2-2.75.94.94-2.68-.21-.35c-.86-1.41-1.32-3.05-1.32-4.75 0-4.55 3.71-8.26 8.26-8.26s8.26 3.71 8.26 8.26-3.71 8.26-8.26 8.26z'/%3E%3Cpath d='M16.68 13.79c-.23-.12-1.37-.68-1.58-.75-.21-.08-.36-.12-.52.12-.15.24-.6.75-.73.9-.13.15-.27.17-.5.06-.23-.12-.98-.36-1.87-1.15-.69-.62-1.16-1.38-1.3-1.62-.13-.24-.01-.37.1-.49.1-.1.23-.26.35-.39.12-.13.15-.23.22-.38.07-.15.04-.28-.02-.39-.05-.12-.52-1.26-.71-1.72-.19-.46-.38-.38-.52-.39h-.44c-.15 0-.4.06-.61.27-.21.23-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.12.15 1.61 2.46 3.91 3.45 2.3.99 2.3.66 2.72.62.41-.04 1.33-.54 1.52-1.07.19-.52.19-.97.13-1.07-.05-.1-.19-.15-.41-.26z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.96.53 3.88 1.54 5.56L2 22l4.64-1.58c1.61.87 3.44 1.34 5.4 1.34 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.91-9.91-9.91zm0 18.18c-1.64 0-3.25-.44-4.65-1.27l-.33-.2-2.75.94.94-2.68-.21-.35c-.86-1.41-1.32-3.05-1.32-4.75 0-4.55 3.71-8.26 8.26-8.26s8.26 3.71 8.26 8.26-3.71 8.26-8.26 8.26z'/%3E%3Cpath d='M16.68 13.79c-.23-.12-1.37-.68-1.58-.75-.21-.08-.36-.12-.52.12-.15.24-.6.75-.73.9-.13.15-.27.17-.5.06-.23-.12-.98-.36-1.87-1.15-.69-.62-1.16-1.38-1.3-1.62-.13-.24-.01-.37.1-.49.1-.1.23-.26.35-.39.12-.13.15-.23.22-.38.07-.15.04-.28-.02-.39-.05-.12-.52-1.26-.71-1.72-.19-.46-.38-.38-.52-.39h-.44c-.15 0-.4.06-.61.27-.21.23-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.12.15 1.61 2.46 3.91 3.45 2.3.99 2.3.66 2.72.62.41-.04 1.33-.54 1.52-1.07.19-.52.19-.97.13-1.07-.05-.1-.19-.15-.41-.26z'/%3E%3C/svg%3E");
}

/* Иконка Email - ПЛОСКАЯ (Вариант 3) */
.icon-email {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Иконка бургер-меню - ОСТАВЛЯЕМ СТАРУЮ (контурную) */
.icon-menu {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* Иконка закрытия - ОСТАВЛЯЕМ СТАРУЮ (контурную) */
.icon-close {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Иконка стрелки вниз - ОСТАВЛЯЕМ СТАРУЮ (контурную) */
.icon-arrow-down {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Иконка стрелки вправо - ОСТАВЛЯЕМ СТАРУЮ (контурную) */
.icon-arrow-right {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Иконка поиска - МИНИМАЛИСТИЧНАЯ */
.icon-search {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Все иконки используют цвет текста */
.icon {
  background-color: var(--primary) !important;
}

/* Состояния при наведении */
a:hover .icon,
button:hover .icon,
.nav-link:hover .icon,
.social-icon:hover .icon,
.mobile-nav__link:hover .icon,
.mobile-submenu__link:hover .icon,
.burger-menu:hover .icon,
.search-button:hover .icon {
  background-color: var(--fourth) !important;
  transform: scale(1.1);
}