:root { --k-gold: #FFAF20; --k-dark: #222; --k-gray: #eee; }
.k-wrap { margin: 12px 0 20px; direction: rtl; position: relative; width: 100%; display: flex; align-items: center; user-select: none; -webkit-user-select: none; }
.k-con { flex: 1; overflow: hidden; position: relative; }
.k-car { display: flex; gap: 8px; overflow-x: auto; padding: 4px; scrollbar-width: none; scroll-behavior: smooth; }
.k-car::-webkit-scrollbar { display: none; }

.k-chp { flex-shrink: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid #e0e0e0; color: #444; font-size: 13px; font-weight: 500; text-decoration: none !important; transition: 0.2s; cursor: pointer; white-space: nowrap; }
.k-chp:hover { border-color: var(--k-gold); background: #fffbf0; }
.k-chp.act { background: #fff9eb; border-color: var(--k-gold); color: #d48d00; font-weight: 600; }

.k-sb { display: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #eee; box-shadow: 0 2px 8px rgba(0,0,0,0.08); align-items: center; justify-content: center; cursor: pointer; z-index: 2; color: #555; flex-shrink: 0; transition: 0.2s; }
.k-sb:hover { color: var(--k-gold); border-color: var(--k-gold); }
@media(min-width: 768px) { .k-sb { display: flex; } }

.k-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99990; display: none; backdrop-filter: blur(2px); }

.k-dr { position: fixed; background: #fff; z-index: 99999; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); visibility: hidden; box-shadow: 0 0 40px rgba(0,0,0,0.2); }
.k-dr.op { visibility: visible; }

@media(max-width: 767px) {
    .k-dr { bottom: 0; left: 0; right: 0; border-radius: 24px 24px 0 0; max-height: 85vh; transform: translateY(100%); }
    .k-dr.op { transform: translateY(0); }
}
@media(min-width: 768px) {
    .k-dr { top: 0; right: 0; bottom: 0; width: 400px; transform: translateX(100%); border-left: 1px solid #eee; }
    .k-dr.op { transform: translateX(0); }
}

.k-hd { padding: 18px 24px; border-bottom: 1px solid var(--k-gray); display: flex; justify-content: space-between; align-items: center; }
.k-hd h3 { margin: 0; font-size: 16px; font-weight: 700; color: #333; }
.k-cl { border: none; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #888; padding: 0 8px; }

.k-bd { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.k-grp { border-bottom: 1px solid #f8f8f8; }
.k-gh { padding: 16px 24px; cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; color: #333; transition: 0.2s; }
.k-gh:hover { background: #fcfcfc; }
.k-gb { display: none; padding: 0 24px 16px; animation: k-fi 0.2s ease-out; }
@keyframes k-fi { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.k-grp.op .k-gb { display: block; }
.k-grp.op .k-arr { transform: rotate(180deg); color: var(--k-gold); }

.k-row { display: flex; align-items: center; padding: 10px 0; cursor: pointer; transition: 0.2s; }
.k-row:hover .k-lbl { color: var(--k-gold); }
.k-chk { width: 18px; height: 18px; margin-left: 12px; accent-color: var(--k-gold); cursor: pointer; }
.k-lbl { flex: 1; margin-right: 2px; color: #555; font-size: 14px; }
.k-cnt { font-size: 12px; color: #aaa; background: #f5f5f5; padding: 2px 8px; border-radius: 12px; }

.k-ft { padding: 16px 24px; border-top: 1px solid var(--k-gray); display: flex; gap: 12px; background: #fff; }
.k-btn { flex: 1; height: 46px; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.k-bs { background: var(--k-gold); color: #fff; box-shadow: 0 4px 12px rgba(255, 175, 32, 0.3); }
.k-bs:hover { background: #e69a1a; transform: translateY(-1px); }
.k-br { background: #f5f5f5; color: #666; }
.k-br:hover { background: #eee; }

.k-srt { padding: 14px 24px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #fcfcfc; transition: 0.2s; }
.k-srt:hover { background: #f9f9f9; }
.k-srt.sel { color: var(--k-gold); font-weight: bold; background: #fffbf0; }