/* Места под объявления (shared ads). Файл подключается только при включённых флагах.
   Цвета - только переменные сайта; у публичных страниц (/pricing, лендинг) свои имена
   переменных, поэтому у каждого цвета запасной вариант из их набора. */

/* ---- Калькулятор: дополнительные места. Счётчик - класс страницы (.calc-stepper,
   .stepper, .pcalc-stepper), здесь только отступы секции и подписи. */
.shared-ads{width:var(--calc-col,100%);max-width:100%;box-sizing:border-box;margin:18px auto 0;padding:0;text-align:center;color:var(--text-primary,var(--text))}
.shared-ads-title{display:block;margin:0 0 10px;font-size:13px;font-weight:500;line-height:1.45;color:var(--text-muted,var(--text2))}
.shared-ads .shared-ads-stepper{margin:0 0 8px}
.shared-ads-note{margin:0;font-size:12px;font-weight:400;line-height:1.45;color:var(--text-muted,var(--muted))}
.shared-ads-state{margin:6px 0 0;font-size:12px;font-weight:600;line-height:1.45;color:var(--text-primary,var(--text))}
.shared-ads-status{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-muted,var(--muted))}
.shared-ads-status:empty{display:none}
.shared-ads-status.is-error{color:var(--red,var(--text));font-weight:600}
.shared-ads-link{display:block;margin:6px auto 0;padding:2px;border:0;background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.shared-ads [hidden]{display:none!important}
.shared-ads :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* публичные калькуляторы: подпись как «Двигайте счётчик…», примечания как лесенка цен */
.calc .shared-ads,.pcalc .shared-ads{margin:0 auto 18px}
.calc .shared-ads-title,.pcalc .shared-ads-title{font-size:14px;color:var(--text2)}
.calc .shared-ads-note,.pcalc .shared-ads-note{font-size:13px}
.calc .shared-ads .stepper,.pcalc .shared-ads .pcalc-stepper{margin-bottom:8px}
/* подпись «мест» шириной как «аккаунтов» (ставит скрипт) - кнопки обоих счётчиков в одну линию */
.shared-ads-cap{text-align:left}
/* ---- Калькулятор: «Сколько объявлений должно работать» - кнопки-пакеты (23.09, владелец: «кнопками,
   фиксировано, эргономично, красиво»). На /billing кнопка - .cp-opt страницы (кнопка периода: 14px/500,
   радиус 10, фон --bg-2, рамка --border, выбранная - рамка и заливка акцента); здесь только сетка:
   4 колонки ширины ряда периода - 8 кнопок ровно в 2 ряда (кнопки «Входит» нет, владелец 23.09),
   неполный ряд (раскрытый «Больше») - по центру. */
.shared-ads-want{width:var(--calc-col,100%);max-width:100%;box-sizing:border-box;margin:0 auto 18px;padding:0;text-align:center}
.shared-ads-want .sa-want-q{display:block}
.sa-pkgs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 10px}
.sa-pkgs .sa-pkg{display:block;flex:0 0 calc((100% - 24px) / 4);min-width:0;box-sizing:border-box;padding-left:6px;padding-right:6px;text-align:center;white-space:nowrap;font-family:inherit}
/* число в «Входит N» - та же строка и тот же кегль (у .cp-opt span - подпись скидки, зелёная и мельче) */
.sa-pkgs .sa-pkg .sa-pkg-n{display:inline;margin:0;font-size:inherit;color:inherit}

.sa-pkgs .sa-pkg[hidden]{display:none!important}
/* (23.09) «Больше» - отдельной кнопкой по центру в полширины, а не одиночкой в последнем ряду */

.sa-pkgs .sa-pkg:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border)}
.sa-pkgs .sa-pkg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* строка под рядом: одна живая (хватает мест / сколько докупим и почём) и мелко - ступени цены */
.sa-want-live{margin:0;font-size:13px;font-weight:500;line-height:1.45;color:var(--text-primary,var(--text))}
.sa-want-live:empty{display:none}
.sa-want-tiers{margin:3px 0 0;font-size:12px;font-weight:400;line-height:1.45;color:var(--text-muted,var(--muted))}
.shared-ads-note,.sa-want-hint,.sa-want-q,.sa-want-live,.sa-want-tiers{text-wrap:balance}
/* ступени - одной строкой (после text-wrap: он тоже задаёт перенос): на ПК строка шире колонки и стоит по центру карточки */
/* (23.09) строка ступеней длиннее прежней - переносится ровно, в ширину ряда кнопок, не за карточку */
.sa-want-tiers{max-width:420px;margin-left:auto;margin-right:auto}
/* публичные калькуляторы (/pricing, лендинг): своих кнопок периода там нет - тот же вид кнопки
   цветами страницы (у них свои имена переменных) */
.calc .sa-pkgs,.pcalc .sa-pkgs{max-width:420px;margin:16px auto 10px}
.calc .sa-pkg,.pcalc .sa-pkg{padding-top:9px;padding-bottom:9px;
  border:1px solid var(--border);border-radius:10px;background:var(--bg2,color-mix(in srgb,var(--text) 4%,var(--card)));
  color:var(--text);font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;transition:border-color .12s,background-color .12s}
@media (hover:hover){.calc .sa-pkg:hover,.pcalc .sa-pkg:hover{border-color:var(--accent)}}
/* (ревью 23.09) на телефоне «наведение» залипает на месте касания: после «Больше» под пальцем
   встаёт 30 000 и выглядел бы вторым выбранным - у невыбранных пакетов рамка обычная
   (на /billing это же правило снимает :hover кнопки периода страницы) */
@media (hover:none){.sa-pkgs .sa-pkg:not(.active):hover{border-color:var(--border)}}
.calc .sa-pkg.active,.pcalc .sa-pkg.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));box-shadow:0 0 0 1px var(--accent) inset}
.calc .sa-want-live,.pcalc .sa-want-live{font-size:14px;color:var(--text)}
.calc .sa-want-tiers,.pcalc .sa-want-tiers{font-size:13px;color:var(--muted)}
/* самые узкие телефоны (320 px): «100 000» в колонке 52 px - кегль на ступень меньше, поля уже */
@media (max-width:359px){.sa-pkgs .sa-pkg{padding-left:2px;padding-right:2px;font-size:13px}}
/* узкий экран: скрытый счётчик мест с max=1000000 не держит ширину 92 px */
@media (max-width:768px){.shared-ads-stepper input{min-width:0}}
.sa-nowrap{white-space:nowrap}
.calc .shared-ads-want,.pcalc .shared-ads-want{margin:0 auto 24px}
/* невидимый двойник подписи слева - той же ширины, что подписи справа: счётчики ровно по центру
   карточки (/pricing его уже имеет на ПК, у главной его не было - счётчик стоял левее на 44 px) */
.calc .stepper::before{min-width:var(--sa-cap-w,0)}
@media (min-width:769px){.pcalc .pcalc-stepper::before{content:'';visibility:hidden;min-width:var(--sa-cap-w,0)}}
/* итог калькулятора в кабинете: строки не рвём по словам, пока идёт пересчёт - приглушаем */
.calc-recap[data-shared-ads] .rc-sub{white-space:normal}
.calc-recap.is-stale{opacity:.5}

/* ---- Плашка «Работают N из M» - одна на биддере, ИИ и в списке объявлений */
.sa-banner{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:14px 20px;box-sizing:border-box;
  background:var(--bg-card,var(--card));border:1px solid var(--border);border-radius:12px;color:var(--text-primary)}
.sa-banner[hidden]{display:none!important}
.sa-banner__text{flex:1 1 auto;min-width:0}
.sa-banner__main{font-size:14px;font-weight:600;line-height:1.4;color:var(--text-primary)}
.sa-banner__main b{font-weight:700}
.sa-banner__note{margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--text-muted)}
/* кнопка «Докупить N мест» - одна на всех экранах: плашка, отказ сохранения, страница 409 */
.sa-buy,html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn.btn-primary{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;
  height:36px;padding:0 16px!important;border:0!important;border-radius:8px!important;background:var(--accent)!important;color:#fff!important;
  font-family:inherit;font-size:12.5px!important;font-weight:600!important;line-height:1.2;white-space:nowrap;text-decoration:none!important;
  box-shadow:0 1px 2px rgba(0,0,0,.2);cursor:pointer;transition:filter .15s,box-shadow .15s}
.sa-buy:hover,html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn.btn-primary:hover{filter:brightness(1.08);color:#fff!important;
  box-shadow:0 4px 14px color-mix(in oklch,var(--accent),transparent 62%)}
.sa-link,html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn:not(.btn-primary){display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;
  height:36px;padding:0 16px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--bg-2)!important;
  color:var(--text-primary)!important;font-family:inherit;font-size:12.5px!important;font-weight:600!important;line-height:1.2;white-space:nowrap;
  text-decoration:none!important;box-shadow:none;cursor:pointer}
.sa-link:hover,html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn:not(.btn-primary):hover{color:var(--accent)!important;border-color:var(--accent)!important}
.sa-buy:focus-visible,.sa-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Объявление без места: полупрозрачное, работает только ручное */
.ad-noslot{opacity:.5;transition:opacity .15s}
.sa-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Отказ сохранения внутри формы (JSON 409) - тем же видом, что плашка */
.ad-quota-warning{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:14px 20px;box-sizing:border-box;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:14px;line-height:1.4}
.ad-quota-warning[hidden]{display:none}
.ad-quota-warning p{flex:1 0 100%;margin:0;font-size:14px;font-weight:600;line-height:1.4}
.ad-quota-warning:focus{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Страница отказа 409 без JavaScript (разметка в shared_ad_web.py): карточка сайта */
html body .content>.lock-banner:not([class*="lock-banner--"]){display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;max-width:720px;margin:0 auto 14px;text-align:center;
  padding:16px 20px;box-sizing:border-box;background:var(--bg-card);border:1px solid var(--border);border-radius:12px}
html body .content>.lock-banner:not([class*="lock-banner--"])>p{flex:1 0 100%;margin:0;font-size:14px;font-weight:600;line-height:1.45;color:var(--text-primary)}
html body .content>.lock-banner:not([class*="lock-banner--"])>p+p{margin-top:-4px;font-size:12.5px;font-weight:400;color:var(--text-muted)}

@media (max-width:768px){
  /* шапка «Оплаты»: ячейка мест - четвёртой в том же ряду, а не второй строкой */
  html body .billing-sub:has(.sub-cell--places){grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .sa-banner{flex-direction:column;align-items:stretch;gap:10px;margin:0 0 12px;padding:12px 14px}
  .sa-banner__main{font-size:13px}
  .sa-banner__note{font-size:12px}
  .sa-buy,.sa-link{width:100%;height:38px;border-radius:10px!important}
  html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn.btn-primary,
  html body .content>.lock-banner:not([class*="lock-banner--"])>a.btn:not(.btn-primary){width:100%;height:38px!important;min-height:38px!important;border-radius:10px!important}
  .ad-quota-warning,html body .content>.lock-banner:not([class*="lock-banner--"]){padding:12px 14px}
  .ad-quota-warning p,html body .content>.lock-banner:not([class*="lock-banner--"])>p{font-size:13px}
}
/* (24.09 владелец: «этот момент более жирный, чтоб не запутывать») главная строка подсказки -
   жирная и тёмная на всех страницах; на /billing .card * {font-weight:inherit} тянул её в 500 */
#adWantSection .sa-want-lead{margin:4px 0 8px;font-size:13.5px;line-height:1.4;text-align:center;text-wrap:balance;font-weight:700 !important;color:var(--text-primary,var(--text)) !important}
@media (min-width:769px){#adWantSection .sa-want-lead{white-space:nowrap}}

/* (24.09 владелец: «объявления суммируются… подсказку, которая раздвигается, как „О тарифе“»)
   вид кнопки - как .hint-fold-btn «О тарифе»: 12.5/600, значок «?» 14, шеврон 13, зазор 8 */
#adWantSection .sa-sum-fold{margin-top:10px;padding-bottom:8px}
#adWantSection .sa-sum-fold>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:12.5px;font-weight:600 !important;color:inherit;white-space:nowrap;transition:color .12s}
#adWantSection .sa-sum-fold>summary::-webkit-details-marker{display:none}
#adWantSection .sa-sum-fold>summary:hover{color:var(--accent)}
#adWantSection .sa-sum-fold .hf-chev{margin-left:2px;opacity:.8;transition:transform .18s ease}
#adWantSection .sa-sum-fold[open] .hf-chev{transform:rotate(180deg)}
#adWantSection .sa-sum-fold-body{margin-top:6px}
/* (24.09 владелец: «подпись вторым рядом в кнопках объявлений») «1 000 / объявлений»; у «без доплаты» и «Больше» - своё */
#adWantSection .sa-pkg[data-ads]{padding-top:3px !important;padding-bottom:3px !important;line-height:1.2}
#adWantSection .sa-pkg[data-ads]::after{content:'объявлений';display:block;font-size:10px;line-height:12px;font-weight:500;color:var(--text-muted,var(--text2))}