/* Basic page styling */
body {
  padding-top: 60px; /* Space for fixed navigation */
  margin: 0; /* Remove default margin */
  font-family: "Segoe UI", sans-serif; /* Default font */
  background: #f9fafb; /* Light gray background */
  color: #333; /* Dark gray text color */
}

/* Navigation bar styling */
nav {
  position: fixed; /* Fixed at top of viewport */
  top: 0; /* Position at very top */
  left: 0; /* Align to left edge */
  width: 100%; /* Full width */
  z-index: 999; /* Ensure nav stays on top */
  background: #1f2937; /* Dark blue background */
  color: white; /* White text */
  display: flex; /* Flex layout */
  justify-content: center; /* Center content horizontally */
  padding: 0.5rem 0.5rem; /* Padding around nav */
  align-items: center; /* Center items vertically */
}

/* Navigation container */
nav div {
  gap: 0.2rem; /* Space between nav items */
  display: flex; /* Flex layout */
  justify-content: center; /* Center items */
  align-items: center; /* Center vertically */
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* Navigation links */
nav div a {
  display: flex; /* Flex layout */
  flex-direction: column; /* Stack icon and text */
  align-items: center; /* Center horizontally */
  text-align: center; /* Center text */
  color: white; /* White text */
  text-decoration: none; /* Remove underline */
  font-size: 0.85rem; /* Smaller font size */
  padding: 0.5rem; /* Padding around links */
  position: relative; /* For positioning active indicator */
}

/* Material icons in nav */
nav a i {
  font-size: 24px; /* Icon size */
  margin-bottom: 0.2rem; /* Space below icon */

  display: inline-block; /* Proper sizing */

  line-height: 24px; /* Center vertically */
}

/* Active nav item */
nav a.active {
  font-weight: bold; /* Bold text */
}

/* Active nav item indicator */
nav a.active::after {
  content: ""; /* Empty content */
  position: absolute; /* Position relative to link */
  bottom: 0; /* Place at bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Precise centering */
  width: 80%; /* Width of indicator */
  height: 2px; /* Thickness of indicator */
  background-color: #ef3d4f; /* Red color */
  border-radius: 1px; /* Slightly rounded corners */
}

/* Main content container */
.container {
  padding: 2rem; /* Padding around content */
  max-width: 900px; /* Maximum width */
  margin: 0 auto; /* Center horizontally */
}

/* Review card styling */
.review {
  background: white; /* White background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  padding: 1rem; /* Inner padding */
  flex: 1 1 280px; /* Flexible sizing */
  box-sizing: border-box; /* Include padding in width */
  word-wrap: break-word; /* Break long words */
  max-width: 100%; /* Don't exceed container */
}

/* Container for review cards */
.reviews-container {
  display: flex; /* Flex layout */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 1rem; /* Space between cards */
}

/* Flag icon styling */
.flag-icon {
  width: 20px; /* Fixed width */
  height: 15px; /* Fixed height */
  border-radius: 3px; /* Slightly rounded */
  object-fit: cover; /* Maintain aspect ratio */
  vertical-align: middle; /* Align with text */
  border: 0.5px solid rgba(0, 0, 0, 0.05); /* Thin border */
  position: relative; /* For positioning */
  top: -1px; /* Nudge up slightly */
}

/* Likes counter styling */
.review .likes {
  display: inline-flex; /* Flex layout */
  align-items: center; /* Center vertically */
  gap: 5px; /* Space between elements */
  color: #ef3d4f; /* Red color */
  font-weight: bold; /* Bold text */
}

/* Image gallery layout */
.gallery {
  display: grid; /* Grid layout */
  grid-template-columns: repeat(
    auto-fit,
    minmax(150px, 1fr)
  ); /* Responsive columns */
  gap: 1rem; /* Space between images */
  margin-bottom: 2rem; /* Space below gallery */
}

/* Gallery images */
.gallery img {
  width: 100%; /* Fill container */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Primary button styling */
.btn-primary {
  display: inline-block; /* Inline block */
  margin-top: 2rem; /* Space above */
  background: white; /* White background */
  color: #ef3d4f; /* Red text */
  padding: 1rem 2rem; /* Button padding */
  border-radius: 8px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold text */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow */
  transition: background 0.3s, color 0.3s; /* Smooth transitions */
}

/* Button hover state */
.btn-primary:hover {
  background: #ef3d4f; /* Red background */
  color: white; /* White text */
}

/* Unordered list styling */
ul {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove padding */
}

/* List item styling */
ul li {
  background: #e4e4e4; /* Light gray background */
  padding: 0.5rem; /* Inner padding */
  margin-bottom: 0.5rem; /* Space between items */
  border-radius: 6px; /* Rounded corners */
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  nav {
    padding: 0.5rem 0.3rem; /* Smaller padding */
  }
  .container {
    padding: 1rem; /* Smaller padding */
  }
}

/* Heading level 2 */
h2 {
  font-size: 2rem; /* Large font */
  margin-bottom: 1rem; /* Space below */
  color: #111827; /* Dark text */
  border-bottom: 3px solid #ef3d4f; /* Red underline */
  display: inline-block; /* Only width of content */
  padding-bottom: 0.3rem; /* Space above underline */
}

/* Heart icon */
.fa-heart {
  font-size: 1.1em; /* Slightly larger */
}

/* Star rating container */
.stars {
  display: inline-flex; /* Flex layout */
  gap: 2px; /* Small space between stars */
  font-size: 14px; /* Star size */
}

/* Filled star */
.stars .fa-star {
  color: #ffb400; /* Gold color */
}

/* Half star */
.stars .fa-star-half-alt {
  color: #ffb400; /* Gold color */
  transform: translateY(1px); /* Nudge down slightly */
}

/* Empty star */
.stars .far.fa-star {
  color: #e0e0e0; /* Light gray */
}

/* Flag container */
.flag {
  display: inline-flex; /* Flex layout */
  align-items: center; /* Center vertically */
  margin-right: 12px; /* Space to right */
}

/* Likes counter */
.likes {
  font-weight: bold; /* Bold text */
  display: flex; /* Flex layout */
  align-items: center; /* Center vertically */
  gap: 4px; /* Space between elements */
  color: #ef3d4f; /* Red color */
  font-size: 0.85rem; /* Smaller text */
}

/* Review text content */
.review-text {
  margin: 0 0 10px 0; /* Space below */
  font-size: 0.95rem; /* Text size */
  line-height: 1.5; /* Spacing between lines */
  color: #333; /* Text color */
  padding-bottom: 10px; /* Space above border */
  border-bottom: 2px solid rgba(0, 0, 0, 0.08); /* Light divider */
}

/* Reviewer info container */
.reviewer-info {
  display: flex; /* Flex layout */
  justify-content: space-between; /* Space between items */
  align-items: center; /* Center vertically */
  margin-bottom: 6px; /* Space below */
}

/* Reviewer name */
.reviewer-name {
  flex: 1; /* Take available space */
  min-width: 0; /* Allow shrinking */
  padding-right: 12px; /* Space to right */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis if truncated */
}

/* Flag icon alternative */
.flag-icon {
  width: 18px; /* Fixed width */
  height: 14px; /* Fixed height */
  vertical-align: middle; /* Align with text */
  position: relative; /* For positioning */
  top: -1px; /* Nudge up slightly */
}

/* ===== DIVIDER SOLUTIONS ===== */

/* Right meta info container */
.reviewer-meta-right {
  position: relative; /* For positioning divider */
  padding-left: 16px; /* Space for divider */
  margin-left: 8px; /* Space from previous element */
  display: flex; /* Flex layout */
  align-items: center; /* Center vertically */
}

/* Divider before right meta */
.reviewer-meta-right::before {
  content: ""; /* Empty content */
  position: absolute; /* Position relative to container */
  left: 0; /* Align to left */
  top: 50%; /* Vertical center */
  transform: translateY(-50%); /* Precise centering */
  height: 18px; /* Match content height */
  width: 2px; /* Divider thickness */
  background: #d1d1d1; /* Light gray */
  z-index: 1; /* Ensure visibility */
}

/* Flag container with divider */
.flag {
  position: relative; /* For positioning divider */
  padding-right: 16px; /* Space for divider */
}

/* Divider after flag */
.flag::after {
  content: ""; /* Empty content */
  position: absolute; /* Position relative to flag */
  right: 0; /* Align to right */
  top: 50%; /* Vertical center */
  transform: translateY(-50%); /* Precise centering */
  height: 18px; /* Match content height */
  width: 2px; /* Divider thickness */
  background: #d1d1d1; /* Light gray */
  z-index: 1; /* Ensure visibility */
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .reviewer-info {
    flex-wrap: wrap; /* Allow wrapping */
  }
  .reviewer-meta-right {
    margin-left: auto; /* Push to right */
    padding-left: 12px; /* Smaller space for divider */
  }
  .reviewer-meta-right::before,
  .flag::after {
    height: 14px; /* Shorter dividers */
  }
}

/* Update the container width only for desktop */
@media (min-width: 768px) {
  .container {
    max-width: 1200px; /* This will only apply to screens 768px and wider */
    /* Other properties remain unchanged */
  }
}

/* Adjust screenshot size only for desktop */
@media (min-width: 768px) {
  .screenshot-item {
    flex: 0 0 calc(33.333% - 1.5rem); /* Show 3 items per row */
    max-width: calc(33.333% - 1.5rem); /* Each takes 1/3 of space minus gap */
    transform: scale(0.9); /* Slightly reduce size */
    transform-origin: center;
    transition: transform 0.3s ease;
  }

  .screenshot-item:hover {
    transform: scale(0.95); /* Slightly enlarge on hover */
  }

  .screenshot-item img {
    max-height: 470px; /* Fixed height for consistency */
    object-fit: contain; /* Maintain aspect ratio */
  }
}