/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Visually hide an element while keeping it accessible to screen readers and
search engines. Used for SEO-only headings that should not affect layout. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@font-face {
font-family: "nbrb";
src: url("/public/assets/fonts/nbrb.woff2") format("woff2"), /* Укажите путь к файлу nbrb.woff2 */
url("/public/assets/fonts/nbrb.ttf") format("truetype"), /* Укажите путь к файлу nbrb.ttf */
url("/public/assets/fonts/nbrb.woff") format("woff"); /* Укажите путь к файлу nbrb.woff */
unicode-range: U+E901, U+42, U+59, U+4E;
}
.nbrb-icon {
font-family: "nbrb" !important;
speak: none;
font-style: normal;
font-weight: 500;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: normal;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga";
-webkit-font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-size: 22px;
vertical-align: baseline;
line-height: 1;
}
.nbrb-icon-byn:before {
content: "\e901"; /* Юникод для знака */
}
/* Backdrop Overlay */
.backdrop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(2px);
}
.backdrop-overlay.active {
opacity: 1;
visibility: visible;
}
.backdrop-overlay.no-blur {
backdrop-filter: none;
}
/* Disable backdrop on tablet devices for better UX */
@media (min-width: 769px) and (max-width: 1023px) {
.backdrop-overlay {
display: none;
}
}
/* CRITICAL: Force item cards to be visible */
.item-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: 100% !important;
background: #ffffff !important;
border: 0px solid #e5e7eb !important;
border-radius: 18px 18px 0px 0px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
}
.listings-grid {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 5px !important;
margin-bottom: 12px !important;
width: 100% !important;
contain: layout style paint;
}
.main-content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
.latest-ads {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #111827;
background-color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Prevent body scroll when dropdowns are open */
body.scroll-locked {
overflow: hidden;
height: 100vh;
}
/* Container */
.container {
max-width: 1366px;
margin: 0 auto;
padding: 0 24px;
}
/* Utility classes for responsive design */
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
/* Hide mobile navigation on desktop */
.mobile-nav {
display: none !important;
}
/* Ensure desktop elements are visible */
@media (min-width: 1024px) {
.desktop-only {
display: block !important;
}
.mobile-only {
display: none !important;
}
.mobile-nav {
display: none !important;
}
.mobile-menu-toggle {
display: none !important;
}
.mobile-bottom-nav {
display: none !important;
}
/* Ensure header action buttons are visible on desktop */
.header-action-btn {
display: flex !important;
}
.header-messages-btn {
display: flex !important;
}
}
/* ===== SCROLL TO TOP BUTTON ===== */
.scroll-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
background: #4f46e5;
color: #ffffff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
transition: all 0.3s ease;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
background: #6057f5;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}
.scroll-to-top:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}
.scroll-to-top .material-icons {
font-size: 24px;
color: #ffffff;
}
@media (min-width: 769px) and (max-width: 1023px) {
.scroll-to-top {
bottom: 20px;
right: 20px;
width: 44px;
height: 44px;
}
.scroll-to-top .material-icons {
font-size: 22px;
}
}
@media (max-width: 480px) {
.scroll-to-top {
bottom: 16px;
right: 16px;
width: 40px;
height: 40px;
}
.scroll-to-top .material-icons {
font-size: 20px;
}
}
/* ===== DEVELOPMENT BANNER ===== */
.development-banner {
background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
color: #ffffff;
padding: 4px 0;
margin-top: 80px;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}
.development-banner__content {
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
text-align: center;
}
.development-banner__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
flex-shrink: 0;
}
.development-banner__icon .material-icons {
font-size: 20px;
color: #ffffff;
}
.development-banner__text {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.development-banner__text strong {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.development-banner__text span {
font-size: 13px;
opacity: 0.9;
line-height: 1.3;
max-width: 600px;
}
/* Tablet styles for development banner */
@media (min-width: 769px) and (max-width: 1023px) {
.development-banner {
padding: 12px 0;
}
.development-banner__content {
gap: 12px;
}
.development-banner__icon {
width: 32px;
height: 32px;
}
.development-banner__icon .material-icons {
font-size: 18px;
}
.development-banner__text strong {
font-size: 15px;
}
.development-banner__text span {
font-size: 12px;
}
}
@media (max-width: 480px) {
.development-banner {
padding: 10px 0;
}
.development-banner__content {
gap: 10px;
}
.development-banner__icon {
width: 28px;
height: 28px;
}
.development-banner__icon .material-icons {
font-size: 16px;
}
.development-banner__text strong {
font-size: 14px;
}
.development-banner__text span {
font-size: 11px;
}
}
/* Header */
.header {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transform: translateZ(0); /* Hardware acceleration for better performance */
will-change: transform; /* Optimize for transforms */
}
/* Desktop: notifications sit in the header actions row (after profile / login), not fixed to the viewport corner */
.header-notifications-wrap {
position: relative;
z-index: 101;
flex-shrink: 0;
display: flex;
align-items: center;
}
.header__content {
display: flex;
align-items: center;
gap: 20px;
padding: 12px 0;
flex-wrap: wrap;
}
.header__logo .logo {
height: 40px;
width: auto;
}
/* Categories Dropdown */
.header__categories {
position: relative;
z-index: 101;
}
.categories-dropdown__toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #4f46e5;
border: 1px solid #4f46e5;
border-radius: 50px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #ffffff;
transition: all 0.2s ease;
height: 40px;
box-sizing: border-box;
}
.categories-dropdown__toggle:hover {
background: #6057f5;
border-color: #6057f5;
color: #ffffff;
}
.categories-dropdown__toggle .material-icons {
color: #ffffff;
font-size: 18px;
transition: transform 0.2s ease;
}
.categories-dropdown__toggle .toggle-icon {
transition: transform 0.2s ease;
}
.categories-dropdown.is-open .toggle-icon {
transform: rotate(90deg);
}
.categories-dropdown__menu {
position: absolute;
top: 57px;
left: -153px;
min-width: 100%;
max-width: 1366px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0px 0px 18px 0px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
height: calc(100vh - 64px);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
}
.categories-dropdown.is-open .categories-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mega Menu Styles */
.categories-mega-menu {
display: flex;
height: 100%;
width: 1318px;
}
.categories-mega-menu__left {
width: 300px;
background: #f8fafc;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
padding-bottom: 60px; /* Safe zone for scrolling */
}
.categories-mega-menu__left::-webkit-scrollbar {
width: 6px;
}
.categories-mega-menu__left::-webkit-scrollbar-track {
background: #f1f5f9;
}
.categories-mega-menu__left::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.categories-mega-menu__left::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.categories-mega-menu__right {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
padding-bottom: 60px; /* Safe zone for scrolling */
}
.categories-mega-menu__right::-webkit-scrollbar {
width: 6px;
}
.categories-mega-menu__right::-webkit-scrollbar-track {
background: #f1f5f9;
}
.categories-mega-menu__right::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.categories-mega-menu__right::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.categories-list {
padding: 16px 0;
}
.category-item {
position: relative;
transition: background-color 0.2s ease;
}
.category-item.active {
background: #4f46e5;
box-shadow: inset 3px 0 0 #ffffff;
}
.category-item.active .category-link {
color: #ffffff;
}
.category-item.active .category-link .material-icons {
color: #ffffff;
}
.category-item:hover:not(.active) {
background: #f1f5f9;
}
/* Disable hover effects on mobile devices */
@media (hover: none) and (pointer: coarse) {
.category-item:hover:not(.active) {
background: transparent;
}
.category-link:hover {
color: inherit;
}
.category-link:hover .material-icons {
color: #4f46e5;
}
}
.category-link {
display: flex;
align-items: center;
padding: 8px 16px;
text-decoration: none;
color: #111827;
transition: all 0.2s ease;
border-bottom: 1px solid #f1f5f9;
min-height: 40px;
}
.category-link:hover {
color: #4f46e5;
}
.category-link .material-icons {
font-size: 18px;
margin-right: 10px;
color: #4f46e5;
transition: color 0.2s ease;
flex-shrink: 0;
}
.category-link:hover .material-icons {
color: #4f46e5;
}
.category-name {
flex: 1;
font-weight: 500;
font-size: 14px;
line-height: 1.3;
}
.subcategories-content {
padding: 16px;
height: 100%;
display: flex;
flex-direction: column;
}
.subcategories-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #9ca3af;
text-align: center;
}
.subcategories-placeholder .material-icons {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.subcategories-placeholder p {
font-size: 16px;
margin: 0;
}
.subcategories-placeholder p:last-child {
font-size: 14px;
margin-top: 8px;
color: #6b7280;
}
.categories-dropdown__menu .subcategories-grid {
display: block;
column-count: 4 !important;
column-gap: 20px;
flex: 1;
break-inside: avoid;
padding-bottom: 60px; /* Safe zone for scrolling */
}
.subcategory-group {
display: flex;
flex-direction: column;
height: max-content;
min-height: auto;
break-inside: avoid;
margin-bottom: 20px;
padding-bottom: 10px; /* Additional safe zone for each group */
}
.subcategory-group__title {
font-weight: 700;
font-size: 16px;
color: #111827;
margin-bottom: 8px;
}
.sections-list {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
justify-content: flex-start;
}
.section-link {
display: block;
text-decoration: none;
color: #6b7280;
font-size: 14px;
transition: color 0.2s ease;
}
.section-link:hover {
color: #4f46e5;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0;
padding: 20px;
}
.category-group {
padding: 16px;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.category-group:hover {
background-color: #f9fafb;
}
.category-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #111827;
font-weight: 600;
font-size: 15px;
transition: color 0.2s ease;
}
.category-link:hover {
color: #4f46e5;
}
.category-link .material-icons {
font-size: 20px;
color: #4f46e5;
}
.subcategories {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 32px;
}
.subcategory-link {
text-decoration: none;
color: #6b7280;
font-size: 13px;
padding: 4px 0;
transition: color 0.2s ease;
}
.subcategory-link:hover,
.subcategory-link.more {
color: #4f46e5;
}
/* Search */
.header__search {
flex: 1;
max-width: 400px;
position: relative;
z-index: 101;
}
/* Region Selector */
.header__region {
position: relative;
z-index: 101;
}
.region-selector {
position: relative;
}
.region-selector__toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
background: none;
border: none;
font-size: 14px;
color: #111827;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
white-space: nowrap;
height: auto;
}
.region-selector__toggle:hover {
color: #4f46e5;
text-decoration: none;
}
.region-selector__toggle .material-icons {
font-size: 18px;
color: #4f46e5;
}
.region-selector__text {
font-weight: 500;
color: #111827;
}
.region-dropdown {
position: absolute;
top: calc(100% + 17px);
right: 0;
width: 400px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 0 0 18px 18px;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
margin-top: 8px;
}
.region-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.region-dropdown__content {
padding: 0;
}
.region-dropdown__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e5e7eb;
}
.region-dropdown__header h3,
.region-dropdown__header .region-dropdown__headline {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #111827;
}
.region-dropdown__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.region-dropdown__close:hover {
background: #f3f4f6;
}
.region-dropdown__close .material-icons {
font-size: 20px;
color: #6b7280;
}
.region-dropdown__body {
padding: 20px;
}
.region-dropdown__level1,
.region-dropdown__level2 {
margin-bottom: 16px;
}
.region-dropdown__level2 {
opacity: 0.5;
pointer-events: none;
}
.region-dropdown__level2.active {
opacity: 1;
pointer-events: auto;
}
.region-select {
width: 100%;
padding: 10px 32px 10px 12px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
background: #ffffff;
color: #111827;
cursor: pointer;
transition: border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.region-select:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.region-select:disabled {
background: #f9fafb;
color: #9ca3af;
cursor: not-allowed;
}
.region-dropdown__actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.region-dropdown__actions .btn {
padding: 8px 16px;
font-size: 14px;
}
.search-form {
width: 100%;
}
.search-input-group {
position: relative;
display: flex;
border-radius: 50px;
overflow: visible;
border: 1px solid #d1d5db;
transition: border-color 0.2s ease;
width: 100%;
max-width: 400px;
min-height: 40px;
background: #ffffff;
}
.search-input-group:focus-within {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
outline: none;
}
.search-input {
flex: 1;
padding: 8px 16px;
border: none;
font-size: 14px;
outline: none;
background: transparent;
color: #111827;
border-radius: 8px 0 0 8px;
}
.search-input::placeholder {
color: #9ca3af;
}
.search-btn {
padding: 8px 16px;
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
transition: color 0.2s ease;
height: 40px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
border-radius: 0 8px 8px 0;
}
.search-btn:hover {
color: #4f46e5;
}
/* Voice Search Button */
.voice-search-btn {
position: absolute;
right: 48px;
top: 0;
height: 100%;
width: 40px;
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.voice-search-btn:hover {
color: #4f46e5;
background: rgba(79, 70, 229, 0.1);
}
.voice-search-btn.recording {
color: #ef4444;
background: rgba(220, 38, 38, 0.1);
animation: voicePulse 1.5s ease-in-out infinite;
}
.voice-search-btn .material-icons {
font-size: 20px;
}
@keyframes voicePulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/* Search Dropdown */
.search-dropdown {
position: absolute;
top: calc(100% + 17px);
left: -1px;
right: -1px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 18px 18px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 10000;
max-height: 400px;
min-width: 670px;
overflow-y: auto;
display: none;
}
.search-dropdown.active {
display: block;
}
.search-dropdown__section {
padding: 12px 0;
border-bottom: 1px solid #f3f4f6;
}
.search-dropdown__section:last-child {
border-bottom: none;
background: #ffffff;
}
.search-dropdown__title {
padding: 0 16px 8px;
font-size: 16px;
font-weight: 500;
color: #111827;
letter-spacing: 0.5px;
}
.search-dropdown__item {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
color: inherit;
}
.search-dropdown__item:hover {
background: #f9fafb;
}
.search-dropdown__item-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 6px;
margin-right: 12px;
flex-shrink: 0;
overflow: hidden;
}
.search-dropdown__item-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.search-dropdown__item-icon .material-icons {
font-size: 18px;
color: #4f46e5;
display: flex;
align-items: center;
justify-content: center;
}
.search-dropdown__item-content {
flex: 1;
min-width: 0;
}
.search-dropdown__item-title {
font-size: 14px;
font-weight: 500;
color: #111827;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-dropdown__item-subtitle {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-dropdown__no-results {
padding: 20px 16px;
text-align: center;
color: #6b7280;
font-size: 14px;
}
/* ---- Search history tags ---- */
.search-dropdown__history-section {
padding: 10px 0 6px;
}
.search-dropdown__history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 5px 5px;
}
.search-dropdown__history-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 16px 10px;
}
.search-history-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: #4f46e5;
border-radius: 50px;
padding: 5px 10px 5px 8px;
font-size: 13px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
max-width: 240px;
user-select: none;
}
.search-history-tag:hover {
background: #6057f5;
color: #ffffff;
}
.search-history-tag__icon {
font-size: 14px !important;
color: #ffffff;
flex-shrink: 0;
}
.search-history-tag:hover .search-history-tag__icon {
color: #ffffff;
}
.search-history-tag__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.search-history-tag__delete {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #26216d;
flex-shrink: 0;
border-radius: 50%;
width: 16px;
height: 16px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.search-history-tag__delete:hover {
color: #000000;
}
/* Destructive action for the complete search history. Kept visually separate
from the blue query tags while retaining the same compact tag shape. */
.search-history-clear-all {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #d1d5db;
border-radius: 50px;
padding: 5px 10px 5px 8px;
background: #ffffff;
color: #374151;
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.search-history-clear-all:hover {
border-color: #9ca3af;
background: #f3f4f6;
color: #111827;
}
.search-history-clear-all:disabled {
cursor: wait;
opacity: 0.6;
}
.search-history-clear-all .material-icons {
font-size: 16px !important;
}
.search-history-tag__delete .material-icons {
font-size: 13px !important;
}
/* Mobile search history dropdown */
.mobile-search {
position: relative;
}
.mobile-search-history-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
z-index: 9999;
padding: 4px 0 8px;
}
.mobile-search-history {
padding: 0;
}
.mobile-search-history__header {
padding: 6px 14px 4px;
}
.mobile-search-history__title {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-search-history__tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 4px 14px 6px;
}
/* ---- end search history ---- */
.search-dropdown__loading {
padding: 20px 16px;
text-align: center;
color: #6b7280;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Shared public-site loading indicator. */
.app-loading-dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 18px;
vertical-align: middle;
}
.app-loading-dots i {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--app-primary, #4f46e5);
animation: appLoadingDot 1.2s ease-in-out infinite;
}
.app-loading-dots i:nth-child(2) {
background: #22c55e;
animation-delay: 0.15s;
}
.app-loading-dots i:nth-child(3) {
background: var(--app-error, #ef4444);
animation-delay: 0.3s;
}
.app-loading-dots--small {
gap: 3px;
height: 16px;
}
.app-loading-dots--small i {
width: 5px;
height: 5px;
}
.app-loading-dots--chat {
gap: 7px;
height: 30px;
}
.app-loading-dots--chat i {
width: 10px;
height: 10px;
}
@keyframes appLoadingDot {
0%, 60%, 100% {
opacity: 0.35;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-3px);
}
}
@media (prefers-reduced-motion: reduce) {
.app-loading-dots i {
animation: none;
opacity: 0.8;
}
}
/* User Actions */
.header__actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
text-decoration: none;
color: #6b7280;
border-radius: 6px;
transition: all 0.2s ease;
font-size: 14px;
height: 40px;
box-sizing: border-box;
}
.action-btn:hover {
background: #f3f4f6;
color: #4f46e5;
}
/* Header Action Buttons - Improved Design */
.header-action-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #ffffff;
color: #6b7280;
text-decoration: none;
border-radius: 50px;
transition: all 0.2s ease;
border: 1px solid #e5e7eb;
cursor: pointer;
}
.header-action-btn:hover {
background: #f9fafb;
color: #4f46e5;
border-color: #4f46e5;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}
.header-action-btn:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header-favorites-btn:hover {
color: #06b6d4;
border-color: #06b6d4;
box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}
.header-messages-btn:hover {
color: #4f46e5;
border-color: #4f46e5;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.header-action-btn .material-icons {
font-size: 25px;
color: inherit;
}
.header-action-label {
display: none;
}
.notification-badge {
position: absolute;
top: -2px;
right: -2px;
background: #ef4444;
color: #ffffff;
font-size: 10px;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ffffff;
z-index: 2;
}
.action-btn--delete {
color: #4f46e5;
}
.action-btn--delete:hover {
background: #faf5ff;
color: #4a0e6b;
}
.action-btn--favorite-remove {
color: #4f46e5;
}
.action-btn--favorite-remove:hover {
background: #faf5ff;
color: #4f46e5;
}
.action-btn--edit {
color: #4f46e5;
}
.action-btn--edit:hover {
background: #faf5ff;
color: #4f46e5;
}
.action-label {
display: none;
}
.action-btn .material-icons {
font-size: 24px;
}
/* User Menu */
.user-menu {
position: relative;
z-index: 101;
}
.user-menu__toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
width: 40px;
height: 40px;
}
.user-menu__toggle:hover {
border-color: #4f46e5;
color: #4f46e5;
background-color: #f8f5ff;
}
.user-menu__toggle:hover .user-avatar {
background-color: #4f46e5;
color: #ffffff;
}
.user-menu__toggle:hover .user-avatar .material-icons {
color: #ffffff;
}
.user-menu__toggle:hover .user-avatar img {
opacity: 0.8;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.user-avatar .material-icons {
font-size: 20px;
color: #6b7280;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Keep avatar blocks from shrinking in flex layouts */
.user-avatar,
.profile-avatar,
.conversation-avatar,
.chat-avatar,
.message-avatar,
.support-avatar,
.seller-avatar,
.admin-user-avatar {
flex-shrink: 0;
}
.user-menu__dropdown {
position: absolute;
top: calc(100% + 9px);
right: -53px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0 0 18px 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 295px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
margin-top: 8px;
}
.user-menu.is-open .user-menu__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-menu__item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
text-decoration: none;
color: #111827;
font-size: 14px;
transition: all 0.2s ease;
position: relative;
}
.user-menu__item:hover {
color: #4f46e5;
}
.user-menu__item:hover .material-icons {
color: #4f46e5;
}
.user-menu__item .material-icons {
font-size: 18px;
color: #6b7280;
transition: color 0.2s ease;
}
.user-menu__divider {
margin: 8px 0;
border: none;
border-top: 1px solid #e5e7eb;
}
.user-menu__item--meta {
cursor: default;
background: transparent !important;
color: #1f2937 !important;
}
.user-menu__item--meta:hover {
background: transparent !important;
color: #1f2937 !important;
}
.user-menu__rating-block {
margin-top: 0 !important;
}
.user-menu__item--meta .user-rating-inline .material-icons,
.user-menu__rating-block .material-icons {
color: #f4b400 !important;
font-size: 16px !important;
}
.logout-btn {
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
padding: 14px 16px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
height: 40px;
box-sizing: border-box;
}
.btn--primary {
background: #4f46e5;
color: #ffffff;
border-color: #4f46e5;
}
.btn--primary:hover {
background: #6057f5;
border-color: #6057f5;
}
.btn--outline {
background: transparent;
color: #4f46e5;
border-color: #4f46e5;
}
.btn--google {
margin-top: 12px;
width: 100%;
min-height: 44px;
background: transparent;
border: 0;
padding: 0;
display: block;
}
.btn--google > div,
.btn--google iframe {
/* width: 100% !important; */
}
.btn--google > div {
margin: 0 auto;
}
.btn--outline:hover {
background: #4f46e5;
color: #ffffff;
}
/* Create Ad Button with Shine Animation */
.btn--create-ad {
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 0;
background: #ef4444;
border: none;
border-radius:50px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn--create-ad:hover {
background: #ff7878;
animation: none;
}
/* Shine effect - блики внутри кнопки */
.btn--create-ad::before {
content: '';
position: absolute;
top: -20%;
left: -28%;
width: 20%;
height: 140%;
background: rgba(255, 255, 255, 0.28);
transform: skewX(-24deg) translateX(0);
pointer-events: none;
z-index: 1;
animation: shine 2s linear infinite;
}
/* Shine animation keyframes - блик движется внутри кнопки */
@keyframes shine {
0% {
transform: skewX(-24deg) translateX(0);
}
35%,
100% {
transform: skewX(-24deg) translateX(760%);
}
}
/* Desktop hover: darken the button and add crisp particles inside it. */
@media (min-width: 1024px) {
.btn--create-ad:hover:not([title*="верификация"]) {
background: #c81e2d;
animation: none;
}
.btn--create-ad::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
background:
radial-gradient(circle at 14% 28%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
radial-gradient(circle at 31% 70%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
radial-gradient(circle at 48% 24%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
radial-gradient(circle at 67% 64%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px);
}
.btn--create-ad:hover:not([title*="верификация"])::after {
opacity: 1;
animation: create-ad-particles 0.8s steps(2, end) infinite;
}
}
@keyframes create-ad-particles {
0% {
transform: translate(0, 1px);
opacity: 0.35;
}
50% {
transform: translate(1px, -1px);
opacity: 0.9;
}
100% {
transform: translate(-1px, 0);
opacity: 0.45;
}
}
/* Subtle pulse animation for create ad button */
@keyframes subtle-pulse {
0% {
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
50% {
box-shadow: 0 4px 20px rgba(255, 120, 120, 0.4), 0 4px 25px rgba(239, 68, 68, 0.3);
}
100% {
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}
}
/* Icon spacing and alignment */
.btn--create-ad .material-icons {
margin-right: 0;
font-size: 18px;
position: relative;
z-index: 2;
vertical-align: middle;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Text alignment */
.btn--create-ad span:not(.material-icons) {
position: relative;
z-index: 2;
vertical-align: middle;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* Button requiring verification */
.btn--create-ad[title*="верификация"] {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
border: none !important;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}
.btn--create-ad[title*="верификация"]:hover {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
box-shadow: 0 6px 25px rgba(245, 158, 11, 0.5) !important;
}
.btn--large {
padding: 12px 24px;
font-size: 16px;
}
.btn--small {
padding: 8px 16px;
font-size: 14px;
}
.btn--full {
width: 100%;
}
/* Main Content */
.main {
min-height: calc(100vh - 140px);
margin-top: 80px; /* Отступ для фиксированного header */
}
/* ===== Error pages (403, 404) — full-width block inside layout ===== */
.main:has(.error-page) {
display: flex;
flex-direction: column;
flex: 1 0 auto;
min-height: calc(100vh - 80px);
}
body:has(.error-page) .development-banner {
margin-top: 0;
}
.error-page {
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 40px 0 56px;
box-sizing: border-box;
background: linear-gradient(180deg, #f5f3ff 0%, #eef2ff 45%, #ffffff 100%);
}
.error-page .container {
display: flex;
justify-content: center;
width: 100%;
}
.error-content {
text-align: center;
max-width: 520px;
width: 100%;
padding: 48px 40px;
background: #ffffff;
border-radius: 16px;
box-shadow:
0 10px 40px rgba(79, 70, 229, 0.1),
0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(79, 70, 229, 0.08);
}
.error-page .error-icon {
width: 88px;
height: 88px;
margin: 0 auto 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.error-page .error-icon .material-icons {
font-size: 44px;
}
.error-page--403 .error-icon {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
color: #ffffff;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.32);
}
.error-page--403 .error-icon .material-icons {
color: #ffffff;
}
.error-page--rate-limit .error-icon {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}
.error-page--404 .error-icon {
background: #fef2f2;
color: #ef4444;
}
.error-page--404 .error-icon .material-icons {
color: #ef4444;
}
.error-page .error-code {
font-size: 64px;
font-weight: 700;
line-height: 1;
margin: 0 0 12px;
letter-spacing: -0.03em;
}
.error-page--403 .error-code {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.error-page--rate-limit .error-code {
background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.error-page--404 .error-code {
color: #ef4444;
}
.error-page .error-heading {
font-size: 26px;
font-weight: 600;
color: #111827;
margin: 0 0 12px;
line-height: 1.25;
}
.error-page .error-text {
font-size: 16px;
color: #6b7280;
margin: 0 0 32px;
line-height: 1.6;
}
.error-page .error-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.error-page .error-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
border: 2px solid transparent;
cursor: pointer;
box-sizing: border-box;
}
.error-page .error-actions .btn .material-icons {
font-size: 20px;
}
.error-page .error-actions .btn--primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #ffffff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.error-page .error-actions .btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.42);
}
.error-page .error-actions .btn--outline {
background: #ffffff;
color: #4f46e5;
border-color: #4f46e5;
}
.error-page .error-actions .btn--outline:hover {
background: #4f46e5;
color: #ffffff;
}
@media (max-width: 600px) {
.error-page {
padding: 24px 0 40px;
}
.error-content {
padding: 32px 22px;
border-radius: 14px;
}
.error-page .error-code {
font-size: 52px;
}
.error-page .error-heading {
font-size: 22px;
}
.error-page .error-icon {
width: 76px;
height: 76px;
}
.error-page .error-icon .material-icons {
font-size: 38px;
}
.error-page .error-actions {
flex-direction: column;
align-items: stretch;
}
.error-page .error-actions .btn {
width: 100%;
}
}
/* Home Layout */
.home-layout {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
margin-top: 24px;
position: relative;
overflow: visible;
}
.home-layout--no-sidebar {
grid-template-columns: 1fr;
}
.home-sidebar-column {
width: 100%;
min-width: 0;
}
/* Desktop home: CTA card stays under the header while scrolling the feed */
@media (min-width: 1024px) {
.home-layout .home-sidebar-column {
align-self: start;
position: sticky;
top: 100px;
z-index: 10;
}
}
/* Left Sidebar */
.leftside {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
height: fit-content;
position: sticky;
top: 100px;
width: 100%;
box-sizing: border-box;
}
.site-feedback-card {
margin-bottom: 16px;
padding: 16px;
border-radius: 18px;
background: #edecff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.site-feedback-card__title {
margin: 0 0 8px 0;
font-size: 18px;
line-height: 1.2;
color: #1f2937;
}
.site-feedback-card__text {
margin: 0 0 12px 0;
color: #374151;
line-height: 1.4;
}
/* Public rating aggregate — shown on both the "rate us" prompt and the
"thanks" block. Renders as "★ 4.7 На основе 232 отзывов" in one line. */
.site-feedback-card__stats {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px 0;
color: #1f2937;
line-height: 1.2;
}
.site-feedback-card__stars {
color: #f4b400;
font-size: 16px;
line-height: 1;
}
.site-feedback-card__avg {
font-weight: 700;
font-size: 16px;
color: #1f2937;
}
.site-feedback-card__count {
color: #6b7280;
font-size: 14px;
}
/* Compact thank-you block: no description, just title + aggregate */
.site-feedback-card--thanked .site-feedback-card__stats {
margin-bottom: 0;
}
.site-feedback-card__btn {
width: 100%;
}
/* Android APK CTA below site feedback prompt (home sidebar) */
.home-get-apk-link {
display: block;
margin-top: 12px;
line-height: 0;
text-decoration: none;
outline-offset: 2px;
}
.home-get-apk-link img {
display: block;
width: 280px;
max-width: 100%;
height: auto;
aspect-ratio: 280 / 83;
}
.home-get-apk-link--mobile {
align-self: center;
}
.home-get-apk-link--mobile img {
width: 304px;
aspect-ratio: 304 / 83;
}
/* After successful site rating: same footprint and alignment as the rating prompt */
.site-feedback-card--thanked .site-feedback-card__text--thanks {
margin-bottom: 0;
}
.site-feedback-popup {
z-index: 10050 !important;
}
/* Keep hidden by default; open only after "Оценить" click */
.modal-overlay.site-feedback-popup {
display: none !important;
}
.modal-overlay.site-feedback-popup.is-open {
display: flex !important;
}
.site-feedback-popup .modal-content {
max-width: 560px !important;
}
.user-rating-inline {
display: inline-flex;
align-items: center;
gap: 4px;
color: #1f2937;
font-size: 14px;
margin-top: 4px;
}
.user-rating-inline .material-icons {
font-size: 16px;
color: #f4b400;
}
.user-rating-link {
color: #4f46e5;
text-decoration: none;
}
.user-rating-link:hover {
color: #4f46e5;
text-decoration: underline;
}
.user-reviews-popup {
z-index: 10060 !important;
}
.modal-overlay.user-reviews-popup {
display: none !important;
}
.modal-overlay.user-reviews-popup.is-open {
display: flex !important;
}
.user-reviews-popup .modal-content {
max-width: 640px !important;
}
.user-reviews-summary {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-size: 18px;
}
.user-reviews-summary .material-icons {
color: #f4b400;
}
.user-reviews-list {
max-height: 420px;
overflow-y: auto;
}
.user-review-item {
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 12px;
margin-bottom: 10px;
background: #fff;
color: #111827;
}
.user-review-item__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.user-review-item__head strong {
color: #111827;
font-weight: 600;
}
.user-review-item__head span {
color: #6b7280;
font-size: 12px;
}
.user-review-item__rating {
display: inline-flex;
align-items: center;
gap: 2px;
color: #1f2937;
font-weight: 600;
}
.user-review-item__rating .material-icons {
font-size: 16px;
color: #f4b400;
}
.user-review-item__comment {
margin: 8px 0 0 0;
color: #374151;
line-height: 1.4;
}
.user-reviews-empty {
color: #6b7280;
padding: 12px 0;
}
.user-reviews-popup .modal-body {
color: #111827;
}
.user-reviews-summary strong {
color: #111827;
}
.site-feedback-popup__body {
padding-top: 10px;
}
.site-feedback-modal__subtitle {
margin: 0 0 14px 0;
color: #4b5563;
font-size: 18px;
line-height: 1.25;
}
.site-feedback-rating {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-bottom: 8px;
}
.site-feedback-rating__btn {
height: 72px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 28px;
font-weight: 600;
color: #262a30;
cursor: pointer;
}
.site-feedback-rating__btn.active {
border-color: #4f46e5;
background: #eef2ff;
color: #312e81;
}
.site-feedback-rating-labels {
display: flex;
justify-content: space-between;
gap: 12px;
color: #6b7280;
font-size: 14px;
margin-bottom: 14px;
}
.site-feedback-modal__label {
display: block;
margin-bottom: 8px;
font-size: 15px;
color: #313742;
}
.site-feedback-modal__textarea {
width: 100%;
min-height: 88px;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 10px 12px;
resize: vertical;
font-size: 16px;
}
.site-feedback-modal__counter {
margin-top: 6px;
font-size: 13px;
color: #6b7280;
}
.site-feedback-modal__submit {
width: 100%;
margin-top: 14px;
}
.site-feedback-modal__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Deactivation modal — rating buttons */
.deactivate-rating {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-bottom: 8px;
}
.deactivate-rating__btn {
height: 64px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 24px;
font-weight: 600;
color: #262a30;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.deactivate-rating__btn:hover {
border-color: #a5b4fc;
background: #f5f3ff;
}
.deactivate-rating__btn.active {
border-color: #4f46e5;
background: #eef2ff;
color: #312e81;
}
.deactivate-rating-labels {
display: flex;
justify-content: space-between;
gap: 12px;
color: #6b7280;
font-size: 13px;
margin-bottom: 14px;
}
/* Deactivation modal — stacked footer buttons */
.deactivate-modal-footer {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.deactivate-modal-footer .btn {
width: 100%;
justify-content: center;
}
.filters-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0 0 20px;
}
.filters-title .material-icons {
font-size: 20px;
color: #4f46e5;
}
.filter-group {
margin-bottom: 24px;
}
.filter-group__title {
font-size: 14px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
}
/* Filter Form Styles */
.filter-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.filter-row {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.filter-input {
flex: 1;
min-width: 0; /* Позволяет flex-элементам сжиматься */
max-width: 50%; /* Ограничиваем максимальную ширину */
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.filter-input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.filter-select {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
background-color: #ffffff;
color: #111827;
transition: border-color 0.2s ease;
box-sizing: border-box;
cursor: pointer;
}
.filter-select:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.filter-select:hover {
border-color: #9ca3af;
}
.category-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.category-filter-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
color: #111827;
transition: all 0.2s ease;
}
.category-filter-item:hover {
background: #f3f4f6;
border-color: #4f46e5;
color: #4f46e5;
}
.category-filter-item .material-icons {
font-size: 20px;
color: #6b7280;
}
.category-filter-item:hover .material-icons {
color: #4f46e5;
}
.category-name {
flex: 1;
font-weight: 500;
}
/* Main Content Area */
.main-content {
min-height: calc(100vh - 200px);
display: block;
visibility: visible;
opacity: 1;
width: 100%;
}
/* Latest Listings Section */
.latest-listings {
display: block;
visibility: visible;
opacity: 1;
width: 100%;
position: relative;
z-index: 1;
}
/* No Listings Message */
.no-listings-message {
text-align: center;
padding: 60px 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
.no-listings-icon {
margin-bottom: 24px;
}
.no-listings-icon .material-icons {
font-size: 64px;
color: #d1d5db;
}
.no-listings-message h3,
.no-listings-message .no-listings-message__title {
font-size: 24px;
font-weight: 600;
color: #111827;
margin: 0 0 12px;
}
.no-listings-message p {
font-size: 16px;
color: #6b7280;
margin-bottom: 24px;
}
/* Home Page */
.home-page {
padding: 24px 0;
}
.search-page__heading {
margin: 0 0 20px;
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
font-weight: 700;
color: #111827;
line-height: 1.3;
}
/* Homepage categories block — desktop (see .categories-hero.desktop-only in layout) */
.categories-hero {
position: relative;
margin-bottom: 32px;
padding-top: 0px;
z-index: 1;
}
.categories-hero__inner {
}
.categories-hero__head {
margin-bottom: 20px;
}
.categories-hero__title {
margin: 0 0 6px;
font-size: 1.25rem;
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.3;
}
.categories-hero__lead {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: #6b7280;
}
.categories-hero__categories {
position: relative;
min-width: 0;
z-index: 1;
}
/* Keyframe animations */
@keyframes float {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
}
25% {
transform: translateY(-30px) translateX(15px) scale(1.05);
}
50% {
transform: translateY(-15px) translateX(-10px) scale(0.95);
}
75% {
transform: translateY(10px) translateX(5px) scale(1.02);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.2;
transform: scale(1.1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
50% {
box-shadow: 0 0 40px rgba(255, 255, 255, 0.2), 0 0 60px rgba(255, 255, 255, 0.1);
}
}
@keyframes cardFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-3px) rotate(0.5deg);
}
50% {
transform: translateY(-1px) rotate(0deg);
}
75% {
transform: translateY(-4px) rotate(-0.5deg);
}
}
@keyframes wave {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
}
@keyframes drift {
0% {
transform: translateX(0px) translateY(0px);
}
25% {
transform: translateX(10px) translateY(-5px);
}
50% {
transform: translateX(-5px) translateY(10px);
}
75% {
transform: translateX(15px) translateY(-8px);
}
100% {
transform: translateX(0px) translateY(0px);
}
}
@keyframes iconPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
}
}
/* Homepage category grid + links (desktop section only in markup) */
.categories-hero .categories-cloud {
position: relative;
inset: auto;
z-index: 1;
overflow: visible;
}
.categories-hero .categories-cloud--static {
display: flex;
align-items: stretch;
gap: 10px;
width: 100%;
}
.categories-hero .categories-cloud__items {
order: 1;
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
align-content: start;
min-width: 0;
}
.categories-hero .category-tag {
position: relative;
left: auto;
top: auto;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
width: 100%;
padding: 12px 14px;
text-decoration: none;
border-radius: 18px;
font-weight: 400;
font-size: 14px;
line-height: 1.35;
color: #1f2937;
cursor: pointer;
white-space: normal;
word-break: break-word;
hyphens: auto;
border: 1px solid #4f46e5;
background: #ffffff;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
user-select: none;
}
.categories-hero .category-tag:hover {
transform: none;
background: #4f46e5;
color:#ffffff;
box-shadow: 0 1px 3px rgba(79, 70, 229, 0.12);
z-index: 1;
}
.categories-hero .category-tag:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.categories-hero .category-tag__img {
display: block;
width: 84px;
height: 84px;
object-fit: contain;
border-radius: 18px;
}
.categories-hero .category-tag__name {
line-height: 1.35;
color: #111827;
}
/* One informative tile fills the free desktop space after «Другое». */
.categories-hero .homepage-statistics {
order: 2;
flex: 0 0 210px;
align-self: stretch;
box-sizing: border-box;
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
min-height: 66px;
padding: 18px 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px;
color: #4f46e5;
background: #ffffff;
box-shadow: 0 12px 28px rgba(27, 23, 89, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
overflow: hidden;
position: relative;
}
.categories-hero .homepage-statistics::after {
}
.homepage-statistics__content {
min-width: 0;
}
.homepage-statistics__line {
margin: 0;
}
.homepage-statistics__eyebrow {
margin: 0 0 12px;
color: #c7d2fe;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.25;
text-transform: uppercase;
}
.homepage-statistics__line {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
column-gap: 7px;
align-items: start;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
line-height: 1.3;
}
.homepage-statistics__line:last-child {
margin-bottom: 0;
}
.homepage-statistics__line-icon {
grid-row: 1 / span 2;
padding-top: 1px;
color: #6b7280;
font-size: 18px;
}
.homepage-statistics__line strong {
display: block;
margin-bottom: 1px;
color: #111827;
font-size: 16px;
font-weight: 500;
letter-spacing: -0.01em;
}
.homepage-statistics__line .stat-value {
color: #ef4444;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
}
@media (max-width: 1279px) and (min-width: 1024px) {
.categories-hero .homepage-statistics {
flex-basis: 200px;
}
}
@media (min-width: 1280px) {
.categories-hero .categories-cloud__items {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding-top: 10px;
}
.categories-hero .homepage-statistics {
margin-top: 10px;
}
}
/* Desktop category tags use the same visual contract as .btn--primary. */
@media (min-width: 1024px) {
/* The fixed header already reserves the desktop top offset via .main;
do not add a second white gap before the full-width categories surface. */
.home-page {
padding-top: 0;
}
.main:has(.home-page) {
margin-top: 64px;
}
/* Full-width desktop surface for the homepage category navigation. */
.categories-hero {
isolation: isolate;
padding: 32px 0 0;
}
.categories-hero::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
width: 99.15vw;
transform: translateX(-50%);
/* background: #4f46e5;
background-image: linear-gradient(135deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 30%) 100%), url(/assets/images/wallpaper.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat; */
}
.categories-hero .category-tag {
align-items: center;
justify-content: flex-start;
gap: 8px;
height: 40px;
min-width: 0;
padding: 8px 16px;
border: none;
border-radius: 18px;
background: #ffffff;
color: #4f46e5;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.categories-hero .category-tag:hover {
background: #ffffff;
color: #ef4444;
box-shadow: none;
}
.categories-hero .category-tag:hover .category-tag__name {
color: #ef4444;
}
.categories-hero .category-tag__img {
flex: 0 0 84px;
width: 84px;
height: 84px;
object-fit: contain;
border-radius: 18px;
}
.categories-hero .category-tag__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.50s ease;
}
/* Category and subcategory navigation, including auction catalogs. */
.home-page .subcategory-card,
.category-page .subcategory-card {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
min-width: 0;
height: 40px;
min-height: 40px;
padding: 8px 16px;
box-sizing: border-box;
border: 1px solid #4f46e5;
border-radius: 50px;
background: #4f46e5;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
box-shadow: none;
}
.home-page .subcategory-card:hover,
.category-page .subcategory-card:hover {
background: #6057f5;
border-color: #6057f5;
color: #ffffff;
box-shadow: none;
transform: none;
}
.home-page .subcategory-card > .material-icons,
.category-page .subcategory-card > .material-icons {
flex: 0 0 auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: currentColor;
font-size: 20px;
line-height: 1;
}
.home-page .subcategory-card__content,
.category-page .subcategory-card__content {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.home-page .subcategory-card__title,
.category-page .subcategory-card__title {
min-width: 0;
margin: 0;
overflow: hidden;
color: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The primary-button contract has one leading icon; hide the navigation
chevron so long labels retain the available single-line width. */
.home-page .subcategory-card__chevron,
.category-page .subcategory-card__chevron {
display: none;
}
}
.section-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
color: #111827;
margin: 0 0 24px;
}
.section-title .material-icons {
font-size: 28px;
color: #4f46e5;
}
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
/* Recently Viewed */
.recently-viewed {
margin-bottom: 10px;
max-width: 1006px;
}
/* Recently Viewed Slider - Desktop Only */
@media (min-width: 1024px) {
.recently-viewed-slider {
position: relative;
max-width: 100%;
overflow: hidden;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.slider-nav-container {
display: flex;
gap: 12px;
}
.slider-container {
position: relative;
width: 100%;
}
.slider-wrapper {
flex: 1;
overflow: hidden;
position: relative;
}
.slider-track {
display: flex;
transition: transform 0.3s ease;
gap: 16px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: grab;
}
.slider-track:active {
cursor: grabbing;
}
.slider-item {
flex: 0 0 calc(20% - 12.8px); /* Show 5 cards at once, but scroll by 1 */
min-width: 0;
}
.slider-item .item-card {
position: relative;
background: #ffffff;
border: 0px solid #e5e7eb;
border-radius: 18px 18px 0px 0px;
overflow: hidden;
transition: all 0.2s ease;
display: block;
visibility: visible;
opacity: 1;
height: 100%;
}
.slider-item .item-card:hover {
}
.slider-item .item-card__link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.slider-item .item-card:hover .item-card__title {
color: #4f46e5;
}
.slider-item .item-card__image {
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.slider-item .item-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease, opacity 0.3s ease;
border-radius: 0px 0px 18px 18px !important;
}
.slider-item .item-card__image img.lazy {
opacity: 0.7;
filter: blur(2px);
}
.slider-item .item-card__image img.loaded {
opacity: 1;
filter: none;
border-radius: 18px !important;
}
.slider-item .item-card:hover .item-card__image img {
transform: none;
border-radius: 18px !important;
}
.slider-item .no-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #9ca3af;
background: #f8fafc;
}
.slider-item .item-card__badge {
position: absolute;
top: 0px;
left: 0px;
padding: 6px 14px;
border-radius: 18px;
font-size: 12px;
font-weight: 600;
}
.slider-item .item-card__badge--featured {
background: #fbbf24;
color: #92400e;
}
.slider-item .item-card__badge--company {
background: #4f46e5;
color: #ffffff;
top: 0px;
left: 0px;
z-index: 2;
}
.slider-item .item-card__content {
padding: 16px 0px 0px 0px;
}
.slider-item .item-card__title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hard clamp for "Recently viewed" titles */
.slider-item .recently-viewed__title {
line-height: 1.4;
max-height: calc(1.4em * 3);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-word;
}
.slider-item .item-card__price {
font-size: 18px;
font-weight: 700;
color: #111827;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.slider-item .item-card:hover .item-card__price {
color: #111827;
}
.slider-item .item-card__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 0;
font-size: 14px;
color: #6b7280;
}
.slider-item .item-card__time {
font-size: 11px;
color: #9ca3af;
}
/* Slider Navigation */
.slider-nav {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #c4c0ff;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: #1f2937;
backdrop-filter: blur(8px);
flex-shrink: 0;
}
.slider-nav:hover:not(:disabled) {
color: #4f46e5;
border: 1px solid #4f46e5;
}
.slider-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.5);
border-color: #d1d5db;
color: #9ca3af;
}
.slider-nav:disabled:hover {
transform: none;
background: rgba(255, 255, 255, 0.5);
color: #9ca3af;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.slider-nav .material-icons {
font-size: 20px;
}
/* Hide mobile scroll on desktop */
.recently-viewed .items-scroll-container {
display: none !important;
}
}
.items-scroll-container {
position: relative;
overflow: hidden;
margin: 0 -16px;
padding: 0 16px;
width: 100%;
}
/* Эффект полупрозрачности для правого края */
.items-scroll-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 120px;
background: linear-gradient(to left, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
pointer-events: none;
z-index: 2;
transition: opacity 0.3s ease;
border-radius: 0 12px 12px 0;
}
/* Эффект полупрозрачности для левого края */
.items-scroll-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 120px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
pointer-events: none;
z-index: 2;
transition: opacity 0.3s ease;
border-radius: 12px 0 0 12px;
}
/* Скрыть градиенты когда прокрутка достигла концов */
.items-scroll-container.scrolled-to-end::after {
opacity: 0;
}
.items-scroll-container.scrolled-to-start::before {
opacity: 0;
}
/* Кнопки навигации для скролла */
.items-scroll-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.95);
border: 2px solid #4f46e5;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
color: #4f46e5;
backdrop-filter: blur(8px);
/* Принудительные стили для кликабельности */
pointer-events: auto !important;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.items-scroll-nav:hover {
background: #4f46e5;
color: #ffffff;
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
transform: translateY(-50%) scale(1.05);
}
.items-scroll-nav--prev {
left: 8px;
}
.items-scroll-nav--next {
right: 8px;
}
.items-scroll-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
background: rgba(255, 255, 255, 0.5);
border-color: #d1d5db;
color: #9ca3af;
}
.items-scroll-nav:disabled:hover {
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.5);
color: #9ca3af;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.items-scroll {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 8px 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scroll-snap-type: x mandatory;
cursor: grab;
user-select: none;
width: 100%;
min-width: 100%;
position: relative;
}
.items-scroll:active {
cursor: grabbing;
}
.items-scroll.dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
/* Скрыть скроллбар для всех браузеров */
.items-scroll::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.items-scroll::-webkit-scrollbar-track {
display: none;
}
.items-scroll::-webkit-scrollbar-thumb {
display: none;
}
.items-scroll-container::before,
.items-scroll-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 20px;
z-index: 1;
pointer-events: none;
}
.items-scroll-container::before {
left: 0;
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.items-scroll-container::after {
right: 0;
background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
/* Categories Grid */
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 48px;
}
.category-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
text-decoration: none;
transition: all 0.2s ease;
}
.category-card:hover {
border-color: #4f46e5;
box-shadow: 0 4px 12px rgba(167, 58, 253, 0.1);
transform: translateY(-2px);
}
.category-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #f3f4f6;
border-radius: 18px;
color: #4f46e5;
}
.category-card__icon .material-icons {
font-size: 24px;
}
.category-card__content {
flex: 1;
}
.category-card__title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
.category-card__count {
font-size: 14px;
color: #6b7280;
}
/* Listings Grid */
.listings-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-bottom: 12px;
width: 100%;
visibility: visible;
opacity: 1;
}
.item-card {
position: relative;
background: #ffffff;
border: 0px solid #e5e7eb;
border-radius: 18px 18px 0px 0px;
overflow: hidden;
transition: all 0.2s ease;
display: block;
visibility: visible;
opacity: 1;
}
.item-card:hover {
}
.item-card--small {
min-width: calc(20% - 12.8px); /* 5 карточек в ряд с учетом gap */
max-width: calc(20% - 12.8px);
flex-shrink: 0;
scroll-snap-align: start;
width: calc(20% - 12.8px);
}
.items-scroll {
overflow-x: auto;
}
.item-card__link {
text-decoration: none;
color: inherit;
display: block;
}
.item-card__image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.item-card--small .item-card__image {
height: 120px;
}
.item-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease, opacity 0.3s ease;
border-radius: 0px 0px 18px 18px !important;
}
/* Single-photo cards use the same scaling as the multi-photo preview track
* (`object-fit: cover`). JS does not build a slider when `data-images-count <= 1`
* (see ad-card-hover.js initCard guard), so the main ![]()
/ is the only
* image element to style here. The surface-variant background fills the box for
* transparent PNG frames. The rule is intentionally not marked `!important` so
* the more specific override in ad-card-hover.css (loaded after this file)
* wins if that override needs to escalate specificity in the future. */
.item-card__image--single > img,
.item-card__image--single > picture > img {
object-fit: cover;
background: var(--m3-surface-variant, #e7e0ec);
}
.item-card__image img.lazy {
opacity: 0.7;
filter: blur(2px);
}
.item-card__image img.loaded {
opacity: 1;
filter: none;
z-index: 0;
border-radius: 18px !important;
}
.item-card:hover .item-card__image img {
transform: none;
border-radius: 18px !important;
}
.no-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #9ca3af;
background: #f8fafc;
}
.no-image .material-icons {
font-size: 48px;
}
.item-card__badge {
position: absolute;
top: 0px;
left: 0px;
padding: 6px 14px;
border-radius: 0px 0px 18px 0px;
font-size: 12px;
font-weight: 600;
}
.item-card__badge--featured {
background: #fbbf24;
color: #92400e;
}
.item-card__badge--company {
background: #4f46e5;
color: #ffffff;
top: 0px;
left: 0px;
z-index: 2;
}
.item-card__content {
padding: 16px 0px 0px 0px;
}
.item-card__title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 0 0 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.item-card:hover .item-card__title {
color: #4f46e5;
}
.item-card__price {
font-size: 18px;
font-weight: 700;
color: #111827;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.item-card:hover .item-card__price {
color: #111827;
}
/* Price with conversion styles */
.price-with-conversion {
display: flex;
flex-direction: column;
gap: 4px;
}
.price-main {
font-size: 20px;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.price-references {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #6b7280;
font-weight: 400;
line-height: 1.3;
}
.price-ref {
color: #6b7280;
}
.price-ref-separator {
color: #d1d5db;
font-size: 10px;
}
.price-negotiable {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.price-free {
font-size: 18px;
font-weight: 700;
color: #111827;
}
/* Item card specific price styles */
.item-card .price-with-conversion .price-main {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.item-card .price-references {
font-size: 12px;
}
.item-card:hover .price-main {
color: #111827;
}
/* Small card variations */
.item-card--small .price-with-conversion .price-main {
font-size: 16px;
}
.item-card--small .price-references {
font-size: 11px;
gap: 4px;
}
/* Profile listings price styles */
.profile-listings .item-card .price-with-conversion .price-main {
font-size: 20px;
}
.profile-listings .item-card .price-references {
font-size: 12px;
}
.item-card__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
font-size: 14px;
color: #6b7280;
}
.item-card__location {
display: flex;
align-items: center;
gap: 4px;
}
.item-card__location .material-icons {
font-size: 16px;
}
.item-card__seller-row {
padding: 0 12px 12px;
margin-top: -2px;
}
.item-card__seller-link {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: #4f46e5;
text-decoration: none;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.item-card__seller-link:hover {
text-decoration: underline;
}
.profile-email--muted {
color: #6b7280;
font-size: 14px;
margin: 0;
}
.seller-name__link {
color: inherit;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
}
.seller-name__link:hover {
color: #4f46e5;
text-decoration: underline;
}
.profile-listings .item-card--seller-public .item-card__actions {
z-index: 2;
}
.item-card__actions {
position: absolute;
top: 8px;
right: 8px;
}
.favorite-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #ffffff;
border: none;
border-radius: 50%;
color: #000000;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.favorite-btn:hover {
color: #ef4444;
background: #ffffff;
box-shadow: 0 4px 8px rgba(6, 182, 212, 0.2);
}
.favorite-btn.active {
color: #fff;
background: #ef4444;
box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
}
/* Pagination */
/* When infinite scroll is active — hide pagination entirely */
.infinite-scroll--hidden {
display: none !important;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 32px 0;
padding: 20px 0;
}
.pagination-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
height: 40px;
box-sizing: border-box;
}
.pagination-btn:hover {
background: #f9fafb;
border-color: #4f46e5;
color: #4f46e5;
}
.pagination-btn .material-icons {
font-size: 18px;
}
.pagination-info {
color: #6b7280;
font-size: 14px;
font-weight: 500;
}
/* Auth Pages - Updated to match main page */
.auth-page {
padding: 24px 0;
background: #ffffff;
min-height: calc(100vh - 140px);
}
.auth-container {
max-width: 1366px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
min-height: calc(100vh - 188px);
padding-top: 40px;
}
.auth-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 400px;
}
/* Benefits card - same style as auth-card */
.auth-benefits-card {
max-width: 500px;
flex: 1;
}
/* Verify Email Layout - Two cards side by side */
.auth-page .auth-container {
display: flex;
gap: 24px;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
.auth-page .auth-card:first-child {
margin-top: 0;
}
.auth-page .auth-benefits-card {
margin-top: 0;
}
/* Benefits list styling - Compact */
.benefits-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: 1px solid #f3f4f6;
border-radius: 50px;
transition: all 0.2s ease;
}
.benefit-item:hover {
border-color: #4f46e5;
background: #faf5ff;
}
.benefit-icon {
font-size: 20px;
color: #4f46e5;
flex-shrink: 0;
}
.benefit-text {
font-size: 14px;
color: #111827;
font-weight: 500;
}
.auth-card__header {
text-align: center;
margin-bottom: 32px;
}
.auth-title {
font-size: 28px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.auth-subtitle {
font-size: 16px;
color: #6b7280;
}
/* Forms */
.auth-form {
display: flex;
flex-direction: column;
gap: 0px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-size: 14px;
font-weight: 500;
color: #111827;
margin-top: 12px;
}
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 12px;
color: #9ca3af;
font-size: 18px;
z-index: 1;
}
.form-input {
width: 100%;
padding: 12px 12px 12px 16px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
}
.form-input:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(167, 58, 253, 0.1);
}
/* Registration email policy feedback (logic lives in register-email-validation.js). */
.form-input--error {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.form-help--error {
display: block;
margin-top: 6px;
color: #dc2626;
}
.form-help--error[hidden] {
display: none;
}
.password-toggle {
position: absolute;
right: 12px;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: color 0.2s ease;
}
.password-toggle:hover {
color: #6b7280;
}
.form-help {
font-size: 12px;
color: #6b7280;
}
/* Checkbox */
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 14px;
color: #111827;
line-height: 1.4;
padding: 20px 0px 20px 0px;
}
.checkbox-text {
flex: 1;
white-space: normal;
word-wrap: break-word;
line-height: 1.4;
}
.checkbox-input {
display: none;
}
.checkbox-custom {
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 4px;
position: relative;
transition: all 0.2s ease;
}
.checkbox-input:checked + .checkbox-custom {
background: #4f46e5;
border-color: #4f46e5;
}
.checkbox-input:checked + .checkbox-custom::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 12px;
font-weight: bold;
}
/* Free checkbox styles */
.checkbox-label--free {
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: #f9fafb;
transition: all 0.2s ease;
}
.checkbox-label--free:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.checkbox-label--free .checkbox-text {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: #374151;
}
.checkbox-label--free .checkbox-text .material-icons {
font-size: 20px;
color: #059669;
}
.checkbox-label--free .checkbox-input:checked ~ .checkbox-text {
color: #059669;
font-weight: 600;
}
.checkbox-label--free .checkbox-input:checked + .checkbox-custom {
background: #059669;
border-color: #059669;
}
/* User Type Selection */
.user-type-options {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Desktop: "Частное лицо" / "Юридическое лицо" side by side */
@media (min-width: 1024px) {
.user-type-options {
grid-template-columns: 1fr 1fr;
}
}
.user-type-option {
cursor: pointer;
border: 2px solid #e5e7eb;
border-radius: 18px;
padding: 16px;
transition: all 0.2s ease;
background: #ffffff;
}
.user-type-option:hover {
border-color: #4f46e5;
background: #f9fafb;
}
.user-type-option input[type="radio"] {
display: none;
}
.user-type-option:has(input[type="radio"]:checked) {
border-color: #4f46e5;
background: #eef2ff;
}
.user-type-option__content {
display: flex;
gap: 12px;
align-items: flex-start;
}
.user-type-option__content .material-icons {
font-size: 28px;
color: #6b7280;
transition: color 0.2s ease;
}
.user-type-option:has(input[type="radio"]:checked) .user-type-option__content .material-icons {
color: #4f46e5;
}
.user-type-option__text {
flex: 1;
}
.user-type-option__title {
font-size: 15px;
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
.user-type-option__description {
font-size: 13px;
color: #6b7280;
}
.user-type-option:has(input[type="radio"]:checked) .user-type-option__title {
color: #4f46e5;
}
/* User Type Locked State */
.user-type-locked {
margin-top: 8px;
}
.user-type-locked__notification {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
margin-bottom: 16px;
}
.user-type-locked__notification .material-icons {
color: #92400e;
font-size: 24px;
margin-top: 2px;
}
.user-type-locked__text {
flex: 1;
}
.user-type-locked__title {
font-size: 14px;
font-weight: 600;
color: #92400e;
margin-bottom: 4px;
}
.user-type-locked__description {
font-size: 13px;
color: #b45309;
line-height: 1.4;
}
.user-type-options--locked .user-type-option {
cursor: default;
position: relative;
}
.user-type-option--locked {
opacity: 0.6;
cursor: default !important;
}
.user-type-option--locked:hover {
border-color: #e5e7eb;
background: #ffffff;
transform: none;
}
.user-type-option--active {
border-color: #4f46e5;
background: #eef2ff;
opacity: 1;
}
.user-type-option--active .user-type-option__content .material-icons {
color: #4f46e5;
}
.user-type-option--active .user-type-option__title {
color: #4f46e5;
}
.user-type-option__badge {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #059669;
color: #ffffff;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.user-type-option__badge .material-icons {
font-size: 16px;
color: #ffffff;
}
/* User Type Upgrade Info */
.user-type-upgrade-info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
margin-top: 12px;
background: #e0f2fe;
border: 1px solid #0284c7;
border-radius: 8px;
}
.user-type-upgrade-info .material-icons {
color: #0369a1;
font-size: 20px;
margin-top: 1px;
}
.user-type-upgrade-info small {
flex: 1;
color: #075985;
font-size: 13px;
line-height: 1.5;
}
/* Verification Banner */
.verification-banner {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border-radius: 18px;
margin-bottom: 24px;
border: 2px solid;
}
.verification-banner__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.verification-banner__icon .material-icons {
font-size: 28px;
}
.verification-banner__content {
flex: 1;
}
.verification-banner__title {
font-size: 16px;
font-weight: 600;
margin-bottom: 6px;
}
.verification-banner__text {
font-size: 14px;
line-height: 1.6;
}
/* Verification Banner Variants */
.verification-banner--warning {
background: #fef3c7;
border-color: #f59e0b;
}
.verification-banner--warning .verification-banner__icon {
background: #fbbf24;
}
.verification-banner--warning .verification-banner__icon .material-icons {
color: #78350f;
}
.verification-banner--warning .verification-banner__title {
color: #78350f;
}
.verification-banner--warning .verification-banner__text {
color: #92400e;
}
.verification-banner--info {
background: #dbeafe;
border-color: #4f46e5;
}
.verification-banner--info .verification-banner__icon {
background: #60a5fa;
}
.verification-banner--info .verification-banner__icon .material-icons {
color: #1e3a8a;
}
.verification-banner--info .verification-banner__title {
color: #1e40af;
}
.verification-banner--info .verification-banner__text {
color: #1e3a8a;
}
.verification-banner--success {
background: #d1fae5;
border-color: #10b981;
}
.verification-banner--success .verification-banner__icon {
background: #34d399;
}
.verification-banner--success .verification-banner__icon .material-icons {
color: #064e3b;
}
.verification-banner--success .verification-banner__title {
color: #065f46;
}
.verification-banner--success .verification-banner__text {
color: #047857;
}
/* Company info section */
.company-info-section {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 20px;
margin-top: 8px;
}
.company-info-section__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.company-info-section__header .material-icons {
color: #4f46e5;
font-size: 24px;
}
.company-info-section__title {
font-size: 16px;
font-weight: 600;
color: #111827;
}
/* Company Verified Notice */
.company-verified-notice {
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.company-verified-notice__icon {
flex-shrink: 0;
margin-top: 2px;
}
.company-verified-notice__icon .material-icons {
color: #f59e0b;
font-size: 20px;
}
.company-verified-notice__content {
flex: 1;
}
.company-verified-notice__title {
font-size: 14px;
font-weight: 600;
color: #92400e;
margin: 0 0 4px 0;
}
.company-verified-notice__text {
font-size: 13px;
color: #92400e;
line-height: 1.4;
margin: 0;
}
/* Locked Form Inputs */
.form-input--locked {
background: #f3f4f6 !important;
color: #6b7280 !important;
cursor: not-allowed !important;
border-color: #d1d5db !important;
}
.form-input--locked:focus {
border-color: #d1d5db !important;
box-shadow: none !important;
}
.form-locked-indicator {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: #6b7280;
}
.form-locked-indicator .material-icons {
font-size: 16px;
color: #6b7280;
}
.company-document-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-top: 8px;
}
.company-document-preview__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #eef2ff;
border-radius: 8px;
}
.company-document-preview__icon .material-icons {
font-size: 28px;
color: #4f46e5;
}
.company-document-preview__info {
flex: 1;
}
.company-document-preview__name {
font-size: 14px;
font-weight: 500;
color: #111827;
margin-bottom: 4px;
}
.company-document-preview__meta {
font-size: 12px;
color: #6b7280;
}
.company-document-preview__actions {
display: flex;
gap: 8px;
}
.company-document-preview__btn {
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
background: #ffffff;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 4px;
}
.company-document-preview__btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
.company-document-preview__btn .material-icons {
font-size: 16px;
}
.company-document-preview__btn--danger {
color: #ef4444;
border-color: #fca5a5;
}
.company-document-preview__btn--danger:hover {
background: #fee2e2;
border-color: #ef4444;
}
.company-verification-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
}
.company-verification-status--pending {
background: #fef3c7;
color: #92400e;
}
.company-verification-status--verified {
background: #d1fae5;
color: #065f46;
}
.company-verification-status--rejected {
background: #fee2e2;
color: #991b1b;
}
.company-verification-status .material-icons {
font-size: 16px;
}
/* Tablet styles for user type and company fields */
@media (min-width: 769px) and (max-width: 1023px) {
.user-type-options {
gap: 12px;
}
.user-type-option {
padding: 14px;
}
.user-type-option__content .material-icons {
font-size: 24px;
}
.user-type-option__title {
font-size: 14px;
}
.user-type-option__description {
font-size: 12px;
}
.company-info-section {
padding: 18px;
}
.company-info-section__title {
font-size: 15px;
}
.company-document-preview {
padding: 10px;
}
.company-document-preview__icon {
width: 44px;
height: 44px;
}
.company-document-preview__icon .material-icons {
font-size: 24px;
}
.company-document-preview__name {
font-size: 13px;
}
.company-document-preview__meta {
font-size: 11px;
}
.company-verification-status {
font-size: 12px;
padding: 5px 10px;
}
}
/* Alerts */
.alert {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-bottom: 20px;
}
.create-item-form .alert {
margin-bottom: 16px;
margin-top: 0;
}
.alert--error {
background: #fef2f2;
color: #ef4444;
border: 1px solid #fecaca;
}
.alert .material-icons {
font-size: 18px;
}
/* Auth Links */
.auth-link {
color: #4f46e5;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.auth-link:hover {
color: #6057f5;
}
.auth-link--button {
background: none;
border: none;
color: #4f46e5;
cursor: pointer;
text-decoration: underline;
font-size: inherit;
font-family: inherit;
padding: 0;
margin: 0;
font-weight: 500;
transition: color 0.2s ease;
}
.auth-link--button:hover {
color: #6057f5;
text-decoration: underline;
}
.auth-card__footer {
text-align: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.auth-card__footer p {
margin-bottom: 8px;
color: #6b7280;
}
/* Footer */
.footer {
background: #111827;
color: #d1d5db;
padding: 48px 0 24px;
}
.footer__content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
margin-bottom: 32px;
}
.footer__logo .logo {
height: 40px;
margin-bottom: 16px;
}
.footer__description {
font-size: 14px;
line-height: 1.6;
color: #9ca3af;
}
.footer__payments {
margin-top: 20px;
}
.footer__payments-img {
display: block;
max-width: 100%;
width: auto;
height: auto;
}
/* Infinite scroll sentinel (trigger for lazy-loading next page) */
.listing-infinite-sentinel {
height: 1px;
width: 100%;
pointer-events: none;
user-select: none;
}
/* ==============================================================
Material 3 — Circular Progress Indicator для infinite scroll
============================================================== */
.listing-infinite-sentinel--loading {
height: auto;
min-height: 72px;
background: transparent;
pointer-events: none;
user-select: none;
}
.infinite-progress {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px 0;
width: 100%;
}
.infinite-progress__label {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--color-on-surface-variant, #666);
text-align: center;
}
.footer__links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
}
.footer__column h4 {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.footer__column ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__column a {
color: #9ca3af;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.footer__column a:hover {
color: #4f46e5;
}
.social-links {
display: flex;
gap: 12px;
margin-top: 12px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #374151;
border-radius: 8px;
color: #9ca3af;
transition: all 0.2s ease;
}
.social-link:hover {
background: #4f46e5;
color: #ffffff;
}
.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid #374151;
font-size: 14px;
flex-wrap: wrap;
gap: 16px;
}
.footer__copyright .footer__owner {
margin-top: 8px;
color: #9ca3af;
font-size: 12px;
line-height: 1.4;
}
.footer__copyright .footer__owner p {
margin: 0;
}
.footer__copyright .footer__owner p:first-child {
font-weight: 500;
margin-bottom: 2px;
}
.footer__legal {
display: flex;
gap: 24px;
}
.footer__legal a {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s ease;
}
.footer__legal a:hover {
color: #4f46e5;
}
/* Large Desktop Styles */
@media (min-width: 1200px) {
.listings-grid {
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.item-card--small {
min-width: calc(20% - 19px); /* 5 карточек в ряд на больших экранах */
max-width: calc(20% - 19px);
}
}
/* Desktop Styles - Ensure cards are visible */
@media (min-width: 769px) {
.listings-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 5px !important;
margin-bottom: 12px !important;
width: 100% !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
min-height: 200px !important;
}
.item-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: 100% !important;
background: #ffffff !important;
border: 0px solid #e5e7eb !important;
border-radius: 18px 18px 0px 0px !important;
overflow: hidden !important;
transition: all 0.2s ease !important;
}
.main-content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
.latest-listings {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
.home-layout {
display: grid !important;
grid-template-columns: 280px 1fr !important;
gap: 32px !important;
min-height: 600px !important;
}
/*
* Homepage without a sidebar (the homepage feed is the only consumer of
* `.home-layout`): the content must span the whole row instead of being
* squeezed into the 280px sidebar track. Declared with `!important` and
* after the two-column rule above, otherwise the rule above always wins.
*/
.home-layout--no-sidebar {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
min-height: 0 !important;
}
/* Category page specific styles */
.category-content {
display: grid !important;
grid-template-columns: 280px 1fr !important;
gap: 32px !important;
min-height: 600px !important;
}
.category-main {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
.category-listings {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 400px !important;
}
/* Force visibility for all listing-related elements */
.item-card__image,
.item-card__content,
.item-card__title,
.item-card__price,
.item-card__meta {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Tablet Styles */
@media (min-width: 481px) and (max-width: 768px) {
.listings-grid {
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
/* Profile List View - Tablet */
.profile-listings .item-card__image {
width: 150px;
min-width: 150px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.profile-listings .item-card__title {
font-size: 16px;
}
.profile-listings .item-card__price {
font-size: 18px;
}
/* Profile Action Buttons - Tablet */
.profile-listings .item-card__actions-top {
top: 10px;
right: 10px;
gap: 4px;
}
.action-icon-btn {
width: 36px;
height: 36px;
}
.action-icon-btn .material-icons {
font-size: 18px;
}
.profile-listings .item-card__actions-bottom {
bottom: 12px;
right: 12px;
gap: 6px;
}
.profile-listings .item-card__actions-bottom .btn {
padding: 6px 10px;
font-size: 10px;
min-height: 30px;
}
.profile-listings .item-card__actions-bottom .btn .material-icons {
font-size: 14px;
}
.profile-listings .item-card__actions-bottom .btn--bump-disabled {
font-size: 12px;
padding: 6px 8px;
}
.profile-listings .item-card__actions-bottom .btn--bump-purge {
font-size: 9px;
padding: 6px 8px;
}
.item-card--small {
min-width: calc(33.333% - 11px); /* 3 карточки в ряд */
max-width: calc(33.333% - 11px);
}
/* Tablet filter styles */
.filter-row {
flex-direction: row;
gap: 8px;
}
.filter-input {
max-width: 50%;
flex: 1;
}
/* Tablet radio button styles */
.checkbox-group .checkbox-custom {
width: 18px;
height: 18px;
}
.checkbox-group input[type="radio"]:checked + .checkbox-custom::after {
width: 6px;
height: 6px;
}
}
/* Large Desktop Styles for Categories Menu */
@media (min-width: 1200px) {
.categories-dropdown__menu .subcategories-grid {
column-count: 4 !important;
column-gap: 24px;
padding-bottom: 60px; /* Safe zone for large desktop scrolling */
}
}
/* Tablet Styles for Categories Menu */
@media (min-width: 769px) and (max-width: 1024px) {
.categories-dropdown__menu .subcategories-grid {
column-count: 4 !important;
column-gap: 16px;
padding-bottom: 50px; /* Safe zone for tablet scrolling */
}
}
/* Responsive Design - Tablet only */
@media (min-width: 769px) and (max-width: 1023px) {
.container {
padding: 0 16px;
}
.floating-shape {
opacity: 0.7;
}
.floating-shape--1,
.floating-shape--3,
.floating-shape--6 {
display: none;
}
/* Mobile header styles moved to mobile.css */
.header__search {
order: 3;
width: 100%;
max-width: none;
}
.search-input-group {
flex-direction: column;
gap: 8px;
max-width: none;
width: 100%;
}
.search-dropdown {
position: fixed;
top: 60px;
left: 16px;
right: 16px;
max-height: 60vh;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
/* Mobile header actions styles moved to mobile.css */
.action-label {
display: none;
}
/* Header icons on tablet */
.header-action-btn {
width: 36px;
height: 36px;
border-radius: 50px;
}
.header-action-btn .material-icons {
font-size: 18px;
}
.notification-badge {
min-width: 16px;
height: 16px;
font-size: 10px;
border-radius: 50px;
}
/* Tablet header actions styles moved to mobile.css */
.user-menu__dropdown {
min-width: 200px;
right: -10px;
}
.user-menu__toggle {
width: 36px;
height: 36px;
padding: 6px;
}
.user-avatar {
width: 28px;
height: 28px;
}
.user-avatar .material-icons {
font-size: 18px;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.categories-dropdown__menu {
position: absolute;
top: 48px;
left: -20px;
right: -20px;
width: 100vw;
max-width: 100vw;
border-radius: 0;
border-left: none;
border-right: none;
height: calc(100vh - 48px);
}
.categories-mega-menu {
flex-direction: column;
height: 100%;
}
.categories-mega-menu__left {
width: 100%;
border-right: none;
border-bottom: 1px solid #e5e7eb;
max-height: 40vh;
overflow-y: auto;
padding-bottom: 40px; /* Safe zone for mobile scrolling */
}
.category-link {
padding: 6px 12px;
min-height: 36px;
}
.category-link .material-icons {
font-size: 16px;
margin-right: 8px;
}
.category-name {
font-size: 13px;
}
.categories-mega-menu__right {
flex: 1;
height: 60vh;
overflow-y: auto;
padding-bottom: 40px; /* Safe zone for mobile scrolling */
}
.categories-dropdown__menu .subcategories-grid {
column-count: 3 !important;
column-gap: 16px;
padding-bottom: 40px; /* Safe zone for mobile scrolling */
}
.subcategory-group__title {
font-size: 15px;
margin-bottom: 6px;
}
.section-link {
font-size: 13px;
}
.categories-grid {
grid-template-columns: 1fr;
padding: 16px;
}
.listings-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Profile List View - Mobile */
.profile-listings .item-card {
flex-direction: column;
min-height: auto;
}
.profile-listings .item-card__link {
flex-direction: column;
}
.profile-listings .item-card__image {
width: 100%;
min-width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.profile-listings .item-card__content {
padding: 12px;
}
.profile-listings .item-card__title {
font-size: 16px;
margin-bottom: 6px;
}
.profile-listings .item-card__price {
font-size: 18px;
margin-bottom: 6px;
}
.profile-listings .item-card__meta {
gap: 12px;
margin-bottom: 6px;
font-size: 13px;
}
.profile-listings .item-card__stats {
gap: 16px;
}
/* 60-day visibility lifecycle for ordinary ads (mobile). */
.profile-listings .item-card__lifecycle {
margin-top: 8px;
padding: 6px 8px;
border-radius: 6px;
}
.profile-listings .item-card__lifecycle-label {
font-size: 12px;
margin-bottom: 4px;
}
.profile-listings .item-card__lifecycle-bar {
height: 5px;
}
.profile-listings .item-card__lifecycle-meta {
font-size: 11px;
gap: 4px;
}
/* (profile auction extras were inlined into `.item-card__stats`) */
/* Profile Action Buttons - Mobile */
.profile-listings .item-card__actions-top {
top: 8px;
right: 8px;
gap: 4px;
}
.action-icon-btn {
width: 32px;
height: 32px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.action-icon-btn .material-icons {
font-size: 16px;
}
.profile-listings .item-card__actions-bottom {
bottom: 8px;
right: 8px;
gap: 4px;
}
.profile-listings .item-card__actions-bottom .btn {
padding: 6px 8px;
font-size: 9px;
min-height: 28px;
}
.profile-listings .item-card__actions-bottom .btn .material-icons {
font-size: 14px;
}
.profile-listings .item-card__actions-bottom .btn--bump-disabled {
font-size: 12px;
padding: 6px;
}
.profile-listings .item-card__actions-bottom .btn--bump-disabled .material-icons {
font-size: 12px;
}
.profile-listings .item-card__actions-bottom .btn--bump-purge {
font-size: 8px;
padding: 6px;
}
.profile-listings .item-card__actions-bottom .btn--bump-purge .material-icons {
font-size: 12px;
}
.categories-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.footer__content {
grid-template-columns: 1fr;
gap: 32px;
}
.footer__bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.footer__legal {
justify-content: center;
order: 3;
}
.auth-card {
margin: 0 16px;
padding: 24px;
}
.items-scroll {
gap: 12px;
}
.items-scroll-container {
margin: 0 -8px;
padding: 0 8px;
}
.pagination {
flex-direction: column;
gap: 12px;
}
.pagination-btn {
padding: 10px 16px;
font-size: 14px;
}
.item-card--small {
min-width: calc(50% - 8px); /* 2 карточки в ряд на мобильных */
max-width: calc(50% - 8px);
}
/* Уменьшить градиент на мобильных */
.items-scroll-container::after {
width: 40px;
}
/* Home Layout Mobile */
.home-layout {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 16px;
}
.leftside {
position: static;
order: 2;
top: auto;
padding: 20px;
}
.main-content {
order: 1;
}
.filters-title {
font-size: 16px;
}
.category-filter-item {
padding: 10px 12px;
}
.categories-mega-menu__left {
max-height: 160px;
}
.category-link {
padding: 4px 10px;
min-height: 32px;
}
.category-link .material-icons {
font-size: 14px;
margin-right: 6px;
}
.category-name {
font-size: 12px;
}
.category-filter-item .material-icons {
font-size: 18px;
}
/* Mobile filter styles */
.filter-checkbox {
padding: 6px 0;
}
.filter-checkbox .checkmark {
width: 18px;
height: 18px;
}
.filter-checkbox input[type="radio"]:checked + .checkmark::after {
width: 8px;
height: 8px;
}
/* Mobile price inputs */
.filter-row {
flex-direction: column;
gap: 8px;
}
.filter-input {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 480px) {
.floating-shape {
opacity: 0.5;
}
.floating-shape--1,
.floating-shape--3,
.floating-shape--5,
.floating-shape--6 {
display: none;
}
/* Mobile header content styles moved to mobile.css */
.user-menu__dropdown {
min-width: 180px;
right: -15px;
}
.user-menu__toggle {
width: 32px;
height: 32px;
padding: 4px;
}
.user-avatar {
width: 24px;
height: 24px;
}
.user-avatar .material-icons {
font-size: 16px;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.header__logo .logo {
height: 32px;
}
.categories-dropdown__toggle {
padding: 8px 12px;
font-size: 13px;
height: 40px;
}
.search-input {
padding: 8px 12px;
font-size: 13px;
height: 40px;
}
.search-btn {
padding: 8px 12px;
height: 40px;
}
.voice-search-btn {
right: 40px;
width: 36px;
}
.voice-search-btn .material-icons {
font-size: 18px;
}
/* Header icons on mobile */
.header-action-btn {
width: 32px;
height: 32px;
border-radius: 50px;
}
.header-action-btn .material-icons {
font-size: 16px;
}
.notification-badge {
min-width: 14px;
height: 14px;
font-size: 9px;
border-radius: 7px;
border-width: 1px;
}
/* Mobile header actions styles moved to mobile.css */
.item-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.btn {
padding: 6px 12px;
font-size: 13px;
height: 40px;
}
.btn--create-ad .material-icons {
font-size: 16px;
margin-right: 0;
vertical-align: middle;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn--create-ad span:not(.material-icons) {
vertical-align: middle;
line-height: 1;
display: inline-flex;
align-items: center;
}
.listings-grid {
grid-template-columns: repeat(2, 1fr);
}
.item-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.item-card__image {
height: 150px;
}
.item-card--small .item-card__image {
height: 100px;
}
.section-title {
font-size: 20px;
}
.home-page {
padding: 24px 0;
}
/* Mobile Home Layout */
.home-layout {
gap: 0;
margin-top: 16px;
}
.leftside {
padding: 16px;
margin: 0 -16px;
border-radius: 0;
border-left: none;
border-right: none;
}
.filters-title {
font-size: 14px;
margin-bottom: 16px;
}
.filter-group {
margin-bottom: 20px;
}
.filter-group__title {
font-size: 14px;
margin-bottom: 12px;
}
.filter-row {
flex-direction: column;
gap: 8px;
}
.filter-input {
max-width: 100%;
width: 100%;
}
/* Mobile radio button styles */
.checkbox-group .checkbox-custom {
width: 20px;
height: 20px;
}
.checkbox-group input[type="radio"]:checked + .checkbox-custom::after {
width: 8px;
height: 8px;
}
.category-filter-item {
padding: 8px 10px;
font-size: 14px;
}
/* Very small screens filter styles */
.filter-checkbox {
padding: 8px 0;
}
.filter-checkbox .checkmark {
width: 20px;
height: 20px;
}
.filter-checkbox input[type="radio"]:checked + .checkmark::after {
width: 10px;
height: 10px;
}
.filter-input {
padding: 10px 12px;
font-size: 16px; /* Prevent zoom on iOS */
max-width: 100%;
width: 100%;
}
.filter-select {
padding: 10px 12px;
font-size: 16px; /* Prevent zoom on iOS */
width: 100%;
}
/* Mobile region selector styles */
.header__region {
order: 2;
width: 100%;
margin-bottom: 12px;
}
.region-selector__toggle {
width: 100%;
justify-content: center;
padding: 0;
font-size: 16px; /* Prevent zoom on iOS */
height: auto;
}
.region-dropdown {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 90%;
max-width: 400px;
max-height: 80vh;
overflow-y: auto;
}
.region-dropdown.active {
transform: translate(-50%, -50%) scale(1);
}
/* Very small screens radio button styles */
.checkbox-group .checkbox-custom {
width: 22px;
height: 22px;
}
.checkbox-group input[type="radio"]:checked + .checkbox-custom::after {
width: 10px;
height: 10px;
}
}
/* Item Detail Page Styles */
.item-detail-page {
padding: 24px 0;
background: #ffffff;
min-height: calc(100vh - 140px);
}
.item-detail-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
margin-top: 24px;
}
.item-detail-main {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 32px;
}
.item-images__main {
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
}
.item-images__main img {
width: 100%;
height: 400px;
object-fit: contain;
}
.item-images__thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 0;
}
.item-title {
font-size: 28px;
font-weight: 700;
color: #111827;
margin-bottom: 16px;
line-height: 1.3;
}
.item-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e5e7eb;
}
.item-meta__item {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 14px;
}
.item-meta__item .material-icons {
font-size: 18px;
}
.item-price {
margin-bottom: 32px;
}
/* Product price on detail page */
.product-price {
margin-bottom: 24px;
}
.product-price .price-with-conversion {
gap: 6px;
}
.product-price .price-main {
font-size: 28px;
font-weight: 700;
color: #1f2937;
}
.product-price .price-references {
font-size: 15px;
gap: 8px;
}
.product-price .price-negotiable {
font-size: 24px;
font-weight: 700;
color: #111827;
}
.product-price .price-free {
font-size: 24px;
font-weight: 700;
color: #111827;
}
.item-description,
.item-details {
margin-bottom: 32px;
}
.item-description h2,
.item-description h3,
.item-details h2,
.item-details h3 {
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0 0 16px;
}
/* Map Section */
.map-section {
margin-top: 24px;
margin-bottom: 32px;
padding: 20px;
background: #f9fafb;
border-radius: 18px;
border: 1px solid #e5e7eb;
}
.map-section h2,
.map-section h3 {
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0 0 16px;
display: flex;
align-items: center;
}
.map-section h2 .material-icons,
.map-section h3 .material-icons {
font-size: 20px;
margin-right: 8px;
color: #4f46e5;
}
/* VIN Section */
.vin-section {
margin-top: 24px;
margin-bottom: 32px;
padding: 20px;
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
border-radius: 18px;
border: 1px solid #e5e7eb;
}
.vin-section h2,
.vin-section h3 {
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0 0 16px;
display: flex;
align-items: center;
}
.vin-section h2 .material-icons,
.vin-section h3 .material-icons {
font-size: 20px;
margin-right: 8px;
color: #4f46e5;
}
.vin-container {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #ffffff;
border-radius: 50px;
border: 2px solid #e5e7eb;
margin-bottom: 8px;
}
.vin-number {
font-family: 'Courier New', monospace;
font-size: 18px;
font-weight: 600;
color: #111827;
letter-spacing: 1px;
flex: 1;
}
.btn-copy-vin {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-copy-vin:hover {
background: #4f46e5;
border-color: #4f46e5;
color: white;
}
.btn-copy-vin .material-icons {
font-size: 20px;
color: inherit;
}
.vin-help {
display: block;
color: #6b7280;
font-size: 12px;
margin-top: 4px;
}
.map-container {
width: 100% !important;
max-width: 100% !important;
overflow: hidden;
border-radius: 8px;
}
#property-map {
width: 100% !important;
max-width: 100% !important;
height: 300px;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.map-info {
margin-top: 12px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.map-coordinates {
font-size: 13px;
color: #6b7280;
font-family: 'Courier New', monospace;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.map-coordinates a {
color: #4f46e5;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.map-coordinates a:hover {
color: #4338ca;
text-decoration: underline;
}
.map-coordinates .material-icons {
font-size: 16px;
vertical-align: middle;
}
.item-detail-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
/* Create Item Page Styles */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-row--category {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (min-width: 769px) and (max-width: 1023px) {
.form-row--category {
grid-template-columns: 1fr;
}
}
.form-label.required::after {
content: ' *';
color: #ef4444;
}
.form-select {
width: 100%;
padding: 12px 36px 12px 16px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
background: #ffffff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
}
.form-select:focus {
border-color: #6057f5;
box-shadow: 0 0 0 3px rgba(167, 58, 253, 0.1);
}
.form-textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.form-textarea:focus {
border-color: #6057f5;
box-shadow: 0 0 0 3px rgba(167, 58, 253, 0.1);
}
.form-file {
width: 100%;
padding: 12px 16px;
border: 2px dashed #d1d5db;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
background: #f9fafb;
}
.form-file:focus,
.form-file:hover {
border-color: #6057f5;
background: #faf5ff;
}
.image-preview-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 16px;
margin-top: 16px;
}
.image-preview {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.remove-image {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.remove-image:hover {
background: rgba(0, 0, 0, 0.9);
}
.contact-info {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
.contact-info__text {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-size: 14px;
color: #111827;
}
.contact-info__list {
list-style: none;
margin-bottom: 16px;
}
.contact-info__list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 14px;
color: #111827;
}
.contact-info__list .material-icons {
font-size: 18px;
color: #6b7280;
}
.contact-info__link {
color: #6057f5;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
}
.contact-info__link:hover {
color: #6057f5;
}
/* Contact Method Options */
.contact-method-options {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.contact-method-option {
display: flex;
align-items: center;
cursor: pointer;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
transition: all 0.2s ease;
background: #ffffff;
}
.contact-method-option:hover {
border-color: #4f46e5;
background: #faf5ff;
}
.contact-method-option input[type="radio"] {
display: none;
}
.contact-method-option input[type="radio"]:checked + .contact-method-option__content {
color: #4f46e5;
}
.contact-method-option input[type="radio"]:checked ~ .contact-method-option {
border-color: #4f46e5;
background: #faf5ff;
}
.contact-method-option:has(input[type="radio"]:checked) {
border-color: #4f46e5;
background: #faf5ff;
}
.contact-method-option__content {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.contact-method-option__content .material-icons {
font-size: 24px;
color: #6b7280;
flex-shrink: 0;
}
.contact-method-option:has(input[type="radio"]:checked) .contact-method-option__content .material-icons {
color: #4f46e5;
}
.contact-method-option__title {
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
.contact-method-option__description {
font-size: 14px;
color: #6b7280;
line-height: 1.4;
}
.contact-method-option:has(input[type="radio"]:checked) .contact-method-option__title {
color: #4f46e5;
}
/* Desktop contact method options: keep both choices on one row. */
@media (min-width: 1024px) {
.contact-method-options {
flex-direction: row;
}
.contact-method-option {
flex: 1 1 0;
min-width: 0;
}
}
/* Contact Warning */
.contact-warning {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fef3c7;
border: 1px solid #f97316;
border-radius: 8px;
padding: 16px;
margin-top: 16px;
}
.contact-warning__icon {
flex-shrink: 0;
margin-top: 2px;
}
.contact-warning__icon .material-icons {
font-size: 20px;
color: #f97316;
}
.contact-warning__content {
flex: 1;
}
.contact-warning__title {
font-weight: 600;
color: #92400e;
margin-bottom: 4px;
font-size: 14px;
}
.contact-warning__text {
font-size: 14px;
color: #92400e;
line-height: 1.5;
}
/* Responsive Design for Contact Method - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.contact-method-options {
gap: 8px;
}
.contact-method-option {
padding: 12px;
}
.contact-method-option__content {
gap: 8px;
}
.contact-method-option__content .material-icons {
font-size: 20px;
}
.contact-method-option__title {
font-size: 14px;
}
.contact-method-option__description {
font-size: 13px;
}
.contact-warning {
padding: 12px;
gap: 8px;
}
.contact-warning__icon .material-icons {
font-size: 18px;
}
.contact-warning__title {
font-size: 13px;
}
.contact-warning__text {
font-size: 13px;
}
}
.form-actions {
display: flex;
gap: 16px;
padding-top: 24px;
}
/* Responsive for item detail - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.item-detail-content {
grid-template-columns: 1fr;
gap: 24px;
}
.item-detail-main {
padding: 20px;
}
.item-title {
font-size: 24px;
}
.item-meta {
flex-direction: column;
gap: 12px;
}
.item-images__main img {
height: 300px;
}
.product-price .price-main {
font-size: 24px;
}
.product-price .price-references {
font-size: 14px;
}
}
/* Items Grid - Same as Listings Grid */
.items-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-bottom: 32px;
}
/* Large Desktop Styles for Items Grid */
@media (min-width: 1200px) {
.items-grid {
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
}
/* Desktop Styles for Items Grid */
@media (min-width: 769px) {
.items-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 5px !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Tablet Styles for Items Grid */
@media (min-width: 481px) and (max-width: 768px) {
.items-grid {
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
}
/* Tablet Styles for Items Grid */
@media (min-width: 769px) and (max-width: 1023px) {
.items-grid {
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
}
/* Small Mobile Styles for Items Grid */
@media (max-width: 480px) {
.items-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Category Page Styles */
.category-page {
padding: 24px 0;
background: #ffffff;
min-height: calc(100vh - 140px);
}
/* Breadcrumbs */
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
margin-bottom: 24px;
font-weight: 400;
font-size: 12px;
line-height: 1.692em;
padding: 12px 0;
min-width: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.breadcrumbs::-webkit-scrollbar {
display: none;
}
.breadcrumb-link {
display: block;
flex: 0 0 auto;
min-width: 0;
max-width: min(280px, 38vw);
overflow: hidden;
font-weight: 400;
font-size: 12px;
line-height: 1.692em;
padding: 2px 10px;
border-radius: 50px;
background: #f1f3f5;
color: #4b5563;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
transition: color 0.2s ease;
}
.breadcrumb-link:hover {
color: #374151;
background: #e5e7eb;
text-decoration: none;
}
.breadcrumb-current {
display: block;
flex: 0 0 auto;
min-width: 0;
max-width: min(420px, 42vw);
overflow: hidden;
font-weight: 400;
font-size: 12px;
line-height: 1.692em;
padding: 2px 10px;
border-radius: 50px;
background: #f1f3f5;
color: #4b5563;
white-space: nowrap;
text-overflow: ellipsis;
}
.breadcrumbs .material-icons {
flex: 0 0 auto;
font-size: 16px;
color: #9ca3af;
}
.category-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
}
/* Catalog pages without desktop navigation (leaf sections, empty categories)
must use the full content width instead of an empty sidebar column. */
@media (min-width: 1024px) {
.category-content--no-sidebar {
grid-template-columns: 1fr;
}
}
/* Active listings count displayed as a compact superscript in category titles. */
.category-title__count {
display: inline-block;
margin-left: 6px;
color: var(--on-surface-variant, #6b7280);
font-size: 0.58em;
font-weight: 700;
line-height: 1;
vertical-align: super;
white-space: nowrap;
}
/* Sidebar */
.category-sidebar {
position: sticky;
top: 100px;
height: auto;
max-height: calc(100vh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.category-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Chromium/Safari */
}
.filters-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
}
.filters-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #111827;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.filters-title .material-icons {
font-size: 20px;
color: #6057f5;
}
.filter-group {
margin-bottom: 24px;
}
.filter-title {
font-size: 14px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
}
.price-inputs {
display: flex;
align-items: center;
gap: 8px;
}
.price-inputs input {
flex: 1;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
}
.price-inputs input:focus {
border-color: #6057f5;
}
.price-inputs span {
color: #6b7280;
font-weight: 500;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkbox-group .checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #111827;
cursor: pointer;
padding: 4px 0;
}
/* Radio button styles for filters */
.checkbox-group input[type="radio"] {
display: none;
}
.checkbox-group .checkbox-custom {
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 50%; /* Круглая форма для радиокнопок */
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
}
.checkbox-group input[type="radio"]:checked + .checkbox-custom {
background: #4f46e5;
border-color: #4f46e5;
}
.checkbox-group input[type="radio"]:checked + .checkbox-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #ffffff;
}
.checkbox-group .checkbox-label:hover .checkbox-custom {
border-color: #4f46e5;
}
/* Filter Checkboxes for Home Page */
.filter-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #111827;
cursor: pointer;
padding: 4px 0;
}
.filter-checkbox input[type="radio"] {
display: none;
}
.filter-checkbox .checkmark {
width: 16px;
height: 16px;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
}
.filter-checkbox input[type="radio"]:checked + .checkmark {
border-color: #4f46e5;
background-color: #4f46e5;
}
.filter-checkbox input[type="radio"]:checked + .checkmark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #ffffff;
}
.filter-checkbox:hover .checkmark {
border-color: #4f46e5;
}
.filter-actions {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
/* --------------------------------------------------------------------------
Horizontal catalog filter bar (category, section and search pages).
Reuses the .filters-card surface; only the layout changes: one row of pill
controls under the listing heading. Desktop-only — mobile/tablet keep the
M3 filter sheet markup and styles untouched.
-------------------------------------------------------------------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 12px 16px;
margin-bottom: 16px;
}
.filter-bar__control {
display: flex;
align-items: center;
}
/* Controls keep their natural width: the JS pass orders them from the widest
to the narrowest, and a full row wraps instead of shrinking the pills. */
.filter-bar > .filter-bar__control--range,
.filter-bar > .filter-bar__select {
flex: 0 0 auto;
}
/* Price and numeric property ranges: one pill that acts as a single field
(label + «От» + dash + «До»), so the inner inputs stay seamless. */
.filter-bar__control--range {
gap: 6px;
max-width: 100%;
height: 40px;
padding: 0 14px;
border: 1px solid #e5e7eb;
border-radius: 50px;
background: #f3f4f6;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.filter-bar__control--range:focus-within {
border-color: #6057f5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.filter-bar__label {
/* The filter name must stay fully readable: the fields give way instead. */
flex: 0 0 auto;
font-size: 14px;
font-weight: 500;
color: #6b7280;
white-space: nowrap;
}
.filter-bar__input {
flex: 1 1 auto;
width: 76px;
min-width: 44px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-family: inherit;
font-size: 14px;
line-height: 1.2;
color: #111827;
outline: none;
}
.filter-bar__input::placeholder {
color: #9ca3af;
}
/* Range pills stay visually compact: hide the native number spinners. */
.filter-bar__input::-webkit-outer-spin-button,
.filter-bar__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.filter-bar__input {
-moz-appearance: textfield;
}
.filter-bar__dash {
color: #9ca3af;
font-weight: 500;
}
/* Dropdowns: the default option carries the filter name instead of a heading. */
.filter-bar__select {
max-width: 240px;
height: 40px;
padding: 0 32px 0 14px;
border: 1px solid #d1d5db;
border-radius: 50px;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
font-family: inherit;
font-size: 14px;
color: #111827;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: border-color 0.2s ease;
}
.filter-bar__select:focus,
.filter-bar__select:hover {
border-color: #6057f5;
}
/* Applied filters stay visible: tinted surface, primary border, bold value.
Declared after :hover/:focus-within so the active state keeps winning. */
.filter-bar__select.is-active,
.filter-bar__control--range.is-active {
border-color: #4f46e5;
background-color: #eef2ff;
color: #3730a3;
font-weight: 600;
}
.filter-bar__control--range.is-active .filter-bar__label,
.filter-bar__control--range.is-active .filter-bar__dash {
color: #4f46e5;
font-weight: 600;
}
.filter-bar__control--range.is-active .filter-bar__input {
color: #3730a3;
font-weight: 600;
}
.filter-bar__actions {
/* Stays last whatever flex `order` the measured filter controls get. */
order: 9999;
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
/* Search page: the bar sits in a flex column, its own margin is not needed. */
.search-head .filter-bar {
margin-bottom: 0;
}
/* Main Content */
.category-main {
display: flex;
flex-direction: column;
gap: 0px;
}
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.sort-options {
display: flex;
align-items: center;
gap: 12px;
}
.profile-ads-header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn--bump-all {
padding: 8px 14px;
gap: 6px;
}
.profile-management {
margin-bottom: 12px;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.profile-management__header {
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.profile-management__title {
margin: 0;
font-size: 24px;
line-height: 1.2;
}
.profile-management__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
/* --- Weekly charges / mega-charge (cabinet) --- */
.profile-management--column {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.profile-management__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.profile-management--column .profile-management__actions {
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.profile-charges {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
border: 1px solid #e0e7ff;
color: #1e293b;
font-size: 14px;
line-height: 1.5;
}
.profile-charges__level {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.profile-charges__level strong {
color: #4338ca;
}
.profile-charges__refill {
margin: 2px 0 0;
color: #475569;
}
.profile-charges__hint {
margin: 6px 0 0;
color: #64748b;
font-size: 13px;
}
.mega-charge {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
}
.mega-charge__label {
font-size: 13px;
font-weight: 600;
color: #7c3aed;
}
.mega-charge__timer {
font-size: 12px;
color: #64748b;
}
.mega-charge__timer.is-ready {
color: #16a34a;
font-weight: 600;
}
.bump-selection {
font-size: 12px;
color: #64748b;
}
.bump-selection.is-ready {
color: #4338ca;
font-weight: 600;
}
/* --- Gamified resource gauges (profile «Управление»: energy + mega-charge) --- */
.profile-management.item-detail-main {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.resource-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
margin-bottom: 12px;
}
.resource-card {
--gauge-accent: #4f46e5;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid #e0e7ff;
background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
color: #1e293b;
min-width: 0;
}
.resource-card--mega {
border-color: #ede9fe;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}
.resource-card__visual {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.resource-card__info {
flex: 1 1 auto;
min-width: 0;
}
.resource-card__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.resource-card__title {
margin: 0;
font-size: 18px;
font-weight: 900;
letter-spacing: 0.06em;
color: var(--gauge-accent);
}
.resource-card__value {
margin: 0;
line-height: 1;
color: var(--gauge-accent);
}
.resource-card__value strong {
font-size: 27px;
font-weight: 900;
letter-spacing: 0.02em;
color: inherit;
}
.resource-card__value span {
margin-left: 2px;
font-size: 15px;
font-weight: 800;
color: var(--gauge-accent);
opacity: 0.7;
}
.resource-card__desc {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.45;
color: #64748b;
}
.resource-card__status {
margin: 6px 0 0;
font-size: 12px;
font-weight: 600;
color: #64748b;
}
.resource-card__status.is-ready {
color: #16a34a;
}
.resource-card__actions {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
/* The mega-charge label can grow to "Перезарядка через N дней" — let it wrap
inside the card instead of overflowing the pill. */
.resource-card__actions .btn--bump-all {
white-space: normal;
height: auto;
min-height: 40px;
line-height: 1.2;
justify-content: center;
align-items: center;
text-align: center;
text-indent: 0.06em; /* offsets the trailing letter-spacing, keeps content centred */
}
/* --- Mega-charge button: animated electricity + hover shake --- */
.btn--bump-all {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn--bump-all__inner {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* Bolder label with a subtle glow so it reads over the effects */
.btn--bump-all__text {
font-size: 16px;
font-weight: 900;
letter-spacing: 0.06em;
text-indent: 0.06em;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}
.btn--bump-all__inner .material-icons {
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
/* On hover the label and the bolt turn yellow like the lightning */
.btn--bump-all:not(.btn--disabled):hover .btn--bump-all__text,
.btn--bump-all:not(.btn--disabled):hover .material-icons {
color: #fde047;
text-shadow: 0 0 12px rgba(250, 204, 21, 0.9);
}
.btn--bump-all:not(.btn--disabled):hover .material-icons {
filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.95));
}
.btn--bump-all:not(.btn--disabled) {
background: #4f46e5;
border-color: #4f46e5;
color: #ffffff;
box-shadow: 0 0 8px rgba(79, 70, 229, 0.45);
animation: megaPulse 2.2s ease-in-out infinite;
}
/* Procedural lightning canvas (drawn along the button edges on hover) */
.mega-fx {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.btn--bump-all:not(.btn--disabled):hover .mega-fx {
opacity: 1;
}
/* Yellow glow on hover */
.btn--bump-all:not(.btn--disabled)::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse at 50% 50%, rgba(250, 204, 21, 0.4), transparent 72%);
opacity: 0;
transition: opacity 0.18s ease;
}
.btn--bump-all:not(.btn--disabled):hover::after {
opacity: 0.9;
animation: megaBoltGlow 0.35s steps(2, end) infinite;
}
.btn--bump-all:not(.btn--disabled):hover {
animation: megaShake 0.28s linear infinite, megaPulseYellow 1s ease-in-out infinite;
box-shadow: 0 0 12px rgba(250, 204, 21, 0.6), 0 0 26px rgba(250, 204, 21, 0.35);
}
.btn--bump-all:not(.btn--disabled):active {
filter: brightness(1.25);
}
@keyframes megaPulse {
0%, 100% { box-shadow: 0 0 8px rgba(79, 70, 229, 0.45); }
50% { box-shadow: 0 0 16px rgba(99, 102, 241, 0.75); }
}
@keyframes megaPulseYellow {
0%, 100% { box-shadow: 0 0 10px rgba(250, 204, 21, 0.5), 0 0 20px rgba(250, 204, 21, 0.3); }
50% { box-shadow: 0 0 18px rgba(253, 224, 71, 0.95), 0 0 34px rgba(250, 204, 21, 0.6); }
}
@keyframes megaBolts {
0% { background-position: 0 0, 0 0; }
100% { background-position: 40px -40px, -54px -54px; }
}
@keyframes megaBoltGlow {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.95; }
}
@keyframes megaShake {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(-1.6px, 1px) rotate(-0.7deg); }
40% { transform: translate(1.6px, -1px) rotate(0.7deg); }
60% { transform: translate(-1px, -1.1px) rotate(-0.45deg); }
80% { transform: translate(1px, 1.1px) rotate(0.45deg); }
}
/* Click burst: whole-screen shake + yellow sparks (no light flash) */
html.mega-shake {
animation: megaScreenShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.mega-burst {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
overflow: hidden;
}
.mega-burst__spark {
position: absolute;
left: var(--mb-x, 50%);
top: var(--mb-y, 50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #fffbeb, #facc15 45%, transparent 72%);
box-shadow: 0 0 8px rgba(250, 204, 21, 0.95), 0 0 16px rgba(250, 204, 21, 0.55);
transform: translate(-50%, -50%) rotate(var(--mb-angle, 0deg)) translateX(0) scale(0.5);
animation: megaSpark 0.72s ease-out forwards;
animation-delay: var(--mb-delay, 0s);
}
.mega-burst__spark--bolt {
width: 3px;
height: 16px;
border-radius: 2px;
background: linear-gradient(180deg, #fffbeb, rgba(250, 204, 21, 0.15));
box-shadow: 0 0 10px rgba(250, 204, 21, 0.95);
}
@keyframes megaScreenShake {
0%, 100% { transform: translate3d(0, 0, 0); }
12% { transform: translate3d(-8px, 5px, 0) rotate(-0.4deg); }
25% { transform: translate3d(7px, -6px, 0) rotate(0.4deg); }
37% { transform: translate3d(-7px, -4px, 0) rotate(-0.3deg); }
50% { transform: translate3d(6px, 6px, 0) rotate(0.35deg); }
62% { transform: translate3d(-5px, 3px, 0); }
75% { transform: translate3d(4px, -3px, 0); }
87% { transform: translate3d(-2px, 2px, 0); }
}
@keyframes megaSpark {
0% { transform: translate(-50%, -50%) rotate(var(--mb-angle, 0deg)) translateX(0) scale(0.5); opacity: 1; }
100% { transform: translate(-50%, -50%) rotate(var(--mb-angle, 0deg)) translateX(var(--mb-dist, 120px)) scale(1) rotate(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn--bump-all:not(.btn--disabled),
.btn--bump-all:not(.btn--disabled)::before,
.btn--bump-all:not(.btn--disabled)::after,
.btn--bump-all:not(.btn--disabled):hover,
html.mega-shake,
.mega-burst__spark {
animation: none !important;
}
}
/* Battery — 10 horizontal segment indicators */
.battery {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 40px;
}
.battery__cap {
display: block;
width: 16px;
height: 6px;
border-radius: 3px 3px 0 0;
background: var(--gauge-accent);
}
.battery__body {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2px;
width: 40px;
padding: 5px;
border: 3px solid var(--gauge-accent);
border-radius: 8px;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.06);
overflow: hidden;
}
.battery__cell {
display: block;
height: 7px;
border-radius: 3px;
background: #e5e7eb;
transform-origin: left center;
transition: transform 0.18s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.battery__cell.is-filled {
animation: gaugeCellIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.15) backwards;
animation-delay: calc(var(--i, 0) * 55ms);
}
.battery__cell--low.is-filled {
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}
.battery__cell--mid.is-filled {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.32);
}
.battery__cell--high.is-filled {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.32);
}
.battery__cell:hover,
.battery__cell.is-pop {
transform: scaleX(1.12) scaleY(1.25);
filter: brightness(1.12);
z-index: 2;
}
.battery.is-full .battery__body {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), inset 0 0 0 1px rgba(67, 56, 202, 0.06);
animation: gaugeFullPulse 2.4s ease-in-out infinite;
}
/* Accumulator — 20 square cell indicators with side terminals */
.accumulator-wrap {
position: relative;
display: flex;
align-items: center;
padding-top: 7px;
}
/* Two terminals on the top face, inset from the left/right edges. */
.accumulator__terminal {
position: absolute;
top: 0;
width: 16px;
height: 8px;
border-radius: 4px 4px 0 0;
background: var(--gauge-accent);
}
.accumulator__terminal--left {
left: 12px;
}
.accumulator__terminal--right {
right: 12px;
}
.accumulator {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
width: 84px;
padding: 6px;
border: 3px solid var(--gauge-accent);
border-radius: 10px;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.06);
overflow: hidden;
}
.accumulator__cell {
display: block;
aspect-ratio: 1 / 1;
border-radius: 3px;
background: #e5e7eb;
transition: transform 0.16s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.accumulator__cell.is-filled {
animation: gaugeCellIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.25) backwards;
animation-delay: calc(var(--i, 0) * 38ms);
}
.accumulator__cell--low.is-filled {
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}
.accumulator__cell--mid.is-filled {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.32);
}
.accumulator__cell--high.is-filled {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.32);
}
.accumulator__cell:hover,
.accumulator__cell.is-pop {
transform: scale(1.22);
filter: brightness(1.12);
z-index: 2;
}
.accumulator.is-full {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), inset 0 0 0 1px rgba(79, 70, 229, 0.06);
animation: gaugeFullPulse 2.4s ease-in-out infinite;
}
/* Fill / full-glow / scan animations */
@keyframes gaugeCellIn {
from { transform: scale(0.35); opacity: 0.15; }
to { transform: scale(1); opacity: 1; }
}
@keyframes gaugeFullPulse {
0%, 100% { filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0)); }
50% { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45)); }
}
@keyframes gaugeScan {
from { transform: translateY(120%); }
to { transform: translateY(-120%); }
}
.battery__body.is-scan::after,
.accumulator.is-scan::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.75), transparent);
animation: gaugeScan 0.9s ease-in-out;
pointer-events: none;
}
/* Stack the two cards on small screens */
@media (max-width: 767px) {
.resource-grid {
grid-template-columns: minmax(0, 1fr);
}
.resource-card {
gap: 12px;
padding: 14px;
}
.resource-card__actions {
width: 100%;
}
.resource-card__actions .btn--bump-all {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.battery__cell.is-filled,
.accumulator__cell.is-filled,
.battery.is-full .battery__body,
.accumulator.is-full,
.battery__body.is-scan::after,
.accumulator.is-scan::after {
animation: none !important;
}
}
/* Mass-selection checkbox for the mega-charge (cabinet ad cards) */
.item-card .mega-select {
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
width: 26px;
height: 26px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item-card .mega-select input {
position: absolute;
opacity: 0;
width: 26px;
height: 26px;
margin: 0;
cursor: pointer;
}
.item-card .mega-select__box {
width: 24px;
height: 24px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.92);
border: 1.5px solid #cbd5e1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.item-card .mega-select__box .material-icons {
font-size: 18px;
color: #fff;
opacity: 0;
transition: opacity 0.15s ease;
}
.item-card .mega-select input:checked + .mega-select__box {
background: #4f46e5;
border-color: #4f46e5;
}
.item-card .mega-select input:checked + .mega-select__box .material-icons {
opacity: 1;
}
.item-card .mega-select input:focus-visible + .mega-select__box {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
/* Charge hint above the per-ad "Поднять" button */
.charge-hint {
text-align: right;
font-size: 12px;
font-weight: 600;
color: #7c3aed;
white-space: nowrap;
margin: 0;
}
/* Profile statistics legend */
.profile-legend {
margin-top: 12px;
padding: 20px;
background-color: #F8FAFC !important;
}
.profile-legend__header {
margin-bottom: 0px;
}
.profile-legend__items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
}
.profile-legend__item {
display: flex;
align-items: center;
gap: 10px;
min-height: 32px;
color: #4b5563;
font-size: 14px;
}
.profile-legend__item .material-icons {
flex: 0 0 20px;
color: #6b7280;
font-size: 30px;
}
.sort-select {
padding: 8px 32px 8px 12px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.sort-select:focus {
border-color: #6057f5;
}
/* Subcategories */
.subcategories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
/* Desktop category navigation above filters. Mobile navigation keeps its existing markup and styles. */
@media (min-width: 1024px) {
.desktop-category-navigation {
margin-bottom: 16px;
padding: 16px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
/* Public seller profile variant — same visual contract as the catalog sidebar,
but isolated under its own class so profile-page-specific spacing (margin-top
below .profile-card) doesn't bleed into catalog pages. */
.desktop-category-navigation-public {
margin-top: 24px;
margin-bottom: 16px;
padding: 16px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
.desktop-category-navigation__title {
margin: 0 0 12px;
color: #111827;
font-size: 16px;
font-weight: 700;
}
.desktop-category-navigation__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.desktop-category-navigation__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
column-gap: 8px;
min-width: 0;
min-height: 34px;
padding: 5px 4px;
color: #111827;
font-size: 14px;
line-height: 1.25;
text-decoration: none;
border-radius: 8px;
transition: color 0.2s ease, background-color 0.2s ease;
}
/* The item uses display:grid, so enforce the native hidden state explicitly. */
.desktop-category-navigation__item[hidden] {
display: none !important;
}
.desktop-category-navigation__item:hover,
.desktop-category-navigation__item:focus-visible {
color: #111827;
}
.desktop-category-navigation__item:hover .desktop-category-navigation__icon,
.desktop-category-navigation__item:focus-visible .desktop-category-navigation__icon {
color: #ef4444;
}
.desktop-category-navigation__item:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 1px;
}
.desktop-category-navigation__item.is-empty {
color: #a3a3a3;
}
.desktop-category-navigation__item.is-active {
background-color: #eef2ff;
color: #1f2937;
font-weight: 600;
}
.desktop-category-navigation__item.is-active .desktop-category-navigation__icon {
color: #4338ca;
}
.desktop-category-navigation__item.is-active .desktop-category-navigation__count {
color: #4338ca;
}
.desktop-category-navigation__icon {
color: #4f46e5;
font-size: 18px;
line-height: 1;
}
.desktop-category-navigation__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desktop-category-navigation__count {
grid-column: 3;
grid-row: 1;
margin-left: 0;
color: #6b7280;
font-size: 0.72em;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
}
/* The action intentionally uses the same pill treatment as category cards. */
.desktop-category-navigation__more.subcategory-card {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 40px;
margin-top: 10px;
padding: 8px 16px;
color: #111827;
background-color: #f1f3f5;
border: 1px solid #f1f3f5;
border-radius: 50px;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.desktop-category-navigation__more.subcategory-card:hover {
background-color: #e5e7eb;
border-color: #e5e7eb;
box-shadow: none;
color: #111827;
}
.desktop-category-navigation__more .material-icons {
color: #4f46e5;
font-size: 20px;
}
/* Public seller profile — duplicate of the BEM sub-element styles so the
unique `.desktop-category-navigation-public` class renders identically
even when the catalog's `.desktop-category-navigation` rule is cached
upstream (CDN / proxy) and not yet invalidated. */
.desktop-category-navigation-public .desktop-category-navigation__title {
margin: 0 0 12px;
color: #111827;
font-size: 16px;
font-weight: 700;
}
.desktop-category-navigation-public .desktop-category-navigation__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.desktop-category-navigation-public .desktop-category-navigation__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
column-gap: 8px;
min-width: 0;
min-height: 34px;
padding: 5px 4px;
color: #111827;
font-size: 14px;
line-height: 1.25;
text-decoration: none;
border-radius: 8px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.desktop-category-navigation-public .desktop-category-navigation__item[hidden] {
display: none !important;
}
.desktop-category-navigation-public .desktop-category-navigation__item:hover,
.desktop-category-navigation-public .desktop-category-navigation__item:focus-visible {
color: #111827;
}
.desktop-category-navigation-public .desktop-category-navigation__item:hover .desktop-category-navigation__icon,
.desktop-category-navigation-public .desktop-category-navigation__item:focus-visible .desktop-category-navigation__icon {
color: #ef4444;
}
.desktop-category-navigation-public .desktop-category-navigation__item:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 1px;
}
.desktop-category-navigation-public .desktop-category-navigation__item.is-empty {
color: #a3a3a3;
}
.desktop-category-navigation-public .desktop-category-navigation__item.is-active {
background-color: #eef2ff;
color: #1f2937;
font-weight: 600;
}
.desktop-category-navigation-public .desktop-category-navigation__item.is-active .desktop-category-navigation__icon {
color: #4338ca;
}
.desktop-category-navigation-public .desktop-category-navigation__item.is-active .desktop-category-navigation__count {
color: #4338ca;
}
.desktop-category-navigation-public .desktop-category-navigation__icon {
color: #4f46e5;
font-size: 18px;
line-height: 1;
}
.desktop-category-navigation-public .desktop-category-navigation__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desktop-category-navigation-public .desktop-category-navigation__count {
grid-column: 3;
grid-row: 1;
margin-left: 0;
color: #6b7280;
font-size: 0.72em;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
}
.desktop-category-navigation-public .desktop-category-navigation__more.subcategory-card {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 40px;
margin-top: 10px;
padding: 8px 16px;
color: #111827;
background-color: #f1f3f5;
border: 1px solid #f1f3f5;
border-radius: 50px;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.desktop-category-navigation-public .desktop-category-navigation__more.subcategory-card:hover {
background-color: #e5e7eb;
border-color: #e5e7eb;
box-shadow: none;
color: #111827;
}
.desktop-category-navigation-public .desktop-category-navigation__more .material-icons {
color: #4f46e5;
font-size: 20px;
}
/* Public seller profile /user/{id}: make the whole left column an
independent scroll container, exactly like the catalog sidebar
(.category-sidebar). Profile card, category list and the ad block
scroll together; scrollbars stay hidden. */
body.layout--public-seller-profile .item-detail-sidebar {
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
body.layout--public-seller-profile .item-detail-sidebar::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Chromium/Safari */
}
.category-page .category-main > .desktop-category-children {
display: none;
}
}
.subcategory-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
.subcategory-card:hover {
border-color: #6057f5;
box-shadow: 0 2px 8px rgba(167, 58, 253, 0.1);
}
.subcategory-card__title {
font-size: 15px;
font-weight: 600;
color: #111827;
margin: 0 0 4px;
}
.subcategory-card__count {
font-size: 13px;
color: #6b7280;
}
.subcategory-card .material-icons {
color: #9ca3af;
transition: color 0.2s ease;
}
.subcategory-card:hover .material-icons {
color: #6057f5;
}
/* Category page — desktop subcategories (Material 3–aligned tokens; ≥1024px only, mobile.css unchanged) */
@media (min-width: 1024px) {
.category-page .category-main > .subcategories-section {
margin-bottom: 4px;
}
.category-page .category-main > .subcategories-section .subcategories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
gap: 12px;
margin-bottom: 28px;
}
.category-page .category-main > .subcategories-section .subcategory-card {
position: relative;
align-items: center;
justify-content: flex-start;
gap: 8px;
height: 40px;
min-height: 40px;
padding: 8px 16px;
border-radius: 50px;
background-color: #f1f3f5;
border:1px solid #f1f3f5;
color: #111827;
white-space: nowrap;
overflow: hidden;
box-shadow: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.category-page .category-main > .subcategories-section .subcategory-card:hover {
border-color: #f1f3f5;
background-color: #f1f3f5;
color: #111827;
box-shadow: none;
transform: none;
}
.category-page .category-main > .subcategories-section .subcategory-card:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.category-page .category-main > .subcategories-section .subcategory-card__icon {
flex-shrink: 0;
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
font-size: 20px;
line-height: 1;
color: #4f46e5;
}
.category-page .category-main > .subcategories-section .subcategory-card:hover .subcategory-card__icon {
background-color: transparent;
color: #ef4444;
}
.category-page .category-main > .subcategories-section .subcategory-card__content {
flex: 1 1 auto;
min-width: 0;
}
.category-page .category-main > .subcategories-section .subcategory-card__title {
min-width: 0;
margin: 0;
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: normal;
}
.category-page .category-main > .subcategories-section .subcategory-card__chevron {
display: none;
}
.category-page .category-main > .subcategories-section .subcategory-card:hover .subcategory-card__chevron {
display: none;
}
/* Keep every desktop category control anchored to the left edge. */
.home-page .subcategory-card,
.category-page .subcategory-card,
.category-page .category-main > .subcategories-section .subcategory-card {
justify-content: flex-start !important;
text-align: left !important;
}
.home-page .subcategory-card__content,
.category-page .subcategory-card__content,
.category-page .category-main > .subcategories-section .subcategory-card__content,
.home-page .subcategory-card__title,
.category-page .subcategory-card__title,
.category-page .category-main > .subcategories-section .subcategory-card__title {
text-align: left !important;
}
/* No trailing navigation arrow in the primary-button presentation. */
.home-page .subcategory-card__chevron,
.category-page .subcategory-card__chevron,
.category-page .category-main > .subcategories-section .subcategory-card__chevron {
display: none !important;
}
/* Stable two-column contract: the label can shrink, the leading icon cannot. */
.home-page .subcategory-card,
.category-page .subcategory-card,
.category-page .category-main > .subcategories-section .subcategory-card {
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
column-gap: 8px;
visibility: visible !important;
opacity: 1 !important;
}
.home-page .subcategory-card > .material-icons,
.category-page .subcategory-card > .material-icons,
.category-page .category-main > .subcategories-section .subcategory-card__icon {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
position: static;
grid-column: 1;
grid-row: 1;
justify-self: center;
flex: none;
width: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
line-height: 20px;
font-size: 18px;
transform: none;
}
.home-page .subcategory-card__content,
.category-page .subcategory-card__content,
.category-page .category-main > .subcategories-section .subcategory-card__content,
.home-page .subcategory-card__title,
.category-page .subcategory-card__title,
.category-page .category-main > .subcategories-section .subcategory-card__title {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
grid-column: 2;
grid-row: 1;
width: auto;
max-width: none;
}
}
/* Empty State */
.empty-state {
text-align: center;
padding: 64px 32px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
.empty-state__icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
}
.empty-state__icon .material-icons {
font-size: 40px;
}
.empty-state__title {
font-size: 20px;
font-weight: 600;
color: #111827;
margin: 0 0 8px;
}
.empty-state__text {
font-size: 16px;
color: #6b7280;
margin-bottom: 24px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* Responsive for Category Page - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.category-content {
grid-template-columns: 1fr;
gap: 24px;
}
.category-sidebar {
position: static;
order: 2;
max-height: none;
overflow-y: visible;
overscroll-behavior: auto;
}
.category-main {
order: 1;
}
.filters-card {
padding: 20px;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.subcategories-grid {
grid-template-columns: 1fr;
}
}
/* Responsive for Auth Pages */
@media (max-width: 1366px) {
.auth-container {
max-width: 1200px;
}
.auth-page:has(.auth-benefits) .auth-container {
max-width: 1200px;
}
}
@media (max-width: 1200px) {
.auth-container {
max-width: 100%;
padding: 0 16px;
flex-direction: column;
align-items: center;
}
.auth-benefits-card {
max-width: 400px;
order: 2;
flex: 0 0 auto;
}
.auth-card:not(.auth-benefits-card) {
order: 1;
}
/* Verify Email Layout - Stack on tablet */
.auth-page .auth-container {
flex-direction: column;
gap: 20px;
max-width: 500px;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
.auth-page {
padding: 16px 0;
}
.auth-container {
padding: 0 12px;
min-height: calc(100vh - 164px);
gap: 24px;
padding-top: 20px;
}
.auth-card {
padding: 24px;
max-width: 100%;
}
.auth-benefits-card {
max-width: 100%;
flex: 0 0 auto;
}
/* Verify Email Layout - Stack on mobile */
.auth-page .auth-container {
flex-direction: column;
gap: 16px;
max-width: 100%;
}
.benefits-list {
gap: 10px;
}
/* Tablet checkbox styles */
.checkbox-text {
white-space: normal;
word-wrap: break-word;
}
.benefit-item {
padding: 10px 12px;
}
.benefit-icon {
font-size: 18px;
}
.benefit-text {
font-size: 13px;
}
}
@media (max-width: 480px) {
.auth-page {
padding: 12px 0;
}
.auth-container {
padding: 0 8px;
gap: 20px;
padding-top: 16px;
}
.auth-card {
padding: 20px;
}
.auth-title {
font-size: 24px;
}
/* Mobile checkbox styles */
.checkbox-text {
white-space: normal;
word-wrap: break-word;
line-height: 1.3;
}
.auth-subtitle {
font-size: 14px;
}
.benefits-list {
gap: 8px;
}
.benefit-item {
padding: 10px 12px;
flex-direction: row;
text-align: left;
gap: 8px;
}
.benefit-icon {
font-size: 18px;
}
.benefit-text {
font-size: 13px;
}
}
/* Search Page Styles */
.search-page {
padding: 24px 0;
background: #ffffff;
min-height: calc(100vh - 140px);
}
.search-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
}
/* Search Sidebar */
.search-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
/* Popular Searches */
.popular-searches {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 24px;
margin-top: 24px;
}
.popular-searches__title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 16px;
}
.popular-searches__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.search-tag {
display: inline-block;
padding: 6px 12px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 20px;
color: #111827;
text-decoration: none;
font-size: 13px;
transition: all 0.2s ease;
}
.search-tag:hover {
background: #6057f5;
border-color: #6057f5;
color: #ffffff;
}
/* Search Main Content */
.search-main {
display: flex;
flex-direction: column;
gap: 32px;
}
.results-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.sort-options {
display: flex;
align-items: center;
gap: 12px;
}
.sort-select {
padding: 8px 32px 8px 12px;
border: 1px solid #d1d5db;
border-radius: 50px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.sort-select:focus {
border-color: #6057f5;
}
/* No Results */
.no-results {
text-align: center;
padding: 64px 32px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
.no-results__icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
}
.no-results__icon .material-icons {
font-size: 40px;
}
.no-results__title {
font-size: 20px;
font-weight: 600;
color: #111827;
margin: 0 0 8px;
}
.no-results__text {
font-size: 16px;
color: #6b7280;
margin-bottom: 24px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.no-results__suggestions {
text-align: left;
max-width: 400px;
margin: 0 auto 24px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
.no-results__suggestions h4 {
font-size: 14px;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
}
.no-results__suggestions ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.no-results__suggestions li {
font-size: 14px;
color: #6b7280;
position: relative;
padding-left: 16px;
}
.no-results__suggestions li::before {
content: '•';
position: absolute;
left: 0;
color: #6057f5;
}
/* Search Tips */
.search-tips {
text-align: center;
padding: 64px 32px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
}
.search-tips__icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: #fef3c7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #f97316;
}
.search-tips__icon .material-icons {
font-size: 40px;
}
.search-tips__title {
font-size: 20px;
font-weight: 600;
color: #111827;
margin: 0 0 24px;
}
.search-tips__content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.tip {
text-align: left;
padding: 20px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.tip h4 {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.tip p {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
}
/* Responsive for Create Item Page - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.form-row {
grid-template-columns: 1fr;
}
.page-title {
font-size: 24px;
}
.form-section {
padding: 20px;
}
.form-actions {
flex-direction: column;
}
}
/* Responsive for Search Page - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.search-content {
grid-template-columns: 1fr;
gap: 24px;
}
.search-sidebar {
position: static;
order: 2;
}
.search-main {
order: 1;
}
.results-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.search-tips__content {
grid-template-columns: 1fr;
}
.page-title {
font-size: 24px;
}
}
/* Resend Section Styles */
.resend-section {
margin-top: 24px;
text-align: center;
}
.resend-text {
margin-bottom: 12px;
color: #6b7280;
font-size: 14px;
}
.resend-timer {
margin-top: 12px;
padding: 8px 16px;
background: #f3f4f6;
border-radius: 6px;
color: #6b7280;
font-size: 14px;
}
.resend-timer--hidden {
display: none;
}
.btn--hidden {
display: none;
}
/* Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 10000;
max-width: 400px;
animation: slideIn 0.3s ease;
font-weight: 500;
}
.notification--success {
border-color: #06b6d4;
background: #f0fdf4;
color: #065f46;
}
.notification--error {
border-color: #ef4444;
background: #fef2f2;
color: #991b1b;
}
.notification--info {
border-color: #4f46e5;
background: #eff6ff;
color: #1e40af;
}
.notification-close {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 4px;
border-radius: 50px;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.notification-close:hover {
color: #000;
}
.notification .material-icons {
font-size: 20px;
}
.notification-message a {
color: inherit;
text-decoration: none;
font-weight: inherit;
}
.notification-message a:hover {
text-decoration: underline;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive notifications - Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
.notification {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
transform: translateY(-100%);
}
@keyframes slideIn {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}
/* Code Input Styling */
#code {
text-align: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 4px;
font-family: 'Courier New', monospace;
}
#code:focus {
letter-spacing: 4px;
}
/* Disabled Button Styles */
.btn--disabled {
opacity: 0.6;
cursor: not-allowed;
background: #f3f4f6 !important;
border-color: #d1d5db !important;
color: #9ca3af !important;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn--disabled:hover {
background: #f3f4f6 !important;
border-color: #d1d5db !important;
color: #9ca3af !important;
transform: none !important;
box-shadow: none !important;
}
/* Timer Animation */
.btn--disabled::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
border-radius: inherit;
}
/* Keep icons muted in disabled buttons even where a variant (e.g. the mobile
.btn--bump-all) forces an on-primary icon colour. */
.btn--disabled .material-icons {
color: inherit !important;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ========================================
PROFILE PAGE STYLES
======================================== */
/* Profile Page Layout */
.profile-page {
padding: 40px 0;
background: #ffffff;
min-height: calc(100vh - 140px);
}
/* Mobile profile sort header is hidden by default (desktop/tablet styles live in mobile.css) */
.profile-sort-mobile {
display: none;
}
.profile-header {
margin-bottom: 40px;
}
.profile-header .page-title {
font-size: 32px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.profile-header .page-subtitle {
font-size: 16px;
color: #6b7280;
}
/* Profile Content Layout */
.profile-content {
max-width: 1200px;
margin: 0 auto;
}
/* Hide mobile popup on desktop and tablet */
@media (min-width: 769px) {
.mobile-ad-popup {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
}
/* Profile Layout - Use same as item-detail */
.item-detail-content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
margin-top: 24px;
}
.item-detail-main {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 32px;
}
.item-detail-sidebar {
position: sticky;
}
.profile-main-column {
display: flex;
flex-direction: column;
min-width: 0;
}
/* Profile Card */
.profile-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 32px;
margin-bottom: 32px;
}
.profile-page--public-seller .profile-card { position: relative; }
.public-profile-actions { position: absolute; top: 12px; right: 12px; z-index: 3; }
.public-profile-actions__button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.public-profile-actions__button:hover, .public-profile-actions__button:focus-visible { background: #f3f4f6; color: #111827; outline: none; }
.public-profile-actions__menu { position: absolute; right: 0; top: 44px; width: 210px; padding: 6px 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); }
.public-profile-actions__item { width: 100%; border: 0; background: transparent; padding: 11px 14px; display: flex; align-items: center; gap: 10px; text-align: left; color: #374151; cursor: pointer; font: inherit; }
.public-profile-actions__item:hover, .public-profile-actions__item:focus-visible { background: #f3f4f6; outline: none; }
.public-profile-actions__item--danger { color: #6b7280; }
/* The global modal rules use !important on display, so preserve the native
* hidden attribute explicitly for the public seller action dialogs. */
.profile-page--public-seller ~ #publicSellerReportModal[hidden],
.profile-page--public-seller ~ #publicSellerBlockModal[hidden] {
display: none !important;
}
.profile-page--public-seller ~ #publicSellerReportModal:not([hidden]),
.profile-page--public-seller ~ #publicSellerBlockModal:not([hidden]) {
display: flex !important;
}
#chatBlockModal[hidden] {
display: none !important;
}
#chatBlockModal:not([hidden]) {
display: flex !important;
}
/* Public profile report dialog follows the site's regular modal treatment,
* rather than the fullscreen chat image dialog it shares the base overlay with. */
.profile-page--public-seller ~ #publicSellerReportModal {
background: rgba(15, 23, 42, .55) !important;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content {
position: relative;
width: min(400px, calc(100vw - 32px));
max-height: min(90vh, 620px);
overflow-y: auto;
box-sizing: border-box;
padding: 0;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #ffffff;
color: #1f2937;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .14), 0 10px 10px -5px rgba(0, 0, 0, .08);
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content h2 {
margin: 0;
padding: 20px 56px 16px 24px;
border-bottom: 1px solid #e5e7eb;
color: #111827;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content > p {
margin: 0;
padding: 18px 24px 4px;
color: #6b7280;
font-size: 14px;
line-height: 1.5;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content label {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
margin: 0;
padding: 4px 24px;
color: #374151;
font-size: 15px;
cursor: pointer;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content input[type='radio'] {
width: 18px;
height: 18px;
margin: 0;
accent-color: #4f46e5;
flex: 0 0 auto;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content textarea {
display: block;
width: calc(100% - 48px);
min-height: 112px;
margin: 16px 24px 20px;
padding: 12px;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #ffffff;
color: #1f2937;
font: inherit;
line-height: 1.45;
resize: vertical;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content textarea:focus {
border-color: #4f46e5;
outline: none;
box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px 20px;
border-top: 1px solid #e5e7eb;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .modal-footer .btn {
min-height: 40px;
padding: 9px 16px;
border-radius: 999px;
font-size: 14px;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close {
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: transparent;
border: 0;
color: #6b7280;
z-index: 2;
backdrop-filter: none;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close:hover,
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close:focus-visible {
background: #f3f4f6;
color: #111827;
transform: none;
outline: none;
}
@media (max-width: 600px) {
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content {
width: calc(100vw - 24px);
max-height: calc(100vh - 32px);
border-radius: 16px;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content h2 {
padding-left: 20px;
padding-right: 52px;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content > p,
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content label {
padding-left: 20px;
padding-right: 20px;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content textarea {
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
}
.profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .modal-footer {
padding-left: 20px;
padding-right: 20px;
}
}
/* Shared report modal treatment for chat and public seller profile. */
.user-report-modal {
background: rgba(15, 23, 42, .55) !important;
}
.user-report-modal .user-report-modal__content {
position: relative;
width: min(400px, calc(100vw - 32px));
max-height: min(90vh, 620px);
overflow-y: auto;
box-sizing: border-box;
padding: 0;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #ffffff;
color: #1f2937;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .14), 0 10px 10px -5px rgba(0, 0, 0, .08);
}
.user-report-modal .user-report-modal__content h2 {
margin: 0;
padding: 20px 56px 16px 24px;
border-bottom: 1px solid #e5e7eb;
color: #111827;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
}
.user-report-modal .user-report-modal__content > p {
margin: 0;
padding: 18px 24px 4px;
color: #6b7280;
font-size: 14px;
line-height: 1.5;
}
.user-report-modal .user-report-modal__content label {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
margin: 0;
padding: 4px 24px;
color: #374151;
font-size: 15px;
cursor: pointer;
}
.user-report-modal .user-report-modal__content input[type='radio'] {
width: 18px;
height: 18px;
margin: 0;
accent-color: #4f46e5;
flex: 0 0 auto;
}
.user-report-modal .user-report-modal__content textarea {
display: block;
width: calc(100% - 48px);
min-height: 112px;
margin: 16px 24px 20px;
padding: 12px;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #ffffff;
color: #1f2937;
font: inherit;
line-height: 1.45;
resize: vertical;
}
.user-report-modal .user-report-modal__content textarea:focus {
border-color: #4f46e5;
outline: none;
box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.user-report-modal .user-report-modal__content .modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px 20px;
border-top: 1px solid #e5e7eb;
}
.user-report-modal .user-report-modal__content .modal-footer .btn {
width: auto !important;
min-height: 40px;
padding: 9px 16px;
border-radius: 999px;
font-size: 14px;
}
.user-report-modal .user-report-modal__content .chat-image-modal__close {
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: transparent;
border: 0;
color: #6b7280;
z-index: 2;
backdrop-filter: none;
}
.user-report-modal .user-report-modal__content .chat-image-modal__close:hover,
.user-report-modal .user-report-modal__content .chat-image-modal__close:focus-visible {
background: #f3f4f6;
color: #111827;
transform: none;
outline: none;
}
@media (max-width: 600px) {
.user-report-modal .user-report-modal__content {
width: calc(100vw - 24px);
max-height: calc(100vh - 32px);
border-radius: 16px;
}
.user-report-modal .user-report-modal__content h2 {
padding-left: 20px;
padding-right: 52px;
}
.user-report-modal .user-report-modal__content > p,
.user-report-modal .user-report-modal__content label {
padding-left: 20px;
padding-right: 20px;
}
.user-report-modal .user-report-modal__content textarea {
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
}
.user-report-modal .user-report-modal__content .modal-footer {
padding-left: 20px;
padding-right: 20px;
}
}
.item-detail-sidebar .profile-card {
margin-bottom: 0;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #ffffff;
}
.profile-info {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 24px;
}
.item-detail-sidebar .profile-info {
flex-direction: column;
text-align: center;
gap: 16px;
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-avatar .material-icons {
font-size: 40px;
color: #9ca3af;
}
.profile-details {
flex: 1;
}
.item-detail-sidebar .profile-details {
text-align: center;
}
.profile-name {
font-size: 24px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.item-detail-sidebar .profile-name {
font-size: 20px;
margin-bottom: 8px;
}
.profile-email,
.profile-phone {
font-size: 16px;
color: #6b7280;
margin-bottom: 4px;
}
.item-detail-sidebar .profile-email,
.item-detail-sidebar .profile-phone {
font-size: 14px;
margin-bottom: 4px;
}
.profile-joined {
font-size: 14px;
color: #9ca3af;
}
.item-detail-sidebar .profile-joined {
font-size: 12px;
color: #9ca3af;
}
.profile-navigation {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.item-detail-sidebar .profile-navigation {
gap: 8px;
padding-top: 20px;
}
.profile-nav-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 50px;
text-decoration: none;
color: #374151;
transition: all 0.2s ease;
position: relative;
}
.profile-nav-btn:hover {
background: #f3f4f6;
border-color: #d1d5db;
color: #1f2937;
text-decoration: none;
}
.profile-nav-btn.active {
background: #4f46e5;
border-color: #4f46e5;
color: white;
}
.profile-nav-btn.active:hover {
background: #4338ca;
border-color: #4338ca;
color: white;
}
.profile-nav-btn .material-icons {
font-size: 20px;
color: #6b7280;
}
.profile-nav-btn.active .material-icons {
color: white;
}
.nav-label {
flex: 1;
font-weight: 500;
font-size: 14px;
}
.nav-count {
background: #e5e7eb;
color: #374151;
padding: 2px 8px;
border-radius: 18px;
font-size: 12px;
font-weight: 600;
min-width: 20px;
text-align: center;
}
/* Keeps row width aligned with sibling nav items that show a badge (e.g. blog sidebar). */
.nav-count--empty {
visibility: hidden;
}
.profile-nav-btn.active .nav-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Profile sidebar: real