/* Search page (com_flexicontent search view) — modern layout */
.fcsearch,
.fcs-mod {
--fcs-accent: #4d94d1;
--fcs-accent-dark: #3a7db8;
--fcs-accent-soft: #e8f2fa;
--fcs-text: #2b3540;
--fcs-muted: #6b7783;
--fcs-border: #dbe2e8;
--fcs-surface: #fff;
--fcs-radius: 12px;
--fcs-shadow: 0 1px 2px rgba(20, 40, 60, .06), 0 4px 16px rgba(20, 40, 60, .06);
}
.fcsearch > h1, .fcsearch > h2.contentheading, .fcsearch > .componentheading {
font-size: 2rem;
font-weight: 700;
margin: 0 0 1rem;
color: var(--fcs-text);
}
/* ---------- Search bar ---------- */
.fcs-search { margin-bottom: 1.5rem; }
.fcs-form { display: block; }
.fcs-bar {
max-width: 800px;
margin-left: auto;
margin-right: auto;
display: flex;
gap: .75rem;
align-items: stretch;
background: var(--fcs-surface);
border: 1px solid var(--fcs-border);
border-radius: 999px;
padding: .4rem .4rem .4rem 1.1rem;
box-shadow: var(--fcs-shadow);
transition: border-color .15s, box-shadow .15s;
}
.fcs-bar:focus-within {
border-color: var(--fcs-accent);
box-shadow: 0 0 0 4px rgba(77, 148, 209, .18);
}
.fcs-bar__field {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: .6rem;
min-width: 0;
position: relative;
}
.fcs-bar__icon { color: var(--fcs-muted); flex: 0 0 auto; }
.fcs-bar .fcs-input,
.fcs-bar input[type=text] {
flex: 1 1 auto;
min-width: 0;
width: 100%;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-size: 1.1rem;
color: var(--fcs-text);
padding: .55rem 0;
height: auto;
}
.fcs-bar .fcs-input::placeholder { color: var(--fcs-muted); }
/* ---------- Buttons ---------- */
.fcs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
border: 1px solid transparent;
border-radius: 999px;
padding: .55rem 1.4rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
margin: 0;
user-select: none;
}
.fcs-btn--primary { background: var(--fcs-accent); color: #fff; }
.fcs-btn--primary:hover, .fcs-btn--primary:focus { background: var(--fcs-accent-dark); color: #fff; }
.fcs-btn--ghost {
background: var(--fcs-surface);
color: var(--fcs-text);
border-color: var(--fcs-border);
padding: .45rem 1rem;
font-weight: 500;
}
.fcs-btn--ghost:hover { border-color: var(--fcs-accent); color: var(--fcs-accent-dark); }
.fcs-btn--ghost.is-active { background: var(--fcs-accent-soft); border-color: var(--fcs-accent); color: var(--fcs-accent-dark); }
.fcs-btn--link { background: transparent; color: var(--fcs-muted); padding: .45rem .75rem; font-weight: 500; }
.fcs-btn--link:hover { color: var(--fcs-text); background: rgba(0, 0, 0, .05); }
/* ---------- Notes ---------- */
.fcs-note {
margin: .6rem .5rem 0;
font-size: .9rem;
color: var(--fcs-muted);
}
.fcs-note--warn {
background: #fff8e1;
color: #7a5b00;
border-radius: 8px;
padding: .4rem .8rem;
display: inline-block;
}
/* ---------- Toolbar ---------- */
.fcs-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem 1rem;
margin-top: 1rem;
}
.fcs-toolbar__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.fcs-toolbar__type { min-width: 0; }
/* ---------- Fields ---------- */
.fcs-field { min-width: 0; }
.fcs-field--inline { display: flex; align-items: center; gap: .6rem; }
.fcs-label {
display: block;
font-size: .8rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fcs-muted);
margin: 0 0 .35rem;
width: auto;
float: none;
}
.fcs-field--inline .fcs-label { margin: 0; white-space: nowrap; }
.fcs-field .fc_filter_html { width: 100%; float: none; }
.fcs-field--inline .fc_filter_html { width: auto; min-width: 200px; }
/* Selects (native + select2) */
.fcsearch .fcs-search select,
.fcsearch .fcs-search .select2-container .select2-choice,
.fcsearch .fcs-search input[type=text]:not(.fcs-input):not(.select2-input) {
width: 100%;
min-height: 40px;
background: var(--fcs-surface) !important;
border: 1px solid var(--fcs-border) !important;
border-radius: 10px !important;
color: var(--fcs-text);
padding: .4rem .8rem;
box-shadow: none !important;
font-size: .95rem;
transition: border-color .15s, box-shadow .15s;
}
.fcsearch .fcs-search .select2-container { width: 100% !important; min-width: 160px; }
.fcsearch .fcs-search .select2-container .select2-choice {
display: flex;
align-items: center;
height: 40px;
line-height: 1.2;
background-image: none !important;
}
.fcsearch .fcs-search .select2-container .select2-choice > .select2-chosen { flex: 1; margin: 0 24px 0 0; }
.fcsearch .fcs-search .select2-container .select2-choice .select2-arrow { background: transparent; border: 0; }
.fcsearch .fcs-search .select2-container-active .select2-choice,
.fcsearch .fcs-search select:focus {
border-color: var(--fcs-accent) !important;
box-shadow: 0 0 0 3px rgba(77, 148, 209, .18) !important;
outline: 0;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices {
border: 1px solid var(--fcs-border);
border-radius: 10px;
background: var(--fcs-surface);
min-height: 40px;
padding: 2px 4px;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice {
background: var(--fcs-accent-soft);
border: 1px solid var(--fcs-accent);
color: var(--fcs-accent-dark);
border-radius: 999px;
box-shadow: none;
}
/* ---------- Advanced panel ---------- */
.fcs-panel {
margin-top: 1rem;
background: var(--fcs-surface);
border: 1px solid var(--fcs-border);
border-radius: var(--fcs-radius);
padding: 1.25rem;
box-shadow: var(--fcs-shadow);
}
.fcs-panel > * + * { margin-top: 1rem; }
.fcs-filters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem 1.25rem;
list-style: none;
padding: 0;
margin: 0;
}
.fcs-panel .fc_checkradio_group, .fcs-panel ul.fc_field_filter { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fcs-panel .fc_checkradio_option label {
display: inline-block;
border: 1px solid var(--fcs-border);
border-radius: 999px;
padding: .25rem .8rem;
cursor: pointer;
font-size: .9rem;
}
.fcs-panel .fc_checkradio_option input:checked + label,
.fcs-panel .fc_checkradio_option label.fc_highlight {
background: var(--fcs-accent-soft);
border-color: var(--fcs-accent);
color: var(--fcs-accent-dark);
}
/* ---------- Results bar ---------- */
.fcsearch #item_total.fcs-results-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem 1rem;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--fcs-border);
background: none;
width: 100%;
}
.fcs-results-bar .fc_item_total_data {
font-size: 1.05rem;
font-weight: 600;
color: var(--fcs-text);
float: none;
padding: 0;
margin: 0;
}
.fcs-results-bar__controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fcs-results-bar .fc_limit_box,
.fcs-results-bar .fc_orderby_box { float: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .4rem; }
.fcs-results-bar select { width: auto; min-width: 130px; }
.fcs-results-bar .select2-container { width: auto !important; min-width: 150px; }
.fcs-results-bar .fc_orderby_level_lbl { color: var(--fcs-muted); font-size: .8rem; }
/* ---------- Result cards ---------- */
.fc_search_results_list { margin-top: 1rem; }
.fc_search_results_list .appcard .seemore {
margin: 0;
height: 100%;
border-radius: var(--fcs-radius);
box-shadow: var(--fcs-shadow);
transition: box-shadow .15s, transform .15s;
text-align: left;
}
.fc_search_results_list .appcard .seemore:hover {
box-shadow: 0 2px 4px rgba(20, 40, 60, .08), 0 10px 28px rgba(20, 40, 60, .12);
transform: translateY(-2px);
}
/* each card block has .6rem side padding (the gutter between cards); pull the grid out by the same amount so the outer cards line up with the results bar above */
.fc_search_results_list .g-grid.introblock { gap: 1.25rem 0; margin-left: -.6rem; margin-right: -.6rem; }
.fc_search_results_list .appcard { padding: 0 .6rem; box-sizing: border-box; }
/* ---------- Pagination ---------- */
.fcsearch div.pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
margin: 2rem 0 1rem;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.fcsearch .pagination .counter { order: 2; float: none !important; margin: 0; color: var(--fcs-muted); font-size: .9rem; }
.fcsearch .pagination ul,
.fcsearch ul.pagination {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: .4rem;
list-style: none;
margin: 0;
padding: 0;
box-shadow: none !important;
background: none !important;
}
.fcsearch .pagination li { margin: 0; }
.fcsearch .pagination li > a,
.fcsearch .pagination li > span,
.fcsearch .pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .8rem;
border: 1px solid var(--fcs-border) !important;
border-radius: 10px !important;
background: var(--fcs-surface) !important;
color: var(--fcs-text) !important;
text-decoration: none;
font-weight: 500;
transition: background .15s, border-color .15s, color .15s;
}
.fcsearch .pagination li > a:hover { border-color: var(--fcs-accent) !important; color: var(--fcs-accent-dark) !important; }
.fcsearch .pagination li.active > a,
.fcsearch .pagination li.active > span,
.fcsearch .pagination .active .page-link {
background: var(--fcs-accent) !important;
border-color: var(--fcs-accent) !important;
color: #fff !important;
}
.fcsearch .pagination li.disabled > a,
.fcsearch .pagination li.disabled > span { opacity: .45; pointer-events: none; }
/* ---------- Mobile ---------- */
@media (max-width: 640px) {
.fcs-bar { border-radius: 16px; flex-wrap: wrap; padding: .6rem; }
.fcs-bar__field { flex: 1 1 100%; padding-left: .4rem; }
.fcs-bar .fcs-btn--primary { flex: 1 1 100%; }
.fcs-toolbar__actions { margin-left: 0; }
.fcs-field--inline { flex-direction: column; align-items: stretch; }
.fcs-field--inline .fc_filter_html { width: 100%; }
}
/* ======================================================================
Select2 (v3.5) — modern look: pill tags, soft dropdown
Applies to the search form and to its dropdowns (rendered at level)
====================================================================== */
body .select2-drop {
--fcs-accent: #4d94d1;
--fcs-accent-soft: #e8f2fa;
--fcs-border: #dbe2e8;
--fcs-text: #2b3540;
min-width: 240px;
width: auto !important;
background: #fff;
border: 1px solid var(--fcs-border) !important;
border-radius: 12px !important;
box-shadow: 0 8px 30px rgba(20, 40, 60, .16) !important;
margin-top: 6px;
padding: 6px;
color: var(--fcs-text);
overflow: hidden;
z-index: 10050;
}
body .select2-drop.select2-drop-above {
margin-top: -6px;
box-shadow: 0 -8px 30px rgba(20, 40, 60, .16) !important;
}
body .select2-drop .select2-search { padding: 2px 2px 6px; }
body .select2-drop .select2-search input {
border: 1px solid var(--fcs-border) !important;
border-radius: 8px;
padding: .4rem .7rem !important;
background-image: none !important;
box-shadow: none !important;
height: auto;
}
body .select2-results { margin: 0; padding: 0; max-height: 260px; }
body .select2-results .select2-result-label {
padding: .5rem .75rem !important;
border-radius: 8px;
font-size: .95rem !important;
line-height: 1.3;
cursor: pointer;
}
body .select2-results .select2-highlighted {
background: var(--fcs-accent-soft) !important;
color: #2f6da3 !important;
}
body .select2-results .select2-highlighted .select2-result-label { color: inherit; }
body .select2-results .select2-result.select2-selected .select2-result-label,
body .select2-results li.select2-selected { color: var(--fcs-accent); font-weight: 600; }
body .select2-results .select2-no-results,
body .select2-results .select2-searching { padding: .6rem .75rem; color: #6b7783; }
body .select2-results::-webkit-scrollbar { width: 8px; }
body .select2-results::-webkit-scrollbar-thumb { background: #c9d3dc; border-radius: 8px; }
/* Multi-select (tag-like) */
.fcsearch .fcs-search .select2-container-multi .select2-choices {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
min-height: 40px;
height: auto;
padding: 4px 8px;
border: 1px solid var(--fcs-border) !important;
border-radius: 10px !important;
background: #fff !important;
background-image: none !important;
cursor: text;
transition: border-color .15s, box-shadow .15s;
}
.fcsearch .fcs-search .select2-container-multi.select2-container-active .select2-choices {
border-color: var(--fcs-accent) !important;
box-shadow: 0 0 0 3px rgba(77, 148, 209, .18) !important;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices li { float: none; margin: 0; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice {
position: relative;
display: inline-flex;
align-items: center;
padding: 3px 26px 3px 10px;
line-height: 1.3;
font-size: .875rem;
font-weight: 500;
background: var(--fcs-accent-soft) !important;
background-image: none !important;
border: 1px solid #b7d6ee !important;
color: #2f6da3;
border-radius: 999px;
box-shadow: none;
cursor: default;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close {
left: auto;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: none !important;
border-radius: 50%;
text-decoration: none;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close::before {
content: "\00d7";
position: absolute;
inset: 0;
text-align: center;
line-height: 13px;
font-size: 16px;
color: #2f6da3;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close:hover { background: rgba(47, 109, 163, .15) !important; }
.fcsearch .fcs-search .select2-container-multi .select2-search-field { flex: 1 1 80px; min-width: 60px; }
.fcsearch .fcs-search .select2-container-multi .select2-search-field input {
width: 100% !important;
height: 28px;
margin: 0;
padding: 0 4px;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-family: inherit;
font-size: .95rem;
font-weight: 400;
color: var(--fcs-text);
}
.fcsearch .fcs-search .select2-container-multi .select2-search-field input::placeholder,
.fcsearch .fcs-search .select2-container-multi .select2-search-field input.select2-default { color: #8b96a1 !important; font-weight: 400; }
/* Single select: chevron instead of the sprite arrow, clear "x" */
.fcsearch .fcs-search .select2-container .select2-choice .select2-arrow { width: 28px; }
.fcsearch .fcs-search .select2-container .select2-choice .select2-arrow b { background: none !important; }
.fcsearch .fcs-search .select2-container .select2-choice .select2-arrow b::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-right: 2px solid #6b7783;
border-bottom: 2px solid #6b7783;
transform: translate(-50%, -70%) rotate(45deg);
}
.fcsearch .fcs-search .select2-container .select2-choice abbr { right: 30px; top: 50%; margin-top: -6px; }
/* Plain text filter (e.g. "Audio file") */
.fcs-field .fc_filter_element input[type=text],
.fcs-field input.fc_field_filter[type=text] {
width: 100%;
min-height: 40px;
border: 1px solid var(--fcs-border);
border-radius: 10px;
padding: .4rem .8rem;
box-shadow: none;
}
/* Tag text / placeholder sizes (FLEXIcontent's own rules are more specific) */
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice { font-size: .875rem !important; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice div { font-size: inherit !important; line-height: 1.3; }
.fcsearch .fcs-search .select2-container-multi .select2-search-field input,
.fcsearch .fcs-search .select2-container-multi .select2-search-field input.select2-default {
font-size: .95rem !important;
font-weight: 400 !important;
color: #8b96a1;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-field input:not(.select2-default) { color: #2b3540; }
/* noUiSlider (Tempo etc.) */
.fcsearch .fcfilter_with_nouislider.noUi-target {
height: 6px;
margin: 20px 12px 16px;
background: #dbe2e8;
border: 0;
border-radius: 6px;
box-shadow: none;
}
.fcsearch .fcfilter_with_nouislider .noUi-base { height: 6px; }
.fcsearch .fcfilter_with_nouislider .noUi-connect,
.fcsearch .fcfilter_with_nouislider .noUi-origin.noUi-connect { background: var(--fcs-accent); box-shadow: none; border-radius: 6px; }
.fcsearch .fcfilter_with_nouislider .noUi-background { background: transparent; box-shadow: none; }
.fcsearch .fcfilter_with_nouislider .noUi-handle {
width: 22px;
height: 22px;
top: -8px;
left: -11px;
background: #fff;
border: 2px solid var(--fcs-accent);
border-radius: 50%;
box-shadow: 0 1px 4px rgba(20, 40, 60, .25);
cursor: grab;
}
.fcsearch .fcfilter_with_nouislider .noUi-handle::before,
.fcsearch .fcfilter_with_nouislider .noUi-handle::after { display: none; }
.fcsearch .fcfilter_with_nouislider .noUi-handle:hover { box-shadow: 0 0 0 6px rgba(77, 148, 209, .18); }
.fcsearch .fcs-field .fc_slider_input_box { color: var(--fcs-muted); font-size: .9rem; margin-top: .25rem; }
.fcsearch .fcs-field .fc_slider_input_box label { font-weight: 500; }
/* Multi-select: never scroll/clip the tag row horizontally */
.fcsearch .fcs-search .select2-container-multi .select2-choices { overflow: visible !important; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-field { min-width: 0; max-width: 100%; }
.fcsearch .fcs-search .select2-container-multi .select2-search-field input {
box-sizing: border-box;
min-width: 0 !important;
max-width: 100%;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice { max-width: 100%; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Multi-select: inner spacing (select2.css zeroes the padding), transparent input, prompt text */
.fcsearch .fcs-search .select2-container-multi .select2-choices {
box-sizing: border-box;
padding: 5px 8px !important;
overflow: hidden !important;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-field input.select2-input,
.fcsearch .fcs-search .select2-container-multi.select2-dropdown-open .select2-choices .select2-search-field input.select2-input {
background: transparent !important;
}
.fcsearch .fcs-search .fc_has_inner_prompt,
.fcsearch .fcs-search .fc_has_inner_prompt_select2 {
font-size: .9rem !important;
font-weight: 400 !important;
color: #8b96a1 !important;
letter-spacing: 0;
text-transform: none;
}
/* Multi-select: prompt + input share the row (fixes horizontal scroll/shift when tags are added) */
.fcsearch .fcs-search .select2-container-multi .select2-choices { overflow: clip !important; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-field {
display: flex;
align-items: center;
overflow: hidden;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-field .fc_has_inner_prompt {
flex: 0 0 auto;
white-space: nowrap;
margin-right: 4px;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-field input {
flex: 1 1 30px;
width: auto !important;
min-width: 30px !important;
}
/* Once tags are selected the "type to filter" hint is redundant (and would be clipped) */
.fcsearch .fcs-search .select2-container-multi .select2-choices:has(.select2-search-choice) .fc_has_inner_prompt { display: none; }
/* ---- Tags in the style of the Select2 demo: [x | label] on a slate background ---- */
.fcsearch .fcs-search .select2-container-multi .select2-choices { gap: 8px; padding: 8px 10px !important; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice {
display: inline-flex;
flex-direction: row;
align-items: stretch;
padding: 0 !important;
margin: 0;
background: #566f7b !important;
border: 1px solid #3f5561 !important;
border-radius: 5px;
color: #fff;
font-size: .95rem !important;
line-height: 1.2;
overflow: hidden;
}
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice div {
order: 2;
padding: 3px 12px 3px 10px;
color: #fff;
font-size: inherit !important;
line-height: 1.3;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close {
order: 1;
position: static;
transform: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: auto;
margin: 0;
border-right: 1px solid rgba(255, 255, 255, .28);
border-radius: 0;
background: none !important;
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close::before {
position: static;
inset: auto;
width: auto;
line-height: 1;
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, .8);
}
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close:hover { background: rgba(255, 255, 255, .14) !important; }
.fcsearch .fcs-search .select2-container-multi .select2-search-choice-close:hover::before { color: #fff; }
/* select2.css fixes the tag height at 14px */
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice { height: auto !important; min-height: 0; line-height: 1.2 !important; }
.fcsearch .fcs-search .select2-container-multi .select2-choices .select2-search-choice div { height: auto !important; line-height: 1.3 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Search button: icon only */
.fcs-bar .fcs-btn--primary { padding: .4rem .9rem; }
.fcs-bar .fcs-btn--primary svg { display: block; flex: 0 0 auto; }
/* "Please select content type before using filters" hint */
.fcs-panel.fcs-panel--hint {
background: var(--fcs-accent);
border: 0;
box-shadow: 0 4px 14px rgba(77, 148, 209, .35);
padding: 1rem 1.25rem;
}
.fcs-hint {
display: flex;
align-items: center;
justify-content: center;
gap: .7rem;
color: #fff;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
.fcs-hint svg { flex: 0 0 auto; color: #fff; }
/* Content type block: label + selector in one framed control */
.fcs-toolbar__type .fcs-field--inline {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: 4px 6px 4px 16px;
background: var(--fcs-surface);
border: 1px solid var(--fcs-border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(20, 40, 60, .05);
transition: border-color .15s, box-shadow .15s;
}
.fcs-toolbar__type .fcs-field--inline:focus-within {
border-color: var(--fcs-accent);
box-shadow: 0 0 0 3px rgba(77, 148, 209, .18);
}
.fcs-toolbar__type .fcs-label {
margin: 0;
padding: 0;
line-height: 1;
align-self: center;
white-space: nowrap;
}
.fcs-toolbar__type .fc_filter_html { display: flex; align-items: center; width: auto; min-width: 190px; }
/* the selector itself sits borderless inside the frame */
.fcsearch .fcs-search .fcs-toolbar__type .select2-container .select2-choice,
.fcsearch .fcs-search .fcs-toolbar__type select {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
min-height: 36px;
height: 36px;
font-weight: 600;
}
.fcsearch .fcs-search .fcs-toolbar__type .select2-container { min-width: 190px; }
/* Red frame around the whole block while the hint is visible */
.fcs-search.fcs-need-type.fcs-adv-open .fcs-toolbar__type .fcs-field--inline {
border-color: #e5383b;
box-shadow: 0 0 0 3px rgba(229, 56, 59, .22);
}
.fcs-search.fcs-need-type.fcs-adv-open .fcs-toolbar__type .fcs-label { color: #c62828; }
.fcs-toolbar__type .select2-container,
.fcs-toolbar__type .fc_filter_html,
.fcs-toolbar__type .select2-container .select2-choice > .select2-chosen { background: transparent !important; }
.fcs-toolbar__type .select2-container .select2-choice { border-radius: 8px !important; }
.fcs-toolbar__type .fc_filter_html { margin: 0 !important; padding: 0 !important; }
.fcs-toolbar__type .select2-container { margin: 0 !important; }
.fcs-toolbar__type .select2-container .select2-choice { padding-top: 0 !important; padding-bottom: 0 !important; }
/* ======================================================================
One control language for the whole search header:
base = "Content types" block (white, 1px border, 12px radius, soft shadow)
====================================================================== */
.fcsearch,
.fcs-mod {
--fcs-control-radius: 12px;
--fcs-control-h: 46px;
--fcs-control-shadow: 0 1px 2px rgba(20, 40, 60, .05);
}
/* Search bar */
.fcs-bar {
border-radius: var(--fcs-control-radius);
box-shadow: var(--fcs-control-shadow);
padding: 4px 4px 4px 16px;
}
.fcs-bar:focus-within { box-shadow: 0 0 0 3px rgba(77, 148, 209, .18); }
.fcs-bar .fcs-btn--primary { border-radius: 9px; }
/* Content type block (same height as its neighbours) */
.fcs-toolbar__type .fcs-field--inline { min-height: var(--fcs-control-h); box-sizing: border-box; border-radius: var(--fcs-control-radius); box-shadow: var(--fcs-control-shadow); }
/* Advanced / Reset */
.fcs-toolbar .fcs-btn--ghost,
.fcs-toolbar .fcs-btn--link {
height: var(--fcs-control-h);
box-sizing: border-box;
border-radius: var(--fcs-control-radius);
padding: 0 1.1rem;
}
.fcs-toolbar .fcs-btn--ghost { box-shadow: var(--fcs-control-shadow); font-weight: 600; }
.fcs-toolbar .fcs-btn--link { border: 1px solid transparent; }
.fcs-toolbar .fcs-btn--link:hover { border-color: var(--fcs-border); background: var(--fcs-surface); }
/* Sort / page size: no stray offsets, same look, pushed to the right */
.fcsearch .fcs-results-bar__controls { margin-left: auto; }
.fcsearch .fcs-results-bar .fc_limit_box,
.fcsearch .fcs-results-bar .fc_orderby_box,
.fcsearch .fcs-results-bar .fc_limit_selector,
.fcsearch .fcs-results-bar .fc_orderby_selector { margin: 0 !important; padding: 0 !important; float: none; }
.fcsearch .fcs-search .fcs-results-bar select,
.fcsearch .fcs-search .fcs-results-bar .select2-container .select2-choice {
height: var(--fcs-control-h);
min-height: var(--fcs-control-h);
border-radius: var(--fcs-control-radius) !important;
box-shadow: var(--fcs-control-shadow) !important;
padding-left: 1rem;
}
/* Form fields inside the filter panel and the panel itself */
.fcs-panel { border-radius: var(--fcs-control-radius); box-shadow: var(--fcs-control-shadow); }
.fcsearch .fcs-search .fcs-panel select,
.fcsearch .fcs-search .fcs-panel .select2-container .select2-choice,
.fcsearch .fcs-search .fcs-panel .select2-container-multi .select2-choices,
.fcs-panel .fc_filter_element input[type=text],
.fcs-panel input.fc_field_filter[type=text] { border-radius: var(--fcs-control-radius) !important; }
.fcs-panel.fcs-panel--hint { border-radius: var(--fcs-control-radius); }
body .select2-drop { border-radius: var(--fcs-control-radius, 12px) !important; }
/* "No search results found" */
.fcsearch .alert.noitems_search {
margin: 1.25rem 0 0;
padding: 1rem 1.25rem;
background: #fff8e6;
border: 1px solid #f1dfb0;
border-radius: var(--fcs-control-radius);
color: #7a5b00;
font-size: 1rem;
box-shadow: var(--fcs-control-shadow);
}
/* Reset: a proper button, same as "Advanced" */
.fcs-toolbar .fcs-btn--link {
background: var(--fcs-surface);
border: 1px solid var(--fcs-border);
box-shadow: var(--fcs-control-shadow);
color: var(--fcs-muted);
font-weight: 600;
}
.fcs-toolbar .fcs-btn--link:hover { color: #c62828; border-color: #e5a3a5; background: #fff; }
.fcs-toolbar__actions { gap: .6rem; }
/* Search module (mod_flexiadvsearch, da-default layout): same bar as the search page */
.fcs-mod.fcs-search { margin-bottom: 0; }
/* Scope select inside the search bar (select2): [ Sound Effects v | search field | go ] */
.fcs-bar select.fcs-scope-select { /* before select2 takes over */
align-self: center; width: auto; border: 0; background: transparent; font-weight: 600; font-size: 1rem; color: var(--fcs-text);
}
.fcs-search .fcs-bar .select2-container.fcs-scope {
flex: 0 0 auto;
align-self: center;
width: auto !important;
min-width: 0 !important;
margin: 0 .6rem 0 0;
border-right: 1px solid var(--fcs-border);
}
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice,
.fcs-search .fcs-bar .select2-container.fcs-scope.select2-container-active .select2-choice,
.fcs-search .fcs-bar .select2-container.fcs-scope.select2-dropdown-open .select2-choice {
display: flex;
align-items: center;
width: auto;
height: auto;
min-height: 0;
margin: 0;
padding: .35rem 1.9rem .35rem 0;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--fcs-text);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
}
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice:hover { color: var(--fcs-accent-dark); }
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice > .select2-chosen { flex: 1 1 auto; margin: 0; white-space: nowrap; font: inherit; font-weight: 600; }
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice .select2-arrow { width: 24px; background: transparent; border: 0; }
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice .select2-arrow b { background: none !important; }
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice .select2-arrow b::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-right: 2px solid #6b7783;
border-bottom: 2px solid #6b7783;
transform: translate(-50%, -70%) rotate(45deg);
}
@media (max-width: 640px) {
.fcs-search .fcs-bar .select2-container.fcs-scope { flex: 1 1 100%; margin: 0 0 .4rem; border-right: 0; border-bottom: 1px solid var(--fcs-border); }
}
/* Search page: "Advanced" opened but no site section chosen -> point at the scope dropdown */
.fcsearch .fcs-bar { isolation: isolate; }
.fcsearch .fcs-search.fcs-need-type.fcs-adv-open .fcs-bar .select2-container.fcs-scope::before {
content: "";
position: absolute;
z-index: -1;
inset: -7px -10px -7px -10px;
border: 1px solid var(--fcs-accent);
border-radius: 10px;
background: var(--fcs-accent-soft);
box-shadow: 0 0 0 3px rgba(77, 148, 209, .22);
animation: fcs-scope-attn 1.4s ease-out 3;
}
.fcsearch .fcs-search.fcs-need-type.fcs-adv-open .fcs-bar .select2-container.fcs-scope .select2-choice { color: var(--fcs-accent-dark); }
@keyframes fcs-scope-attn {
0% { box-shadow: 0 0 0 0 rgba(77, 148, 209, .55); }
70%, 100% { box-shadow: 0 0 0 10px rgba(77, 148, 209, 0); }
}
@media (prefers-reduced-motion: reduce) {
.fcsearch .fcs-search.fcs-need-type.fcs-adv-open .fcs-bar .select2-container.fcs-scope::before { animation: none; }
}
/* Search page layout */
/* Footer sticks to the bottom of the screen when the page content is short (e.g. the empty start page) */
body.com_flexicontent.view-search #g-page-surround {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body.com_flexicontent.view-search #g-container-main { flex: 1 0 auto; }
body.com_flexicontent.view-search #g-footer { flex: 0 0 auto; }
/* Advanced / Reset: same width as the search bar, so Reset lines up with the bar's right edge */
.fcsearch .fcs-toolbar {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Suggestions menu (jQuery UI autocomplete, appended to ; class .fcs-ac is added by bar.php) */
.ui-menu.ui-autocomplete.fcs-ac {
box-sizing: border-box;
padding: 6px;
background: #fff;
border: 1px solid #dbe2e8;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(20, 40, 60, .16);
font-family: inherit;
font-size: 1rem;
color: #2b3540;
z-index: 100010; /* above the theme offcanvas toggle (100001) */
max-height: 340px;
overflow-y: auto;
}
.ui-menu.ui-autocomplete.fcs-ac .ui-menu-item-wrapper {
padding: .55rem .8rem;
margin: 0;
border: 0 !important;
border-radius: 8px;
background: transparent;
color: #2b3540;
cursor: pointer;
line-height: 1.3;
}
.ui-menu.ui-autocomplete.fcs-ac .ui-menu-item-wrapper.ui-state-active,
.ui-menu.ui-autocomplete.fcs-ac .ui-menu-item-wrapper:hover {
background: #e8f2fa !important;
color: #3a7db8 !important;
margin: 0;
}
/* "Press Enter or click search to update the results" notice (shown by FLEXIcontent JS after a change) */
.fcsearch .fcs-note.fcs-note--warn {
display: block !important; /* the FLEXIcontent JS shows it as inline-block; keep it a block as wide as the bar */
position: relative;
box-sizing: border-box;
max-width: 800px;
margin: .75rem auto 0;
padding: .6rem 1rem .6rem 2.6rem;
background: var(--fcs-accent-soft);
border: 1px solid #b7d3ec;
border-radius: 10px;
color: var(--fcs-accent-dark);
font-size: .95rem;
line-height: 1.3;
}
.fcsearch .fcs-note.fcs-note--warn::before {
content: "";
position: absolute;
left: .95rem;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a7db8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fcsearch .fcs-note.fcs-note--warn[style*="display: none"],
.fcsearch .fcs-note.fcs-note--warn[style*="display:none"] { display: none !important; }
/* jQuery UI screen-reader live region of the autocomplete: its stylesheet is not loaded on this site, so it showed as visible text below the footer */
.ui-helper-hidden-accessible {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------- Media File filters (Media Type / Sample Rate / Duration) ----------
The field plugin outputs the three properties inside one wrapper; flatten it so each property is its own grid cell. */
.fcs-field--media,
.fcs-field--media > .fc_filter_html,
.fcs-field--media .fc_filter_media_properties_box { display: contents; }
.fcs-field--media > .fcs-label { display: none; }
.fcs-field--media .fc_filter_media_properties_box > div { min-width: 0; }
.fcs-field--media .fc_filter_label {
display: block;
font-size: .8rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fcs-muted);
margin: 0 0 .35rem;
width: auto;
float: none;
padding: 0;
background: none;
}
.fcs-field--media .fc_filter_media_property_duration > .fc_filter_html { display: flex; align-items: center; gap: .5rem; width: 100%; float: none; }
.fcs-field--media .fc_filter_media_property_duration .fc_filter_element { flex: 1 1 0; min-width: 0; width: auto; float: none; margin: 0; padding: 0; }
.fcs-field--media .fc_filter_media_property_duration .fc_filter_element input { width: 100% !important; }
.fcs-field--media .fc_filter_media_property_duration .width-10-percents { display: none; }
/* the theme gives these cells an inline-block / top margin / fixed width; make each property fill its grid cell like the other filters */
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box .fc_filter_media_property_media_format > .fc_filter_html,
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box .fc_filter_media_property_sample_rate > .fc_filter_html,
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box .fc_filter_media_property_duration > .fc_filter_html {
display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_property_duration > .fc_filter_html { display: flex !important; gap: .5rem; align-items: center; }
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_property_duration .fc_filter_element { flex: 1 1 0 !important; width: auto !important; }
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box > div { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_property_duration input { font-weight: 400 !important; }
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_property_duration input::placeholder { font-weight: 400; color: #8a96a3; }
.fcsearch .fcs-search .fcs-field--media .select2-container { width: 100% !important; }
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box .fc_filter_media_property_duration > .fc_filter_html { display: flex !important; flex-wrap: nowrap; gap: .5rem; align-items: center; }
/* ---------- Music, Sound Effects and Intro Music: field filters two per row (License alone in its row), Media File properties three per row ---------- */
@media (min-width: 641px) {
.contenttype_3 .fcs-filters,
.contenttype_2 .fcs-filters,
.contenttype_5 .fcs-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contenttype_3 .fcs-filters .fcs-field--media,
.contenttype_2 .fcs-filters .fcs-field--media,
.contenttype_5 .fcs-filters .fcs-field--media { display: block; grid-column: 1 / -1; }
.contenttype_3 .fcs-filters .fcs-field--media > .fc_filter_html,
.contenttype_2 .fcs-filters .fcs-field--media > .fc_filter_html,
.contenttype_5 .fcs-filters .fcs-field--media > .fc_filter_html { display: block; }
.contenttype_3 .fcs-filters .fcs-field--media .fc_filter_media_properties_box,
.contenttype_2 .fcs-filters .fcs-field--media .fc_filter_media_properties_box,
.contenttype_5 .fcs-filters .fcs-field--media .fc_filter_media_properties_box {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem;
}
}
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box > div { padding: 0 !important; }
/* ---------- Mobile: Advanced panel ---------- */
@media (max-width: 640px) {
.fcs-panel { padding: 1rem; }
.fcs-filters { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fcs-field .fc_filter_html,
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box > div,
.fcsearch .fcs-search .fcs-field--media .fc_filter_media_properties_box .fc_filter_html { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.fcs-field .fc_filter_html > * { max-width: 100%; }
.fcsearch .fcs-search .fcs-field select,
.fcsearch .fcs-search .fcs-field input[type=text] { width: 100% !important; min-height: 44px; font-weight: 400; font-size: 1rem; }
/* touch devices get native multi-selects instead of select2: keep them compact and in the site style */
.fcsearch .fcs-search .fcs-field select[multiple] { height: 9rem; padding: .35rem; line-height: 1.5; }
.fcsearch .fcs-search .fcs-field select[multiple] option { padding: .3rem .5rem; border-radius: 6px; }
.fcsearch .fcs-search .fcs-field select[multiple] option:checked { background: var(--fcs-accent-soft, #dbeafe) linear-gradient(0deg, var(--fcs-accent-soft, #dbeafe), var(--fcs-accent-soft, #dbeafe)); color: var(--fcs-accent, #2f6da3); font-weight: 600; }
.fcs-field--media .fc_filter_label { margin-bottom: .35rem; }
.fcs-field--media .fc_filter_media_property_duration > .fc_filter_html { gap: .6rem; }
}
/* ---------- Mobile: search bar = scope select on its own row, then [ field | go ] ---------- */
@media (max-width: 640px) {
.fcs-search .fcs-bar { flex-wrap: wrap; gap: .5rem; padding: .5rem; border-radius: 14px; }
.fcs-search .fcs-bar .select2-container.fcs-scope {
flex: 1 1 100%; margin: 0; border: 1px solid var(--fcs-border); border-radius: 10px; padding: 0 .85rem;
min-height: 44px; display: flex; align-items: center; background: var(--fcs-surface);
}
.fcs-search .fcs-bar .select2-container.fcs-scope .select2-choice { padding: .55rem 1.9rem .55rem 0; width: 100%; }
.fcs-search .fcs-bar .fcs-bar__field {
flex: 1 1 0; min-width: 0; padding: 0 .85rem; min-height: 44px;
border: 1px solid var(--fcs-border); border-radius: 10px; background: var(--fcs-surface);
}
.fcs-search .fcs-bar .fcs-bar__icon { display: none; }
.fcs-search .fcs-bar .fcs-input, .fcs-search .fcs-bar input[type=text] { font-size: 1rem; padding: .5rem 0; }
.fcs-search .fcs-bar .fcs-btn--primary { flex: 0 0 48px; width: 48px; min-height: 44px; padding: 0; border-radius: 10px; justify-content: center; }
.fcs-search .fcs-bar .fcs-btn--primary svg { width: 22px; height: 22px; }
/* attention highlight stays inside the bar */
.fcsearch .fcs-search.fcs-need-type.fcs-adv-open .fcs-bar .select2-container.fcs-scope::before { inset: -1px; border-radius: 10px; }
}
@media (max-width: 640px) {
.fcs-toolbar { justify-content: flex-end; }
.fcs-toolbar .fcs-toolbar__actions { margin-left: auto; justify-content: flex-end; }
}
@media (max-width: 640px) {
.fcs-toolbar { margin-top: .5rem; }
}
/* ---------- Tooltips (popovers are appended to , so they are scoped by the body class) ---------- */
body.view-search .popover {
--bs-popover-bg: #fff;
--bs-popover-border-color: #dbe2e8;
--bs-popover-header-bg: transparent;
--bs-popover-header-color: #6b7783;
--bs-popover-body-color: #2b3540;
--bs-popover-border-radius: 12px;
--bs-popover-max-width: 260px;
max-width: 260px;
background: #fff;
border: 1px solid #dbe2e8;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(20, 40, 60, .14);
font-family: inherit;
}
body.view-search .popover .popover-header,
body.view-search .popover .popover-title {
background: transparent;
border: 0;
padding: .7rem 1rem .1rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7783;
}
body.view-search .popover .popover-body,
body.view-search .popover .popover-content {
padding: .2rem 1rem .8rem;
font-size: .9rem;
line-height: 1.4;
color: #2b3540;
}
/* ---------- Sort / page size dropdowns: the label must fit and stay clear of the arrow ---------- */
.fcsearch .fcs-results-bar .select2-container { width: auto !important; min-width: 150px; }
.fcsearch .fcs-search .fcs-results-bar .select2-container .select2-choice {
display: flex; align-items: center; padding: 0 2.2rem 0 1rem; white-space: nowrap;
}
.fcsearch .fcs-search .fcs-results-bar .select2-container .select2-choice > .select2-chosen { margin: 0 !important; overflow: visible; text-overflow: clip; }
.fcsearch .fcs-search .fcs-results-bar .select2-container .select2-choice .select2-arrow { width: 2.2rem; right: 0; }
.fcsearch .fcs-search .fcs-results-bar select { padding-right: 2.2rem; }
/* FLEXIcontent puts the whole tooltip (Title
text) into the popover header */
body.view-search .popover .popover-header {
margin: 0;
padding: .75rem 1rem;
font-size: .9rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: #2b3540;
}
body.view-search .popover .popover-header strong {
display: block;
margin-bottom: .15rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7783;
}
body.view-search .popover .popover-header br { display: none; }
/* Search module placed under the H1 on section pages (Sound Effects / Music / Intro Music) */
.da-section-search { margin-bottom: 1.25rem; }
@media (max-width: 640px) { .da-section-search { margin-bottom: 1rem; } }
/* Search module in the "fc-search" position (home page): side gutters on phones. Inside section pages the page already has its own padding. */
@media (max-width: 640px) {
.platform-content .fc-search.moduletable { padding-left: 15px; padding-right: 15px; } /* beats the theme's ".platform-content .moduletable { padding: 0 }" */
.da-section-search .platform-content .fc-search.moduletable,
.da-section-search .fc-search.moduletable.moduletable { padding-left: 0; padding-right: 0; }
}
/* Home page on phones: half the air above and below the search module */
@media (max-width: 640px) {
body:has(.g-content > .platform-content > .fc-search.moduletable) .g-grid:has(> .g-block > .g-system-messages > #system-message-container:empty) { display: none; }
#g-mainbar .g-content:has(> .platform-content > .fc-search.moduletable) { margin-bottom: 0; }
}
/* ---------- winsoft.com.ua: software result cards (image left, title + snippet right) ---------- */
.fcsearch .fc_search_results_list { float: none !important; width: 100%; margin: 1rem 0 0 !important; }
.fcsearch .fc_search_results_list > .fcclear { display: none; }
.fcsearch .fc_search_results_list fieldset.fc_search_result {
display: block;
border: 1px solid var(--fcs-border);
border-radius: var(--fcs-radius);
background: var(--fcs-surface);
box-shadow: var(--fcs-shadow);
margin: 0 0 1rem;
padding: 1rem 1.25rem;
min-width: 0;
transition: box-shadow .15s, transform .15s;
}
.fcsearch .fc_search_results_list fieldset.fc_search_result:hover {
box-shadow: 0 2px 4px rgba(20, 40, 60, .08), 0 10px 28px rgba(20, 40, 60, .12);
transform: translateY(-1px);
}
.fcsearch .fc_search_results_list .search-results { display: grid; grid-template-columns: 96px 1fr; column-gap: 1.25rem; align-items: start; }
.fcsearch .fc_search_results_list .search-results > * { grid-column: 2; }
.fcsearch .fc_search_results_list .search-results > .fc_search_result_image { grid-column: 1; grid-row: 1 / span 6; float: none; margin: 0; }
.fcsearch .fc_search_results_list .fc_search_result_image img { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; display: block; }
.fcsearch .fc_search_results_list h2.fc_search_result_title { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.fcsearch .fc_search_results_list h2.fc_search_result_title a { color: var(--fcs-text); text-decoration: none; }
.fcsearch .fc_search_results_list h2.fc_search_result_title a:hover { color: var(--fcs-accent-dark); }
.fcsearch .fc_search_results_list .fc_search_result_text { color: var(--fcs-muted); font-size: .95rem; line-height: 1.5; }
.fcsearch .fc_search_results_list .fc_search_result_text b,
.fcsearch .fc_search_results_list .fc_search_result_text mark { color: var(--fcs-text); background: var(--fcs-accent-soft); padding: 0 .15em; border-radius: 3px; }
.fcsearch .fc_search_results_list .fcclear { display: none; }
@media (max-width: 640px) {
.fcsearch .fc_search_results_list .search-results { grid-template-columns: 64px 1fr; column-gap: .9rem; }
.fcsearch .fc_search_results_list .fc_search_result_image img { width: 64px; height: 64px; border-radius: 12px; }
.fcsearch .fc_search_results_list fieldset.fc_search_result { padding: .85rem; }
}
/* ---------- winsoft.com.ua: search dialog (native