@font-face {
  font-family: 'simple-line-icons';
  src: url('fonts/Simple-Line-Icons.woff2') format('woff2'),
       url('fonts/Simple-Line-Icons.woff') format('woff'),
       url('fonts/Simple-Line-Icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.special-settings i:before   { content: "\e09a"; }
.special-quit i:before       { content: "\e087"; }
.special-images button[value="0"] i:before { content: "\e07c"; }
.special-images button[value="1"] i:before { content: "\e032"; }

.special-settings i,
.special-quit i,
.special-images i,
i.special-audio {
  font-family: 'simple-line-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.special-panel [data-type="color"] button i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0;
}

.special-panel [data-type="color"] button[data-value="1"] i { background: #000; }
.special-panel [data-type="color"] button[data-value="2"] i { background: #fff; }
.special-panel [data-type="color"] button[data-value="3"] i { background: #062042; }
.special-panel [data-type="color"] button[data-value="4"] i { background: #f7f2e3; }
.special-panel [data-type="color"] button[data-value="5"] i { background: #032a21; }

#special {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  text-align: center;
  padding: 12px 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  line-height: 1;
  box-sizing: border-box;
}

.special-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
}

.special-panel > div {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 14px;
  border-radius: 10px;
}

.special-panel button {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.special-panel button.active {
  background: #fff;
  color: #000;
  border-color: #fff;
  font-weight: 700;
  transform: scale(1.05);
}

#special-settings-body {
  display: none;
  background: rgba(20, 20, 20, 0.98);
  color: #fff;
  padding: 16px;
  margin: 0 auto;
  max-width: 640px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font-size: 15px;
}

html.special {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

html.special.special-images-off img { display: none !important; }

@media (max-width: 560px) {
  .special-panel button { width: 40px; height: 40px; font-size: 16px; }
  body.special { margin-top: 110px; }
}

body.special { padding-top: 84px; }

/* Размер шрифта: переопределяем фиксированные px в вёрстке сайта */
html.special.special-font-size-1,
html.special.special-font-size-1 body { font-size: 16px !important; }
html.special.special-font-size-2,
html.special.special-font-size-2 body { font-size: 20px !important; }
html.special.special-font-size-3,
html.special.special-font-size-3 body { font-size: 24px !important; }

html.special body *:not(#special):not(#special *) {
  font-size: inherit !important;
}

html.special body h1 { font-size: 2.25em !important; }
html.special body h2 { font-size: 1.875em !important; }
html.special body h3 { font-size: 1.5em !important; }
html.special body h4 { font-size: 1.25em !important; }
html.special body h5 { font-size: 1.125em !important; }
html.special body h6 { font-size: 1em !important; }

html.special.special-font-family-1 body,
html.special.special-font-family-1 body *:not(#special):not(#special *) {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

html.special.special-font-family-2 body,
html.special.special-font-family-2 body *:not(#special):not(#special *) {
  font-family: "Times New Roman", Times, serif !important;
}

html.special.special-line-height-1,
html.special.special-line-height-1 body,
html.special.special-line-height-1 body *:not(#special):not(#special *) { line-height: 1.2 !important; }
html.special.special-line-height-2,
html.special.special-line-height-2 body,
html.special.special-line-height-2 body *:not(#special):not(#special *) { line-height: 1.5 !important; }
html.special.special-line-height-3,
html.special.special-line-height-3 body,
html.special.special-line-height-3 body *:not(#special):not(#special *) { line-height: 1.8 !important; }

html.special.special-letter-spacing-1,
html.special.special-letter-spacing-1 body,
html.special.special-letter-spacing-1 body *:not(#special):not(#special *) { letter-spacing: normal !important; }
html.special.special-letter-spacing-2,
html.special.special-letter-spacing-2 body,
html.special.special-letter-spacing-2 body *:not(#special):not(#special *) { letter-spacing: 0.06em !important; }
html.special.special-letter-spacing-3,
html.special.special-letter-spacing-3 body,
html.special.special-letter-spacing-3 body *:not(#special):not(#special *) { letter-spacing: 0.12em !important; }

/* Цветовые темы */
html.special.special-color-1,
html.special.special-color-1 body {
  background: #000 !important;
  color: #fff !important;
}

html.special.special-color-2,
html.special.special-color-2 body {
  background: #fff !important;
  color: #000 !important;
}

html.special.special-color-3,
html.special.special-color-3 body {
  background: #062042 !important;
  color: #fff !important;
}

html.special.special-color-4,
html.special.special-color-4 body {
  background: #f7f2e3 !important;
  color: #000 !important;
}

html.special.special-color-5,
html.special.special-color-5 body {
  background: #032a21 !important;
  color: #d2f5e3 !important;
}

html.special.special-color-1 body *:not(#special):not(#special *),
html.special.special-color-2 body *:not(#special):not(#special *),
html.special.special-color-3 body *:not(#special):not(#special *),
html.special.special-color-4 body *:not(#special):not(#special *),
html.special.special-color-5 body *:not(#special):not(#special *) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html.special.special-color-1 body *:not(#special):not(#special *) { color: #fff !important; }
html.special.special-color-2 body *:not(#special):not(#special *) { color: #000 !important; }
html.special.special-color-3 body *:not(#special):not(#special *) { color: #fff !important; }
html.special.special-color-4 body *:not(#special):not(#special *) { color: #000 !important; }
html.special.special-color-5 body *:not(#special):not(#special *) { color: #d2f5e3 !important; }

html.special.special-color-1 body .header,
html.special.special-color-1 body .header_inner,
html.special.special-color-1 body .footer,
html.special.special-color-1 body .menu-mob,
html.special.special-color-1 body section,
html.special.special-color-1 body .content,
html.special.special-color-1 body .gift .item,
html.special.special-color-1 body .popup {
  background-color: #000 !important;
}

html.special.special-color-2 body .header,
html.special.special-color-2 body .header_inner,
html.special.special-color-2 body .footer,
html.special.special-color-2 body .menu-mob,
html.special.special-color-2 body section,
html.special.special-color-2 body .content,
html.special.special-color-2 body .gift .item,
html.special.special-color-2 body .popup {
  background-color: #fff !important;
}

html.special.special-color-3 body .header,
html.special.special-color-3 body .header_inner,
html.special.special-color-3 body .footer,
html.special.special-color-3 body .menu-mob,
html.special.special-color-3 body section,
html.special.special-color-3 body .content,
html.special.special-color-3 body .gift .item,
html.special.special-color-3 body .popup {
  background-color: #062042 !important;
}

html.special.special-color-4 body .header,
html.special.special-color-4 body .header_inner,
html.special.special-color-4 body .footer,
html.special.special-color-4 body .menu-mob,
html.special.special-color-4 body section,
html.special.special-color-4 body .content,
html.special.special-color-4 body .gift .item,
html.special.special-color-4 body .popup {
  background-color: #f7f2e3 !important;
}

html.special.special-color-5 body .header,
html.special.special-color-5 body .header_inner,
html.special.special-color-5 body .footer,
html.special.special-color-5 body .menu-mob,
html.special.special-color-5 body section,
html.special.special-color-5 body .content,
html.special.special-color-5 body .gift .item,
html.special.special-color-5 body .popup {
  background-color: #032a21 !important;
}

html[class*="special-color"] body a:not(#special a),
body[class*="special-color"] a:not(#special a) {
  color: #ffd54f !important;
  text-decoration: underline !important;
}

html.special-images-off img,
html.special-images-off picture,
html.special-images-off svg { display: none !important; }
html.special-images-off * { background-image: none !important; }