.menu-panel .panel-content .menu-header {
  display: flex;
  line-height: 2.5rem;
  justify-content: space-between;
  /* margin: 1rem 0.75rem; */
}

.menu-panel .panel-content .menu-header .close-btn {
  position: relative;
}

.menu-panel .panel-content .menu-header .close-btn::after,
.menu-panel .panel-content .menu-header .close-btn::before {
  background-color: var(--bg-color);
}

.menu-panel .panel-content li {
  padding: 0.5rem;
  display: flex;
  line-height: 1.5rem;
  font-size: 1rem;
  justify-content: space-between;
  margin: 0.75rem;
  cursor: pointer;
}

.menu-panel .panel-content li:hover {
  background-color: var(--bg-color);
}

.menu-panel .panel-content li span,
.menu-panel .panel-content li button {
  border: none;
  background-color: inherit;
  display: flex;
  align-items: center;
  cursor: inherit;
  font-size: inherit;
}

.menu-panel .panel-content li span:hover,
.menu-panel .panel-content li button:hover {
  text-decoration: underline;
}

.menu-panel .panel-content li svg:hover {
  font-weight: 600;
}

.menu-panel .panel-content .back {
  padding: 1rem;
  border-block: 2px solid #dee2e6;
  background-color: var(--app-bg);
  color: var(--text-primary);
  width: 100%;
  border-inline: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline-offset: -2px;
}

.menu-panel .panel-content .back[data-clickable="false"] {
  cursor: auto;
}

.menu-panel .panel-content .back svg {
  width: 1rem;
  height: 1rem;
}

/* ============================================
   SORT PANEL - LOGIN STYLE DESIGN
============================================ */
.hidden-panels {
  position: absolute;
}

/* Hlavný kontajner panelu */
.sort-panel .panel-content {
  background-color: var(--app-bg-2);
  /* Zhoda s pozadím login/menu panelu */
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Hlavička panelu */
.sort-panel .common-title-wrapper {
  padding: 2rem 1.5rem 1.5rem;
  /* Štedrý padding ako v login-panel */
  border-bottom: 1px solid var(--color-bg-surface-border);
}

.sort-panel .common-title-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sort-panel .common-title-panel h3 {
  color: var(--slate-900);
  /* Výrazná tmavá farba pre nadpis */
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sort-panel .common-title-panel h3 .icon {
  color: var(--orange-500);
  /* Oranžová ikona pre vizuálny akcent */
  width: 1.75rem;
  height: 1.75rem;
}

/* Zoznam kritérií zoradenia */
.sort-panel, .count-per-page-panel {
  .panel-inner-content ul {
    padding: 1rem 0 2rem;
    /* Priestor na spodku pre lepšiu ovládateľnosť na mobiloch */
  }

  .panel-inner-content li {
    padding: 1.125rem 1.5rem;
    color: var(--slate-700-300);
    /* Farba textu zhodná s inputmi v logine */
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;

    &:not(:last-child) {
      border-bottom: 1px solid var(--color-bg-surface-border);
    }
  }

  /* Hover stav položky */
  .panel-inner-content li:hover {
    background-color: var(--highlight-bg);
    /* Jemný oranžový podmaz */
    color: var(--orange-500);
    /* Text sa zmení na oranžový */
    padding-left: 2rem;
    /* Jemný posun doprava pre dynamický pocit */
  }

  /* Aktívny stav (ak pridáš triedu .active cez JS) */
  .panel-inner-content li.active {
    background-color: var(--orange-bg-100);
    color: var(--orange-dark);
    font-weight: 700;
  }

  .close-btn:hover {
    background: var(--icon-hover);
    /* transform: rotate(90deg); */
  }

  .close-btn:hover::before,
  .close-btn:hover::after {
    background-color: white;
  }
}

/* ============================================
   FILTER SECTION TITLE - LOGIN STYLE
============================================ */
.filter-section .common-title-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  /* Použitie spacingu z originálu */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Font a štýl nadpisu sekcie */
.filter-section .common-title-panel h3 {
  font-family: var(--font-primary);
  /* Inter, sans-serif */
  font-size: var(--font-size-lg);
  /* 1.125rem pre čistý vzhľad */
  font-weight: var(--font-weight-semibold);
  /* Zhoda s medium/semibold v logine */
  color: var(--slate-700-300);
  /* Farba labelov z login panelu */
  transition: color 0.2s ease;
}

/* Interaktivita pri hoveri na celú sekciu */
.filter-section:hover .common-title-panel {
  background-color: var(--highlight-bg);
  /* Jemný oranžový highlight */
}

.filter-section:hover .common-title-panel h3 {
  color: var(--orange-500);
  /* Text zmení farbu na oranžovú pri hoveri */
}

/* Štýl a animácia šípky */
.filter-section .btnc {
  color: var(--slate-500-400);
  /* Neutrálna farba šípky */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Plynulá animácia z originálu */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interaktivita šípky na hover */
.filter-section:hover .btnc {
  color: var(--orange-500);
  /* Šípka sa zmení na oranžovú */
  transform: translateX(4px);
  /* Jemný interaktívny posun doprava */
}

/* Kombinácia stavov: Ak je sekcia otvorená a používateľ na ňu nabehne */
.filter-section:not(.closed) .btnc {
  transform: rotate(90deg);
  /* Rotácia pri otvorení */
  color: var(--orange-500);
}

.filter-section:not(.closed):hover .btnc {
  transform: rotate(90deg) scale(1.15);
  /* Zväčšenie pri hoveri na otvorenú sekciu */
}

/* filer buttons */
/* Kontajner pre zoznam filtrov */
.filter-options {
  display: flex;
  flex-wrap: wrap;
  /* Aby tlačidlá skákali do nového riadku */
  gap: 0.6rem;
  /* Medzery medzi tlačidlami */
  list-style: none;
  padding: 1rem 0;
  margin: 0;
}

/* Základný štýl pre filtračné tlačidlo */
.filter-options .btn {
  /* Odstránenie default štýlov */
  appearance: none;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  /* Rozmery a text */
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  /* Zaoblený "pill" tvar */
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  cursor: pointer;
  /* Animácie */
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  /* Text ostane v jednom riadku */
}

/* Hover efekt (keď na to užívateľ namieri) */
.filter-options .btn:hover {
  border-color: var(--primary, #f97316);
  color: var(--primary, #f97316);
  background-color: rgba(249, 115, 22, 0.05);
  /* Jemný oranžový nádych */
  transform: translateY(-1px);
  /* Jemný zdvih */
}

/* AKTÍVNY STAV - keď je filter vybraný */
/* Predpokladám, že v CLJS pridávaš triedu .active */
.filter-options .btn.active {
  background-color: var(--primary, #f97316);
  border-color: var(--primary, #f97316);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

/* Podpora pre Dark Mode (ak ho máš na webe) */
body.dark .filter-options .btn {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark .filter-options .btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

body.dark .filter-options .btn.active {
  background-color: var(--primary);
  color: #ffffff;
}

/* Štýl pre "Expand" sekciu (ak je v nej scroll) */
.expand {
  /* max-height: 300px; */
  /* Limituj výšku pri veľkom počte značiek */
  /* overflow-y: auto; */
  /* Pridaj scrollbar */
  padding-right: 0.5rem;
}

/* Pekný scrollbar pre Chrome/Safari */
.expand::-webkit-scrollbar {
  width: 4px;
}

.expand::-webkit-scrollbar-thumb {
  background: var(--border, #e2e8f0);
  border-radius: 10px;
}