/* базовые токены, кнопки, карточки, каркасы */
:root{
--accent:#2f9e62;
--accent-2:#f59e0b;
--dark:#243044;
--dark-2:#334155;
--text:#263345;
--muted:#718096;
--line:rgba(36,48,68,.10);
--soft:#f6f8fb;
--white:#fff;
--danger:#dc2626;
--shadow:0 18px 55px rgba(36,48,68,.10);
--radius:24px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
a{
color:inherit;
text-decoration:none}
img{
max-width:100%;
display:block}
button,input,select,textarea{
font:inherit}
.container{
width:min(1220px,calc(100% - 32px));
margin:0 auto}
.site-main{
min-height:70vh}
.logo{
display:flex;
align-items:center;
gap:12px}
.logo__mark{
width:46px;
height:46px;
border-radius:16px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--accent),#34d399);
color:#fff;
font-weight:700;
box-shadow:0 12px 26px rgba(22,163,74,.25)}
.logo__text{
display:flex;
flex-direction:column;
line-height:1.1}
.logo__text strong{
font-size:18px}
.logo__text small{
color:var(--muted);
font-size:12px}
.main-nav{
display:flex;
align-items:center;
gap:10px}
.main-nav a{
padding:10px 14px;
border-radius:999px;
color:var(--dark-2);
font-weight:650}
.main-nav a:hover{
background:var(--soft)}
.nav-pill{
background:var(--dark)!important;
color:#fff!important}
.menu-toggle{
display:none;
background:none;
border:0;
width:44px;
height:44px}
.menu-toggle span{
display:block;
height:2px;
background:var(--dark);
margin:7px 0;
border-radius:99px}
.hero{
padding:78px 0 64px;
background:radial-gradient(circle at 15% 10%,rgba(22,163,74,.18),transparent 34%),linear-gradient(180deg,#f7fff9,#fff)}
.hero__grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:40px;
align-items:center}
.hero h1,.page-hero h1{
margin:0;
font-size:clamp(38px,6vw,72px);
line-height:.98;
letter-spacing:-.05em}
.hero p,.page-hero p{
font-size:19px;
color:var(--muted);
max-width:660px}
.hero__actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:26px}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:0;
border-radius:999px;
padding:13px 20px;
font-weight:700;
cursor:pointer;
transition:.2s ease;
min-height:46px}
.btn:hover{
transform:translateY(-1px)}
/* Стан завантаження: ховаємо текст, показуємо круговий прелоадер (як усюди) */
.btn--loading{
position:relative;
color:transparent!important;
pointer-events:none}
.btn--loading > *{visibility:hidden}
.btn--loading::after{
content:"";
position:absolute;
top:50%;left:50%;
width:20px;height:20px;
margin:-10px 0 0 -10px;
border-radius:50%;
border:3px solid rgba(255,255,255,.45);
border-top-color:#fff;
animation:bmpCatalogLoaderSpin .62s linear infinite}
.btn--primary{
background:linear-gradient(135deg,var(--accent),#22c55e);
color:#fff;
box-shadow:0 14px 30px rgba(22,163,74,.22)}
.btn--ghost{
background:#fff;
color:var(--dark);
border:1px solid var(--line)}
.btn--dark{
background:var(--dark);
color:#fff}
.btn--full{
width:100%}
.btn--small{
min-height:36px;
padding:8px 13px;
font-size:13px}
.hero__panel{
display:grid;
gap:16px}
.stat-card,.hero-search,.content-card,.notice-card,.form-card,.auth-card,.seller-card,.contact-card,.tariff-card{
border:1px solid var(--line);
border-radius:var(--radius);
background:#fff;
box-shadow:var(--shadow)}
.stat-card{
padding:28px}
.stat-card strong{
display:block;
font-size:52px;
line-height:1;
color:var(--accent)}
.stat-card span{
color:var(--muted);
font-weight:700}
.hero-search{
padding:24px}
.hero-search h3{
margin:0 0 16px}
.hero-search form{
display:grid;
gap:10px}
.section{
padding:68px 0}
.section--soft{
background:var(--soft)}
.section-head{
margin-bottom:28px}
.section-head h2{
margin:0;
font-size:clamp(30px,4vw,46px);
letter-spacing:-.04em}
.section-head--row{
display:flex;
justify-content:space-between;
gap:20px;
align-items:end}
.link-more{
font-weight:700;
color:var(--accent)}
.category-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.category-card{
position:relative;
min-height:210px;
border-radius:28px;
overflow:hidden;
background:#123;
color:#fff;
box-shadow:var(--shadow)}
.category-card:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.68));
z-index:1}
.category-card img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
inset:0}
.category-card span,.category-card small{
position:absolute;
z-index:2;
left:20px}
.category-card span{
bottom:42px;
font-size:22px;
font-weight:700}
.category-card small{
bottom:20px;
color:rgba(255,255,255,.8)}
.ads-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.ad-card{
position:relative;
display:flex;
flex-direction:column;
background:#fff;
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(8,19,15,.06);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.ad-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 44px rgba(8,19,15,.12)}
.ad-card--featured{
border-color:rgba(245,158,11,.5)}
.ad-card__image{
position:relative;
display:block;
aspect-ratio:1.2/1;
background:var(--soft);
overflow:hidden}
.ad-card__image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease}
.ad-card:hover .ad-card__image img{
transform:scale(1.05)}
/* Бейджі — стовпчик зверху-зліва, не перекриваються з кнопкою обраного */
.ad-card__badges{
position:absolute;
top:10px;
left:10px;
right:52px;
display:flex;
flex-wrap:wrap;
gap:6px;
pointer-events:none}
.badge{
display:inline-flex;
align-items:center;
padding:5px 9px;
border-radius:999px;
font-size:11.5px;
font-weight:700;
line-height:1;
white-space:nowrap;
box-shadow:0 4px 12px rgba(15,23,42,.14)}
.badge--hot{background:var(--accent-2);color:#fff}
.badge--free{background:#eef7ff;color:#1d68b6}
.badge--discount{background:#e8483c;color:#fff}
.badge--removed{background:#475569;color:#fff}
/* Кнопка обраного — фіксований правий верхній кут, поверх усього */
.ad-card__fav{
position:absolute;
top:10px;
right:10px;
z-index:3;
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:50%;
background:rgba(255,255,255,.92);
color:#475569;
cursor:pointer;
box-shadow:0 6px 16px rgba(15,23,42,.16);
transition:background .16s ease, color .16s ease, transform .16s ease}
.ad-card__fav:hover{transform:scale(1.08);color:#e8483c}
.ad-card__fav svg{width:20px;height:20px}
.ad-card__fav svg path{fill:none;stroke:currentColor;transition:fill .15s ease}
.ad-card__fav.is-active{color:#e8483c}
.ad-card__fav.is-active svg path{fill:#e8483c;stroke:#e8483c}
.ad-card__body{
display:flex;
flex-direction:column;
flex:1;
padding:14px}
.ad-card__title{
margin:0 0 12px;
font-size:15px;
font-weight:650;
line-height:1.35;
min-height:0}
.ad-card__title a{
color:var(--dark);
text-decoration:none;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis}
.ad-card__title a:hover{color:var(--accent)}
.ad-card__bottom{
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
/* Низ картки: локація + перевірений */
.ad-card__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:10px;
padding-top:10px;
border-top:1px solid rgba(15,23,42,.06)}
.ad-card__location{
display:inline-flex;
align-items:center;
gap:4px;
min-width:0;
color:var(--muted);
font-size:12.5px;
text-decoration:none}
.ad-card__location svg{
flex:none;
width:14px;
height:14px;
fill:#94a3b8}
.ad-card__location span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
a.ad-card__location:hover{color:var(--accent)}
a.ad-card__location:hover svg{fill:var(--accent)}
.verified{
display:inline-flex;
align-items:center;
gap:5px;
flex:none;
padding:4px 8px;
border-radius:999px;
background:#e9fbee;
color:#087036;
font-weight:700;
font-size:11px}
.page-hero{
padding:62px 0;
background:linear-gradient(135deg,#f2fff6,#fff)}
.page-hero--compact{
padding:44px 0}
.page-hero__grid{
display:flex;
justify-content:space-between;
gap:32px;
align-items:center}
.term-hero-image{
width:180px;
height:130px;
object-fit:cover;
border-radius:24px;
box-shadow:var(--shadow)}
.catalog-layout{
display:grid;
grid-template-columns:310px 1fr;
gap:26px;
align-items:start}
.filter-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px}
.ad-single-section{
background:#fbfefc}
.ad-single{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:28px;
align-items:start}
.ad-single-head{
grid-column:1/-1;
background:#fff;
border:1px solid var(--line);
border-radius:24px;
padding:20px 24px;
box-shadow:0 10px 30px rgba(8,19,15,.05)}
.ad-single-head h1{
font-size:clamp(22px,2.6vw,32px);
line-height:1.15;
letter-spacing:-.02em;
margin:8px 0 0}
.ad-single-breadcrumbs{
grid-column:1/-1;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
margin:0}
.ad-single-breadcrumbs .breadcrumbs__item{
display:inline-flex;
align-items:center}
.ad-single-breadcrumbs .breadcrumbs__item a{
color:var(--muted);
text-decoration:none}
.ad-single-breadcrumbs .breadcrumbs__item a:hover{
color:var(--accent)}
.ad-single-breadcrumbs .breadcrumbs__item--current a{
color:var(--dark);
font-weight:700}
.breadcrumbs__sep{
display:inline-flex;
align-items:center;
color:#b8c2cf}
.breadcrumbs__sep svg{width:14px;height:14px}
/* На телефоні хлібні крихти — прокрутка вбік, без переносів і зайвого оформлення */
@media(max-width:759px){
.ad-single-breadcrumbs{
flex-wrap:nowrap;
overflow-x:auto;
white-space:nowrap;
gap:6px;
margin:0 0 12px;
padding:0 0 2px;
background:none;
border:0;
box-shadow:none;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch}
.ad-single-breadcrumbs::-webkit-scrollbar{display:none}
.ad-single-breadcrumbs a,
.ad-single-breadcrumbs .breadcrumbs__item,
.ad-single-breadcrumbs > span:not(.breadcrumbs__sep){
flex:0 0 auto}
}
.ad-content{
grid-column:1/2;
background:#fff;
border:1px solid var(--line);
border-radius:28px;
padding:28px;
box-shadow:0 16px 45px rgba(8,19,15,.06)}
.ad-content h1{
font-size:clamp(32px,4vw,52px);
line-height:1;
margin:10px 0}
.ad-sidebar{
grid-column:2/3;
grid-row:3/5;
position:sticky;
top:98px;
display:grid;
gap:16px}
.ad-gallery{
background:#fff;
border:1px solid var(--line);
border-radius:28px;
padding:12px;
box-shadow:var(--shadow)}
.ad-gallery__main{
width:100%;
height:520px;
object-fit:cover;
border-radius:20px;
background:var(--soft)}
.ad-gallery__thumbs img{
height:82px;
width:100%;
object-fit:cover;
border-radius:14px;
cursor:pointer;
border:2px solid transparent}
.seller-card,.contact-card{
padding:20px}
.seller-card__top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px}
.seller-avatar,.account-user__avatar,.seller-hero__avatar{
width:54px;
height:54px;
border-radius:18px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--accent),#22c55e);
color:#fff;
font-weight:700;
font-size:22px}
.price-big{
display:block;
font-size:32px;
margin-bottom:14px;
color:var(--dark)}
.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin:10px 0}
.contact-grid a{
border:1px solid var(--line);
padding:10px;
border-radius:14px;
text-align:center;
font-size:13px;
font-weight:700;
background:#fff}
.report-link{
border:0;
background:none;
color:var(--danger);
text-decoration:underline;
cursor:pointer}
.ad-meta-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
color:var(--muted)}
.ad-meta-list span{
background:var(--soft);
border-radius:999px;
padding:6px 10px}
.ad-single-bottom-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:22px;
padding-top:18px;
border-top:1px solid var(--line);
color:var(--muted)}
.ad-single-bottom-meta span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:6px 11px;
border-radius:999px;
background:var(--soft);
font-size:14px;
font-weight:650}
.ad-params{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:20px 0}
.ad-params div{
padding:14px;
border-radius:18px;
background:var(--soft)}
.ad-params span{
display:block;
color:var(--muted);
font-size:12px}
.ad-params strong{
display:block;
margin-top:4px;
line-height:1.25}
.ad-params a{
color:var(--dark);
text-decoration:none;
border-bottom:1px solid rgba(8,19,15,.22)}
.ad-params a:hover{
color:var(--accent);
border-bottom-color:currentColor}
.breadcrumbs{
color:var(--muted);
font-size:14px}
.auth-shell{
display:grid;
place-items:center;
padding:10px 0}
.auth-card{
width:min(460px,100%);
padding:28px}
.auth-card--wide{
width:min(560px,100%)}
.auth-card h2{
font-size:34px;
margin:0 0 18px}
.auth-card__foot{
margin-bottom:0;
text-align:center;
color:var(--muted)}
.auth-card__foot a{
font-weight:700;
color:var(--accent)}
.form{
display:grid;
gap:14px}
.form input:focus,.form select:focus,.form textarea:focus{
border-color:rgba(22,163,74,.6);
box-shadow:0 0 0 4px rgba(22,163,74,.08)}
.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px}
.form-card{
padding:22px}
.form-alert{
padding:13px 14px;
border-radius:16px;
background:#fef2f2;
color:#991b1b;
font-weight:650}
.notice-card{
padding:18px}
.notice-card--success{
background:#ecfdf5;
color:#047857}
.notice-card--soft{
display:flex;
align-items:flex-start;
gap:14px;
padding:16px 18px;
background:linear-gradient(180deg,#f7fbf8,#f2f7fa);
border:1px solid #e3ebf2;
border-radius:16px;
box-shadow:none;
font-weight:400}
.notice-card--soft .notice-card__icon{
flex:0 0 auto;
width:40px;height:40px;
display:grid;place-items:center;
border-radius:12px;
background:rgba(219,166,23,.14);
color:#a8790a}
.notice-card--soft .notice-card__icon svg{width:21px;height:21px}
.notice-card--soft .notice-card__body{
display:flex;
flex-direction:column;
gap:3px;
min-width:0}
.notice-card--soft .notice-card__title{
font-size:14px;
font-weight:750;
color:var(--ink,#1b2434);
line-height:1.3}
.notice-card--soft .notice-card__text{
font-size:13px;
line-height:1.5;
color:var(--muted)}
.account-layout{
display:grid;
grid-template-columns:252px 1fr;
gap:20px}
.account-sidebar{
position:sticky;
top:88px;
border:1px solid #e8edf3;
border-radius:18px;
padding:12px;
background:#fff;
box-shadow:0 4px 18px rgba(15,23,42,.05);
align-self:start}
.account-user span{
display:block;
font-size:12px;
color:var(--muted)}
.account-nav-link--button{
border:0;
background:transparent;
text-align:left;
cursor:pointer}
.account-content{
min-width:0}
.account-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:center;
margin-bottom:18px}
/* Заголовок без кнопки праворуч (напр. огляд кабінету) */
.account-head--plain{
justify-content:flex-start;
margin-bottom:16px}
.account-head h2{
margin:0;
font-size:34px;
letter-spacing:-.04em}
.muted{
color:var(--muted)}
/* ── Огляд кабінету: картки-переходи ── */
.dashboard-cards{
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-bottom:18px}
.dashboard-card{
display:flex;
align-items:center;
gap:16px;
padding:18px 20px;
background:#fff;
border:1px solid var(--line,#e6ebf2);
border-radius:16px;
text-decoration:none;
color:inherit;
box-shadow:0 1px 3px rgba(20,32,52,.05);
transition:border-color .15s,box-shadow .15s,transform .15s}
.dashboard-card:hover{
border-color:var(--accent);
box-shadow:0 10px 26px rgba(20,32,52,.10);
transform:translateY(-2px)}
.dashboard-card:focus-visible{
outline:3px solid rgba(47,158,98,.25);
outline-offset:2px}
.dashboard-card__icon{
flex:0 0 auto;
width:48px;height:48px;
display:grid;place-items:center;
border-radius:14px;
background:rgba(47,158,98,.10);
color:var(--accent)}
.dashboard-card__icon svg{width:24px;height:24px}
.dashboard-card__body{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:3px}
.dashboard-card__title{
font-weight:700;
font-size:16px;
line-height:1.25}
.dashboard-card__text{
color:var(--muted);
font-size:13px;
line-height:1.4}
.dashboard-card__meta{
display:inline-flex;
align-items:center;
gap:5px;
margin-top:5px;
font-size:12px;
font-weight:650;
color:var(--muted)}
.dashboard-card__meta svg{
width:15px;height:15px;
flex:0 0 auto}
.dashboard-card__meta.is-verified{
color:#0a8a33}
.dashboard-card__arrow{
flex:0 0 auto;
color:var(--muted);
display:grid;place-items:center;
transition:transform .15s,color .15s}
.dashboard-card__arrow svg{width:20px;height:20px}
.dashboard-card:hover .dashboard-card__arrow{
color:var(--accent);
transform:translateX(3px)}
.account-table{
display:grid;
gap:10px}
.account-table__row{
display:grid;
grid-template-columns:86px 1fr auto;
gap:14px;
align-items:center;
background:#fff;
border:1px solid var(--line);
border-radius:20px;
padding:10px}
.account-table__actions{
display:flex;
gap:8px;
flex-wrap:wrap}
.empty-state{
padding:32px;
border:1px dashed var(--line);
border-radius:24px;
background:#fff;
text-align:center}
.empty-state h3{
margin:0 0 8px}
.tariff-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px}
.tariff-card{
padding:20px}
.tariff-card h3{
margin-top:0}
.tariff-card strong{
display:block;
font-size:26px;
color:var(--accent);
margin-bottom:8px}
.chat-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:18px}
.chat-thread{
border:1px solid var(--line);
background:#fff;
border-radius:18px;
padding:14px;
text-align:left;
cursor:pointer}
.chat-thread strong,.chat-thread span{
display:block}
.chat-thread span{
font-size:12px;
color:var(--muted);
margin-top:4px}
.chat-window{
min-height:480px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
overflow:hidden}
.chat-window__head{
padding:16px 18px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:12px}
.chat-messages{
padding:18px;
display:grid;
gap:10px;
max-height:420px;
overflow:auto}
.chat-message{
max-width:75%;
padding:12px 14px;
border-radius:18px;
background:var(--soft)}
.chat-message.is-mine{
justify-self:end;
background:#dcfce7}
.chat-message p{
margin:0}
.chat-message span{
display:block;
color:var(--muted);
font-size:11px;
margin-top:5px}
.chat-form{
border-top:1px solid var(--line);
display:grid;
grid-template-columns:1fr auto;
gap:10px;
padding:12px}
.chat-form textarea{
height:52px;
resize:none;
border:1px solid var(--line);
border-radius:16px;
padding:12px}
.seller-hero{
background:linear-gradient(135deg,#f2fff6,#fff)}
/* Розкладку seller-hero (сітка, аватар, кнопка) задає 76-ad-single.css. */
.seller-tags{
display:flex;
gap:8px;
flex-wrap:wrap}
.seller-tags span{
padding:6px 10px;
border-radius:999px;
background:#fff;
border:1px solid var(--line);
font-weight:700;
font-size:13px}
/* ============================================================
ПІДВАЛ САЙТУ
Мінімалістична сітка: бренд + дві колонки меню + підтримка,
знизу — смуга копірайту. Адаптується від широких екранів до 320px.
============================================================ */
.site-footer{
margin-top:48px;
padding:40px 0 0;
background:var(--dark);
color:#fff}
.site-footer__grid{
display:grid;
grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) minmax(0,1.2fr);
gap:28px 32px;
align-items:start}
.site-footer__title{
display:inline-block;
color:#fff;
font-size:17px;
font-weight:750;
letter-spacing:.01em;
text-decoration:none}
.site-footer__title:hover{color:rgba(255,255,255,.85)}
.site-footer__logo{
display:inline-block;
max-width:200px}
.site-footer__logo-img{
display:block;
width:auto;
max-width:100%;
height:auto;
max-height:52px;
object-fit:contain}
.site-footer__tagline{
margin:8px 0 0;
max-width:34ch;
color:rgba(255,255,255,.62);
font-size:13.5px;
line-height:1.55}
.site-footer__col-title{
display:block;
margin-bottom:12px;
color:rgba(255,255,255,.48);
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase}
.site-footer__menu{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:9px}
.site-footer__menu a{
color:rgba(255,255,255,.76);
font-size:14px;
line-height:1.35;
text-decoration:none;
transition:color .15s ease}
.site-footer__menu a:hover{color:#fff}
.site-footer__menu .current-menu-item>a{color:#fff;font-weight:650}
.site-footer__contacts{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px}
.site-footer__contact{
display:inline-flex;
align-items:center;
gap:9px;
color:rgba(255,255,255,.82);
font-size:14px;
text-decoration:none;
transition:color .15s ease;
word-break:break-word}
.site-footer__contact:hover{color:#fff}
.site-footer__contact svg{
width:18px;
height:18px;
flex:0 0 auto;
fill:currentColor;
opacity:.9}
.site-footer__contact svg[fill="none"]{fill:none}
.site-footer__note{
margin:12px 0 0;
color:rgba(255,255,255,.5);
font-size:12.5px;
line-height:1.5}
.site-footer__bottom{
margin-top:32px;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.10);
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap}
.site-footer__copy{
color:rgba(255,255,255,.5);
font-size:12.5px}
/* Легкий текстовий перемикач мов */
.site-footer__langs{
display:inline-flex;
align-items:center;
gap:10px;
flex-wrap:wrap}
.site-footer__lang{
position:relative;
color:rgba(255,255,255,.55);
font-size:12.5px;
text-decoration:none;
transition:color .15s ease}
.site-footer__lang:hover{color:#fff}
.site-footer__lang.is-current{
color:#fff;
font-weight:650;
pointer-events:none}
.site-footer__lang + .site-footer__lang::before{
content:"";
position:absolute;
left:-6px;
top:50%;
width:1px;
height:11px;
transform:translateY(-50%);
background:rgba(255,255,255,.20)}
@media(max-width:1100px){
.site-footer__grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:26px 28px}
.site-footer__brand{grid-column:1 / -1}
}
@media(max-width:560px){
.site-footer{margin-top:36px;padding-top:32px}
.site-footer__grid{
grid-template-columns:1fr;
gap:24px}
.site-footer__brand{grid-column:auto}
.site-footer__tagline{max-width:none}
.site-footer__bottom{
margin-top:26px;
padding:16px 0;
flex-direction:column-reverse;
align-items:center;
gap:12px;
text-align:center}
.site-footer__logo{max-width:170px}
}
.modal{
position:fixed;
inset:0;
background:rgba(8,19,15,.64);
display:flex;
align-items:center;
justify-content:center;
z-index:100;
padding:20px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .22s ease, visibility .22s ease}
.modal.is-active{
opacity:1;
visibility:visible;
pointer-events:auto}
.modal__box{
width:min(520px,100%);
background:#fff;
border-radius:28px;
padding:24px;
position:relative;
transform:translateY(16px) scale(.96);
opacity:.92;
transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease}
.modal.is-active .modal__box{
transform:translateY(0) scale(1);
opacity:1;
}
.modal__close{
position:absolute;
top:12px;
right:14px;
border:0;
background:var(--soft);
width:36px;
height:36px;
border-radius:999px;
font-size:24px;
cursor:pointer}
.pagination{
margin-top:24px}
.nav-links{
display:flex;
gap:8px;
justify-content:center}
.page-numbers{
padding:10px 14px;
border:1px solid var(--line);
border-radius:12px}
.page-numbers.current{
background:var(--dark);
color:#fff}
.page-content{
max-width:100%}
.content-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.content-card{
padding:22px}
/* адаптив базы, шапка, topbar */
@media(max-width:1100px){
.ads-grid{
grid-template-columns:repeat(3,1fr)}
.category-grid{
grid-template-columns:repeat(3,1fr)}
.ad-single{
grid-template-columns:1fr}
.ad-single-head{
order:1;
padding:16px 18px;
border-radius:18px}
.ad-gallery{
order:2}
.ad-content{
order:3;
grid-column:auto}
.ad-sidebar{
order:4;
grid-column:auto;
grid-row:auto;
position:static}
.catalog-layout{
grid-template-columns:1fr}
.catalog-filter{
position:static}
.account-layout{
grid-template-columns:1fr}
.account-sidebar{
position:static}
.chat-layout{
grid-template-columns:1fr}
.tariff-grid{
grid-template-columns:1fr}
.dashboard-cards{
grid-template-columns:1fr}}
@media(max-width:900px){
.site-header__inner{
height:68px}
.menu-toggle{
display:block}
.main-nav{
position:absolute;
left:16px;
right:16px;
top:76px;
display:none;
flex-direction:column;
align-items:stretch;
background:#fff;
border:1px solid var(--line);
border-radius:24px;
padding:12px;
box-shadow:var(--shadow)}
.main-nav.is-open{
display:flex}
.hero__grid{
grid-template-columns:1fr}
.hero h1,.page-hero h1{
font-size:40px}
.section{
padding:44px 0}
.ads-grid,.category-grid{
grid-template-columns:1fr}
.page-hero__grid,.section-head--row{
display:block}
.form-grid,.ad-params,.account-table__row{
grid-template-columns:1fr}
.ad-gallery__main{
height:330px}
.contact-grid{
grid-template-columns:1fr}
.account-head{
display:block}
.hero__actions{
display:grid}
.btn{
width:100%}}
.card-price{
display:grid;
gap:2px}
.card-price strong{
font-size:16px}
.price-discount{
display:inline-flex;
width:max-content;
margin-top:3px;
padding:3px 7px;
border-radius:999px;
background:#fee2e2;
color:#991b1b;
font-size:12px;
font-weight:700}
.price-big--stack{
display:grid;
gap:4px;
margin-bottom:14px}
.price-big--stack strong{
font-size:34px;
color:var(--dark)}
.price-big--stack .price-old{
font-size:16px}
.price-big--stack .price-discount{
font-size:13px}
.option-boxes{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:2px 0 4px}
.gallery-manager{
display:grid;
gap:14px;
padding:18px;
border:1px solid var(--line);
border-radius:24px;
background:linear-gradient(180deg,#fff,var(--soft))}
.gallery-manager__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px}
.gallery-manager__head strong{
display:block;
font-size:18px}
.gallery-manager__input{
display:none}
.gallery-drop.is-active,.gallery-drop:hover{
border-color:var(--accent);
background:#ecfdf5;
color:#087036}
.gallery-preview{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px}
.gallery-item{
position:relative;
aspect-ratio:1.15/1;
border-radius:18px;
overflow:hidden;
background:#fff;
border:2px solid transparent;
box-shadow:0 10px 26px rgba(8,19,15,.08);
cursor:grab}
.gallery-item.is-dragging{
opacity:.55}
.gallery-item.is-main{
border-color:var(--accent)}
.gallery-item img{
width:100%;
height:100%;
object-fit:cover}
.gallery-item__main{
position:absolute;
left:8px;
top:8px;
display:none;
padding:5px 8px;
border-radius:999px;
background:var(--accent);
color:#fff;
font-size:11px;
font-weight:700}
.gallery-item.is-main .gallery-item__main{
display:inline-flex}
.gallery-item button{
position:absolute;
right:8px;
top:8px;
width:28px;
height:28px;
border:0;
border-radius:999px;
background:rgba(8,19,15,.76);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer}
.ad-gallery--pro{
display:grid;
gap:12px}
.ad-gallery__stage{
position:relative}
.gallery-label{
position:absolute;
top:16px;
left:16px;
padding:8px 12px;
border-radius:999px;
color:#fff;
font-weight:700;
box-shadow:0 10px 24px rgba(0,0,0,.18)}
.gallery-label--free{
background:#0f172a}
.gallery-label--discount{
background:#dc2626}
.ad-gallery__thumbs{
grid-template-columns:repeat(6,1fr);
margin-top:10px;
display:flex;
gap:10px;
overflow:auto;
padding-bottom:2px}
.ad-gallery__thumb{
width:96px;
min-width:96px;
height:82px;
padding:0;
border:2px solid transparent;
border-radius:16px;
overflow:hidden;
background:var(--soft);
cursor:pointer}
.ad-gallery__thumb.is-active{
border-color:var(--accent)}
.ad-gallery__thumb img{
width:100%;
height:100%;
object-fit:cover}
.catalog-filter select[name="sort"]{
font-weight:700}
@media(max-width:760px){
.gallery-manager__head{
display:grid}
.gallery-preview{
grid-template-columns:repeat(2,minmax(0,1fr))}
.ad-gallery__thumb{
width:78px;
min-width:78px;
height:68px}
.option-boxes{
display:grid}
.price-big--stack strong{
font-size:28px}}
.topbar{
background:#0f172a;
color:#e5e7eb;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,.08)}
.topbar__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:38px}
.topbar a{
color:#e5e7eb;
text-decoration:none}
.topbar__left,.topbar__right{
display:flex;
align-items:center;
gap:16px}
.top-profile{
display:flex;
align-items:center;
gap:8px}
.top-profile img{
width:24px;
height:24px;
border-radius:50%;
object-fit:cover}
.site-header__inner{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:nowrap}
.header-search input{
flex:1;
border:0;
padding:13px 16px;
outline:none}
.category-picker{
position:relative}
.category-picker__button{
width:100%;
border:1px solid rgba(15,23,42,.12);
background:#fff;
border-radius:16px;
padding:13px 42px 13px 14px;
text-align:left;
cursor:pointer;
min-height:50px}
.category-picker__button:after{
content:"›";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%) rotate(90deg);
font-size:22px}
.category-picker__panel{
position:absolute;
left:0;
right:0;
top:calc(100% + 8px);
z-index:40;
background:#fff;
border:1px solid rgba(15,23,42,.12);
border-radius:22px;
box-shadow:0 22px 70px rgba(15,23,42,.18);
padding:14px;
display:none;
max-height:420px;
overflow:auto}
.category-picker.is-open .category-picker__panel{
display:block}
.category-picker__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px}
.category-picker__head button{
border:0;
background:#f1f5f9;
border-radius:50%;
width:30px;
height:30px;
font-size:20px;
cursor:pointer}
.category-picker__search{
width:100%;
border:1px solid rgba(15,23,42,.12);
border-radius:14px;
padding:11px 13px;
margin-bottom:10px}
.category-option{
width:100%;
display:block;
border:0;
background:#f8fafc;
border-radius:14px;
padding:10px 12px;
text-align:left;
margin-bottom:6px;
cursor:pointer}
.category-option:hover{
background:#fff1f1}
.category-option span{
display:block;
font-weight:700;
padding-left:calc(var(--level,0) * 18px)}
.category-option small{
display:block;
color:#64748b;
padding-left:calc(var(--level,0) * 18px);
font-size:12px;
margin-top:2px}
.catalog-rubrics{
display:grid;
/* 4 рубрики + кнопка «Усі рубрики» = один рядок із 5 колонок */
grid-template-columns:repeat(5,minmax(0,1fr));
gap:12px;
width:100%;
margin-bottom:24px}
.catalog-rubric img{
width:42px;
height:42px;
border-radius:12px;
object-fit:cover}
.modal__box--wide{
width:min(980px,calc(100vw - 32px));
max-height:86vh;
overflow:auto}
.catalog-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
padding:14px;
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:22px}
.catalog-toolbar__form{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap}
.catalog-toolbar select{
border:1px solid rgba(15,23,42,.12);
border-radius:12px;
padding:9px 34px 9px 12px;
background-color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23526173' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:13px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none}
.catalog-filter .category-picker__panel{
position:relative;
top:auto;
margin-top:8px}
.catalog-filter h3{
margin:0;
margin-top:0}
.price-note{
display:block;
color:#64748b;
font-weight:700;
margin-top:2px}
.seller-avatar--image{
overflow:hidden}
.seller-avatar--image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit}
.seller-card__top small{
display:block;
color:#64748b;
margin-top:4px}
.video-box{
position:relative;
border-radius:24px;
overflow:hidden;
background:#0f172a;
margin-top:22px}
.video-box:before{
content:"";
display:block;
padding-top:56.25%}
.video-box iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0}
.terms-box p{
margin:6px 0 0;
color:#64748b}
.form-grid--top{
align-items:start}
@media (max-width: 1024px){
.site-header__inner{
flex-wrap:wrap}
.header-search{
order:5;
flex-basis:100%}
.catalog-rubrics{
display:flex;
grid-template-columns:none;
overflow-x:auto;
gap:10px;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch}
.catalog-rubrics::-webkit-scrollbar{display:none}
.catalog-rubrics .catalog-rubric{
flex:0 0 auto;
min-width:210px;
scroll-snap-align:start}
.catalog-toolbar{
align-items:flex-start;
flex-direction:column}
.catalog-layout{
grid-template-columns:1fr}}
@media (max-width: 640px){
.topbar__inner{
flex-direction:column;
align-items:flex-start;
padding:8px 0}
.topbar__left,.topbar__right{
flex-wrap:wrap}
.catalog-rubrics{
display:flex;
grid-template-columns:none;
overflow-x:auto;
gap:10px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch}
.catalog-rubrics::-webkit-scrollbar{display:none}
.catalog-rubrics .catalog-rubric{
flex:0 0 auto;
min-width:200px;
scroll-snap-align:start}
.catalog-toolbar__form{
width:100%;
display:grid;
grid-template-columns:1fr}
.catalog-toolbar label{
align-items:flex-start;
flex-direction:column}
.catalog-toolbar select{
width:100%}
.category-picker__panel{
position:fixed;
left:12px;
right:12px;
top:80px;
max-height:calc(100vh - 120px)}}
.seller-hero__avatar--image{
overflow:hidden}
.seller-hero__avatar--image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit}
/* ===== Перемикач мов у шапці ===== */
/* ============================================================
ПЕРЕМИКАЧ МОВИ — стиль iOS-свитча
Повзунок їде під активну позначку: положення = --lang-active,
ширина = 1 / --lang-count. Працює для будь-якої кількості мов.
============================================================ */
.lang-switcher{
--lang-count:2;
--lang-active:0;
position:relative;
display:inline-grid;
grid-template-columns:repeat(var(--lang-count),minmax(34px,1fr));
align-items:stretch;
padding:3px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
isolation:isolate;
-webkit-tap-highlight-color:transparent}
.lang-switcher__thumb{
position:absolute;
z-index:0;
top:3px;
bottom:3px;
left:3px;
width:calc((100% - 6px) / var(--lang-count));
border-radius:999px;
background:#fff;
box-shadow:0 1px 3px rgba(15,23,42,.22);
transform:translateX(calc(var(--lang-active) * 100%));
transition:transform .28s cubic-bezier(.32,.72,.35,1)}
.lang-switcher__item{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px 10px;
border-radius:999px;
color:rgba(255,255,255,.74);
font-size:12px;
font-weight:700;
letter-spacing:.03em;
text-decoration:none;
transition:color .2s ease}
.lang-switcher__item:hover{color:#fff}
.lang-switcher__item.is-active{
color:#0f172a;
pointer-events:none}
/* Світлий фон (мобільне меню профілю) */
.topbar-mobile__menu .lang-switcher{
background:#eef2f7;
border-color:rgba(15,23,42,.08);
margin-bottom:8px;
align-self:stretch}
.topbar-mobile__menu .lang-switcher__thumb{
background:#0f172a;
box-shadow:0 2px 6px rgba(15,23,42,.24)}
.topbar-mobile__menu .lang-switcher__item{color:#64748b}
.topbar-mobile__menu .lang-switcher__item:hover{color:#0f172a}
.topbar-mobile__menu .lang-switcher__item.is-active{color:#fff}
/* На дотикових екранах — великі зручні цілі (не менше 44px за рекомендаціями) */
@media(max-width:900px){
.lang-switcher{
padding:4px;
border-radius:14px;
grid-template-columns:repeat(var(--lang-count),minmax(56px,1fr))}
.lang-switcher__thumb{
top:4px;bottom:4px;left:4px;
width:calc((100% - 8px) / var(--lang-count));
border-radius:11px}
.lang-switcher__item{
min-height:38px;
padding:8px 12px;
border-radius:11px;
font-size:13px}
}
@media(prefers-reduced-motion:reduce){
.lang-switcher__thumb{transition:none}
}
/* базовый слой: страницы и компоненты */
body{
margin:0;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
line-height:1.5;
background:#fbfcfd;
color:var(--text)}
.logo__mark,.seller-avatar,.account-user__avatar,.seller-hero__avatar{
background:linear-gradient(135deg,#2f9e62,#63c174);
font-weight:700}
.logo__text strong,.account-head h2,.section-head h2,.catalog-filter h3,.catalog-toolbar__count{
color:#263345;
font-weight:700}
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:7px 12px;
border-radius:999px;
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em;
background:#ecfdf3;
color:#24784b;
font-weight:700}
.btn,.catalog-button,.header-search button,.main-nav a,.link-more,.category-card span,.verified,.badge,.contact-grid a,.auth-card__foot a,.account-nav-link,.seller-tags span{
font-weight:700}
.catalog-button{
border:0;
border-radius:14px;
color:#fff;
padding:13px 18px;
font-weight:700;
cursor:pointer;
background:linear-gradient(135deg,#1e293b,#334155);
box-shadow:0 14px 28px rgba(30,41,59,.2)}
.catalog-button:hover{background:linear-gradient(135deg,#0f172a,#1e293b)}
.nav-pill,.page-numbers.current{
background:#2f9e62!important;
color:#fff!important}
.header-search button{
border:0;
color:#fff;
padding:0 18px;
font-weight:700;
cursor:pointer;
background:#2f9e62}
.form label{
display:grid;
gap:7px;
font-weight:650;
color:#334155}
.form input,.form select,.form textarea{
width:100%;
border:1px solid var(--line);
border-radius:16px;
padding:13px 14px;
outline:none;
background:#fff;
color:#263345;
border-color:rgba(36,48,68,.14)}
.form input::placeholder,.form textarea::placeholder{
color:#94a3b8}
.form-card,.auth-card,.seller-card,.contact-card,.ad-card,.catalog-toolbar{
box-shadow:0 16px 42px rgba(36,48,68,.08)}
.terms-box{
border:1px solid rgba(238,57,55,.20);
border-radius:18px;
padding:16px;
margin:10px 0 18px;
background:linear-gradient(180deg,#fff,#f8fbf9);
border-color:rgba(47,158,98,.18)}
.hint{
display:inline-flex;
width:19px;
height:19px;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:12px;
margin-left:6px;
position:relative;
cursor:help;
background:#2f9e62;
color:#fff}
.field-help{
display:block;
color:#64748b;
margin-top:6px;
display:none!important}
.gallery-manager__head span{
color:var(--muted);
font-size:13px;
margin-top:4px;
display:none}
.gallery-drop{
display:grid;
place-items:center;
min-height:112px;
border:2px dashed rgba(22,163,74,.35);
border-radius:22px;
background:rgba(255,255,255,.7);
text-align:center;
cursor:pointer;
transition:.2s ease;
font-weight:650;
color:#64748b}
.gallery-item__main,.gallery-label,.price-discount{
font-weight:700}
.ad-public-id{
display:inline-flex;
border-radius:999px;
padding:7px 12px;
margin-bottom:10px;
font-weight:650;
background:#eef6f1;
color:#24784b}
.price-big--stack strong,.price-big{
color:#263345}
.price-old{
display:inline-block;
text-decoration:line-through;
font-size:13px;
font-weight:700;
color:#8a97a8}
.catalog-rubric{
display:flex;
align-items:center;
gap:10px;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
padding:10px 12px;
text-decoration:none;
box-shadow:0 6px 18px rgba(15,23,42,.05);
cursor:pointer;
background:#fff;
color:#263345}
.catalog-rubric:hover{border-color:rgba(47,158,98,.3)}
.catalog-rubric__name{
flex:1;
min-width:0;
font-weight:650;
font-size:14px;
line-height:1.25;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.catalog-rubric__count{
flex:none;
display:inline-flex;
align-items:center;
padding:3px 9px;
border-radius:999px;
background:#f1f5f9;
color:#64748b;
font-size:12px;
font-weight:700}
.catalog-rubric.is-active{
border-color:rgba(47,158,98,.38);
background:#f1faf5}
.catalog-rubric.is-active .catalog-rubric__count{background:#dcfce7;color:#166534}
/* Кнопка «Усі рубрики»: компактний рядок (підпис + лічильник поряд),
вирівняна в один стиль зі звичайними картками рубрик. */
.catalog-rubric--all{
justify-content:space-between;
gap:8px;
background:#eef6f1;
color:#24784b;
border:1px dashed rgba(47,158,98,.32);
font-weight:700}
.catalog-rubric--all:hover{
background:#e2f4ea;
color:#16633a;
border-color:rgba(47,158,98,.5)}
.catalog-rubric--all__label{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px}
.catalog-rubric--all__count{
flex:none;
display:inline-flex;
align-items:center;
padding:3px 9px;
border-radius:999px;
background:rgba(47,158,98,.14);
color:#1c6b41;
font-size:12px;
font-weight:700}
.catalog-rubrics-popup{
position:fixed;
inset:0;
z-index:1200;
display:grid;
place-items:center;
padding:20px;
opacity:0;
visibility:hidden;
transition:opacity .22s ease,visibility .22s ease}
.catalog-rubrics-popup.is-open{
opacity:1;
visibility:visible}
.catalog-rubrics-popup[hidden]{
display:none}
.catalog-rubrics-popup__overlay{
position:absolute;
inset:0;
background:rgba(8,15,28,.52);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px)}
.catalog-rubrics-popup__dialog{
position:relative;
z-index:1;
width:min(980px,100%);
max-height:min(760px,calc(100dvh - 40px));
display:flex;
flex-direction:column;
overflow:hidden;
border-radius:26px;
background:#fff;
box-shadow:0 28px 80px rgba(15,23,42,.28);
transform:translateY(14px) scale(.98);
transition:transform .22s ease}
.catalog-rubrics-popup.is-open .catalog-rubrics-popup__dialog{
transform:translateY(0) scale(1)}
.catalog-rubrics-popup__top{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:14px;
padding:18px;
border-bottom:1px solid rgba(15,23,42,.08)}
.catalog-rubrics-popup__top h3{
margin:0;
color:#263345;
font-size:24px;
line-height:1.15;
letter-spacing:-.03em}
.catalog-rubrics-popup__top p{
margin:4px 0 0;
color:#718096;
font-size:13px}
.catalog-rubrics-popup__back,
.catalog-rubrics-popup__close{
border:1px solid rgba(15,23,42,.10);
border-radius:999px;
background:#f8fafc;
color:#263345;
cursor:pointer;
font-weight:700}
.catalog-rubrics-popup__back{
min-height:38px;
padding:0 14px}
.catalog-rubrics-popup__back[hidden]{
display:none}
.catalog-rubrics-popup__close{
width:40px;
height:40px;
font-size:24px;
line-height:1}
.catalog-rubrics-popup__grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:12px;
padding:18px;
overflow:auto;
-webkit-overflow-scrolling:touch}
.catalog-rubrics-popup__item{
min-width:0;
display:grid;
grid-template-columns:46px minmax(0,1fr);
align-items:center;
gap:10px;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
padding:12px;
text-align:left;
text-decoration:none;
background:#fff;
color:#263345;
cursor:pointer;
box-shadow:0 10px 26px rgba(15,23,42,.05)}
.catalog-rubrics-popup__item:hover,
.catalog-rubrics-popup__item.is-active{
border-color:rgba(47,158,98,.32);
background:#f3fbf6}
.catalog-rubrics-popup__item img{
grid-row:span 2;
width:46px;
height:46px;
object-fit:cover;
border-radius:14px}
.catalog-rubrics-popup__item span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:700}
.catalog-rubrics-popup__item small,
.catalog-rubrics-popup__item em{
display:block;
color:#718096;
font-size:12px;
font-style:normal}
.catalog-rubrics-popup__empty{
grid-column:1/-1;
padding:20px;
border:1px dashed rgba(15,23,42,.12);
border-radius:18px;
color:#718096;
background:#f8fafc}
body.catalog-rubrics-popup-open{
overflow:hidden}
@media(max-width:640px){
.catalog-rubrics-popup{
padding:10px;
align-items:end}
.catalog-rubrics-popup__dialog{
width:100%;
max-height:calc(100dvh - 20px);
border-radius:24px 24px 18px 18px}
.catalog-rubrics-popup__top{
grid-template-columns:minmax(0,1fr) auto;
gap:10px}
.catalog-rubrics-popup__back{
grid-column:1/-1;
justify-self:start}
.catalog-rubrics-popup__top h3{
font-size:20px}
.catalog-rubrics-popup__grid{
grid-template-columns:1fr;
gap:6px;
padding:12px}
/* Компактний рядок: менша висота, щоб на екран влізло більше рубрик */
.catalog-rubrics-popup__item{
grid-template-columns:36px minmax(0,1fr) auto;
gap:10px;
padding:9px 10px;
border-radius:12px;
box-shadow:none}
.catalog-rubrics-popup__item img{
grid-row:span 2;
width:36px;
height:36px;
border-radius:9px}
.catalog-rubrics-popup__item span{font-size:14px}
.catalog-rubrics-popup__item small{font-size:11.5px}
/* Стрілка замість текстового підпису — показує, що є вкладені рубрики */
button.catalog-rubrics-popup__item::after{
content:"";
grid-column:3;
grid-row:1 / span 2;
align-self:center;
width:8px;
height:8px;
margin-right:2px;
border-right:2px solid #94a3b8;
border-bottom:2px solid #94a3b8;
transform:rotate(-45deg)}
}
.catalog-toolbar label{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:650;
color:#475569}
.filter-category-note{
border:1px solid rgba(36,48,68,.10);
background:linear-gradient(180deg,#fff,#f8fbf9);
border-radius:18px;
padding:14px;
margin-bottom:14px}
.filter-category-note span{
display:block;
color:#718096;
font-size:13px;
margin-bottom:4px}
.filter-category-note strong{
display:block;
color:#263345;
font-weight:650;
line-height:1.3}
.filter-category-note small{
display:block;
color:#718096;
margin-top:6px;
line-height:1.35}
.catalog-filter h3,.catalog-toolbar__count,.filter-group__title,.form label{
font-weight:650}
.catalog-rubrics:empty:before{
content:"У цій рубриці поки немає вкладених підрубрик. Можна одразу застосувати фільтри нижче.";
display:block;
grid-column:1/-1;
padding:18px;
border:1px dashed rgba(36,48,68,.16);
border-radius:20px;
color:#718096;
background:#fff}
/* Хлібні крихти каталогу: завжди один рядок.
Довгий ланцюжок не переноситься, а прокручується горизонтально;
остання ланка (поточна рубрика) за потреби скорочується багатокрапкою. */
.catalog-breadcrumbs{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
margin:0 0 12px;
color:#64748b;
font-size:14px;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.catalog-breadcrumbs::-webkit-scrollbar{display:none}
.catalog-breadcrumbs a{
color:#24784b;
flex:0 0 auto;
white-space:nowrap}
.catalog-breadcrumbs>span{flex:0 0 auto}
.catalog-breadcrumbs .breadcrumbs__item{
display:inline-flex;
align-items:center;
flex:0 0 auto;
white-space:nowrap}
.breadcrumbs__item > meta{display:none}
.catalog-breadcrumbs strong{
color:#263345;
font-weight:650;
min-width:0;
flex:0 1 auto;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.filter-cat-level__list{
display:grid;
gap:7px;
max-height:260px;
overflow:auto;
padding-right:3px}
.filter-cat-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 11px;
border-radius:14px;
border:1px solid rgba(36,48,68,.09);
background:#fff;
color:#334155;
transition:.18s ease}
.filter-cat-link:hover,.filter-cat-link.is-active{
border-color:rgba(47,158,98,.28);
background:#eef8f1;
color:#24784b}
.filter-cat-link span{
font-weight:650}
.filter-cat-link small{
min-width:28px;
text-align:center;
border-radius:999px;
background:#f1f5f9;
color:#64748b;
padding:2px 7px;
font-size:11px}
.filter-cat-link.is-active small{
background:#dff3e6;
color:#24784b}
.filter-cat-reset{
display:inline-flex;
justify-content:center;
padding:10px 12px;
border-radius:14px;
background:#f1f5f9;
color:#334155;
font-weight:650}
.filter-cat-level--empty{
padding:10px 12px;
border-radius:14px;
background:#fff;
color:#718096}
.active-filters{
margin:0 0 18px;
padding:14px;
border:1px solid rgba(36,48,68,.09);
border-radius:20px;
background:#fff;
box-shadow:0 12px 30px rgba(36,48,68,.06)}
.active-filters__label{
font-size:13px;
color:#718096;
margin-bottom:10px}
.active-filters__list{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap}
.filter-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 11px;
border-radius:999px;
background:#eef8f1;
color:#24784b;
border:1px solid rgba(47,158,98,.18);
font-weight:650;
font-size:13px}
.filter-chip span{
display:grid;
place-items:center;
width:18px;
height:18px;
border-radius:50%;
background:#fff;
color:#24784b}
.filter-chip--reset{
background:#263345;
color:#fff;
border-color:#263345}
.catalog-toolbar__form select{
cursor:pointer}
.catalog-pagination{
display:grid;
gap:16px;
justify-items:center;
margin-top:24px}
.catalog-load-more{
min-width:220px}
.pagination--numbers .page-numbers{
min-width:38px;
height:38px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(36,48,68,.12);
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff;
color:#334155;
font-weight:650}
.pagination--numbers .page-numbers.current{
background:#263345;
color:#fff;
border-color:#263345}
.empty-state--location{
background:#fff7ed;
border:1px solid rgba(245,158,11,.22);
color:#7c2d12}
.empty-state--location h3{
margin-bottom:6px}
@media (max-width:760px){
.catalog-load-more{
width:100%}
}
.header-search-results__inner{
display:grid;
gap:10px}
.search-result-group{
display:grid;
gap:6px}
.search-result-group>strong{
font-size:12px;
color:#718096;
font-weight:650;
text-transform:uppercase;
letter-spacing:.04em;
padding:5px 8px}
.search-result-item{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:#263345;
border-radius:14px;
padding:9px;
background:#f8fbf9;
border:1px solid transparent}
.search-result-item:hover{
background:#fff;
border-color:rgba(47,158,98,.22)}
.search-result-item img{
width:46px;
height:46px;
object-fit:cover;
border-radius:12px;
background:#eef4ef}
.search-result-item span{
display:grid;
gap:2px}
.search-result-item b{
font-size:14px;
font-weight:650}
.search-result-item small{
font-size:12px;
color:#718096}
.search-result-all{
display:block;
text-align:center;
text-decoration:none;
color:#fff;
background:#2f9e62;
border-radius:14px;
padding:11px 14px;
font-weight:650}
.header-search-empty{
padding:14px;
border-radius:14px;
background:#f8fbf9;
color:#718096;
text-align:center}
.filter-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:22px;
height:20px;
padding:0 6px;
margin-left:6px;
border-radius:999px;
background:#edf7f1;
color:#24784b;
font-size:11px;
font-weight:650}
.notice-card--warning{
background:#fff7ed;
border-color:rgba(245,158,11,.25);
color:#7c4a03}
.verify-email-card{
display:grid;
gap:18px}
.verify-code-form{
display:grid;
gap:14px}
.verify-resend-form{
border-top:1px solid rgba(36,48,68,.10);
padding-top:16px}
.account-email-alert .code-input{
width:130px;
background:#fff}
.catalog-results{
position:relative}
@keyframes bmpSpin{
to{
transform:rotate(360deg)}}
.header-search.is-search-open{
overflow:visible}
.header-search-results{
position:absolute;
left:0;
right:0;
z-index:80;
background:#fff;
border:1px solid rgba(36,48,68,.12);
border-radius:22px;
box-shadow:0 24px 70px rgba(36,48,68,.18);
padding:10px;
max-height:min(520px,70vh);
overflow:auto;
top:calc(100% + 12px)}
.search-result-all:after{
content:" →"}
@media(max-width:1024px){
.account-email-alert{
grid-column:1/-1;
grid-template-columns:1fr}
.account-email-alert__forms{
min-width:0}
.account-email-alert__forms form{
align-items:stretch;
flex-wrap:wrap}
.account-email-alert .code-input{
width:100%}}
.account-shell{
display:grid;
gap:18px}
.account-email-alert{
grid-column:2/3;
margin:0 0 18px;
padding:20px 22px;
border:1px solid rgba(245,158,11,.28);
border-radius:24px;
background:linear-gradient(135deg,#fff7ed,#fff);
box-shadow:0 18px 48px rgba(120,72,0,.08);
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:center}
.account-email-alert__content strong{
display:block;
color:#7c4a03;
font-size:18px;
font-weight:650;
margin-bottom:6px}
.account-email-alert__content p{
margin:0;
color:#7c4a03;
line-height:1.45}
.account-email-alert__forms{
display:grid;
gap:10px;
min-width:310px}
.account-email-alert__forms form{
display:flex;
align-items:end;
gap:10px}
.account-email-alert__forms label{
display:grid;
gap:7px;
color:#7c4a03;
font-size:13px}
/* Редагування аватара продавця: кругле фото із зеленим «+» знизу */
.profile-avatar-edit{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-bottom:20px}
.profile-avatar-edit__control{
position:relative;
display:inline-block;
width:104px;
height:104px;
cursor:pointer;
border-radius:50%}
.profile-avatar-edit__control input[type=file]{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
border-radius:50%}
.profile-avatar-edit__pic{
display:block;
width:104px;
height:104px;
border-radius:50%;
overflow:hidden;
background:#eef2f7;
box-shadow:0 8px 22px rgba(15,23,42,.12), inset 0 0 0 1px rgba(15,23,42,.06);
transition:box-shadow .18s ease, transform .18s ease}
.profile-avatar-edit__pic img{
width:100%;
height:100%;
object-fit:cover;
display:block}
.profile-avatar-edit__control:hover .profile-avatar-edit__pic{
box-shadow:0 12px 28px rgba(47,158,98,.22), inset 0 0 0 2px rgba(47,158,98,.4)}
.profile-avatar-edit__plus{
position:absolute;
right:2px;
bottom:2px;
width:32px;
height:32px;
border-radius:50%;
background:#2f9e62;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 6px 16px rgba(47,158,98,.4), 0 0 0 3px #fff;
transition:transform .18s ease, background .18s ease;
pointer-events:none}
.profile-avatar-edit__control:hover .profile-avatar-edit__plus{
transform:scale(1.08);
background:#268a54}
.profile-avatar-edit__plus svg{width:18px;height:18px}
.profile-avatar-edit__hint{
font-size:12.5px;
color:#8a96a6;
font-weight:500}
.visually-hidden{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;border:0}
@media(max-width:1024px){
.account-email-alert{
grid-template-columns:1fr}
.account-email-alert__forms{
min-width:0}
.account-email-alert__forms form{
align-items:stretch;
flex-wrap:wrap}
.code-input{
width:100%!important}}
.bmp-notice-center{
display:grid;
gap:12px;
margin:0 0 18px}
.bmp-notice{
position:relative;
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
gap:13px;
align-items:start;
padding:16px 16px;
border:1px solid rgba(36,48,68,.10);
border-radius:22px;
background:#fff;
box-shadow:0 18px 48px rgba(36,48,68,.08);
animation:bmpNoticeIn .22s ease both}
.bmp-notice__icon{
width:38px;
height:38px;
border-radius:14px;
display:grid;
place-items:center;
font-weight:700;
background:#eef7f1;
color:#24784b}
.bmp-notice__body{
display:grid;
gap:5px;
min-width:0}
.bmp-notice__body strong{
font-size:15px;
font-weight:650;
color:#172033}
.bmp-notice__body p{
margin:0;
color:#5c6778;
line-height:1.45}
.bmp-notice__close{
width:32px;
height:32px;
border:0;
border-radius:50%;
background:#f4f7f5;
color:#64748b;
font-size:20px;
line-height:1;
cursor:pointer;
transition:.18s ease}
.bmp-notice__close:hover{
background:#e8efeb;
color:#111827}
.bmp-notice--warning{
border-color:rgba(245,158,11,.22);
background:linear-gradient(135deg,#fff7ed,#fff)}
.bmp-notice--warning .bmp-notice__icon{
background:#ffedd5;
color:#9a5a00}
.bmp-notice--error{
border-color:rgba(239,68,68,.18);
background:linear-gradient(135deg,#fff5f5,#fff)}
.bmp-notice--error .bmp-notice__icon{
background:#fee2e2;
color:#b91c1c}
.bmp-notice--success{
border-color:rgba(34,197,94,.18);
background:linear-gradient(135deg,#effdf4,#fff)}
.bmp-notice--success .bmp-notice__icon{
background:#dcfce7;
color:#15803d}
.bmp-notice--info .bmp-notice__icon{
background:#eaf3ff;
color:#2563eb}
.bmp-notice__link{
display:inline-flex;
width:max-content;
margin-top:6px;
font-weight:650;
color:#24784b}
.bmp-notice-email-forms{
display:flex;
align-items:end;
gap:10px;
flex-wrap:wrap;
margin-top:12px}
.email-code-status[hidden]{
display:none !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
}
.email-code-status{
flex:0 0 100%;
display:flex;
gap:8px;
align-items:center;
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(15,23,42,.10);
background:#fff;
color:#475569;
font-size:13px}
.email-code-status strong{
color:#0f172a}
.email-code-status--success{
border-color:rgba(34,197,94,.18);
background:#f0fdf4}
.email-code-status--warning{
border-color:rgba(245,158,11,.24);
background:#fff7ed}
.email-code-status--error{
border-color:rgba(239,68,68,.20);
background:#fff5f5}
.bmp-notice-email-forms form{
display:flex;
align-items:end;
gap:10px;
flex-wrap:wrap}
.bmp-notice-email-forms label{
display:grid;
gap:6px;
font-size:13px;
color:#334155;
font-weight:650}
.code-input{
max-width:180px;
width:136px!important;
min-height:48px;
border:1px solid rgba(124,74,3,.22)!important;
border-radius:16px!important;
background:#fff!important;
text-align:center;
letter-spacing:.22em;
font-size:22px!important;
font-weight:650!important;
color:#111827!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px rgba(124,74,3,.08);
transition:border-color .18s ease,box-shadow .18s ease}
.code-input:focus{
border-color:rgba(47,158,98,.55)!important;
box-shadow:0 0 0 4px rgba(47,158,98,.12),0 10px 26px rgba(124,74,3,.08)!important;
outline:none}
.bmp-notice__time{
display:block;
margin:3px 0 0;
color:#8a96a8;
font-size:11px;
line-height:1.35;
font-weight:650}
.topbar-mobile__badge{
margin-left:auto;
min-width:20px;
height:20px;
padding:0 6px;
border-radius:999px;
background:#ef4444;
color:#fff;
display:inline-grid;
place-items:center;
font-size:11px;
line-height:1;
font-weight:800}
.topbar-mobile__badge[hidden]{display:none!important}
.account-shell>.account-email-alert{
grid-column:auto;
margin:0;
display:none!important}
@keyframes bmpNoticeIn{
from{
opacity:0;
transform:translateY(-6px)}
to{
opacity:1;
transform:translateY(0)}}
@media(max-width:760px){
.bmp-notice{
grid-template-columns:34px minmax(0,1fr) auto;
padding:14px;
border-radius:18px}
.bmp-notice-email-forms,.bmp-notice-email-forms form{
display:grid;
width:100%}
.bmp-notice-email-forms .btn{
width:100%}
.code-input{
width:100%!important}}
.bmp-notice-center--inline{
margin:0 0 18px}
.bmp-notice-center--inline .bmp-notice{
animation:bmpNoticeSlideDown .24s ease both}
.catalog-rubrics{
transition:opacity .18s ease,transform .18s ease}
[data-catalog-results].is-loading~*{}
@keyframes bmpNoticeSlideDown{
from{
opacity:0;
transform:translateY(-10px)}
to{
opacity:1;
transform:translateY(0)}}
@keyframes bmpSpinFixed{
to{
transform:rotate(360deg)}}
.catalog-toolbar__count{
font-weight:700;
color:#526173}
.catalog-toolbar__count [data-results-count]{
font-weight:650;
color:#263345}
.ad-gallery__stage-inner{
position:relative;
width:100%;
height:100%;
min-height:420px;
border-radius:28px;
overflow:hidden;
background:#f4f7f5}
.ad-gallery__stage-inner>img,.ad-gallery__stage-inner iframe{
width:100%;
height:100%;
display:block;
object-fit:cover}
.video-box--gallery{
height:100%;
min-height:420px;
background:#111;
border-radius:28px;
overflow:hidden}
.ad-gallery__thumb--video{
display:grid;
place-items:center;
background:linear-gradient(135deg,#263345,#111827);
color:#fff;
border:0}
.ad-gallery__thumb--video span{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(255,255,255,.18);
font-size:14px}
.ad-gallery__thumb--video small{
font-size:11px;
line-height:1;
color:#fff}
.section--catalog-location-description{
padding-top:0;
}
.catalog-location-description{
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:24px;
padding:24px 28px;
color:#3f4a5a;
line-height:1.7;
box-shadow:0 14px 34px rgba(15,23,42,.04);
}
.catalog-location-description>*:first-child{
margin-top:0;
}
.catalog-location-description>*:last-child{
margin-bottom:0;
}
@media(max-width:640px){
.catalog-location-description{
border-radius:18px;
padding:18px;
font-size:14px;
}
}
.section--recently-viewed{
padding-top:0}
.ads-grid--recent{
grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-manager.is-invalid{
border:1px solid rgba(220,38,38,.35);
border-radius:22px;
padding:10px;
background:#fff7f7}
.gallery-manager__error{
display:none;
margin-top:10px;
color:#b91c1c;
font-size:13px}
.gallery-manager.is-invalid .gallery-manager__error{
display:block}
@media(max-width:1024px){
.ads-grid--recent{
grid-template-columns:repeat(2,minmax(0,1fr))}
.ad-gallery__stage-inner,.video-box--gallery{
min-height:320px}}
@media(max-width:640px){
.ads-grid--recent{
grid-template-columns:1fr}
.ad-gallery__stage-inner,.video-box--gallery{
min-height:240px}}
.filter-cat-level__label{
font-size:12px;
display:grid;
gap:7px;
text-transform:none;
letter-spacing:0;
color:#526173;
display:none!important}
.filter-cat-level--select{
display:block}
.filter-cat-select option:first-child{
color:#8a97a8}
.form-section--first{
margin:0 0 18px}
.field-error{
display:none;
margin-top:7px;
color:#b91c1c;
font-size:13px;
line-height:1.35}
.form label.is-invalid>.field-error,.category-picker.is-invalid~.field-error{
display:block}
.form input.is-invalid,.form textarea.is-invalid,.form select.is-invalid,.category-picker.is-invalid .category-picker__button{
border-color:#dc2626!important;
box-shadow:0 0 0 4px rgba(220,38,38,.10)!important;
background:#fffafa!important}
.checkline.is-invalid{
border-color:rgba(220,38,38,.28)!important;
background:#fffafa!important}
.category-picker.has-no-rubrics .category-picker__list:after{
content:"Для обраної категорії рубрики ще не додані";
display:block;
padding:14px;
border-radius:14px;
background:#f8fafc;
color:#64748b}
.terms-box a{
color:#24784b;
font-weight:650;
text-decoration:underline;
text-underline-offset:3px}
.hint:hover:after,.hint:focus:after{
position:absolute;
left:50%;
bottom:130%;
transform:translateX(-50%);
font-size:12px;
z-index:50;
content:attr(data-hint)!important;
background:#263345;
color:#fff;
padding:10px 12px;
border-radius:12px;
box-shadow:0 14px 34px rgba(36,48,68,.22);
width:max-content;
max-width:min(320px,80vw);
white-space:normal;
text-align:left;
line-height:1.4;
pointer-events:none}
.hint:hover:before,.hint:focus:before{
content:"";
position:absolute;
left:50%;
bottom:130%;
transform:translate(-50%,calc(100% - 1px));
border:6px solid transparent;
border-top-color:#263345;
z-index:50;
pointer-events:none}
.hint{position:relative}
/* Коли активний JS-модуль підказок — вимикаємо чистий CSS-тултип (він міг
виходити за межі екрана) і показуємо позиційований JS-тултип у body. */
/* Коли активний JS-модуль підказок — вимикаємо старий CSS-тултип (він обрізався
контейнерами та виходив за екран) для будь-якого елемента з data-hint. */
.bmp-hint-js [data-hint]:hover::after,.bmp-hint-js [data-hint]:focus::after,
.bmp-hint-js [data-hint]:hover::before,.bmp-hint-js [data-hint]:focus::before{content:none!important;display:none!important}
/* Тап по підказці не має виділяти текст чи підсвічуватись системним хайлайтом. */
.bmp-hint-js [data-hint]{-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;cursor:help}
.bmp-hint-tip{
position:fixed;
z-index:100000;
background:#263345;
color:#fff;
font-size:12px;
line-height:1.45;
padding:10px 12px;
border-radius:12px;
box-shadow:0 14px 34px rgba(36,48,68,.28);
width:max-content;
max-width:min(320px,calc(100vw - 24px));
white-space:normal;
text-align:left;
pointer-events:none;
animation:bmpHintIn .13s ease-out}
.bmp-hint-tip[hidden]{display:none!important}
@keyframes bmpHintIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.bmp-hint-tip::after{
content:"";
position:absolute;
border:6px solid transparent}
.bmp-hint-tip[data-placement="top"]::after{
top:100%;
left:var(--arrow-x,50%);
transform:translateX(-50%);
border-top-color:#263345}
.bmp-hint-tip[data-placement="bottom"]::after{
bottom:100%;
left:var(--arrow-x,50%);
transform:translateX(-50%);
border-bottom-color:#263345}
.bmp-hint-tip[data-placement="left"]::after{
left:100%;
top:var(--arrow-y,50%);
transform:translateY(-50%);
border-left-color:#263345}
.bmp-hint-tip[data-placement="right"]::after{
right:100%;
top:var(--arrow-y,50%);
transform:translateY(-50%);
border-right-color:#263345}
.filter-categories__title{
font-weight:650;
color:#263345}
.form-card[novalidate] input.is-invalid,.form-card[novalidate] textarea.is-invalid,.form-card[novalidate] select.is-invalid{
border-color:#dc2626!important;
box-shadow:0 0 0 4px rgba(220,38,38,.10)!important;
background:#fffafa!important}
.form-card[novalidate] label.is-invalid .field-error,.form-card[novalidate] .category-picker.is-invalid~.field-error{
display:block}
.catalog-results.is-loading{
opacity:1;
position:relative!important;
opacity:1!important;
pointer-events:none}
.pagination--numbers .nav-links{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:7px}
.pagination--numbers .page-numbers--dots{
border:0;
background:transparent;
color:#94a3b8;
min-width:24px}
.pagination--numbers .page-numbers--arrow{
font-size:22px;
line-height:1;
font-weight:650}
.pagination--numbers .page-numbers--disabled{
opacity:.35;
pointer-events:none}
.filter-price-group{
display:grid;
gap:9px}
.filter-price-group .filter-group__title{
font-weight:650;
color:#263345}
.filter-price-group .filter-row input::placeholder{
color:#94a3b8}
.filter-price-group .filter-row input{
min-width:0}
.filter-row--price{
align-items:center}
.price-input-wrap{
position:relative;
display:block!important}
.price-input-wrap input{
padding-right:38px!important}
.price-clear{
position:absolute;
right:8px;
top:50%;
width:26px;
height:26px;
transform:translateY(-50%);
border:0;
border-radius:50%;
background:#eef2f0;
color:#64748b;
display:none;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
line-height:1;
transition:.18s ease}
.price-input-wrap.has-value .price-clear{
display:flex}
.price-clear:hover{
background:#dfe9e3;
color:#1f6f43}
.filter-price-group input[data-price-filter-input]{
appearance:textfield;
-moz-appearance:textfield}
.filter-price-group input[data-price-filter-input]::-webkit-outer-spin-button,
.filter-price-group input[data-price-filter-input]::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0}
.location-combobox{
position:relative;
width:100%}
.location-combobox__field{
position:relative}
.location-combobox__input{
height:38px;
padding:0 42px 0 12px!important;
font-size:13.5px;
border-radius:10px;
cursor:text}
.catalog-filter .location-combobox__input{
height:36px}
.location-clear{
position:absolute;
right:8px;
top:50%;
width:26px;
height:26px;
transform:translateY(-50%);
border:0;
border-radius:50%;
background:#eef2f0;
color:#64748b;
display:none;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
line-height:1;
transition:.18s ease;
z-index:2}
.location-combobox.has-value .location-clear{
display:flex}
.location-clear:hover{
background:#dfe9e3;
color:#1f6f43}
.location-combobox__dropdown{
position:absolute;
left:0;
right:0;
top:calc(100% + 8px);
z-index:75;
max-height:280px;
overflow:auto;
padding:8px;
border:1px solid rgba(36,48,68,.12);
border-radius:18px;
background:#fff;
box-shadow:0 24px 70px rgba(36,48,68,.16)}
.location-combobox__option{
width:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:3px;
text-align:left;
border:0;
background:transparent;
color:#263345;
padding:10px 11px;
border-radius:12px;
cursor:pointer;
font-size:14px;
line-height:1.25;
transition:.16s ease}
.location-combobox__option:hover{
background:#eef8f1;
color:#24784b}
.location-combobox__option-title{
display:block;
font-size:14px;
line-height:1.25;
font-weight:700;
color:#263345}
.location-combobox__option-context{
display:block;
font-size:12px;
line-height:1.25;
font-weight:500;
color:#7a8797}
.location-combobox__option:hover .location-combobox__option-title{
color:#24784b}
.location-combobox__option:hover .location-combobox__option-context{
color:#5f7d6c}
.location-combobox__empty{
padding:12px;
border-radius:12px;
background:#f8fafc;
color:#64748b;
font-size:14px;
text-align:center}
.catalog-filter__close,.catalog-filter__mobile-actions{
display:none}
@media(max-width:1100px){
.catalog-filter-toggle{
display:flex!important;
width:100%}
/* Решта мобільних стилів шухляди фільтра — у 50-catalog-filter.css
(він завантажується пізніше й є єдиним джерелом стилів фільтра). */
}
.location-combobox__option[hidden],
.location-combobox__option.is-hidden,
.location-combobox__empty[hidden],
.location-combobox__empty.is-hidden{
display:none!important}
.catalog-filter-toggle{
display:none;
margin:0 0 16px;
border:0!important;
background:linear-gradient(135deg,#2f9e62,#23c16b)!important;
color:#fff!important;
box-shadow:0 16px 34px rgba(47,158,98,.24)!important;
font-weight:650!important;
min-height:50px!important}
.catalog-filter-toggle:before{
content:"☰";
font-size:18px;
line-height:1}
.filter-cat-select option{
white-space:normal}
.active-filters__list .filter-chip{
max-width:100%;
white-space:nowrap}
@media(max-width:1100px){
.catalog-filter-open .section--catalog{
scroll-margin-top:0}
}
.pagination--numbers .page-numbers--dots:last-child{
margin-right:2px}
.empty-state--compact{
padding:16px;
margin-top:14px}
.empty-state--compact p{
margin:0;
color:#64748b}
.section--catalog{
position:relative}
.empty-state--location + .ads-grid{
margin-top:18px}
.empty-state--no-results{
background:#f8fbf9;
border:1px solid rgba(47,158,98,.16);
color:#263345;
text-align:left}
.empty-state--no-results h3{
margin:0 0 8px;
color:#263345}
.empty-state--no-results p{
margin:0;
color:#64748b}
.empty-state__actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:16px}
.topbar-mobile,.mobile-search-button,.mobile-search-modal{
display:none}
@media(max-width:900px){
.topbar{
font-size:12px}
.topbar__inner{
min-height:38px;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
padding:6px 0!important;
position:relative}
.topbar__left,.topbar__right{
display:none!important}
.topbar-mobile{
display:block;
position:relative;
width:100%}
.topbar-mobile__toggle{
width:100%;
min-height:34px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:12px;
padding:6px 10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
font-size:13px;
cursor:pointer}
.topbar-mobile__toggle:after{
content:"⌄";
opacity:.75;
font-size:14px}
.topbar-mobile__toggle img{
width:24px;
height:24px;
border-radius:50%;
object-fit:cover}
.topbar-mobile__toggle span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.topbar-mobile__menu{
position:absolute;
right:0;
top:calc(100% + 8px);
z-index:140;
width:min(260px,calc(100vw - 32px));
display:grid;
gap:4px;
padding:8px;
background:#fff;
color:#263345;
border:1px solid rgba(36,48,68,.12);
border-radius:18px;
box-shadow:0 24px 70px rgba(15,23,42,.18)}
.topbar-mobile__menu[hidden]{
display:none!important}
.topbar-mobile__menu a{
display:flex;
color:#263345!important;
padding:10px 12px;
border-radius:12px;
background:#f8fafc;
font-weight:650}
.site-header__inner{
height:58px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto auto!important;
gap:8px!important;
align-items:center!important;
position:relative}
.logo{
min-width:0;
gap:8px}
.logo__mark{
width:38px;
height:38px;
border-radius:13px;
font-size:13px}
.logo__text{
min-width:0}
.logo__text strong{
font-size:15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.logo__text small{
display:none}
.catalog-button,.mobile-search-button{
display:inline-flex!important;
align-items:center;
justify-content:center;
min-height:38px;
border:0;
border-radius:12px;
padding:0 10px;
font-size:13px;
font-weight:700;
color:#fff;
cursor:pointer;
box-shadow:none!important;
white-space:nowrap;
width:auto!important}
.catalog-button{
background:linear-gradient(135deg,#2f9e62,#23c16b)!important}
.mobile-search-button{
background:#0f172a!important}
.site-header__inner>.header-search{
display:none!important}
.main-nav,.menu-toggle{
display:none!important}
.mobile-search-modal{
position:fixed;
inset:0;
z-index:2400;
background:#fff;
padding:16px;
display:grid;
grid-template-rows:auto auto 1fr;
gap:14px;
overflow:auto}
.mobile-search-modal[hidden]{
display:none!important}
.mobile-search-open{
overflow:hidden}
.mobile-search-modal__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px}
.mobile-search-modal__head strong{
font-size:22px;
color:#263345}
.mobile-search-modal__head button{
width:42px;
height:42px;
border:0;
border-radius:50%;
background:#f1f5f9;
color:#263345;
font-size:28px;
line-height:1;
cursor:pointer}
.header-search--mobile{
display:flex!important;
min-width:0!important;
width:100%!important;
border-radius:18px!important;
box-shadow:0 14px 40px rgba(15,23,42,.08)!important;
overflow:visible!important;
position:relative!important}
.header-search--mobile input{
min-height:52px}
.header-search--mobile button{
border-radius:0 18px 18px 0!important;
min-width:88px}
.header-search--mobile .header-search-results{
position:static!important;
margin-top:12px;
grid-column:1/-1;
max-height:none!important;
box-shadow:none!important;
border-radius:18px!important;
padding:8px!important}
.header-search--mobile.is-search-open{
display:grid!important;
grid-template-columns:1fr auto;
gap:0}
.header-search--mobile.is-search-open .header-search-results{
display:block!important}
.search-result-item{
align-items:flex-start}
.search-result-item img{
width:58px;
height:58px;
border-radius:16px}
.search-result-item b{
font-size:15px}
.search-result-item small{
font-size:12px}
.empty-state__actions .btn{
width:100%}
}
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(255,255,255,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
transition:transform .28s ease, box-shadow .2s ease!important;
will-change:transform}
.site-header.site-header--hidden{
transform:translateY(-110%)!important}
.header-search__clear[hidden]{
display:none!important}
.header-search.is-search-empty{
animation:bmpSearchShake .28s ease both}
@keyframes bmpSearchShake{
0%,100%{
transform:translateX(0)}
35%{
transform:translateX(-4px)}
70%{
transform:translateX(4px)}}
@media(max-width:900px){
.header-search--mobile{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important}
.header-search--mobile .header-search__field{
width:100%}
.mobile-search-modal{
padding:14px!important}
.site-header.site-header--hidden{
transform:translateY(-120%)!important}}
.header-search input[type="search"]::-webkit-search-decoration,
.header-search input[type="search"]::-webkit-search-cancel-button,
.header-search input[type="search"]::-webkit-search-results-button,
.header-search input[type="search"]::-webkit-search-results-decoration{
display:none!important;
-webkit-appearance:none!important;
}
.header-search input[type="search"]::-ms-clear,
.header-search input[type="search"]::-ms-reveal{
display:none!important;
width:0;
height:0}
.header-search{
flex:1;
min-width:220px;
background:#fff;
border:1px solid rgba(23,23,23,.10);
border-radius:18px;
overflow:hidden;
box-shadow:0 14px 36px rgba(36,48,68,.08);
position:relative;
display:flex;
align-items:center;
gap:0;
min-height:48px!important;
border-radius:999px!important;
overflow:visible!important;
background:#fff!important;
border:1px solid rgba(36,48,68,.12)!important;
box-shadow:0 14px 36px rgba(36,48,68,.08)!important;
}
.header-search__field{
position:relative;
display:block;
min-width:0;
flex:1;
height:48px!important;
display:flex!important;
align-items:center!important}
.header-search__field input{
width:100%;
padding-right:42px!important;
height:48px!important;
min-height:48px!important;
border-radius:999px 0 0 999px!important;
padding:0 44px 0 18px!important;
background:#fff!important;
color:#263345!important;
}
.header-search > button[type="submit"],
.header-search > button[data-search-submit]{
align-self:stretch!important;
min-height:48px!important;
height:48px!important;
width:48px!important;
min-width:48px!important;
border-radius:50%!important;
margin:0!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#2f9e62,#23c16b)!important;
color:#fff!important;
box-shadow:0 10px 24px rgba(47,158,98,.22)!important;
transform:none!important;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease!important;
}
.header-search > button[data-search-submit] svg{width:20px;height:20px}
.header-search > button[type="submit"]:hover,
.header-search > button[data-search-submit]:hover{
transform:translateY(-1px)!important;
box-shadow:0 14px 28px rgba(47,158,98,.26)!important}
.header-search button.is-disabled{
opacity:.45;
cursor:not-allowed;
filter:grayscale(.2);
opacity:1!important;
cursor:pointer!important;
filter:none!important}
.header-search__clear{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
font-size:20px!important;
line-height:1!important;
box-shadow:none!important;
cursor:pointer;
right:10px!important;
background:#f1f5f9!important;
color:#475569!important}
.header-search__clear:hover{
background:#e2e8f0!important;
color:#0f172a!important}
@media(max-width:900px){
.mobile-search-modal{
display:grid!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateY(18px) scale(.985)!important;
transition:opacity .24s ease, visibility .24s ease, transform .24s ease!important;
will-change:opacity,transform;
}
.mobile-search-modal[hidden]{
display:none!important}
.mobile-search-modal.is-active{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateY(0) scale(1)!important;
}
.mobile-search-modal.is-closing{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateY(14px) scale(.985)!important;
}
.header-search--mobile{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:0!important;
border-radius:24px!important;
padding:4px!important;
background:#fff!important;
border:1px solid rgba(36,48,68,.10)!important;
box-shadow:0 18px 55px rgba(15,23,42,.10)!important;
}
.header-search--mobile .header-search__field{
height:52px!important}
.header-search--mobile .header-search__field input{
height:52px!important;
min-height:52px!important;
border-radius:20px!important;
font-size:16px!important;
}
.header-search--mobile > button[type="submit"],
.header-search--mobile > button[data-search-submit]{
min-height:52px!important;
height:52px!important;
min-width:104px!important;
border-radius:20px!important;
padding:0 16px!important;
}
.header-search--mobile .header-search-results{
margin-top:14px!important;
grid-column:1/-1!important;
}
}
.section--catalog{
position:relative}
/* лоадер каталога */
/* Final clean AJAX catalog loader */
.section--catalog{
position:relative}
/* Лоадер фільтрації каталогу. Матова вуаль на ВСІХ блоках, що оновлюються після
AJAX: панель рубрик, фільтр і результати. Кожен блок вуалюється окремо (зі
скругленням), тож немає різкого обриву на межі секції. Спінер реально
крутиться — раніше статичний transform!important на :after глушив анімацію. */
.section--catalog.is-loading{
pointer-events:none}
.section--catalog.is-loading [data-catalog-rubrics-panel]{
position:relative}
.section--catalog.is-loading [data-catalog-rubrics-panel]::after,
.section--catalog.is-loading .catalog-filter::after,
.catalog-results.is-loading::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
background:rgba(255,255,255,.6);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
z-index:6;
pointer-events:none}
.catalog-results.is-loading::after{
content:"";
position:fixed;
left:50%;
top:50%;
width:46px;
height:46px;
margin:-23px 0 0 -23px;
border-radius:50%;
border:4px solid rgba(47,158,98,.18);
border-top-color:#2f9e62;
background:#fff;
box-shadow:0 14px 34px rgba(15,23,42,.16);
animation:bmpCatalogLoaderSpin .62s linear infinite;
z-index:3201}
@keyframes bmpCatalogLoaderSpin{
to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.catalog-results.is-loading::after{animation:none}}
/* v1.5.5 dynamic category fields */
.bmp-dynamic-fields { margin: 18px 0; }
.bmp-dynamic-fields__group[hidden],
.bmp-admin-dynamic-fields__group[hidden] { display: none !important; }
.bmp-admin-cat-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bmp-admin-cat-box p { margin: 0; }
.bmp-admin-price-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 12px 14px; border: 1px solid #e8ecef; border-radius: 12px; background: #f8faf9; margin-bottom: 16px; }
.bmp-admin-price-grid p { margin: 0; }
@media (max-width: 782px) { .bmp-admin-cat-box { grid-template-columns: 1fr; } }
/* выбор рубрики */
/* v1.5.7 — cascaded rubric picker */
.category-cascade {
display: grid;
gap: 10px;
}
.category-cascade.is-invalid .category-cascade__select,
.category-cascade.is-invalid .category-cascade__hint {
border-color: rgba(238, 57, 55, .7);
}
.category-cascade__hint {
min-height: 44px;
display: flex;
align-items: center;
padding: 10px 14px;
border: 1px solid var(--stroke);
border-radius: 14px;
background: rgba(255,255,255,.78);
color: var(--muted);
font-size: 14px;
}
.category-cascade__levels {
display: grid;
gap: 10px;
}
.category-cascade__level {
margin: 0;
}
.category-cascade__select {
width: 100%;
min-height: 46px;
border: 1px solid var(--stroke);
border-radius: 14px;
background: #fff;
padding: 0 14px;
color: var(--text);
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.category-cascade__select:focus {
border-color: rgba(47,158,98,.55);
box-shadow: 0 0 0 4px rgba(47,158,98,.12);
}
.category-cascade__select:disabled {
opacity: .55;
cursor: not-allowed;
}
.category-cascade__empty {
padding: 12px 14px;
border-radius: 14px;
background: rgba(238, 57, 55, .08);
color: #9b2c2c;
font-size: 14px;
}
/* v1.5.9 — dashed step-by-step rubric wizard */
.rubric-wizard {
display: block;
}
.rubric-wizard.is-invalid .rubric-wizard__box {
border-color: rgba(238,57,55,.75);
box-shadow: 0 0 0 4px rgba(238,57,55,.10);
}
.rubric-wizard__box {
width: 100%;
border: 1.5px dashed rgba(47,158,98,.48);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,252,249,.92));
padding: 16px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rubric-wizard__box.has-selected {
border-style: solid;
border-color: rgba(47,158,98,.42);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,250,246,.92));
}
.rubric-wizard__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.rubric-wizard__summary > div {
min-width: 0;
display: grid;
gap: 4px;
}
.rubric-wizard__eyebrow {
color: var(--muted);
font-size: 12px;
line-height: 1.2;
}
.rubric-wizard__summary strong {
color: var(--text);
font-size: 16px;
font-weight: 650;
line-height: 1.35;
overflow-wrap: anywhere;
}
.rubric-wizard__summary small {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.rubric-wizard__open {
flex: 0 0 auto;
}
.rubric-wizard__panel {
margin-top: 14px;
border: 1px solid rgba(17,24,39,.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 55px rgba(15,23,42,.08);
overflow: hidden;
}
.rubric-wizard__panel[hidden] {
display: none !important;
}
.rubric-wizard__panel-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 14px;
border-bottom: 1px solid rgba(17,24,39,.08);
background: rgba(247,249,248,.78);
}
.rubric-wizard__panel-head strong {
display: block;
font-weight: 650;
color: var(--text);
}
.rubric-wizard__panel-head small {
display: block;
color: var(--muted);
margin-top: 2px;
font-size: 12px;
}
.rubric-wizard__back,
.rubric-wizard__close {
border: 0;
border-radius: 999px;
background: #fff;
color: var(--text);
min-width: 38px;
height: 38px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(17,24,39,.08);
}
.rubric-wizard__back:hover,
.rubric-wizard__close:hover {
background: rgba(47,158,98,.08);
}
.rubric-wizard__path {
margin: 14px 14px 0;
padding: 10px 12px;
border-radius: 14px;
background: rgba(47,158,98,.08);
color: #24784d;
font-size: 13px;
line-height: 1.35;
}
.rubric-wizard__list {
display: grid;
gap: 8px;
padding: 14px;
max-height: 360px;
overflow: auto;
}
.rubric-wizard__item {
width: 100%;
border: 1px solid rgba(17,24,39,.08);
border-radius: 15px;
background: #fff;
padding: 13px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
color: var(--text);
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.rubric-wizard__item:hover {
border-color: rgba(47,158,98,.34);
background: rgba(47,158,98,.055);
transform: translateY(-1px);
}
.rubric-wizard__item span {
font-weight: 600;
min-width: 0;
}
.rubric-wizard__item small {
flex: 0 0 auto;
color: var(--muted);
font-size: 12px;
}
.rubric-wizard__item.has-children small::after {
content: " ›";
color: #2f9e62;
font-weight: 700;
}
.rubric-wizard__empty {
margin: 0 14px 14px;
}
@media (max-width: 700px) {
.rubric-wizard__summary {
align-items: stretch;
flex-direction: column;
}
.rubric-wizard__open {
width: 100%;
}
.rubric-wizard__panel-head {
grid-template-columns: auto 1fr auto;
}
.rubric-wizard__list {
max-height: 52vh;
}
}
/* v1.6.0 — rubric wizard moved under title */
.form-section--rubric {
display: grid;
gap: 10px;
margin: 6px 0 16px;
}
.form-section--rubric > label {
margin: 0;
font-weight: 650;
color: var(--text);
}
.form-section--rubric .field-error {
margin-top: -2px;
}
.rubric-wizard__item small {
white-space: nowrap;
}
/* v1.6.1 — rubric wizard navigation fixes */
.rubric-wizard__back[hidden],
.rubric-wizard__back.is-hidden {
display: none !important;
}
.rubric-wizard__item.has-children small {
color: var(--accent);
}
.rubric-wizard__item.has-children small::after {
content: "›";
margin-left: 6px;
}
/* v1.6.2 — rubric picker as real popup with stable hierarchy navigation */
html.rubric-modal-open,
body.rubric-modal-open {
overflow: hidden;
}
.rubric-wizard.is-open::before {
content: "";
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(12, 18, 24, .42);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.rubric-wizard__panel {
position: fixed;
z-index: 9010;
left: 50%;
top: 50%;
width: min(760px, calc(100vw - 28px));
max-height: min(760px, calc(100vh - 28px));
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid rgba(17, 24, 39, .08);
border-radius: 28px;
box-shadow: 0 30px 90px rgba(10, 17, 28, .28);
overflow: hidden;
animation: bmpRubricModalIn .22s ease both;
}
.rubric-wizard__panel[hidden] {
display: none !important;
}
@keyframes bmpRubricModalIn {
from {
opacity: 0;
transform: translate(-50%, calc(-50% + 18px)) scale(.985);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.rubric-wizard__panel-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: linear-gradient(180deg, #f8faf7, #ffffff);
border-bottom: 1px solid rgba(17, 24, 39, .08);
}
.rubric-wizard__panel-head strong {
display: block;
font-size: 18px;
line-height: 1.25;
font-weight: 700;
color: var(--text);
}
.rubric-wizard__panel-head small {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.rubric-wizard__back,
.rubric-wizard__close {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, .12);
background: #fff;
color: var(--text);
cursor: pointer;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.rubric-wizard__back:hover,
.rubric-wizard__close:hover {
background: #f1f7f2;
border-color: rgba(47, 158, 98, .28);
transform: translateY(-1px);
}
.rubric-wizard__back[hidden],
.rubric-wizard__back.is-hidden {
visibility: hidden;
pointer-events: none;
}
.rubric-wizard__path {
margin: 16px 20px 0;
padding: 10px 13px;
border-radius: 14px;
background: rgba(47, 158, 98, .08);
color: #226f46;
font-size: 13px;
line-height: 1.35;
}
.rubric-wizard__path[hidden] {
display: none !important;
}
.rubric-wizard__list {
display: grid;
gap: 10px;
padding: 18px 20px 20px;
overflow: auto;
max-height: calc(100vh - 210px);
}
.rubric-wizard__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
text-align: left;
border: 1px solid rgba(17, 24, 39, .08);
border-radius: 18px;
background: #fff;
padding: 15px 16px;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rubric-wizard__item:hover {
transform: translateY(-1px);
border-color: rgba(47, 158, 98, .35);
box-shadow: 0 14px 32px rgba(17, 24, 39, .08);
background: #fbfefb;
}
.rubric-wizard__item span {
min-width: 0;
color: var(--text);
font-size: 15px;
line-height: 1.35;
font-weight: 650;
}
.rubric-wizard__item small {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: #2f9e62;
font-size: 13px;
font-weight: 650;
white-space: nowrap;
}
.rubric-wizard__item.has-children small::after {
content: "›";
margin-left: 0;
color: #2f9e62;
font-weight: 700;
}
.rubric-wizard__empty {
margin: 0 20px 20px;
padding: 14px 16px;
border-radius: 16px;
background: #fff7ed;
color: #9a5b13;
}
@media (max-width: 700px) {
.rubric-wizard__panel {
inset: auto 0 0 0;
left: 0;
top: auto;
width: 100%;
max-height: calc(100vh - 18px);
border-radius: 24px 24px 0 0;
transform: none;
animation: bmpRubricModalMobileIn .22s ease both;
}
@keyframes bmpRubricModalMobileIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.rubric-wizard__panel-head {
padding: 16px;
grid-template-columns: auto 1fr auto;
}
.rubric-wizard__list {
padding: 14px 16px 18px;
max-height: calc(100vh - 190px);
}
.rubric-wizard__path {
margin: 14px 16px 0;
}
}
/* динамические поля и селекты */
/* Dynamic search-select fields */
select.is-native-hidden[data-search-select] { display: none !important; }
.dynamic-search-select { position: relative; width: 100%; }
.dynamic-search-select__input { width: 100%; }
.dynamic-search-select__dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 240px; overflow: auto; padding: 6px; border: 1px solid rgba(21, 30, 43, .12); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }
.dynamic-search-select__dropdown button { display: block; width: 100%; border: 0; border-radius: 10px; background: transparent; padding: 9px 10px; text-align: left; cursor: pointer; }
.dynamic-search-select__dropdown button:hover { background: rgba(47, 158, 98, .08); }
.dynamic-search-select__empty { display: block; padding: 10px; color: var(--muted); }
/* Dynamic rubric fields: form select + filter checkbox groups */
.bmp-choice-select,
.dynamic-filter-select {
width: 100%;
height: 36px;
min-height: 36px;
border: 1px solid rgba(15, 23, 42, .1);
border-radius: 10px;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding: 0 30px 0 11px;
color: #243044;
font-size: 13.5px;
text-overflow: ellipsis;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: border-color .16s ease;
}
.bmp-choice-select:focus,
.dynamic-filter-select:focus {
border-color: rgba(47, 158, 98, .55);
box-shadow: 0 0 0 4px rgba(47, 158, 98, .10);
}
.dynamic-checklist {
display: grid;
gap: 8px;
}
.dynamic-checklist .checkline--compact {
min-height: 30px;
padding: 5px 8px;
border-radius: 10px;
background: rgba(248, 250, 252, .92);
}
.dynamic-checklist .checkline--compact:hover {
background: rgba(47, 158, 98, .07);
}
.account-nav-link{
align-items:center;
justify-content:space-between;
gap:10px}
.account-nav-badge{
min-width:24px;
height:24px;
padding:0 8px;
border-radius:999px;
background:var(--accent);
color:#fff;
display:inline-grid;
place-items:center;
font-size:12px;
line-height:1;
font-weight:750}
.account-notice-tabs{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:16px}
.account-notice-tab{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
color:var(--dark);
font-weight:700;
transition:.18s ease}
.account-notice-tab span{
min-width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:var(--soft);
color:var(--muted);
font-size:12px}
.account-notice-tab.is-active,.account-notice-tab:hover{
border-color:rgba(47,158,98,.32);
background:#eefaf2;
color:#087036}
.account-notice-tab.is-active span,.account-notice-tab:hover span{
background:#fff;
color:#087036}
.account-notice-actions{
display:grid;
grid-template-columns:minmax(180px,240px) minmax(180px,240px) auto minmax(0,1fr);
gap:10px;
align-items:center;
margin-bottom:16px;
padding:14px;
border:1px solid var(--line);
border-radius:22px;
background:#fff}
.element-select{
width:100%;
min-height:46px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
padding:0 14px;
color:var(--dark);
font-weight:650;
outline:none}
.element-select:focus{
border-color:rgba(47,158,98,.48);
box-shadow:0 0 0 4px rgba(47,158,98,.10)}
.btn[disabled]{
opacity:.55;
cursor:not-allowed;
transform:none;
box-shadow:none}
.account-notice-actions__status{
color:var(--muted);
font-size:13px}
.account-notice-list{
display:grid;
gap:12px}
.account-notice-item{
display:grid;
grid-template-columns:42px minmax(0,1fr);
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:0 16px 45px rgba(36,48,68,.07);
overflow:hidden}
.account-notice-item.is-unread{
border-color:rgba(47,158,98,.30);
background:linear-gradient(135deg,#f3fff7,#fff)}
.account-notice-check{
grid-row:1 / span 2;
display:grid;
place-items:start center;
padding-top:20px;
border-right:1px solid rgba(36,48,68,.07)}
.account-notice-check input{
width:18px;
height:18px;
accent-color:var(--accent)}
.account-notice-toggle{
width:100%;
display:grid;
grid-template-columns:38px minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:16px 18px;
border:0;
background:transparent;
text-align:left;
cursor:pointer;
color:var(--dark)}
.account-notice-main{
display:grid;
gap:4px;
min-width:0}
.account-notice-main strong{
font-size:16px;
color:var(--dark)}
.account-notice-main small{
color:var(--muted);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.account-notice-meta{
display:flex;
align-items:center;
gap:10px;
color:var(--muted);
font-size:12px;
white-space:nowrap}
.account-notice-meta em{
font-style:normal;
padding:5px 9px;
border-radius:999px;
background:var(--soft);
color:var(--muted);
font-weight:700}
.account-notice-item.is-unread .account-notice-meta em{
background:#dcfce7;
color:#15803d}
.account-notice-details{
grid-column:2;
padding:0 18px 18px;
color:var(--text)}
.account-notice-details p{
margin:0 0 12px;
color:#526072;
line-height:1.55}
.account-notice-item.is-open .account-notice-toggle{
background:rgba(246,248,251,.58)}
@media(max-width:760px){
.account-notice-actions{
grid-template-columns:1fr}
.account-notice-actions .btn{
width:100%}
.account-notice-item{
grid-template-columns:38px minmax(0,1fr);
border-radius:20px}
.account-notice-toggle{
grid-template-columns:14px minmax(0,1fr);
padding:14px;
gap:10px}
.account-notice-meta{
grid-column:2;
justify-content:flex-start;
flex-wrap:wrap}
.account-notice-main small{
white-space:normal}
.account-notice-details{
padding:0 14px 14px}
}
.email-confirm-gate{
max-width:780px;
}
.email-confirm-gate .bmp-notice{
margin:0;
}
/* меню кабінету та обране */
/* ============================================================
ШАПКА КОРИСТУВАЧА
Стриманий нейтральний блок: зелений лишаємо тільки як акцент
у статусі «перевірений», решта — спокійні сірі тони.
============================================================ */
.account-user{
position:relative;
display:flex;
align-items:center;
gap:11px;
padding:11px;
margin-bottom:12px;
border:1px solid #e8edf3;
border-radius:16px;
background:#fbfcfd;
}
.account-user__body{
min-width:0;
padding-right:36px;
display:flex;
flex-direction:column;
gap:2px;
}
.account-user__body strong{
display:block;
font-size:14.5px;
line-height:1.25;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Статус зі щитом */
.account-user .account-user__status{
display:inline-flex;
align-items:center;
gap:4px;
font-size:10.5px;
font-weight:500;
line-height:1.2;
letter-spacing:.01em;
}
.account-user .account-user__status svg{
width:12px;height:12px;
flex:0 0 auto;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.account-user .account-user__status.is-verified{color:#0a8a33}
.account-user .account-user__status.is-unverified{color:#94a3b8}
.account-user .account-user__id{
font-size:11px;
color:#94a3b8;
letter-spacing:.02em;
}
.account-user__avatar{
flex:0 0 auto;
width:46px;
height:46px;
min-width:46px;
border-radius:14px;
font-size:19px;
}
.account-user__avatar--image{
overflow:hidden;
background:#fff;
box-shadow:0 4px 12px rgba(15,23,42,.10);
}
.account-user__avatar--image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
}
.account-user__edit{
position:absolute;
right:9px;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:10px;
color:#64748b;
background:#fff;
border:1px solid #e2e8f0;
transition:.16s ease;
}
.account-user__edit:hover,.account-user__edit.is-active{
color:#0f766e;
background:#f0fdf9;
border-color:#99e6d5;
}
.account-user__edit svg,
.account-nav-icon svg,
.account-favorite-card__actions svg{
width:17px;
height:17px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
/* ============================================================
НАВІГАЦІЯ
Компактні пункти з однаковим кроком. Кожен розділ має свій
спокійний відтінок іконки — так меню не виглядає суцільно зеленим.
============================================================ */
.account-nav-link{
display:flex;
width:100%;
min-height:42px;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:3px;
padding:7px 10px;
border:1px solid transparent;
border-radius:12px;
color:#334155;
font-weight:600;
font-size:14px;
transition:.16s ease;
}
.account-nav-link:last-of-type{margin-bottom:0}
.account-nav-main{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.account-nav-icon{
width:30px;
height:30px;
min-width:30px;
display:grid;
place-items:center;
border-radius:9px;
background:#f1f5f9;
color:#64748b;
transition:.16s ease;
}
.account-nav-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Один стриманий нейтральний колір для всіх іконок розділів:
меню читається спокійно, акцент лишається тільки на активному пункті. */
/* Наведення та активний стан — нейтральна підкладка, акцент лівою смугою */
.account-nav-link:hover{
background:#f6f8fb;
border-color:#e6ecf3;
color:#1b2434;
}
.account-nav-link.is-active{
background:#f4f7fa;
border-color:#dfe7f0;
color:#0f172a;
box-shadow:inset 3px 0 0 var(--accent,#2f9e62);
}
.account-nav-link.is-active .account-nav-icon{
background:#e8edf4;
color:#334155;
}
.account-nav-link:hover .account-nav-icon{
background:#e9eef4;
color:#4b5b70;
}
/* Головна дія — єдиний насичений елемент меню */
.account-nav-link--primary{
margin-bottom:10px;
color:#fff;
font-weight:700;
background:linear-gradient(135deg,#2f9e62,#3fae70);
border-color:transparent;
box-shadow:0 8px 20px rgba(47,158,98,.22);
}
.account-nav-link--primary .account-nav-icon{
background:rgba(255,255,255,.20);
color:#fff;
}
.account-nav-link--primary:hover,.account-nav-link--primary.is-active{
color:#fff;
background:linear-gradient(135deg,#288854,#37a066);
border-color:transparent;
box-shadow:0 10px 24px rgba(47,158,98,.28);
}
.account-nav-link--primary.is-active{box-shadow:0 8px 20px rgba(47,158,98,.22)}
.account-nav-link--primary:hover .account-nav-icon,.account-nav-link--primary.is-active .account-nav-icon{
background:rgba(255,255,255,.28);
color:#fff;
}
/* Вихід */
.account-nav-link--button{
justify-content:flex-start;
margin-top:6px;
padding-top:7px;
border-top:1px solid #eef1f5;
border-radius:12px;
color:#9aa5b4;
font-weight:600;
}
.account-nav-link--button .account-nav-icon{
color:#b91c1c;
background:#fef2f2;
}
.account-nav-link--button:hover{
background:#fff5f5;
border-color:transparent;
border-top-color:#eef1f5;
color:#b91c1c;
}
/* Лічильники */
.account-nav-badge{
flex:0 0 auto;
min-width:20px;
height:20px;
padding:0 6px;
display:inline-grid;
place-items:center;
border-radius:999px;
background:#ef4444;
color:#fff;
font-size:11px;
font-weight:700;
line-height:1;
}
/* Favorites account tab */
.account-favorites-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
align-items:start;
}
@media(max-width:900px){
.account-favorites-list{grid-template-columns:1fr}
}
.account-favorite-card{
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:16px;
padding:12px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:0 16px 44px rgba(36,48,68,.07);
}
.account-favorite-card__image{
display:block;
height:128px;
border-radius:18px;
overflow:hidden;
background:var(--soft);
}
.account-favorite-card__image img{
width:100%;
height:100%;
object-fit:cover;
}
.account-favorite-card__body{
display:grid;
gap:10px;
min-width:0;
}
.account-favorite-card__meta{
display:flex;
flex-wrap:wrap;
gap:8px;
color:var(--muted);
font-size:13px;
font-weight:650;
}
.account-favorite-card__location{
display:inline-flex;
align-items:baseline;
gap:5px;
}
.account-favorite-card__district{
font-size:11px;
font-weight:600;
color:#9aa5b4;
}
.account-favorite-card h3{
margin:0;
font-size:20px;
line-height:1.25;
}
.account-favorite-card h3 a{
color:var(--dark);
}
.account-favorite-card__bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.account-favorite-card__actions{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.account-favorite-card__actions .btn{
display:inline-flex;
align-items:center;
gap:7px;
}
.account-favorite-card__remove{
color:#b91c1c;
border-color:rgba(185,28,28,.18);
background:#fff7f7;
}
.account-favorite-card__remove:hover{
background:#fee2e2;
color:#991b1b;
}
@media(max-width:760px){
.account-favorite-card{
grid-template-columns:1fr;
}
.account-favorite-card__image{
height:190px;
}
.account-favorite-card__bottom{
align-items:flex-start;
}
.account-favorite-card__actions{
width:100%;
}
.account-favorite-card__actions .btn{
flex:1;
justify-content:center;
}
}
/* Header add listing button */
.main-nav .nav-pill--add{
display:inline-flex;
align-items:center;
gap:8px;
color:#fff!important;
background:linear-gradient(135deg,#f59e0b,#f97316)!important;
box-shadow:0 14px 30px rgba(245,158,11,.26);
}
.main-nav .nav-pill--add:hover{
background:linear-gradient(135deg,#ea8c07,#ea6a0c)!important;
transform:translateY(-1px);
}
.main-nav .nav-pill--add svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
/* объявления кабинета и форма */
/* My ads search and archive */
.account-ads-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 14px;
}
.account-ads-tab{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
color:var(--dark);
font-weight:750;
transition:.18s ease;
}
.account-ads-tab span{
min-width:24px;
height:24px;
padding:0 8px;
display:grid;
place-items:center;
border-radius:999px;
background:var(--soft);
color:var(--muted);
font-size:12px;
}
.account-ads-tab:hover,.account-ads-tab.is-active{
border-color:rgba(47,158,98,.30);
background:#eefaf2;
color:#087036;
}
.account-ads-tab:hover span,.account-ads-tab.is-active span{
background:#fff;
color:#087036;
}
.account-ads-search{
display:grid;
grid-template-columns:minmax(180px,240px) minmax(220px,1fr) auto auto;
align-items:end;
gap:12px;
padding:14px;
margin:0 0 16px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:0 12px 35px rgba(36,48,68,.05);
}
.account-ads-search label{
display:grid;
gap:7px;
color:var(--muted);
font-size:13px;
font-weight:750;
}
.account-ads-search input[type=search]{
width:100%;
min-height:46px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
padding:0 14px;
color:var(--dark);
font-weight:650;
outline:none;
}
.account-ads-search input[type=search]:focus{
border-color:rgba(47,158,98,.48);
box-shadow:0 0 0 4px rgba(47,158,98,.10);
}
.account-ads-search .btn{
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
}
.account-ads-search .btn svg,
.account-inline-form .btn svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.account-table__main{
min-width:0;
}
.account-table__main strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.account-table__row.is-archived{
background:linear-gradient(135deg,#f8fafc,#fff);
opacity:.92;
}
.account-table__row.is-archived img{
filter:grayscale(.18);
}
.account-table__row.is-blocked{
background:linear-gradient(135deg,#fff7ed,#fff);
border-color:rgba(220,38,38,.14);
}
.account-table__row.is-blocked img{
filter:grayscale(.45);
opacity:.78;
}
.account-inline-form{
margin:0;
}
.account-table__actions .btn,
.account-inline-form .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
}
.btn--archive{
border-color:rgba(220,38,38,.22)!important;
background:linear-gradient(135deg,#fff7f7,#fff)!important;
color:#b91c1c!important;
}
.btn--archive:hover{
border-color:rgba(220,38,38,.42)!important;
background:linear-gradient(135deg,#fee2e2,#fff)!important;
}
.btn--archive svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.owner-ad-actions{
display:grid;
gap:10px;
padding:12px;
margin:0 0 14px;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
background:linear-gradient(135deg,#f8fafc,#fff);
}
.owner-ad-actions .account-inline-form{
width:100%;
}
.owner-ad-actions .btn{
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}
.owner-ad-actions svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.account-pagination{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
@media(max-width:920px){
.account-ads-search{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:640px){
.account-ads-search{
grid-template-columns:1fr;
}
.account-ads-search .btn{
width:100%;
}
}
.account-shell--restricted{
max-width:760px;
margin:42px auto;
padding:0 16px;
}
.account-restricted-card{
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:28px;
padding:28px;
box-shadow:0 24px 70px rgba(15,23,42,.10);
}
.account-restricted-card__user{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}
.account-restricted-card__user strong{
display:block;
font-size:18px;
color:#0f172a;
}
.account-restricted-card__user span{
display:block;
margin-top:3px;
color:#64748b;
font-size:13px;
}
.account-restricted-card .bmp-notice{
margin-bottom:18px;
}
.btn.is-disabled,
.btn[aria-disabled=true]{
pointer-events:none;
opacity:.64;
cursor:not-allowed;
}
.form-alert--warning{
background:#fff7e6;
border-color:#f2c46d;
color:#7a4b00;
}
/* Account/ad form refinements v1.9.0 */
.account-user__id{
margin-top:2px;
font-size:11px!important;
color:#64748b!important;
font-weight:700;
}
.form-card > label,
.form-card .form-grid > label,
.form-card .form-section > label,
.form-card .gallery-manager__head strong{
font-size:13px;
color:#64748b;
font-weight:650;
}
.form-card label input,
.form-card label select,
.form-card label textarea{
margin-top:2px;
}
.form-card input:disabled,
.form-card select:disabled,
.form-card textarea:disabled{
background:#f8fafc;
color:#94a3b8;
cursor:not-allowed;
border-color:rgba(148,163,184,.26);
}
.is-muted-field{
color:#94a3b8!important;
}
.field-note{
display:block;
margin-top:6px;
color:#94a3b8;
font-size:12px;
line-height:1.45;
font-weight:500;
}
.ad-form-contacts-note{
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
padding:16px;
border:1px solid rgba(47,158,98,.14);
border-radius:18px;
background:linear-gradient(135deg,rgba(236,253,245,.75),rgba(255,255,255,.96));
}
.ad-form-contacts-note strong{
display:block;
color:#1f2937;
margin-bottom:4px;
}
.ad-form-contacts-note p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.45;
}
@media(max-width:700px){
.ad-form-contacts-note{
align-items:flex-start;
flex-direction:column;
}
}
/* ===== Переклади оголошення (кнопки біля лейблів + приховані поля) ===== */
/* .field — уніфікована обгортка поля (сітка з відступом до контролу). */
.field{
display:grid;
gap:7px}
/* Єдиний стиль ВСІХ заголовків полів форми: категорія, рубрика, заголовок,
опис (UK/RU), фото, відео, ціна — однаковий розмір, вага й колір. */
.field-label{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14px;
font-weight:650;
line-height:1.3;
color:#334155}
.field-label__req{color:#dc2626;font-weight:650}
.field-label-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap}
.tr-toggle{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 11px;
border:1px solid rgba(47,158,98,.35);
border-radius:999px;
background:#f1faf5;
color:#1f7a4c;
font-size:12px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:background .15s ease, border-color .15s ease}
.tr-toggle:hover{background:#e2f4ea}
.tr-toggle.has-tr{
border-color:rgba(47,158,98,.55);
background:#dcfce7}
.tr-toggle.is-open{
background:#1f7a4c;
border-color:#1f7a4c;
color:#fff}
.tr-toggle__caret{font-size:10px}
.tr-toggle-group{position:relative;display:inline-flex}
.tr-menu{
position:absolute;
right:0;top:calc(100% + 6px);
z-index:30;
display:grid;
gap:2px;
min-width:220px;
padding:6px;
border:1px solid rgba(15,23,42,.1);
border-radius:12px;
background:#fff;
box-shadow:0 16px 40px rgba(15,23,42,.16)}
.tr-menu[hidden]{display:none}
.tr-menu__item{
display:block;
width:100%;
padding:8px 10px;
border:0;
border-radius:8px;
background:none;
color:#243044;
font-size:13px;
font-weight:600;
text-align:left;
cursor:pointer}
.tr-menu__item:hover{background:#f1f5f9}
.tr-menu__item.has-tr{color:#1f7a4c}
.tr-fields{display:grid;gap:0}
.tr-field{
display:block;
margin-top:10px;
padding:12px;
border:1px dashed rgba(47,158,98,.35);
border-radius:14px;
background:#fcfefd}
.tr-field[hidden]{display:none}
.tr-field input,
.tr-field textarea{margin-top:6px}
.tr-field .rich-editor{margin-top:2px}
/* ============================================================
ФОРМА ОГОЛОШЕННЯ — доопрацювання елементів
============================================================ */
/* ── Зона додавання фото: велика іконка + короткий підпис ── */
.gallery-drop{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
min-height:150px}
.gallery-drop__icon{
display:grid;
place-items:center;
width:64px;height:64px;
color:#16a34a}
.gallery-drop__icon svg{width:52px;height:52px}
.gallery-drop__text{
font-size:15px;
font-weight:600;
color:#475569}
.gallery-drop:hover .gallery-drop__icon{color:#12833d}
.gallery-drop.is-dragover{
border-color:#16a34a;
background:rgba(22,163,74,.06)}
/* ── Лейбл із підказкою в один рядок ── */
.field--with-hint .field-label-row{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:7px;
flex-wrap:nowrap}
.field-label-row .hint{margin:0}
/* ── Динамічне попередження про місто: компактне, червоне ── */
.ad-location-required{
margin:8px 0 0;
padding:0;
color:#dc2626;
font-size:13px;
line-height:1.45}
.ad-location-required[hidden]{display:none}
.ad-location-required a{
color:#dc2626;
font-weight:600;
text-decoration:underline}
.ad-location-required__link{
white-space:nowrap}
/* ============================================================
ВІЗУАЛЬНИЙ РЕДАКТОР ОПИСУ
============================================================ */
.rich-editor{
border:1px solid rgba(36,48,68,.14);
border-radius:16px;
background:#fff;
overflow:hidden}
.rich-editor__source{
/* прихований, але лишається для сабміту й валідації */
position:absolute!important;
width:1px;height:1px;
padding:0!important;
margin:-1px;
border:0!important;
clip:rect(0 0 0 0);
overflow:hidden}
.rich-editor__toolbar{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:2px;
padding:7px 8px;
border-bottom:1px solid rgba(36,48,68,.1);
background:#fafbfc}
.rich-editor__sep{
width:1px;
height:20px;
margin:0 5px;
background:rgba(36,48,68,.14)}
.rich-editor__btn{
display:inline-grid;
place-items:center;
width:32px;height:32px;
border:0;
border-radius:8px;
background:none;
color:#475569;
cursor:pointer;
transition:background .14s ease,color .14s ease}
.rich-editor__btn svg{width:19px;height:19px}
.rich-editor__btn:hover{background:#eef2f7;color:#0f172a}
.rich-editor__btn.is-active{background:rgba(47,158,98,.14);color:#1c6b41}
.rich-editor__area{
min-height:170px;
padding:13px 15px;
outline:none;
color:#263345;
font-size:15px;
line-height:1.6}
.rich-editor__area:empty::before{
content:attr(data-placeholder);
color:#9aa5b4}
.rich-editor__area ul,
.rich-editor__area ol{margin:6px 0;padding-left:22px}
.rich-editor__area li{margin:2px 0}
.rich-editor__area:focus-within,
.rich-editor:focus-within{border-color:rgba(47,158,98,.5)}
/* Помилка валідації: підсвічуємо сам редактор (textarea прихована) */
label.is-invalid .rich-editor,
.tr-field.is-invalid .rich-editor{border-color:#dc2626;background:#fff7f7}
label.is-invalid .rich-editor__toolbar,
.tr-field.is-invalid .rich-editor__toolbar{background:#fff7f7}
@media(max-width:640px){
.rich-editor__btn{width:30px;height:30px}
.rich-editor__btn svg{width:18px;height:18px}
.gallery-drop{min-height:130px}
}
/* ── Прапорці «Безкоштовно» / «Договірна ціна»: компактніше й ближче до ціни ── */
.form .option-boxes{
gap:6px 16px;
margin:0;
/* підтягуємо до поля ціни (форма має gap:14px між полями) */
margin-top:-6px}
.form .option-boxes .checkline{
padding:2px 0;
font-size:13px}
@media(max-width:640px){
.form .option-boxes{
display:flex;
flex-wrap:wrap;
gap:4px 16px;
margin-top:-4px}
}
/* состояния уведомлений */
/* Notifications pagination and colored states v1.9.2 */
.account-notice-summary{
margin:-4px 0 14px;
color:#64748b;
font-size:13px;
font-weight:600;
}
.account-pagination--notifications{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:18px;
}
.account-page-link{
min-width:38px;
height:38px;
padding:0 12px;
display:inline-grid;
place-items:center;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
color:var(--dark);
font-weight:750;
transition:.18s ease;
}
.account-page-link:hover,
.account-page-link.is-active{
border-color:rgba(47,158,98,.36);
background:#eefaf2;
color:#087036;
}
.account-notice-icon{
width:38px;
height:38px;
border-radius:14px;
font-size:17px;
flex:0 0 38px;
}
.account-notice-item--success{
border-color:rgba(34,197,94,.24);
background:linear-gradient(135deg,#f0fdf4,#fff);
}
.account-notice-item--warning{
border-color:rgba(245,158,11,.28);
background:linear-gradient(135deg,#fff7ed,#fff);
}
.account-notice-item--error{
border-color:rgba(239,68,68,.24);
background:linear-gradient(135deg,#fff5f5,#fff);
}
.account-notice-item--info{
border-color:rgba(37,99,235,.18);
background:linear-gradient(135deg,#eff6ff,#fff);
}
.account-notice-item--success .account-notice-icon{
background:#dcfce7;
color:#15803d;
}
.account-notice-item--warning .account-notice-icon{
background:#ffedd5;
color:#9a5a00;
}
.account-notice-item--error .account-notice-icon{
background:#fee2e2;
color:#b91c1c;
}
.account-notice-item--info .account-notice-icon{
background:#dbeafe;
color:#1d4ed8;
}
.account-notice-item.is-read{
border-color:#e5e7eb;
background:linear-gradient(135deg,#f8fafc,#fff);
box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.account-notice-item.is-read .account-notice-icon{
background:#e5e7eb;
color:#64748b;
}
.account-notice-item.is-read .account-notice-main strong{
color:#64748b;
}
.account-notice-item.is-read .account-notice-main small,
.account-notice-item.is-read .account-notice-meta{
color:#94a3b8;
}
input[data-ua-phone-mask]::placeholder{
color:#94a3b8;
}
/* контакты и попапы */
/* v1.9.3: improved ad gallery and authorized messenger contacts */
.ad-gallery__stage{
position:relative;
max-height:560px;
overflow:hidden;
border-radius:28px;
}
.ad-gallery__stage-inner{
height:clamp(320px,56vh,560px);
max-height:560px;
min-height:0;
}
.ad-gallery__stage-inner>img,.ad-gallery__stage-inner iframe{
cursor:zoom-in;
}
.video-box--gallery{
height:clamp(320px,56vh,560px);
max-height:560px;
min-height:0;
}
.ad-gallery__open{
position:absolute;
right:16px;
bottom:16px;
z-index:3;
display:inline-flex;
align-items:center;
gap:7px;
border:0;
border-radius:999px;
padding:10px 13px;
background:rgba(9,15,25,.78);
color:#fff;
font-size:13px;
font-weight:750;
cursor:pointer;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.ad-gallery__open span{
font-size:16px;
line-height:1;
}
.ad-gallery__open:hover{
background:rgba(9,15,25,.92);
}
.contact-grid .contact-login-notice{
grid-column:1/-1;
border-color:rgba(47,158,98,.18);
background:#f0fbf4;
color:#1f7a43;
text-align:center;
}
.gallery-lightbox-open{
overflow:hidden;
}
.gallery-lightbox{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:24px;
background:rgba(4,10,18,.84);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
opacity:0;
transition:opacity .28s ease;
}
.gallery-lightbox.is-open{opacity:1}
.gallery-lightbox__panel{
position:relative;
display:grid;
grid-template-rows:minmax(0,1fr) auto;
width:min(1120px,100%);
height:min(820px,92vh);
border-radius:28px;
overflow:hidden;
background:#0b1220;
box-shadow:0 30px 90px rgba(0,0,0,.42);
transform:scale(.96) translateY(10px);
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.gallery-lightbox.is-open .gallery-lightbox__panel{transform:scale(1) translateY(0)}
.gallery-lightbox__image{
width:100%;
height:100%;
min-height:0;
object-fit:contain;
background:#0b1220;
}
.gallery-lightbox__close,
.gallery-lightbox__nav{
position:absolute;
z-index:2;
border:0;
display:grid;
place-items:center;
color:#fff;
background:rgba(15,23,42,.72);
cursor:pointer;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:background .16s ease, transform .16s ease;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover{background:rgba(47,158,98,.9)}
.gallery-lightbox__nav:active{transform:translateY(-50%) scale(.94)}
.gallery-lightbox__close{
right:16px;
top:16px;
width:44px;
height:44px;
border-radius:999px;
}
.gallery-lightbox__close svg{width:20px;height:20px}
.gallery-lightbox__nav{
top:50%;
transform:translateY(-50%);
width:52px;
height:72px;
border-radius:18px;
}
.gallery-lightbox__nav svg{width:26px;height:26px}
.gallery-lightbox__nav--prev{
left:16px;
}
.gallery-lightbox__nav--next{
right:16px;
}
.gallery-lightbox__bottom{
display:grid;
gap:12px;
padding:14px 16px 16px;
background:rgba(9,15,25,.98);
color:#fff;
}
.gallery-lightbox__bottom>span{
justify-self:center;
font-size:13px;
font-weight:750;
opacity:.82;
}
.gallery-lightbox__thumbs{
display:flex;
gap:10px;
overflow:auto;
padding-bottom:2px;
}
.gallery-lightbox__thumb{
width:76px;
min-width:76px;
height:58px;
padding:0;
border:2px solid transparent;
border-radius:14px;
overflow:hidden;
background:#111827;
cursor:pointer;
opacity:.72;
}
.gallery-lightbox__thumb.is-active{
border-color:#fff;
opacity:1;
}
.gallery-lightbox__thumb img{
width:100%;
height:100%;
object-fit:cover;
}
@media(max-width:760px){
.ad-gallery__stage-inner,.video-box--gallery{
height:clamp(260px,52vh,390px);
}
.ad-gallery__open{
left:12px;
right:12px;
justify-content:center;
}
.gallery-lightbox{
padding:10px;
}
.gallery-lightbox__panel{
height:94vh;
border-radius:22px;
}
.gallery-lightbox__nav{
width:42px;
height:58px;
font-size:36px;
}
.gallery-lightbox__thumb{
width:62px;
min-width:62px;
height:50px;
}
}
/* v1.9.4: contact authorization popup, messenger logos and phone popup */
.contact-grid--messengers{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.contact-grid--messengers .messenger-link{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
min-height:78px;
padding:12px 8px;
border-radius:18px;
font-size:12px;
line-height:1.2;
color:#111827;
background:#fff;
box-shadow:0 10px 24px rgba(15,23,42,.055);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.contact-grid--messengers .messenger-link:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.11);
}
.messenger-link__icon{
width:38px;
height:38px;
border-radius:14px;
display:grid;
place-items:center;
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 18px rgba(15,23,42,.16);
}
.messenger-link__icon svg{
width:22px;
height:22px;
fill:currentColor;
}
.messenger-link--telegram{
border-color:rgba(34,158,217,.24)!important;
background:linear-gradient(180deg,#f2fbff,#fff)!important;
}
.messenger-link--telegram .messenger-link__icon{
background:linear-gradient(135deg,#2aa8e8,#168acd);
}
.messenger-link--viber{
border-color:rgba(116,74,181,.26)!important;
background:linear-gradient(180deg,#f8f5ff,#fff)!important;
}
.messenger-link--viber .messenger-link__icon{
background:linear-gradient(135deg,#7b52d1,#5f34b3);
}
.messenger-link--whatsapp{
border-color:rgba(34,197,94,.26)!important;
background:linear-gradient(180deg,#f1fdf6,#fff)!important;
}
.messenger-link--whatsapp .messenger-link__icon{
background:linear-gradient(135deg,#2fce66,#17a64a);
}
.contact-phone-button{
justify-content:center;
gap:6px;
letter-spacing:.01em;
}
.modal__box--contact{
width:min(430px,100%);
text-align:center;
padding:30px 24px 24px;
box-shadow:0 30px 90px rgba(4,10,18,.22);
}
.modal__box--contact h3{
margin:10px 0 8px;
font-size:25px;
color:var(--dark);
}
.modal__box--contact p{
margin:0 0 20px;
color:var(--muted);
line-height:1.55;
}
.contact-modal-icon{
width:54px;
height:54px;
margin:0 auto;
border-radius:16px;
display:grid;
place-items:center;
color:#fff;
box-shadow:0 12px 26px rgba(15,23,42,.14);
}
.contact-modal-icon svg{width:26px;height:26px}
.contact-modal-icon--auth{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
}
.contact-modal-icon--phone{
background:linear-gradient(135deg,#22c55e,#15803d);
}
.phone-modal-seller{
display:grid;
gap:3px;
margin:12px 0 16px;
}
.phone-modal-seller strong{
font-size:15.5px;
color:var(--dark);
}
.phone-modal-number{
display:flex;
align-items:center;
justify-content:center;
min-height:56px;
margin:0 0 12px;
padding:14px 16px;
border-radius:14px;
background:#f0fbf4;
color:#11733b;
font-size:22px;
font-weight:800;
letter-spacing:.01em;
text-decoration:none;
border:1px solid rgba(34,197,94,.22);
}
.phone-modal-number[hidden]{display:none!important}
.phone-modal-number.is-loading{
background:#f8fafc;
border-color:rgba(148,163,184,.3);
}
.phone-modal-status{
display:block;
margin-top:10px;
color:#15803d;
font-weight:700;
font-size:13px;
}
.phone-modal-status[hidden]{display:none!important}
.phone-modal-location{
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
color:var(--muted);
font-size:13.5px;
}
.phone-modal-location svg{
width:15px;
height:15px;
fill:#94a3b8;
flex:0 0 auto;
}
body.contact-modal-open{
overflow:hidden;
}
@media(max-width:520px){
.contact-grid--messengers{
grid-template-columns:1fr;
}
.contact-grid--messengers .messenger-link{
min-height:auto;
flex-direction:row;
justify-content:flex-start;
padding:11px 13px;
}
.messenger-link__icon{
width:34px;
height:34px;
border-radius:12px;
}
.phone-modal-number{
font-size:19px;
}
}
/* v1.9.5: protected phone reveal, favorite auth popup and smoother contact modals */
.contact-chat-button{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
}
.contact-chat-button__icon{
width:22px;
height:22px;
display:inline-grid;
place-items:center;
flex:0 0 auto;
}
.contact-chat-button__icon svg{
width:22px;
height:22px;
fill:currentColor;
}
.contact-phone-button[disabled]{
opacity:.72;
cursor:progress;
}
[data-copy-phone]:disabled{
opacity:.58;
cursor:not-allowed;
}
/* Інлайн-прелоадер у модалці телефону (замість тексту «Завантаження…») */
.bmp-inline-spinner{
display:inline-block;
width:26px;height:26px;
border-radius:50%;
border:3px solid rgba(47,158,98,.2);
border-top-color:#2f9e62;
animation:bmpCatalogLoaderSpin .62s linear infinite;
vertical-align:middle}
/* Спінер поверх кольорової (акцентної) кнопки — білий, добре видно. */
.bmp-inline-spinner--on-accent{
width:20px;height:20px;border-width:2.5px;
border-color:rgba(255,255,255,.35);
border-top-color:#fff}
/* Кнопка у стані завантаження: центруємо спінер, ховаємо зайве. */
.btn.is-loading{
display:inline-flex;align-items:center;justify-content:center;
pointer-events:none}
.btn.is-loading .bmp-inline-spinner{margin:0}
/* Плаваюче повідомлення про копіювання: виїжджає знизу екрана */
.copy-fly{
position:fixed;
left:50%;bottom:24px;
transform:translate(-50%,140%);
z-index:6000;
display:inline-flex;align-items:center;gap:8px;
padding:11px 18px;
border-radius:999px;
background:#0f172a;color:#fff;
box-shadow:0 18px 44px rgba(15,23,42,.32);
font-size:13.5px;font-weight:600;white-space:nowrap;
opacity:0;pointer-events:none;
transition:transform .44s cubic-bezier(.22,.61,.36,1), opacity .34s ease}
.copy-fly.is-visible{transform:translate(-50%,0);opacity:1}
.copy-fly__icon{flex:none;display:inline-flex;width:20px;height:20px}
.copy-fly__icon svg{width:20px;height:20px}
.copy-fly__text{min-width:0}
.copy-fly--ok .copy-fly__icon{color:#4ade80}
.copy-fly--err .copy-fly__icon{color:#f87171}
/* довгий текст (помилка копіювання) — дозволяємо перенос і звужуємо шрифт */
.copy-fly--err{white-space:normal;border-radius:14px;max-width:calc(100vw - 32px);font-size:12.5px;line-height:1.35;text-align:left}
/* Помилка у модалці телефону — просто текст з іконкою, ховається коли порожня */
.phone-modal-error{
display:flex;align-items:center;gap:8px;justify-content:center;
margin:2px 0 10px;
color:#c0392b;
font-size:13.5px;font-weight:600;line-height:1.4;
}
.phone-modal-error[hidden]{display:none!important}
.phone-modal-error svg{flex:none;width:18px;height:18px;color:#e8483c}
@media(prefers-reduced-motion:reduce){
.copy-fly{transition:opacity .2s ease}
.copy-fly.is-visible{transform:translate(-50%,0)}
}
/* выбор местоположения */
/* v2.0.2 — 3-level hierarchical searchable location picker */
.form-section--location {
margin: 18px 0;
}
.location-cascade {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid rgba(15, 23, 42, .10);
border-radius: 18px;
background: linear-gradient(180deg, rgba(248, 250, 252, .92), rgba(255,255,255,.96));
}
.location-cascade.is-invalid {
border-color: rgba(220, 38, 38, .35);
box-shadow: 0 0 0 4px rgba(220, 38, 38, .08);
}
.location-cascade__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.location-cascade__head .field-label {
margin-bottom: 2px;
}
.location-cascade__head small {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 13px;
line-height: 1.35;
}
.location-cascade__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.location-level {
position: relative;
display: grid;
gap: 7px;
}
.location-level[hidden],
.location-level.is-hidden {
display: none !important;
}
.location-cascade:not(.is-initialized) [data-location-level-wrap="2"]:not(.is-initial-visible),
.location-cascade:not(.is-initialized) [data-location-level-wrap="3"]:not(.is-initial-visible) {
display: none !important;
}
.location-level label {
margin: 0;
color: #64748b;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.location-level__control {
position: relative;
}
.location-level__control input[type="text"] {
width: 100%;
min-height: 46px;
padding: 0 42px 0 13px;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 14px;
background: #fff;
color: var(--text);
outline: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.location-level__control input[type="text"]:focus {
border-color: rgba(47, 158, 98, .55);
box-shadow: 0 0 0 4px rgba(47, 158, 98, .12);
}
.location-level__control input[type="text"]:disabled {
cursor: not-allowed;
background: #f8fafc;
color: #94a3b8;
}
.location-level.is-invalid .location-level__control input,
.location-level .is-invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;
background: #fffafa !important;
}
.location-level.is-invalid .field-error {
display: block;
}
.location-level__clear {
position: absolute;
right: 8px;
top: 50%;
width: 28px;
height: 28px;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: #eef2f7;
color: #64748b;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.location-level__clear:hover {
background: #e2e8f0;
color: #0f172a;
}
.location-level__dropdown {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 35;
max-height: 250px;
overflow: auto;
padding: 6px;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}
.location-level__option {
width: 100%;
display: grid;
gap: 2px;
padding: 10px 11px;
border: 0;
border-radius: 10px;
background: transparent;
text-align: left;
cursor: pointer;
}
.location-level__option:hover {
background: #f1f5f9;
}
.location-level__option span {
color: #0f172a;
font-size: 14px;
font-weight: 700;
}
.location-level__option small {
color: #64748b;
font-size: 11px;
}
.location-level__empty {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 34;
padding: 12px 14px;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 14px;
background: #fff;
color: #64748b;
box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
font-size: 13px;
}
.location-cascade__profile {
flex: 0 0 auto;
white-space: nowrap;
}
.location-cascade__error {
justify-self: start;
margin-top: -2px;
color: #dc2626;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
.location-cascade__error[hidden] {
display: none !important;
}
@media (max-width: 900px) {
.location-cascade__grid {
grid-template-columns: 1fr;
}
.location-cascade__head {
display: grid;
}
.location-cascade__profile {
width: 100%;
}
}
/* модалка архива */
/* v2.0.9: archive reason modal and archive bulk actions */
.btn--danger{
background:#dc2626;
color:#fff;
border-color:#dc2626;
}
.btn--danger:hover{
background:#b91c1c;
border-color:#b91c1c;
color:#fff;
}
.account-ad-select{
display:flex;
align-items:center;
justify-content:center;
width:34px;
min-width:34px;
}
.account-ad-select input{
width:18px;
height:18px;
accent-color:var(--accent,#1f9d55);
}
.account-ads-bulk{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
padding:14px;
margin:14px 0;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
background:linear-gradient(135deg,#f8fafc,#ffffff);
box-shadow:0 12px 32px rgba(15,23,42,.05);
}
.account-ads-check-all{
display:inline-flex;
align-items:center;
gap:8px;
color:#475569;
font-size:14px;
font-weight:650;
}
.account-ads-check-all input{
width:18px;
height:18px;
accent-color:var(--accent,#1f9d55);
}
.account-ads-bulk__hint{
color:#64748b;
font-size:13px;
}
.account-ad-archive-note,
.account-ad-archive-reasons{
display:block;
margin-top:5px;
color:#64748b;
font-size:12px;
line-height:1.35;
}
.account-ad-archive-note{
color:#92400e;
font-weight:700;
}
.account-archive-modal__box{
max-width:560px;
}
.account-archive-modal h3{
margin:0 0 8px;
font-size:24px;
line-height:1.2;
}
.account-archive-modal p{
margin:0 0 18px;
color:#64748b;
}
.archive-reason-list{
display:grid;
gap:10px;
margin-bottom:14px;
}
.archive-reason-option{
display:flex;
gap:10px;
align-items:flex-start;
padding:12px 14px;
border:1px solid rgba(15,23,42,.1);
border-radius:14px;
background:#fff;
color:#1f2937;
font-weight:650;
cursor:pointer;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.archive-reason-option:hover{
border-color:rgba(31,157,85,.35);
box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.archive-reason-option input{
margin-top:2px;
width:18px;
height:18px;
accent-color:var(--accent,#1f9d55);
}
.archive-reason-error{
margin:4px 0 12px;
color:#b42318;
font-size:13px;
font-weight:700;
}
.archive-reason-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
margin-top:18px;
}
.account-inline-form[data-confirm-delete-forever="1"] .btn{
white-space:nowrap;
}
@media(max-width:760px){
.account-ads-bulk{align-items:stretch;flex-direction:column}
.account-ads-bulk .element-select,.account-ads-bulk .btn{width:100%}
.account-ad-select{width:100%;justify-content:flex-start}
.archive-reason-actions{justify-content:stretch}
.archive-reason-actions .btn{width:100%}
}
/* v2.1.2: надійний popup перенесення оголошення в архів */
.account-archive-modal{
z-index:10050;
}
.account-archive-modal__box{
box-shadow:0 28px 90px rgba(12,22,18,.24);
}
.archive-reason-list{
display:grid;
gap:10px;
margin:18px 0 14px;
}
.archive-reason-option{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 14px;
border:1px solid rgba(20,40,31,.1);
border-radius:16px;
background:#f8fbf7;
cursor:pointer;
transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.archive-reason-option:hover{
border-color:rgba(33,160,98,.32);
background:#f4fbf6;
transform:translateY(-1px);
}
.archive-reason-option input{
margin-top:3px;
width:17px;
height:17px;
accent-color:#25a55f;
}
.archive-reason-option span{
font-weight:650;
color:#19241f;
line-height:1.35;
}
.archive-reason-error{
margin:8px 0 0;
color:#bd2d2d;
font-size:13px;
font-weight:700;
}
.archive-reason-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
margin-top:18px;
}
.btn--archive svg{
width:18px;
height:18px;
}
.archive-reason-option input[type="radio"]{
flex:0 0 auto;
border-radius:50%;
}
.archive-reason-option:has(input[type="radio"]:checked){
border-color:rgba(37,165,95,.6);
background:#eefbf3;
box-shadow:0 10px 26px rgba(37,165,95,.1);
}
/* ============================================================
Строки оголошень кабінету — компактні картки, 2 колонки,
повний адаптив. Єдине джерело стилю: перебиває базові правила
з 10-base-core та 32-account-ads-form завдяки специфічності.
============================================================ */
/* Сітка списку: дві колонки на десктопі, одна на планшеті/мобілці */
.account-table.account-table--ads{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
align-items:start;
}
/* Сама картка оголошення (звичайні: фото + контент + дії) */
.account-table--ads .account-table__row,
.account-table--ads .account-table__row--ad{
display:grid;
grid-template-columns:64px minmax(0,1fr) auto;
gap:12px;
align-items:center;
padding:12px;
margin:0;
background:#fff;
border:1px solid rgba(15,23,42,.09);
border-radius:16px;
box-shadow:0 6px 18px rgba(15,23,42,.04);
transition:border-color .16s ease, box-shadow .16s ease;
overflow:visible; /* щоб дропдауни не обрізались */
}
/* Архівна картка — додаткова вузька колонка під чекбокс масового виділення */
.account-table--ads .account-table__row--archive{
grid-template-columns:24px 64px minmax(0,1fr) auto;
}
/* Чекбокс масового виділення — компактна колонка, не займає зайвого місця */
.account-table--ads .account-table__row--archive .account-ad-select{
justify-self:center;
align-self:center;
margin:0;
}
/* Ховер БЕЗ transform — інакше зсув ламав позицію дропдауна */
.account-table--ads .account-table__row:hover,
.account-table--ads .account-table__row--ad:hover{
border-color:rgba(47,158,98,.28);
box-shadow:0 12px 28px rgba(15,23,42,.08);
}
/* Мініатюра — маленька і квадратна */
.account-table--ads .account-ad-thumb{
width:64px;
height:64px;
min-height:0;
border-radius:12px;
overflow:hidden;
background:#eef2f7;
box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
flex:none;
}
.account-table--ads .account-ad-thumb img{
width:64px;
height:64px;
min-height:0;
object-fit:cover;
display:block;
border-radius:12px;
}
/* Центральна колонка */
.account-table--ads .account-table__main{
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
min-width:0;
}
.account-ad-title{
display:block;
font-size:14.5px;
font-weight:700;
line-height:1.3;
color:#0f172a;
letter-spacing:-.01em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.account-ad-title__price{
font-weight:700;
color:#1f6f43;
white-space:nowrap;
}
.account-ad-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.account-table__row .account-ad-meta span{
display:inline-flex;
width:auto;
align-items:center;
min-height:22px;
padding:3px 8px;
border-radius:999px;
background:#f1f5f9;
color:#64748b;
font-size:11px;
line-height:1;
font-weight:700;
}
.account-table__row .account-ad-meta__id{color:#334155;background:#e2e8f0}
.account-table__row .account-ad-meta__status{color:#166534;background:#dcfce7}
.account-table__row .account-ad-meta__status--pending{color:#92400e;background:#fef3c7}
.account-table__row .account-ad-meta__status--bmp_archived{color:#475569;background:#e2e8f0}
.account-table__row .account-ad-meta__status--bmp_blocked,
.account-table__row .account-ad-meta__status--bmp_rejected{color:#991b1b;background:#fee2e2}
/* Примітки архіву/блокування */
.account-ad-archive-note,
.account-ad-archive-reasons,
.account-ad-unavailable-note,
.account-ad-unavailable-reasons{
display:flex!important;
align-items:flex-start;
gap:7px;
max-width:100%;
padding:7px 9px;
border-radius:10px;
font-size:11.5px!important;
line-height:1.35;
font-weight:600;
}
.account-ad-archive-note,
.account-ad-unavailable-note{color:#475569!important;background:rgba(226,232,240,.7)}
.account-ad-archive-reasons,
.account-ad-unavailable-reasons{color:#7c2d12!important;background:#ffedd5}
/* Статусні фони картки */
.account-table--ads .account-table__row.is-archived{background:linear-gradient(135deg,#f8fafc,#fff)}
.account-table--ads .account-table__row.is-archived .account-ad-thumb img{filter:grayscale(.15)}
.account-table--ads .account-table__row.is-blocked{background:linear-gradient(135deg,#fff7ed,#fff);border-color:rgba(220,38,38,.16)}
.account-table--ads .account-table__row.is-blocked .account-ad-thumb img{filter:grayscale(.4);opacity:.8}
/* Праворуч — дії (олівець + меню три крапки) */
.account-table--ads .account-table__actions{
display:flex;
align-items:center;
gap:8px;
flex:none;
min-width:0;
align-self:center;
}
/* Чекбокс масового виділення (архів) */
.account-ad-select{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.account-ad-select input{position:absolute;opacity:0;width:0;height:0}
.account-ad-select span{
width:20px;height:20px;border-radius:6px;border:2px solid #cbd5e1;background:#fff;
display:inline-flex;align-items:center;justify-content:center;transition:.15s ease}
.account-ad-select span:after{
content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:-2px}
.account-ad-select input:checked + span{background:#2f9e62;border-color:#2f9e62}
.account-ad-select input:checked + span:after{transform:rotate(-45deg) scale(1)}
/* ===== Меню «три крапки» ===== */
.ad-menu{position:relative;display:inline-flex}
.ad-menu__toggle{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;
border:1px solid #e3e8ef;background:#fff;color:#475569;cursor:pointer;
transition:background .15s ease,color .15s ease}
.ad-menu__toggle:hover{background:#f1f5f9;color:#2f9e62}
.ad-menu__toggle svg{width:18px;height:18px;fill:currentColor}
.ad-menu__dropdown{
position:absolute;top:calc(100% + 8px);right:0;z-index:1400;
min-width:210px;
background:#fff;border:1px solid #e7ecf2;border-radius:14px;
box-shadow:0 24px 60px rgba(15,23,42,.18);
padding:6px;
opacity:0;transform:translateY(-8px) scale(.98);
transition:opacity .2s ease,transform .2s cubic-bezier(.22,.61,.36,1);
pointer-events:none}
.ad-menu__dropdown.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ad-menu__item{
display:flex;align-items:center;gap:8px;width:100%;
padding:9px 12px;border:0;background:none;text-align:left;
font-size:14px;color:#1f2937;cursor:pointer;border-radius:9px;text-decoration:none}
.ad-menu__item:hover{background:#f4f7fb;color:#2f9e62}
.ad-menu__item.is-disabled{color:#b6bfca;cursor:default}
.ad-menu__item.is-disabled:hover{background:none;color:#b6bfca}
.ad-menu__sep{height:1px;background:#eef2f6;margin:5px 4px}
.ad-menu__form{display:block}
.ad-menu__form form{margin:0}
.ad-menu__form button,
.ad-menu__form .btn{
display:flex;align-items:center;gap:8px;width:100%;
padding:9px 12px;border:0!important;background:none!important;text-align:left;
font-size:14px;color:#1f2937!important;cursor:pointer;border-radius:9px;
box-shadow:none!important;font-weight:400;justify-content:flex-start}
.ad-menu__form button:hover,
.ad-menu__form .btn:hover{background:#f4f7fb!important;color:#2f9e62!important;transform:none!important}
.ad-menu__form .btn--danger,
.ad-menu__form [data-mode="delete_forever"] button{color:#c0392b!important}
.ad-menu__form [data-mode="delete_forever"] button:hover{background:#fdecec!important;color:#c0392b!important}
/* ===== Адаптив ===== */
/* Дві колонки тримаємо аж до 900px, нижче — одна */
@media(max-width:900px){
.account-table.account-table--ads{grid-template-columns:1fr}
}
/* На планшетах і телефонах меню дій — знизу екрана (bottom sheet),
щоб ніколи не вилазило за межі, незалежно від позиції кнопки. */
@media(max-width:900px){
.ad-menu__dropdown{
position:fixed;
left:12px;right:12px;
bottom:12px;top:auto;
min-width:0;width:auto;
transform:translateY(16px);
border-radius:16px;
padding:8px;
z-index:5200}
.ad-menu__dropdown.is-open{transform:translateY(0)}
.ad-menu__item,
.ad-menu__form button,
.ad-menu__form .btn{padding:13px 14px;font-size:15px}
}
@media(max-width:560px){
.account-table--ads .account-table__row,
.account-table--ads .account-table__row--ad{
grid-template-columns:56px minmax(0,1fr) auto;
gap:10px;
padding:10px;
}
.account-table--ads .account-table__row--archive{
grid-template-columns:22px 56px minmax(0,1fr) auto;
gap:10px;
padding:10px;
}
.account-table--ads .account-ad-thumb,
.account-table--ads .account-ad-thumb img{width:56px;height:56px}
.account-ad-title{font-size:14px}
}
/* сортировка фото */
/* v2.1.9: stable mobile/desktop photo sorting and mixed photo/video lightbox */
.gallery-preview{
touch-action:pan-y;
}
.gallery-item{
user-select:none;
-webkit-user-select:none;
touch-action:none;
}
.gallery-item.is-pointer-dragging{
opacity:.72;
transform:scale(.985);
box-shadow:0 18px 46px rgba(8,19,15,.20);
}
.gallery-item__handle{
position:absolute;
left:8px;
bottom:8px;
z-index:2;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(8,19,15,.72);
color:#fff;
font-weight:800;
line-height:1;
box-shadow:0 8px 20px rgba(0,0,0,.18);
pointer-events:none;
}
.gallery-sort-active{
cursor:grabbing;
user-select:none;
-webkit-user-select:none;
}
.ad-gallery__thumb--video{
position:relative;
}
.ad-gallery__thumb--video img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.72);
}
.ad-gallery__thumb--video span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:2;
}
.ad-gallery__thumb--video small{
position:absolute;
left:8px;
right:8px;
bottom:7px;
z-index:2;
text-align:center;
text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.gallery-lightbox__media{
min-height:0;
display:grid;
place-items:center;
background:#0b1220;
}
.gallery-lightbox__media .gallery-lightbox__image{
width:100%;
height:100%;
min-height:0;
object-fit:contain;
}
.gallery-lightbox__video{
width:100%;
height:100%;
min-height:0;
display:grid;
place-items:center;
background:#000;
}
.gallery-lightbox__video iframe{
width:100%;
height:100%;
border:0;
}
.gallery-lightbox__thumb{
position:relative;
}
.gallery-lightbox__thumb--video img{
filter:brightness(.72);
}
.gallery-lightbox__play{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(255,255,255,.22);
color:#fff;
font-size:12px;
}
@media(max-width:760px){
.gallery-item__handle{
width:34px;
height:34px;
left:10px;
bottom:10px;
}
}
/* v2.2.0: full-card photo sorting for desktop and mobile */
.gallery-preview{
touch-action:pan-y;
}
.gallery-item,
.gallery-item:hover,
.gallery-item img{
cursor:move;
}
.gallery-item{
user-select:none;
-webkit-user-select:none;
touch-action:none;
-webkit-tap-highlight-color:transparent;
}
.gallery-item img{
pointer-events:none;
-webkit-user-drag:none;
user-drag:none;
}
.gallery-item__handle{
display:none !important;
}
.gallery-item.is-dragging,
.gallery-item.is-pointer-dragging{
opacity:.92;
border-color:var(--accent);
box-shadow:0 20px 50px rgba(8,19,15,.24);
cursor:grabbing;
}
.gallery-item.is-pointer-dragging img{
transform:scale(1.015);
}
.gallery-sort-active,
.gallery-sort-active *{
cursor:grabbing !important;
user-select:none !important;
-webkit-user-select:none !important;
}
/* v2.2.1: visible drag ghost for photo sorting */
.gallery-item{
position:relative;
transition:border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease;
}
.gallery-item,
.gallery-item:hover,
.gallery-item img{
cursor:move;
}
.gallery-item:active,
.gallery-item.is-pointer-dragging,
.gallery-sort-active .gallery-item-drag-ghost{
cursor:grabbing !important;
}
.gallery-item.is-drag-placeholder{
opacity:.38;
transform:scale(.98);
border-style:dashed;
border-color:var(--accent);
background:rgba(255,255,255,.78);
}
.gallery-item.is-drag-placeholder img{
transform:none !important;
filter:saturate(.85) opacity(.82);
}
.gallery-item-drag-ghost{
box-sizing:border-box;
opacity:1 !important;
border-color:var(--accent) !important;
box-shadow:0 26px 70px rgba(8,19,15,.34) !important;
transform-origin:0 0;
will-change:transform;
rotate:1.5deg;
background:#fff;
border-radius:18px;
}
.gallery-item-drag-ghost img{
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
transform:none !important;
filter:none !important;
}
.gallery-item-drag-ghost .gallery-item__main{
display:none !important;
}
@media (hover:hover){
.gallery-item:hover{
border-color:var(--accent);
box-shadow:0 16px 40px rgba(8,19,15,.16);
}
}
/* v2.2.2: professional photo sorting without flicker */
.gallery-preview{
touch-action:none;
align-items:start;
}
.gallery-preview .gallery-item{
cursor:move;
cursor:grab;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
touch-action:none;
will-change:transform;
backface-visibility:hidden;
transform:translateZ(0);
}
.gallery-preview .gallery-item:hover{
cursor:grab;
}
.gallery-preview .gallery-item:active,
.gallery-preview .gallery-item.is-sorting-float{
cursor:grabbing !important;
}
.gallery-preview .gallery-item img{
pointer-events:none;
user-select:none;
-webkit-user-select:none;
-webkit-user-drag:none;
touch-action:none;
}
.gallery-item.is-sorting-float{
opacity:1 !important;
overflow:hidden;
border-color:var(--accent) !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 26px 70px rgba(8,19,15,.34) !important;
transform-origin:center center;
will-change:transform;
backface-visibility:hidden;
contain:layout paint;
}
.gallery-item.is-sorting-float img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
transform:none !important;
filter:none !important;
border-radius:inherit !important;
}
.gallery-item-sort-placeholder{
display:block;
aspect-ratio:1.15/1;
border:2px dashed var(--accent);
border-radius:18px;
background:linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
box-shadow:inset 0 0 0 1px rgba(34,197,94,.12);
box-sizing:border-box;
pointer-events:none;
}
.gallery-sort-active,
.gallery-sort-active *{
cursor:grabbing !important;
user-select:none !important;
-webkit-user-select:none !important;
}
.gallery-sort-active{
overscroll-behavior:contain;
}
/* v2.2.3: smoother mobile photo sorting and upload processing loader */
.gallery-manager{
position:relative;
}
.gallery-upload-loader{
position:absolute;
inset:0;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:20px;
border-radius:22px;
background:rgba(255,255,255,.82);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#0f172a;
font-weight:800;
text-align:center;
box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.gallery-upload-loader[hidden]{
display:none !important;
}
.gallery-upload-loader__spinner{
width:26px;
height:26px;
flex:0 0 26px;
border-radius:999px;
border:3px solid rgba(34,197,94,.22);
border-top-color:var(--accent);
animation:bmpGallerySpin .72s linear infinite;
}
@keyframes bmpGallerySpin{
to{transform:rotate(360deg)}
}
.gallery-manager.is-gallery-processing .gallery-drop,
.gallery-manager.is-gallery-processing .gallery-preview{
pointer-events:none;
}
.gallery-preview{
touch-action:none;
-webkit-overflow-scrolling:auto;
}
.gallery-preview .gallery-item{
cursor:move;
cursor:grab;
transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
will-change:transform;
contain:layout paint;
}
.gallery-preview .gallery-item:hover{
border-color:var(--accent);
box-shadow:0 16px 40px rgba(8,19,15,.16);
}
.gallery-preview .gallery-item.is-sorting-float{
cursor:grabbing !important;
transition:none !important;
transform-origin:center center;
border-color:var(--accent) !important;
box-shadow:0 30px 80px rgba(8,19,15,.34) !important;
}
.gallery-item-sort-placeholder{
min-width:0;
min-height:0;
opacity:1;
}
@media(max-width:760px){
.gallery-upload-loader{
align-items:center;
font-size:14px;
border-radius:18px;
}
.gallery-preview .gallery-item:hover{
box-shadow:0 10px 26px rgba(8,19,15,.08);
}
}
/* v2.2.4: stable slot-based gallery sorting for desktop and mobile */
.gallery-preview{
position:relative;
touch-action:none;
-webkit-overflow-scrolling:auto;
align-items:start;
}
.gallery-preview .gallery-item{
cursor:move;
cursor:grab;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent;
touch-action:none;
transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
will-change:transform;
backface-visibility:hidden;
transform:translateZ(0);
}
.gallery-preview .gallery-item:hover{
cursor:grab;
border-color:var(--accent);
box-shadow:0 16px 40px rgba(8,19,15,.16);
}
.gallery-preview .gallery-item img{
pointer-events:none;
user-select:none;
-webkit-user-select:none;
-webkit-user-drag:none;
touch-action:none;
}
.gallery-preview.is-gallery-sorting .gallery-item:not(.is-sorting-float):not(.gallery-item-sort-placeholder){
transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease;
}
.gallery-preview .gallery-item.is-sorting-float{
opacity:1 !important;
cursor:grabbing !important;
overflow:hidden !important;
border-color:var(--accent) !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 30px 80px rgba(8,19,15,.34) !important;
transform-origin:center center !important;
will-change:left, top, transform !important;
backface-visibility:hidden !important;
contain:layout paint !important;
}
.gallery-preview .gallery-item.is-sorting-float img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
transform:none !important;
filter:none !important;
border-radius:inherit !important;
}
.gallery-preview .gallery-item-sort-placeholder{
display:block !important;
opacity:1 !important;
border:2px dashed var(--accent) !important;
border-radius:18px !important;
background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.04)) !important;
box-shadow:inset 0 0 0 1px rgba(34,197,94,.12) !important;
box-sizing:border-box !important;
pointer-events:none !important;
}
.gallery-preview .gallery-item-sort-placeholder::after{
content:"";
position:absolute;
inset:10px;
display:grid;
place-items:center;
border-radius:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 48 48' fill='none'%3E%3Crect x='6' y='9' width='36' height='30' rx='4' fill='%23087036' fill-opacity='0.12' stroke='%23087036' stroke-width='2.2'/%3E%3Ccircle cx='16' cy='19' r='3.2' fill='%23087036'/%3E%3Cpath d='M10 36l9.5-9.5a3 3 0 0 1 4.2 0L30 33l3.5-3.5a3 3 0 0 1 4.2 0L42 33.5' stroke='%23087036' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
background-size:44px 44px;
opacity:.7;
}
.gallery-sort-active,
.gallery-sort-active *{
cursor:grabbing !important;
user-select:none !important;
-webkit-user-select:none !important;
}
.gallery-sort-active{
overscroll-behavior:contain;
}
@media(max-width:760px){
.gallery-preview .gallery-item:hover{
border-color:transparent;
box-shadow:0 10px 26px rgba(8,19,15,.08);
}
.gallery-preview .gallery-item.is-main:hover{
border-color:var(--accent);
}
}
.topbar-mobile__notice-link span:first-child{
display:grid;
gap:2px;
min-width:0}
.topbar-mobile__notice-link small{
color:#8a96a8;
font-size:11px;
line-height:1.2;
font-weight:600}
/* шторка уведомлений */
/* v2.2.8: mobile account header + notification drawer */
.site-header--account-context .site-header__inner{
justify-content:flex-start;
}
.site-header--account-context .catalog-button{
margin-left:auto;
}
.topbar-mobile__quick{
display:none;
}
.topbar-mobile__icon-link{
position:relative;
width:38px;
height:38px;
border:1px solid rgba(255,255,255,.13);
border-radius:14px;
background:rgba(255,255,255,.07);
color:#fff!important;
display:inline-grid;
place-items:center;
cursor:pointer;
flex:0 0 auto;
transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.topbar-mobile__icon-link:hover,
.topbar-mobile__icon-link:focus-visible{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.24);
transform:translateY(-1px);
outline:none;
}
.topbar-mobile__icon-link svg{
width:21px;
height:21px;
display:block;
}
.topbar-mobile__icon-link--notice svg{
color:#bbf7d0;
}
.topbar-mobile__icon-link--account svg{
color:#dbeafe;
}
@media(max-width:900px){
.topbar__inner{
justify-content:space-between!important;
}
.topbar-mobile{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
width:100%;
position:relative;
}
.topbar-mobile--auth .topbar-mobile__toggle{
width:auto;
min-width:0;
max-width:calc(100vw - 156px);
flex:1 1 auto;
justify-content:flex-start;
padding:6px 9px;
}
.topbar-mobile--auth .topbar-mobile__toggle:after{
margin-left:auto;
}
.topbar-mobile__quick{
display:flex;
align-items:center;
gap:8px;
flex:0 0 auto;
}
.topbar-mobile__menu{
left:0;
right:auto;
width:min(252px,calc(100vw - 32px));
}
.topbar-mobile__menu a{
align-items:center;
justify-content:space-between;
gap:10px;
}
.site-header--account-context .site-header__inner{
grid-template-columns:minmax(0,1fr) auto!important;
justify-content:normal!important;
}
.site-header--account-context .catalog-button{
margin-left:0;
justify-self:end;
}
.site-header--account-context .mobile-search-button,
.site-header--account-context .header-search,
.site-header--account-context .main-nav,
.site-header--account-context .menu-toggle{
display:none!important;
}
}
.topbar-mobile__icon-link--sell{
order:9!important;
width:48px!important;
height:48px!important;
border-radius:999px!important;
display:grid!important;
grid-template-rows:25px auto!important;
place-items:center!important;
gap:0!important;
color:#052e16!important;
background:linear-gradient(135deg,#dcfce7 0%,#86efac 45%,#22c55e 100%)!important;
border:1px solid rgba(22,163,74,.38)!important;
box-shadow:0 12px 26px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.topbar-mobile__icon-link--sell svg{
width:24px!important;
height:24px!important;
display:block!important;
color:#064e3b!important;
}
.topbar-mobile__icon-link--sell small{
display:block!important;
font-size:8.5px!important;
line-height:1!important;
font-weight:900!important;
margin-top:-3px!important;
letter-spacing:.01em!important;
}
@media(max-width:900px){
.topbar-mobile__toggle:after{
content:""!important;
width:18px;
height:18px;
flex:0 0 auto;
background:currentColor;
opacity:.82;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
transition:transform .22s ease;
}
.topbar-mobile.is-open .topbar-mobile__toggle:after{
transform:rotate(180deg);
}
.topbar-mobile--auth .topbar-mobile__toggle{
max-width:calc(100vw - 220px)!important;
}
.topbar-mobile__quick{
display:flex!important;
align-items:center!important;
gap:7px!important;
}
}
@media (max-width:900px){
.topbar-mobile__menu{
display:grid!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translate3d(0,10px,0) scale(.985)!important;
transform-origin:top left!important;
transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s!important;
will-change:opacity,transform!important;
}
.topbar-mobile__menu[hidden]{
display:none!important;
}
.topbar-mobile.is-open .topbar-mobile__menu:not([hidden]),
.topbar-mobile__menu.is-open:not([hidden]){
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translate3d(0,0,0) scale(1)!important;
transition:opacity .22s ease,transform .22s ease,visibility 0s!important;
}
.topbar-mobile__menu.is-closing:not([hidden]){
opacity:0!important;
visibility:visible!important;
pointer-events:none!important;
transform:translate3d(0,8px,0) scale(.985)!important;
transition:opacity .2s ease,transform .2s ease!important;
}
}
/* v2.4.1: clean single-source notification drawer for data-top-notices */
[data-top-notices]{
position:relative;
padding:0;
margin:0;
z-index:120;
}
[data-top-notices]::after{
display:none;
content:none;
}
[data-top-notices-toggle],
.top-notices__button,
.topbar-mobile__icon-link--notice{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.top-notices__button{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-width:38px;
min-height:30px;
padding:5px 9px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.08);
color:#e5e7eb;
cursor:pointer;
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.top-notices__button:hover,
.top-notices__button:focus-visible{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.24);
outline:none;
}
.top-notices__icon{
width:20px;
height:20px;
border-radius:50%;
display:grid;
place-items:center;
background:#22c55e;
color:#052e16;
font-size:12px;
line-height:1;
font-weight:800;
flex:0 0 auto;
}
.top-notices__icon--bell{
background:#eef6f1;
color:#24784b;
}
.top-notices__icon--bell svg{
width:16px;
height:16px;
display:block;
}
.top-notices__text{
display:none;
font-size:13px;
line-height:1;
}
.top-notices__count{
position:absolute;
right:-7px;
top:-7px;
min-width:18px;
height:18px;
padding:0 5px;
border:2px solid #0f172a;
border-radius:999px;
background:#ef4444;
color:#fff;
display:grid;
place-items:center;
font-size:10px;
line-height:1;
font-weight:800;
pointer-events:none;
}
.top-notices__dropdown{
position:absolute;
top:calc(100% + 10px);
right:0;
width:min(380px,calc(100vw - 28px));
max-width:calc(100vw - 28px);
padding:12px;
border:1px solid rgba(36,48,68,.12);
border-radius:22px;
background:#fff;
color:#172033;
box-shadow:0 24px 70px rgba(15,23,42,.22);
z-index:3100;
display:block;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate3d(0,10px,0) scale(.985);
transform-origin:top right;
transition:
opacity .24s cubic-bezier(.22,.61,.36,1),
transform .24s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .24s;
will-change:opacity,transform;
backface-visibility:hidden;
contain:layout paint;
}
[data-top-notices].is-opening .top-notices__dropdown,
[data-top-notices].is-open .top-notices__dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate3d(0,0,0) scale(1);
transition:
opacity .24s cubic-bezier(.22,.61,.36,1),
transform .24s cubic-bezier(.22,.61,.36,1),
visibility 0s;
}
[data-top-notices].is-closing .top-notices__dropdown{
opacity:0;
visibility:visible;
pointer-events:none;
transform:translate3d(0,8px,0) scale(.985);
transition:
opacity .18s cubic-bezier(.4,0,.2,1),
transform .18s cubic-bezier(.4,0,.2,1);
}
.top-notices__head{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:10px;
padding:2px 2px 10px;
}
.top-notices__head strong{
min-width:0;
color:#172033;
font-size:14px;
line-height:1.25;
}
.top-notices__head a{
white-space:nowrap;
color:#24784b;
font-size:12px;
line-height:1;
font-weight:800;
text-decoration:none;
}
.top-notices__close{
width:30px;
height:30px;
display:inline-grid;
place-items:center;
border:0;
border-radius:999px;
background:#f1f5f9;
color:#334155;
cursor:pointer;
font-size:18px;
line-height:1;
transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.top-notices__close:hover,
.top-notices__close:focus-visible{
background:#e2e8f0;
color:#0f172a;
transform:rotate(90deg);
outline:none;
}
.top-notices__list{
display:grid;
gap:10px;
max-height:420px;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.top-notices__empty{
padding:14px;
border-radius:16px;
background:#f8fbf9;
color:#64748b;
font-size:13px;
line-height:1.35;
}
.top-notices .bmp-notice{
grid-template-columns:32px minmax(0,1fr) 28px;
padding:12px;
border-radius:18px;
box-shadow:none;
transform:translateZ(0);
backface-visibility:hidden;
}
.top-notices .bmp-notice__icon{
width:32px;
height:32px;
border-radius:12px;
}
.top-notices .bmp-notice__body strong{
font-size:14px;
}
.top-notices .bmp-notice__body p{
font-size:12px;
}
.top-notices .bmp-notice__close{
position:relative;
z-index:4;
width:28px;
height:28px;
}
.top-notices .bmp-notice__link[href*="/account/ad/new"]{
color:#24784b;
}
body.top-notices-open .site-header{
transform:translateY(0);
}
body.top-notices-open .topbar-mobile__menu{
pointer-events:none;
}
@media(max-width:900px){
[data-top-notices].top-notices--mobile{
position:relative;
z-index:3200;
}
[data-top-notices].top-notices--mobile::before{
content:"";
position:fixed;
inset:0;
z-index:3090;
display:block;
background:rgba(15,23,42,.26);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .22s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .22s;
}
[data-top-notices].top-notices--mobile.is-opening::before,
[data-top-notices].top-notices--mobile.is-open::before{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:
opacity .22s cubic-bezier(.22,.61,.36,1),
visibility 0s;
}
[data-top-notices].top-notices--mobile.is-closing::before{
opacity:0;
visibility:visible;
pointer-events:none;
transition:opacity .16s cubic-bezier(.4,0,.2,1);
}
.top-notices__text{
display:none;
}
.top-notices--mobile .top-notices__dropdown{
position:fixed;
top:max(58px,calc(env(safe-area-inset-top,0px) + 50px));
left:12px;
right:12px;
width:auto;
max-width:none;
max-height:calc(100vh - 76px - env(safe-area-inset-bottom,0px));
max-height:calc(100dvh - 76px - env(safe-area-inset-bottom,0px));
overflow:hidden;
padding:12px;
border-radius:22px;
z-index:3100;
transform:translate3d(0,-10px,0) scale(.985);
transform-origin:top center;
box-shadow:0 24px 70px rgba(15,23,42,.30);
}
.top-notices--mobile.is-opening .top-notices__dropdown,
.top-notices--mobile.is-open .top-notices__dropdown{
transform:translate3d(0,0,0) scale(1);
}
.top-notices--mobile.is-closing .top-notices__dropdown{
transform:translate3d(0,-8px,0) scale(.985);
}
.top-notices--mobile .top-notices__list{
max-height:calc(100vh - 164px - env(safe-area-inset-bottom,0px));
max-height:calc(100dvh - 164px - env(safe-area-inset-bottom,0px));
}
.top-notices--mobile .bmp-notice{
grid-template-columns:32px minmax(0,1fr) 28px;
padding:12px;
border-radius:18px;
}
}
@media(prefers-reduced-motion:reduce){
.top-notices__dropdown,
.top-notices--mobile::before{
transition:none;
}
}
/* Мега-меню каталогу — єдине джерело стилів.
ПК: три колонки з рівнями рубрик. Телефон/планшет: повноекранні рівні
з переходом «вглиб» і кнопкою «назад». Пункти компактні. */
body.catalog-mega-open{overflow:hidden;overscroll-behavior:none}
[data-catalog-menu]{
position:fixed;inset:0;z-index:999;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .2s ease, visibility 0s linear .2s}
[data-catalog-menu].is-active{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .2s ease, visibility 0s}
[data-catalog-menu] .catalog-mega__overlay{
position:absolute;inset:0;
background:rgba(15,23,42,.55);
opacity:0;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transition:opacity .2s ease}
[data-catalog-menu].is-active .catalog-mega__overlay{opacity:1}
[data-catalog-menu] .catalog-mega__panel{
position:absolute;left:50%;top:72px;
width:min(1240px,calc(100vw - 36px));
max-height:calc(100dvh - 92px);
padding:20px;
border-radius:22px;
background:#fff;
box-shadow:0 30px 80px rgba(15,23,42,.26);
overflow:hidden;
opacity:0;
transform:translate3d(-50%,12px,0) scale(.99);
transform-origin:top center;
transition:opacity .2s ease, transform .24s cubic-bezier(.22,.8,.22,1)}
[data-catalog-menu].is-active .catalog-mega__panel{
opacity:1;transform:translate3d(-50%,0,0) scale(1)}
[data-catalog-menu] .catalog-mega__close{
position:absolute;right:16px;top:14px;z-index:5;
width:32px;height:32px;
display:grid;place-items:center;
border:0;border-radius:50%;
background:#f1f5f9;color:#475569;
font-size:20px;line-height:1;cursor:pointer;
transition:background .15s ease,color .15s ease}
[data-catalog-menu] .catalog-mega__close:hover{background:#e2e8f0;color:#0f172a}
[data-catalog-menu] .catalog-mega__head{margin:0 44px 14px 0}
[data-catalog-menu] .catalog-mega__head h3{
margin:0;font-size:19px;line-height:1.2;color:#0f172a}
/* ===== Пункт рубрики (єдиний вигляд для дерева і колонок) ===== */
[data-catalog-menu] .mega-tree__link,
[data-catalog-menu] .catalog-menu-column__item{
width:100%;min-width:0;min-height:40px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:9px;
padding:7px 10px;
border:1px solid transparent;
border-radius:10px;
background:transparent;
color:#243044;
text-decoration:none;cursor:pointer;
transition:background .14s ease, color .14s ease}
[data-catalog-menu] .mega-tree__link:hover,
[data-catalog-menu] .mega-tree__link:focus-visible,
[data-catalog-menu] .mega-tree__item.is-open > .mega-tree__link,
[data-catalog-menu] .mega-tree__item.is-hover > .mega-tree__link,
[data-catalog-menu] .catalog-menu-column__item:hover,
[data-catalog-menu] .catalog-menu-column__item:focus-visible,
[data-catalog-menu] .catalog-menu-column__item.is-active{
background:#eef8f2;color:#1f7a4c;outline:none}
[data-catalog-menu] .mega-tree__name,
[data-catalog-menu] .catalog-menu-column__item span{
min-width:0;
font-size:13.5px;font-weight:600;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-catalog-menu] .mega-tree__link small,
[data-catalog-menu] .catalog-menu-column__item small{
flex:none;
color:#94a3b8;font-size:11.5px;font-weight:600;
white-space:nowrap}
[data-catalog-menu] .mega-tree__term-icon{
width:26px;height:26px;min-width:26px;
display:grid;place-items:center;
border-radius:8px;
background:#f1f5f9;color:#64748b;
overflow:hidden}
[data-catalog-menu] .mega-tree__term-icon img{width:100%;height:100%;object-fit:cover;display:block}
[data-catalog-menu] .mega-tree__term-icon svg{width:15px;height:15px;display:block}
[data-catalog-menu] .mega-tree__arrow{
width:18px;height:18px;
display:inline-grid;place-items:center;color:#cbd5e1}
[data-catalog-menu] .mega-tree__arrow svg{width:15px;height:15px;display:block}
[data-catalog-menu] .mega-tree__link:hover .mega-tree__arrow{color:#1f7a4c}
[data-catalog-menu] .mega-tree,
[data-catalog-menu] .mega-tree *{box-sizing:border-box}
[data-catalog-menu] .mega-tree ul,
[data-catalog-menu] .mega-tree__level{list-style:none;margin:0;padding:0}
[data-catalog-menu] .mega-tree__item{min-width:0}
[data-catalog-menu] .mega-tree__level--0{display:grid;align-content:start;gap:2px}
[data-catalog-menu] .mega-tree__submenu{
position:absolute;display:block;opacity:0;visibility:hidden;pointer-events:none}
[data-catalog-menu] .mega-tree__title{
display:flex;align-items:center;
margin:0 0 8px;padding:8px 10px;
border-radius:10px;
background:#f1faf5;color:#1f7a4c;
font-size:13.5px;font-weight:700;text-decoration:none}
[data-catalog-menu] .mega-tree__back{display:none}
[data-catalog-menu] .catalog-menu-columns{display:none}
/* ===== ПК: три колонки ===== */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
[data-catalog-menu] .catalog-mega__panel > .mega-tree{display:none}
[data-catalog-menu] .catalog-mega__panel > .catalog-menu-columns{
--catalog-columns-count:3;
display:grid;
grid-template-columns:repeat(var(--catalog-columns-count),minmax(0,1fr));
gap:10px;
width:100%;
height:min(560px,calc(100dvh - 190px));
padding:10px;
border:1px solid rgba(15,23,42,.08);
border-radius:16px;
background:#f8fafc;
overflow:hidden;
contain:layout paint}
[data-catalog-menu] .catalog-menu-column{
min-width:0;height:100%;
padding:8px;
border:1px solid rgba(15,23,42,.07);
border-radius:14px;
background:#fff;
overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin}
[data-catalog-menu] .catalog-menu-column.is-empty{background:#fcfdfe;opacity:.6}
[data-catalog-menu] .catalog-menu-column__list{display:grid;align-content:start;gap:2px}
}
/* ===== Телефон/планшет: повноекранні рівні ===== */
@media (max-width:1024px), (hover:none), (pointer:coarse){
[data-catalog-menu] .catalog-mega__panel{
left:0;right:0;top:0;bottom:0;
width:100%;max-width:100%;max-height:none;
height:100dvh;
display:flex;flex-direction:column;
padding:16px;
padding-top:max(16px,env(safe-area-inset-top));
padding-bottom:max(16px,env(safe-area-inset-bottom));
border-radius:0;
transform:translate3d(0,16px,0) scale(.99);
transform-origin:bottom center;
touch-action:pan-y;overscroll-behavior:contain}
[data-catalog-menu].is-active .catalog-mega__panel{transform:translate3d(0,0,0) scale(1)}
[data-catalog-menu] .catalog-mega__close{right:16px;top:max(16px,env(safe-area-inset-top))}
[data-catalog-menu] .catalog-mega__head{flex:0 0 auto;margin:0 44px 12px 0}
[data-catalog-menu] .catalog-mega__head h3{font-size:18px}
[data-catalog-menu] .catalog-menu-columns{display:none}
[data-catalog-menu] .catalog-mega__panel > .mega-tree{display:block}
[data-catalog-menu] .mega-tree{
position:relative;
flex:1 1 auto;min-height:0;width:100%;
padding:0;border:0;border-radius:14px;
background:#fff;overflow:hidden;
touch-action:pan-y;overscroll-behavior:contain}
[data-catalog-menu] .mega-tree__level--0,
[data-catalog-menu] .mega-tree__submenu{
position:absolute;inset:0;
width:100%;height:100%;
padding:4px;
overflow-y:auto;overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
scrollbar-gutter:stable}
[data-catalog-menu] .mega-tree__level--0{z-index:1}
[data-catalog-menu] .mega-tree__item{position:static}
[data-catalog-menu] .mega-tree__submenu{
z-index:2;opacity:1;visibility:visible;pointer-events:none;
border:0;box-shadow:none;background:#fff;
transform:translate3d(100%,0,0);
transition:transform .26s cubic-bezier(.22,.8,.22,1);
will-change:transform}
[data-catalog-menu] .mega-tree__item.is-open > .mega-tree__submenu{
pointer-events:auto;transform:translate3d(0,0,0)}
[data-catalog-menu] .mega-tree__item.is-open .mega-tree__item.is-open > .mega-tree__submenu{z-index:3}
[data-catalog-menu] .mega-tree__submenu .mega-tree__level{display:grid;align-content:start;gap:2px}
[data-catalog-menu] .mega-tree__link{
min-height:46px;padding:9px 10px;
border-bottom:1px solid rgba(15,23,42,.05);
border-radius:8px;
-webkit-tap-highlight-color:transparent}
[data-catalog-menu] .mega-tree__name{font-size:14px}
[data-catalog-menu] .mega-tree__back{
display:inline-flex;align-items:center;gap:6px;
margin:0 0 10px;padding:8px 12px 8px 10px;
border:0;border-radius:999px;
background:#f1f5f9;color:#334155;
font-size:13px;font-weight:700;cursor:pointer}
[data-catalog-menu] .mega-tree__back svg{width:16px;height:16px;flex:none}
[data-catalog-menu] .mega-tree__back:hover{background:#e2e8f0}
[data-catalog-menu] .mega-tree__title{margin:0 0 10px}
}
@media (prefers-reduced-motion:reduce){
[data-catalog-menu],
[data-catalog-menu] .catalog-mega__overlay,
[data-catalog-menu] .catalog-mega__panel,
[data-catalog-menu] .mega-tree__submenu{transition:none}
}
/* v2.4.6: related sibling rubrics on single ad */
.ad-other-categories{
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--line);
}
.ad-other-categories h2{
margin:0 0 12px;
font-size:18px;
line-height:1.25;
color:var(--dark);
}
.ad-other-categories__list{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.ad-other-categories__link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:7px 12px;
border:1px solid rgba(36,48,68,.12);
border-radius:999px;
background:#f8fafc;
color:var(--dark-2);
font-size:13px;
font-weight:600;
line-height:1.2;
transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ad-other-categories__link:hover{
border-color:rgba(47,158,98,.28);
background:#eef8f2;
color:#24784b;
transform:translateY(-1px);
}
@media (max-width:640px){
.ad-other-categories{
margin-top:22px;
padding-top:18px;
}
.ad-other-categories__list{
gap:7px;
}
.ad-other-categories__link{
min-height:32px;
padding:7px 10px;
font-size:12px;
}
}
/* авторизация */
/* v2.5.3: ajax auth, two-step registration, password toggles and calm profile validation */
.auth-unified{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(360px,520px);
gap:28px;
align-items:start;
margin:38px 0 70px;
}
.auth-unified__intro{
position:sticky;
top:92px;
padding:34px;
border-radius:32px;
background:linear-gradient(135deg,var(--dark),#26321e);
color:#fff;
box-shadow:var(--shadow);
}
.auth-unified__intro h1{
margin:10px 0 14px;
font-size:clamp(32px,4vw,54px);
line-height:1.02;
color:#fff;
}
.auth-unified__intro p{
max-width:620px;
margin:0;
color:rgba(255,255,255,.76);
font-size:16px;
line-height:1.7;
}
.auth-unified__card{
position:relative;
overflow:hidden;
padding:26px;
border-radius:28px;
background:#fff;
box-shadow:var(--shadow);
border:1px solid rgba(15,23,42,.08);
}
.auth-unified__card.is-auth-loading:before{
content:'';
position:absolute;
inset:0;
z-index:40;
background:rgba(255,255,255,.72);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
.auth-unified__card.is-auth-loading:after{
content:'';
position:absolute;
left:50%;
top:50%;
z-index:41;
width:42px;
height:42px;
margin:-21px 0 0 -21px;
border-radius:50%;
border:4px solid rgba(15,23,42,.12);
border-top-color:var(--accent);
animation:authSpin .72s linear infinite;
}
.auth-form.is-submitting{
pointer-events:none;
filter:saturate(.9) opacity(.72);
}
@keyframes authSpin{
to{transform:rotate(360deg)}
}
.auth-unified__card.is-auth-success{position:relative}
.auth-unified__card.is-auth-success:before{
content:'';
position:absolute;
inset:0;
z-index:40;
background:rgba(255,255,255,.8);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
.auth-success-check{
position:absolute;
left:50%;
top:50%;
z-index:42;
width:64px;
height:64px;
margin:-32px 0 0 -32px;
transform:scale(.5);
opacity:0;
transition:transform .3s cubic-bezier(.2,.9,.3,1.4),opacity .2s ease;
}
.auth-unified__card.is-auth-success .auth-success-check{
transform:scale(1);
opacity:1;
}
.auth-success-check svg{width:100%;height:100%;display:block}
.auth-success-check circle{fill:none;stroke:#2f9e62;stroke-width:3;opacity:.25}
.auth-success-check path{
fill:none;
stroke:#2f9e62;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:40;
stroke-dashoffset:40;
animation:authCheck .42s .14s ease forwards;
}
@keyframes authCheck{to{stroke-dashoffset:0}}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
.auth-unified__card.is-auth-loading:before{
background:rgba(255,255,255,.9);
}
}
.auth-switch{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
padding:5px;
margin-bottom:20px;
border-radius:18px;
background:#f1f5f9;
}
.auth-switch__btn{
display:flex;
justify-content:center;
align-items:center;
min-height:44px;
border:0;
border-radius:14px;
background:transparent;
color:#475569;
font-weight:700;
text-decoration:none;
cursor:pointer;
transition:background .22s ease,color .22s ease,box-shadow .22s ease;
}
.auth-switch__btn.is-active{
background:#fff;
color:var(--dark);
box-shadow:0 12px 24px rgba(15,23,42,.08);
}
.auth-unified.is-step-mode .auth-switch,
.auth-switch[hidden]{
display:none;
}
.auth-panel{
display:grid;
gap:16px;
}
.auth-panel[hidden]{
display:none;
}
.auth-panel h2{
margin:0;
font-size:30px;
line-height:1.15;
}
.auth-form label{
position:relative;
}
.auth-form button[disabled]{
cursor:wait;
opacity:.72;
}
.auth-hp{
position:absolute;
left:-9999px;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.auth-status{
margin-bottom:18px;
padding:12px 14px;
border-radius:16px;
background:#f1f5f9;
color:#334155;
font-weight:700;
line-height:1.45;
}
.auth-status[hidden]{
display:none;
}
.auth-status--success{
background:#ecfdf5;
color:#047857;
}
.auth-status--error{
background:#fff1f2;
color:#be123c;
}
.auth-status--loading{
background:#eff6ff;
color:#1d4ed8;
}
.auth-link{
justify-self:center;
border:0;
background:transparent;
color:var(--accent);
font-weight:700;
cursor:pointer;
padding:4px 0;
}
.auth-back{
justify-self:start;
margin-top:2px;
color:#475569;
}
.auth-back:hover{
color:var(--dark);
}
.auth-recovery-text{
margin:0;
color:#475569;
line-height:1.65;
}
.auth-recovery-text strong{
color:var(--dark);
}
.password-field{
position:relative;
display:block;
}
.password-field input{
padding-right:48px;
}
.password-toggle{
position:absolute;
right:10px;
top:50%;
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
transform:translateY(-50%);
border:0;
border-radius:12px;
background:#f1f5f9;
color:#64748b;
cursor:pointer;
transition:background .18s ease,color .18s ease;
}
.password-toggle:hover,
.password-toggle.is-active{
background:#e2e8f0;
color:var(--dark);
}
.password-toggle svg{
width:20px;
height:20px;
}
.password-toggle path,
.password-toggle circle{
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.password-strength{
display:block;
height:7px;
margin-top:9px;
border-radius:999px;
overflow:hidden;
background:#e2e8f0;
}
.password-strength i{
display:block;
width:0;
height:100%;
border-radius:inherit;
background:#ef4444;
transition:width .22s ease,background .22s ease;
}
.password-strength--medium i{
background:#f59e0b;
}
.password-strength--strong i{
background:#16a34a;
}
.password-strength__text{
display:block;
margin-top:6px;
font-size:13px;
color:#64748b;
}
.password-strength--weak + .password-strength__text{
color:#b91c1c;
}
.password-strength--medium + .password-strength__text{
color:#b45309;
}
.password-strength--strong + .password-strength__text{
color:#047857;
}
.seller-profile-grid{
align-items:start;
}
.profile-email-field,
.profile-phone-field{
position:relative;
}
.profile-email-control{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:center;
}
.profile-email-status{
position:relative;
display:inline-flex;
width:34px;
height:34px;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:help;
}
.profile-email-status svg{
width:28px;
height:28px;
display:block;
}
.profile-email-status circle{
fill:currentColor;
opacity:.14;
}
.profile-email-status path{
fill:none;
stroke:currentColor;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
.profile-email-status.is-confirmed{
color:#16a34a;
}
.profile-email-status.is-unconfirmed{
color:#dc2626;
}
.profile-email-status:after{
content:attr(data-tooltip);
position:absolute;
right:0;
bottom:calc(100% + 10px);
width:min(280px,70vw);
padding:10px 12px;
border-radius:12px;
background:#0f172a;
color:#fff;
font-size:12px;
line-height:1.35;
font-weight:600;
opacity:0;
transform:translateY(4px);
pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
z-index:20;
}
.profile-email-status:hover:after,
.profile-email-status:focus:after{
opacity:1;
transform:translateY(0);
}
.profile-phone-hint{
display:none;
margin-top:6px;
color:#64748b;
font-size:13px;
line-height:1.35;
}
.profile-phone-field:focus-within .profile-phone-hint{
display:block;
}
.profile-phone-field .field-error{
position:absolute;
left:0;
right:0;
top:100%;
margin-top:4px;
padding:8px 10px;
border-radius:12px;
background:#fff1f2;
color:#be123c;
box-shadow:0 12px 28px rgba(185,28,28,.14);
z-index:12;
}
.profile-phone-field.is-invalid{
z-index:5;
}
@media(max-width:960px){
.auth-unified{
grid-template-columns:1fr;
margin:24px 0 50px;
}
.auth-unified__intro{
position:relative;
top:auto;
}
}
@media(max-width:640px){
.auth-unified__intro,
.auth-unified__card{
padding:22px;
border-radius:24px;
}
.profile-email-status:after{
right:-8px;
}
}
/* cookie и жалобы */
/* v2.6.7 — cookie notice and scroll-to-top */
.cookie-notice{
position:fixed;
left:24px;
right:24px;
bottom:22px;
z-index:1200;
max-width:960px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 18px 16px 20px;
border:1px solid rgba(15,23,42,.1);
border-radius:22px;
background:rgba(255,255,255,.94);
box-shadow:0 22px 70px rgba(15,23,42,.18);
color:#0f172a;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(22px) scale(.985);
transition:opacity .28s ease, visibility .28s ease, transform .28s ease;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.cookie-notice.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0) scale(1);
}
.cookie-notice.is-hiding{
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(18px) scale(.985);
}
.cookie-notice__text{
font-size:14px;
line-height:1.55;
color:#334155;
}
.cookie-notice__text a{
color:var(--accent);
font-weight:700;
text-decoration:none;
border-bottom:1px solid rgba(238,57,55,.28);
}
.cookie-notice__text a:hover{
border-bottom-color:currentColor;
}
.cookie-notice__btn{
flex:0 0 auto;
min-height:42px;
padding:0 20px;
border:0;
border-radius:999px;
background:var(--accent);
color:#fff;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 24px rgba(238,57,55,.22);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cookie-notice__btn:hover{
transform:translateY(-1px);
box-shadow:0 16px 30px rgba(238,57,55,.28);
}
.scroll-top{
position:fixed;
right:24px;
bottom:112px;
z-index:1190;
width:52px;
height:52px;
display:grid;
place-items:center;
border:1px solid rgba(15,23,42,.1);
border-radius:50%;
background:rgba(255,255,255,.94);
color:var(--accent);
box-shadow:0 18px 46px rgba(15,23,42,.16);
cursor:pointer;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(14px) scale(.88);
transition:opacity .24s ease, visibility .24s ease, transform .24s ease, box-shadow .2s ease, background .2s ease;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.scroll-top.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0) scale(1);
}
.scroll-top:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 22px 54px rgba(15,23,42,.2);
}
.scroll-top svg{
width:26px;
height:26px;
display:block;
fill:currentColor;
}
@media (max-width:640px){
.cookie-notice{
left:12px;
right:12px;
bottom:12px;
flex-direction:column;
align-items:stretch;
padding:15px;
border-radius:18px;
}
.cookie-notice__btn{
width:100%;
}
.scroll-top{
right:14px;
bottom:128px;
width:46px;
height:46px;
}
.scroll-top svg{
width:23px;
height:23px;
}
}
@media (prefers-reduced-motion:reduce){
.cookie-notice,
.cookie-notice__btn,
.scroll-top{
transition:none;
}
}
/* v2.7.2 — report modal flow */
.modal--report{z-index:1300}
.modal__box--report{width:min(620px,100%);padding:0;overflow:hidden}
.report-modal{position:relative;padding:26px;color:#0f172a}
.report-modal__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;padding-right:44px}
.report-modal__head h3{margin:0;font-size:20px;font-weight:600;line-height:1.2;color:#0f172a}
.report-modal__head p{margin:0;color:#64748b;line-height:1.45;font-size:14px}
.report-modal__icon{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff4e8;color:#f97316}
.report-modal__icon svg{width:22px;height:22px;fill:currentColor}
.report-form{position:relative}
.report-form.is-loading:before{content:"";position:absolute;inset:-10px;z-index:10;border-radius:22px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.report-form.is-loading:after{content:"";position:absolute;left:50%;top:50%;z-index:11;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:999px;border:4px solid rgba(238,57,55,.18);border-top-color:var(--accent);animation:bmpReportSpin .72s linear infinite}
@keyframes bmpReportSpin{to{transform:rotate(360deg)}}
.report-form__trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.report-step{display:none}
.report-step.is-active{display:block}
.report-step[hidden]{display:none!important}
.report-step__title{font-weight:500;font-size:14px;margin:0 0 12px;color:#64748b}
.report-reasons{display:grid;gap:8px}
.report-reason{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;color:#111827;padding:13px 14px;text-align:left;font-weight:500;cursor:pointer;transition:border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease}
.report-reason:hover,.report-reason.is-selected{border-color:rgba(238,57,55,.38);background:#fff7f6}
.report-reason svg{width:18px;height:18px;fill:#94a3b8;flex:0 0 auto;transition:fill .18s ease, transform .18s ease}
.report-reason:hover svg,.report-reason.is-selected svg{fill:var(--accent);transform:translateX(2px)}
.report-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#64748b;font-weight:500;cursor:pointer;padding:0;margin:0 0 16px;transition:color .18s ease}
.report-back:hover{color:var(--accent)}
.report-grid{display:grid;grid-template-columns:1fr;gap:0}
.report-form label{position:relative;display:grid;gap:7px;width:100%;margin:0 0 12px;color:#475569;font-weight:500;font-size:13px}
.report-form input,.report-form textarea{width:100%;max-width:100%;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:12px 13px;color:#0f172a;outline:none;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.report-form textarea{resize:vertical;min-height:118px}
.report-form input:focus,.report-form textarea:focus{border-color:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.16)}
.report-form input.is-invalid,.report-form textarea.is-invalid{border-color:#dc2626;background:#fff7f7}
.report-form input.is-invalid:focus,.report-form textarea.is-invalid:focus{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.10)}
.report-form label .field-error{display:block;margin-top:7px;color:#b91c1c;font-size:13px;line-height:1.35;font-weight:500}
.report-form label .field-error[hidden]{display:none}
.report-form .form-error{border-radius:14px;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:10px 12px;font-weight:500;font-size:13px;margin:0 0 12px}
.report-success{text-align:center;padding:18px 8px 8px}
.report-success__icon{width:78px;height:78px;border-radius:26px;display:grid;place-items:center;margin:0 auto 15px;background:#eaf8ef;color:#16a34a}
.report-success__icon svg{width:48px;height:48px;fill:currentColor}
.report-success h3{font-size:21px;font-weight:600;margin:0 0 8px;color:#0f172a}
.report-success p{margin:0 auto;max-width:420px;color:#64748b;line-height:1.55;font-weight:400}
@media (max-width:640px){.modal__box--report{max-height:calc(100dvh - 24px);overflow:auto;border-radius:22px}.report-modal{padding:22px 16px}.report-modal__head{padding-right:38px}.report-reason{padding:12px}}
@media (prefers-reduced-motion:reduce){.report-reason,.report-form input,.report-form textarea{transition:none}.report-form.is-loading:after{animation:none}}
/* недоступные объявления */
/* v2.8.3 dynamic ad fields: load only fields for selected rubric */
.bmp-dynamic-fields,
.bmp-admin-dynamic-fields{
position:relative;
min-height:0;
}
.bmp-dynamic-fields.is-loading,
.bmp-admin-dynamic-fields.is-loading{
pointer-events:none;
}
.bmp-dynamic-fields.is-loading::after,
.bmp-admin-dynamic-fields.is-loading::after{
content:"";
position:absolute;
inset:-4px;
border-radius:16px;
background:rgba(255,255,255,.62);
z-index:2;
}
.bmp-dynamic-fields__loader{
position:absolute;
left:50%;
top:50%;
z-index:3;
transform:translate(-50%,-50%);
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px;
border-radius:50%;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 12px 28px rgba(15,23,42,.12);
}
.bmp-dynamic-fields__loader[hidden]{display:none!important}
.bmp-dynamic-fields__loader .bmp-inline-spinner{width:26px;height:26px;border-width:3px}
.bmp-dynamic-fields__loader span:not(.bmp-inline-spinner){
width:16px;
height:16px;
border-radius:50%;
border:2px solid #dbe3ea;
border-top-color:#1f9d55;
animation:bmpSpin .75s linear infinite;
}
.bmp-dynamic-fields__empty{
grid-column:1/-1;
padding:14px 16px;
border:1px dashed #cfd8e3;
border-radius:14px;
background:#f8fafc;
color:#64748b;
font-size:14px;
}
.bmp-dynamic-fields__empty.is-error{
border-color:#f2b8b8;
background:#fff7f7;
color:#b91c1c;
}
.bmp-dynamic-field{
display:block;
width:100%;
}
.bmp-dynamic-field__label{
display:block;
margin-bottom:7px;
}
.bmp-dynamic-field__label em{
color:#dc2626;
font-style:normal;
font-weight:800;
}
.bmp-dynamic-field .bmp-dynamic-field__input,
.bmp-dynamic-field input,
.bmp-dynamic-field select,
.bmp-dynamic-field textarea{
width:100%;
}
.bmp-dynamic-field.is-invalid .field-error{
display:block;
}
/* v2.8.4 — unavailable / archived ad single page */
.ad-unavailable-banner{
display:flex;
align-items:flex-start;
gap:14px;
margin:0 0 22px;
padding:18px 20px;
border-radius:24px;
border:1px solid rgba(238,57,55,.18);
background:linear-gradient(135deg, rgba(238,57,55,.08), rgba(255,255,255,.96));
box-shadow:0 18px 50px rgba(8,19,15,.08);
}
.ad-unavailable-banner--owner{
border-color:rgba(245,158,11,.25);
background:linear-gradient(135deg, rgba(245,158,11,.1), rgba(255,255,255,.96));
}
.ad-unavailable-banner__icon{
width:42px;
height:42px;
flex:0 0 42px;
border-radius:16px;
display:grid;
place-items:center;
color:#fff;
background:linear-gradient(135deg, var(--danger), #ff7a45);
box-shadow:0 12px 28px rgba(238,57,55,.24);
}
.ad-unavailable-banner--owner .ad-unavailable-banner__icon{
background:linear-gradient(135deg, #f59e0b, #ff7a45);
box-shadow:0 12px 28px rgba(245,158,11,.22);
}
.ad-unavailable-banner__icon svg{
width:22px;
height:22px;
fill:currentColor;
}
.ad-unavailable-banner strong{
display:block;
margin:1px 0 5px;
color:var(--dark);
font-size:18px;
line-height:1.2;
}
.ad-unavailable-banner p{
margin:0;
color:var(--muted);
line-height:1.45;
}
.ad-single--public-unavailable .report-link{
display:none;
}
.contact-card--limited{
display:grid;
gap:14px;
}
.contact-card--limited .price-big{
margin-bottom:0;
}
.ad-single--unavailable .ad-gallery{
position:relative;
}
@media(max-width:760px){
.ad-unavailable-banner{
padding:15px;
border-radius:20px;
}
.ad-unavailable-banner__icon{
width:38px;
height:38px;
flex-basis:38px;
border-radius:14px;
}
.ad-unavailable-banner strong{
font-size:16px;
}
}
.contact-card__notice{
padding:12px 14px;
border-radius:16px;
background:var(--soft);
color:var(--muted);
line-height:1.4;
font-size:14px;
}
/* v2.8.5 — unavailable ad: related active ads before status notice */
.ad-unavailable-related{
margin-bottom:26px;
}
.ad-unavailable-related .section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.ad-unavailable-related .section-head h2{
font-size:clamp(26px,3vw,38px);
}
.ad-unavailable-related__grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1100px){
.ad-unavailable-related__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:640px){
.ad-unavailable-related .section-head{
align-items:flex-start;
flex-direction:column;
}
.ad-unavailable-related__grid{
grid-template-columns:1fr;
}
}
/* Місце оголошення під заголовком: «Місто, Район» з гео-піном */
.ad-single-location{display:flex;align-items:center;gap:7px;margin:8px 0 2px;color:#5b6774;font-size:14.5px;line-height:1.35}
.ad-single-location svg{width:17px;height:17px;fill:#2f9e62;flex:none}
/* Видалене/архівне оголошення: блюриться лише вміст сцени (stage-inner);
плашка «Видалено» — сусід поза блюром. */
.ad-gallery--removed .ad-gallery__stage{position:relative}
.ad-gallery--removed .ad-gallery__stage-inner{filter:blur(8px) grayscale(.25)}
.ad-removed-badge--gallery{position:absolute;top:14px;left:14px;z-index:4;font-size:13px;padding:6px 14px}
/* виды каталога */
/* v3.0.25: compact catalog view toggle, desktop row cards and mobile vertical list cards */
.catalog-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.catalog-toolbar__count{
flex:0 0 auto;
}
.catalog-toolbar__form{
flex:1 1 auto;
justify-content:flex-end;
}
.catalog-view-toggle{
flex:0 0 auto;
margin-left:0;
width:46px;
height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(15,23,42,.12);
border-radius:16px;
background:#fff;
color:#111827;
cursor:pointer;
box-shadow:0 10px 26px rgba(15,23,42,.08);
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}
.catalog-view-toggle:hover,
.catalog-view-toggle:focus-visible{
transform:translateY(-1px);
border-color:rgba(238,57,55,.34);
color:var(--accent);
box-shadow:0 14px 32px rgba(238,57,55,.14);
outline:none;
}
.catalog-view-toggle__icon{
display:none;
width:22px;
height:22px;
gap:4px;
}
.catalog-view-toggle__icon i{
display:block;
background:currentColor;
border-radius:5px;
}
.catalog-view-toggle__icon--grid{
grid-template-columns:repeat(2,1fr);
}
.catalog-view-toggle__icon--list{
grid-template-columns:1fr;
}
.catalog-view-toggle__icon--list i{
height:8px;
border-radius:999px;
}
.catalog-view-toggle.is-grid .catalog-view-toggle__icon--grid,
.catalog-view-toggle:not(.is-list) .catalog-view-toggle__icon--grid{
display:grid;
}
.catalog-view-toggle.is-list .catalog-view-toggle__icon--grid{
display:none;
}
.catalog-view-toggle.is-list .catalog-view-toggle__icon--list{
display:grid;
}
.catalog-layout.catalog-view--grid .ads-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.catalog-layout.catalog-view--list .ads-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.catalog-layout.catalog-view--list .ad-card{
display:grid;
grid-template-columns:minmax(150px,38%) 1fr;
align-items:stretch;
min-height:190px;
}
.catalog-layout.catalog-view--list .ad-card__image{
height:100%;
min-height:190px;
aspect-ratio:auto;
border-radius:0;
}
.catalog-layout.catalog-view--list .ad-card__body{
display:flex;
flex-direction:column;
min-width:0;
padding:18px;
}
.catalog-layout.catalog-view--list .ad-card__meta{
align-items:flex-start;
}
.catalog-layout.catalog-view--list .ad-card h3{
margin:10px 0 8px;
}
.catalog-layout.catalog-view--list .ad-card__info{
margin-top:0;
}
.catalog-layout.catalog-view--list .ad-card__bottom{
margin-top:auto;
}
@media(max-width:1100px){
.catalog-layout.catalog-view--grid .ads-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.catalog-layout.catalog-view--list .ads-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.catalog-toolbar{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
}
.catalog-toolbar__form{
grid-column:1 / -1;
width:100%;
order:3;
}
.catalog-view-toggle{
width:44px;
height:44px;
justify-self:end;
}
.catalog-layout.catalog-view--grid .ads-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.catalog-layout.catalog-view--list .ads-grid{
grid-template-columns:1fr;
}
.catalog-layout.catalog-view--list .ad-card{
display:flex;
flex-direction:column;
min-height:0;
}
.catalog-layout.catalog-view--list .ad-card__image{
width:100%;
height:auto;
min-height:0;
aspect-ratio:4 / 3;
border-radius:0;
}
.catalog-layout.catalog-view--list .ad-card__body{
padding:14px;
}
.catalog-layout.catalog-view--list .ad-card h3{
font-size:16px;
margin:8px 0 6px;
}
.catalog-layout.catalog-view--list .ad-card__meta,
.catalog-layout.catalog-view--list .ad-card__info{
font-size:12px;
}
.catalog-layout.catalog-view--list .card-price{
font-size:16px;
}
}
.profile-email-control--masked input{
letter-spacing:.02em;
}
.profile-security-card{
margin-top:18px;
overflow:hidden;
}
.account-head--compact{
margin-bottom:16px;
}
.account-head--compact h3{
margin:0;
}
.profile-security-choice{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.profile-security-choice__button{
width:100%;
min-height:92px;
border:1px solid rgba(15,23,42,.1);
border-radius:20px;
background:linear-gradient(180deg,#fff,rgba(248,250,252,.88));
box-shadow:0 14px 34px rgba(15,23,42,.06);
display:flex;
align-items:center;
gap:14px;
padding:16px;
text-align:left;
cursor:pointer;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.profile-security-choice__button:hover{
transform:translateY(-1px);
border-color:rgba(238,57,55,.35);
box-shadow:0 18px 42px rgba(15,23,42,.1);
}
.profile-security-choice__button:disabled,
.profile-security-choice__button--disabled{
cursor:not-allowed;
opacity:.68;
background:#f8fafc;
box-shadow:none;
}
.profile-security-choice__button:disabled:hover,
.profile-security-choice__button--disabled:hover{
transform:none;
border-color:rgba(15,23,42,.1);
box-shadow:none;
}
.profile-security-choice__icon{
width:44px;
height:44px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--accent);
background:rgba(238,57,55,.08);
flex:0 0 auto;
}
.profile-security-choice__icon svg{
width:23px;
height:23px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.profile-security-choice__button strong{
display:block;
color:var(--dark);
font-size:15px;
line-height:1.2;
margin-bottom:4px;
}
.profile-security-choice__button em{
display:block;
color:var(--muted);
font-style:normal;
font-size:13px;
line-height:1.35;
}
.profile-security-panel{
border:1px solid rgba(15,23,42,.1);
border-radius:22px;
padding:18px;
background:linear-gradient(180deg,#fff,rgba(248,250,252,.9));
box-shadow:0 18px 48px rgba(15,23,42,.07);
}
.profile-security-panel__head{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:16px;
}
.profile-security-panel__head h4{
margin:0 0 4px;
color:var(--dark);
}
.profile-security-panel__head p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.profile-security-panel__badge{
width:30px;
height:30px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--accent);
color:#fff;
font-weight:800;
font-size:13px;
flex:0 0 auto;
}
.profile-security-code-form,
.profile-security-final-form{
display:grid;
gap:14px;
}
.profile-security-code{
max-width:180px;
text-align:center;
letter-spacing:.28em;
font-size:22px;
font-weight:800;
}
.profile-security-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.profile-security-resend{
margin-top:12px;
}
.profile-security-resend .auth-link{
padding:0;
}
@media (max-width: 760px){
.profile-security-choice{grid-template-columns:1fr;}
.profile-security-choice__button{min-height:82px;}
.profile-security-panel{padding:16px;}
}
/* Шапка каталогу без окремого page-hero: крихти + заголовок над рубриками */
.catalog-head{margin-bottom:16px}
.catalog-head h1{margin:6px 0 0;font-size:26px;line-height:1.2}
.catalog-head [data-catalog-breadcrumbs]:empty{display:none}
/* Видалене оголошення (в історії переглядів/каталозі): звичайна картка,
лише фото трохи блюриться + плашка «Видалено». Посилання лишаються робочими. */
.ad-card--removed .ad-card__image img{filter:blur(4px) grayscale(.2);transform:scale(1.05)}
.ad-removed-badge{
position:absolute;top:10px;left:10px;z-index:2;
display:inline-flex;align-items:center;
padding:5px 12px;border-radius:8px;
background:rgba(232,72,60,.95);color:#fff;
font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
box-shadow:0 6px 18px rgba(15,23,42,.25);white-space:nowrap}
/* На телефоні прибираємо hover-ефекти й тінь картки:
тінь усе одно «зрізається» через overflow:hidden контейнерів/слайдера. */
@media(hover:none),(max-width:759px){
.ad-card{box-shadow:none}
.ad-card:hover{transform:none;box-shadow:none}
.ad-card:hover .ad-card__image img{transform:none}
.ad-card__fav:hover{transform:none}
}
/* безопасность профиля и избранное */
.profile-security-field{
display:grid;
gap:8px;
font-weight:700;
color:var(--dark);
}
.profile-security-field input{
width:100%;
min-height:48px;
border:1px solid rgba(15,23,42,.12);
border-radius:14px;
background:#fff;
padding:12px 14px;
color:var(--dark);
font:inherit;
font-weight:600;
outline:none;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.profile-security-field input:focus{
border-color:rgba(238,57,55,.45);
box-shadow:0 0 0 4px rgba(238,57,55,.1);
}
.profile-security-field.is-invalid input,
.profile-security-field input.is-invalid{
border-color:rgba(238,57,55,.55);
box-shadow:0 0 0 4px rgba(238,57,55,.1);
}
.profile-security-field .field-error{
color:#b42318;
font-size:12px;
font-weight:600;
line-height:1.35;
}
.profile-security-field.is-invalid>.field-error:not([hidden]),
.profile-security-field input.is-invalid~.field-error:not([hidden]){
display:block;
}
.profile-security-field--code{
max-width:240px;
}
.profile-security-code{
width:190px !important;
max-width:100%;
text-align:center;
letter-spacing:.32em;
font-size:24px !important;
font-weight:900 !important;
padding-left:22px !important;
}
.profile-security-final-form .password-field{
width:100%;
display:block;
position:relative;
}
.profile-security-final-form .password-field input{
padding-right:52px;
}
.profile-security-final-form .password-toggle{
position:absolute;
top:50%;
right:8px;
transform:translateY(-50%);
}
.profile-security-panel[hidden],
.profile-security-choice[hidden]{
display:none !important;
}
.profile-security-card form.is-submitting{
opacity:.72;
pointer-events:none;
}
.profile-security-resend{
display:inline-flex;
margin-top:12px;
border:0;
background:none;
cursor:pointer;
}
/* ======================================================================
Обране / авторизація: іконки шапки, сердечко картки, видалені картки,
підписка на зниження ціни (iOS-перемикач). Стан користувача малює JS —
безпечно для кешованих .html сторінок.
====================================================================== */
/* Шапка topbar__left — іконки + лічильник обраного */
.topbar__left{
display:flex;
align-items:center;
gap:18px}
.topbar__icon-link{
position:relative;
display:inline-flex;
align-items:center;
gap:6px;
color:inherit;
text-decoration:none}
.topbar__icon-link svg{
width:18px;
height:18px;
display:block}
.topbar__icon-label{
font-size:13px}
.topbar__fav-count{
position:absolute;
top:-7px;
left:9px;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:9px;
background:#e8483c;
color:#fff;
font-size:11px;
font-weight:700;
line-height:16px;
text-align:center}
/* Сердечко на картці каталогу */
.ad-card{
position:relative}
.ad-card__fav{
position:absolute;
top:10px;
right:10px;
z-index:3;
width:34px;
height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border:none;
border-radius:50%;
background:rgba(255,255,255,.92);
box-shadow:0 2px 8px rgba(15,23,42,.16);
color:#64748b;
cursor:pointer;
transition:transform .12s ease,color .12s ease}
.ad-card__fav svg{
width:19px;
height:19px;
display:block}
.ad-card__fav:hover{
transform:scale(1.08);
color:#e8483c}
.ad-card__fav.is-active{
color:#e8483c}
.ad-card__fav.is-active svg path{
fill:#e8483c;
stroke:#e8483c}
/* Кнопка «В обране» на сторінці оголошення в активному стані */
.btn[data-favorite].is-active{
border-color:#e8483c;
color:#e8483c}
/* Видалене оголошення в обраному: звичайна картка, фото блюриться + плашка */
.account-favorite-card__image--removed{position:relative;overflow:hidden}
.account-favorite-card__image--removed img{filter:blur(5px) grayscale(.25);transform:scale(1.06)}
/* Блок підписки на зниження ціни + iOS-перемикач */
.price-drop-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin:0 0 18px;
padding:16px 18px;
border:1px solid #e2e8f0;
border-radius:14px;
background:#f8fafc}
.price-drop-box__text strong{
display:block;
margin-bottom:4px;
font-size:15px}
.price-drop-box__text p{
margin:0;
color:#64748b;
font-size:13px;
line-height:1.5}
.price-drop-box__text a{
color:#2f9e62}
.ios-toggle{
display:inline-flex;
align-items:center;
gap:10px;
padding:0;
border:none;
background:none;
cursor:pointer;
flex-shrink:0}
.ios-toggle__track{
position:relative;
width:48px;
height:28px;
border-radius:999px;
background:#cbd5e1;
transition:background .2s ease;
flex-shrink:0}
.ios-toggle__thumb{
position:absolute;
top:3px;
left:3px;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(15,23,42,.3);
transition:transform .2s ease}
.ios-toggle.is-on .ios-toggle__track{
background:#2f9e62}
.ios-toggle.is-on .ios-toggle__thumb{
transform:translateX(20px)}
.ios-toggle__label{
min-width:24px;
font-size:13px;
font-weight:600;
color:#475569;
text-align:left}
@media (max-width:560px){
.price-drop-box{
flex-direction:column;
align-items:flex-start}
.topbar__icon-label{
display:none}
}
/* Компактне сердечко на сторінці оголошення */
.single-fav{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff;
color:#64748b;
cursor:pointer;
transition:color .12s ease,border-color .12s ease}
.single-fav svg{
width:22px;
height:22px;
display:block}
.single-fav:hover{
color:#e8483c;
border-color:#f0b3ad}
.single-fav.is-active{
color:#e8483c;
border-color:#e8483c}
.single-fav.is-active svg path{
fill:#e8483c;
stroke:#e8483c}
/* iOS-перемикач на чекбоксі (форма, без тексту) — напр. автоперепублікація */
.ios-switch{
position:relative;
display:inline-flex;
flex-shrink:0;
cursor:pointer}
.ios-switch input{
position:absolute;
width:0;
height:0;
opacity:0}
.ios-switch__track{
position:relative;
width:48px;
height:28px;
border-radius:999px;
background:#cbd5e1;
transition:background .2s ease}
.ios-switch__thumb{
position:absolute;
top:3px;
left:3px;
width:22px;
height:22px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(15,23,42,.3);
transition:transform .2s ease}
.ios-switch input:checked + .ios-switch__track{
background:#2f9e62}
.ios-switch input:checked + .ios-switch__track .ios-switch__thumb{
transform:translateX(20px)}
.ios-switch input:focus-visible + .ios-switch__track{
box-shadow:0 0 0 3px rgba(47,158,98,.3)}
/* Ряд «Автоматична перепублікація»: текст ліворуч, перемикач праворуч */
.checkline--toggle{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px}
.checkline--toggle .checkline__text{
flex:1}
.checkline--toggle .checkline__text small{
display:block;
margin-top:2px;
color:#64748b}
/* Сторінка /favorites/ */
.favorites-page__loader{
padding:24px;
text-align:center;
color:#64748b}
/* Сердечко обраного поряд із заголовком оголошення */
.ad-single-head__row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px}
.ad-single-head__row h1{
margin:0}
.single-fav--head{
flex-shrink:0;
margin-top:2px}
/* Лічильник обраного в мобільному меню (інлайн, а не бейдж-кружок) */
.topbar-mobile__fav-link{
display:inline-flex;
align-items:center;
gap:8px}
.topbar-mobile__fav-link .topbar__fav-count{
position:static;
top:auto;
left:auto}
/* «Завантажити ще» в обраному */
.favorites-more{
display:flex;
justify-content:center;
margin-top:20px}
.favorites-more[hidden]{
display:none}
.favorites-more__btn{
min-width:200px}
.favorites-more__btn:disabled{
opacity:.6;
cursor:default}
/* Лоадер обраного: фірмовий круг сайту замість тексту */
.favorites-page__loader{display:flex;justify-content:center;padding:26px 0}
.favorites-page__loader[hidden]{display:none}
.favorites-page__loader::after{content:"";width:40px;height:40px;border-radius:50%;border:4px solid rgba(47,158,98,.18);border-top-color:#2f9e62;animation:bmpCatalogLoaderSpin .62s linear infinite}
/* рейтинг и отзывы */
/* ===== Рейтинг та відгуки ===== */
.bmp-stars{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.bmp-star svg{width:16px;height:16px;display:block;fill:#d1d5db}
.bmp-star.is-full svg{fill:#f59e0b}
.bmp-star.is-half svg{fill:#f59e0b;opacity:.55}
/* Блок рейтингу в картці продавця (сторінка оголошення) */
.seller-rating{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7;display:flex;flex-direction:column;gap:8px}
.seller-rating__title{font-size:13px;font-weight:700;color:#475569}
.seller-rating__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seller-rating__score{font-size:20px;font-weight:800;color:#0f172a}
.seller-rating__count{font-size:13px;color:#64748b}
.seller-rating__empty{font-size:14px;color:#64748b}
.seller-rating .bmp-star svg{width:18px;height:18px}
/* Hero продавця: рейтинг + останній вхід */
.seller-hero__rating{display:flex;align-items:center;gap:8px;margin-top:10px}
.seller-hero__rating strong{font-size:18px}
.seller-hero__rating span{color:#64748b;font-size:13px}
.seller-hero__rating .bmp-star svg{width:18px;height:18px}
.seller-hero__lastlogin{display:flex;align-items:center;gap:6px;margin-top:8px;color:#64748b;font-size:13px}
.seller-hero__lastlogin-icon{display:inline-flex;width:16px;height:16px;color:#94a3b8}
.seller-hero__lastlogin-icon svg{width:16px;height:16px;display:block}
/* Таби продавця */
/* Картка відгуку */
.reviews-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.review-card{background:#fff;border:1px solid #e6e9ef;border-radius:16px;padding:16px}
.review-card__head{display:flex;align-items:center;gap:12px}
.review-card__avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#f1f5f9}
.review-card__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.review-card__name{display:block;font-size:15px}
.review-card__sub{display:flex;align-items:center;gap:8px;margin-top:2px}
.review-card__date{color:#94a3b8;font-size:13px}
.review-card__text{margin:12px 0 0;line-height:1.5;color:#1f2937}
.review-card__photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.review-card__photo{width:84px;height:84px;border-radius:10px;overflow:hidden;display:block}
.review-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Форма відгуку */
.review-form{background:#fff;border:1px solid #e6e9ef;border-radius:18px;padding:18px;margin-bottom:18px}
.review-form h3{margin:0 0 12px}
.review-form__auth a{color:#e8483c;font-weight:600}
.review-form__stars{display:inline-flex;gap:4px;margin-bottom:10px}
.review-form__star{background:none;border:0;padding:2px;cursor:pointer;line-height:0}
.review-form__star svg{width:30px;height:30px;fill:#d1d5db;transition:fill .12s ease}
.review-form__star.is-on svg{fill:#f59e0b}
.review-form__text{width:100%;border:1px solid #d8dee9;border-radius:12px;padding:12px;font:inherit;resize:vertical}
.review-form__photos{margin-top:10px}
.review-form__photos-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px dashed #cbd5e1;border-radius:10px;cursor:pointer;color:#475569;font-weight:600;font-size:14px}
.review-form__photos-btn:hover{border-color:#94a3b8}
.review-form__previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.review-form__preview{width:72px;height:72px;object-fit:cover;border-radius:10px}
.review-form__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.review-form__note{color:#94a3b8;font-size:13px}
.review-form__msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:14px}
.review-form__msg.is-ok{background:#e7f7ed;color:#157347}
.review-form__msg.is-error{background:#fdecec;color:#b42318}
.review-form--self p{color:#64748b;margin:0}
/* Іконки в табах продавця */
.seller-tab__icon{width:18px;height:18px;display:block;flex-shrink:0}
.seller-tab__icon svg,.seller-tab__icon{color:currentColor}
/* Статус відгуку */
.review-status{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.review-status--pending{background:#fff7e6;color:#9a5b00}
.review-status--published{background:#e7f7ed;color:#157347}
.review-card__head{position:relative}
/* Власний відгук на модерації — лёгкий акцент */
.reviews-list--mine{margin-bottom:14px}
.reviews-list--mine .review-card{border-color:#f6c977;background:#fffdf8}
/* Іконка в кнопці «Додати фото» */
.review-form__photos-btn svg{width:18px;height:18px;display:block;color:#64748b}
/* Акордеон форми відгуку */
.review-accordion{margin-bottom:18px}
.review-accordion__toggle{display:inline-flex;align-items:center;gap:8px}
.review-accordion__chevron{width:18px;height:18px;display:block;transition:transform .25s ease}
.review-accordion__toggle[aria-expanded="true"] .review-accordion__chevron{transform:rotate(180deg)}
.review-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .32s ease,opacity .26s ease,margin-top .32s ease}
.review-accordion__body.is-open{grid-template-rows:1fr;opacity:1;margin-top:12px}
.review-accordion__inner{overflow:hidden;min-height:0}
.review-accordion__body .review-form{margin-bottom:0}
.review-form__processing{color:#64748b;font-size:14px;padding:10px 2px;display:inline-block}
/* Плавне відкриття/перемикання лайтбокса фото у відгуках */
.bmp-review-lightbox{opacity:0;transition:opacity .26s ease}
.bmp-review-lightbox.is-open{opacity:1}
.bmp-review-lightbox .gallery-lightbox__panel{transform:scale(.94);transition:transform .3s cubic-bezier(.2,.85,.25,1)}
.bmp-review-lightbox.is-open .gallery-lightbox__panel{transform:scale(1)}
.bmp-review-lightbox .gallery-lightbox__image{transition:opacity .22s ease}
.bmp-review-lightbox .gallery-lightbox__image.is-switching{opacity:0}
.review-card__photo{cursor:zoom-in}
/* Підказка формату фото у формі відгуку */
.review-form__hint{display:inline-block;margin-left:10px;color:#94a3b8;font-size:12px;vertical-align:middle}
/* Згода з умовами у формі реєстрації */
.auth-agree{align-items:flex-start;font-size:13px;line-height:1.45;margin:2px 0 6px;flex-wrap:wrap}
.auth-agree>input[type="checkbox"]{margin-top:2px;flex-shrink:0}
.auth-agree a{color:var(--accent);text-decoration:underline}
.auth-agree .field-error{flex-basis:100%;margin:2px 0 0}
.auth-agree.is-invalid>input[type="checkbox"]{outline:2px solid #e5484d;outline-offset:1px}
/* Кнопка повторного надсилання коду під час відліку */
.profile-security-resend.is-waiting,
.profile-security-resend[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
/* чаты и диалоги */
/* ===================== Чати ===================== */
.account-head--messages{margin-bottom:14px}
.chat-page{display:grid;grid-template-columns:330px 1fr;gap:0;border:1px solid #e6e9ef;border-radius:18px;overflow:hidden;background:#fff;height:min(72vh,720px);min-height:460px}
.chat-sidebar{border-right:1px solid #eef2f7;display:flex;flex-direction:column;min-height:0;background:#fbfcfe}
.chat-list{display:block;overflow-y:auto;min-height:0;flex:1}
.chat-list__item{display:flex;gap:12px;align-items:center;height:72px;padding:0 14px;border-bottom:1px solid #f1f4f9;text-decoration:none;color:inherit;transition:background .15s}
.chat-list__item:hover{background:#f4f7fb}
.chat-list__item.is-active{background:#eef4ff}
.chat-list__avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#e8edf3;display:block}
.chat-list__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-list__body{min-width:0;flex:1}
.chat-list__top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.chat-list__top strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list__time{color:#98a2b3;font-size:12px;flex-shrink:0}
.chat-list__bottom{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:2px}
.chat-list__preview{color:#64748b;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.chat-list__item.has-unread .chat-list__preview{color:#0f172a;font-weight:600}
.chat-list__badge{background:var(--accent,#e8483c);color:#fff;font-size:12px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.chat-list__empty,.chat-main__empty{padding:40px 22px;text-align:center;color:#64748b}
.chat-main__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px}
.chat-empty-illus{width:60px;height:60px;color:#cbd5e1}
.chat-empty-illus svg{width:100%;height:100%}
.chat-main{min-width:0;display:flex;flex-direction:column;min-height:0}
.chat-view{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-loading{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px;font-size:0;color:transparent}
.chat-loading::after{content:'';width:46px;height:46px;border-radius:50%;border:4px solid rgba(47,158,98,.18);border-top-color:#2f9e62;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.16);animation:bmpCatalogLoaderSpin .62s linear infinite}
@media (prefers-reduced-motion:reduce){.chat-loading::after{animation:none}}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #eef2f7;background:#fff;flex-shrink:0}
.chat-head__back{display:none;background:none;border:0;padding:6px;cursor:pointer;color:#334155;border-radius:8px}
.chat-head__back svg{width:22px;height:22px;display:block}
.chat-head__back:hover{background:#f1f5f9}
.chat-head__user{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1}
.chat-head__avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:#e8edf3;flex-shrink:0}
.chat-head__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-head__meta{min-width:0}
.chat-head__meta strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head__meta small{color:#94a3b8;font-size:12px}
.chat-head__menu{position:relative;flex-shrink:0}
.chat-head__dots{background:none;border:0;padding:8px;cursor:pointer;color:#64748b;border-radius:8px}
.chat-head__dots svg{width:20px;height:20px;display:block;fill:currentColor}
.chat-head__dots:hover{background:#f1f5f9}
.chat-head__dropdown{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #e6e9ef;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14);min-width:190px;padding:6px;z-index:20;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .2s ease,transform .22s ease,visibility 0s linear .22s}
.chat-head__dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .2s ease,transform .22s ease}
.chat-head__dropdown a,.chat-head__dropdown button{text-align:left;background:none;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;color:#1f2937;text-decoration:none;font-size:14px}
.chat-head__dropdown a:hover,.chat-head__dropdown button:hover{background:#f4f7fb}
.chat-head__dropdown button[data-chat-delete]{color:#c5372d}
.chat-scroll{flex:1;overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:8px;background:#f7f9fc}
.chat-adref{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e6e9ef;border-radius:12px;padding:8px 10px;text-decoration:none;color:inherit;margin-bottom:6px;align-self:center;max-width:min(420px,90%)}
.chat-adref__img{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#eef2f7}
.chat-adref__img img{width:100%;height:100%;object-fit:cover;display:block}
.chat-adref__body{min-width:0}
.chat-adref__body small{color:#94a3b8;font-size:11px;display:block}
.chat-adref__body strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-adref__price{color:var(--accent,#e8483c);font-weight:700;font-size:13px}
.chat-empty-msg{text-align:center;color:#94a3b8;padding:30px 10px}
.chat-msg{display:flex;max-width:74%}
.chat-msg.is-mine{align-self:flex-end;justify-content:flex-end}
.chat-msg.is-theirs{align-self:flex-start}
.chat-msg__bubble{padding:8px 11px 6px;border-radius:16px;position:relative;word-break:break-word}
.chat-msg.is-theirs .chat-msg__bubble{background:#fff;border:1px solid #e6e9ef;border-bottom-left-radius:5px}
.chat-msg.is-mine .chat-msg__bubble{background:var(--accent,#e8483c);color:#fff;border-bottom-right-radius:5px}
.chat-msg__text{margin:0;font-size:14.5px;line-height:1.4}
.chat-msg__meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:2px}
.chat-msg__time{font-size:11px;opacity:.7}
.chat-msg.is-mine .chat-msg__time{color:rgba(255,255,255,.85)}
.chat-msg__status{display:inline-flex}
.chat-check{width:16px;height:11px;fill:none;stroke:rgba(255,255,255,.75);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-msg__status .chat-check path:last-child{opacity:0}
.chat-msg__status.is-read .chat-check{stroke:#bfe3ff}
.chat-msg__status.is-read .chat-check path:last-child{opacity:1}
.chat-msg__photos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;max-width:260px}
.chat-photo{display:block;border-radius:10px;overflow:hidden;cursor:zoom-in;max-width:130px}
.chat-photo img{width:100%;height:auto;max-height:180px;object-fit:cover;display:block}
.chat-composer{border-top:1px solid #eef2f7;background:#fff;padding:10px 12px;flex-shrink:0}
.chat-composer__row{display:flex;align-items:flex-end;gap:8px}
.chat-composer__attach{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#64748b;flex-shrink:0}
.chat-composer__attach:hover{background:#f1f5f9}
.chat-composer__attach svg{width:22px;height:22px}
.chat-composer__input{flex:1;resize:none;border:1px solid #d8dee9;border-radius:20px;padding:9px 14px;font:inherit;max-height:120px;line-height:1.4}
.chat-composer__send{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent,#e8483c);color:#fff;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.chat-composer__send svg{width:20px;height:20px}
.chat-composer__send:hover{filter:brightness(1.05)}
.chat-composer__previews{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chat-composer__preview{position:relative;width:60px;height:60px;border-radius:8px;overflow:hidden}
.chat-composer__preview img{width:100%;height:100%;object-fit:cover;display:block}
.chat-composer__preview-rm{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;line-height:1;font-size:13px}
.chat-composer__proc{color:#94a3b8;font-size:13px}
.chat-composer__error{color:#b42318;font-size:13px;margin-top:6px}
/* Мобільна поведінка: список ↔ чат */
@media (max-width:860px){
.chat-page{grid-template-columns:1fr;height:auto;min-height:0}
.chat-sidebar{border-right:0}
.chat-list{max-height:none}
.chat-main{display:none}
.chat-page.is-chat-open .chat-sidebar{display:none}
.chat-page.is-chat-open .chat-main{display:flex}
.chat-page.is-chat-open{height:min(78vh,700px)}
.chat-head__back{display:inline-flex}
.chat-msg{max-width:86%}
}
/* Попап «Новий чат» */
.chat-newpopup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.5);opacity:0;transition:opacity .26s ease}
.chat-newpopup.is-open{opacity:1}
.chat-newpopup__card{background:#fff;border-radius:18px;padding:22px;width:min(460px,100%);box-shadow:0 24px 60px rgba(15,23,42,.28);transform:scale(.94);transition:transform .3s cubic-bezier(.2,.85,.25,1);position:relative}
.chat-newpopup.is-open .chat-newpopup__card{transform:scale(1)}
.chat-newpopup__card h3{margin:0 0 14px;font-size:18px}
.chat-newpopup__close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:#94a3b8;cursor:pointer}
.chat-newpopup__text{width:100%;border:1px solid #d8dee9;border-radius:12px;padding:12px;font:inherit;resize:vertical;min-height:96px}
.chat-newpopup__error{color:#b42318;font-size:13px;margin:8px 0 0}
.chat-newpopup__send{margin-top:14px}
body.chat-newpopup-open{overflow:hidden}
/* Кнопка чату у профілі */
.seller-hero__chat-icon{display:inline-flex;width:18px;height:18px}
.seller-hero__chat-icon svg{width:100%;height:100%;fill:currentColor}
.topbar__chat-count[hidden],.account-nav-badge--chat[hidden]{display:none}
/* Індикатор непрочитаних повідомлень (окремо від «Обране») */
.topbar__chat-count{
position:absolute;
top:-7px;
left:9px;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:9px;
background:#e8483c;
color:#fff;
font-size:11px;
font-weight:700;
line-height:16px;
text-align:center}
.topbar__chat-count[hidden]{display:none}
.topbar-mobile__icon-link--chat{position:relative}
.topbar-mobile__icon-link--chat .topbar__chat-count{top:-5px;left:auto;right:-7px}
.topbar-mobile__chat-link{display:flex;align-items:center;gap:8px}
.topbar-mobile__chat-link .topbar__chat-count{position:static;display:inline-flex;align-items:center;justify-content:center}
.topbar-mobile__chat-link .topbar__chat-count[hidden]{display:none}
/* Іконки в меню дій чату */
.chat-head__dropdown a,.chat-head__dropdown button{display:flex;align-items:center;gap:10px}
.chat-head__dropdown svg{width:17px;height:17px;flex-shrink:0;color:#64748b}
.chat-head__dropdown button[data-chat-delete] svg{color:#c5372d}
/* Універсальне вікно підтвердження (bmpDialog) */
.bmp-dialog{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.5);opacity:0;transition:opacity .24s ease}
.bmp-dialog.is-open{opacity:1}
.bmp-dialog__card{background:#fff;border-radius:18px;padding:22px;width:min(420px,100%);box-shadow:0 24px 60px rgba(15,23,42,.28);transform:scale(.94);transition:transform .28s cubic-bezier(.2,.85,.25,1)}
.bmp-dialog.is-open .bmp-dialog__card{transform:scale(1)}
.bmp-dialog__title{margin:0 0 8px;font-size:18px}
.bmp-dialog__text{margin:0;color:#475569;font-size:14.5px;line-height:1.5}
.bmp-dialog__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
/* Спінер лінивого завантаження списку сповіщень */
.top-notices__lazy{display:flex;align-items:center;justify-content:center;padding:26px 10px}
.top-notices__lazy-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(47,158,98,.18);border-top-color:#2f9e62;animation:bmpCatalogLoaderSpin .62s linear infinite}
@media (prefers-reduced-motion:reduce){.top-notices__lazy-spinner{animation:none}}
/* Ціна поруч із заголовком оголошення в кабінеті */
.account-ad-title__price{color:#2f9e62;font-weight:800;white-space:nowrap;margin-left:6px;font-size:14px}
/* Панель фільтрів каталогу — ЄДИНЕ джерело стилів.
Раніше правила були розкидані по 14-base-extended (чекбокс мав 4 конфліктні
визначення з !important). Тут — по одному визначенню на елемент. */
.catalog-filter{
position:sticky;
top:96px;
align-self:start}
.catalog-filter form{
display:grid;
gap:10px;
padding:14px;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
background:#fff;
box-shadow:0 10px 30px rgba(15,23,42,.05)}
/* Шапка */
.catalog-filter__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:2px}
.catalog-filter__head h3{
margin:0;
font-size:16px;
font-weight:700;
color:#0f172a}
.catalog-filter__close{
display:none;
width:32px;height:32px;
border:0;border-radius:50%;
background:#f1f5f9;color:#475569;
font-size:20px;line-height:1;cursor:pointer}
.catalog-filter__close:hover{background:#e2e8f0;color:#0f172a}
/* Групи */
.filter-group{
padding:12px;
border:1px solid rgba(15,23,42,.07);
border-radius:14px;
background:#fcfdfe;
margin:0}
.filter-group__title{
margin-bottom:8px;
color:#334155;
font-size:13px;
font-weight:700}
.filter-price-group .filter-group__title{
margin-bottom:8px;
color:#334155;
font-size:13px;
font-weight:700}
/* Група динамічних полів — згортається */
.filter-group--dynamic > .filter-group__title{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:8px;
cursor:pointer;
user-select:none;
-webkit-user-select:none}
.filter-group--dynamic > .filter-group__title::after{
content:"";
flex:0 0 12px;
width:12px;height:12px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
transition:transform .18s ease}
.filter-group--dynamic.is-collapsed > .filter-group__title{margin-bottom:0}
.filter-group--dynamic.is-collapsed > .filter-group__title::after{transform:rotate(-90deg)}
.filter-group--dynamic.is-collapsed > *:not(.filter-group__title){display:none!important}
/* Категорії у фільтрі */
.filter-categories{
display:grid;
gap:10px;
padding:12px;
border:1px solid rgba(15,23,42,.07);
border-radius:14px;
background:#fcfdfe}
.filter-categories__title{
color:#334155;
font-size:13px;
font-weight:700}
.filter-cat-level{display:grid;gap:6px}
.filter-cat-level__list{
display:grid;
gap:4px;
max-height:230px;
overflow:auto;
padding-right:2px}
.filter-cat-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
border-radius:10px;
border:1px solid transparent;
background:#fff;
color:#334155;
font-size:13.5px;
transition:background .15s ease,color .15s ease}
.filter-cat-link:hover,
.filter-cat-link.is-active{
background:#eef8f2;
color:#1f7a4c}
.filter-cat-link span{font-weight:600}
.filter-cat-link small{
min-width:26px;
padding:2px 6px;
text-align:center;
border-radius:999px;
background:#f1f5f9;
color:#94a3b8;
font-size:11px;
font-weight:700}
.filter-cat-link.is-active small{background:#dcfce7;color:#166534}
.filter-cat-reset{
display:inline-flex;
justify-content:center;
padding:8px 10px;
border-radius:10px;
background:#f1f5f9;
color:#334155;
font-size:13px;
font-weight:650}
.filter-cat-level--empty{
padding:8px 10px;
border-radius:10px;
color:#94a3b8;
font-size:13px}
/* Селект рівня категорії — вища специфічність, щоб не перебивався
загальними правилами полів фільтра (текст більше не обрізається). */
.catalog-filter select.filter-cat-select,
.filter-cat-select{
width:100%;
height:36px;
border:1px solid rgba(15,23,42,.1);
border-radius:10px;
background-color:#fff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M12 15.5 5.8 9.3l1.4-1.4L12 12.7l4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:12px;
color:#243044;
font-size:13.5px;
line-height:1.2;
padding:0 30px 0 11px;
text-overflow:ellipsis;
outline:none;
appearance:none;-webkit-appearance:none;-moz-appearance:none;
cursor:pointer;
transition:border-color .16s ease}
.catalog-filter select.filter-cat-select:focus,
.filter-cat-select:focus{border-color:rgba(47,158,98,.5)}
/* Ціна */
.filter-row--price{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px}
.catalog-filter .price-input-wrap{
position:relative;
display:block}
.catalog-filter .price-input-wrap input{
width:100%;
height:36px;
border:1px solid rgba(15,23,42,.1);
border-radius:10px;
padding:0 30px 0 11px;
font-size:13.5px;
color:#243044;
background:#fff;
outline:none;
transition:border-color .16s ease}
.catalog-filter .price-input-wrap input:focus{border-color:rgba(47,158,98,.45)}
/* Базові поля фільтра — власне визначення (фільтр виключено із загального
правила .form input/select у 14-base-extended, яке ламало висоту/паддінги). */
.catalog-filter input[type="text"],
.catalog-filter input[type="search"],
.catalog-filter input[type="number"],
.catalog-filter select{
width:100%;
height:36px;
border:1px solid rgba(15,23,42,.1);
border-radius:10px;
padding:0 11px;
background:#fff;
color:#243044;
font-size:13.5px;
line-height:1.2;
outline:none;
transition:border-color .16s ease}
.catalog-filter input[type="text"]:focus,
.catalog-filter input[type="search"]:focus,
.catalog-filter input[type="number"]:focus,
.catalog-filter select:focus{border-color:rgba(47,158,98,.5)}
/* Чекбокси — ОДНЕ визначення (раніше було 4 конфліктні) */
.checkline,
.form label.checkline,
label.checkline{
display:flex;
align-items:center;
gap:8px;
padding:6px 2px;
color:#42526a;
font-size:13px;
font-weight:600;
line-height:1.3;
cursor:pointer;
background:none;
border:0}
.checkline input[type="checkbox"],
.checkline input[type="radio"]{
appearance:none;-webkit-appearance:none;
flex:none;
width:15px;height:15px;
min-width:15px;
margin:0;
padding:0;
border:1.5px solid rgba(15,23,42,.22);
border-radius:4px;
background:#fff;
display:inline-grid;
place-items:center;
cursor:pointer;
transition:background .15s ease,border-color .15s ease}
.checkline input[type="radio"]{border-radius:50%}
.checkline input[type="checkbox"]:hover,
.checkline input[type="radio"]:hover{border-color:#2f9e62}
.checkline input[type="checkbox"]:checked,
.checkline input[type="radio"]:checked{
background:#2f9e62;
border-color:#2f9e62}
.checkline input[type="checkbox"]:checked::after{
content:"";
width:7px;height:3.5px;
border-left:1.6px solid #fff;
border-bottom:1.6px solid #fff;
transform:rotate(-45deg);
margin-top:-2px}
.checkline input[type="radio"]:checked::after{
content:"";
width:5px;height:5px;
border-radius:50%;
background:#fff}
.checkline span{display:block}
.checkline small{
display:block;
margin-top:3px;
color:#94a3b8;
font-size:11.5px;
font-weight:500}
/* Локація */
.catalog-filter select[data-city-select]{
width:100%;
height:36px}
/* Кнопки всередині фільтра */
.catalog-filter .btn{min-height:40px;font-weight:650}
.catalog-filter__mobile-actions{display:none}
/* Адаптив мобільної шухляди фільтра лишається в 14-base-extended.css —
там уже є робоча реалізація, синхронізована з JS (is-open, data-filter-close). */
@media(max-width:1024px){
.catalog-filter{position:relative;top:auto}
.filter-cat-level__list{max-height:none}
}
/* ============================================================
МОБІЛЬНА ШУХЛЯДА ФІЛЬТРА (≤1100px)
Єдине місце цих стилів. Раніше вони жили у 14-base-extended.css,
але цей файл завантажується пізніше й перебивав їх (медіа-запит НЕ
підвищує специфічність) — через це зникала кнопка закриття,
ламалася прокрутка й відступи.
============================================================ */
@media(max-width:1100px){
/* Підкладка на весь екран */
.catalog-filter{
position:fixed;
inset:0;
top:0;
z-index:1000;
display:none;
padding:0;
background:rgba(15,23,42,.45);
overflow:hidden;
/* знімаємо десктопний sticky */
align-self:auto}
.catalog-filter.is-open{display:block}
/* Панель праворуч: власна прокрутка + місце під нижню панель дій */
.catalog-filter.is-open form,
.catalog-filter form{
position:absolute;
inset:0 0 0 auto;
width:min(520px,100%);
height:100%;
max-height:100%;
display:grid;
align-content:start;
gap:10px;
margin:0;
padding:0 16px calc(96px + env(safe-area-inset-bottom,0px));
border:0;
border-radius:0;
background:#fff;
box-shadow:-28px 0 70px rgba(15,23,42,.22);
overflow-y:auto;
/* Тільки вертикальна прокрутка: вбік шухляда не їздить. */
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain}
/* Нічого всередині не має розпирати панель по ширині. */
.catalog-filter form>*{max-width:100%;min-width:0}
.catalog-filter .filter-group,
.catalog-filter .filter-group__body,
.catalog-filter input,
.catalog-filter select,
.catalog-filter .location-combobox{
max-width:100%;
min-width:0;
box-sizing:border-box}
/* Шапка з кнопкою закриття прилипає зверху */
.catalog-filter__head{
position:sticky;
top:0;
z-index:5;
margin:0 -16px 4px;
padding:14px 16px;
border-bottom:1px solid rgba(36,48,68,.10);
background:rgba(255,255,255,.97);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px)}
.catalog-filter__head h3{font-size:17px}
/* Кнопка закриття — головне, чого бракувало */
.catalog-filter__close{
display:grid;
place-items:center;
width:38px;
height:38px;
min-width:38px;
border:0;
border-radius:50%;
background:#f1f5f9;
color:#263345;
font-size:24px;
line-height:1;
cursor:pointer}
.catalog-filter__close:hover{background:#e2e8f0}
/* Нижня панель дій */
.catalog-filter__mobile-actions{
display:block;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:1004;
padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
background:rgba(255,255,255,.98);
border-top:1px solid rgba(36,48,68,.10);
box-shadow:0 -18px 42px rgba(15,23,42,.10);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px)}
.catalog-filter__mobile-actions .btn,
.catalog-filter .catalog-filter__mobile-actions .btn--full{
display:flex;
width:100%;
min-height:52px;
background:linear-gradient(135deg,#2f9e62,#23c16b);
color:#fff;
box-shadow:0 14px 30px rgba(47,158,98,.25)}
/* Підказка над фільтрами */
.catalog-filter__mobile-note{
display:none;
margin:0 0 10px;
padding:10px 12px;
border:1px solid rgba(245,158,11,.28);
border-radius:14px;
background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(255,247,237,.98));
color:#92400e;
font-size:13px;
line-height:1.35;
font-weight:600}
.catalog-filter__mobile-note span{display:block}
.catalog-filter__mobile-note span+span{margin-top:2px;color:#b45309}
.catalog-filter__mobile-note:not([hidden]){display:block}
/* Фон сторінки не скролиться, поки відкрита шухляда */
.catalog-filter-open{overflow:hidden}
.catalog-filter-open .section--catalog{scroll-margin-top:0}
}
/* шапка та шухляда кабінету */
/* Кнопка «Продати» (замість «Каталог» у кабінеті) — усі пристрої */
.header-sell-button{
display:inline-flex;align-items:center;gap:8px;
border:0;border-radius:14px;color:#fff;padding:13px 18px;
font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;
background:linear-gradient(135deg,#f59e0b,#f97316);
box-shadow:0 14px 28px rgba(245,158,11,.26);
transition:transform .15s ease,box-shadow .2s ease}
.header-sell-button:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(245,158,11,.34)}
.header-sell-button svg{width:19px;height:19px;flex:none}
/* Оверлей мобільної шухляди */
.account-sidebar-overlay{
position:fixed;inset:0;z-index:1290;
background:rgba(15,23,42,.42);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity .3s ease}
.account-sidebar-overlay.is-visible{opacity:1}
/* Кнопка закриття в шухляді — тільки на мобільному */
.account-sidebar__close{display:none}
@media(max-width:900px){
/* Іконка-гамбургер у мобільному топбарі кабінету */
.topbar-mobile__icon-link--menu{background:none;border:0;cursor:pointer;color:inherit}
/* Шухляда на всю висоту, поза потоком, з плавним виїздом */
.account-sidebar{
position:fixed;top:0;left:0;bottom:0;
width:min(86vw,340px);max-width:340px;
z-index:1300;
background:#fff;
box-shadow:0 24px 60px rgba(15,23,42,.28);
border-radius:0 20px 20px 0;
padding:54px 12px 18px;
overflow-y:auto;
transform:translateX(-104%);
transition:transform .32s cubic-bezier(.22,.61,.36,1);
will-change:transform}
.account-sidebar.is-open{transform:translateX(0)}
.account-sidebar__close{
display:flex;align-items:center;justify-content:center;
position:absolute;top:12px;right:12px;
width:38px;height:38px;border-radius:12px;
border:1px solid #e7ecf2;background:#f7f9fc;color:#334155;cursor:pointer}
.account-sidebar__close svg{width:20px;height:20px}
.account-sidebar__close:hover{background:#eef2f7}
/* Блокуємо прокрутку фону, коли шухляда відкрита */
body.account-sidebar-open{overflow:hidden}
}
/* ============================================================
ХЛІБНІ КРИХТИ КАБІНЕТУ
Один рядок за будь-якої ширини: нічого не переноситься, а якщо
ланцюжок задовгий — акуратно скорочується багатокрапкою.
============================================================ */
.catalog-breadcrumbs.account-breadcrumbs{
display:flex;
align-items:center;
gap:7px;
margin:0 0 14px;
min-width:0;
flex-wrap:nowrap;
white-space:nowrap;
overflow:hidden;
font-size:13px;
line-height:1.2}
.account-breadcrumbs a.account-breadcrumbs__root{
flex:0 0 auto;
color:var(--muted);
text-decoration:none;
transition:color .15s}
.account-breadcrumbs a.account-breadcrumbs__root:hover{color:var(--accent)}
.account-breadcrumbs .account-breadcrumbs__sep{
flex:0 0 auto;
color:#c7d0dc;
font-size:14px;
line-height:1}
.account-breadcrumbs strong.account-breadcrumbs__leaf{
min-width:0;
flex:0 1 auto;
color:var(--ink,#1b2434);
font-weight:700;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
@media(max-width:900px){
.catalog-breadcrumbs.account-breadcrumbs{margin:0 0 10px;font-size:12.5px}
}
/* Власна 404 у кабінеті */
.account-404{text-align:center;padding:48px 20px;max-width:520px;margin:0 auto}
.account-404__code{font-size:72px;font-weight:800;line-height:1;color:#2f9e62;letter-spacing:-.03em}
.account-404 h2{margin:14px 0 8px;font-size:24px}
.account-404 p{color:#64748b;margin:0 0 22px}
.account-404__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* тости (сплливаючі повідомлення праворуч угорі) */
.bmp-toast-stack{
position:fixed;top:18px;right:18px;z-index:4000;
display:flex;flex-direction:column;
max-width:min(92vw,380px);pointer-events:none}
/* Зовнішня обгортка — керує висотою/відступами для плавного схлопування на виході.
Сусіди плавно зʼїжджають угору завдяки transition height+margin. */
.bmp-toast{
pointer-events:auto;
margin-bottom:10px;
border-radius:14px;
transform:translateX(120%);
opacity:0;
overflow:hidden;
will-change:transform,opacity,height;
transition:
transform .42s cubic-bezier(.22,.61,.36,1),
opacity .34s ease,
height .40s cubic-bezier(.4,0,.2,1),
margin-top .40s cubic-bezier(.4,0,.2,1),
margin-bottom .40s cubic-bezier(.4,0,.2,1)}
.bmp-toast:last-child{margin-bottom:0}
.bmp-toast.is-visible{transform:translateX(0);opacity:1}
.bmp-toast.is-leaving{transform:translateX(120%);opacity:0}
/* Внутрішня обгортка тримає фон/паддінги/тінь — щоб при height:0 нічого не «стрибало» */
.bmp-toast__inner{
display:flex;align-items:flex-start;gap:11px;
padding:13px 14px;
background:#fff;color:#1f2937;
border:1px solid #e7ecf2;
border-left:4px solid #94a3b8;
border-radius:14px;
box-shadow:0 18px 44px rgba(15,23,42,.18)}
.bmp-toast__icon{flex:none;width:22px;height:22px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center}
.bmp-toast__icon svg{width:22px;height:22px;display:block}
.bmp-toast__text{flex:1;font-size:14px;line-height:1.4;padding-top:1px}
.bmp-toast__close{flex:none;border:0;background:none;color:#9aa5b4;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;margin-top:-1px}
.bmp-toast__close:hover{color:#475569}
/* Кольори за типом: рамка ліворуч + колір іконки */
.bmp-toast--success .bmp-toast__inner{border-left-color:#2f9e62}
.bmp-toast--success .bmp-toast__icon{color:#2f9e62}
.bmp-toast--warning .bmp-toast__inner{border-left-color:#e0982f}
.bmp-toast--warning .bmp-toast__icon{color:#e0982f}
.bmp-toast--error .bmp-toast__inner{border-left-color:#e8483c}
.bmp-toast--error .bmp-toast__icon{color:#e8483c}
.bmp-toast--info .bmp-toast__inner{border-left-color:#3b82f6}
.bmp-toast--info .bmp-toast__icon{color:#3b82f6}
@media(max-width:600px){
.bmp-toast-stack{top:12px;right:10px;left:10px;max-width:none}
.bmp-toast__inner{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
.bmp-toast{transition:opacity .2s ease}
.bmp-toast.is-visible{transform:none}
.bmp-toast.is-leaving{transform:none}
}
/* мультивалютність: селект валюти біля ціни + підказки (форма оголошення) */
/* Скоуп .form-grid--price + висока специфічність, щоб перебити .form select
і .price-input-wrap{display:block!important} з базових модулів. */
.form-grid--price label > .price-input-wrap{
display:flex!important;
align-items:stretch;
position:relative}
.form-grid--price .price-input-wrap input[name="price"]{
flex:1 1 auto;
width:auto!important;
padding-right:14px!important;
border-top-right-radius:0!important;
border-bottom-right-radius:0!important}
.form-grid--price .price-input-wrap select.price-currency-select{
flex:0 0 auto;
width:auto!important;
min-width:84px;
margin:0;
border:1px solid rgba(36,48,68,.14);
border-left:0;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
padding:13px 10px!important;
background:#f7f9fc;
color:#263345;
font-size:14px;
font-weight:600;
cursor:pointer;
-webkit-appearance:menulist;
appearance:menulist}
.form-grid--price .price-currency-select:disabled{
opacity:.5;
cursor:not-allowed}
.price-uah-hint{
display:block;
margin-top:6px;
font-size:13px;
color:#2f9e62;
font-weight:600}
.price-estimate-hint{
display:block;
margin-top:4px;
font-size:12.5px;
color:#64748b}
/* Приховані підказки не мають займати місце (display:block перебиває hidden) */
.price-uah-hint[hidden],
.price-estimate-hint[hidden]{display:none;margin:0}
/* Еквівалент у гривні в цінах: дрібніше і приглушено, щоб ціна не була завеликою */
.price-uah{
font-size:.72em;
font-weight:500;
color:#8a96a6;
margin-left:3px;
white-space:nowrap}
/* швидке редагування ціни/знижки: олівець-тригер + динамічні модалки */
/* Тригер-олівець */
.quick-edit__toggle{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;
border:1px solid #e3e8ef;background:#fff;color:#475569;cursor:pointer;
transition:background .15s ease,color .15s ease}
.quick-edit__toggle:hover{background:#f1f5f9;color:#2f9e62}
.quick-edit__toggle svg{width:18px;height:18px}
/* Фірмовий круглий прелоадер (як лоадер каталогу/шторки) */
.qe-spinner{
width:38px;height:38px;border-radius:50%;
border:4px solid rgba(47,158,98,.18);border-top-color:#2f9e62;
animation:bmpCatalogLoaderSpin .62s linear infinite;margin:0 auto}
.qe-modal__loading{display:flex;align-items:center;justify-content:center;padding:34px 0}
.qe-menu-loading{display:flex;align-items:center;justify-content:center;padding:20px 0}
.qe-menu-loading .qe-spinner{width:26px;height:26px;border-width:3px}
/* Поля */
.qe-field{margin-bottom:14px}
.qe-label{display:block;font-size:12.5px;color:#64748b;margin-bottom:6px;font-weight:600}
.qe-price-row{display:flex;align-items:stretch}
.qe-input{
flex:1;width:100%;border:1px solid #d7dde6;border-radius:12px;
padding:12px 13px;font-size:14px;color:#1f2937;outline:none;background:#fff}
.qe-input:focus{border-color:#2f9e62}
.qe-price-row .qe-input{border-top-right-radius:0;border-bottom-right-radius:0}
.qe-currency{
flex:none;min-width:78px;border:1px solid #d7dde6;border-left:0;
border-top-right-radius:12px;border-bottom-right-radius:12px;
background:#f7f9fc;color:#1f2937;padding:0 8px;font-size:14px;font-weight:600;cursor:pointer}
.qe-currency:disabled,.qe-input:disabled{opacity:.5;cursor:not-allowed}
.qe-uah{margin-top:6px;font-size:12.5px;color:#2f9e62;font-weight:600}
.qe-error{margin-top:6px;font-size:12.5px;color:#e8483c;font-weight:600}
.qe-check{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:14px;cursor:pointer}
/* Прев'ю знижки */
.qe-preview{background:#f7f9fc;border-radius:12px;padding:12px 14px;margin:2px 0 14px;display:grid;gap:6px;font-size:14px;color:#475569}
.qe-preview b{color:#1f6f43;font-size:16px}
.qe-preview__sale{color:#e8483c!important}
/* Модалка */
.qe-modal-overlay{
position:fixed;inset:0;z-index:5000;
display:flex;align-items:center;justify-content:center;padding:16px;
background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity .26s ease}
.qe-modal-overlay.is-open{opacity:1}
.qe-modal{
width:440px;max-width:100%;background:#fff;border-radius:18px;padding:22px;
box-shadow:0 30px 70px rgba(15,23,42,.3);
transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.qe-modal-overlay.is-open .qe-modal{transform:translateY(0) scale(1)}
.qe-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.qe-modal__head h3{margin:0;font-size:19px}
.qe-modal__close{border:0;background:none;font-size:26px;line-height:1;color:#9aa5b4;cursor:pointer;padding:0 4px}
.qe-modal__close:hover{color:#475569}
.qe-modal__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.qe-modal__actions .btn{flex:1;min-width:120px}
.btn--danger{background:#fdecec;color:#c0392b;border:1px solid #f5c6c6}
.btn--danger:hover{background:#f9dede}
@media(max-width:600px){
.qe-modal{padding:18px}
.qe-modal__actions .btn{min-width:0}
}
/* Універсальний слайдер карток: на десктопі — звичайна сітка,
на телефоні (<760px) — горизонтальний слайдер по 2 картки зі стрілками. */
.universal-slider{position:relative}
.universal-slider__nav{display:none}
/* Десктоп/планшет: звичайна сітка (керується .ads-grid), стрілки сховані */
@media(min-width:760px){
.universal-slider__viewport{display:block}
}
@media(max-width:759px){
.universal-slider__viewport{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none}
.universal-slider__viewport::-webkit-scrollbar{display:none}
/* Сітку всередині слайдера перетворюємо на горизонтальний ряд.
Кожна картка = (половина ширердини - півзазору) → видно рівно 2 картки. */
.universal-slider__viewport .ads-grid{
display:flex;
gap:12px;
grid-template-columns:none;
padding-bottom:4px}
.universal-slider__viewport .ad-card{
flex:0 0 calc(50% - 6px);
scroll-snap-align:start}
/* Стрілки — по центру під картками */
.universal-slider__nav{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin-top:14px}
.universal-slider__arrow{
width:44px;height:44px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid #e3e8ef;
border-radius:50%;
background:#fff;
color:#334155;
cursor:pointer;
box-shadow:0 6px 16px rgba(15,23,42,.1);
transition:background .15s ease, color .15s ease, transform .15s ease}
.universal-slider__arrow:hover{background:#f1f5f9;color:#2f9e62}
.universal-slider__arrow:active{transform:scale(.94)}
.universal-slider__arrow:disabled{opacity:.4;cursor:default;box-shadow:none}
.universal-slider__arrow svg{width:20px;height:20px}
}
/* ============================================================
Статистика кабінету: плитки станів, вибір періоду, картки подій.
============================================================ */
.bmp-stats{
display:flex;
flex-direction:column;
gap:18px}
/* ── Плитки станів оголошень ── */
.bmp-stats-tiles{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px}
.bmp-stats-tile{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:#fff;
border:1px solid var(--line,#e6ebf2);
border-radius:14px;
box-shadow:0 1px 3px rgba(20,32,52,.05)}
.bmp-stats-tile__icon{
flex:0 0 auto;
width:40px;height:40px;
display:grid;place-items:center;
border-radius:11px;
background:rgba(47,158,98,.10);
color:var(--accent)}
.bmp-stats-tile__icon svg{width:21px;height:21px}
.bmp-stats-tile--ok .bmp-stats-tile__icon{background:rgba(0,163,42,.12);color:#0a8a33}
.bmp-stats-tile--wait .bmp-stats-tile__icon{background:rgba(219,166,23,.14);color:#a8790a}
.bmp-stats-tile--muted .bmp-stats-tile__icon{background:rgba(100,116,139,.12);color:#64748b}
.bmp-stats-tile__text{
display:flex;
flex-direction:column;
min-width:0}
.bmp-stats-tile__value{
font-size:22px;
font-weight:800;
line-height:1.15}
.bmp-stats-tile__label{
font-size:12px;
color:var(--muted);
font-weight:600}
/* ── Вибір періоду ── */
.bmp-stats-range{
display:flex;
flex-direction:column;
gap:14px;
padding:16px 18px;
background:#fff;
border:1px solid var(--line,#e6ebf2);
border-radius:16px;
box-shadow:0 1px 3px rgba(20,32,52,.05)}
.bmp-stats-range__dates{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:12px}
.bmp-stats-range__field{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
flex:1 1 190px}
.bmp-stats-range__label{
font-size:12px;
font-weight:700;
color:var(--muted)}
.bmp-stats-range__input{
position:relative;
display:flex;
align-items:center}
.bmp-stats-range__input svg{
position:absolute;
left:12px;
width:17px;height:17px;
color:var(--muted);
pointer-events:none}
.bmp-stats-range__input input[type=date]{
width:100%;
min-height:44px;
padding:8px 12px 8px 38px;
border:1px solid var(--line,#d7dee8);
border-radius:11px;
font-size:15px;
background:#fff;
transition:border-color .14s,box-shadow .14s}
.bmp-stats-range__input input[type=date]:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(47,158,98,.15);
outline:none}
.bmp-stats-range__apply{
flex:0 0 auto;
min-height:44px}
.bmp-stats-range__presets{
display:flex;
flex-wrap:wrap;
gap:8px;
padding-top:12px;
border-top:1px solid #eef1f5}
.bmp-stats-preset{
display:inline-flex;
align-items:center;
padding:8px 15px;
border:1px solid var(--line,#d7dee8);
border-radius:999px;
background:#fff;
color:var(--ink,#1b2434);
font-size:13px;
font-weight:650;
text-decoration:none;
transition:.14s}
.bmp-stats-preset:hover{
border-color:var(--accent);
color:var(--accent)}
.bmp-stats-preset.is-active{
background:rgba(47,158,98,.10);
border-color:var(--accent);
color:var(--accent)}
/* ── Заголовок і період ── */
.bmp-stats-subtitle{
margin:4px 0 0;
font-size:18px;
font-weight:750}
.bmp-stats-period{
margin:-10px 0 0;
color:var(--muted);
font-size:13px}
/* ── Картки подій ── */
.bmp-stats-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:14px}
.bmp-stat-card{
display:flex;
flex-direction:column;
gap:12px;
padding:16px 18px;
background:#fff;
border:1px solid var(--line,#e6ebf2);
border-radius:16px;
box-shadow:0 1px 3px rgba(20,32,52,.05);
transition:box-shadow .15s,border-color .15s}
.bmp-stat-card:hover{
border-color:#d3dcea;
box-shadow:0 8px 22px rgba(20,32,52,.08)}
.bmp-stat-card__head{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:10px}
.bmp-stat-card__icon{
width:34px;height:34px;
display:grid;place-items:center;
border-radius:10px;
background:rgba(47,158,98,.10);
color:var(--accent)}
.bmp-stat-card__icon svg{width:18px;height:18px}
.bmp-stat-card__label{
margin:0;
font-size:13.5px;
font-weight:700;
line-height:1.3;
min-width:0}
.bmp-stat-card__value{
font-size:28px;
font-weight:800;
line-height:1;
white-space:nowrap}
/* Міні-графік */
.bmp-stat-card__chart{
height:28px;
margin:-2px 0}
.bmp-stat-spark{
display:block;
width:100%;
height:28px;
overflow:visible}
.bmp-stat-spark__area{
fill:rgba(47,158,98,.12)}
.bmp-stat-spark__line{
fill:none;
stroke:var(--accent);
stroke-width:1.8;
stroke-linejoin:round;
stroke-linecap:round;
vector-effect:non-scaling-stroke}
.bmp-stat-card__foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-top:11px;
border-top:1px solid #eef1f5}
.bmp-stat-card__caption{
font-size:12px;
color:var(--muted)}
.bmp-stat-card__delta{
display:inline-flex;
align-items:center;
gap:4px;
font-size:13px;
font-weight:750;
white-space:nowrap}
.bmp-stat-card__delta svg{width:15px;height:15px}
.bmp-stat-card__delta.is-up{color:#0a8a33}
.bmp-stat-card__delta.is-down{color:#d63638}
.bmp-stat-card__delta.is-flat{color:var(--muted)}
.bmp-stats-note{
margin:0;
padding:12px 14px;
background:#f6f8fb;
border-radius:12px;
color:var(--muted);
font-size:12.5px;
line-height:1.5}
/* ── Адаптив ── */
@media(max-width:640px){
.bmp-stats-range__dates{
flex-direction:column;
align-items:stretch}
.bmp-stats-range__apply{
width:100%;
justify-content:center}
.bmp-stats-tile__value{font-size:20px}
.bmp-stat-card__value{font-size:24px}
.bmp-stats-preset{flex:1 1 auto;justify-content:center}
}
/* ============================================================
СТОРІНКА ОГОЛОШЕННЯ — уточнене оформлення
Мінімалістичні картки, акуратні відступи, розгортання опису.
Завантажується останнім і має пріоритет над базовими правилами.
============================================================ */
/* ── Бічні картки: спокійніші, з тоншою рамкою ── */
.ad-sidebar .contact-card,
.ad-sidebar .seller-card{
border:1px solid #e8edf3;
border-radius:18px;
box-shadow:0 4px 18px rgba(15,23,42,.05)}
.ad-sidebar .contact-card{padding:18px}
.ad-sidebar .seller-card{padding:16px}
/* ── Картка продавця ── */
.seller-card__top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px}
.seller-card .seller-avatar{
flex:0 0 auto;
width:50px;height:50px;
border-radius:15px}
.seller-card__meta{
min-width:0;
display:flex;
flex-direction:column;
gap:3px}
.seller-card__meta strong{
font-size:15px;
line-height:1.25;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.seller-card__meta small{
color:var(--muted);
font-size:12px}
.seller-card__meta .verified{
align-self:flex-start;
gap:4px;
padding:3px 8px;
font-size:10.5px;
font-weight:600}
.seller-card__meta .verified svg{
width:12px;height:12px;
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
/* Кнопка «Сторінка продавця» — рівна, з іконкою-стрілкою */
.seller-card__link{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
border-radius:12px;
font-size:14px;
font-weight:650}
.seller-card__link svg{
width:17px;height:17px;
transition:transform .15s ease}
.seller-card__link:hover svg{transform:translateX(3px)}
/* ── Картка контактів: рівний вертикальний ритм ── */
.contact-card{
display:flex;
flex-direction:column;
gap:10px}
/* Ціна — згрупована з чіткою ієрархією через CSS order:
[рядок 1] актуальна ціна (крупно) + бейдж знижки поряд;
[рядок 2] стара ціна дрібним закресленим;
[рядок 3] «Договірна».
Порядок у HTML: strong → price-old → price-discount → price-note. */
.contact-card .price-big--stack{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px 9px;
margin:0 0 6px}
/* Актуальна ціна */
.contact-card .price-big--stack strong{
order:1;
font-size:29px;
line-height:1.05;
font-weight:800;
letter-spacing:-.015em}
/* Бейдж знижки — одразу за ціною в тому ж рядку */
.contact-card .price-big--stack .price-discount{
order:2;
margin:0;
align-self:center}
/* Стара ціна — переносимо на новий рядок під актуальною */
.contact-card .price-big--stack .price-old{
order:3;
flex-basis:100%;
margin:0;
font-size:15px;
line-height:1}
/* «Договірна» — окремий рядок унизу */
.contact-card .price-big--stack .price-note{
order:4;
flex-basis:100%;
margin:2px 0 0;
font-size:13px;
font-weight:600;
color:var(--muted)}
.contact-card .btn--full{min-height:48px}
.contact-card .owner-ad-actions{
display:flex;
flex-direction:column;
gap:8px;
margin:0}
/* ── Заголовки секцій на сторінці ── */
.ad-content .eyebrow,
.section--single-related .eyebrow{
margin-bottom:10px;
padding:5px 11px;
font-size:11px;
letter-spacing:.09em}
.section--single-related h2{
font-size:24px;
line-height:1.2;
letter-spacing:-.01em}
/* ── Опис оголошення: розгортання/згортання ── */
.entry-content-wrap{position:relative}
.entry-content-wrap.is-collapsible .entry-content{
overflow:hidden;
transition:max-height .38s cubic-bezier(.4,0,.2,1)}
/* Плавне затінення знизу, поки згорнуто */
.entry-content-wrap.is-collapsible.is-collapsed .entry-content::after{
content:"";
position:absolute;
left:0;right:0;bottom:44px;
height:72px;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.entry-content-toggle{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:12px;
padding:9px 16px;
border:1px solid #e2e8f0;
border-radius:999px;
background:#fff;
color:var(--accent,#2f9e62);
font-size:14px;
font-weight:650;
cursor:pointer;
transition:background .15s,border-color .15s}
/* Атрибут hidden має ховати кнопку попри display:inline-flex вище */
.entry-content-toggle[hidden]{display:none}
.entry-content-toggle:hover{
background:#f4faf6;
border-color:rgba(47,158,98,.35)}
.entry-content-toggle svg{
width:16px;height:16px;
transition:transform .3s ease}
/* Перемикання підписів «Розгорнути» / «Згорнути» */
.entry-content-toggle__less{display:none}
.entry-content-wrap.is-expanded .entry-content-toggle__more{display:none}
.entry-content-wrap.is-expanded .entry-content-toggle__less{display:inline}
.entry-content-wrap.is-expanded .entry-content-toggle svg{transform:rotate(180deg)}
/* ── Мобільні: без тіней, картки одна за одною ── */
@media(max-width:900px){
/* Прибираємо тіні з усіх карток на телефоні — площинніше й легше */
.ad-gallery,
.ad-sidebar .contact-card,
.ad-sidebar .seller-card,
.ad-content .ad-params,
.content-card{
box-shadow:none}
.ad-sidebar{gap:12px}
.ad-sidebar .contact-card{padding:16px}
.ad-sidebar .seller-card{padding:14px}
.section--single-related h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
.entry-content-wrap.is-collapsible .entry-content{transition:none}
.entry-content-toggle svg,
.seller-card__link svg{transition:none}
}
/* ── Кнопка «Сторінка продавця» у блоці інших оголошень ── */
.seller-other__link{
display:inline-flex;
align-items:center;
gap:7px}
.seller-other__link svg{
width:17px;height:17px;
transition:transform .15s ease}
.seller-other__link:hover svg{transform:translateX(3px)}
/* ============================================================
ВКЛАДКИ ПРОДАВЦЯ (оголошення / відгуки)
Перероблено в стилі теми: зелений акцент замість червоного,
«пігулка» активного пункту замість підкреслення.
============================================================ */
.seller-tabs{
border-bottom:1px solid #e8edf3;
background:#fff}
.seller-tabs__inner{
display:flex;
gap:6px;
padding:8px 0}
.seller-tab{
display:inline-flex;
align-items:center;
gap:8px;
margin:0;
padding:9px 16px;
border:0;
border-radius:12px;
color:#64748b;
font-weight:650;
font-size:14px;
text-decoration:none;
transition:background .15s,color .15s}
.seller-tab__icon{
width:19px;height:19px;
flex:0 0 auto}
.seller-tab:hover{
background:#f4f7fa;
color:#0f172a}
.seller-tab.is-active{
background:rgba(47,158,98,.10);
color:#1c6b41;
border-bottom:0}
.seller-tab__count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:20px;height:20px;
padding:0 6px;
border-radius:999px;
background:#eef2f7;
color:#475569;
font-size:12px;
font-weight:700}
.seller-tab.is-active .seller-tab__count{
background:rgba(47,158,98,.16);
color:#1c6b41}
@media(max-width:640px){
.seller-tabs__inner{gap:4px}
.seller-tab{padding:8px 12px;font-size:13px}
.seller-tab__icon{width:17px;height:17px}
}
/* ============================================================
ДЕТАЛЬНА ПРОРОБКА ЕЛЕМЕНТІВ СТОРІНКИ ОГОЛОШЕННЯ
Менше тіней (лишаємо тільки там, де вони справді потрібні),
рівні відступи, мінімалістичні картки.
============================================================ */
/* ── Шапка оголошення: пласка, без важкої тіні ── */
.ad-single-head{
border:1px solid #e8edf3;
border-radius:18px;
padding:18px 20px;
box-shadow:none}
.ad-single-head h1{
font-size:clamp(21px,2.4vw,30px);
letter-spacing:-.015em;
margin:6px 0 0}
.ad-single-location{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:10px;
color:var(--muted);
font-size:14px}
.ad-single-location svg{
width:16px;height:16px;
flex:0 0 auto;
fill:currentColor;
opacity:.75}
/* ── Параметри: рівна сітка, без тіней, тонший фон ── */
.ad-params{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin:18px 0}
.ad-params div{
padding:12px 14px;
border:1px solid #eef1f5;
border-radius:14px;
background:#fafbfc;
box-shadow:none}
.ad-params span{font-size:11.5px}
.ad-params strong{font-size:14px;font-weight:650}
/* ── Опис і нижній блок метаданих ── */
.ad-single-bottom-meta{
margin-top:20px;
padding-top:16px;
gap:7px}
.ad-single-bottom-meta span{
min-height:32px;
padding:5px 11px;
background:#f6f8fb;
font-size:13px;
font-weight:600}
/* ── Скарга: акуратне посилання без підкреслення ── */
.report-link{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
margin:0;
padding:0;
color:var(--muted);
font-size:13px;
font-weight:600;
text-decoration:none;
transition:color .15s ease}
.report-link::before{
content:"";
width:15px;height:15px;
flex:0 0 auto;
background:currentColor;
-webkit-mask:center/contain no-repeat url('data:image/svg+xml;utf8,');
mask:center/contain no-repeat url('data:image/svg+xml;utf8,')}
.report-link:hover{color:var(--danger,#d63638)}
/* ── Інші рубрики оголошення: легше, у стилі теми ── */
.ad-other-categories h2{
font-size:16px;
font-weight:700}
.ad-other-categories__link{
box-shadow:none}
/* ============================================================
МЕНШЕ ТІНЕЙ: лишаємо тінь тільки на галереї (головний акцент)
і на плаваючих елементах. Решта карток — пласкі, з рамкою.
============================================================ */
.ad-content .ad-params,
.ad-content .content-card,
.ad-single-bottom-meta{
box-shadow:none}
/* Галерея — єдина картка з м'якою тінню як візуальний акцент */
.ad-gallery{
box-shadow:0 6px 22px rgba(15,23,42,.06)}
/* ============================================================
СТОРІНКА ПРОДАВЦЯ — seller-hero
Три зони: аватар | інформація (тягнеться) | кнопка чату.
Компактно, без розтягнутого лейбла, кнопка не «втікає».
============================================================ */
.seller-hero{
padding:26px 0}
.seller-hero__grid{
display:grid;
/* [ряд 1] аватар | інформація
[ряд 2] кнопка чату — окремим рядком під усім контентом. */
grid-template-columns:72px minmax(0,1fr);
gap:14px 16px;
align-items:center}
.seller-hero__avatar{
grid-column:1;
grid-row:1;
align-self:center;
width:72px;height:72px;
border-radius:20px;
font-size:28px;
box-shadow:none}
.seller-hero__info{grid-column:2;grid-row:1}
/* Інформаційна зона */
.seller-hero__info{
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start}
/* Лейбл «Продавець» — по контенту, не розтягується на всю ширину */
.seller-hero__info .eyebrow{
align-self:flex-start;
width:auto;
margin-bottom:6px;
padding:3px 9px;
font-size:10.5px}
.seller-hero__info h1{
font-size:clamp(20px,2.3vw,27px);
line-height:1.15;
letter-spacing:-.015em;
margin:0}
/* Теги */
.seller-hero .seller-tags{
gap:6px;
margin:9px 0 0}
.seller-hero .seller-tags span,
.seller-hero .seller-tags .verified{
padding:4px 9px;
font-size:12px;
font-weight:600}
.seller-hero .seller-tags .verified{gap:4px}
/* Рейтинг + останній візит в один рядок */
.seller-hero__stats{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 14px;
margin-top:9px}
.seller-hero__rating{
display:flex;
align-items:center;
gap:6px;
margin:0}
.seller-hero__rating strong{font-size:15px}
.seller-hero__rating span{color:var(--muted);font-size:13px}
.seller-hero__lastlogin{
display:inline-flex;
align-items:center;
gap:6px;
margin:0;
color:var(--muted);
font-size:13px}
.seller-hero__lastlogin-icon{
display:inline-flex;
width:14px;height:14px;
opacity:.8}
.seller-hero__lastlogin-icon svg{width:100%;height:100%}
/* Опис продавця — на всю ширину інфо-зони, під статистикою */
.seller-hero__bio{
margin:10px 0 0;
max-width:60ch;
color:var(--muted);
font-size:14px;
line-height:1.55}
/* Кнопка чату — окремий рядок під усім контентом, на всю ширину блоку */
.seller-hero__aside{
grid-column:2;
grid-row:2;
display:flex;
margin-top:2px}
.seller-hero__chat{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
width:auto;
min-height:44px;
padding:0 20px;
margin:0}
/* Єдина іконка чату (спільна зі сторінкою оголошення) */
.seller-hero__chat .contact-chat-button__icon{
width:18px;height:18px}
.seller-hero__chat .contact-chat-button__icon svg{
width:18px;height:18px;
fill:currentColor}
/* Крапки в баблі завжди контрастні до заливки */
.contact-chat-button__icon svg circle{fill:#fff}
.seller-hero__chat .seller-hero__chat-icon{width:18px;height:18px}
.seller-hero__chat .seller-hero__chat-icon svg{width:18px;height:18px}
/* ── Мобільні: аватар + інфо поряд, кнопка на всю ширину ── */
@media(max-width:640px){
.seller-hero{padding:20px 0}
.seller-hero__grid{
grid-template-columns:58px minmax(0,1fr);
gap:14px;
row-gap:12px}
.seller-hero__avatar{
width:58px;height:58px;
border-radius:16px;
font-size:23px}
.seller-hero__info h1{font-size:20px}
.seller-hero__bio{font-size:13px}
/* На вузькому екрані кнопка на всю ширину блоку — так зручніше для пальця */
.seller-hero__aside{grid-column:1 / -1}
.seller-hero__chat{width:100%}
}
/* ============================================================
ХЛІБНІ КРИХТИ — єдиний стиль для каталогу і сторінки оголошення
(.catalog-breadcrumbs і .ad-single-breadcrumbs виглядають однаково)
============================================================ */
.catalog-breadcrumbs,
.ad-single-breadcrumbs{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
margin:0 0 12px;
color:#64748b;
font-size:14px;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.catalog-breadcrumbs::-webkit-scrollbar,
.ad-single-breadcrumbs::-webkit-scrollbar{display:none}
.catalog-breadcrumbs a,
.ad-single-breadcrumbs a,
.catalog-breadcrumbs .breadcrumbs__item a,
.ad-single-breadcrumbs .breadcrumbs__item a{
color:#24784b;
flex:0 0 auto;
white-space:nowrap;
text-decoration:none}
.catalog-breadcrumbs a:hover,
.ad-single-breadcrumbs a:hover,
.ad-single-breadcrumbs .breadcrumbs__item a:hover{color:#16633a}
.catalog-breadcrumbs>span,
.ad-single-breadcrumbs>span{flex:0 0 auto}
.catalog-breadcrumbs .breadcrumbs__item,
.ad-single-breadcrumbs .breadcrumbs__item{
display:inline-flex;
align-items:center;
flex:0 0 auto;
white-space:nowrap}
/* Остання (поточна) ланка — темна, скорочується багатокрапкою */
.catalog-breadcrumbs strong,
.ad-single-breadcrumbs .breadcrumbs__item--current a{
color:#263345;
font-weight:650;
min-width:0;
flex:0 1 auto;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.catalog-breadcrumbs .breadcrumbs__sep,
.ad-single-breadcrumbs .breadcrumbs__sep{
display:inline-flex;
align-items:center;
flex:0 0 auto;
color:#b8c2cf}
.catalog-breadcrumbs .breadcrumbs__sep svg,
.ad-single-breadcrumbs .breadcrumbs__sep svg{width:14px;height:14px}