/* Light Mode Styles */
/* Comments Container */
.container h2 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Comments Section */
#comments-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 2rem;
}

/* Individual Comment */
.comment {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 1rem;
}

.comment strong {
    color: #2c3e50;
    font-weight: 600;
}

.comment .text-muted {
    color: #6c757d !important;
    font-size: 0.875rem;
}

.comment p {
    color: #495057;
    margin-top: 8px;
    line-height: 1.5;
}

/* Comment Form */
#comment-form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

#comment-form textarea,
#comment-form input[type="text"] {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    color: #495057;
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#comment-form textarea:focus,
#comment-form input[type="text"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Rating Section */
.rating-stars {
    font-size: 24px;
    color: #dee2e6;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
}

.star {
    transition: color 0.2s ease-in-out;
}

.star:hover,
.star.active {
    color: #ffc107;
}

#rating-info {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Buttons */
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Dark Mode Styles */
body.dark-mode .container h2 {
    color: #e9ecef;
}

body.dark-mode #comments-container {
    background-color: #2d3436;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .comment {
    background-color: #343a40;
    border-color: #495057;
}

body.dark-mode .comment strong {
    color: #f8f9fa;
}

body.dark-mode .comment .text-muted {
    color: #adb5bd !important;
}

body.dark-mode .comment p {
    color: #e9ecef;
}

body.dark-mode #comment-form {
    background-color: #343a40;
    border-color: #495057;
}

body.dark-mode #comment-form textarea,
body.dark-mode #comment-form input[type="text"] {
    background-color: #2d3436;
    border-color: #495057;
    color: #e9ecef;
}

body.dark-mode #comment-form textarea:focus,
body.dark-mode #comment-form input[type="text"]:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}

body.dark-mode #comment-form label {
    color: #e9ecef;
}

body.dark-mode .rating-stars {
    color: #495057;
}

body.dark-mode .star:hover,
body.dark-mode .star.active {
    color: #ffd700;
}

body.dark-mode #rating-info {
    color: #adb5bd;
}

/* Form Elements in Dark Mode */
body.dark-mode .helptext {
    color: #adb5bd;
    font-size: 0.875rem;
}

body.dark-mode .errorlist {
    color: #ff6b6b;
    list-style: none;
    padding: 0;
}

body.dark-mode ::placeholder {
    color: #6c757d;
}

/* Accessibility Focus Styles */
body.dark-mode *:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.25);
}

  /* Dark mode styles for the button */
  body.dark-mode .btn-outline-secondary {
      background-color: #2d2d2d;
      border-color: #404040;
      color: #e0e0e0;
  }

  body.dark-mode .btn-outline-secondary:hover {
      background-color: #404040;
      border-color: #505050;
      color: #ffffff;
  }

  /* Dark mode styles for the SVG icon */
  body.dark-mode .btn-outline-secondary svg path {
      fill: #e0e0e0;
  }

  body.dark-mode .btn-outline-secondary:hover svg path {
      fill: #ffffff;
  }

  /* Optional: If you want to style the button shadow in dark mode */
  body.dark-mode .btn-outline-secondary:focus {
      box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
  }

  /* Button active state in dark mode */
  body.dark-mode .btn-outline-secondary:active {
      background-color: #505050;
      border-color: #606060;
  }


  .rating-stars {
    font-size: 2.4rem; /* This makes the stars 3 times bigger. Adjust as needed */
    line-height: 1;
  }
  .rating-stars .star {
    color: #007bff; /* Blue color for unrated stars */
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .rating-stars .star.active {
    color: #dc3545; /* Red color for rated stars */
  }

  .comments-ratings-section{
    margin-top: 2rem;
    margin-bottom: 5rem;
  }