/* === SMVI activators (icon/text) — themable via CSS variables === */

/* Глобальные дефолты (переопределяются в :root, теме или на кнопке классом) */
:root{
  /* Размеры/форма */
  --smvi-ico-size:             48px;      /* диаметр круглого фона */
  --smvi-ico-pad:              12px;      /* внутренний отступ */
  --smvi-ico-radius:           9999px;    /* круг */
  --smvi-ico-svg-size:         24px;      /* размер svg */
  
  /* базовый цвет (RGB) и альфа 0--1 */
  --smvi-ico-bg-color: 255 255 255;  /* цвет RGB */
  --smvi-ico-bg-alpha: 0;            /* 0 = прозрачно, 1 = непрозрачно */

  /* Состояние: Обычное */
  --smvi-ico-bg:               rgb(var(--smvi-ico-bg-color) / var(--smvi-ico-bg-alpha));   /* фон */
  --smvi-ico-border:           #025BD6;    /* бордер */
  --smvi-ico-color:            #025BD6;    /* цвет иконки (mask-режим) */

  /* Состояние: Hover/Focus */
  --smvi-ico-bg-hover:         #025BD6;
  --smvi-ico-border-hover:     #025BD6;
  --smvi-ico-color-hover:      #FFFFFF;

  /* Состояние: Active  */
  --smvi-ico-bg-active:        #025BD6;
  --smvi-ico-border-active:    #025BD6;
  --smvi-ico-color-active:     #FFFFFF;

  /* Пути к SVG для mask-режима */
  --smvi-ico-mask-not: url('../img/accessibility-icon-notactive.svg');
  --smvi-ico-mask-act: url('../img/accessibility-icon-active.svg');

  /* TEXT-триггер */
  --smvi-text-bg:              #025BD6;
  --smvi-text-color:           #ffffff;
  --smvi-text-border:          #ffffff;

  --smvi-text-bg-hover:        #ffffff;
  --smvi-text-border-hover:    #ffffff;
  --smvi-text-color-hover:     #2563eb;   

  --smvi-text-bg-active:       #ffffff;
  --smvi-text-border-active:   #ffffff;
  --smvi-text-color-active:    #2563eb;

  --smvi-text-radius:          50px;
  --smvi-text-pad-y:           12px;
  --smvi-text-pad-x:           50px;
  --smvi-text-weight:          400;
  --smvi-text-focus-ring:      0 0 0 3px rgba(37,99,235,.25);
}

/* ================= ICON trigger ================= */

.smvi-ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; cursor:pointer;
  vertical-align:middle; line-height:1; color: inherit;
}
.smvi-ico-btn:active .smvi-ico-bg{ transform: translateY(1px); }

.smvi-ico-bg{
  width:var(--smvi-ico-size);
  height:var(--smvi-ico-size);
  padding:var(--smvi-ico-pad);
  border-radius:var(--smvi-ico-radius);
  background:var(--smvi-ico-bg);
  border:1px solid var(--smvi-ico-border);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s, transform .06s;
}
.smvi-ico-btn:hover .smvi-ico-bg,
.smvi-ico-btn:focus .smvi-ico-bg{
  background:var(--smvi-ico-bg-hover);
  border-color:var(--smvi-ico-border-hover);
}
.smvi-ico-btn.is-active .smvi-ico-bg{
  background:var(--smvi-ico-bg-active);
  border-color:var(--smvi-ico-border-active);
}

/* Изображение SVG как <img> (если не используем mask) */
.smvi-ico-svg{ width:var(--smvi-ico-svg-size); height:var(--smvi-ico-svg-size); display:block; }

/* ================= ICON trigger — MASK режим (перекраска иконки через CSS) =================
   Чтобы включить — добавь в шорткод класс smvi-ico--mask
   [smvi_icon class="smvi-ico--mask"]
*/

.smvi-ico-btn.smvi-ico--mask .smvi-ico-svg{ display:none; }
.smvi-ico-btn.smvi-ico--mask .smvi-ico-bg::before{
  content:"";
  width:var(--smvi-ico-svg-size); height:var(--smvi-ico-svg-size);
  display:block;
  background-color: var(--smvi-ico-color); 
  -webkit-mask: var(--smvi-ico-mask-not) no-repeat center / contain;
          mask: var(--smvi-ico-mask-not) no-repeat center / contain;
}
.smvi-ico-btn.smvi-ico--mask:hover .smvi-ico-bg::before,
.smvi-ico-btn.smvi-ico--mask:focus .smvi-ico-bg::before{
  background-color: var(--smvi-ico-color-hover);
}
.smvi-ico-btn.smvi-ico--mask.is-active .smvi-ico-bg::before{
  background-color: var(--smvi-ico-color-active);
  -webkit-mask: var(--smvi-ico-mask-act) no-repeat center / contain;
          mask: var(--smvi-ico-mask-act) no-repeat center / contain;
}

/* Пресеты размеров */
.smvi-ico-btn--sm  { --smvi-ico-size:40px; --smvi-ico-pad:8px; }
.smvi-ico-btn--lg  { --smvi-ico-size:56px; --smvi-ico-pad:16px; }
.smvi-ico-btn--xl  { --smvi-ico-size:64px; --smvi-ico-pad:20px; }

/* ================= TEXT trigger ================= */

.smvi-activator-text{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:var(--smvi-text-pad-y) var(--smvi-text-pad-x);
  min-height:36px;
  background:var(--smvi-text-bg);
  color:var(--smvi-text-color);
  border:1px solid var(--smvi-text-border);
  border-radius:var(--smvi-text-radius);
  font-weight:var(--smvi-text-weight);
  line-height:1; text-decoration:none; cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
}
.smvi-activator-text:hover,
.smvi-activator-text:focus{
  background:var(--smvi-text-bg-hover);
  border-color:var(--smvi-text-border-hover);
  color:var(--smvi-text-color-hover);          
}
.smvi-activator-text:focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--smvi-text-focus-ring);
}
.smvi-activator-text:active{ transform: translateY(1px); }
.smvi-activator-text.is-active,
.smvi-activator-text[aria-pressed="true"]{
  background:var(--smvi-text-bg-active);
  border-color:var(--smvi-text-border-active);
  color:var(--smvi-text-color-active);          
}
.smvi-activator-text .smvi-label{ white-space:nowrap; }

/* Хелперы позиционирования в шапке */
.site-header .smvi-ico-btn,
.main-header-bar .smvi-ico-btn{
  align-self:center;
  margin-block:auto;
}

/* ====================================================================== */
/* === Иконка [smvi_icon] подстройка иконки к активному цветовому режиму. Работает только в mask-режиме. === */
/* ====================================================================== */

/* 1) Когда активен любой smvi-theme-*, используем currentColor для иконки и бордера круга */
body[class*="smvi-theme-"] .smvi-ico-btn{ color: inherit !important; }
body[class*="smvi-theme-"] .smvi-ico-btn .smvi-ico-bg{ border-color: currentColor !important; }
body[class*="smvi-theme-"] .smvi-ico-btn.smvi-ico--mask .smvi-ico-bg::before{
  background-color: currentColor !important;
}
/* Активное состояние — иконка по текущему цвету схемы */
body[class*="smvi-theme-"] .smvi-ico-btn.smvi-ico--mask.is-active .smvi-ico-bg::before{
  background-color: currentColor !important;
  -webkit-mask: var(--smvi-ico-mask-act) no-repeat center / contain;
          mask: var(--smvi-ico-mask-act) no-repeat center / contain;
}

/* 2) Явные соответствия схемам (если тема где-то ломает inherit) */
body.smvi-theme-bw   .smvi-ico-btn{ color:#000000 !important; }
body.smvi-theme-wb   .smvi-ico-btn{ color:#ffffff !important; }
body.smvi-theme-blue .smvi-ico-btn{ color:#1e3a8a !important; }
body.smvi-theme-brown.smvi-theme-brown .smvi-ico-btn{ color:#5a3e2b !important; }
body.smvi-theme-green .smvi-ico-btn{ color:#10b981 !important; }

/* 3) Защита круга от «жёсткой перекраски» сайта в режимах схем (сохраняем дефолты) */
body[class*="smvi-theme-"] .smvi-ico-btn .smvi-ico-bg{
  background:var(--smvi-ico-bg) !important;
  border-color: currentColor !important; 
}
body[class*="smvi-theme-"] .smvi-ico-btn:hover .smvi-ico-bg,
body[class*="smvi-theme-"] .smvi-ico-btn:focus .smvi-ico-bg{
  background:var(--smvi-ico-bg-hover) !important;
}
body[class*="smvi-theme-"] .smvi-ico-btn.is-active .smvi-ico-bg{
  background:var(--smvi-ico-bg-active) !important;
  /* border-color остаётся currentColor */
}