@font-face {
  font-family: "VanillaExtract";
  src: url("/media/VanillaExtract.ttf");
}
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a {
    text-decoration: none !important;
}
nav:before {
  content: " ";
  display: block;
  position: fixed;
  left: 0;
  bottom: 100%;
  height: 100vh;
  width: 100vw;
  background: inherit;
}
.hidden {
  display: none !important;
}
.navbar-brand {
    font-family: "VanillaExtract";
    font-size: 2em;
}
footer {
    background-color: transparent;
    padding: 1.5rem 0;
    border-top: 1px solid #dee2e6;
}
footer a {
    color: var(--bs-primary);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
#addChatBtn {
  background-color: #28a745;
  color: white;
  font-weight: bold;
  border: 1px solid #218838;
}
.card-body {
  background: inherit;
}
.group-card {
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.group-cover {
  height: 120px;
  width: auto;
  object-fit: cover;
  background: #AAA;
  color: white;
  padding: 10px;
  margin: 5px;
}
.group-cover[data-id^='0'] { color: #FF5733; } 
.group-cover[data-id^='1'] { background: #FFC107; } 
.group-cover[data-id^='2'] { background: #4CAF50; } 
.group-cover[data-id^='3'] { background: #2196F3; } 
.group-cover[data-id^='4'] { background: #9C27B0; } 
.group-cover[data-id^='5'] { background: #FF9800; } 
.group-cover[data-id^='6'] { background: #009688; } 
.group-cover[data-id^='7'] { background: #E91E63; } 
.group-cover[data-id^='8'] { background: #607D8B; } 
.group-cover[data-id^='9'] { background: #795548; } 
.group-cover[data-id^='a'] { background: #F4BB33; } 
.group-cover[data-id^='b'] { background: #FF4081; } 
.group-cover[data-id^='c'] { background: #00BCD4; } 
.group-cover[data-id^='d'] { background: #8BC34A; } 
.group-cover[data-id^='e'] { background: #673AB7; } 
.group-cover[data-id^='f'] { background: #FF5722; } 
.group-cover[data-id^='g'] { background: #4CAF50; } 
.group-cover[data-id^='h'] { background: #3F51B5; } 
.group-cover[data-id^='i'] { background: #CDDC39; } 
.group-cover[data-id^='j'] { background: #FFEB3B; } 
.group-cover[data-id^='k'] { background: #0097A7; } 
.group-cover[data-id^='l'] { background: #D81B60; } 
.group-cover[data-id^='m'] { background: #4DB6AC; } 
.group-cover[data-id^='n'] { background: #5e95a1; } 
.group-cover[data-id^='o'] { background: #FBC02D; } 
.group-cover[data-id^='p'] { background: #0288D1; } 
.group-cover[data-id^='q'] { background: #689F38; } 
.group-cover[data-id^='r'] { background: #D32F2F; } 
.group-cover[data-id^='s'] { background: #1976D2; } 
.group-cover[data-id^='t'] { background: #388E3C; } 
.group-cover[data-id^='u'] { background: #F06292; } 
.group-cover[data-id^='v'] { background: #455A64; } 
.group-cover[data-id^='w'] { background: #F57C00; } 
.group-cover[data-id^='x'] { background: #26A69A; } 
.group-cover[data-id^='y'] { background: #AB47BC; } 
.group-cover[data-id^='z'] { background: #FFCA28; } 
.group-cover[data-id^='A'] { background: #FF6F61; } 
.group-cover[data-id^='B'] { background: #FFD700; } 
.group-cover[data-id^='C'] { background: #00E676; } 
.group-cover[data-id^='D'] { background: #0288D1; } 
.group-cover[data-id^='E'] { background: #8E24AA; } 
.group-cover[data-id^='F'] { background: #FF8A65; } 
.group-cover[data-id^='G'] { background: #26C6DA; } 
.group-cover[data-id^='H'] { background: #AD1457; } 
.group-cover[data-id^='I'] { background: #AEEA00; } 
.group-cover[data-id^='J'] { background: #FFAB00; } 
.group-cover[data-id^='K'] { background: #00ACC1; } 
.group-cover[data-id^='L'] { background: #EC407A; } 
.group-cover[data-id^='M'] { background: #26A69A; } 
.group-cover[data-id^='N'] { background: #5E35B1; } 
.group-cover[data-id^='O'] { background: #FFA726; } 
.group-cover[data-id^='P'] { background: #039BE5; } 
.group-cover[data-id^='Q'] { background: #7CB342; } 
.group-cover[data-id^='R'] { background: #C62828; } 
.group-cover[data-id^='S'] { background: #1565C0; } 
.group-cover[data-id^='T'] { background: #2E7D32; } 
.group-cover[data-id^='U'] { background: #F06292; } 
.group-cover[data-id^='V'] { background: #37474F; } 
.group-cover[data-id^='W'] { background: #EF6C00; } 
.group-cover[data-id^='X'] { background: #00897B; } 
.group-cover[data-id^='Y'] { background: #8E24AA; } 
.group-cover[data-id^='Z'] { background: #FFB300; } 
.group-avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  border: 4px solid white;
  margin-top: -40px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #FFF;
}
.group-avatar.no-img {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: var(--bs-card-bg);
  pointer-events: none;
  touch-action: none;
  user-select: none;
}
.group-avatar.no-img:after {
  content: attr(data-i);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  font-size: 30pt;
  color: inherit;
}
.badge {
  user-select: none;
}
.badge-pg13 {
  background: #28a745;
  font-size: 0.65rem;
}
.badge-m {
  background: #fa5337;
  font-size: 0.65rem;
}
.badge-unrated {
  background: #111;
  color: #FFF;
  font-size: 0.65rem;
}
.topic-badge {
  font-size: 0.75rem;
  cursor: pointer;
}
.filter-option.active {
  background-color: #999 !important;
  color: #FFF !important;
}
@media {
  .marquee-container {
    overflow-x: clip;
    white-space: nowrap;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .marquee-container::-webkit-scrollbar {
    display: none;
  }
}




/* Dark Theme Adjustments */
[data-bs-theme="dark"], [data-bs-theme="dark"] .testimonial-card  {
  background-color: #212529 !important;
  color: #e9ecef !important;
}

/* Ensure Bootstrap components respect dark mode */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-check-input,
[data-bs-theme="dark"] #testimonials {
  background-color: #343a40 !important;
  color: #e9ecef !important;
  border-color: #495057 !important;
}

/* Ensure dropdown items have proper contrast */
[data-bs-theme="dark"] .dropdown-item {
  color: #e9ecef !important;
  background-color: #343a40 !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #495057 !important;
  color: #ffffff !important;
}

/* Fix form switch in dark mode */
[data-bs-theme="dark"] .form-check-label {
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
  background-color: #343a40 !important;
}

[data-bs-theme="dark"] .group-avatar {
  border-color: #343a40 !important;
}