/*
 * Twenty looks for the payout tiles on the sell page, switched by `?payoutSkins`
 * (sell-runtime.js puts the choice on <html> as data-pay-skin="s2".."s20").
 *
 * Skin 1 is the page as it ships and has no rules here at all — picking it simply drops
 * the attribute. Every other skin only overrides what it needs, so a tile keeps its
 * hover, its disabled state and its tooltip whatever the look.
 *
 * The markup gives each tile `--skc-brand` (the method's own "r, g, b"), and the parts
 * carry classes: .skc-method-icon wraps the art, .skc-method-glow is the blur behind it,
 * .skc-method-coin the round plate, .skc-method-shine its top highlight, .skc-method-art
 * the logo itself, then .skc-method-label and .skc-method-fee. The plate's gradient and
 * shadow are inline, so overriding them takes !important.
 */

/* Logos are drawn white; the skins that put them on a light or transparent plate recolour
   them through currentColor. */
html[data-pay-skin] .skc-method-art svg [fill="#ffffff"],
html[data-pay-skin] .skc-method-art svg [fill="#fff"] { fill: currentColor; }

/* ---- 2 · Плоские: ровная заливка, без блика и свечения ------------------------------ */
html[data-pay-skin="s2"] .skc-method-coin {
  background: rgb(var(--skc-brand)) !important;
  box-shadow: none !important;
}
html[data-pay-skin="s2"] .skc-method-shine,
html[data-pay-skin="s2"] .skc-method-glow { display: none; }

/* ---- 3 · Контурные: кольцо и логотип в цвете бренда --------------------------------- */
html[data-pay-skin="s3"] .skc-method-coin {
  background: transparent !important;
  border: 1.5px solid rgba(var(--skc-brand), 0.6);
  box-shadow: none !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s3"] .skc-method-shine { display: none; }
html[data-pay-skin="s3"] .skc-method-glow { opacity: 0.18 !important; }

/* ---- 4 · Монохром: цвет только у выбранного ----------------------------------------- */
html[data-pay-skin="s4"] .skc-method-coin {
  background: #1c1c22 !important;
  border: 1px solid #2e2e36;
  box-shadow: none !important;
}
html[data-pay-skin="s4"] .skc-method-shine { display: none; }
html[data-pay-skin="s4"] .skc-method-glow { display: none; }
html[data-pay-skin="s4"] .skc-method[aria-pressed="true"] .skc-method-coin {
  background: rgb(var(--skc-brand)) !important;
  border-color: transparent;
}

/* ---- 5 · Светлые плашки: белый круг, логотип в родном цвете ------------------------- */
html[data-pay-skin="s5"] .skc-method-coin {
  background: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9) !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s5"] .skc-method-shine { display: none; }
html[data-pay-skin="s5"] .skc-method-glow { opacity: 0.22 !important; }

/* ---- 6 · Стекло: подложка в цвет бренда с размытием --------------------------------- */
html[data-pay-skin="s6"] .skc-method-coin {
  background: rgba(var(--skc-brand), 0.18) !important;
  border: 1px solid rgba(var(--skc-brand), 0.38);
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s6"] .skc-method-shine { opacity: 0.35; }
html[data-pay-skin="s6"] .skc-method-glow { opacity: 0.25 !important; }

/* ---- 7 · Неон: тёмная плитка, светящаяся обводка ------------------------------------ */
html[data-pay-skin="s7"] .skc-method-coin {
  background: #0b0b0f !important;
  border: 1.5px solid rgb(var(--skc-brand));
  box-shadow: 0 0 14px -2px rgba(var(--skc-brand), 0.75), inset 0 0 12px -6px rgba(var(--skc-brand), 0.9) !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s7"] .skc-method-shine { display: none; }
html[data-pay-skin="s7"] .skc-method { background: #0e0e13; }

/* ---- 8 · Акцентная полоса: цвет уходит из значка в край плитки ---------------------- */
html[data-pay-skin="s8"] .skc-method { overflow: hidden; }
html[data-pay-skin="s8"] .skc-method::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgb(var(--skc-brand));
}
html[data-pay-skin="s8"] .skc-method-coin {
  background: #17171d !important;
  border: 1px solid #2c2c34;
  box-shadow: none !important;
}
html[data-pay-skin="s8"] .skc-method-shine,
html[data-pay-skin="s8"] .skc-method-glow { display: none; }

/* ---- 9 · Строками: значок слева, название рядом ------------------------------------- */
html[data-pay-skin="s9"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s9"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 56px; gap: 10px; padding: 8px 12px; text-align: left;
}
html[data-pay-skin="s9"] .skc-method-icon { transform: scale(0.72); margin: -6px; }
html[data-pay-skin="s9"] .skc-method-label { font-size: 11.5px; }
html[data-pay-skin="s9"] .skc-method-glow { display: none; }

/* ---- 10 · Пилюли: самая низкая строка ----------------------------------------------- */
html[data-pay-skin="s10"] .skc-methods { grid-template-columns: 1fr 1fr; }
html[data-pay-skin="s10"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 42px; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; text-align: left;
}
html[data-pay-skin="s10"] .skc-method-icon { transform: scale(0.6); margin: -9px; }
html[data-pay-skin="s10"] .skc-method-label { font-size: 10px; }
html[data-pay-skin="s10"] .skc-method-glow { display: none; }
html[data-pay-skin="s10"] .skc-method-coin { box-shadow: none !important; }

/* ---- 11 · Квадраты: скруглённый квадрат вместо круга -------------------------------- */
html[data-pay-skin="s11"] .skc-method-coin {
  border-radius: 13px !important;
  background: linear-gradient(150deg, rgba(var(--skc-brand), 0.95), rgba(var(--skc-brand), 0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -10px rgba(var(--skc-brand), 0.8) !important;
}
html[data-pay-skin="s11"] .skc-method-shine { border-radius: 10px !important; }
html[data-pay-skin="s11"] .skc-method { border-radius: 14px; }

/* ---- 12 · Подпись справа: значок слева, имя крупнее, галочка справа ------------------ */
html[data-pay-skin="s12"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s12"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 60px; gap: 11px; padding: 9px 40px 9px 10px; text-align: left; border-radius: 13px;
}
html[data-pay-skin="s12"] .skc-method-icon { transform: scale(0.8); margin: -4px; }
html[data-pay-skin="s12"] .skc-method-coin {
  border-radius: 11px !important;
  background: rgba(var(--skc-brand), 0.16) !important;
  box-shadow: none !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s12"] .skc-method-shine,
html[data-pay-skin="s12"] .skc-method-glow { display: none; }
html[data-pay-skin="s12"] .skc-method-label { font-size: 12px; letter-spacing: 0.2px; }

/* ---- 13 · Подпись на плитке: логотип фоном, имя поверх внизу ------------------------ */
html[data-pay-skin="s13"] .skc-method {
  justify-content: flex-end; min-height: 104px; padding: 0; overflow: hidden;
  background: linear-gradient(170deg, rgba(var(--skc-brand), 0.3), #111116 70%);
}
html[data-pay-skin="s13"] .skc-method-icon {
  position: absolute; left: 50%; top: 30px; transform: translate(-50%, -50%) scale(1.15);
}
html[data-pay-skin="s13"] .skc-method-coin { background: transparent !important; box-shadow: none !important; }
html[data-pay-skin="s13"] .skc-method-shine { display: none; }
html[data-pay-skin="s13"] .skc-method-label {
  width: 100%; padding: 6px 8px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px);
}

/* ---- 14 · Без подложки: только логотип, крупнее ------------------------------------- */
html[data-pay-skin="s14"] .skc-method-coin {
  background: transparent !important; box-shadow: none !important;
  color: rgb(var(--skc-brand)); transform: scale(1.25);
}
html[data-pay-skin="s14"] .skc-method-shine { display: none; }
html[data-pay-skin="s14"] .skc-method-glow { opacity: 0.2 !important; }

/* ---- 15 · Цветная шапка: полоса сверху, значок нейтральный -------------------------- */
html[data-pay-skin="s15"] .skc-method { overflow: hidden; padding-top: 14px; }
html[data-pay-skin="s15"] .skc-method::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, rgb(var(--skc-brand)), rgba(var(--skc-brand), 0.25));
}
html[data-pay-skin="s15"] .skc-method-coin {
  background: #16161c !important; border: 1px solid #2a2a33; box-shadow: none !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s15"] .skc-method-shine,
html[data-pay-skin="s15"] .skc-method-glow { display: none; }

/* ---- 16 · Значок в углу: имя занимает плитку ---------------------------------------- */
html[data-pay-skin="s16"] .skc-method {
  justify-content: center; min-height: 78px; padding: 10px;
}
html[data-pay-skin="s16"] .skc-method-icon {
  position: absolute; left: 8px; top: 8px; transform: scale(0.5); transform-origin: left top;
}
html[data-pay-skin="s16"] .skc-method-coin { box-shadow: none !important; }
html[data-pay-skin="s16"] .skc-method-glow { display: none; }
html[data-pay-skin="s16"] .skc-method-label { font-size: 12px; margin-top: 10px; }

/* ---- 17 · Крупный логотип, подпись мелко ------------------------------------------- */
html[data-pay-skin="s17"] .skc-method { min-height: 104px; gap: 4px; }
html[data-pay-skin="s17"] .skc-method-icon { transform: scale(1.3); margin: 6px 0 4px; }
html[data-pay-skin="s17"] .skc-method-label {
  font-size: 9px; letter-spacing: 0.9px; color: rgba(255, 255, 255, 0.45);
}

/* ---- 18 · Инверсия выбранного: выбранный заливается цветом -------------------------- */
html[data-pay-skin="s18"] .skc-method-coin {
  background: #1a1a20 !important; border: 1px solid #2c2c35; box-shadow: none !important;
}
html[data-pay-skin="s18"] .skc-method-shine,
html[data-pay-skin="s18"] .skc-method-glow { display: none; }
html[data-pay-skin="s18"] .skc-method[aria-pressed="true"] {
  background: rgb(var(--skc-brand)) !important;
  border-color: rgb(var(--skc-brand)) !important;
}
html[data-pay-skin="s18"] .skc-method[aria-pressed="true"] .skc-method-coin {
  background: rgba(0, 0, 0, 0.22) !important; border-color: rgba(255, 255, 255, 0.35);
}
html[data-pay-skin="s18"] .skc-method[aria-pressed="true"] .skc-method-label { color: #08110c; }

/* ---- 19 · Строка с галочкой: как у маркетплейсов ------------------------------------ */
html[data-pay-skin="s19"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s19"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 54px; gap: 10px; padding: 8px 44px 8px 10px; text-align: left; border-radius: 12px;
}
html[data-pay-skin="s19"] .skc-method-icon { transform: scale(0.7); margin: -7px; }
html[data-pay-skin="s19"] .skc-method-coin { box-shadow: none !important; }
html[data-pay-skin="s19"] .skc-method-glow { display: none; }
html[data-pay-skin="s19"] .skc-method::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.22);
}
html[data-pay-skin="s19"] .skc-method[aria-pressed="true"]::after {
  background: rgb(var(--skc-brand)); border-color: rgb(var(--skc-brand));
}

/* ---- 20 · Только логотипы: имя убрано, значок во всю плитку ------------------------- */
html[data-pay-skin="s20"] .skc-method { min-height: 72px; justify-content: center; }
html[data-pay-skin="s20"] .skc-method-label { display: none; }
html[data-pay-skin="s20"] .skc-method-icon { transform: scale(1.2); }
html[data-pay-skin="s20"] .skc-method-coin { box-shadow: none !important; }

/* =====================================================================================
 * 21-35 · Другие наборы значков
 *
 * Варианты 21-25 рисуют контурные глифы, 26-30 — плотные силуэты, 31-35 — текстовые
 * марки (наборы лежат в sell-runtime.js, ALT_ICONS). Здесь — только подача: где стоит
 * подпись и как разложены кнопки. Значок приходит в currentColor, поэтому цвет ему
 * задаёт подложка.
 * ===================================================================================== */

/* Текстовая марка внутри подложки. */
.skc-alt-mark {
  display: block; font-weight: 900; letter-spacing: 0.06em; line-height: 1;
  font-family: "Inter", system-ui, sans-serif;
}

/* ---- 21-25 · контурные глифы -------------------------------------------------------- */
html[data-pay-skin="s21"] .skc-method-coin, html[data-pay-skin="s22"] .skc-method-coin,
html[data-pay-skin="s23"] .skc-method-coin, html[data-pay-skin="s24"] .skc-method-coin,
html[data-pay-skin="s25"] .skc-method-coin {
  background: rgba(var(--skc-brand), 0.12) !important;
  border: 1px solid rgba(var(--skc-brand), 0.3);
  box-shadow: none !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s21"] .skc-method-shine, html[data-pay-skin="s22"] .skc-method-shine,
html[data-pay-skin="s23"] .skc-method-shine, html[data-pay-skin="s24"] .skc-method-shine,
html[data-pay-skin="s25"] .skc-method-shine { display: none; }
html[data-pay-skin="s21"] .skc-method-glow, html[data-pay-skin="s22"] .skc-method-glow,
html[data-pay-skin="s23"] .skc-method-glow, html[data-pay-skin="s24"] .skc-method-glow,
html[data-pay-skin="s25"] .skc-method-glow { opacity: 0.16 !important; }

/* 22 · подпись справа от значка */
html[data-pay-skin="s22"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s22"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 58px; gap: 11px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s22"] .skc-method-icon { transform: scale(0.78); margin: -5px; }
html[data-pay-skin="s22"] .skc-method-label { font-size: 12px; }

/* 23 · три в ряд */
html[data-pay-skin="s23"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s23"] .skc-method { min-height: 80px; padding: 9px 4px 7px; }
html[data-pay-skin="s23"] .skc-method-icon { transform: scale(0.8); margin: -4px 0; }
html[data-pay-skin="s23"] .skc-method-label { font-size: 9px; letter-spacing: 0.2px; }

/* 24 · строками */
html[data-pay-skin="s24"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s24"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 48px; gap: 9px; padding: 6px 11px; text-align: left; border-radius: 10px;
}
html[data-pay-skin="s24"] .skc-method-icon { transform: scale(0.62); margin: -8px; }
html[data-pay-skin="s24"] .skc-method-label { font-size: 11px; }

/* 25 · без подписи, только глиф */
html[data-pay-skin="s25"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s25"] .skc-method { min-height: 64px; }
html[data-pay-skin="s25"] .skc-method-label { display: none; }

/* ---- 26-30 · плотные силуэты -------------------------------------------------------- */
html[data-pay-skin="s26"] .skc-method-coin, html[data-pay-skin="s27"] .skc-method-coin,
html[data-pay-skin="s28"] .skc-method-coin, html[data-pay-skin="s29"] .skc-method-coin,
html[data-pay-skin="s30"] .skc-method-coin {
  background: rgb(var(--skc-brand)) !important;
  box-shadow: 0 8px 18px -12px rgba(var(--skc-brand), 0.9) !important;
  color: #0b0b0f;
}
html[data-pay-skin="s26"] .skc-method-shine, html[data-pay-skin="s27"] .skc-method-shine,
html[data-pay-skin="s28"] .skc-method-shine, html[data-pay-skin="s29"] .skc-method-shine,
html[data-pay-skin="s30"] .skc-method-shine { display: none; }
html[data-pay-skin="s26"] .skc-method-glow, html[data-pay-skin="s27"] .skc-method-glow,
html[data-pay-skin="s28"] .skc-method-glow, html[data-pay-skin="s29"] .skc-method-glow,
html[data-pay-skin="s30"] .skc-method-glow { opacity: 0.2 !important; }

/* 27 · подпись справа */
html[data-pay-skin="s27"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s27"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 58px; gap: 11px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s27"] .skc-method-icon { transform: scale(0.78); margin: -5px; }
html[data-pay-skin="s27"] .skc-method-label { font-size: 12px; }

/* 28 · три в ряд */
html[data-pay-skin="s28"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s28"] .skc-method { min-height: 80px; padding: 9px 4px 7px; }
html[data-pay-skin="s28"] .skc-method-icon { transform: scale(0.8); margin: -4px 0; }
html[data-pay-skin="s28"] .skc-method-label { font-size: 9px; letter-spacing: 0.2px; }

/* 29 · крупные значки, подпись мелко снизу */
html[data-pay-skin="s29"] .skc-method { min-height: 106px; gap: 4px; }
html[data-pay-skin="s29"] .skc-method-icon { transform: scale(1.25); margin: 7px 0 5px; }
html[data-pay-skin="s29"] .skc-method-label {
  font-size: 9px; letter-spacing: 0.9px; color: rgba(255, 255, 255, 0.5);
}

/* 30 · список с кружком выбора */
html[data-pay-skin="s30"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s30"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 52px; gap: 10px; padding: 7px 42px 7px 10px; text-align: left; border-radius: 11px;
}
html[data-pay-skin="s30"] .skc-method-icon { transform: scale(0.68); margin: -7px; }
html[data-pay-skin="s30"] .skc-method::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22);
}
html[data-pay-skin="s30"] .skc-method[aria-pressed="true"]::after {
  background: rgb(var(--skc-brand)); border-color: rgb(var(--skc-brand));
}

/* ---- 31-35 · текстовые марки -------------------------------------------------------- */
html[data-pay-skin="s31"] .skc-method-coin, html[data-pay-skin="s32"] .skc-method-coin,
html[data-pay-skin="s33"] .skc-method-coin, html[data-pay-skin="s34"] .skc-method-coin,
html[data-pay-skin="s35"] .skc-method-coin {
  border-radius: 9px !important;
  width: 54px !important;
  height: 34px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, 0.9) !important;
  color: rgb(var(--skc-brand));
}
html[data-pay-skin="s31"] .skc-method-shine, html[data-pay-skin="s32"] .skc-method-shine,
html[data-pay-skin="s33"] .skc-method-shine, html[data-pay-skin="s34"] .skc-method-shine,
html[data-pay-skin="s35"] .skc-method-shine { display: none; }
html[data-pay-skin="s31"] .skc-method-glow, html[data-pay-skin="s32"] .skc-method-glow,
html[data-pay-skin="s33"] .skc-method-glow, html[data-pay-skin="s34"] .skc-method-glow,
html[data-pay-skin="s35"] .skc-method-glow { opacity: 0.14 !important; }

/* 32 · подпись справа от марки */
html[data-pay-skin="s32"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s32"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 56px; gap: 12px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s32"] .skc-method-icon { transform: scale(0.85); margin: -3px; }
html[data-pay-skin="s32"] .skc-method-label { font-size: 11.5px; }

/* 33 · три в ряд */
html[data-pay-skin="s33"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s33"] .skc-method { min-height: 78px; padding: 9px 4px 7px; }
html[data-pay-skin="s33"] .skc-method-icon { transform: scale(0.72); margin: -3px 0; }
html[data-pay-skin="s33"] .skc-method-label { font-size: 8.5px; letter-spacing: 0.2px; }

/* 34 · только марки, без подписи */
html[data-pay-skin="s34"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s34"] .skc-method { min-height: 62px; }
html[data-pay-skin="s34"] .skc-method-label { display: none; }

/* 35 · строками: марка слева, имя рядом */
html[data-pay-skin="s35"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s35"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 50px; gap: 11px; padding: 7px 12px; text-align: left; border-radius: 10px;
}
html[data-pay-skin="s35"] .skc-method-icon { transform: scale(0.72); margin: -5px; }
html[data-pay-skin="s35"] .skc-method-label { font-size: 11px; }

/* =====================================================================================
 * 36-50 · Настоящие логотипы платёжных систем
 *
 * Марки лежат в /exact/assets/pay и приходят готовыми цветными картинками, поэтому
 * перекрашивать их нельзя — им нужна подложка, на которой они читаются. Здесь варианты
 * дают её (светлую, прозрачную или тёмную) и раскладывают кнопки.
 *
 * 36-40 — компактные знаки, 41-45 — знаки со словом (они шире, поэтому подложка тоже),
 * 46-50 — другая прорисовка тех же способов.
 * ===================================================================================== */

/* Общее: блик и цветное свечение убираются — у готовой марки свой цвет. */
html[data-pay-skin="s36"] .skc-method-shine, html[data-pay-skin="s37"] .skc-method-shine,
html[data-pay-skin="s38"] .skc-method-shine, html[data-pay-skin="s39"] .skc-method-shine,
html[data-pay-skin="s40"] .skc-method-shine, html[data-pay-skin="s41"] .skc-method-shine,
html[data-pay-skin="s42"] .skc-method-shine, html[data-pay-skin="s43"] .skc-method-shine,
html[data-pay-skin="s44"] .skc-method-shine, html[data-pay-skin="s45"] .skc-method-shine,
html[data-pay-skin="s46"] .skc-method-shine, html[data-pay-skin="s47"] .skc-method-shine,
html[data-pay-skin="s48"] .skc-method-shine, html[data-pay-skin="s49"] .skc-method-shine,
html[data-pay-skin="s50"] .skc-method-shine { display: none; }
html[data-pay-skin="s36"] .skc-method-glow, html[data-pay-skin="s37"] .skc-method-glow,
html[data-pay-skin="s38"] .skc-method-glow, html[data-pay-skin="s39"] .skc-method-glow,
html[data-pay-skin="s40"] .skc-method-glow, html[data-pay-skin="s41"] .skc-method-glow,
html[data-pay-skin="s42"] .skc-method-glow, html[data-pay-skin="s43"] .skc-method-glow,
html[data-pay-skin="s44"] .skc-method-glow, html[data-pay-skin="s45"] .skc-method-glow,
html[data-pay-skin="s46"] .skc-method-glow, html[data-pay-skin="s47"] .skc-method-glow,
html[data-pay-skin="s48"] .skc-method-glow, html[data-pay-skin="s49"] .skc-method-glow,
html[data-pay-skin="s50"] .skc-method-glow { opacity: 0.14 !important; }

/* ---- 36-40 · компактные знаки на светлой плашке ------------------------------------- */
html[data-pay-skin="s36"] .skc-method-coin, html[data-pay-skin="s37"] .skc-method-coin,
html[data-pay-skin="s38"] .skc-method-coin, html[data-pay-skin="s39"] .skc-method-coin,
html[data-pay-skin="s40"] .skc-method-coin {
  width: 48px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, 0.9) !important;
  padding: 0 5px;
}

/* 37 · подпись справа */
html[data-pay-skin="s37"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s37"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 58px; gap: 12px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s37"] .skc-method-label { font-size: 12px; }

/* 38 · три в ряд */
html[data-pay-skin="s38"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s38"] .skc-method { min-height: 82px; padding: 9px 4px 7px; }
html[data-pay-skin="s38"] .skc-method-icon { transform: scale(0.88); }
html[data-pay-skin="s38"] .skc-method-label { font-size: 8.5px; letter-spacing: 0.2px; }

/* 39 · без подписи */
html[data-pay-skin="s39"] .skc-method { min-height: 66px; }
html[data-pay-skin="s39"] .skc-method-label { display: none; }

/* 40 · строками */
html[data-pay-skin="s40"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s40"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 52px; gap: 11px; padding: 7px 12px; text-align: left; border-radius: 11px;
}
html[data-pay-skin="s40"] .skc-method-icon { transform: scale(0.82); }
html[data-pay-skin="s40"] .skc-method-label { font-size: 11px; }

/* ---- 41-45 · марки со словом: подложка шире ----------------------------------------- */
html[data-pay-skin="s41"] .skc-method-coin, html[data-pay-skin="s42"] .skc-method-coin,
html[data-pay-skin="s43"] .skc-method-coin, html[data-pay-skin="s44"] .skc-method-coin,
html[data-pay-skin="s45"] .skc-method-coin {
  width: auto !important;
  min-width: 64px;
  height: 34px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none !important;
  padding: 0 9px;
}

/* 42 · подпись справа */
html[data-pay-skin="s42"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s42"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 56px; gap: 12px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s42"] .skc-method-label { font-size: 11.5px; }

/* 43 · широкие кнопки в одну колонку, марка по центру */
html[data-pay-skin="s43"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s43"] .skc-method { min-height: 74px; }
html[data-pay-skin="s43"] .skc-method-label { font-size: 10px; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.5); }

/* 44 · без подписи */
html[data-pay-skin="s44"] .skc-method { min-height: 62px; }
html[data-pay-skin="s44"] .skc-method-label { display: none; }

/* 45 · строками */
html[data-pay-skin="s45"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s45"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 50px; gap: 11px; padding: 7px 12px; text-align: left; border-radius: 10px;
}
html[data-pay-skin="s45"] .skc-method-label { font-size: 11px; }

/* ---- 46-50 · другая прорисовка: марка без подложки ---------------------------------- */
html[data-pay-skin="s46"] .skc-method-coin, html[data-pay-skin="s47"] .skc-method-coin,
html[data-pay-skin="s48"] .skc-method-coin, html[data-pay-skin="s49"] .skc-method-coin,
html[data-pay-skin="s50"] .skc-method-coin {
  width: auto !important;
  min-width: 48px;
  height: 36px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 47 · подпись справа */
html[data-pay-skin="s47"] .skc-methods { grid-template-columns: 1fr; }
html[data-pay-skin="s47"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 58px; gap: 12px; padding: 9px 12px; text-align: left;
}
html[data-pay-skin="s47"] .skc-method-label { font-size: 12px; }

/* 48 · три в ряд */
html[data-pay-skin="s48"] .skc-methods { grid-template-columns: repeat(3, 1fr); }
html[data-pay-skin="s48"] .skc-method { min-height: 80px; padding: 9px 4px 7px; }
html[data-pay-skin="s48"] .skc-method-icon { transform: scale(0.85); }
html[data-pay-skin="s48"] .skc-method-label { font-size: 8.5px; letter-spacing: 0.2px; }

/* 49 · без подписи */
html[data-pay-skin="s49"] .skc-method { min-height: 64px; }
html[data-pay-skin="s49"] .skc-method-label { display: none; }

/* 50 · строками с галочкой справа */
html[data-pay-skin="s50"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s50"] .skc-method {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 54px; gap: 12px; padding: 7px 44px 7px 12px; text-align: left; border-radius: 11px;
}
html[data-pay-skin="s50"] .skc-method-label { font-size: 11.5px; }
html[data-pay-skin="s50"] .skc-method::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.22);
}
html[data-pay-skin="s50"] .skc-method[aria-pressed="true"]::after {
  background: rgb(var(--skc-brand)); border-color: rgb(var(--skc-brand));
}

/* =====================================================================================
 * Настоящие марки под стиль сайта (варианты 36-50)
 *
 * Марки приходят разного сложения: «МИР VISA Mastercard» — широкая полоса 121x14, знак
 * СБП — почти квадрат, монеты — квадрат. Если задавать каждой свою высоту, в сетке они
 * получаются разнокалиберными. Поэтому здесь у всех одна коробка, а марка вписывается в
 * неё целиком и центрируется: одинаковой становится занимаемая площадь, а не число.
 *
 * Подложки взяты из языка страницы: тот же радиус, та же рамка rgba(255,255,255,.08),
 * та же мягкая тень, что у плиток и панелей вокруг. Выбранный способ подсвечивается
 * зелёным, как и всё остальное на странице.
 * ===================================================================================== */

html[data-pay-skin="s36"] .skc-pay-art,
html[data-pay-skin="s37"] .skc-pay-art,
html[data-pay-skin="s38"] .skc-pay-art,
html[data-pay-skin="s39"] .skc-pay-art,
html[data-pay-skin="s40"] .skc-pay-art,
html[data-pay-skin="s41"] .skc-pay-art,
html[data-pay-skin="s42"] .skc-pay-art,
html[data-pay-skin="s43"] .skc-pay-art,
html[data-pay-skin="s44"] .skc-pay-art,
html[data-pay-skin="s45"] .skc-pay-art,
html[data-pay-skin="s46"] .skc-pay-art,
html[data-pay-skin="s47"] .skc-pay-art,
html[data-pay-skin="s48"] .skc-pay-art,
html[data-pay-skin="s49"] .skc-pay-art,
html[data-pay-skin="s50"] .skc-pay-art {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Марка вписывается в подложку целиком, с небольшими полями. */
html[data-pay-skin="s36"] .skc-method-art,
html[data-pay-skin="s37"] .skc-method-art,
html[data-pay-skin="s38"] .skc-method-art,
html[data-pay-skin="s39"] .skc-method-art,
html[data-pay-skin="s40"] .skc-method-art,
html[data-pay-skin="s41"] .skc-method-art,
html[data-pay-skin="s42"] .skc-method-art,
html[data-pay-skin="s43"] .skc-method-art,
html[data-pay-skin="s44"] .skc-method-art,
html[data-pay-skin="s45"] .skc-method-art,
html[data-pay-skin="s46"] .skc-method-art,
html[data-pay-skin="s47"] .skc-method-art,
html[data-pay-skin="s48"] .skc-method-art,
html[data-pay-skin="s49"] .skc-method-art,
html[data-pay-skin="s50"] .skc-method-art {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* ---- 36-40 · цветные знаки на светлой плашке ---------------------------------------- */
html[data-pay-skin="s36"] .skc-method-coin, html[data-pay-skin="s37"] .skc-method-coin,
html[data-pay-skin="s38"] .skc-method-coin, html[data-pay-skin="s39"] .skc-method-coin,
html[data-pay-skin="s40"] .skc-method-coin {
  width: 56px !important;
  height: 38px !important;
  border-radius: 11px !important;
  padding: 7px 9px;
  background: #f5f6fa !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 7px 16px -11px rgba(0, 0, 0, 0.95) !important;
}

/* ---- 41-45 · марки со словом нарисованы белым: подложка только тёмная ---------------- */
html[data-pay-skin="s41"] .skc-method-coin, html[data-pay-skin="s42"] .skc-method-coin,
html[data-pay-skin="s43"] .skc-method-coin, html[data-pay-skin="s44"] .skc-method-coin,
html[data-pay-skin="s45"] .skc-method-coin {
  width: 76px !important;
  height: 34px !important;
  min-width: 0;
  border-radius: 10px !important;
  padding: 6px 10px;
  background: #131318 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ---- 46-50 · без подложки: марка лежит прямо на плитке ------------------------------ */
html[data-pay-skin="s46"] .skc-method-coin, html[data-pay-skin="s47"] .skc-method-coin,
html[data-pay-skin="s48"] .skc-method-coin, html[data-pay-skin="s49"] .skc-method-coin,
html[data-pay-skin="s50"] .skc-method-coin {
  width: 64px !important;
  height: 34px !important;
  min-width: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  /* Тень отделяет марку от плитки, раз рамки нет. */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  box-shadow: none !important;
}

/* В строчных вариантах марка стоит слева и места занимает меньше. */
html[data-pay-skin="s37"] .skc-method-coin, html[data-pay-skin="s40"] .skc-method-coin {
  width: 50px !important;
  height: 34px !important;
}
html[data-pay-skin="s42"] .skc-method-coin, html[data-pay-skin="s45"] .skc-method-coin {
  width: 70px !important;
  height: 30px !important;
}
html[data-pay-skin="s47"] .skc-method-coin, html[data-pay-skin="s50"] .skc-method-coin {
  width: 58px !important;
  height: 30px !important;
}

/* В три колонки плитка уже — подложка подбирается следом. */
html[data-pay-skin="s38"] .skc-method-coin { width: 50px !important; height: 34px !important; }
html[data-pay-skin="s43"] .skc-method-coin { width: 92px !important; height: 34px !important; }
html[data-pay-skin="s48"] .skc-method-coin { width: 56px !important; height: 32px !important; }

/* Эти варианты сами масштабировали значок — теперь размер задаёт подложка. */
html[data-pay-skin="s38"] .skc-method-icon, html[data-pay-skin="s40"] .skc-method-icon,
html[data-pay-skin="s48"] .skc-method-icon { transform: none; }

/* Выбранный способ светится зелёным, как остальные активные элементы страницы. */
html[data-pay-skin="s36"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s37"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s38"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s39"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s40"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s41"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s42"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s43"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s44"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s45"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s46"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s47"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s48"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s49"] .skc-method[aria-pressed="true"] .skc-method-coin,
html[data-pay-skin="s50"] .skc-method[aria-pressed="true"] .skc-method-coin {
  box-shadow: inset 0 0 0 1px rgba(34, 209, 126, 0.55), 0 6px 18px -10px rgba(34, 209, 126, 0.7) !important;
}

/* Недоступный способ гаснет вместе с маркой, а не только с подписью. */
html[data-pay-skin="s36"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s37"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s38"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s39"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s40"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s41"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s42"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s43"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s44"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s45"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s46"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s47"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s48"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s49"] .skc-method:disabled .skc-pay-art,
html[data-pay-skin="s50"] .skc-method:disabled .skc-pay-art { filter: grayscale(1); opacity: 0.75; }


/* Подложка считает размер вместе с отступами — иначе каждая добавка их раздувает. */
html[data-pay-skin="s36"] .skc-method-coin,
html[data-pay-skin="s37"] .skc-method-coin,
html[data-pay-skin="s38"] .skc-method-coin,
html[data-pay-skin="s39"] .skc-method-coin,
html[data-pay-skin="s40"] .skc-method-coin,
html[data-pay-skin="s41"] .skc-method-coin,
html[data-pay-skin="s42"] .skc-method-coin,
html[data-pay-skin="s43"] .skc-method-coin,
html[data-pay-skin="s44"] .skc-method-coin,
html[data-pay-skin="s45"] .skc-method-coin,
html[data-pay-skin="s46"] .skc-method-coin,
html[data-pay-skin="s47"] .skc-method-coin,
html[data-pay-skin="s48"] .skc-method-coin,
html[data-pay-skin="s49"] .skc-method-coin,
html[data-pay-skin="s50"] .skc-method-coin {
  box-sizing: border-box;
}

/*
 * Марка занимает подложку целиком, а не рисуется в своём исходном размере: «МИР VISA
 * Mastercard» — полоса 121x14, знак СБП — почти квадрат, и без этого первая выглядела бы
 * вчетверо мельче второй. object-fit: contain сохраняет пропорции, поэтому ничего не мнётся.
 */
html[data-pay-skin="s36"] .skc-pay-art,
html[data-pay-skin="s37"] .skc-pay-art,
html[data-pay-skin="s38"] .skc-pay-art,
html[data-pay-skin="s39"] .skc-pay-art,
html[data-pay-skin="s40"] .skc-pay-art,
html[data-pay-skin="s41"] .skc-pay-art,
html[data-pay-skin="s42"] .skc-pay-art,
html[data-pay-skin="s43"] .skc-pay-art,
html[data-pay-skin="s44"] .skc-pay-art,
html[data-pay-skin="s45"] .skc-pay-art,
html[data-pay-skin="s46"] .skc-pay-art,
html[data-pay-skin="s47"] .skc-pay-art,
html[data-pay-skin="s48"] .skc-pay-art,
html[data-pay-skin="s49"] .skc-pay-art,
html[data-pay-skin="s50"] .skc-pay-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/*
 * Подложка под марку — в языке страницы: тёмная панель с тонкой рамкой и внутренним
 * бликом, как у плиток и полей вокруг. Белая плашка (как на кассовых терминалах) на
 * тёмной странице читается как заплатка и перетягивает внимание с выбранного способа.
 * Все марки цветные, на тёмном они не теряются.
 */
html[data-pay-skin="s36"] .skc-method-coin,
html[data-pay-skin="s37"] .skc-method-coin,
html[data-pay-skin="s38"] .skc-method-coin,
html[data-pay-skin="s39"] .skc-method-coin,
html[data-pay-skin="s40"] .skc-method-coin,
html[data-pay-skin="s41"] .skc-method-coin,
html[data-pay-skin="s42"] .skc-method-coin,
html[data-pay-skin="s43"] .skc-method-coin,
html[data-pay-skin="s44"] .skc-method-coin,
html[data-pay-skin="s45"] .skc-method-coin {
  background: linear-gradient(180deg, #17171d, #101014) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================================================
 * 51 · Логотипы · строки с отметкой
 *
 * Сборка из того, что работает лучше всего в каждом из трёх решений:
 *
 *   значки  — настоящие марки платёжных систем, компактный набор (без слов внутри,
 *             иначе они дублировали бы подпись рядом);
 *   строки  — по одной на ряд: «VISA MASTERCARD» и «БАНК / IBAN» перестают обрезаться,
 *             а список спокойно растёт, когда способов станет больше шести;
 *   подпись — справа от марки: «Баланс», «Банк / IBAN» и «Крипта» по одному значку не
 *             опознаются, поэтому убирать её нельзя;
 *   отметка — справа в строке, как на кассах и у соседей по рынку: цвет рамки в тёмной
 *             теме слишком слабый сигнал о том, что способ выбран.
 *
 * Правила здесь самодостаточные: вариант не наследует перечисления 36-50, чтобы его
 * можно было вынести в основной стиль, ничего больше не перенося.
 * ===================================================================================== */

html[data-pay-skin="s51"] .skc-methods {
  grid-template-columns: 1fr;
  gap: 6px;
}

html[data-pay-skin="s51"] .skc-method {
  /* Отметка позиционируется от строки — не полагаемся на утилиту `relative` в разметке. */
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 54px;
  gap: 12px;
  padding: 8px 46px 8px 10px;   /* справа — место под отметку */
  text-align: left;
  border-radius: 12px;
}

/* Марка в общей плашке: силуэты у логотипов разные, плашка задаёт списку ритм. */
html[data-pay-skin="s51"] .skc-method-coin {
  box-sizing: border-box;
  width: 52px !important;
  height: 36px !important;
  border-radius: 9px !important;
  padding: 5px 7px;
  background: linear-gradient(180deg, #17171d, #101014) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-pay-skin="s51"] .skc-method-shine { display: none; }
html[data-pay-skin="s51"] .skc-method-glow { opacity: 0.14 !important; }

/* Марка занимает плашку целиком — иначе широкая полоса выглядит вчетверо мельче знака. */
html[data-pay-skin="s51"] .skc-method-art { width: 100%; height: 100%; align-items: center; justify-content: center; }
html[data-pay-skin="s51"] .skc-pay-art { width: 100%; height: 100%; object-fit: contain; }

html[data-pay-skin="s51"] .skc-method-label {
  font-size: 11.5px;
  letter-spacing: 0.2px;
  max-width: none;
}

/* Отметка выбора. */
html[data-pay-skin="s51"] .skc-method::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: background 0.18s, border-color 0.18s;
}
html[data-pay-skin="s51"] .skc-method[aria-pressed="true"]::after {
  background: #22d17e;
  border-color: #22d17e;
  /* Галочка внутри отметки. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308110c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
html[data-pay-skin="s51"] .skc-method:disabled::after { opacity: 0.4; }

/* Выбранная строка подсвечивается так же, как активные элементы страницы. */
html[data-pay-skin="s51"] .skc-method[aria-pressed="true"] .skc-method-coin {
  border-color: rgba(34, 209, 126, 0.4);
  box-shadow: inset 0 0 0 1px rgba(34, 209, 126, 0.25) !important;
}
html[data-pay-skin="s51"] .skc-method:disabled .skc-pay-art { filter: grayscale(1); opacity: 0.75; }

/* Галочка в правом верхнем углу из обычной плитки здесь не нужна — её роль у отметки. */
html[data-pay-skin="s51"] .skc-method > .absolute.right-2.top-2 { display: none; }


/* ---- 51 · выравнивание марок и цвет служебных значков ------------------------------- */
/*
 * Файлы марок нарисованы с разными полями внутри: у карты рисунок занимает 42% высоты
 * своего холста, у банка — 90%. После вписывания «contain» это даёт разброс высоты вдвое
 * (10,9 px против 23,4 px) — замерено по непрозрачным пикселям. Коэффициенты ниже
 * приводят высоту рисунка к ~20 px у всех знаков; подложка одна и та же.
 */
html[data-pay-skin="s51"] .skc-method-coin { overflow: hidden; }
html[data-pay-skin="s51"] .skc-pay-art[src*="cards-plastic"] { transform: scale(1.8); }
html[data-pay-skin="s51"] .skc-pay-art[src*="bank-coin"] { transform: scale(0.86); }

/* Словесная марка живёт по своим правилам: ей нужна ширина, а не высота. */
html[data-pay-skin="s51"] .skc-method-coin:has(.skc-pay-art[src*="mir.svg"]) { padding-left: 3px; padding-right: 3px; }
/* Словесная марка и так занимает плашку по ширине — увеличение её только обрезало бы. */
html[data-pay-skin="s51"] .skc-pay-art[src*="mir.svg"] { transform: none; }

/*
 * У «Баланса» бренд-марки нет — это знак самого сайта, он приходит маской и по умолчанию
 * белый. Красим в зелёный акцент страницы, чтобы строка не выпадала из цветного ряда.
 */
html[data-pay-skin="s51"] .skc-method-art span[style*="mask"] { background: #22d17e !important; }

/* =====================================================================================
 * 52-57 · Значки из окна «Вывод средств»
 *
 * В том окне способы показаны не однотонными кружками, а настоящими марками: карты — на
 * белых подложках, СБП и МИР — своими файлами, крипта — четырьмя монетами, банк —
 * зелёным зданием. Марки там разного сложения и заметно шире круга 44x44, в который
 * страница продажи вписывает значок, поэтому круглая цветная плашка под ними снимается,
 * а место под марку даёт сам вариант.
 * ===================================================================================== */

/* Общая часть набора: плашка убрана, марка стоит на плитке сама по себе. */
html[data-pay-skin="s52"] .skc-method-coin,
html[data-pay-skin="s53"] .skc-method-coin,
html[data-pay-skin="s54"] .skc-method-coin,
html[data-pay-skin="s55"] .skc-method-coin,
html[data-pay-skin="s56"] .skc-method-coin,
html[data-pay-skin="s57"] .skc-method-coin {
  width: auto !important;
  height: auto !important;
  min-width: 0;
  border-radius: 12px !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-pay-skin="s52"] .skc-method-shine, html[data-pay-skin="s53"] .skc-method-shine,
html[data-pay-skin="s54"] .skc-method-shine, html[data-pay-skin="s55"] .skc-method-shine,
html[data-pay-skin="s56"] .skc-method-shine, html[data-pay-skin="s57"] .skc-method-shine { display: none; }
html[data-pay-skin="s52"] .skc-method-glow, html[data-pay-skin="s53"] .skc-method-glow,
html[data-pay-skin="s54"] .skc-method-glow, html[data-pay-skin="s55"] .skc-method-glow,
html[data-pay-skin="s56"] .skc-method-glow, html[data-pay-skin="s57"] .skc-method-glow { opacity: 0.12 !important; }

/* Сборка самих марок. Классы общие: их выдаёт только этот набор значков. */
.skc-wallet-cards { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* Карты печатают на белом, и в окне вывода они тоже стоят на белых плашках. */
.skc-wallet-plate {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 22px; border-radius: 5px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.skc-wallet-mark { display: block; }
/* Четыре монеты: 2x2, чтобы связка не растягивала плитку в ширину. */
.skc-wallet-coins { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; width: 46px; }
html[data-pay-skin="s52"] .skc-method-art,
html[data-pay-skin="s53"] .skc-method-art,
html[data-pay-skin="s54"] .skc-method-art,
html[data-pay-skin="s55"] .skc-method-art,
html[data-pay-skin="s56"] .skc-method-art,
html[data-pay-skin="s57"] .skc-method-art { align-items: center; justify-content: center; }
/* У «Баланса» бренд-марки нет — знак сайта приходит маской, красим в акцент страницы. */
html[data-pay-skin="s52"] .skc-method-art span[style*="mask"], html[data-pay-skin="s53"] .skc-method-art span[style*="mask"],
html[data-pay-skin="s54"] .skc-method-art span[style*="mask"], html[data-pay-skin="s55"] .skc-method-art span[style*="mask"],
html[data-pay-skin="s56"] .skc-method-art span[style*="mask"], html[data-pay-skin="s57"] .skc-method-art span[style*="mask"] { background: #22d17e !important; }

/* ---- 52 · как в самом окне: высокие плитки, марка над подписью --------------------- */
html[data-pay-skin="s52"] .skc-methods { grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-pay-skin="s52"] .skc-method {
  min-height: 112px;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.07);
  background: #0d0d10;
  padding: 18px 12px;
}
html[data-pay-skin="s52"] .skc-method[aria-pressed="true"] {
  background: #0e120f;
  border-color: rgba(34, 209, 126, 0.55);
  box-shadow: 0 0 30px -8px rgba(34, 197, 94, 0.6);
}
html[data-pay-skin="s52"] .skc-method-label { font-size: 11px; font-weight: 700; letter-spacing: 0; }
/* В окне выбранный способ помечен точкой, а не галочкой в рамке. */
html[data-pay-skin="s52"] .skc-method > .absolute.right-2.top-2 {
  right: 10px; top: 10px; height: 8px; width: 8px; border-radius: 999px; background: #22d17e;
}
html[data-pay-skin="s52"] .skc-method > .absolute.right-2.top-2 svg { display: none; }

/* ---- 53 · компактные плитки, крупные марки ------------------------------------------
 * Плитка ниже, а марки в ней — заметно больше: место под них освобождают поля и отступ
 * до подписи, а не высота кнопки. Размеры заданы каждой марке своими числами, а не общим
 * scale: при масштабировании коробка остаётся прежней, и увеличенный знак наезжает на
 * подпись, а так плитка знает настоящую высоту содержимого.
 */
html[data-pay-skin="s53"] .skc-methods { grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-pay-skin="s53"] .skc-method { min-height: 74px; gap: 6px; padding: 8px 8px 7px; }
html[data-pay-skin="s53"] .skc-wallet-plate { width: 42px; height: 27px; border-radius: 6px; }
/* Марки карт различаются по пропорциям, поэтому каждой свой размер по её viewBox. */
html[data-pay-skin="s53"] .skc-wallet-plate svg[viewBox="0 0 24 24"] { width: 30px; height: 30px; }
html[data-pay-skin="s53"] .skc-wallet-plate svg[viewBox="0 0 36 22"] { width: 28px; height: 17px; }
html[data-pay-skin="s53"] .skc-wallet-cards { gap: 7px; }
html[data-pay-skin="s53"] .skc-wallet-mark[src*="sbp"] { width: 29px; height: 35px; }
html[data-pay-skin="s53"] .skc-wallet-mark[src*="mir"] { width: 78px; height: 23px; }
/* Монеты в одну строку: в два ряда увеличенные они стали бы самым высоким значком и
   сами же подняли бы плитку обратно. */
html[data-pay-skin="s53"] .skc-wallet-coins { width: auto; flex-wrap: nowrap; gap: 5px; }
html[data-pay-skin="s53"] .skc-wallet-coins svg { width: 22px; height: 22px; }
/* Только знак банка: он единственный рисуется обводкой, у марок монет заливка, и свой
   размер каждая из них задаёт сама. */
html[data-pay-skin="s53"] .skc-method-art > svg[fill="none"] { width: 34px; height: 34px; }
/* Знак сайта приходит с размерами в самом атрибуте style — перебиваем их. */
html[data-pay-skin="s53"] .skc-method-art > span[style*="mask"] { width: 32px !important; height: 32px !important; }

/* Марки монет стоят на плитке сами по себе: круглую цветную плашку страницы снимает
   общее правило набора выше, а размер каждая марка несёт в своей разметке. */

/* ---- 54 · строками: марка слева, подпись справа ------------------------------------ */
html[data-pay-skin="s54"] .skc-methods { grid-template-columns: 1fr; gap: 6px; }
html[data-pay-skin="s54"] .skc-method {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 54px;
  gap: 12px;
  padding: 8px 34px 8px 10px;
  text-align: left;
  border-radius: 12px;
}
/* Марки разного сложения — общая ширина колонки задаёт списку ровный левый край. */
html[data-pay-skin="s54"] .skc-method-icon { width: 76px; flex: 0 0 76px; }
html[data-pay-skin="s54"] .skc-method-label { font-size: 11.5px; max-width: none; }
html[data-pay-skin="s54"] .skc-wallet-coins { width: auto; flex-wrap: nowrap; gap: 3px; }
html[data-pay-skin="s54"] .skc-wallet-coins svg { width: 15px; height: 15px; }

/* ---- 55 · три в ряд: марки мельче, подпись узкая ----------------------------------- */
html[data-pay-skin="s55"] .skc-methods { grid-template-columns: repeat(3, 1fr); gap: 6px; }
html[data-pay-skin="s55"] .skc-method { min-height: 82px; gap: 7px; padding-left: 4px; padding-right: 4px; }
html[data-pay-skin="s55"] .skc-method-label { font-size: 9px; letter-spacing: 0; }
html[data-pay-skin="s55"] .skc-wallet-plate { width: 26px; height: 17px; border-radius: 4px; }
html[data-pay-skin="s55"] .skc-wallet-plate svg { width: 17px; height: 11px; }
html[data-pay-skin="s55"] .skc-wallet-cards { gap: 4px; }
html[data-pay-skin="s55"] .skc-wallet-coins { width: 38px; gap: 4px; }
html[data-pay-skin="s55"] .skc-wallet-coins svg { width: 15px; height: 15px; }
html[data-pay-skin="s55"] .skc-wallet-mark { max-width: 52px; height: auto; }

/* ---- 56 · светлая подложка под каждой маркой --------------------------------------- */
html[data-pay-skin="s56"] .skc-methods { grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-pay-skin="s56"] .skc-method { min-height: 100px; gap: 10px; }
html[data-pay-skin="s56"] .skc-method-coin {
  box-sizing: border-box;
  min-width: 64px; height: 38px !important;
  padding: 6px 9px;
  background: #f5f6fa !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 7px 16px -11px rgba(0, 0, 0, 0.95) !important;
}
/* На светлом белые плашки карт не нужны — марки и так лежат на светлом. */
html[data-pay-skin="s56"] .skc-wallet-plate { background: none; box-shadow: none; width: auto; height: auto; }
html[data-pay-skin="s56"] .skc-wallet-cards { gap: 7px; }
/* Знак банка на светлом тонет в зелёном — затемняем до читаемого. */
html[data-pay-skin="s56"] .skc-method-art svg[style*="34,197,94"] { color: #11875a !important; }
html[data-pay-skin="s56"] .skc-method-art span[style*="mask"] { background: #11875a !important; }

/* ---- 57 · без подложки: марка лежит прямо на плитке -------------------------------- */
html[data-pay-skin="s57"] .skc-methods { grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-pay-skin="s57"] .skc-method { min-height: 98px; gap: 11px; background: transparent; }
html[data-pay-skin="s57"] .skc-method-glow { opacity: 0 !important; }
/* Рамки у плашки нет, поэтому марку от плитки отделяет тень. */
html[data-pay-skin="s57"] .skc-method-coin { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
html[data-pay-skin="s57"] .skc-wallet-plate { box-shadow: none; }
html[data-pay-skin="s57"] .skc-method-label { font-size: 10px; color: rgba(255, 255, 255, 0.55); }
html[data-pay-skin="s57"] .skc-method[aria-pressed="true"] .skc-method-label { color: #fff; }

/* ---- Шапка «Реквизиты выплаты» для наборов 52-57 ------------------------------------
 * Там выбранный способ показан крупной круглой плашкой, залитой его собственным цветом.
 * Со значками страницы это работало: они белые и на цветном читались. Настоящая марка
 * нарисована тем же цветом, что и плашка, — зелёный USDT на зелёном круге пропадал.
 *
 * Плашка становится тёмной, как плитки этого набора, а цвет способа остаётся в свечении
 * вокруг неё: круг на месте, марка читается.
 */
html[data-pay-skin="s52"] div:has(> .skc-detail-glyph),
html[data-pay-skin="s53"] div:has(> .skc-detail-glyph),
html[data-pay-skin="s54"] div:has(> .skc-detail-glyph),
html[data-pay-skin="s55"] div:has(> .skc-detail-glyph),
html[data-pay-skin="s56"] div:has(> .skc-detail-glyph),
html[data-pay-skin="s57"] div:has(> .skc-detail-glyph) {
  background: linear-gradient(180deg, #16161c, #0d0d11) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
/* Белый блик сверху рисовал глянцевую монету — под плоской маркой он лишний. */
html[data-pay-skin="s52"] div:has(> .skc-detail-glyph) > [aria-hidden],
html[data-pay-skin="s53"] div:has(> .skc-detail-glyph) > [aria-hidden],
html[data-pay-skin="s54"] div:has(> .skc-detail-glyph) > [aria-hidden],
html[data-pay-skin="s55"] div:has(> .skc-detail-glyph) > [aria-hidden],
html[data-pay-skin="s56"] div:has(> .skc-detail-glyph) > [aria-hidden],
html[data-pay-skin="s57"] div:has(> .skc-detail-glyph) > [aria-hidden] { display: none; }
/* Свечение за плашкой приглушаем: под тёмным кругом оно светит мимо, а не изнутри. */
html[data-pay-skin="s52"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full,
html[data-pay-skin="s53"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full,
html[data-pay-skin="s54"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full,
html[data-pay-skin="s55"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full,
html[data-pay-skin="s56"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full,
html[data-pay-skin="s57"] div:has(> div > .skc-detail-glyph) > .absolute.rounded-full { opacity: 0.5 !important; }

/* Марка в круге 72px: размеры задаются по высоте, ширина считается из пропорции —
   у логотипа Solana и марки МИР она не квадратная. */
html[data-pay-skin="s52"] .skc-detail-glyph > svg, html[data-pay-skin="s53"] .skc-detail-glyph > svg,
html[data-pay-skin="s54"] .skc-detail-glyph > svg, html[data-pay-skin="s55"] .skc-detail-glyph > svg,
html[data-pay-skin="s56"] .skc-detail-glyph > svg, html[data-pay-skin="s57"] .skc-detail-glyph > svg { width: auto; height: 38px; }
/* Марки СБП и МИР приходят картинкой. Жёсткая высота сплющивала «МИР» (72x34 при
   пропорции 62:18), а размеры «auto» схлопывали «СБП» в ноль: в его файле нет своих
   width/height, только viewBox, и считать браузеру не от чего. Поэтому задана коробка
   с вписыванием — пропорции держит object-fit, а не разметка файла. */
html[data-pay-skin="s52"] .skc-detail-glyph .skc-wallet-mark, html[data-pay-skin="s53"] .skc-detail-glyph .skc-wallet-mark,
html[data-pay-skin="s54"] .skc-detail-glyph .skc-wallet-mark, html[data-pay-skin="s55"] .skc-detail-glyph .skc-wallet-mark,
html[data-pay-skin="s56"] .skc-detail-glyph .skc-wallet-mark, html[data-pay-skin="s57"] .skc-detail-glyph .skc-wallet-mark {
  width: 54px; height: 34px; object-fit: contain;
}
html[data-pay-skin="s52"] .skc-detail-glyph .skc-wallet-cards, html[data-pay-skin="s53"] .skc-detail-glyph .skc-wallet-cards,
html[data-pay-skin="s54"] .skc-detail-glyph .skc-wallet-cards, html[data-pay-skin="s55"] .skc-detail-glyph .skc-wallet-cards,
html[data-pay-skin="s56"] .skc-detail-glyph .skc-wallet-cards, html[data-pay-skin="s57"] .skc-detail-glyph .skc-wallet-cards { flex-direction: column; gap: 4px; }
html[data-pay-skin="s52"] .skc-detail-glyph > span[style*="mask"], html[data-pay-skin="s53"] .skc-detail-glyph > span[style*="mask"],
html[data-pay-skin="s54"] .skc-detail-glyph > span[style*="mask"], html[data-pay-skin="s55"] .skc-detail-glyph > span[style*="mask"],
html[data-pay-skin="s56"] .skc-detail-glyph > span[style*="mask"], html[data-pay-skin="s57"] .skc-detail-glyph > span[style*="mask"] { width: 38px !important; height: 38px !important; }