/*─────────────────────────────────────────────────────────────────────────────
  COLOR PALETTE (EDIT HERE FOR GLOBAL THEME)
─────────────────────────────────────────────────────────────────────────────*/
:root {
  /* Backgrounds */
  --bg-modal:         #14141F;   /* overall modal background */
  --bg-sidebar:       #1C1D29;   /* sidebar panel */
  --bg-summary:       #23253A;   /* summary headers */
  --bg-summary-hover: #2E2F4B;   /* summary hover state */

  /* Text */
  --text-primary:     #E4E4E7;   /* regular text */
  --text-highlight:   #FFD100;   /* accents, links */
  --text-hover:       #FFFFFF;   /* link hover */

  /* Dividers */
  --divider:          #343544;   /* lines between items */

  /* Scrollbar */
  --scroll-thumb:     transparent;
  --scroll-track:     transparent;
}



/*─────────────────────────────────────────────────────────────────────────────
  OPEN BUTTON
─────────────────────────────────────────────────────────────────────────────*/
.btn-open {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 1001;
  padding: 0.5rem 1rem;
  background: var(--text-highlight);
  border: none;
  border-radius: 4px;
  color: #222;
  font-weight: bold;
  cursor: pointer;
}

/*─────────────────────────────────────────────────────────────────────────────
  MODAL OVERLAY & CONTAINER
─────────────────────────────────────────────────────────────────────────────*/
.side-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0,0,0,0.6);
  overflow: hidden;
  transition: width 0.3s ease;
  z-index: 1000;
}
.side-modal.open {
  width: 360px; /* or 450px if you prefer */
}
@media (max-width: 1023px) {
  .side-modal.open {
    width: 100%;
  }
}
/*─────────────────────────────────────────────────────────────────────────────
  MODAL CONTENT
─────────────────────────────────────────────────────────────────────────────*/
.side-modal-content {
  width: 100%;
  height: 100%;
  background: var(--bg-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* sprečava double scroll */
}

/*─────────────────────────────────────────────────────────────────────────────
  HEADER
─────────────────────────────────────────────────────────────────────────────*/
.modal-header {
  padding: 1rem;
  background: var(--bg-summary);
  border-bottom: 1px solid var(--text-highlight);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-highlight);
  letter-spacing: 0.5px;
}
.close-btn {
  font-size: 1.5rem;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s;
}
.close-btn:hover {
  color: var(--text-hover);
}

/*─────────────────────────────────────────────────────────────────────────────
  SIDEBAR BODY
─────────────────────────────────────────────────────────────────────────────*/
.modal-sidebar {
  flex: 1;
  background: var(--bg-sidebar);
  color: var(--text-primary);
  padding: 1rem;
  font-family: 'Segoe UI', sans-serif;
  overflow-y: auto;
}

/* remove default bullets */
.modal-sidebar ul,
.modal-sidebar li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*─────────────────────────────────────────────────────────────────────────────
  GAME ACCORDION (TOP-LEVEL)
─────────────────────────────────────────────────────────────────────────────*/
.game-accordion {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--divider);
}
.game-accordion > summary {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-summary);
  border-radius: 4px;
  font-weight: 700;
  color: var(--text-highlight);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding-left: 2.5rem; /* space for arrow */
}
.game-accordion > summary:hover {
  background: var(--bg-summary-hover);
}
/* hide default marker */
.game-accordion > summary::-webkit-details-marker {
  display: none;
}
/* plus/minus icon on right */
.game-accordion > summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s;
}
.game-accordion[open] > summary::after {
  content: '−';
}

/*─────────────────────────────────────────────────────────────────────────────
  SERVICE LIST UNDER GAME
─────────────────────────────────────────────────────────────────────────────*/
.service-list {
  margin-top: 0.75rem;
  padding-left: 1.5rem;
}
.service-list > li {
  border-bottom: 1px solid var(--divider);
  padding: 0.5rem 0;
}
.service-list a {
  color: var(--text-highlight);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.service-list a:hover {
  color: var(--text-hover);
}

/*─────────────────────────────────────────────────────────────────────────────
  CATEGORY ACCORDION (NESTED)
─────────────────────────────────────────────────────────────────────────────*/
.cat-accordion {
  margin-bottom: 0.75rem;
}
.cat-accordion > summary {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-summary);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-highlight);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding-left: 2.5rem;
}
.cat-accordion > summary:hover {
  background: var(--bg-summary-hover);
}
.cat-accordion > summary::-webkit-details-marker {
  display: none;
}
.cat-accordion > summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s;
}
.cat-accordion[open] > summary::after {
  content: '−';
}
.cat-accordion ul {
  margin-top: 0.5rem;
  margin-left: 1.5rem;
}
.cat-accordion ul li {
  margin-bottom: 0.5rem;
}
.cat-accordion ul li a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.95rem;
}
.cat-accordion ul li a:hover {
  color: var(--text-highlight);
}

/*─────────────────────────────────────────────────────────────────────────────
  SCROLLBAR
─────────────────────────────────────────────────────────────────────────────*/

.modal-sidebar::-webkit-scrollbar {
  width: 8px;
}
.modal-sidebar::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
.modal-sidebar::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 3px;
  border: 2px solid var(--bg-sidebar);
}

.modal-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/*
.modal-sidebar {
  overflow-y: scroll;
  scrollbar-width: none; 
}
.modal-sidebar::-webkit-scrollbar {
  display: none; 
}*/
.btn-browse {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10001;
  padding: 0.5rem 1rem;
  background: var(--text-highlight);
  color: #222;
  font-weight: bold;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background 0.2s, transform 0.2s;
}
.btn-browse:hover {
  background: #e6c500;
  transform: translateY(-1px);
}

.sub-accordion > summary {
  /* inherit or copy your .cat-accordion styling */
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-summary);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-highlight);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  padding-left: 2.5rem;  /* space for the plus/minus */
}
.sub-accordion > summary:hover {
  background: var(--bg-summary-hover);
}

/* hide the default arrow */
.sub-accordion > summary::-webkit-details-marker {
  display: none;
}

/* remove any ::before arrows */
.sub-accordion > summary::before {
  content: none;
}

/* inject a plus on the right */
.sub-accordion > summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-highlight);
  transition: transform 0.2s;
}

/* switch to minus when open */
.sub-accordion[open] > summary::after {
  content: '–';
}

html.modal-open {
  overflow: hidden;      /* blokira scroll pozadine */
}
body.modal-open {
  overflow: hidden;
  margin-left: 360px;    /* pomeri ceo sadržaj udesno */
  transition: margin-left .3s ease;
  height: 100%;
}

.active-service {
  font-weight: bold;
  color: red;
  text-decoration: underline;
}