/*******************************************************/ main > section.filters > .title { display: flex; flex-flow: column; gap: 15px; margin-bottom: 25px; } main > section.filters > .title > h1 { margin: 0; } main > section.filters > .title > .buttons { display: flex; flex-flow: row nowrap; gap: 10px; justify-content: center; } main > section.filters > .title > .buttons .button { margin: 0; font-size: 0.9rem; padding: 7px 9px } main > section.filters > .title > .buttons .button .icon { margin: -3px 6px 0 0; } @media (min-width: 920px) { main > section.filters > .title { display:block; position:relative; margin:0 auto 25px; max-width:var(--max-width); } main > section.filters > .title > .buttons { position:absolute; right:0; top:1px; } } /*******************************************************/ section.tabs.categories-filters { margin-bottom: 0; } section.tabs > section.tab-categories { padding: 0 10px; width: 100%; max-width: 430px; margin: 0 auto; box-sizing: border-box; } section.tab-categories > .categories a { display: block; line-height: 36px; text-align: left; position: relative; padding: 0 50px 0 44px; box-sizing: border-box; } section.tab-categories > .categories a.on { color: var(--clr-link); } @media (hover: hover) { section.tab-categories > .categories a:hover { background: rgba(var(--overlay), 0.07); } } section.tab-categories > .categories a:active { background: rgba(var(--overlay), 0.15); } section.tab-categories > .categories a .icon { position: absolute; left: 12px; top: 7px; } section.tab-categories > .categories a strong { display: block; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section.tab-categories > .categories a small { position: absolute; right: 8px; top: 0; bottom: 0; font-size: 0.75em; } section.tabs > section.tab-filters { padding: 0 15px 0; margin: 0 auto; box-sizing: border-box; text-align: left; max-width: 414px; } section.tab-filters > strong { display: block; margin: 0 0 10px; padding: 5px 0 0; } section.tab-filters > .group { margin: 0 auto 18px; font-size: 1em; text-align: left; display: flex; flex-flow: row wrap; gap: 10px; } section.tab-filters > .group:last-child { margin-bottom: 0; } section.tab-filters > .group > label { white-space: nowrap; } section.tab-filters > .group > label input { accent-color: var(--clr-link); } section.tab-filters > .group > label:has(input:checked) span { color: var(--clr-link); } section.selected-filters { padding: 30px 20px 0; background: rgb(var(--spacer)); display: flex; flex-flow: row wrap; gap: 10px; justify-content: center; } section.selected-filters:empty { display: none; } section.selected-filters > div { position: relative; color: var(--clr-link); font-size: 0.9em; padding: 8px 45px 8px 10px; border-radius: 5px; overflow: hidden; cursor: default; } section.selected-filters > div::before { content: ""; position: absolute; inset: 0; background: var(--bgr-capt); opacity: 0.8; } section.selected-filters > div > span { position: relative; white-space: nowrap; font-weight: 600; } section.selected-filters > div:only-child > span { font-weight: 700; } section.selected-filters > div > em { display: inline-block; font-style: normal; font-size: 1.1em; cursor: pointer; position: absolute; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.03); width: 35px; text-align: center; line-height: 38px; } @media (hover: hover) { section.selected-filters > div:hover::before { filter: invert(3%); } section.selected-filters > div > em:hover { background: rgba(0, 0, 0, 0.05); font-weight: bold; } } /*******************************************************/ section.tabs.listings-results.noTabs { border-top: 1px solid rgba(var(--overlay),0.08); } section.listingsList { display: inline-grid; gap: 35px; margin: 20px 0 10px; position: relative; } section.tabs > section.listingsList.on { display: inline-grid; } section.listingsList.loading { cursor: wait; } section.listingsList.loading::after { content: ""; display: block; min-width: 60px; min-height: 60px; background: var(--loadingSVG) no-repeat center / 50px; opacity: 0.8; cursor: wait; grid-column: 1/-1; } section.listingsList.loading-reset::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(2px) saturate(50%); -webkit-backdrop-filter: blur(2px) saturate(50%); z-index: 1; cursor: wait; } section.listingsList.loading.loading-reset::after { position: absolute; inset: 0 0 auto; z-index: 1; cursor: wait; } section.listingsList .alert { max-width: none; grid-column: 1/-1; align-self: start; } .listingListItem { text-align: left; overflow: hidden; max-width: calc(var(--max-width) / 2 - 25px); } .listingListItem h3 { margin: 0 0 7px; } .listingListItem h3 a { vertical-align: middle; } @media (hover: hover) { .listingListItem h3 a:hover { text-decoration: underline; text-decoration-style: dotted; } } .listingListItem h3 a:active { text-decoration: underline; } .listingListItem h3 .fav-control { margin: 0 0 0 5px; } .listingListItem h4 { margin: 0 0 7px; font-size: 0.9em; font-weight: normal; } .listingListItem .itL-main { display: flex; flex-flow: row nowrap; gap: 15px; margin: 15px 0 0; } .listingListItem .itL-main .itL-image { display: block; width: 170px; height: 120px; background: rgba(0,0,0,0.08) none no-repeat center / cover; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); flex-shrink: 0; border-radius: 3px; } @media (hover: hover) { .listingListItem .itL-main .itL-image:hover { box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); } } .listingListItem .itL-main .itL-image:active { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); } .listingListItem .itL-main .itL-image.no-image { position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.08); } .listingListItem .itL-main .itL-image.no-image::before { content: "🖾"; font-size: 2em; opacity: 0.4; } .listingListItem .itL-main .itL-image.no-image::after { content: "няма снимка"; font-size: 0.6em; font-weight: bold; padding: 0 0 5px; opacity: 0.4; } @media (prefers-color-scheme: dark) { .listingListItem .itL-main .itL-image.no-image { background: rgba(0,0,0,0.2); } .listingListItem .itL-main .itL-image.no-image::before { opacity: 0.2; } .listingListItem .itL-main .itL-image.no-image::after { opacity: 0.2; } } .listingListItem .itL-main .itL-meta { display: flex; flex-flow: column nowrap; gap: 10px; font-size: 0.9em; overflow: hidden; } .listingListItem .itL-main .itL-meta > h6 { margin: 0 0 2px; } .listingListItem .itL-main .itL-meta > div { display: flex; flex-flow: row nowrap; } .listingListItem .itL-main .itL-meta > div span { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .listingListItem .itL-main .itL-meta > div span i { display: block; font-weight: normal; font-style: normal; font-size: 0.9em; opacity: 0.9; } .listingListItem .itL-main .itL-meta > div em.icon { margin-top: 4px; } @media (min-width: 460px) { .listingListItem .itL-main .itL-image { width:220px; height:150px; } } @media (min-width: 1000px) { section.listingsList { grid-template-columns: 1fr 1fr; gap: 50px; padding: 20px 50px !important; } } /*@media (min-width: 1600px) { section.listingsList { grid-template-columns: 1fr 1fr 1fr; } }*/ .coolMessage .listingListItem .itL-main .itL-meta > div em.icon { opacity: 0.9; }