/* === ads-feed.css === */
/* === БЛОК ЛЕНТЫ ОБЪЯВЛЕНИЙ === */
.ads-feed-section {
    padding: 36px 0;
}

/* === ЗАГОЛОВОК СЕКЦИИ === */
/* === СЕТКА ОБЪЯВЛЕНИЙ === */
.ads-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .ads-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ads-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .ads-grid { grid-template-columns: 1fr; }
}

/* === КАРТОЧКА ОБЪЯВЛЕНИЯ === */
.ad-card {
    background: var(--bg-card);
    border: 1px solid rgba(0, 243, 255, 0.04);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s var(--ease-spring);
    cursor: pointer;
    position: relative;
    box-shadow: var(--card-glow);
    display: flex;
    flex-direction: column;
}

.ad-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 243, 255, 0.15);
    box-shadow: var(--card-glow-h);
}

/* VIP-карточка: золотая рамка и свечение */
.ad-card.ad-card--vip {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.1), var(--card-glow);
}

.ad-card.ad-card--vip:hover {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), var(--card-glow-h);
}

/* Boosted-карточка: лёгкое розовое свечение */
.ad-card.ad-card--boosted {
    border-color: rgba(255, 51, 102, 0.2);
}

.ad-card.ad-card--boosted:hover {
    border-color: rgba(255, 51, 102, 0.4);
}

/* === ИЗОБРАЖЕНИЕ КАРТОЧКИ === */
.ad-iw {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Слой размытой подложки — размывает фон карточки (.ad-iw background-image) */
.ad-iw::before {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    background: rgba(10, 12, 30, 0.18);
    z-index: 0;
    pointer-events: none;
}

.ad-im {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transition: transform 0.4s ease;
}

/* Fallback при ошибке загрузки изображения */
.ad-im.ad-img-error {
    object-fit: contain;
    padding: 24px;
    opacity: 0.6;
    background: var(--bg-secondary);
}

/* === БЕЙДЖИ === */
.ad-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 3;
    letter-spacing: 0.5px;
}

.ab-new {
    background: linear-gradient(135deg, var(--neon-green), #00cc6a);
    color: var(--bg-primary);
}

.ab-hot {
    background: linear-gradient(135deg, var(--secondary), #ff3366);
    color: #fff;
}

.ab-vip {
    background: linear-gradient(135deg, var(--gold), #ffaa00);
    color: var(--bg-primary);
}

/* === КНОПКА ИЗБРАННОГО === */
.ad-fav {
    position: absolute;
    top: 8px;
    right: 48px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border: none;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    z-index: 3;
}

.ad-fav:hover { background: var(--secondary); transform: scale(1.15); }
.ad-fav.active { background: var(--secondary); color: #fff; }


/* === КНОПКА БЫСТРОГО ПРОСМОТРА (ГЛАЗИК) === */
.ad-quick-view {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
z-index: 3;
padding: 0;
}
.ad-quick-view:hover {
background: rgba(0, 243, 255, 0.35);
transform: scale(1.15);
box-shadow: var(--glow-cyan);
}
.ad-quick-view svg {
width: 18px;
height: 18px;
pointer-events: none;
}
.ad-quick-view:focus-visible {
outline-offset: 0;
box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.5);
}

/* === КОНТЕНТ КАРТОЧКИ === */
.ad-cnt {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ad-ttl {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    color: var(--text-primary);
}

.ad-ttl-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.ad-ttl-link:hover {
    color: var(--neon-cyan);
}

.ad-pr {
    font-size: 18px;
    font-weight: 800;
    color: var(--neon-cyan);
    margin-bottom: 8px;
    font-family: var(--font-mono);
    text-shadow: 0 0 4px rgba(0, 243, 255, 0.15);
}

.ad-mt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 12px;
    margin-top: auto;
}

.ad-meta__time {    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ad-loc { display: flex; align-items: center; gap: 4px; }

/* === КНОПКИ ДЕЙСТВИЙ КАРТОЧКИ === */
.ad-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ad-actions--single {
    grid-template-columns: 1fr;
}

.ad-btn {
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    border: 1.5px solid;
    white-space: nowrap;
    background: transparent;
}

.ad-btn-msg {
    border-color: rgba(0, 243, 255, 0.25);
    color: var(--neon-cyan);
}

.ad-btn-msg:hover {
    background: rgba(0, 243, 255, 0.12);
    box-shadow: var(--glow-cyan);
    transform: translateY(-1px);
}

.ad-btn-call {
    border-color: rgba(0, 255, 136, 0.25);
    color: var(--neon-green);
}

.ad-btn-call:hover {
    background: rgba(0, 255, 136, 0.12);
    box-shadow: var(--glow-green);
    transform: translateY(-1px);
}

/* === ФОКУС-СОСТОЯНИЯ (ДОСТУПНОСТЬ) === */
.ad-card:focus-visible,
.ad-btn:focus-visible,
.ad-fav:focus-visible,
.ad-ttl-link:focus-visible,
.ads-page-link:focus-visible,
/* .ads-view-all — superseded by .sg-btn--submit */

.ad-fav:focus-visible {
    outline-offset: 0;
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.5);
}

/* === ПАГИНАЦИЯ === */
.ads-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ads-page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: var(--neon-cyan);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s var(--ease-spring);
}

.ads-page-link:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: var(--glow-cyan);
    transform: translateY(-1px);
}

.ads-page-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* === ССЫЛКА «СМОТРЕТЬ ВСЕ» === */
/* .ads-view-all — superseded by .sg-btn--submit */

/* .ads-view-all — superseded by .sg-btn--submit */

/* .ads-view-all — superseded by .sg-btn--submit */

/* .ads-view-all — superseded by .sg-btn--submit */

/* .ads-view-all — superseded by .sg-btn--submit */

/* === SKELETON-ЗАГРУЗКА === */
.ads-skeleton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .ads-skeleton { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ads-skeleton { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .ads-skeleton { grid-template-columns: 1fr; }
}

.ads-skeleton-card {
    background: var(--bg-card);
    border: 1px solid rgba(0, 243, 255, 0.04);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ads-skeleton-img {
    aspect-ratio: 4/3;
    background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,0.05) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.ads-skeleton-body {
    padding: 12px;
}

.ads-skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,0.05) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    margin-bottom: 8px;
}

.ads-skeleton-line--short { width: 60%; }
.ads-skeleton-line--medium { width: 80%; }

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === МОДАЛЬНОЕ ОКНО ПРОСМОТРА === */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal.active {
    display: flex;
    animation: mfade 0.3s;
}

@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mslide { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ad-view-modal .modal-d {
background: var(--bg-secondary);
border: 1px solid rgba(0, 243, 255, 0.08);
border-radius: var(--radius-xl);
padding: 16px;
max-width: 1020px;
width: 100%;
max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-elevated);
    position: relative;
    animation: mslide 0.4s var(--ease-spring);
}

.modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    z-index: 10;
}

.modal-x:hover {
    background: rgba(255, 0, 255, 0.2);
    border-color: rgba(255, 0, 255, 0.4);
    color: var(--neon-pink);
    transform: rotate(90deg);
}

.ad-view-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ad-view-img-fallback { display: none; }
/* === ГАЛЕРЕЯ ИЗОБРАЖЕНИЙ ОБЪЯВЛЕНИЯ === */
.ad-view-gallery {
position: relative;
width: 100%;
margin-bottom: 8px;
}
.ad-gallery-stage {
position: relative;
}
.ad-gallery-viewport {
overflow: hidden;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
touch-action: pan-y;
cursor: grab;
background: var(--bg-elevated);
}
.ad-gallery-viewport.ad-gallery-dragging { cursor: grabbing; }
.ad-gallery-track {
display: flex;
transition: transform 0.35s var(--ease-spring);
will-change: transform;
}
.ad-gallery-dragging .ad-gallery-track { transition: none; }
.ad-gallery-slide {
flex: 0 0 100%;
min-width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-elevated);
}
.ad-gallery-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.ad-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
z-index: 5;
padding: 0;
}
.ad-gallery-prev { left: 12px; }
.ad-gallery-next { right: 12px; }
.ad-gallery-arrow:hover:not(:disabled) {
background: rgba(0, 243, 255, 0.25);
border-color: rgba(0, 243, 255, 0.5);
box-shadow: var(--glow-cyan);
transform: translateY(-50%) scale(1.08);
}
.ad-gallery-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.ad-gallery-counter {
position: absolute;
bottom: 12px;
right: 12px;
padding: 4px 12px;
border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
color: #fff;
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
z-index: 5;
pointer-events: none;
}
.ad-view-body { padding: 12px; }
.ad-view-cat {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 243, 255, 0.1);
    color: var(--neon-cyan);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ad-view-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.ad-view-price {
    font-size: 32px;
    font-weight: 900;
    color: var(--neon-cyan);
    font-family: var(--font-mono);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
    margin-bottom: 16px;
}

.ad-view-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.ad-view-meta span { display: flex; align-items: center; gap: 6px; }
.ad-view-verified { color: var(--neon-green); font-weight: 600; }

.ad-view-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.ad-view-seller {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 243, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 243, 255, 0.08);
    margin-bottom: 24px;
}

.ad-view-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.ad-view-seller-info { flex: 1; }
.ad-view-seller-name { font-weight: 700; font-size: 16px; color: var(--text-primary); margin-bottom: 4px; }
.ad-view-seller-rating { font-size: 12px; color: var(--gold); }
.ad-view-seller-rating i { font-size: 10px; margin-right: 2px; }

.ad-view-actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 12px;
margin-top: 16px;
}

.ad-view-btn {
flex: 1 1 0;
min-width: 0;
padding: 12px 22px;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
border: 1.5px solid;
background: transparent;
}

.ad-view-btn-msg {
    border-color: rgba(0, 243, 255, 0.3);
    color: var(--neon-cyan);
}

.ad-view-btn-msg:hover {
    background: rgba(0, 243, 255, 0.14);
    box-shadow: var(--glow-cyan-h);
    transform: translateY(-2px);
}

.ad-view-btn-call {
    border-color: rgba(0, 255, 136, 0.3);
    color: var(--neon-green);
}

.ad-view-btn-call:hover {
background: rgba(0, 255, 136, 0.14);
box-shadow: var(--glow-green);
transform: translateY(-2px);
}
/* .ad-view-btn-detail base — superseded by vFINAL */
/* .ad-view-btn-detail:hover — superseded by vFINAL */
/* .ad-view-btn-detail::before — superseded by vFINAL */
/* .ad-view-btn-detail::after — superseded by vFINAL */
/* .ad-view-btn-detail > * — superseded by vFINAL */
@keyframes ad-detail-border-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes ad-detail-glare {
0% { left: -100%; }
60% { left: 150%; }
100% { left: 150%; }
}
/* === УЛУЧШЕННАЯ АДАПТИВНОСТЬ МОДАЛКИ (УЗКИЕ СМАРТФОНЫ) === */
@media (max-width: 480px) {
.ad-view-actions { flex-direction: column; }
.ad-view-img {
aspect-ratio: 4/3;
max-height: 35vh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ad-gallery-slide { aspect-ratio: 4/3; }
.ad-gallery-viewport { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ad-gallery-arrow { width: 34px; height: 34px; }
.ad-gallery-arrow svg { width: 20px; height: 20px; }
.ad-gallery-prev { left: 8px; }
.ad-gallery-next { right: 8px; }
.ad-gallery-counter { bottom: 8px; right: 8px; font-size: 11px; }
.ad-view-modal .modal-d {
max-height: 95vh;
border-radius: var(--radius-lg);
}
    .ad-view-body { padding: 16px; }
    .ad-view-title { font-size: 20px; }
    .ad-view-price { font-size: 24px; margin-bottom: 12px; }
    .ad-view-desc { font-size: 13px; margin-bottom: 16px; padding: 12px; }
    .ad-view-seller { padding: 12px; gap: 12px; margin-bottom: 16px; }
    .ad-view-avatar { width: 40px; height: 40px; font-size: 16px; }
}

/* === ПУСТОЕ СОСТОЯНИЕ ЛЕНТЫ (EMPTY STATE) === */
.ads-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border: 1px dashed rgba(0, 243, 255, 0.15);
    border-radius: var(--radius-lg);
    margin: 20px 0;
}

.ads-empty__icon {
    color: var(--text-muted);
    margin-bottom: 20px;
    display: block;
    font-size: 3rem;
    opacity: 0.6;
}

.ads-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ads-empty__text {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 15px;
}

.ads-empty__btn {
    margin-top: 8px;
}

/* === СКОЛЛБАР МОДАЛКИ === */
.ad-view-modal .modal-d::-webkit-scrollbar {
width: 6px;
}
.ad-view-modal .modal-d::-webkit-scrollbar-track {
background: transparent;
}
.ad-view-modal .modal-d::-webkit-scrollbar-thumb {
background: rgba(0, 243, 255, 0.2);
border-radius: 3px;
}
.ad-view-modal .modal-d::-webkit-scrollbar-thumb:hover {
background: rgba(0, 243, 255, 0.4);
}

/* === LIGHT THEME === */
body.light-theme .ads-empty {
    background: rgba(139, 92, 246, 0.03);
    border-color: rgba(139, 92, 246, 0.2);
}

body.light-theme .ads-empty__icon {
    color: #8b5cf6;
    opacity: 0.5;
}

body.light-theme .ads-pagination {
    border-top-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .ads-page-link {
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

body.light-theme .ads-page-link:hover {
    background: rgba(139, 92, 246, 0.08);
}



/* === LIGHT THEME: КНОПКИ МОДАЛЬНОГО ОКНА === */
body.light-theme .ad-view-btn-msg {
border-color: rgba(109, 40, 217, 0.5);
color: #6d28d9;
}
body.light-theme .ad-view-btn-msg:hover {
background: rgba(109, 40, 217, 0.1);
box-shadow: 0 4px 16px rgba(109, 40, 217, 0.22);
}
body.light-theme .ad-view-btn-call {
border-color: rgba(4, 120, 87, 0.5);
color: #047857;
}
body.light-theme .ad-view-btn-call:hover {
background: rgba(4, 120, 87, 0.1);
box-shadow: 0 4px 16px rgba(4, 120, 87, 0.22);
}
body.light-theme /* .ad-view-btn-detail base — superseded by vFINAL */
body.light-theme /* .ad-view-btn-detail:hover — superseded by vFINAL */
/* === УМЕНЬШЕННОЕ ДВИЖЕНИЕ (ДОСТУПНОСТЬ) === */
@media (prefers-reduced-motion: reduce) {
    .ad-card,
    .ad-btn,
    .ad-fav,
    .ads-page-link,
    /* .ads-view-all — superseded by .sg-btn--submit */

    .ad-card:hover {
        transform: none;
    }

    .ad-card:hover .ad-im {
        transform: none;
    }

.ads-skeleton-img,
.ads-skeleton-line {
animation: none;
}
.modal.active {
animation: none;
}
.ad-view-modal .modal-d {
animation: none;
}
.ad-gallery-track {
transition: none;
}
.ad-view-btn-detail::before,
/* .ad-view-btn-detail::after — superseded by vFINAL */
}
/* === LIGHT THEME: ГАЛЕРЕЯ === */
body.light-theme .ad-gallery-arrow {
background: rgba(255, 255, 255, 0.78);
color: #6d28d9;
border-color: rgba(109, 40, 217, 0.25);
}
body.light-theme .ad-gallery-arrow:hover:not(:disabled) {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 4px 16px rgba(109, 40, 217, 0.22);
}
body.light-theme .ad-gallery-counter {
background: rgba(255, 255, 255, 0.82);
color: #6d28d9;
}

/* === БЕСКОНЕЧНАЯ ПОДГРУЗКА: СПИННЕР И СОСТОЯНИЯ === */
.ads-feed-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 28px 0 8px;
font-size: 14px;
color: var(--text-muted);
}
.ads-feed-loader[hidden] {
display: none;
}
.ads-feed-spinner {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
border: 3px solid rgba(0, 243, 255, 0.15);
border-top-color: var(--neon-cyan);
animation: ads-feed-spin 0.8s linear infinite;
}
.ads-feed-loader-text {
color: var(--text-muted);
}
@keyframes ads-feed-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Сообщение «Больше объявлений нет» */
.ads-feed-end {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.ads-feed-end[hidden] {
display: none;
}

/* Блок ошибки подгрузки */
.ads-feed-error {
margin-top: 20px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
background: rgba(255, 51, 102, 0.06);
border: 1px solid rgba(255, 51, 102, 0.25);
border-radius: var(--radius-md);
font-size: 14px;
}
.ads-feed-error[hidden] {
display: none;
}
.ads-feed-error-text {
color: #ff6b8d;
font-weight: 600;
}
.ads-feed-retry {
padding: 8px 18px;
border-radius: var(--radius-sm);
border: 1.5px solid rgba(0, 243, 255, 0.3);
background: transparent;
color: var(--neon-cyan);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
}
.ads-feed-retry:hover {
background: rgba(0, 243, 255, 0.1);
box-shadow: var(--glow-cyan);
transform: translateY(-1px);
}
.ads-feed-retry:focus-visible {
outline: 2px solid var(--neon-cyan);
outline-offset: 2px;
}

/* Маяк для IntersectionObserver (невидимый) */
.ads-feed-sentinel {
width: 100%;
height: 1px;
overflow: hidden;
}

/* === LIGHT THEME: СОСТОЯНИЯ ПОДГРУЗКИ === */
body.light-theme .ads-feed-spinner {
border-color: rgba(139, 92, 246, 0.15);
border-top-color: #8b5cf6;
}
body.light-theme .ads-feed-end {
border-top-color: rgba(0, 0, 0, 0.06);
}
body.light-theme .ads-feed-error {
background: rgba(220, 38, 38, 0.04);
border-color: rgba(220, 38, 38, 0.2);
}
body.light-theme .ads-feed-error-text {
color: #dc2626;
}
body.light-theme .ads-feed-retry {
border-color: rgba(139, 92, 246, 0.3);
color: #8b5cf6;
}
body.light-theme .ads-feed-retry:hover {
background: rgba(139, 92, 246, 0.08);
box-shadow: none;
}

/* === УМЕНЬШЕННОЕ ДВИЖЕНИЕ: ЭЛЕМЕНТЫ ПОДГРУЗКИ === */
@media (prefers-reduced-motion: reduce) {
.ads-feed-spinner {
animation-duration: 2s;
}
.ads-feed-retry {
transition: none;
}
.ads-feed-retry:hover {
transform: none;
}
}
/* ==========================================================================
   СВЕТЛАЯ ТЕМА — точечные правки (ads-feed.css)
   Автоматически сгенерировано. Гасит свечения и меняет неоны
   (#94adae / #ff00ff / #00ff88 / #00d9ff) на насыщенные тёмные аналоги.
   ========================================================================== */



/* ============================================================
   Сетка ленты объявлений — 5 колонок на десктопе (3 ряда = 15 карточек).
   ============================================================ */
.ads-feed-section .ads-grid,
.ads-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px;
}

@media (max-width: 1200px) {
    .ads-feed-section .ads-grid,
    .ads-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 992px) {
    .ads-feed-section .ads-grid,
    .ads-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .ads-feed-section .ads-grid,
    .ads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 480px) {
    .ads-feed-section .ads-grid,
    .ads-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ==== Оверлеи карточки над размытой подложкой ==== */
.ad-badge,
.ad-fav,
.ad-quick-view {
    z-index: 2 !important;
}

/* фоллбэк-ошибка: contain уже и так, но на всякий случай */
.ad-im.ad-img-error {
    object-fit: contain;
    padding: 24px;
    opacity: 0.6;
    background: transparent;
}

/* Блок действий: одна кнопка «Позвонить» — на всю ширину */
.ad-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
/* ==== Иконка избранного (SVG) ==== */
.ad-fav svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
    color: #ffffff;
    transition: transform .2s ease, color .2s ease;
}
.ad-fav:hover svg { transform: scale(1.12); }
.ad-fav.active {
    background: #ffffff;
    color: #ff3d94;
}
.ad-fav.active svg {
    color: #ff3d94;
    fill: currentColor;
    transform: scale(1.05);
}
/* тёмная тема — не меняем, тот же розовый работает */

/* ==========================================================================
   === QUICK VIEW: hover #5b52e0 ===
   Кнопка быстрого просмотра — при наведении фон становится #5b52e0.
   ========================================================================== */
.ad-quick-view:hover,
.ad-quick-view:focus-visible {
    background: #5b52e0 !important;
    background-color: #5b52e0 !important;
    color: #ffffff !important;
    border-color: #5b52e0 !important;
}
.ad-quick-view:hover svg,
.ad-quick-view:focus-visible svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================================================
   === MODAL GALLERY: blur backdrop + pill buttons ===
   В модалке быстрого просмотра под фотографией — та же размытая подложка,
   что у .ad-iw в витрине. Все кнопки модалки — с полным скруглением.
   ========================================================================== */

/* --- Слайд галереи: слоистая структура для backdrop-filter --- */
.ad-gallery-slide {
    position: relative !important;
    isolation: isolate;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-elevated);
}

/* Размывающий слой — backdrop-filter «читает» фон слайда (то же фото) */
.ad-gallery-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    background: rgba(10, 12, 30, 0.22);
    z-index: 0;
    pointer-events: none;
}

/* Светлая тема — более светлая вуаль */
html body.light-theme .ad-gallery-slide::before {
    background: rgba(255, 255, 255, 0.28);
}

/* Сама картинка — над размытием */
.ad-gallery-img {
    position: relative !important;
    z-index: 1;
}

/* --- Все кнопки модалки — полное скругление (pill) --- */

/* Кнопки действий (.ad-view-btn) */
.ad-view-btn,
.ad-view-btn-msg,
.ad-view-btn-call,
/* .ad-view-btn-detail base — superseded by vFINAL */

/* Кнопка закрытия (.modal-x / .ad-gallery-close) */
.ad-view-modal .modal-x,
.ad-view-modal .ad-gallery-close,
.modal-x.ad-gallery-close {
    border-radius: 999px !important;
}

/* Стрелки карусели */
.ad-gallery-arrow,
.ad-gallery-prev,
.ad-gallery-next {
    border-radius: 999px !important;
}

/* Счётчик — тоже pill, чтобы не выбивался */
.ad-gallery-counter {
    border-radius: 999px !important;
    padding: 4px 12px !important;
}

/* --- Согласованные состояния focus-visible --- */
.ad-view-btn:focus-visible,
.ad-gallery-arrow:focus-visible,
.ad-view-modal .modal-x:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}

/* ==========================================================================
   === DETAIL BTN: градиентная обводка с правильными углами ===
   У кнопки «Подробнее» псевдоэлемент ::before с обводкой должен
   наследовать border-radius от самой кнопки (999px), а не иметь
   свой фиксированный радиус 12px — иначе углы обводки срезаются.
   ========================================================================== */
/* .ad-view-btn-detail base — superseded by vFINAL */
/* .ad-view-btn-detail::before — superseded by vFINAL */
/* .ad-view-btn-detail::after — superseded by vFINAL */
/* убираем анимацию, но сохраняем саму обводку */
@media (prefers-reduced-motion: reduce) {
    /* .ad-view-btn-detail::before — superseded by vFINAL */
}

/* ==========================================================================
   === DETAIL BTN v2: равномерная обводка через background-clip ===
   Старая техника (::before + padding 1.5px + mask-composite) давала
   разную толщину обводки из-за sub-pixel-рендеринга.
   Новая — 2px border + два слоя background-clip. Одинаковая толщина
   со всех сторон, идеально ровная.
   ========================================================================== */

/* .ad-view-btn-detail base — superseded by vFINAL */

/* Отключаем старые псевдоэлементы — они больше не нужны */
.ad-view-btn-detail::before,
/* .ad-view-btn-detail::after — superseded by vFINAL */

/* Светлая тема — белый фон вместо карточки */
html body.light-theme .ad-view-btn-detail,
body.light-theme /* .ad-view-btn-detail base — superseded by vFINAL */

/* Плавная анимация сдвига градиента по обводке */
@keyframes detail-border-slide {
    0%   { background-position: 0 0,   0% 50%; }
    100% { background-position: 0 0, 100% 50%; }
}

/* Hover — чуть ярче, но без сдвига кнопки */
.ad-view-btn-detail:hover,
.ad-view-btn-detail:focus-visible {
    box-shadow: 0 0 14px rgba(0, 243, 255, 0.25) !important;
    transform: none !important;
}

/* Внутренний контент — над фоном, чтобы не перекрывался */
/* .ad-view-btn-detail > * — superseded by vFINAL */

/* Отключаем анимацию для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    /* .ad-view-btn-detail base — superseded by vFINAL */
}

/* ==========================================================================
   === DETAIL BTN vFINAL: точная копия submit-кнопки + постоянная обводка ===
   Кнопка «Подробнее» в модалке быстрого просмотра:
   — оранжево-фиолетовый градиент (#fd5f10 → #7a50fc), как у submit;
   — белый текст и иконка;
   — полное скругление (pill);
   — ВСЕГДА активная бегущая радужная обводка (conic-gradient),
     точно как у .btn-submit-ad при hover, но без hover.
   ========================================================================== */

@property --detail-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes detail-border-run {
    to { --detail-border-angle: 360deg; }
}

/* --- Контейнер кнопки --- */
.ad-view-btn.ad-view-btn-detail,
#adViewDetailBtn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    padding: 12px 22px !important;
    min-height: 42px !important;

    background: linear-gradient(135deg, #fd5f10 0%, #7a50fc 100%) !important;
    background-image: linear-gradient(135deg, #fd5f10 0%, #7a50fc 100%) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    isolation: isolate !important;

    font-family: inherit;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(253, 95, 16, .25) !important;
    transition: box-shadow .25s ease !important;
    transform: none !important;
    animation: none !important;
}

/* --- Иконка и текст — белые --- */
.ad-view-btn.ad-view-btn-detail .icon,
.ad-view-btn.ad-view-btn-detail svg.icon,
.ad-view-btn.ad-view-btn-detail svg.icon use,
#adViewDetailBtn .icon,
#adViewDetailBtn svg.icon,
#adViewDetailBtn svg.icon use {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
.ad-view-btn.ad-view-btn-detail > *,
#adViewDetailBtn > * {
    position: relative;
    z-index: 2;
}

/* --- Обводка: постоянная, БЕЗ hover, с бегущей анимацией --- */
.ad-view-btn.ad-view-btn-detail::after,
#adViewDetailBtn::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 3 !important;

    padding: 2px !important;
    background: conic-gradient(
        from var(--detail-border-angle, 0deg),
        rgba(0, 229, 255, 0) 0deg,
        #00e5ff 60deg,
        #9b6bff 140deg,
        #ff3d94 210deg,
        #00e5ff 300deg,
        rgba(0, 229, 255, 0) 360deg
    ) !important;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;

    filter: blur(.4px) saturate(1.2);
    opacity: 1 !important;
    animation: detail-border-run 2.4s linear infinite !important;
    transition: none !important;
}

/* Скрываем возможный старый ::before */
.ad-view-btn.ad-view-btn-detail::before,
#adViewDetailBtn::before {
    content: none !important;
    display: none !important;
}

/* --- Hover: усиление свечения, без сдвига, цвет обводки не меняем --- */
.ad-view-btn.ad-view-btn-detail:hover,
.ad-view-btn.ad-view-btn-detail:focus-visible,
#adViewDetailBtn:hover,
#adViewDetailBtn:focus-visible {
    background: linear-gradient(135deg, #fd5f10 0%, #7a50fc 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(122, 80, 252, .45) !important;
    transform: none !important;
}
.ad-view-btn.ad-view-btn-detail:hover .icon,
.ad-view-btn.ad-view-btn-detail:hover svg.icon,
#adViewDetailBtn:hover .icon,
#adViewDetailBtn:hover svg.icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* --- Светлая тема: тот же градиент, тот же текст --- */
html body.light-theme .ad-view-btn.ad-view-btn-detail,
html body.light-theme #adViewDetailBtn {
    background: linear-gradient(135deg, #fd5f10 0%, #7a50fc 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body.light-theme .ad-view-btn.ad-view-btn-detail::after,
html body.light-theme #adViewDetailBtn::after {
    /* та же обводка, что и в тёмной теме */
    opacity: 1 !important;
}

/* --- Мобильная адаптация: чуть меньше --- */
@media (max-width: 640px) {
    .ad-view-btn.ad-view-btn-detail,
    #adViewDetailBtn {
        padding: 10px 18px !important;
        font-size: 12px !important;
    }
}

/* --- Уважаем reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .ad-view-btn.ad-view-btn-detail::after,
    #adViewDetailBtn::after {
        animation: none !important;
    }
}

/* ==========================================================================
   === SELLER BOX: жёлтые звёзды + белая аватарка ===
   В блоке продавца модалки быстрого просмотра:
   - звёзды рейтинга — всегда ярко-жёлтые (#FFD700)
   - аватарка (круглая) — на белом фоне, иконка — тёмная
   ========================================================================== */

/* --- Звёзды рейтинга: жёлтые во всех темах --- */
.ad-view-seller-rating,
.ad-view-seller-rating .icon,
.ad-view-seller-rating svg,
.ad-view-seller-rating svg.icon,
.ad-view-seller-rating svg use,
.ad-view-seller-rating svg.icon use {
    color: #FFD700 !important;
    fill: #FFD700 !important;
    stroke: #FFD700 !important;
}

/* Размер иконки звезды — оставляем компактной */
.ad-view-seller-rating .icon,
.ad-view-seller-rating svg.icon {
    width: 14px !important;
    height: 14px !important;
    vertical-align: -2px;
}

/* Текст «На сайте с …» — своим цветом, отдельно от звёзд */
.ad-view-seller-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--gold, #FFD700) !important;
    font-size: 12px;
}
/* Подкрашиваем только текст после звёзд, а не сами иконки */
.ad-view-seller-rating::after {
    /* не используется, оставлено для совместимости */
    content: none;
}

/* --- Аватарка: белый круг + тёмная иконка пользователя --- */
.ad-view-avatar {
    background: #ffffff !important;
    color: #17182f !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ad-view-avatar .icon,
.ad-view-avatar svg,
.ad-view-avatar svg.icon,
.ad-view-avatar svg use {
    color: #17182f !important;
    fill: #17182f !important;
    stroke: #17182f !important;
}

/* ==========================================================================
   === RATING FIX: звёзды жёлтые, текст нейтральный ===
   Жёлтый применяется только к SVG-иконкам, а не к родителю,
   чтобы текст «На сайте с 2024» остался своего цвета.
   ========================================================================== */

.ad-view-seller-rating {
    color: var(--text-muted, rgba(255, 255, 255, .55)) !important;
    -webkit-text-fill-color: currentColor !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* Только иконки звёзд — жёлтые */
.ad-view-seller-rating > svg,
.ad-view-seller-rating > svg.icon,
.ad-view-seller-rating > svg.icon use,
.ad-view-seller-rating .icon {
    color: #FFD700 !important;
    fill: #FFD700 !important;
    stroke: #FFD700 !important;
}
.ad-view-seller-rating > svg.icon {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle !important;
}

/* Светлая тема — текст потемнее */
html body.light-theme .ad-view-seller-rating {
    color: #718096 !important;
}

/* ==========================================================================
   === AD-CNT: прозрачный фон + светлый текст в тёмной теме ===
   Контентная часть карточки объявления (.ad-cnt) не должна иметь
   своего фона — фон даёт .ad-card. В тёмной теме текст делаем светлым.
   ========================================================================== */

/* --- 1. Фон блока .ad-cnt — всегда прозрачный --- */
.ad-cnt,
.ad-card .ad-cnt,
a.ad-card .ad-cnt {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* --- 2. Тёмная тема: светлый текст в .ad-cnt --- */
html body:not(.light-theme) .ad-cnt {
    color: #f0f0f0 !important;
}

/* Заголовок (ссылка на объявление) — светлый */
html body:not(.light-theme) .ad-cnt .ad-ttl,
html body:not(.light-theme) .ad-cnt .ad-ttl a,
html body:not(.light-theme) .ad-cnt .ad-ttl-link,
html body:not(.light-theme) .ad-card .ad-ttl-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:not(.light-theme) .ad-cnt .ad-ttl-link:hover,
html body:not(.light-theme) .ad-card:hover .ad-ttl-link {
    color: var(--neon-cyan, #94adae) !important;
    -webkit-text-fill-color: var(--neon-cyan, #94adae) !important;
}

/* Цена — акцентный цвет, читаемый в тёмной теме */
html body:not(.light-theme) .ad-cnt .ad-pr {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Мета (город, время) — приглушённый светлый */
html body:not(.light-theme) .ad-cnt .ad-mt,
html body:not(.light-theme) .ad-cnt .ad-mt span,
html body:not(.light-theme) .ad-cnt .ad-mt .ad-loc,
html body:not(.light-theme) .ad-cnt .ad-mt .icon,
html body:not(.light-theme) .ad-cnt .ad-mt svg,
html body:not(.light-theme) .ad-cnt .ad-mt svg use {
    color: rgba(240, 240, 240, 0.75) !important;
    fill: currentColor !important;
}

/* Иконки в мете — тоже светлые */
html body:not(.light-theme) .ad-cnt .icon,
html body:not(.light-theme) .ad-cnt svg.icon {
    color: inherit;
}

/* --- 3. Светлая тема: убедимся, что фон тоже прозрачен --- */
html body.light-theme .ad-cnt,
body.light-theme .ad-cnt {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- 4. Отдельная защита — карточка в тёмной теме не белая --- */
html body:not(.light-theme) .ad-card {
    background: #3a3a3a !important;
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
}
html body:not(.light-theme) .ad-card .ad-cnt {
    background: transparent !important;
}

/* ==========================================================================
   === AD-CARD: прозрачный фон в светлой теме ===
   Убираем белый фон карточки объявления. Фон страницы просвечивает.
   Граница и тень оставлены, чтобы карточка оставалась заметной.
   ========================================================================== */

/* Светлая тема — прозрачный фон */
html body.light-theme .ad-card,
body.light-theme .ad-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(23, 24, 47, 0.08) !important;
    box-shadow: 0 1px 4px rgba(23, 24, 47, 0.05) !important;
}

html body.light-theme .ad-card:hover,
body.light-theme .ad-card:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(3, 105, 161, 0.2) !important;
    box-shadow: 0 6px 18px rgba(23, 24, 47, 0.10) !important;
}

/* Скрываем возможный ::before / ::after фон */
html body.light-theme .ad-card::before,
html body.light-theme .ad-card::after,
body.light-theme .ad-card::before,
body.light-theme .ad-card::after {
    background: none !important;
    background-color: transparent !important;
}

/* Внутренние блоки тоже прозрачные */
html body.light-theme .ad-card .ad-cnt,
/* .ad-iw сохраняет свой inline background-image (фото) — не затираем */

/* ==========================================================================
   === AD-IW: сохранить фон-фото и размытие ===
   На .ad-iw из JS ставится inline background-image (URL фото).
   Никакие наши правила не должны его затирать.
   Подложка из размытого фото работает через ::before (backdrop-filter).
   ========================================================================== */

.ad-iw,
.ad-card .ad-iw,
a.ad-card .ad-iw,
html body.light-theme .ad-iw,
html body.light-theme .ad-card .ad-iw,
html body:not(.light-theme) .ad-iw,
html body:not(.light-theme) .ad-card .ad-iw {
    background-color: var(--bg-elevated);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* BLUR-BG-INHERIT-FIX 2026-10-07: раньше стоял `background-image: inherit`,
       который затирал inline-стиль .ad-iw и убивал размытую подложку. */
}

/* Размытая подложка — псевдоэлемент поверх background-image */
.ad-iw::before,
.ad-card .ad-iw::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    background: rgba(10, 12, 30, 0.18) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* В светлой теме — мягче вуаль */
html body.light-theme .ad-iw::before,
html body.light-theme .ad-card .ad-iw::before {
    background: rgba(255, 255, 255, 0.20) !important;
}

/* Картинка над размытой подложкой */
.ad-iw .ad-im,
.ad-card .ad-iw .ad-im {
    position: relative !important;
    z-index: 1 !important;
}

/* ==========================================================================
   === AD TTL DARK: белый текст заголовка ===
   Причина: theme-main.css содержит rules типа [class*="title"] a,
   [class*="heading"] a { color: #000 !important }, что перебивает
   даже наши .ad-cnt .ad-ttl-link. Бьём это максимально явным
   селектором с !important на всех уровнях вложенности.
   ========================================================================== */

/* Все возможные варианты заголовка в карточке объявления */
html body:not(.light-theme) a.ad-ttl-link,
html body:not(.light-theme) .ad-ttl-link,
html body:not(.light-theme) .ad-ttl .ad-ttl-link,
html body:not(.light-theme) .ad-ttl > a,
html body:not(.light-theme) .ad-cnt .ad-ttl > a,
html body:not(.light-theme) .ad-cnt a.ad-ttl-link,
html body:not(.light-theme) .ad-card .ad-ttl > a,
html body:not(.light-theme) .ad-card .ad-cnt .ad-ttl a,
html body:not(.light-theme) .ad-card .ad-cnt .ad-ttl-link,
html body:not(.light-theme) article.ad-card .ad-cnt a,
html body:not(.light-theme) article .ad-cnt .ad-ttl-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

/* Hover — cyan */
html body:not(.light-theme) a.ad-ttl-link:hover,
html body:not(.light-theme) .ad-ttl-link:hover,
html body:not(.light-theme) .ad-ttl > a:hover,
html body:not(.light-theme) .ad-cnt .ad-ttl > a:hover,
html body:not(.light-theme) .ad-card:hover .ad-ttl-link,
html body:not(.light-theme) .ad-card:hover .ad-ttl > a {
    color: var(--neon-cyan, #94adae) !important;
    -webkit-text-fill-color: var(--neon-cyan, #94adae) !important;
}

/* Сам .ad-ttl — тоже белым, на случай если ссылка внутри отсутствует */
html body:not(.light-theme) .ad-ttl,
html body:not(.light-theme) .ad-cnt .ad-ttl,
html body:not(.light-theme) .ad-card .ad-cnt .ad-ttl {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Цена тоже белая (на всякий случай) */
html body:not(.light-theme) .ad-pr,
html body:not(.light-theme) .ad-cnt .ad-pr,
html body:not(.light-theme) .ad-card .ad-cnt .ad-pr {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Мета (город, время) — приглушённый светлый, чтобы не спорил с заголовком */
html body:not(.light-theme) .ad-mt,
html body:not(.light-theme) .ad-mt span,
html body:not(.light-theme) .ad-mt .ad-loc,
html body:not(.light-theme) .ad-mt .icon,
html body:not(.light-theme) .ad-mt svg,
html body:not(.light-theme) .ad-mt svg use,
html body:not(.light-theme) .ad-card .ad-mt,
html body:not(.light-theme) .ad-card .ad-mt span,
html body:not(.light-theme) .ad-card .ad-mt .icon {
    color: rgba(240, 240, 240, 0.78) !important;
    -webkit-text-fill-color: rgba(240, 240, 240, 0.78) !important;
    fill: currentColor !important;
}

/* Light theme — заголовок остаётся тёмным, как и было */
html body.light-theme a.ad-ttl-link,
html body.light-theme .ad-ttl-link,
html body.light-theme .ad-cnt .ad-ttl a {
    color: #17182f !important;
    -webkit-text-fill-color: #17182f !important;
}

/* ==========================================================================
   === ADS-VIEW-ALL: полный сброс ===
   Кнопка «Смотреть все объявления» использует класс .sg-btn--submit
   из style-guide.css. Никаких собственных стилей у .ads-view-all нет —
   он оставлен только как HTML-якорь.
   ========================================================================== */
.ads-view-all {
    /* нет собственных стилей — все берётся из .sg-btn--submit */
}