/* Copyright (C) 2025-2026 adcitymag.ru */
/* RAL: примерка цвета. Цвет задаёт одна переменная --ral на сцене; тени и блики смешиваются с ним через mix-blend-mode. */
.adcx-rs { margin: 2rem 0; }
.adcx-rs__tabs, .adcx-rs__colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.adcx-rs__tab, .adcx-rs__c { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--borderColor, #e3e4ea); border-radius: var(--adcm-r-pill, 999px); background: var(--lightColor, #fff); color: var(--mainColor, #16202e); font: inherit; font-size: var(--t-ui, .88rem); cursor: pointer; white-space: nowrap; }
.adcx-rs__tab[aria-pressed="true"] { background: var(--mainColor, #16202e); border-color: var(--mainColor, #16202e); color: var(--lightColor, #fff); }
.adcx-rs__c { padding-left: 6px; }
.adcx-rs__c i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: 0 0 auto; }
.adcx-rs__c[aria-pressed="true"] { border-color: var(--mainColor, #16202e); box-shadow: 0 0 0 1px var(--mainColor, #16202e); }
.adcx-rs__tab:focus-visible, .adcx-rs__c:focus-visible { outline: 2px solid var(--hoverColor, #2849a3); outline-offset: 2px; }

/* место под сцену занято сразу: при подгрузке ничего не прыгает */
.adcx-rs__stage { position: relative; aspect-ratio: 4 / 3; max-width: 760px; margin: 0 0 12px; border-radius: var(--adcm-r-lg, 16px); overflow: hidden; background: var(--greyBg, #f2f3f6); isolation: isolate; }
.adcx-rs__svg { display: block; width: 100%; height: 100%; }
.adcx-rs__svg .p { fill: var(--ral, #888); transition: fill .18s ease; }
.adcx-rs__svg .sh { fill: #000; opacity: .16; mix-blend-mode: multiply; }
.adcx-rs__svg .hl { fill: #fff; opacity: .22; mix-blend-mode: screen; }
.adcx-rs__stage.is-loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .5); }
.adcx-rs__now { margin: 0; font-size: var(--t-meta, .8rem); color: var(--adcmMuted, var(--greyColor, #666)); }

@media (pointer: coarse) { .adcx-rs__tab, .adcx-rs__c { min-height: 44px; } }
/* телефон: виды и цвета листаются лентой в одну строку */
@media (max-width: 560px) {
  .adcx-rs__tabs, .adcx-rs__colors { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); }
  .adcx-rs__tabs::-webkit-scrollbar, .adcx-rs__colors::-webkit-scrollbar { display: none; }
  .adcx-rs__stage { border-radius: var(--adcm-r-md, 12px); }
}
@media (prefers-reduced-motion: reduce) { .adcx-rs__svg .p { transition: none; } }
html[data-theme="dark"] .adcx-rs__tab, html[data-theme="dark"] .adcx-rs__c { background: var(--darkCard, #1b1f27); border-color: var(--darkBorder, #2a2f3a); color: var(--darkText, #dde3ec); }
html[data-theme="dark"] .adcx-rs__tab[aria-pressed="true"] { background: var(--darkText, #dde3ec); border-color: var(--darkText, #dde3ec); color: #0b1220; }
html[data-theme="dark"] .adcx-rs__c[aria-pressed="true"] { border-color: var(--darkText, #dde3ec); box-shadow: 0 0 0 1px var(--darkText, #dde3ec); }
@media print { .adcx-rs__tabs, .adcx-rs__colors { display: none; } }