/* =========================
   CATEGORIES — Premium Dark Panel
   (for iframe categories.html)
   ========================= */

/* iframe container */
.catFrame{
  width: 100%;
  max-width: 380px;
  height: calc(100vh - 250px);
  min-height: 420px;
  max-height: calc(100vh - 250px);
  border: 0;
  border-radius: 18px;
  background: transparent;
  display: block;
  margin-top: 0;
}

/* panel */
.catNav{
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0;
  padding: 14px 10px 14px 14px;
  border-radius: 18px;
  box-sizing: border-box;
  scrollbar-gutter: stable;

  background: linear-gradient(180deg, rgba(11,18,32,.74), rgba(11,18,32,.64));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 55px rgba(0,0,0,.20);

  color: rgba(255,255,255,.92);

  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.catNav::-webkit-scrollbar{
  width: 8px;
}

.catNav::-webkit-scrollbar-track{
  background: transparent;
}

.catNav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.catNav::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
}

/* title */
.catNav__title{
  font-family: "Unbounded", "Manrope", system-ui, sans-serif;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .85;
  margin: 2px 0 12px;
}

/* groups */
.catGroup{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  margin-top: 12px;
}

.catGroup:first-of-type{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* group header */
.catGroup__head{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display:flex;
  align-items:center;
  justify-content:space-between;

  font-family: "Unbounded", "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .25px;

  color: rgba(255,255,255,.95);

  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);

  transition: .15s ease;
}

.catGroup__head::-webkit-details-marker{ display:none; }

.catGroup__head:hover{
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.10);
}

.catGroup__head::after{
  content: "▾";
  opacity: .75;
  transform: translateY(-1px);
  transition: .18s ease;
}

.catGroup[open] .catGroup__head::after{
  transform: rotate(180deg) translateY(1px);
}

/* group list */
.catGroup__body{
  margin-top: 10px;
  display: grid;
  gap: 6px;
  padding: 2px 2px 0;
}

/* list items */
.catItem{
  width: 100%;
  text-align: left;

  border: 0;
  background: transparent;
  color: rgba(255,255,255,.90);

  padding: 10px 12px;
  border-radius: 14px;

  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12px;

  cursor: pointer;
  transition: .14s ease;
}

.catItem:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}

.catItem:active{
  transform: translateY(0);
}

/* active item (if you ever use it) */
.catItem.is-active{
  background: rgba(255,42,55,.16);
  color: rgba(255,255,255,.98);
}

/* quick buttons */
.catQuick{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.catQuick__btn{
  width: 100%;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.92);

  padding: 12px 12px;
  border-radius: 16px;

  display:flex;
  align-items:center;
  gap: 10px;

  cursor: pointer;
  transition: .14s ease;
}

.catQuick__btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.catQuick__btn:active{ transform: translateY(0); }

.catQuick__btn span{
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(255,42,55,.16);
}

.catQuick__btn b{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12px;
}
.catQuick__btn.is-active{
  background: rgba(255,42,55,.14);
  border-color: rgba(255,42,55,.28);
  color: rgba(255,255,255,.98);
}

.catQuick__btn.is-active span{
  background: rgba(255,42,55,.24);
}