/* The desktop listing filters (Catalog/_PlpDesktopFilters.cshtml, plp-filters-desktop.js): the column beside the
   list on category, brand, search and tag pages. Neutral greys (ink #3f4064, its second line #81858b, rules
   #f0f0f1 / #e0e0e2) and ONE accent, the store's brand colour (--ryan-primary, published on :root by
   _Root.Head.cshtml from the PrimaryBrandColor setting): a ticked box, the switch when on, the price slider, a
   section's dot and «حذف فیلترها». A list's options are checkboxes; a setting that is on or off (the in-stock row) is
   a switch. Plain CSS, scoped under .tc-dkf. */

.tc-dkf {
    --dkf-ink: #3f4064;
    --dkf-sub: #81858b;
    --dkf-caption: #a1a3a8;
    --dkf-line: #e0e0e2;
    --dkf-hair: #f0f0f1;
    --dkf-accent: var(--ryan-primary, #007ad0);
    --dkf-accent-rgb: var(--ryan-primary-rgb, 0, 122, 208);
    --dkf-top: 16px;
    position: sticky;
    top: var(--dkf-top);
    align-self: start;
    min-width: 0;
    direction: rtl;
    transition: top .2s ease;
}

.tc-dkf *,
.tc-dkf *::before,
.tc-dkf *::after {
    box-sizing: border-box;
}

.tc-dkf [hidden] {
    display: none !important;
}

.tc-dkf button,
.tc-dkf input {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* the column scrolls inside itself when it is taller than the window, with a bar only while the pointer is over it */
.tc-dkf__panel {
    max-height: calc(100vh - var(--dkf-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 8px;
    border: 1px solid var(--dkf-line);
    border-radius: 8px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.tc-dkf__panel:hover {
    scrollbar-color: #d4d5d9 transparent;
}

.tc-dkf__panel::-webkit-scrollbar {
    width: 4px;
}

.tc-dkf__panel::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: transparent;
}

.tc-dkf__panel:hover::-webkit-scrollbar-thumb {
    background: #d4d5d9;
}

/* ---------- icons: a shape over the text colour, as the phone's filters draw them ---------- */
.tc-dkf-i {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--dkf-i) center / contain no-repeat;
    mask: var(--dkf-i) center / contain no-repeat;
}

.tc-dkf-i--down {
    --dkf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

.tc-dkf-i--search {
    --dkf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m15.8 15.8 4.7 4.7'/%3E%3C/svg%3E");
}

.tc-dkf-i--x {
    --dkf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.tc-dkf-i--tick {
    --dkf-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.2 2.2 2.2 4.8-4.8'/%3E%3C/svg%3E");
}

/* the store's own Toman mark; the artwork sits well inside its 25x26 box, so the box is sized off the visible mark */
.tc-dkf-i--toman {
    --dkf-i: url("../product-card/toman.svg");
    width: 30px;
    height: 31px;
}

/* ---------- the head ---------- */
.tc-dkf__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    padding: 16px 0 8px;
    background: #fff;
}

.tc-dkf__title {
    margin: 0;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    color: #0c0c0c;
}

.tc-dkf__clear {
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px !important;
    line-height: 24px;
    font-weight: 700;
    color: var(--dkf-accent) !important;
    cursor: pointer;
}

.tc-dkf__clear:hover {
    opacity: .8;
}

/* ---------- search in the results ---------- */
.tc-dkf__find {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    margin: 4px 0 8px;
    padding: 0 12px 0 4px;
    border-radius: 8px;
    background: var(--dkf-hair);
    color: var(--dkf-sub);
}

.tc-dkf__find:focus-within {
    box-shadow: inset 0 0 0 1px var(--dkf-line);
    background: #fff;
}

.tc-dkf__find-field {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px !important;
    color: var(--dkf-ink) !important;
}

.tc-dkf__find-field::placeholder {
    color: var(--dkf-caption);
}

.tc-dkf__find-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dkf-sub) !important;
    cursor: pointer;
}

.tc-dkf__find-clear .tc-dkf-i {
    width: 16px;
    height: 16px;
}

/* the search is asked for with this button (or Enter), never as the words are typed */
.tc-dkf__find-go {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--dkf-ink);
    color: #fff !important;
    cursor: pointer;
    transition: opacity .12s ease;
}

.tc-dkf__find-go:hover {
    opacity: .88;
}

.tc-dkf__find-go:focus-visible {
    outline: 2px solid var(--dkf-accent);
    outline-offset: 2px;
}

.tc-dkf__find-go .tc-dkf-i {
    width: 18px;
    height: 18px;
}

/* ---------- a section ---------- */
.tc-dkf__sec,
.tc-dkf__toggle {
    border-bottom: 1px solid var(--dkf-hair);
}

.tc-dkf__panel > :last-child {
    border-bottom: 0;
}

.tc-dkf__sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 0;
    border: 0;
    background: none;
    text-align: right;
    color: var(--dkf-ink) !important;
    cursor: pointer;
}

.tc-dkf__sec-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tc-dkf__sec-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: var(--dkf-ink);
}

.tc-dkf__dot {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--dkf-accent);
}

/* what is chosen, one line under the title */
.tc-dkf__sum {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: var(--dkf-sub);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-dkf__sec-head .tc-dkf-i--down {
    color: var(--dkf-ink);
    transition: transform .2s ease;
}

.tc-dkf__sec.is-open > .tc-dkf__sec-head .tc-dkf-i--down {
    transform: rotate(180deg);
}

/* the body opens to its own height */
.tc-dkf__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}

.tc-dkf__sec.is-open > .tc-dkf__body {
    grid-template-rows: 1fr;
}

.tc-dkf__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .2s;
}

.tc-dkf__sec.is-open > .tc-dkf__body > .tc-dkf__inner {
    visibility: visible;
    padding-bottom: 12px;
    transition-delay: 0s;
}

/* ---------- a list: the search over it, the rows ---------- */
.tc-dkf__filter {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0 0 8px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--dkf-hair);
    color: var(--dkf-sub);
    cursor: text;
}

.tc-dkf__filter-field {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px !important;
    color: var(--dkf-ink) !important;
    -webkit-appearance: none;
    appearance: none;
}

.tc-dkf__filter-field::placeholder {
    color: var(--dkf-caption);
}

.tc-dkf__filter-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.tc-dkf__list {
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: #d4d5d9 transparent;
}

.tc-dkf__list::-webkit-scrollbar {
    width: 4px;
}

.tc-dkf__list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #d4d5d9;
}

.tc-dkf__list > li {
    margin: 0;
    padding: 0;
}

.tc-dkf__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 6px 0 6px 4px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

/* the real box is under the drawn one: it still takes the focus and the click */
.tc-dkf__cb {
    position: absolute;
    right: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 !important;
    opacity: 0;
    pointer-events: none;
}

.tc-dkf__box {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--dkf-ink);
    border-radius: 4px;
    background: #fff;
    transition: background-color .12s ease, border-color .12s ease;
}

.tc-dkf__box::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.2 2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.2 2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
}

.tc-dkf__cb:checked + .tc-dkf__box {
    border-color: var(--dkf-accent);
    background: var(--dkf-accent);
}

.tc-dkf__cb:checked + .tc-dkf__box::after {
    opacity: 1;
}

.tc-dkf__cb:focus-visible + .tc-dkf__box {
    box-shadow: 0 0 0 3px rgba(var(--dkf-accent-rgb), .25);
}

.tc-dkf__opt:hover .tc-dkf__box {
    border-color: var(--dkf-accent);
}

/* ---------- the switch ----------
   off: a grey track; on: the track in the accent. A white knob, centred by the track's flex box, rests on the right
   (the page is right-to-left) and moves left when on. */
.tc-dkf__switch {
    display: flex;
    align-items: center;
    flex: none;
    box-sizing: border-box;
    width: 40px;
    height: 24px;
    padding: 0 3px;
    border-radius: 12px;
    background: #d4d5d9;
    transition: background-color .2s ease;
}

.tc-dkf__switch::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .2s ease;
}

.tc-dkf__sw-input:checked + .tc-dkf__switch {
    background: var(--dkf-accent);
}

.tc-dkf__sw-input:checked + .tc-dkf__switch::before {
    transform: translateX(-16px);
}

.tc-dkf__sw-input:focus-visible + .tc-dkf__switch {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dkf-accent);
}

.tc-dkf__toggle:hover .tc-dkf__sw-input:not(:checked) + .tc-dkf__switch {
    background: #c3c4c9;
}

.tc-dkf__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 22px;
    font-weight: 700;
    color: var(--dkf-ink);
}

.tc-dkf__latin {
    flex: none;
    max-width: 45%;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: var(--dkf-sub);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-dkf__swatch {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--dkf-line);
    border-radius: 50%;
}

.tc-dkf__none {
    margin: 8px 0 4px;
    font-size: 12px;
    line-height: 20px;
    color: var(--dkf-sub);
}

/* ---------- the switch row ---------- */
.tc-dkf__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 14px 0;
    cursor: pointer;
    user-select: none;
}

.tc-dkf__toggle-text {
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: var(--dkf-ink);
}

.tc-dkf__sw-input {
    position: absolute;
    left: 0;
    top: 50%;
    width: 44px;
    height: 26px;
    margin: -13px 0 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ---------- the price ---------- */
.tc-dkf__price {
    padding-left: 4px;
    padding-right: 4px;
}

.tc-dkf__amount {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    color: var(--dkf-ink);
}

.tc-dkf__amount + .tc-dkf__amount {
    margin-top: 8px;
}

/* the mark's artwork rides high in its box: set down onto the figures' line, as the product card sets it */
.tc-dkf__amount .tc-dkf-i--toman {
    position: relative;
    top: 5px;
}

.tc-dkf__amount-label {
    flex: none;
    width: 16px;
    font-size: 13px;
    line-height: 22px;
    color: var(--dkf-sub);
}

/* .tc-dkf input's `font: inherit` outranks a single class: the field's weight is set from the column */
.tc-dkf .tc-dkf__amount-field {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dkf-line) !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
    line-height: 46px;
    font-weight: 700;
    color: var(--dkf-ink) !important;
    text-align: left;
}

.tc-dkf__amount-field:focus {
    border-bottom-color: var(--dkf-accent) !important;
}

.tc-dkf__range {
    position: relative;
    height: 20px;
    margin: 28px 10px 0;
    touch-action: none;
    cursor: pointer;
}

.tc-dkf__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    height: 4px;
    border-radius: 3px;
    background: var(--dkf-line);
}

.tc-dkf__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--dkf-accent);
}

.tc-dkf__knob {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background: var(--dkf-accent);
    box-shadow: 0 0 0 4px #fff;
    cursor: grab;
    outline: 0;
    transition: box-shadow .12s ease;
}

.tc-dkf__knob:hover,
.tc-dkf__knob:focus-visible,
.tc-dkf__knob.is-dragging {
    box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(var(--dkf-accent-rgb), .18);
}

.tc-dkf__knob.is-dragging {
    cursor: grabbing;
}

.tc-dkf__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    color: var(--dkf-sub);
}

/* ---------- the categories: links, not filters ---------- */
.tc-dkf__nav-link {
    display: block;
    padding: 9px 0;
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    color: var(--dkf-ink) !important;
    text-decoration: none !important;
}

.tc-dkf__nav-link:hover {
    color: var(--dkf-accent) !important;
}