/* C2: правки вида для группы страниц «ads». Подключается после c2.css. */

/* =====================================================================
   «Каналы и ДРР» (.ovx .c2ads)
   ===================================================================== */
.ovx .c2ads{gap:20px}
.ovx .c2ads .ctl-cap{margin:-8px 0 0;font-size:13px;color:#6B6B76}

/* верхняя строка: без сливового */
.ovx .c2ads .stepper{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);border-radius:14px;box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:var(--c2-blur);backdrop-filter:var(--c2-blur)}
.ovx .c2ads .stepper button{color:#1C1C1E}
.ovx .c2ads .stepper b{font-weight:700;font-size:15.5px}
/* название периода — кнопка календаря («Свой период»); ‹ › по бокам */
.ovx .c2ads .stepper .pcal{width:auto;height:38px;min-width:150px;justify-content:center;padding:0 10px;font-size:15.5px;font-weight:700;color:#1C1C1E}
.ovx .c2ads .stepper .pcal:hover{background:rgba(118,118,128,.12)}
.ovx .c2ads .sw{min-height:42px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.5);border-radius:13px;box-shadow:var(--glass-sh);
  font-weight:600;color:#1C1C1E;font-size:14px}
.ovx .c2ads .sw[aria-checked="true"] i{background:#4A48B8}
.ovx .c2ads .cmp{font-size:14px;color:#6B6B76}
.ovx .c2ads .cmp select{min-height:42px;font-size:14px}
.ovx .c2ads .fresh{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);font-size:13px;color:#5E5E68}
.ovx .c2ads button:focus-visible,.ovx .c2ads a:focus-visible,.ovx .c2ads select:focus-visible{outline:3px solid rgba(74,72,184,.45);outline-offset:2px}

.ovx .c2ads .ads-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:13.5px;font-weight:600;color:#3C3C43;
  background:rgba(118,118,128,.12);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums}

/* плитки: четыре в ряд, на узком экране по две */
.ovx .c2ads .k-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.ovx .c2ads .k-kpi-v .ads-gv{display:inline-flex;align-items:center;gap:12px}
.ovx .c2ads .ads-gauge{display:block;width:92px;height:auto;flex:none}
.ovx .c2ads .k-kpi-d>span:first-child{white-space:nowrap}
.ovx .c2ads .ads-ls{display:none}

/* карточки */
.ovx .c2ads .ads-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"chart fun";align-items:start}
.ovx .c2ads .ads-grid>.a-chart{grid-area:chart}.ovx .c2ads .ads-grid>.a-fun{grid-area:fun}
.ovx .c2ads .card{padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.ovx .c2ads .ads-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.ovx .c2ads .ads-h h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:#1C1C1E}
.ovx .c2ads .ads-sub{margin:4px 0 0;font-size:14px;line-height:1.4;color:#6B6B76}
.ovx .c2ads .note{margin:0;font-size:13.5px;line-height:1.5;color:#5E5E68}

/* график расхода */
.ovx .c2ads .chart-w{position:relative}
.ovx .c2ads .chart-w svg{display:block;width:100%;overflow:visible}
.ovx .c2ads .chart-w text{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:500;fill:#8E8E93}
.ovx .c2ads .chart-w text.pl{font-size:12.5px;font-weight:600;fill:#5E5E68}
.ovx .c2ads .chart-w text.ceil{fill:#C2413A;font-weight:600}
.ovx .c2ads .chart-w rect.c2-hit{transition:fill .12s ease;cursor:default}
.ovx .c2ads .chart-w rect.c2-hit:hover,.ovx .c2ads .chart-w rect.c2-hit.on{fill:rgba(118,118,128,.13)}

/* доля каналов за период: одна полоса на 100 % */
.ovx .c2ads .ads-split{display:flex;flex-direction:column;gap:10px;margin-top:2px;padding-top:14px;border-top:1px solid rgba(60,60,67,.08)}
.ovx .c2ads .ads-split-b{display:flex;gap:3px;height:12px}
.ovx .c2ads .ads-split-b i{display:block;height:100%;min-width:4px;border-radius:6px}
.ovx .c2ads .ads-split-l{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:#3C3C43}
.ovx .c2ads .ads-split-l>span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ovx .c2ads .ads-split-l i{width:12px;height:12px;border-radius:4px;flex:none}
.ovx .c2ads .ads-split-l .ads-sn{font-weight:500}
.ovx .c2ads .ads-split-l b{font-weight:700;color:#1C1C1E}
.ovx .c2ads .ads-split-l small{font-size:12.5px;color:#6B6B76}

/* воронка: шаги сужаются равномерно, между ними — сколько дошли */
.ovx .c2ads .ads-fh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
.ovx .c2ads .ads-fh h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:#1C1C1E}
.ovx .c2ads .ads-fh .ads-sub{grid-column:1/-1;margin:0}
.ovx .c2ads .ads-fseg{flex:none}
.ovx .c2ads .ads-fseg button{padding:7px 14px;font-size:14px}
.ovx .c2ads .fn2{display:flex;flex-direction:column}
.ovx .c2ads .fn2-s{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:66px;padding:6px 0;text-align:center}
.ovx .c2ads .fn2-s::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;
  clip-path:polygon(var(--a) 0,calc(100% - var(--a)) 0,calc(100% - var(--b)) 100%,var(--b) 100%)}
.ovx .c2ads .fn2-s.s0::before{background:linear-gradient(180deg,rgba(94,92,230,.13),rgba(94,92,230,.17))}
.ovx .c2ads .fn2-s.s1::before{background:linear-gradient(180deg,rgba(94,92,230,.19),rgba(94,92,230,.23))}
.ovx .c2ads .fn2-s.s2::before{background:linear-gradient(180deg,rgba(94,92,230,.25),rgba(94,92,230,.29))}
.ovx .c2ads .fn2-s.s3::before{background:linear-gradient(180deg,rgba(94,92,230,.31),rgba(94,92,230,.35))}
.ovx .c2ads .fn2-s.ghost::before{background:repeating-linear-gradient(135deg,rgba(118,118,128,.1) 0 8px,rgba(118,118,128,.04) 8px 16px)}
.ovx .c2ads .fn2-l{font-size:13px;font-weight:600;color:#3A3A44}
.ovx .c2ads .fn2-s b{font-size:20px;font-weight:700;color:#1C1C1E;line-height:1.15;letter-spacing:-.01em}
.ovx .c2ads .fn2-s small{font-size:12.5px;color:#3C3C43;padding:0 8px}
.ovx .c2ads .fn2-s.ghost small{color:#5E5E68}
.ovx .c2ads .fn2-g{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:2px 7px;padding:6px 0;font-size:13px;color:#5E5E68}
.ovx .c2ads .fn2-g b{font-size:14px;font-weight:700;color:#1C1C1E}
.ovx .c2ads .fn2-gx{padding:3px 0}
.ovx .c2ads .fn2-d{font-weight:700;white-space:nowrap;color:#5E5E68}
.ovx .c2ads .fn2-d.pos{color:#2E7D52}
.ovx .c2ads .fn2-d.neg{color:#C2413A}

/* воронка: выбор товара (список приложения, js/dd.js) */
.ovx .c2ads .ads-fpick{grid-column:1/-1;margin-top:8px}
.ovx .c2ads .ads-fpick select,.ovx .c2ads .ads-fpick .dd-btn{width:100%;min-height:42px;font-size:15px}

/* воронка по товарам: таблица на компьютере, карточки на телефоне */
.ovx .c2ads .a-fprod{display:flex;flex-direction:column;gap:12px}
.ovx .c2ads .a-fprod .ads-h{margin:0}
.ovx .c2ads .a-fprod .ads-sub{margin:-8px 0 0}
.ovx .c2ads .fp-tbox{overflow-x:auto;overscroll-behavior-x:contain;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);scrollbar-width:thin}
.ovx .c2ads table.fp-t{width:100%;border-collapse:collapse;background:transparent;border:0;box-shadow:none;font-size:14px}
.ovx .c2ads .fp-t th{padding:12px 10px;font-size:12.5px;font-weight:600;color:#6B6B76;text-align:left;white-space:nowrap;border-bottom:1px solid rgba(60,60,67,.1);background:none}
.ovx .c2ads .fp-t td{padding:11px 10px;border-bottom:1px solid rgba(60,60,67,.08);vertical-align:top;white-space:nowrap}
.ovx .c2ads .fp-t th:first-child,.ovx .c2ads .fp-t td:first-child{padding-left:16px}
.ovx .c2ads .fp-t th:last-child,.ovx .c2ads .fp-t td:last-child{padding-right:16px}
.ovx .c2ads .fp-t .r{text-align:right}
.ovx .c2ads .fp-t td.nm{font-weight:600;color:#1C1C1E}
.ovx .c2ads .fp-t td.fp-rc{text-align:right}
.ovx .c2ads .fp-t td.fp-rc b,.ovx .c2ads .fp-t td.fp-rc small,.ovx .c2ads .fp-t td.fp-w b,.ovx .c2ads .fp-t td.fp-w small{display:block}
.ovx .c2ads .fp-t small{font-size:12px;color:#6B6B76;font-weight:400;margin-top:2px}
.ovx .c2ads .fp-r{font-weight:700;color:#1C1C1E}
.ovx .c2ads .fp-r.pos{color:#2E7D52}
.ovx .c2ads .fp-r.neg{color:#C2413A}
.ovx .c2ads .fp-r.fp-low{color:#8E8E96;font-weight:600}
.ovx .c2ads .fp-t td.fp-w b{font-weight:600;color:#1C1C1E}
.ovx .c2ads .fp-t td.fp-w.neg b{color:#C2413A}
.ovx .c2ads .fp-mut{color:#8E8E96}
.ovx .c2ads .a-fprod .neg{color:#C2413A}
.ovx .c2ads .fp-t tbody tr[data-fsku]{cursor:pointer}
.ovx .c2ads .fp-t tbody tr[data-fsku]:hover td{background:rgba(118,118,128,.07)}
.ovx .c2ads .fp-t tbody tr.sel td{background:rgba(94,92,230,.09)}
.ovx .c2ads .fp-t tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 #5E5CE6}
.ovx .c2ads .fp-t tbody tr[data-fsku]:focus-visible{outline:2px solid #5E5CE6;outline-offset:-2px}
.ovx .c2ads .fp-t tr.tot td{font-weight:700;border-top:1.5px solid rgba(60,60,67,.2);border-bottom:0;background:rgba(118,118,128,.04)}
.ovx .c2ads .fp-t tr.tot td small{font-weight:400}
.ovx .c2ads .fp-cards{display:none}
.ovx .c2ads .fp-note{margin:0}
.ovx .c2ads .fp-nw{white-space:nowrap}

@container ovx (max-width:760px){
  .ovx .c2ads .fp-tbox{display:none}
  .ovx .c2ads .fp-cards{display:flex;flex-direction:column;gap:10px}
  .ovx .c2ads .fp-card{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:12px 14px;text-align:left;font:inherit;color:inherit;
    border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer}
  .ovx .c2ads .fp-card.sel{border-color:#5E5CE6;box-shadow:0 0 0 2px rgba(94,92,230,.18)}
  .ovx .c2ads .fp-card.fp-tot{cursor:default;background:rgba(118,118,128,.06)}
  .ovx .c2ads .fp-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .ovx .c2ads .fp-ch>b{font-size:15px;font-weight:600;color:#1C1C1E;min-width:0;line-height:1.3}
  .ovx .c2ads .fp-cp{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .ovx .c2ads .fp-cp>.num{font-size:14px;font-weight:700;color:#1C1C1E;white-space:nowrap;line-height:1.3}
  .ovx .c2ads .fp-cp>small{font-size:11.5px;color:#6B6B76;white-space:nowrap}
  .ovx .c2ads .fp-cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ovx .c2ads .fp-cg>span{display:flex;flex-direction:column;gap:1px;font-size:12px;color:#6B6B76;white-space:nowrap}
  .ovx .c2ads .fp-cg b{font-size:16px}
  .ovx .c2ads .fp-cw{font-size:12.5px;color:#6B6B76}
  .ovx .c2ads .fp-cw.neg{color:#C2413A;font-weight:600}
}

/* телефон: четыре варианта периода — своей строкой; у «Всего времени» строка о датах видна и здесь */
@media (max-width:760px){
  .ovx .c2ads .ctl .seg{flex:1 1 100%!important}
  .ovx .c2ads .ctl .seg button{flex:1 1 auto;padding-left:6px;padding-right:6px}
  /* длинный свой период («15 декабря 2025 – 10 января 2026») переносится на вторую строку, а не уходит вбок */
  .ovx .c2ads .stepper .pcal{flex:1 1 auto;min-width:0;height:auto;min-height:38px;padding:4px 6px;font-size:15px}
  .ovx .c2ads .stepper .pcal span{min-width:0;white-space:normal;overflow:visible;text-align:center;line-height:1.25}
  .ovx .c2ads .stepper>button[data-step]{flex:none}
  .ovx .c2ads .ctl-cap.ads-acap{display:block!important;margin:-6px 0 0}
}

@container ovx (max-width:900px){
  .ovx .c2ads .ads-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "fun"}
}
@container ovx (max-width:1000px){
  .ovx .c2ads .k-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container ovx (max-width:640px){
  .ovx .c2ads{gap:14px}
  .ovx .c2ads .k-kpis{gap:12px}
  .ovx .c2ads .k-kpi-v .ads-gv{gap:7px}
  .ovx .c2ads .ads-gauge{width:46px}
  .ovx .c2ads .ads-ll,.ovx .c2ads .ads-cs{display:none}
  .ovx .c2ads .ads-ls{display:inline}
  .ovx .c2ads .k-kpi-d{font-size:12.5px!important}
  .ovx .c2ads .ads-grid{gap:14px}
  .ovx .c2ads .card{padding:18px 16px;gap:12px}
  .ovx .c2ads .ads-h h2,.ovx .c2ads .ads-fh h2{font-size:18px}
  .ovx .c2ads .ads-sub{font-size:13px}
  .ovx .c2ads .fn2-s{min-height:66px}
  .ovx .c2ads .fn2-s b{font-size:18px}
  .ovx .c2ads .fn2-s small{font-size:12px}
  .ovx .c2ads .ads-split-l{gap:6px 16px;font-size:13px}
}

/* =====================================================================
   «Оплата за отзывы» (.kv.rv)
   ===================================================================== */
.kv.rv{gap:20px}
.rv .k-btn{background:#4A48B8!important;color:#fff!important;box-shadow:0 8px 18px -10px rgba(74,72,184,.75)}
.rv .k-btn:hover{background:#3F3DA8!important}
.rv .k-btn2{background:rgba(255,255,255,.72);border:1px solid rgba(60,60,67,.14);color:#1C1C1E;font-weight:600}
.rv .k-btn2:hover{background:#fff}
.rv .k-link,.rv .k-link:visited{color:#4A48B8;font-weight:600}
.rv .rv-empty{margin:0;padding:18px 22px;border-radius:22px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75)}
.rv .k-h{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:14px}
.rv .k-h .k-sub{font-size:14px}
.rv .rv-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:13.5px;font-weight:600;color:#3C3C43;
  background:rgba(118,118,128,.12);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums}
.rv .k-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
/* оттенок плитки по tint: в c2.css цикл по nth-child сильнее класса c2-t-*, поэтому повторяем оттенки здесь */
.rv .k-kpis>.k-kpi.c2-t-indigo{--t1:rgba(94,92,230,.24);--t2:rgba(150,110,230,.08);--ts:rgba(94,92,230,.42);--tc:#4A48B8;--tb:rgba(94,92,230,.13)}
.rv .k-kpis>.k-kpi.c2-t-teal{--t1:rgba(52,170,180,.22);--t2:rgba(52,170,180,.07);--ts:rgba(52,170,180,.4);--tc:#1B6E77;--tb:rgba(52,170,180,.15)}
.rv .k-kpis>.k-kpi.c2-t-amber{--t1:rgba(240,166,60,.22);--t2:rgba(240,166,60,.07);--ts:rgba(240,166,60,.4);--tc:#975A08;--tb:rgba(240,166,60,.17)}
.rv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.rv-row.one{grid-template-columns:minmax(0,1fr)}
.rv-row>.k-card{margin:0}
.rv .k-kpi-v.k-warn{color:#7A4806}
.rv-mcard{display:flex;flex-direction:column;gap:14px}
.rv-mcard .k-h{margin-bottom:0}
.rv-chart{display:block;margin-top:2px}
.rv-chart .rv-sel{color:#1C1C1E;font-weight:700}
.rv .k-more>summary{color:#1C1C1E}
.rv .k-table th{color:#6B6B76}
.rv-sku tr.rv-bad td{background:rgba(240,166,60,.1)}
.rv .rv-del,.rv .rv-rm{background:rgba(221,95,88,.1);border-color:rgba(221,95,88,.3)}
.rv .rv-del:hover,.rv .rv-rm:hover{background:rgba(221,95,88,.18)}
.rv-new .k-h h2{margin:0}

@media (max-width:1000px){
  .rv-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .kv.rv{gap:14px}
  .rv-row{gap:14px}
  .rv .rv-long{display:none}
  .rv .k-kpi-d{font-size:12.5px!important}
  .rv .k-kpi-d>span:first-child{white-space:nowrap}
  /* подписи месяцев: на телефоне через одну, выбранный месяц всегда виден */
  .rv-chart>span:last-child>span{font-size:12px}
  .rv-chart>span:last-child>span:nth-child(even):not(:has(.rv-sel)){visibility:hidden}
  .rv .k-table.k-stack td{border-bottom:0!important}
  .rv .k-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv .k-kpis>.k-kpi:first-child{grid-column:1/-1}
  .rv .k-top-r{width:100%}
  .rv .k-top-r .dash-seg{flex:1}
  .rv .k-top-r .dash-seg button{flex:1}
}

/* Подсказка у графика внутри всплывающего окна: в c2.css у .c2-tip z-index 520, а у окна 600, и подсказка
   уходит под окно. Пока основа не поправлена, поднимаем подсказку только когда открыто окно этой группы. */
body:has(.c2-layer [data-c2t^="ads-"]) > .c2-tip,body:has(.c2-layer [data-c2t^="rv-"]) > .c2-tip{z-index:610}