/* =====================================================
   FORUM TOPIC SYSTEM
   SEARCH + TOPIC LIST + SIDEBAR
===================================================== */

/* =====================================================
   GLOBAL FORUM WIDGETS
===================================================== */

.forum-topic-page .widget-card {
  background: #0f1835;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  overflow: hidden;

  margin-bottom: 20px;
}

.forum-topic-page .widget-header {
  padding: 18px 20px;

  background: #111933;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.forum-topic-page .widget-header h2 {
  margin: 0;

  color: #ffffff;

  font-size: 20px;
}

.forum-topic-page .widget-body {
  padding: 20px;
}

/* =====================================================
   SEARCH WIDGET
===================================================== */

.forum-topic-page form {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}

.forum-topic-page input[type="text"] {
  flex: 1;

  min-width: 200px;

  padding: 14px 16px;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: #080f25;

  color: white;

  font-size: 14px;
}

.forum-topic-page input[type="text"]::placeholder {
  color: #94a3b8;
}

.forum-topic-page input[type="text"]:focus {
  outline: none;

  border-color: #38bdf8;
}

.forum-topic-page button {
  padding: 14px 24px;

  border: none;

  border-radius: 12px;

  background: #38bdf8;

  color: #08111f;

  font-weight: 700;

  cursor: pointer;
}

.forum-topic-page button:hover {
  background: #0ea5e9;
}

/* =====================================================
   TOPIC CARDS
===================================================== */

.forum-topic-page .forum-topic-card {
  background: #080f25;

  padding: 18px;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.05);

  margin-bottom: 15px;

  transition: 0.2s;
}

.forum-topic-page .forum-topic-card:hover {
  transform: translateY(-3px);

  border-color: rgba(56, 189, 248, 0.45);
}

.forum-topic-page .forum-topic-card h3 {
  color: white;

  margin: 0 0 10px 0;
}

.forum-topic-page .forum-topic-card p {
  color: #cbd5e1;

  line-height: 1.5;

  font-size: 14px;
}

.topic-info,
.topic-meta {
  color: #94a3b8;

  font-size: 13px;

  margin-top: 12px;
}

.forum-topic-page a {
  color: #38bdf8;

  text-decoration: none;

  font-weight: 600;
}

.forum-topic-page a:hover {
  color: white;
}

/* =====================================================
   EMPTY MESSAGE
===================================================== */

.forum-empty {
  background: #080f25;

  padding: 20px;

  border-radius: 12px;

  color: #94a3b8;

  text-align: center;
}

/* =====================================================
   SIDEBAR
===================================================== */

.forum-sidebar-widget {
  background: #0f1835;
}

.forum-stat-box {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px;

  margin-bottom: 12px;

  background: #080f25;

  border-radius: 12px;
}

.forum-stat-box span {
  color: #94a3b8;
}

.forum-stat-box strong {
  color: white;

  font-size: 20px;
}

.forum-quick-links {
  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 20px;
}

.forum-quick-links a {
  padding: 12px 15px;

  background: #111933;

  border-radius: 10px;

  color: #cbd5e1;
}

.forum-quick-links a:hover {
  background: #38bdf8;

  color: #08111f;
}

/* =====================================================
   TOPIC LIST WIDGET
===================================================== */

.forum-topic-list-widget {
  background: #0f1835;

  border-radius: 16px;

  overflow: hidden;
}

.forum-topic-list-widget .topic-title {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;
}

.forum-topic-list-widget .topic-meta {
  display: flex;

  gap: 15px;

  flex-wrap: wrap;
}

.forum-topic-list-widget .topic-stats {
  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  color: #94a3b8;
}

.forum-topic-list-widget .topic-stats strong {
  color: white;
}

/* =====================================================
   BADGES
===================================================== */

.forum-badge {
  padding: 5px 10px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 600;
}

.forum-badge.pinned {
  background: #854d0e;

  color: #fde68a;
}

.forum-badge.locked {
  background: #7f1d1d;

  color: #fecaca;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {
  .forum-topic-page form {
    flex-direction: column;
  }

  .forum-topic-page button {
    width: 100%;
  }

  .forum-topic-list-widget .topic-stats {
    flex-direction: column;
  }

  .forum-topic-list-widget .topic-meta {
    flex-direction: column;
  }
}