/* Randly Smart Match settings: flag dropdowns (generated by patch_smart_select.py) */
.rl-settings-card {
    --ss-bg: #17181b;
    --ss-field: #1f2023;
    --ss-line: rgba(255, 255, 255, .12);
    --ss-text: #e8e8e8;
    --ss-muted: #a7a7ad;
    --ss-hover: rgba(255, 255, 255, .06);
    --ss-sel-bg: rgba(18, 184, 134, .14);
    --ss-accent: #12b886;
    --ss-btn: #00805f;
}
html[data-theme="light"] .rl-settings-card {
    --ss-bg: #ffffff;
    --ss-field: #f7f7f8;
    --ss-line: #dedee3;
    --ss-text: #111114;
    --ss-muted: #626269;
    --ss-hover: #f1f2f4;
    --ss-sel-bg: #e6f8f2;
    --ss-accent: #00805f;
}
.rl-settings-card .rl-settings-hint { display: none; }
.rl-settings-card.ss-on .ss-native { display: none !important; }
.rl-settings-card.ss-on .filter-controls-row { gap: 4px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ss-label {
    margin: 12px 0 6px;
    font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    color: var(--ss-muted);
}
.ss-label:first-child { margin-top: 4px; }
.ss-box { width: 100%; }
.ss-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
    background: var(--ss-field);
    border: 1.5px solid var(--ss-line);
    border-radius: 12px;
    color: var(--ss-text);
    font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ss-btn[aria-expanded="true"] { border-color: var(--ss-accent); }
.ss-btn:focus-visible, .ss-opt:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.ss-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.ss-chev { flex: none; color: var(--ss-muted); transition: transform .15s ease; }
.ss-btn[aria-expanded="true"] .ss-chev { transform: rotate(180deg); }
.ss-flag {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--ss-accent);
    background-repeat: no-repeat;
}
.ss-flag.ss-img { box-shadow: 0 0 0 1px rgba(128, 128, 128, .35); }
.ss-flag svg { display: block; width: 28px; height: 28px; }
.ss-flag.ss-icon { color: var(--ss-muted); }
.ss-flag.ss-icon.ss-globe { color: var(--ss-accent); }

.ss-list {
    position: relative;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 6px;
    max-height: 282px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ss-bg);
    border: 1px solid var(--ss-line);
    border-radius: 14px;
}
.ss-list[hidden] { display: none; }
.ss-list::after {
    content: "";
    position: sticky;
    bottom: -6px;
    display: block;
    height: 30px;
    margin-top: -30px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--ss-bg));
    pointer-events: none;
}
.ss-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 46px;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--ss-text);
    font: 500 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ss-opt:hover { background: var(--ss-hover); }
.ss-opt[aria-selected="true"] { background: var(--ss-sel-bg); color: var(--ss-accent); font-weight: 700; }
.ss-check { flex: none; color: var(--ss-accent); }
.ss-done {
    display: block;
    width: 100%;
    height: 52px;
    margin: 18px 0 0;
    border: 0;
    border-radius: 12px;
    background: var(--ss-btn);
    color: #fff;
    font: 700 17px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ss-done:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }