/*
 * Yokoso DirectSort v1.11.2
 *
 * Admin-configurable CSS variables are printed after this stylesheet. Fallbacks
 * preserve the established DirectSort / LiveCrawler appearance if an option is
 * unavailable for any reason.
 */
.yds-directsort {
    position: relative;
    width: auto;
    min-width: 0;
    overflow: visible;
}

.yds-directsort__toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--yds-launcher-width, 34px);
    height: var(--yds-launcher-height, 34px);
    min-width: var(--yds-launcher-width, 34px);
    min-height: var(--yds-launcher-height, 34px);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--yds-icon-color, currentColor);
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    opacity: .9;
    transition: opacity 160ms ease, color 160ms ease;
}

.yds-directsort__toggle:hover,
.yds-directsort__toggle:focus-visible {
    opacity: 1;
    color: var(--yds-icon-hover-color, var(--yds-icon-color, currentColor));
}

.yds-directsort__toggle:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
}

.yds-directsort__sort-icon {
    display: block;
    width: var(--yds-icon-size, 17px);
    height: var(--yds-icon-size, 17px);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--yds-icon-stroke-width, 2.6);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transform: translate(
        calc(var(--yds-icon-offset-left, 0px) - var(--yds-icon-offset-right, 0px)),
        calc(var(--yds-icon-offset-top, 0px) - var(--yds-icon-offset-bottom, 0px))
    );
}

/* The temporary WooCommerce category is a normal LiveCrawler check/uncheck
 * option. It is intentionally borderless; checked state is communicated by the
 * checkbox, green category text and the result-status category label. */
.yfls-portal .yds-category-source-option {
    position: relative;
    margin-top: 5px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: var(--yds-category-font-size, var(--ybc-control-font-size, 13px)) !important;
    cursor: pointer !important;
}

.yfls-portal .yds-category-source-option::before,
.yfls-portal .yds-category-source-option::after {
    content: none !important;
    display: none !important;
}

.yfls-portal .yds-category-source-option.is-active {
    color: var(--yds-category-text-color, var(--ybc-active-filter-status-text-color, #00cc00)) !important;
}

.yfls-portal .yds-category-source-option input[type="checkbox"] {
    opacity: 1 !important;
    cursor: pointer !important;
}

.yfls-portal .yds-category-source-option.is-active input[type="checkbox"] {
    accent-color: var(--yds-category-text-color, var(--ybc-active-filter-status-text-color, #00cc00));
}

.yds-directsort.is-livecrawler-unavailable .yds-directsort__toggle {
    opacity: .42;
}

@media (prefers-reduced-motion: reduce) {
    .yds-directsort__toggle {
        transition: none;
    }
}

/* Status font weight applies only to LiveCrawler's top-left result/status line.
 * The category label itself survives LiveCrawler text redraws because its value
 * is stored as an attribute and rendered through ::after. */
.yfls-portal.yds-category-scoped [data-yfls-meta],
.yfls-portal.yds-category-scoped [data-yfls-meta] * {
    font-weight: var(--yds-status-font-weight, 600) !important;
}

.yfls-portal.yds-category-scoped [data-yfls-meta][data-yds-category-label]::after,
.yfls-portal.yds-category-scoped .yfls-result-meta[data-yds-category-label]::after {
    content: " · " attr(data-yds-category-label);
    color: var(--yds-category-text-color, var(--ybc-active-filter-status-text-color, #00cc00));
    font-size: var(--yds-category-font-size, inherit);
    font-weight: inherit;
}

/* Place the label before the existing icon without moving or resizing it. */
.yds-directsort__toggle {
    position: relative;
    overflow: visible;
}
.yds-directsort__label {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}