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 > .selected label { display: block; line-height: 36px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 0 12px; box-sizing: border-box; cursor: pointer; color: var(--clr-link); } @media (hover: hover) { section.tab-categories > .selected label:hover { background: rgba(var(--overlay), 0.07); } } section.tab-categories > .selected label:active { background: rgba(var(--overlay), 0.15); } section.tab-categories > .selected label .icon { background: var(--clr-link); margin: -2px 2px 0 0; border-radius: 5px; border: 4px solid var(--clr-link); transform: scale(0.9); transform-origin: left center; color: #fff; } section.tab-categories > .available a { display: block; line-height: 36px; text-align: left; position: relative; padding: 0 50px 0 44px; box-sizing: border-box; } section.tab-categories > .available.noIcons a { padding-left: 12px; } section.tab-categories > .available.hasSelCat a { margin-left: 24px; } section.tab-categories > .available a.on { color: var(--clr-link); } @media (hover: hover) { section.tab-categories > .available a:hover { background: rgba(var(--overlay), 0.07); } } section.tab-categories > .available a:active { background: rgba(var(--overlay), 0.15); } section.tab-categories > .available a .icon { position: absolute; left: 12px; top: 7px; } section.tab-categories > .available.noIcons a .icon { display: none; } section.tab-categories > .available a strong { display: block; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } section.tab-categories > .available a small { position: absolute; right: 8px; top: 0; bottom: 0; font-size: 0.75em; } section.tabs > section.tab-filters { padding: 5px 15px 0; margin: 0 auto; box-sizing: border-box; text-align: left; max-width: 430px; } section.tab-filters > strong { display: block; margin: 0 0 10px; padding: 5px 0 0; } section.tab-filters > .group { margin: 0 auto 15px; font-size: 1em; text-align: left; max-width: 1260px; } 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.tab-filters > .group.venues { display: flex; flex-flow: column; justify-content: center; gap: 10px; } section.tab-filters > .group.tags { display: inline-grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 520px) { section.tabs > section.tab-filters { max-width:none; text-align:center; } section.tab-filters > .group.venues { flex-flow: row nowrap; justify-content: center; } section.tab-filters > .group.venues > label { width: auto; } section.tab-filters > .group.tags { grid-template-columns: 1fr 1fr; } section.tab-filters > .group.tags.col1 { grid-template-columns: 1fr !important; } section.tab-filters > .group.tags.col2 { grid-template-columns: 1fr 1fr !important; } } @media (min-width: 740px) { section.tab-filters > .group.tags { grid-template-columns: 1fr 1fr 1fr; } section.tab-filters > .group.tags.col3 { grid-template-columns: 1fr 1fr 1fr !important; } } @media (min-width: 960px) { section.tab-filters > .group.tags { grid-template-columns: 1fr 1fr 1fr 1fr; } section.tab-filters > .group.tags.col4 { grid-template-columns: 1fr 1fr 1fr 1fr !important; } } @media (min-width: 1280px) { section.tab-filters > .group.tags { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } 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.producers-results.noTabs { border-top: 1px solid rgba(var(--overlay),0.08); } section.producersList { display: inline-grid; gap: 35px; margin: 20px 0 10px; position: relative; } section.tabs > section.producersList.on { display: inline-grid; } section.producersList.loading { cursor: wait; } section.producersList.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.producersList.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.producersList.loading.loading-reset::after { position: absolute; inset: 0 0 auto; z-index: 1; cursor: wait; } section.producersList .alert { max-width: none; grid-column: 1/-1; align-self: start; } .producerListItem { text-align: left; overflow: hidden; max-width: calc(var(--max-width) / 2 - 25px); } .producerListItem h3 { margin: 0 0 7px; } .producerListItem h3 a { vertical-align: middle; } @media (hover: hover) { .producerListItem h3 a:hover { text-decoration: underline; text-decoration-style: dotted; } } .producerListItem h3 a:active { text-decoration: underline; } .producerListItem h3 .fav-control { margin: 0 0 0 5px; } .producerListItem h4 { margin: 0 0 7px; font-size: 0.9em; font-weight: normal; } .producerListItem .itP-main { display: flex; flex-flow: row nowrap; gap: 15px; margin: 15px 0 0; } .producerListItem .itP-main .itP-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) { .producerListItem .itP-main .itP-image:hover { box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); } } .producerListItem .itP-main .itP-image:active { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6); } .producerListItem .itP-main .itP-image.no-image { position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.08); } .producerListItem .itP-main .itP-image.no-image::before { content: "🖾"; font-size: 2em; opacity: 0.4; } .producerListItem .itP-main .itP-image.no-image::after { content: "няма снимка"; font-size: 0.6em; font-weight: bold; padding: 0 0 5px; opacity: 0.4; } @media (prefers-color-scheme: dark) { .producerListItem .itP-main .itP-image.no-image { background: rgba(0,0,0,0.2); } .producerListItem .itP-main .itP-image.no-image::before { opacity: 0.2; } .producerListItem .itP-main .itP-image.no-image::after { opacity: 0.2; } } .producerListItem .itP-main .itP-meta { display: flex; flex-flow: column nowrap; gap: 10px; font-size: 0.9em; overflow: hidden; } .producerListItem .itP-main .itP-meta > h6 { margin: 0 0 -5px; } .producerListItem .itP-main .itP-meta > div { display: flex; flex-flow: row nowrap; } .producerListItem .itP-main .itP-meta > div span { overflow: hidden; text-overflow: ellipsis; } .producerListItem .itP-main .itP-meta > div em.icon { margin: 2px 8px 0 0; } .producerListItem .itP-main .itP-meta > div.website { } .producerListItem .itP-main .itP-meta > div.website a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .producerListItem .itP-main .itP-meta > div.website a span { vertical-align: middle; padding: 1px 0 0; } .producerListItem .itP-main .itP-meta > div.address .long { font-size: 0.85em; padding: 1px 0 0; } @media (min-width: 460px) { .producerListItem .itP-main .itP-image { width:220px; height:150px; } } @media (min-width: 1000px) { section.producersList { grid-template-columns: 1fr 1fr; gap: 50px; padding: 20px 50px !important; } } /*@media (min-width: 1600px) { section.producersList { grid-template-columns: 1fr 1fr 1fr; } }*/ .coolMessage .producerListItem .itP-main .itP-meta > div em.icon { opacity: 0.9; } main .producers-results + #page-meta-info { margin-top: -30px; }