/* spot_cabinet.css — кабинет пользователя, редизайн, волна 5b. Доски: Cabinet, CabinetStates, CabinetAdActions, CabinetDelete,
   CabinetUnpublish, CabinetOrders, CabinetPromo, CabinetServices, CabinetSettings, CabinetSettingsPhone, CabinetSettingsStates,
   CabinetWallet, CabinetWalletHistory, CabinetWalletStates, PayStatus, PayStatusFail, DesktopCabinet.
   Разметка — profile.tpl, include/user_ad_list.php, include/spot_cab_ref.php, pay_status.tpl; поведение — spot_cabinet.js.
   Цвета и размеры только из токенов spot_ui.css. Телефон первичен (< 992), десктоп — @media (min-width: 992px).
   Классы движка, на которые завязан JS (user.js, vendor.js, Services_list.js), не переименовываются — только перекрываются. */

.spot-cab-page,
.spot-pay-page {
    background: var(--spot-bg);
}

.spot-cab-page .spot-cab,
.spot-pay {
    font-family: var(--spot-font);
    color: var(--spot-ink);
}

.spot-cab .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.spot-cab-ico {
    flex-shrink: 0;
    display: block;
}

.spot-cab a:focus-visible,
.spot-cab button:focus-visible,
.spot-cab [tabindex]:focus-visible,
.spot-cab-modal a:focus-visible,
.spot-cab-modal button:focus-visible,
.spot-cab-modal input:focus-visible,
.spot-cab-promo button:focus-visible,
.spot-pay a:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

/* ---------- Кнопки и ссылки ---------- */
.spot-cab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--spot-control-h);
    padding: 0 14px;
    border: 0;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink) !important;
    font-family: var(--spot-font);
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.spot-cab-btn:active {
    opacity: .7;
}

.spot-cab-btn--red {
    background: var(--spot-red);
    color: #FFFFFF !important;
}

.spot-cab-btn--red:active {
    background: var(--spot-red-dark);
    opacity: 1;
}

.spot-cab-btn--wide {
    display: flex;
    width: 100%;
    min-height: var(--spot-control-h-l);
    font-size: 16px;
}

.spot-cab-btn[disabled] {
    opacity: .6;
    cursor: default;
}

.spot-cab-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--spot-focus) !important;
    font-family: var(--spot-font);
    font-size: inherit;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
}

/* ---------- Каркас страницы кабинета ---------- */
.spot-cab-own .spot-cab-gap {
    margin-top: 16px !important;
}

@media (max-width: 991.98px) {
    .spot-cab-own .spot-cab {
        padding-right: calc(16px + var(--spot-safe-left, 0px));
        padding-left: calc(16px + var(--spot-safe-right, 0px));
    }

    .spot-cab-own .spot-cab-crumbs {
        display: none;
    }

    .spot-cab-own .spot-cab-gap {
        display: none;
    }

    /* подразделы: сверху своя строка «‹ Название», боковая колонка скрыта */
    .spot-cab-own:not(.spot-cab-home) .spot-cab-side {
        display: none;
    }

    .spot-cab-own .spot-cab-main > .user-title,
    .spot-cab-own .spot-cab-main > h3.mb35 {
        display: none;
    }

    .spot-cab-own .spot-cab-main {
        min-height: 0;
        padding-bottom: 24px;
    }
}

.spot-cab-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 56px;
    margin: 0 -16px 12px;
    padding: 0 8px;
    border-bottom: 1px solid var(--spot-line);
    background: var(--spot-surface);
}

.spot-cab-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    color: var(--spot-ink) !important;
}

.spot-cab-topbar-t {
    grid-column: 2;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
    color: var(--spot-ink);
}

/* ---------- Карточка профиля ---------- */
.spot-cab-side-in {
    margin-bottom: 16px;
}

.spot-cab-profile {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    gap: 14px;
    align-items: start;
    margin: 0 -16px 16px;
    padding: 16px;
    background: var(--spot-surface);
}

.spot-cab-ava.user-avatar-img {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0;
    overflow: visible;
    border-radius: 50%;
}

.spot-cab-ava.user-avatar-img img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--spot-bg);
}

.spot-cab-ava .spot-cab-ava-btn.user-avatar-replace {
    position: absolute;
    right: auto;
    top: auto;
    left: -2px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--spot-surface);
    border-radius: 13px;
    background: var(--spot-bg);
    color: var(--spot-ink);
    backdrop-filter: none;
    cursor: pointer;
}

.spot-cab-ava .spot-cab-ava-btn::after {
    content: "";
    position: absolute;
    inset: -9px;
}

.spot-cab-profile-info {
    min-width: 0;
}

.spot-cab-name {
    overflow-wrap: anywhere;
    font-size: 20px;
    line-height: 24px;
    font-weight: 800;
}

.spot-cab-company {
    margin-top: 2px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 700;
    color: var(--spot-ink-2);
}

.spot-cab-since {
    margin-top: 4px;
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
}

.spot-cab-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--spot-ink-2) !important;
    text-decoration: none !important;
}

.spot-cab-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--spot-amber);
}

.spot-cab-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink) !important;
}

.spot-cab-share {
    display: none;
}

#user-form-avatar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Меню кабинета (десктоп) ---------- */
.spot-cab-nav {
    padding: 8px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-nav-i,
.spot-cab-nav-s {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--spot-radius);
    color: var(--spot-ink) !important;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    list-style: none;
}

.spot-cab-nav-i::-webkit-details-marker {
    display: none;
}

.spot-cab-nav-t {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spot-cab-nav-i.is-on {
    background: var(--spot-red-soft);
    font-weight: 700;
}

.spot-cab-nav-grp[open] > summary > .spot-cab-ico:last-child {
    transform: rotate(-180deg);
}

.spot-cab-nav-sub {
    padding: 2px 32px 6px 0;
}

.spot-cab-nav-s {
    min-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--spot-ink-2) !important;
}

.spot-cab-nav-s.is-on {
    color: var(--spot-red-fg) !important;
    font-weight: 700;
}

.spot-cab-nav-out {
    margin-top: 8px;
    border-top: 1px solid var(--spot-line);
    border-radius: 0;
    color: var(--spot-red-fg) !important;
}

@media (hover: hover) and (pointer: fine) {
    .spot-cab-nav-i:hover,
    .spot-cab-nav-s:hover {
        background: var(--spot-bg);
    }

    .spot-cab-nav-i.is-on:hover {
        background: var(--spot-red-soft);
    }
}

/* счётчик сообщений (chat.js заполняет .chat-message-counter) */
.spot-cab .chat-message-counter.label-count {
    min-width: 20px;
    height: 20px;
    margin: 0 auto 0 0;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--spot-red);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

/* ---------- «Не дайте себя обмануть» (показ — user.js по cookie) ---------- */
.spot-cab .user-warning-seller-safety.spot-cab-safety {
    position: relative;
    height: auto;
    margin: 0 0 12px;
    padding: 14px 16px 14px 44px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-amber-soft);
}

.spot-cab-safety .seller-safety-text {
    padding: 0;
}

.spot-cab-safety-t {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    color: var(--spot-amber);
}

.spot-cab-safety p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-amber);
}

.spot-cab-safety a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 14px;
    font-weight: 700;
    color: var(--spot-focus) !important;
}

.spot-cab-safety .spot-cab-safety-x.warning-seller-safety-close {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--spot-amber);
    cursor: pointer;
}

/* ---------- Кошелёк (карточка) ---------- */
.spot-cab-wallet,
.spot-cab-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-wallet-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink);
}

.spot-cab-wallet-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.spot-cab-wallet-l {
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
}

.spot-cab-wallet-v,
.spot-cab-balance-v {
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
    white-space: nowrap;
}

.spot-cab-balance-v {
    font-size: 24px;
    line-height: 30px;
}

/* ---------- «Приглашайте друзей» ---------- */
.spot-cab-ref {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--spot-red-soft);
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    box-shadow: inset 0 0 0 1px var(--spot-red-soft);
}

.spot-cab-ref-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--spot-radius);
    background: var(--spot-red-soft);
    color: var(--spot-red-fg);
}

.spot-cab-ref-t {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab-ref-txt p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--spot-ink-2);
}

.spot-cab-ref-link,
.spot-cab-ref-share,
.spot-cab-ref-more {
    grid-column: 1 / -1;
}

.spot-cab-ref-link {
    display: flex;
    gap: 8px;
}

.spot-cab-ref-field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--spot-control-h);
    margin: 0;
    padding: 0 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-field);
    color: var(--spot-mut);
}

.spot-cab-ref-field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 16px;
    text-overflow: ellipsis;
}

.spot-cab-ref-field:focus-within {
    box-shadow: 0 0 0 2px var(--spot-focus);
}

.spot-cab-ref-share {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spot-cab-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--spot-control-h);
    border-radius: var(--spot-radius);
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.spot-cab-share-btn--wa {
    background: var(--spot-green);
}

.spot-cab-share-btn--tg {
    background: var(--spot-focus);
}

/* «Заработано» и «Вывести» (волна 5.1): вывод — обращение в поддержку, сумма — uni_clients_ref_award */
.spot-cab-ref-earn {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--spot-line);
}

.spot-cab-ref-earn-sum {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.spot-cab-ref-earn-sum span {
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-mut);
}

.spot-cab-ref-earn-sum strong {
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab-ref-withdraw {
    flex: 0 0 auto;
    gap: 6px;
    text-decoration: none !important;
}

.spot-cab-ref-earn-note {
    flex: 1 0 100%;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-mut);
}

.spot-cab-ref-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    font-size: 14px;
    font-weight: 700;
    color: var(--spot-focus) !important;
    text-decoration: none !important;
}

/* ---------- Плитки меню (телефон) ---------- */
.spot-cab-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
}

.spot-cab-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 78px;
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    color: var(--spot-ink) !important;
    font-family: var(--spot-font);
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-align: right;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.spot-cab-tile:active {
    background: var(--spot-field);
}

.spot-cab-tile-t {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    overflow-wrap: anywhere;
}

.spot-cab-tile .chat-message-counter.label-count {
    position: absolute;
    top: 12px;
    left: 12px;
}

.spot-cab-tile-chev {
    position: absolute;
    top: 14px;
    left: 12px;
    color: var(--spot-mut);
}

.spot-cab-tile--out {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    color: var(--spot-red-fg) !important;
}

/* ---------- «Объявления» и вкладки ---------- */
.spot-cab-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* полировка: на телефоне кнопка «Как видят покупатели» переносится под заголовок, а не выходит за экран */
    gap: 12px;
    margin: 8px 0 12px;
}

.spot-cab-h.user-title {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 800;
}

.spot-cab-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--spot-control-h);
    padding: 0 14px;
    border-radius: var(--spot-radius);
    background: var(--spot-red);
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.spot-cab .user-menu-tab.spot-cab-seg {
    display: flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    overflow-x: auto;
    border: 0;
    border-radius: var(--spot-radius);
    background: var(--spot-field);
    scrollbar-width: none;
}

.spot-cab .user-menu-tab.spot-cab-seg::-webkit-scrollbar {
    display: none;
}

.spot-cab .user-menu-tab.spot-cab-seg > div {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--spot-mut);
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.spot-cab .user-menu-tab.spot-cab-seg > div.active {
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 22, 26, .08);
}

.spot-cab .user-menu-tab-content {
    margin-top: 0;
}

/* ---------- Пустые состояния ---------- */
.spot-cab .user-block-no-result.spot-cab-empty {
    width: auto;
    margin: 0 0 12px;
    padding: 24px 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    text-align: center;
}

.spot-cab-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 26px;
    background: var(--spot-bg);
    color: var(--spot-ink-2);
}

.spot-cab-empty p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--spot-ink-2);
}

.spot-cab-empty .spot-cab-empty-t {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 800;
    color: var(--spot-ink);
}

/* ---------- Объявление в списке кабинета ---------- */
.spot-cab-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spot-cab-ad {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-ad-photo {
    position: relative;
    display: block;
    width: 112px;
    height: 84px;
    overflow: hidden;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
}

.spot-cab-ad-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spot-cab-ad-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--spot-mut);
}

.spot-cab-ad-photo .spot-card__badges {
    right: 6px;
    top: 6px;
    gap: 4px;
    max-width: calc(100% - 12px);
}

.spot-cab-ad-photo .spot-badge {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 7px;
}

/* волна 12: текстовая метка «Срочно» шире значка-иконки */
.spot-cab-ad-photo .spot-badge--text {
    width: auto;
    padding: 0 6px;
    font-size: 11px;
}

.spot-cab-ad-body {
    min-width: 0;
}

.spot-cab-st {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.spot-cab-st--green { background: var(--spot-green-soft); color: var(--spot-green-fg); }
.spot-cab-st--amber { background: var(--spot-amber-soft); color: var(--spot-amber); }
.spot-cab-st--red { background: var(--spot-red-soft); color: var(--spot-red-dark-fg); }
.spot-cab-st--mut { background: var(--spot-bg); color: var(--spot-ink-2); }
.spot-cab-st--ink { background: var(--spot-surface); color: var(--spot-ink); box-shadow: inset 0 0 0 1.5px var(--spot-ink); }

.spot-cab-ad-title {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--spot-ink) !important;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.spot-cab-ad-price {
    margin-top: 2px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.spot-cab-ad-price .spot-price-main,
.spot-cab-ad-price .item-grid-price-now {
    font-size: 16px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab-ad-price .spot-price-old {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--spot-mut);
    text-decoration: line-through;
}

.spot-cab-ad-meta {
    margin-top: 2px;
    overflow: hidden;
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-cab-ad-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
}

.spot-cab-ad-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.spot-cab-ad-renew {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cab-renew-off {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.spot-cab-renew-on {
    display: inline;
}

.spot-cab-renew-on .spot-cab-ico {
    display: inline-block;
    margin-left: 3px;
    vertical-align: -3px;
}

.spot-cab-renew-on strong {
    color: var(--spot-green-fg);
}

.spot-cab-renew-on .spot-cab-ico {
    color: var(--spot-green-fg);
}

.spot-cab-ad-renew .spot-cab-link {
    min-height: 32px;
    font-size: 13px;
}

.spot-cab-ad-reason {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-red-soft);
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink);
}

.spot-cab-ad-reason strong {
    color: var(--spot-red-dark-fg);
}

.spot-cab-ad-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.spot-cab-ad-actions .spot-cab-btn {
    flex: 1 1 auto;
    min-width: 0;
}

.spot-cab-ad-actions .spot-cab-btn--promo {
    background: var(--spot-red-soft);
    color: var(--spot-red-dark-fg) !important;
}

.spot-cab-ad-actions .spot-cab-btn--more {
    flex: 0 0 var(--spot-control-h);
    width: var(--spot-control-h);
    padding: 0;
}

.spot-cab-more-label {
    display: none;
}

/* объявление «Заблокировано» / «Продано» — только меню «⋯» справа */
.spot-cab-ad--blocked .spot-cab-ad-actions,
.spot-cab-ad--sold .spot-cab-ad-actions,
.spot-cab-ad--reserved .spot-cab-ad-actions,
.spot-cab-ad--waiting .spot-cab-ad-actions {
    justify-content: flex-end;
}

/* чужой профиль и избранное: подпись статуса поверх единой карточки */
.spot-cab-pub-sold {
    position: relative;
}

.spot-cab-pub-sold > .spot-cab-st {
    position: absolute;
    right: 13px;
    top: 44px;
    z-index: 3;
}

/* ---------- Шторки и окна кабинета (.modal-custom-bg + .spot-cab-modal; показ — vendor.js) ---------- */
.spot-cab-modal.modal-custom-bg {
    z-index: 1060;
    background: var(--spot-scrim);
    font-family: var(--spot-font);
    color: var(--spot-ink);
}

.spot-cab-modal .modal-custom {
    max-width: 440px;
    padding: 0 0 16px;
    border-radius: var(--spot-radius-l);
    box-shadow: var(--spot-shadow-sheet);
    outline: none;
}

.spot-cab-modal--legacy .modal-custom {
    padding: 24px;
}

.spot-cab-modal--legacy h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}

.spot-cab-modal-head {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 60px;
    padding: 12px 16px 4px;
    touch-action: none;
}

.spot-cab-grab {
    display: none;
}

.spot-cab .spot-cab-modal-title,
.spot-cab-modal .spot-cab-modal-title {
    grid-column: 2;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
    color: var(--spot-ink);
}

.spot-cab-modal-x {
    position: relative;
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--spot-bg);
    color: var(--spot-ink);
    cursor: pointer;
}

.spot-cab-modal-x::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.spot-cab-rows {
    padding: 0 12px;
}

.spot-cab-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--spot-radius);
    background: none;
    color: var(--spot-ink) !important;
    font-family: var(--spot-font);
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
    text-align: right;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.spot-cab-row:active {
    background: var(--spot-bg);
}

.spot-cab-row-t {
    flex: 1 1 auto;
    min-width: 0;
}

.spot-cab-row-t small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
    color: var(--spot-ink-2);
}

.spot-cab-row--danger {
    color: var(--spot-red-fg) !important;
}

/* переключатель (checkbox) */
.spot-cab-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 32px;
    margin: 0;
    border-radius: 16px;
    background: var(--spot-field-border);
    cursor: pointer;
    transition: background .18s ease;
}

.spot-cab-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(20, 22, 26, .25);
    transition: transform .18s ease;
}

.spot-cab-switch:checked {
    background: var(--spot-green);
}

.spot-cab-switch:checked::after {
    transform: translateX(-20px);
}

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

.spot-cab-switch[disabled] {
    opacity: .6;
}

/* формы в окнах */
.spot-cab-modal .spot-cab-form {
    padding: 4px 16px 0;
    text-align: right;
}

.spot-cab-modal--dialog .spot-cab-form {
    padding-top: 24px;
    text-align: center;
}

.spot-cab-modal--dialog .spot-cab-modal-title {
    white-space: normal;
    font-size: 19px;
    line-height: 25px;
    font-weight: 800;
}

.spot-cab-lead {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--spot-ink-2);
}

.spot-cab-modal--sheet .spot-cab-lead {
    margin: 0 0 4px;
}

.spot-cab-flabel,
.spot-cab-fld > label,
.spot-cab-lbl {
    display: block;
    margin: 12px 0 6px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--spot-ink);
}

.spot-cab-modal .form-control,
.spot-cab-settings .form-control,
.spot-cab-topup .form-control {
    height: 52px !important; /* styles.css .form-control: height/border/font-size с !important */
    padding: 0 14px;
    border: 1px solid var(--spot-field-border) !important;
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 16px !important;
    box-shadow: none;
}

.spot-cab-modal .form-control:focus,
.spot-cab-settings .form-control:focus,
.spot-cab-topup .form-control:focus {
    border-color: var(--spot-focus) !important;
    box-shadow: 0 0 0 1px var(--spot-focus) !important;
}

.spot-cab-modal .form-control + .form-control {
    margin-top: 12px;
}

.spot-cab-pass {
    position: relative;
}

.spot-cab-pass .form-control {
    padding-left: 52px;
}

.spot-cab-eye {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--spot-ink-2);
    cursor: pointer;
}

.spot-cab-eye[aria-pressed="true"] {
    color: var(--spot-focus);
}

#modal-edit-phone .spot-cab-code {
    margin-top: 12px;
    letter-spacing: .3em;
    text-align: center;
}

#modal-edit-phone .spot-cab-form:has(input[name="phone"][style*="none"]) .spot-cab-flabel {
    display: none;
}

.spot-cab-modal-btns.modal-custom-button,
.spot-cab-modal-btns.modal-custom-button-list,
.spot-cab-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 16px 16px 0;
}

.spot-cab-modal-btns .spot-cab-btn {
    width: 100%;
    min-height: var(--spot-control-h-l);
    margin: 0;
    font-size: 16px;
}

.spot-cab-modal-btns .user-edit-phone-save {
    display: none;
}

.spot-cab-note.spot-cab-modal-note {
    margin: 12px 16px 0;
}

.spot-cab-modal .modal-confirm-content {
    margin: 0;
}

.spot-cab-modal .modal-confirm-content p:empty {
    display: none;
}

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

.spot-cab-modal .confirm-edit-email {
    display: none;
    padding: 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
    font-weight: 600;
}

/* строки с переключателями (уведомления, общие настройки) */
.spot-cab-line {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--spot-line);
    background: none;
    color: var(--spot-ink) !important;
    font-family: var(--spot-font);
    text-align: right;
    text-decoration: none !important;
    cursor: default;
}

.spot-cab-line:last-child {
    border-bottom: 0;
}

label.spot-cab-line,
.spot-cab-line--btn {
    cursor: pointer;
}

.spot-cab-line-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spot-cab-line-l {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.spot-cab-line-v {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--spot-ink-2);
    overflow-wrap: anywhere;
}

.spot-cab .spot-cab-line-act.user-list-change,
.spot-cab-line-act {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px 0 0;
    color: var(--spot-red-fg) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

.spot-cab-line--btn > .spot-cab-ico {
    color: var(--spot-mut);
}

.spot-cab-modal .form-edit-notifications .spot-cab-line {
    border-bottom: 1px solid var(--spot-line);
}

.spot-cab-modal .form-edit-notifications .spot-cab-note {
    margin-top: 12px;
}

@media (max-width: 991.98px) {
    /* на телефоне — шторка снизу (доски CabinetAdActions, CabinetUnpublish, CabinetSettingsPhone, CabinetOrders, CabinetServices) */
    .spot-cab-modal--sheet.modal-custom-bg,
    .spot-cab-modal--legacy.modal-custom-bg {
        align-items: flex-end;
        padding: 0;
        overflow: hidden;
    }

    .spot-cab-modal--sheet .modal-custom,
    .spot-cab-modal--legacy .modal-custom {
        max-width: none !important;
        width: 100%;
        max-height: calc(100% - 40px - var(--spot-safe-top, 0px));
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(16px + var(--spot-safe-bottom, 0px));
        border-radius: var(--spot-radius-sheet) var(--spot-radius-sheet) 0 0;
        animation: spot-cab-up .24s cubic-bezier(.2, .8, .2, 1);
        transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    }

    .spot-cab-modal--legacy .modal-custom {
        padding: 24px 16px calc(16px + var(--spot-safe-bottom, 0px));
    }

    .spot-cab-modal--sheet .spot-cab-grab {
        display: block;
        position: absolute;
        top: 8px;
        right: 50%;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--spot-line);
        transform: translateX(50%);
    }

    .spot-cab-modal--dialog.modal-custom-bg {
        padding: 16px;
    }
}

.spot-cab-modal .modal-custom.animation-modal {
    animation: spot-cab-pop .18s ease-out both; /* вместо fadeInDown 1 с из styles.css */
}

@keyframes spot-cab-pop {
    from { transform: scale(.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes spot-cab-up {
    from { transform: translateY(40px); opacity: .6; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spot-cab-modal .modal-custom {
        animation: none !important;
        transition: none !important;
    }

    .spot-cab-switch,
    .spot-cab-switch::after {
        transition: none;
    }
}

/* ---------- Кошелёк (страница) ---------- */
.spot-cab-sec {
    margin: 0 0 12px;
    padding: 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-sec-t {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab .module-balance h5 {
    display: none;
}

.spot-cab-radios.user-balance-variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spot-cab-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    cursor: pointer;
}

.spot-cab-radio input {
    display: block !important;
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid var(--spot-field-border);
    border-radius: 11px;
    background: var(--spot-surface);
}

.spot-cab-radio input:checked {
    border: 7px solid var(--spot-ink);
}

.spot-cab-radio input:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cab-radio:has(input:checked) {
    border-color: var(--spot-red-soft);
    background: var(--spot-red-soft);
}

.spot-cab .spot-cab-topup .user-balance-variant-1,
.spot-cab .spot-cab-topup .user-balance-variant-2 {
    margin: 0;
}

.spot-cab .user-balance-payment.spot-cab-pays > div.spot-cab-pay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    margin: 0 0 8px;
    padding: 0 16px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
}

.spot-cab .user-balance-payment.spot-cab-pays > div.spot-cab-pay:last-child {
    margin-bottom: 0;
}

.spot-cab .user-balance-payment.spot-cab-pays > div.spot-cab-pay.active {
    border: 2px solid var(--spot-ink);
}

.spot-cab-pay .spot-cab-pay-logo img {
    max-width: 170px;
    max-height: 36px;
}

.spot-cab-pay-check {
    display: none;
    color: var(--spot-red-fg);
}

.spot-cab-pay.active .spot-cab-pay-check {
    display: block;
}

.spot-cab .user-balance-summa.spot-cab-amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spot-cab .user-balance-summa.spot-cab-amounts > div {
    position: relative;
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    min-height: 72px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
}

.spot-cab .user-balance-summa.spot-cab-amounts > div > div {
    text-align: right;
}

.spot-cab .user-balance-summa.spot-cab-amounts > div p {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab .user-balance-summa.spot-cab-amounts > div div span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 700;
    color: var(--spot-green-fg);
}

.spot-cab .user-balance-summa.spot-cab-amounts > div.active {
    border: 2px solid var(--spot-ink);
}

.spot-cab .user-balance-summa.spot-cab-amounts > .spot-cab-amt--custom {
    grid-column: 1 / -1;
    min-height: 60px;
}

.spot-cab .user-balance-summa.spot-cab-amounts > .spot-cab-amt--custom p {
    font-size: 16px;
    line-height: 22px;
}

.spot-cab .user-balance-summa.spot-cab-amounts > div > .spot-cab-amt-pop {
    position: absolute;
    right: auto;
    left: 8px;
    top: -9px;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--spot-red);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
}

.spot-cab .balance-input-amount.spot-cab-field {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    text-align: right;
}

.spot-cab .balance-input-amount.spot-cab-field > div {
    width: auto;
    margin: 0;
}

.spot-cab .balance-input-amount.spot-cab-field label {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.spot-cab-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
}

.spot-cab-paybar {
    margin: 0 0 12px;
}

@media (max-width: 991.98px) {
    .spot-cab-paybar {
        position: sticky;
        bottom: calc(var(--spot-nav-h, 62px) + var(--spot-safe-bottom, 0px) + 8px);
        z-index: 5;
    }

    .spot-cab-paybar .spot-cab-btn {
        box-shadow: 0 4px 16px rgba(20, 22, 26, .16);
    }
}

/* история платежей, счета, рефералы */
.spot-cab-hist {
    margin: 0 0 12px;
    padding: 0 16px;
    list-style: none;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-hist > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 10px 0;
    border-bottom: 1px solid var(--spot-line);
}

.spot-cab-hist > li:last-child {
    border-bottom: 0;
}

.spot-cab-hist-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spot-cab-hist-name {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: var(--spot-ink) !important;
    overflow-wrap: anywhere;
}

.spot-cab-hist-date {
    font-size: 13px;
    line-height: 17px;
    color: var(--spot-mut);
}

.spot-cab-hist-sum {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.spot-cab-hist-sum.is-plus {
    color: var(--spot-green-fg);
}

.spot-cab-hist-sum.is-minus {
    color: var(--spot-red-fg);
}

/* ---------- Настройки ---------- */
.spot-cab-card.user-bg-container {
    margin: 0 0 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-card.spot-cab-lines {
    padding-top: 6px;
    padding-bottom: 6px;
}

.spot-cab-card.spot-cab-lines .spot-cab-sec-t {
    margin-top: 10px;
}

.spot-cab-fld.user-data-item {
    padding: 0 0 4px;
}

.spot-cab-fld .msg-error {
    margin-top: 6px;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600;
    color: var(--spot-red-fg);
}

.spot-cab-fld.is-error .form-control {
    border-color: var(--spot-red) !important;
    box-shadow: 0 0 0 1px var(--spot-red) !important;
}

.spot-cab-segradio {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--spot-radius);
    background: var(--spot-field);
}

.spot-cab-segradio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.spot-cab .spot-cab-segradio input[type="radio"] + label,
.spot-cab-segradio label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    border-radius: 9px;
    color: var(--spot-mut);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.spot-cab .spot-cab-segradio input[type="radio"]:checked + label,
.spot-cab-segradio input:checked + label {
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 22, 26, .08);
}

.spot-cab-segradio input:focus-visible + label {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cab .spot-cab-fld.user-name-company {
    display: none;
}

.spot-cab-prefix {
    display: flex;
    align-items: center;
    height: 52px;
    padding-right: 14px;
    border: 1px solid var(--spot-field-border);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
}

.spot-cab-prefix:focus-within {
    border-color: var(--spot-focus);
    box-shadow: 0 0 0 1px var(--spot-focus);
}

.spot-cab-prefix-t {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--spot-mut);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-cab .spot-cab-prefix .form-control {
    flex: 1 1 110px;
    min-width: 90px;
    height: 50px !important;
    padding: 0 2px 0 12px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.spot-cab .spot-cab-hint.user-info {
    margin-top: 6px;
    padding: 0;
    border-radius: 0;
    background: none;
}

.spot-cab-city .container-custom-search {
    position: relative;
}

/* ---------- Прочие разделы: общий вид карточек (заказы, подписки, статистика, тариф, планировщик) ---------- */
.spot-cab-own .spot-cab-main > .bg-container,
.spot-cab-own .spot-cab-main > .user-bg-container:not(.spot-cab-card),
.spot-cab-own .spot-cab-main .user-menu-tab-content > .bg-container,
.spot-cab-own .spot-cab-main > .user-block-promo {
    margin-bottom: 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-own .spot-cab-main > .user-block-no-result,
.spot-cab-own .spot-cab-main .user-menu-tab-content > .user-block-no-result,
.spot-cab-own .spot-cab-main .bg-container .user-block-no-result {
    width: auto;
    padding: 24px 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    color: var(--spot-ink-2);
}

.spot-cab-own .spot-cab-main .user-block-no-result img {
    height: 72px;
}

.spot-cab-own .spot-cab-main > .user-menu-tab:not(.spot-cab-seg) {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    overflow-x: auto;
    border: 0;
    border-radius: var(--spot-radius);
    background: var(--spot-field);
}

.spot-cab-own .spot-cab-main > .user-menu-tab:not(.spot-cab-seg) > div {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--spot-mut);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.spot-cab-own .spot-cab-main > .user-menu-tab:not(.spot-cab-seg) > div.active {
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-weight: 700;
}

.spot-cab-own .spot-scheduler-intro {
    font-size: 14px;
    line-height: 20px;
    color: var(--spot-ink-2);
}

/* ---------- Реферальная программа: QR-код ---------- */
.spot-cab-qr {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-qr .qr_code {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
}

.spot-cab-qr .qr_code img,
.spot-cab-qr .qr_code canvas {
    width: 128px !important;
    height: 128px !important;
}

.spot-cab-qr-txt {
    min-width: 0;
}

.spot-cab-qr-txt p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--spot-ink-2);
}

.spot-cab-qr-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 575.98px) {
    .spot-cab-qr {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Окно «Продвижение» (#modal-order-service, Services_list.tpl) ---------- */
.spot-cab-promo.modal-service-bg {
    z-index: 1060;
    display: block;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--spot-bg);
    font-family: var(--spot-font);
    color: var(--spot-ink);
}

.spot-cab-promo .modal-service {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 calc(24px + var(--spot-safe-bottom, 0px));
    border-radius: 0;
    outline: none;
}

.spot-cab-promo-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: calc(56px + var(--spot-safe-top, 0px));
    padding: var(--spot-safe-top, 0px) 8px 0;
    border-bottom: 1px solid var(--spot-line);
    background: var(--spot-surface);
}

.spot-cab-promo-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--spot-ink);
    cursor: pointer;
}

.spot-cab-promo-bar-t {
    grid-column: 2;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}

.spot-cab-promo-in {
    padding: 16px;
}

.spot-cab-promo-ad {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
}

.spot-cab-promo-ad:empty {
    display: none;
}

.spot-cab-promo-ad-ph {
    flex: 0 0 84px;
    width: 84px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
}

.spot-cab-promo-ad-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spot-cab-promo-ad-tx {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.spot-cab-promo-ad-t {
    overflow: hidden;
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spot-cab-promo-ad-p {
    font-size: 15px;
    font-weight: 800;
}

.spot-cab-promo-ad-p .spot-price-lari {
    display: none;
}

.spot-cur-lari .spot-cab-promo-ad-p .spot-price-lari {
    display: block;
}

.spot-cur-lari .spot-cab-promo-ad-p .spot-price-usd {
    display: none;
}

.spot-cab-promo-h {
    margin: 16px 0 12px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
    text-align: right;
}

.spot-cab-promo .form-ads-services > .row {
    display: flex;
    flex-direction: column;
    gap: 12px !important;
    margin: 0;
}

.spot-cab-promo .ads-services-tariffs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    box-shadow: none;
    text-align: right;
    cursor: pointer;
}

.spot-cab-promo .ads-services-tariffs.active {
    border: 2px solid var(--spot-red);
}

.spot-cab-promo .ads-services-tariffs-icon {
    order: 1;
    flex: 0 0 40px;
    margin: 0;
}

.spot-cab-promo .ads-services-tariffs-icon span {
    position: static;
    transform: none;
    display: inline-flex;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--spot-radius-s);
}

.spot-cab-promo .ads-services-tariffs-icon img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* значки пакетов из spot_service_packages() вместо картинок админки (include/spot_promo_packages.php, spot_create_extra.js) —
   одинаково в окне после публикации и в «Продвижении» кабинета (решение владельца 01.10) */
.spot-cab-promo .ads-services-tariffs-icon .spot-promo-ico.spot-badge {
    width: 40px;
    height: 40px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius-s);
}

.spot-cab-promo .ads-services-tariffs-icon .spot-badge--premium {
    border-color: var(--spot-ink);
}

.spot-cab-promo .ads-services-tariffs-icon .spot-ico {
    width: 22px;
    height: 22px;
}

.spot-cab-promo .services_ads_name {
    order: 2;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding-left: 90px;
}

.spot-cab-promo .services_ads_name strong {
    font-size: 18px !important;
    line-height: 23px;
    font-weight: 800;
    color: var(--spot-ink);
}

/* «в 10 / в 30 раз больше просмотров» (include/services_tariffs.php) — продающие подписи для продавца, показываем
   (решение владельца 01.10; в волне 5b были скрыты) */
.spot-cab-promo .services_ads_name span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--spot-red-dark-fg);
}

.spot-cab-promo .services_ads_name span:empty {
    display: none;
}

/* место под «Рекомендуем» справа нужно только карточке с этой меткой */
.spot-cab-promo .ads-services-tariffs:not(:has(.ads-services-tariffs-discount)) .services_ads_name {
    padding-left: 0;
}

.spot-cab-promo .ads-services-tariffs-discount {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--spot-red-soft);
    color: var(--spot-red-dark-fg);
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}

/* волна 12: услуга «за день» («Поднять в ТОП») — поле числа дней своей строкой под названием, а не перед значком */
.spot-cab-promo .ads-services-tariffs .input-group {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    margin: 2px 0 0;
}

/* волна 12: варианты срока — фишки 1 / 3 / 7 дней с ценой; строка суммы держит высоту (окно не прыгает при смене варианта) */
.spot-cab-promo .ads-services-tariffs .spot-tiers {
    order: 3;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 2px;
}

.spot-cab-promo .ads-services-tariffs .spot-tier {
    min-width: 0;
    min-height: 52px;
    padding: 6px 4px;
    border: 1px solid var(--spot-line);
    border-radius: 12px;
    background: var(--spot-surface);
    color: var(--spot-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: inherit;
    cursor: pointer;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-d {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-p {
    font-size: 13px;
    color: var(--spot-ink-2);
    line-height: 1.15;
}

.spot-cab-promo .ads-services-tariffs .spot-tier.is-on {
    border: 2px solid var(--spot-red);
    padding: 5px 3px;
    background: var(--spot-red-soft);
}

.spot-cab-promo .ads-services-tariffs .spot-tier.is-on .spot-tier-p {
    color: var(--spot-red-dark-fg);
    font-weight: 700;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-sum {
    order: 5;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 24px;
    margin: 0;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-sum .spot-tier-old {
    color: var(--spot-mut);
    font-size: 13px;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-sum .spot-tier-old:empty,
.spot-cab-promo .ads-services-tariffs .spot-tier-sum .spot-tier-save:empty {
    display: none;
}

.spot-cab-promo .ads-services-tariffs .spot-tier-sum .spot-tier-perday {
    margin-right: auto;
    color: var(--spot-mut);
    font-size: 12px;
}

.spot-cab-promo .services_ads_description {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
}

/* варианты срока: описания всех вариантов — в одной ячейке сетки, виден выбранный; высота карточки не зависит от варианта (Services_list.js, spotStack) */
.spot-cab-promo .services_ads_description.spot-dstack {
    display: grid;
}

.spot-cab-promo .spot-dstack .spot-dv {
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
}

.spot-cab-promo .spot-dstack .spot-dv.is-on {
    visibility: visible;
}

.spot-cab-promo .serv_desc_box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--spot-ink-2);
}

.spot-cab-promo .serv_desc_box img,
.spot-cab-promo .serv_desc_box svg {
    display: none;
}

.spot-cab-promo .serv_desc_box::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 10px;
    margin-top: 3px;
    border-right: 2px solid var(--spot-green);
    border-bottom: 2px solid var(--spot-green);
    transform: rotate(45deg) scale(.8);
}

.spot-cab-promo .serv_desc_box p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

.spot-cab-promo .ads-services-tariffs > p.ads-services-tariffs-price-now {
    display: none;
}

.spot-cab-promo .ads-services-tariffs > strong {
    order: 4;
}

.spot-cab-promo .ads-services-tariffs > strong .ads-services-tariffs-price-now {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-cab-promo .ads-services-tariffs-price-old {
    order: 5;
    margin: 0;
    font-size: 14px;
    color: var(--spot-mut);
    text-decoration: line-through;
}

/* прежняя цена — мелко и зачёркнуто (styles.css делает span крупным); без скидки её нет совсем (services_tariffs.php) */
.spot-cab-promo .ads-services-tariffs-price-old span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.spot-cab-promo .action_services_ads {
    order: 6;
    margin: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
    font-size: 12px;
    font-weight: 700;
}

.spot-cab-promo .services_ads_btn {
    order: 7;
    padding: 0 12px;
    box-shadow: none !important;
    transition: none;
    line-height: 20px;
    flex: 1 0 100%;
    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-family: var(--spot-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.spot-cab-promo .ads-services-tariffs.active .services_ads_btn,
.spot-cab-promo .services_ads_btn.free_action_btn_sub {
    border-color: var(--spot-red);
    background: var(--spot-red);
    color: #FFFFFF;
}

/* пакет «на 1 день» (uid 0) */
.spot-cab-promo .ads-services-tariffs[data-id="0"] .services_ads_name,
.spot-cab-promo .free_action_btn {
    display: none !important;
}

.spot-cab-promo-day-h {
    flex: 1 0 100%;
    font-size: 18px;
    line-height: 23px;
    font-weight: 800;
}

.spot-cab-promo .tariffs_free-box {
    flex: 1 0 100%;
    gap: 0;
    margin: 0;
}

.spot-cab-promo .tariffs_free-block {
    position: relative;
    gap: 12px;
    min-height: 52px;
    border-bottom: 1px solid var(--spot-line);
    color: var(--spot-ink);
    font-size: 15px;
    font-weight: 600;
}

.spot-cab-promo .tariffs_free-block:last-child {
    border-bottom: 0;
}

.spot-cab-promo .tariffs_free-block > img {
    display: none;
}

.spot-cab-promo .tariffs_free-checkbox {
    order: -1;
    position: relative;
}

.spot-cab-promo .tariffs_free-checkbox input[type=checkbox] {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
    visibility: visible;
    cursor: pointer;
}

.spot-cab-promo .tariffs_free-checkbox label {
    width: 22px;
    height: 22px;
    border: 2px solid var(--spot-field-border);
    border-radius: 6px;
    background: var(--spot-surface);
}

.spot-cab-promo .tariffs_free-checkbox label::after {
    display: none;
}

.spot-cab-promo .tariffs_free-checkbox input:checked + label {
    border-color: var(--spot-red);
    background: var(--spot-red);
}

.spot-cab-promo .tariffs_free-checkbox input:checked + label::after {
    content: "";
    display: block;
    top: 3px;
    right: 6px;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 0 2px 2px;
    border-radius: 0;
    background: none;
    transform: rotate(-45deg);
}

.spot-cab-promo .tariffs_free-checkbox input:focus-visible + label {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cab-promo .tariffs_free-price {
    font-weight: 800;
}

.spot-cab-promo-note {
    margin-top: 12px;
}

/* ---------- Статус оплаты ---------- */
.spot-pay {
    padding-top: 16px;
    padding-bottom: 32px;
}

.spot-pay-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 32px 16px 16px;
    border-radius: var(--spot-radius-l);
    background: var(--spot-surface);
    text-align: center;
}

.spot-pay-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 28px;
}

.spot-pay-ico.is-ok {
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
}

.spot-pay-ico.is-fail {
    background: var(--spot-red-soft);
    color: var(--spot-red-fg);
}

.spot-pay-t {
    margin: 16px 0 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
    color: var(--spot-ink);
}

.spot-pay-txt {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--spot-ink-2);
}

.spot-pay-txt a {
    font-weight: 700;
    color: var(--spot-focus) !important;
}

.spot-pay-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

/* ---------- Сообщение внизу экрана ---------- */
.spot-cab-toast {
    position: fixed;
    right: 50%;
    bottom: calc(var(--spot-nav-h, 62px) + var(--spot-safe-bottom, 0px) + 16px);
    z-index: 1100;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: var(--spot-radius);
    background: var(--spot-inv);
    color: #FFFFFF;
    font-family: var(--spot-font);
    font-size: 14px;
    line-height: 19px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
}

.spot-cab-toast.is-on {
    opacity: 1;
    transform: translate(50%, 0);
}

/* ==========================================================================
   Десктоп (≥ 992): меню слева, объявления строкой с кнопками справа (доска DesktopCabinet)
   ========================================================================== */
@media (min-width: 992px) {
    .spot-cab-own .spot-cab {
        max-width: 1344px;
    }

    .spot-cab-profile {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0 0 16px;
        padding: 24px;
        border-radius: var(--spot-radius-l);
    }

    .spot-cab-ava.user-avatar-img,
    .spot-cab-ava.user-avatar-img img {
        width: 72px;
        height: 72px;
    }

    .spot-cab-share {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: var(--spot-control-h);
        margin-top: 4px;
        border: 1.5px solid var(--spot-ink);
        border-radius: var(--spot-radius);
        background: var(--spot-surface);
        color: var(--spot-ink);
        font-family: var(--spot-font);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .spot-cab-own .spot-cab-main > h3.user-title {
        margin: 0 0 16px !important;
        font-size: 28px;
        line-height: 34px;
        font-weight: 800;
    }

    .spot-cab .user-warning-seller-safety.spot-cab-safety {
        padding: 18px 20px 16px 56px;
    }

    .spot-cab-wallet,
    .spot-cab-balance {
        padding: 16px 20px 16px 16px;
    }

    .spot-cab-ref {
        padding: 20px 24px;
    }

    .spot-cab-sechead {
        margin: 24px 0 16px;
    }

    .spot-cab-h.user-title {
        font-size: 28px;
        line-height: 34px;
    }

    .spot-cab-add {
        min-height: var(--spot-control-h-l);
        padding: 0 20px;
    }

    .spot-cab .user-menu-tab.spot-cab-seg {
        display: inline-flex;
        min-width: 480px;
        margin-bottom: 16px;
    }

    .spot-cab-ad {
        grid-template-columns: 200px minmax(0, 1fr) 170px;
        gap: 20px;
        padding: 16px;
    }

    .spot-cab-ad-photo {
        width: 200px;
        height: 150px;
    }

    .spot-cab-ad-photo .spot-badge {
        width: 28px;
        min-width: 28px;
        height: 28px;
    }

    .spot-cab-ad-title {
        font-size: 17px;
        line-height: 22px;
    }

    .spot-cab-ad-price,
    .spot-cab-ad-price .spot-price-main,
    .spot-cab-ad-price .item-grid-price-now {
        font-size: 20px;
        line-height: 26px;
    }

    .spot-cab-ad-actions {
        grid-column: 3;
        flex-direction: column;
    }

    .spot-cab-ad-actions .spot-cab-btn {
        flex: 0 0 auto;
        width: 100%;
    }

    .spot-cab-ad-actions .spot-cab-btn--edit {
        border: 1.5px solid var(--spot-ink);
        background: var(--spot-surface);
    }

    .spot-cab-ad-actions .spot-cab-btn--more {
        flex: 0 0 auto;
        width: 100%;
        padding: 0 14px;
    }

    .spot-cab-more-label {
        display: inline;
    }

    .spot-cab-ad--blocked .spot-cab-ad-actions,
    .spot-cab-ad--sold .spot-cab-ad-actions,
    .spot-cab-ad--reserved .spot-cab-ad-actions,
    .spot-cab-ad--waiting .spot-cab-ad-actions {
        justify-content: flex-start;
    }

    .spot-cab-modal .modal-custom {
        width: 440px;
    }

    .spot-cab-modal--sheet .spot-cab-modal-head {
        padding-top: 16px;
    }

    .spot-cab-settings,
    .spot-cab-topup,
    .spot-cab-own .spot-cab-main > .spot-cab-balance,
    .spot-cab-own .spot-cab-main .user-menu-tab-content > .spot-cab-hist {
        max-width: 720px;
    }

    .spot-cab-paybar .spot-cab-btn--wide {
        max-width: 360px;
    }

    .spot-cab .user-balance-summa.spot-cab-amounts {
        grid-template-columns: repeat(4, 1fr);
    }

    .spot-cab-promo-in {
        padding: 24px 16px;
    }

    .spot-cab-promo-h {
        font-size: 24px;
        line-height: 30px;
    }

    .spot-pay {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .spot-pay-card {
        padding: 40px 32px 32px;
    }

    .spot-cab-toast {
        bottom: 24px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .spot-cab-tile:hover,
    .spot-cab-row:hover {
        background: var(--spot-bg);
    }

    .spot-cab-btn:hover {
        filter: brightness(.97);
    }
}

@media (max-width: 991.98px) {
    .spot-cab-modal--sheet .modal-custom.animation-modal,
    .spot-cab-modal--legacy .modal-custom.animation-modal {
        animation: spot-cab-up .24s cubic-bezier(.2, .8, .2, 1) both;
    }
}
