/* Forum custom CSS - Placera-inspired layout met Bootstrap */

/* === Kleurenpalet === */
:root {
  --forum-green: #198754;
  --forum-green-light: #20c997;
  --forum-blue: #0d6efd;
  --forum-blue-light: #6ea8fe;
  --forum-orange: #fd7e14;
  --forum-orange-light: #f59e0b;
  --forum-purple: #6f42c1;
  --forum-purple-light: #9b6bcc;
  --forum-teal: #0dcaf0;
}

/* === Buttons in paletkleuren === */
.btn-forum-green {
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  border-color: var(--forum-green);
  color: #fff !important;
}

.btn-forum-green:hover {
  background: linear-gradient(135deg, #157347 0%, var(--forum-green) 100%);
  border-color: #146c43;
  color: #fff !important;
  filter: brightness(1.05);
}

.btn-forum-blue {
  background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%);
  border-color: var(--forum-blue);
  color: #fff !important;
}

.btn-forum-blue:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, var(--forum-blue) 100%);
  border-color: #0a58ca;
  color: #fff !important;
  filter: brightness(1.05);
}

.btn-forum-orange {
  background: linear-gradient(135deg, var(--forum-orange) 0%, var(--forum-orange-light) 100%);
  border-color: var(--forum-orange);
  color: #fff !important;
}

.btn-forum-orange:hover {
  background: linear-gradient(135deg, #e76b00 0%, var(--forum-orange) 100%);
  border-color: #dc6500;
  color: #fff !important;
  filter: brightness(1.05);
}

.btn-forum-purple {
  background: linear-gradient(135deg, var(--forum-purple) 0%, var(--forum-purple-light) 100%);
  border-color: var(--forum-purple);
  color: #fff !important;
}

.btn-forum-purple:hover {
  background: linear-gradient(135deg, #5a32a3 0%, var(--forum-purple) 100%);
  border-color: #59259b;
  color: #fff !important;
  filter: brightness(1.05);
}

.btn-forum-teal {
  background: linear-gradient(135deg, var(--forum-teal) 0%, var(--forum-blue-light) 100%);
  border-color: var(--forum-teal);
  color: #212529 !important;
}

.btn-forum-teal:hover {
  background: linear-gradient(135deg, #0ab0d4 0%, var(--forum-teal) 100%);
  border-color: #09b5d9;
  color: #212529 !important;
  filter: brightness(1.05);
}

/* Outline varianten */
.btn-outline-forum-green { color: var(--forum-green); border-color: var(--forum-green); }
.btn-outline-forum-green:hover { background-color: var(--forum-green); color: #fff !important; }
.btn-outline-forum-blue { color: var(--forum-blue); border-color: var(--forum-blue); }
.btn-outline-forum-blue:hover { background-color: var(--forum-blue); color: #fff !important; }
.btn-outline-forum-orange { color: var(--forum-orange); border-color: var(--forum-orange); }
.btn-outline-forum-orange:hover { background-color: var(--forum-orange); color: #fff !important; }
.btn-outline-forum-purple { color: var(--forum-purple); border-color: var(--forum-purple); }
.btn-outline-forum-purple:hover { background-color: var(--forum-purple); color: #fff !important; }

/* Context: knoppen in profiel-secties krijgen sectiekleur */
.forum-profile-loyalty .btn-success,
.forum-profile-loyalty .btn:not(.btn-outline-):not(.btn-link) {
  background: linear-gradient(135deg, var(--forum-orange) 0%, var(--forum-orange-light) 100%);
  border-color: var(--forum-orange);
  color: #fff !important;
}

.forum-profile-loyalty .btn-success:hover,
.forum-profile-loyalty .btn:hover:not(.btn-outline-):not(.btn-link) {
  background: linear-gradient(135deg, #e76b00 0%, var(--forum-orange) 100%);
  border-color: #dc6500;
  color: #fff !important;
}

/* Tickets-sectie: Nieuwe ticket-knop in blauw */
.forum-profile-row-header .forum-profile-action .btn-dark,
.forum-profile-row-header .forum-profile-action .btn {
  background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%) !important;
  border-color: var(--forum-blue) !important;
  color: #fff !important;
}

.forum-profile-row-header .forum-profile-action .btn:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, var(--forum-blue) 100%) !important;
  filter: brightness(1.05);
}

.forum-form-card .btn-success {
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  border-color: var(--forum-green);
}

.forum-form-card .btn-success:hover {
  background: linear-gradient(135deg, #157347 0%, var(--forum-green) 100%);
  filter: brightness(1.05);
}

/* Forum-specifieke knoppen */
.forum-action-box .btn-success {
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  border-color: var(--forum-green);
}

.forum-action-box .btn-success:hover {
  background: linear-gradient(135deg, #157347 0%, var(--forum-green) 100%);
  filter: brightness(1.05);
}

.forum-form-card .btn-dark,
.forum-reply-box .btn-success {
  background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%) !important;
  border-color: var(--forum-blue) !important;
  color: #fff !important;
}

.forum-form-card .btn-dark:hover,
.forum-reply-box .btn-success:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, var(--forum-blue) 100%) !important;
  filter: brightness(1.05);
}

.forum-reply-box .btn-outline-success {
  color: var(--forum-blue) !important;
  border-color: var(--forum-blue);
}

.forum-reply-box .btn-outline-success:hover {
  background-color: var(--forum-blue) !important;
  color: #fff !important;
}

/* === Gemeenschappelijke paginastijl === */
.forum-page-header {
  padding-bottom: 0.5rem;
}

.forum-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #212529;
}

/* Paginatitel-iconen in verschillende kleuren */
.forum-page-title i {
  color: var(--forum-green);
}

.forum-page-title.forum-title-blue i { color: var(--forum-blue); }
.forum-page-title.forum-title-orange i { color: var(--forum-orange); }
.forum-page-title.forum-title-purple i { color: var(--forum-purple); }

.forum-page-desc {
  color: #6c757d;
  margin-bottom: 0;
}

/* === Lijstcontainers (index secties + section topics) === */
.forum-list-card {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.forum-empty {
  padding: 2rem;
  text-align: center;
  color: #6c757d;
}

/* Sectierijen op index === */
.forum-section-row {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  transition: background 0.15s;
}

.forum-section-row:hover {
  background: #f8f9fa;
}

.forum-section-row:last-child {
  border-bottom: none;
}

.forum-section-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Afwisselende kleuren voor forumsecties */
.forum-section-row:nth-child(1) .forum-section-icon { background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%); }
.forum-section-row:nth-child(2) .forum-section-icon { background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%); }
.forum-section-row:nth-child(3) .forum-section-icon { background: linear-gradient(135deg, var(--forum-orange) 0%, var(--forum-orange-light) 100%); }
.forum-section-row:nth-child(4) .forum-section-icon { background: linear-gradient(135deg, var(--forum-purple) 0%, var(--forum-purple-light) 100%); }
.forum-section-row:nth-child(5) .forum-section-icon { background: linear-gradient(135deg, var(--forum-teal) 0%, var(--forum-blue-light) 100%); }

.forum-section-main {
  flex: 1;
  min-width: 0;
}

.forum-section-title {
  font-weight: 600;
  color: #212529;
  font-size: 1.05rem;
}

.forum-section-desc {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.forum-section-stats {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.85rem;
  color: #6c757d;
}

.forum-section-stats i.fa-chevron-right {
  color: var(--forum-green);
}

.forum-section-row:nth-child(1) .forum-section-stats i.fa-chevron-right { color: var(--forum-green); }
.forum-section-row:nth-child(2) .forum-section-stats i.fa-chevron-right { color: var(--forum-blue); }
.forum-section-row:nth-child(3) .forum-section-stats i.fa-chevron-right { color: var(--forum-orange); }
.forum-section-row:nth-child(4) .forum-section-stats i.fa-chevron-right { color: var(--forum-purple); }
.forum-section-row:nth-child(5) .forum-section-stats i.fa-chevron-right { color: var(--forum-teal); }

/* Formulier voor nieuw topic === */
.forum-action-box .btn-success {
  border-radius: 6px;
}

.forum-form-card {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 1.25rem;
  background: #f8f9fa;
}

/* === Thread view: post layout (author links, content rechts) === */
.forum-post {
  display: flex;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 1rem;
  background: #fff;
  overflow: hidden;
}

.forum-post.forum-post-op {
  border-left: 4px solid var(--forum-green);
}

.forum-post.forum-post-reply {
  border-left: 4px solid var(--forum-teal);
}

.forum-post-sidebar {
  width: 180px;
  min-width: 180px;
  padding: 1rem;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  text-align: center;
}

.forum-post-op .forum-post-sidebar {
  background: #f0f9f4;
}

.forum-post-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.forum-post-reply .forum-post-avatar {
  background: linear-gradient(135deg, var(--forum-teal) 0%, var(--forum-blue-light) 100%);
  font-size: 1.25rem;
}

.forum-post-username {
  font-weight: 600;
  color: #212529;
  font-size: 0.95rem;
}

.forum-post-body {
  flex: 1;
  padding: 1rem 1.25rem;
  min-width: 0;
}

.forum-post-body p:last-child {
  margin-bottom: 0;
}

.forum-post-meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

/* Thread list in section */
.forum-thread-row {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.forum-thread-row:hover {
  background: #f8f9fa;
}

.forum-thread-row:last-child {
  border-bottom: none;
}

.forum-thread-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Afwisselende kleuren voor topicrijen */
.forum-thread-row:nth-child(odd) .forum-thread-icon { background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%); }
.forum-thread-row:nth-child(even) .forum-thread-icon { background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%); }

.forum-thread-main {
  flex: 1;
  min-width: 0;
}

.forum-thread-title {
  font-weight: 600;
  color: #212529;
}

.forum-thread-meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.2rem;
}

.forum-thread-stats {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.85rem;
  color: #6c757d;
}

.forum-thread-row:nth-child(odd) .forum-thread-stats i.fa-chevron-right { color: var(--forum-green); }
.forum-thread-row:nth-child(even) .forum-thread-stats i.fa-chevron-right { color: var(--forum-blue); }

/* === Profielpagina === */
.forum-profile-row {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}

.forum-profile-row:last-child {
  border-bottom: none;
}

.forum-profile-row-header {
  border-bottom: 1px solid #eee;
}

.forum-profile-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--forum-purple) 0%, var(--forum-purple-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.forum-profile-icon-sm {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.forum-profile-loyalty .forum-profile-icon {
  background: linear-gradient(135deg, var(--forum-orange) 0%, var(--forum-orange-light) 100%);
}

.forum-profile-loyalty .text-loyalty,
.text-loyalty {
  color: var(--forum-orange) !important;
}

/* Tickets sectie: blauw */
.forum-profile-row-header:has(.fa-ticket-alt) .forum-profile-icon {
  background: linear-gradient(135deg, var(--forum-blue) 0%, var(--forum-blue-light) 100%);
}

/* Gebruikersgegevens sectie: groen */
.forum-profile-row-header:has(.fa-user) .forum-profile-icon {
  background: linear-gradient(135deg, var(--forum-green) 0%, var(--forum-green-light) 100%);
}

.forum-profile-main {
  flex: 1;
  min-width: 0;
}

.forum-profile-title {
  font-weight: 600;
  color: #212529;
  font-size: 1.05rem;
}

.forum-profile-desc {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.forum-profile-action {
  flex-shrink: 0;
}

.forum-profile-tickets {
  padding: 0 0.5rem;
}

.forum-profile-tickets .forum-empty {
  padding: 1.5rem;
}

.forum-profile-ticket-row {
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.forum-profile-ticket-row:hover {
  background: #f4fbff;
  border-color: rgba(20, 132, 171, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 132, 171, 0.12);
}

.forum-profile-ticket-row:active {
  transform: translateY(0);
}

.forum-profile-ticket-row .forum-profile-title,
.forum-profile-ticket-row .forum-profile-icon {
  transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.forum-profile-ticket-row:hover .forum-profile-title {
  color: #0f6c8b;
}

.forum-profile-ticket-row:hover .forum-profile-icon {
  filter: saturate(1.1);
  transform: scale(1.03);
}

.forum-profile-ticket-row .forum-profile-icon {
  background: linear-gradient(135deg, var(--forum-teal) 0%, var(--forum-blue-light) 100%);
}

/* Reply form */
.forum-reply-box {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 1.25rem;
  background: #f8f9fa;
}

/* === Winkelwagen (NiceShop-stijl) === */
.cart-item {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  border-bottom: 1px solid #eee;
  gap: 1.5rem;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 6px;
  background: #f8f9fa;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 0.95rem;
  color: #6c757d;
}

.quantity-controls {
  background: #f8f9fa;
}

.quantity-controls .btn-link {
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem !important;
}

.quantity-value {
  font-weight: 600;
}

.min-w-25 {
  min-width: 1.5rem;
}

.cart-item-total {
  flex-shrink: 0;
  min-width: 80px;
}

.cart-order-summary {
  padding: 1.25rem;
}

.cart-order-summary.sticky-top {
  top: 1rem;
}

.cart-summary-title {
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.cart-shipping-note span:last-child {
  font-size: 0.85rem;
}

.cart-total-row {
  font-size: 1.1rem;
  font-weight: 600;
}

.cart-payment-note {
  font-size: 0.8rem;
}

.cart-cross-sell-card {
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cart-cross-sell-card:hover {
  border-color: var(--forum-green);
  box-shadow: 0 0.25rem 0.5rem rgba(25,135,84,0.1);
}

@media (max-width: 991px) {
  .cart-order-summary.sticky-top {
    position: relative;
    top: 0;
  }
}

@media (max-width: 576px) {
  .cart-item {
    flex-wrap: wrap;
  }
  .cart-item-image {
    width: 80px;
    height: 80px;
  }
  .cart-item-total {
    width: 100%;
    text-align: left;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
  }
}

/* Responsive */
@media (max-width: 576px) {
  .forum-section-row,
  .forum-thread-row,
  .forum-profile-row {
    flex-wrap: wrap;
  }
  .forum-section-stats,
  .forum-thread-stats {
    width: 100%;
    text-align: left;
    margin-top: 0.5rem;
  }
  .forum-profile-action {
    width: 100%;
    margin-top: 0.5rem;
  }
  .forum-post {
    flex-direction: column;
  }
  .forum-post-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .forum-post-avatar {
    margin: 0;
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}