/* spot_create_extra.css — волна 6b переноса холста (подача объявления): «Качество объявления» и «Продать быстрее»
   (include/spot_create_quality.php), шаг «Техосмотр» (include/spot_create_pti.php), окно после публикации
   (include/spot_create_promo.php, поверх стилей окна «Продвижение» из spot_cabinet.css). Цвета и размеры — токены spot_ui.css.
   Мобильный вид основной; без зависимости от наведения; нижние отступы с учётом безопасной зоны. */

.spot-cq-wrap,
.spot-cpti,
.spot-cdone {
    font-family: var(--spot-font);
    color: var(--spot-ink);
}

/* styles.css красит все span в label формы подачи (.ads-form-ajax label span { color: red }) — у наших блоков цвет свой */
.spot-cq-wrap label span,
.spot-cpti label span {
    color: inherit;
}

.spot-cq-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spot-cq-wrap .spot-ico {
    flex: 0 0 auto;
}

/* ---------- Качество объявления ---------- */
.spot-cq,
.spot-cq-fast {
    padding: 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.spot-cq-t,
.spot-cq-fast-t {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cq-pct {
    font-size: 16px;
    font-weight: 800;
    color: var(--spot-amber);
    font-variant-numeric: tabular-nums;
}

.spot-cq.is-full .spot-cq-pct {
    color: var(--spot-green-fg);
}

.spot-cq-bar {
    height: 6px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--spot-line);
}

.spot-cq-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--spot-green);
    transition: width .25s ease-out;
}

.spot-cq-sub,
.spot-cq-fast-sub {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cq-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spot-cq-item[hidden] {
    display: none;
}

.spot-cq-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 14px;
    line-height: 19px;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
}

.spot-cq-btn:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
    border-radius: var(--spot-radius-s);
}

.spot-cq-l {
    flex: 1 1 auto;
    min-width: 0;
}

.spot-cq-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid var(--spot-field-border);
    border-radius: 50%;
}

.spot-cq-ico {
    display: none;
    flex: 0 0 18px;
    color: var(--spot-green-fg);
}

.spot-cq-chev {
    flex: 0 0 16px;
    color: var(--spot-mut);
}

.spot-cq-item.is-ok .spot-cq-btn {
    min-height: 32px;
    padding: 3px 0;
    font-weight: 500;
    color: var(--spot-ink-2);
    cursor: default;
}

.spot-cq-item.is-ok .spot-cq-dot,
.spot-cq-item.is-ok .spot-cq-chev {
    display: none;
}

.spot-cq-item.is-ok .spot-cq-ico {
    display: block;
}

/* ---------- Продать быстрее (07.10: компактный список — одна строка на пакет; у выбранного — фишки срока, подпись и «Что входит») ---------- */
.spot-cq-fast-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.spot-cq-fast-t {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.spot-cq-fast-t .spot-ico {
    color: var(--spot-red-fg);
}

/* выбранное в свёрнутом виде (только телефон; на десктопе список виден целиком) */
.spot-cq-fast-pick {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--spot-mut);
}

.spot-cq-fast-pick.is-set {
    font-weight: 700;
    color: var(--spot-red-dark-fg);
}

.spot-cq-fast-sub {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 16px;
}

.spot-cq-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* рамка выбранного — внутренней тенью: размер карточки при выборе не меняется */
.spot-cq-opt {
    position: relative;
    margin: 0;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
}

.spot-cq-opt.is-on {
    border-color: var(--spot-red);
    box-shadow: inset 0 0 0 1px var(--spot-red);
    background: var(--spot-red-soft);
}

.spot-cq-opt--none {
    border-color: transparent;
}

.spot-cq-opt--none.is-on {
    border-color: transparent;
    box-shadow: none;
    background: none;
}

.spot-cq-opt-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    cursor: pointer;
}

/* своя точка радио: styles.css прячет нативные радиокнопки формы подачи */
.spot-cq-opt .spot-cq-radio {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.spot-cq-opt .spot-cq-rdot {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid var(--spot-field-border);
    border-radius: 50%;
    background: var(--spot-surface);
}

.spot-cq-opt .spot-cq-radio:checked + .spot-cq-rdot {
    border: 6px solid var(--spot-red);
}

.spot-cq-opt .spot-cq-radio:focus-visible + .spot-cq-rdot {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cq-opt-ico.spot-badge {
    flex: 0 0 28px;
    border: 1px solid var(--spot-line);
}

.spot-cq-opt .spot-cq-opt-ico.spot-badge--premium,
.spot-cq-opt .spot-cq-opt-ico.spot-badge--turbo {
    border-color: var(--spot-ink);
    color: #FFFFFF;
}

.spot-cq-opt-n {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
}

.spot-cq-opt-nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Рекомендуем» — бирка на верхней рамке карточки: названию и сумме в строке ширину не отнимает */
.spot-cq-opt .spot-cq-rec {
    position: absolute;
    top: -9px;
    left: 12px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--spot-red);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.spot-cq-opt-p {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* у выбранного пакета: фишки срока, подпись, «Что входит» */
.spot-cq-more {
    display: none;
    padding: 0 12px 10px;
}

.spot-cq-opt.is-on .spot-cq-more {
    display: block;
}

.spot-cq-tiers {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
}

.spot-cq-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px 2px;
    border: 1px solid var(--spot-field-border);
    border-radius: var(--spot-radius-s);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-family: var(--spot-font);
    cursor: pointer;
    touch-action: manipulation;
}

.spot-cq-tier > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-cq-tier-d {
    font-size: 12px;
    line-height: 16px;
    color: var(--spot-ink-2);
}

.spot-cq-tier-p {
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.spot-cq-tier.is-on {
    border-color: var(--spot-red);
    box-shadow: inset 0 0 0 1px var(--spot-red);
}

.spot-cq-tier:focus-visible,
.spot-cq-det-t:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cq-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.spot-cq-cap {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
    color: var(--spot-red-dark-fg);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.spot-cq-det-t {
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0;
    padding: 0 8px 0 0;
    border: 0;
    background: none;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.spot-cq-det-t::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 6px 3px 2px;
    border-left: 2px solid var(--spot-mut);
    border-bottom: 2px solid var(--spot-mut);
    transform: rotate(-45deg);
}

.spot-cq-det-t[aria-expanded="true"]::after {
    margin-bottom: -2px;
    transform: rotate(135deg);
}

.spot-cq-det {
    margin: 0;
    padding: 0 16px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--spot-ink-2);
}

.spot-cq-det[hidden] {
    display: none;
}

/* ---------- кольцо качества (десктоп, колонка справа) ---------- */
.spot-cq-ring {
    position: relative;
    display: none;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.spot-cq-ring svg {
    display: block;
}

.spot-cq-ring-bg {
    stroke: var(--spot-line);
}

.spot-cq-ring-fg {
    stroke: var(--spot-amber);
    transition: stroke-dasharray .25s ease-out;
}

.spot-cq.is-full .spot-cq-ring-fg {
    stroke: var(--spot-green);
}

.spot-cq-ring b {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.spot-cq-head-tx {
    flex: 1 1 auto;
    min-width: 0;
}

.spot-cq-head-sum {
    display: none;
}

/* ---------- Шаг «Техосмотр» ---------- */
.spot-cpti[hidden],
.spot-cpti [hidden] {
    display: none !important;
}

.spot-cpti {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cpti-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.spot-cpti-t {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}

.spot-cpti-sub {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

/* переключатель как в форме (зелёный) */
.spot-cpti-sw {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 44px;
    margin: 0;
    cursor: pointer;
}

.spot-cpti-sw input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.spot-cpti-sw-track {
    position: absolute;
    top: 8px;
    right: 0;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--spot-field-border);
    transition: background .2s;
}

.spot-cpti-sw-track::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.spot-cpti-sw input:checked + .spot-cpti-sw-track {
    background: var(--spot-green);
}

.spot-cpti-sw input:checked + .spot-cpti-sw-track::after {
    transform: translateX(-24px);
}

.spot-cpti-sw input:focus-visible + .spot-cpti-sw-track {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cpti-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spot-cpti-card {
    padding: 14px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-bg);
}

.spot-cpti-lead {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
}

.spot-cpti-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.spot-cpti-plate {
    display: flex;
    align-items: stretch;
    height: 60px;
    overflow: hidden;
    border: 3px solid var(--spot-ink);
    border-radius: 10px;
    background: var(--spot-surface);
}

.spot-cpti.is-bad .spot-cpti-plate {
    border-color: var(--spot-red);
}

.spot-cpti-plate:focus-within {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cpti-flag {
    display: flex;
    flex: 0 0 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: #1F4FA8;
    color: #FFFFFF;
}

.spot-cpti-flag b {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.spot-cpti-flag svg {
    border-radius: 2px;
}

.spot-cpti-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.spot-cpti-input::placeholder {
    color: var(--spot-mut);
    opacity: .7;
}

.spot-cpti-hint,
.spot-cpti-err {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cpti-err {
    font-weight: 700;
    color: var(--spot-red-fg);
}

.spot-cpti-confirm {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 4px 0;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
    cursor: pointer;
}

.spot-cpti-confirm input {
    position: absolute;
    top: 4px;
    right: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.spot-cpti-box {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid var(--spot-field-border);
    border-radius: 6px;
    background: var(--spot-surface);
}

.spot-cpti-confirm input:checked + .spot-cpti-box {
    border-color: var(--spot-red);
    background: var(--spot-red);
}

.spot-cpti-confirm input:checked + .spot-cpti-box::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 6px;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
}

.spot-cpti-confirm input:focus-visible + .spot-cpti-box {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cpti-lock {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cpti-lock svg {
    flex: 0 0 14px;
    margin-top: 2px;
}

.spot-cpti-state {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius-l);
}

.spot-cpti-state-ico {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
}

.spot-cpti-state-tx,
.spot-cpti-sample-tx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cpti-state-tx strong {
    font-size: 15px;
    line-height: 20px;
    color: var(--spot-ink);
}

.spot-cpti-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--spot-ink-2);
}

.spot-cpti-sample {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-green-soft);
}

.spot-cpti-sample-ico {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--spot-surface);
    color: var(--spot-green-fg);
}

.spot-cpti-sample-tx strong {
    font-size: 15px;
    line-height: 20px;
    color: var(--spot-green-fg);
}

.spot-cpti-off p {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cpti-skip {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--spot-ink-2);
    font-family: var(--spot-font);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.spot-cpti-skip:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

/* ---------- Окно после публикации (доска CreateDone) ----------
   Карточки пакетов (значки, подписи, цены) — общие с окном «Продвижение» кабинета: include/spot_promo_packages.php,
   правила .spot-cab-promo в spot_cabinet.css. Здесь — только отличия окна после публикации. */
.spot-cdone .spot-cab-promo-bar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.spot-cdone-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 16px;
    text-align: center;
}

.spot-cdone-head [data-st-show] {
    display: none;
}

.spot-cdone-head[data-st="moderation"] [data-st-show="moderation"],
.spot-cdone-head[data-st="active"] [data-st-show="active"],
.spot-cdone-head[data-st="other"] [data-st-show="other"] {
    display: inline;
}

.spot-cdone-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
}

.spot-cdone-t {
    min-height: 30px;
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    outline: none;
}

.spot-cdone-sub {
    min-height: 21px;
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--spot-ink-2);
}

a.spot-cdone-ad {
    color: var(--spot-ink);
    text-decoration: none;
}

a.spot-cdone-ad .spot-cab-st {
    margin-top: 4px;
}

.spot-cdone-pti {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
}

/* «Обычное объявление · 30 дней бесплатно» и «Опубликовать без продвижения» — здесь нужны (в кабинете скрыты) */
.spot-cdone .ads-services-tariffs[data-id="0"] .services_ads_name {
    display: block !important;
    flex: 1 0 100%;
    padding-left: 0;
}

.spot-cdone .ads-services-tariffs[data-id="0"] .services_ads_name {
    order: -1;
}

.spot-cdone .ads-services-tariffs[data-id="0"] .services_ads_name span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--spot-ink-2);
}

.spot-cdone .free_action_btn {
    display: flex !important;
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
    min-height: var(--spot-control-h-l);
    margin: 8px 0 0;
    border: 1.5px solid var(--spot-ink);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.spot-cdone .free_action_btn[style*="none"] {
    display: none !important;
}

.spot-cdone-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--spot-control-h-l);
    margin-top: 16px;
    border: 1.5px solid var(--spot-ink);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.spot-cdone-cab:hover,
.spot-cdone-cab:focus {
    color: var(--spot-ink);
    text-decoration: none;
}

.spot-cdone-cab:focus-visible,
a.spot-cdone-ad:focus-visible,
.spot-cdone .free_action_btn:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .spot-cpti {
        padding: 24px;
    }

    .spot-cdone-t {
        font-size: 28px;
        line-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-cq-bar > span,
    .spot-cpti-sw-track,
    .spot-cpti-sw-track::after {
        transition: none;
    }
}

/* в правой колонке десктопа (ad_create.tpl, .spot-create-slot-quality-aside) блоки уже внутри белой карточки — без своей подложки.
   Колонка компактная и липкая (07.10): всегда помещается в окно (1440×900, 1280×720), «Опубликовать» закреплена внизу, середина при нужде прокручивается. */
.spot-create-slot-quality-aside .spot-cq,
.spot-create-slot-quality-aside .spot-cq-fast {
    padding: 0;
    border-radius: 0;
    background: none;
}

.spot-create-slot-quality-aside .spot-cq-wrap {
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--spot-line);
}

.spot-create-slot-quality-aside .spot-cq-fast {
    padding-top: 8px;
    border-top: 1px solid var(--spot-line);
}

.spot-create-slot-quality-aside .spot-cq-ring {
    display: block;
}

.spot-create-slot-quality-aside .spot-cq-bar,
.spot-create-slot-quality-aside .spot-cq-pct {
    display: none;
}

.spot-create-slot-quality-aside .spot-cq-head {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
}

.spot-create-slot-quality-aside .spot-cq-t {
    font-size: 16px;
    line-height: 20px;
}

.spot-create-slot-quality-aside .spot-cq-head-sum {
    display: block;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--spot-ink-2);
}

.spot-create-slot-quality-aside .spot-cq-head[role="button"] {
    cursor: pointer;
}

.spot-create-slot-quality-aside .spot-cq-head[role="button"]::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 0 3px 4px;
    border-left: 2px solid var(--spot-mut);
    border-bottom: 2px solid var(--spot-mut);
    transform: rotate(-45deg);
}

.spot-create-slot-quality-aside .spot-cq.is-open .spot-cq-head[role="button"]::after {
    margin-bottom: -3px;
    transform: rotate(135deg);
}

.spot-create-slot-quality-aside .spot-cq-head:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
    border-radius: var(--spot-radius-s);
}

.spot-create-slot-quality-aside .spot-cq:not(.is-open) .spot-cq-sub,
.spot-create-slot-quality-aside .spot-cq:not(.is-open) .spot-cq-list {
    display: none;
}

.spot-create-slot-quality-aside .spot-cq-sub {
    margin-top: 4px;
}

@media (min-width: 992px) {
    .spot-create-sum {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        padding: 16px;
    }

    .spot-create-sum-top {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 12px;
    }

    .spot-create-sum .spot-edit-sum-img {
        flex: 0 0 72px;
        width: 72px;
        height: 54px;
        margin: 0;
        aspect-ratio: auto;
    }

    .spot-create-sum-txt {
        flex: 1 1 auto;
        min-width: 0;
    }

    .spot-create-sum .spot-edit-sum-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .spot-create-sum .spot-edit-sum-price {
        margin-top: 2px;
        font-size: 18px;
        line-height: 24px;
    }

    /* середина (качество + «Продать быстрее») при нехватке высоты прокручивается внутри колонки, а не выталкивает кнопку */
    .spot-create-slot-quality-aside {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 -8px;
        padding: 0 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .spot-create-slot-quality-aside.is-more {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    }

    .spot-create .spot-create-save {
        flex: 0 0 auto;
        margin-top: 12px;
    }

    .spot-create-slot-quality-aside .spot-cq-opt--none .spot-cq-opt-row {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .spot-create-slot-quality-aside .spot-cq-opt-n,
    .spot-create-slot-quality-aside .spot-cq-opt-p {
        font-size: 14px;
    }

    .spot-create-slot-quality-aside .spot-cq-opt-row {
        gap: 8px;
        min-height: 40px;
    }

    .spot-create-slot-quality-aside .spot-cq-opts {
        gap: 6px;
        margin-top: 8px;
    }

    .spot-create-slot-quality-aside .spot-cq-tier {
        min-height: 40px;
    }

    .spot-create-slot-quality-aside .spot-cq-meta,
    .spot-create-slot-quality-aside .spot-cq-det-t {
        min-height: 30px;
    }

    .spot-create-slot-quality-aside .spot-cq-opt--none .spot-cq-opt-row {
        min-height: 36px;
    }

    .spot-create-slot-quality-aside .spot-cq-head {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-cq-ring-fg {
        transition: none;
    }
}

/* узкие телефоны (320): названия пакетов и заголовок «Продать быстрее» без обрезки, в том числе по-грузински */
@media (max-width: 360px) {
    .spot-cq-opt-row {
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .spot-cq-opt-n,
    .spot-cq-opt-p {
        font-size: 14px;
    }

    .spot-cq-fast-t {
        font-size: 16px;
    }

    .spot-cq-more {
        padding-left: 10px;
        padding-right: 10px;
    }
}