/* frontend/css/style.css */

body {
  font-family: sans-serif;
  background-color: #90ee90; /* Light green background */
  color: #333;
  margin: 0;
  padding: 0;
}

header {
  background-color: #70c870;
  padding: 10px;
  text-align: center;
}

nav {
  margin-bottom: 5px;
}

nav a, nav button {
  margin: 0 5px;
  text-decoration: none;
  color: #333;
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #CCBBFF;
}

nav button:hover,
nav a:hover {
  background-color: #ddd;
}

/* --- Post Styles --- */
.post {
  display: flex; /* Use Flexbox for layout */
  background-color: #e6e6e6;
  border: 2px solid #ddd;
  margin-bottom: 2px;
  padding: 0.5px;
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Image Container */
.image-container {
  width: 150px;   /* Fixed width for the image container */
  display: flex; /* Use flexbox to center image */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.image-container img {
  max-width: 100%; /* Don't overflow container */
  max-height: 150px; /* Limit height */
  height: auto;
  display: block;
  border-radius: 4px; /* Optional: Rounded corners */
}

/* --- Vote Container and Buttons --- */
.vote-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.vote-button {
  background-color: #f0f0f0; /* Light gray background */
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin-right: 5px; /* Spacing between button and count */
  cursor: pointer;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
  color: #333; /* Default text color (change as needed) */
  /* Remove default button styles that can interfere */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0; /* Remove default margin */
}

.vote-button:hover {
  background-color: #ddd;
}

.vote-count {
  margin-right: 10px; /*Keep space*/
}

/* Specific button styles (optional, but good for visual distinction) */
.like-button {
  /* Example: Green for like */
  color: #4CAF50; /* Keep, adjust, or remove */
}

.dislike-button {
  /* Example: Red for dislike */
  color: #f44336; /* Keep, adjust, or remove */
}

.delete-button {
  margin-top: auto; /* Push the delete button to the bottom */
  align-self: flex-start; /* Align to the start (left) of its container */
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* --- Form Styles (General) --- */
form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 1px;
}

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


/*Comment list*/
.comment-item {
  position: relative;   /* For positioning the comment number */
  padding: 10px;          /* Add some padding around the comment content */
  margin-bottom: 5px;    /* Add space between comments */
  border: 1px solid #ddd; /* Add a subtle border */
  border-radius: 4px;    /* Optional: Round the corners */
  background-color: #f9f9f9; /* Optional: Light background color */
  padding-left: 35px;
}

.comment-number {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8em;
  color: #777;
  padding: 10px;
}

/* Style for reply button */
.reply-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  margin-top: 5px;
}

/* Style for reply-container */
.replies-container {
  margin-left: 20px;   /* Indent replies */
  margin-top: 5px;
  border-left: 1px solid #ccc; /* Vertical line to connect replies */
  padding-left: 10px;
  position: relative; /* Very important for positioning the button */
}

.reply {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.overlapped-replies {
  max-height: 100px;  /* Adjust as needed */
  overflow: hidden;
  position: relative; /* Required for absolute positioning of the button */
}

/*  Remove the pseudo-element.  We're using a button now.  It's also causing click issues */
/* .overlapped-replies::after {
  content: "...";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  text-align: center;
  padding: 2px 0;
} */

/* Style the "View More" button */
.view-more-replies-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  position: absolute;
  bottom: 0; /* Position at the bottom of the container */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10; /* Make sure it's above the content */
  background: white; /* Or a subtle gradient */
  /* Optional: Add a very subtle gradient to make it stand out */
  /* background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,1)); */

}

/* --- Modal styles --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of everything */
}

.modal-content {
  position: relative;
  max-width: 90%; /* Reduced from 95% */
  max-height: 90%; /* Reduced from 95% */
  overflow: auto;
}

#modal-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* VERY IMPORTANT! */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001; /* Ensure it's above the image */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {

  .post {
      flex-direction: column; /* Stack content on small screens */
      padding: 0.5px; /* Reduce padding */
  }

  .image-container {
      width: 100%; /* Ensure images take full width */
      text-align: center;
  }

  .image-container img {
      max-width: 80%; /* Prevent overflow */
      height: auto;
  }


  nav a,
  nav button {
      width: 100%;
      padding: 5px; /* Better touch target */
      font-size: 16px; /* Increase readability */
  }
}

@media (max-width: 600px) {
  .modal-content {
      max-width: 95%; /* Adjust for smaller screens */
      max-height: 95%; /* Adjust for smaller screens */
  }
}

/* Add these new styles to your style.css */
.title-image-container {
  display: flex; /* Use flexbox to align items in a row */
  align-items: center; /* Vertically align items */
  justify-content: space-between; /* Distribute space between items */
  margin-bottom: 10px; /* Add some spacing below */
}

.title-image-container h2 {
  margin: 0; /* Reset default heading margins */
  flex: 1; /* Allow the title to take up remaining space */
  text-align: left;   /* Ensure the title is left-aligned within its space */
}

.title-image-container .image-container {
  width: auto; /* Allow image container to adjust its width */
  margin-left: 10px; /* Add spacing between title and image */
}

.title-image-container .image-container img {
  max-width: 100px; /* Adjust the maximum width of the image */
  height: auto;
}


.post h2 a {
  display: inline-block; /* or inline-flex */
}

/* Styles for the pagination container */
#pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Basic button styles */
#pagination-container button {
  padding: 8px 12px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  color: #555;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

/* Hover state for buttons */
#pagination-container button:hover {
  background-color: #ddd;
}

/* Style for the active (current) page button */
#pagination-container button.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

/* Style for disabled buttons (e.g., previous on first page) */
#pagination-container button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#pagination-container button:disabled:hover {
  background-color: #f8f8f8; /* keep the original background */
}

/* Style for the button in its default state */
button[type="submit"] {
  background-color: #4CAF50;
  color: blue; /* <----- HERE */
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative; /* Make the button a positioning context */
}

button[type="submit"]:hover {
  background-color: #45a049;
}

/* Style for the spinner */
#button-spinner {
  display: none; /* Hidden by default */
  /*position: absolute;  // Overlay the text -->  Try removing this first
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  font-size: 1em; /* Adjust as needed */
}

/* Style for the success icon */
#button-success-icon {
  display: none; /* Hidden by default */
  /*position: absolute;  // Overlay the text  --> Try removing this first
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  color: green;
  font-size: 1.2em; /* Adjust as needed */
}

/* Add a class to disable the button */
button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Keyframes for the spinning animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Apply the animation to the spinner */
#button-spinner {
  animation: spin 1s linear infinite;
}

/* Style for the comment button in its default state */
#add-comment-button {
  background-color: #4CAF50; /* Or your preferred color */
  color: blue;
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative; /* Make the button a positioning context */
}

#add-comment-button:hover {
  background-color: #45a049; /* Darker shade on hover */
}

/* Style for the spinner */
#comment-button-spinner {
  display: none; /* Hidden by default */
  /* position: absolute; Remove for now
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  font-size: 1em; /* Adjust as needed */
}

/* Style for the success icon */
#comment-button-success-icon {
  display: none; /* Hidden by default */
  /*position: absolute; Remove for now
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  color: green;
  font-size: 1.2em; /* Adjust as needed */
}

/* Disable the button while sending */
#add-comment-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Keyframes for the spinning animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Apply the animation to the spinner */
#comment-button-spinner {
  animation: spin 1s linear infinite;
}

.profile-picture {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 5px;
}

/* Specific style for profile pictures on the post details page */
#post-details-container .profile-picture {
  width: 60px;
  height: 60px;
}

@media (max-width: 768px) {
  #post-details-container .profile-picture {
    width: 60px;  /* Smaller on smaller screens */
    height: 60px;
  }
}

#profile-info img#profile-picture {
  max-width: 150px; /* Adjust this value to your desired maximum width */
  max-height: 150px; /* Adjust this value to your desired maximum height */
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50%; /* Make it circular */
  object-fit: cover; /* Important: Ensures the image fills the circle */
}

/* Common container for media (images and videos) */
.media-container {
  display: flex;          /* Use flexbox */
  flex-wrap: wrap;       /* Wrap if needed */
  align-items: flex-start; /* Align items at the top */
}

.media-container .multi-image-container {
  flex: 1; /* Take up available space */
}

.media-container .video-thumbnail-container {
  flex: 1;  /* Take up available space */
}

/* Multi-image container styles */
.multi-image-container {
  display: flex;            /* Arrange images in a row */
  flex-wrap: wrap;          /* Allow images to wrap to the next line if needed */
  justify-content: flex-start; /* Align images to the left */
  align-items: flex-start;
  gap: 10px;                /* Space between images */
}

/* Individual image styles */
.multi-image-container .post-image {
  max-width: 30%;           /* Each image takes up approximately 30% of the container */
  max-height: 200px;
  height: auto;
  object-fit: cover;       /* Maintain aspect ratio and fill the container */
  border-radius: 5px;      /* Optional: Add rounded corners */
}

/* Multi-video container styles (similar to image container) */
.multi-video-container {
  display: flex; /*Arrange videos in a row*/
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

/* Individual video styles */
.multi-video-container .post-video {
  max-width: 20%; /* Adjust as needed */
  max-height: 100px;
  width: 100px;
  border-radius: 2px;
}

/* Style for the modal image carousel */
#modal-image-carousel {
  position: relative;   /* For positioning navigation buttons */
}

#modal-image-container {
  display: flex;         /* Arrange images in a row */
  overflow-x: auto;      /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enable scroll snapping */
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

#modal-image-container img {
  width: 100%;         /* Each image takes up the full width */
  max-height: 80vh;      /* Limit maximum height to 80% of the viewport height */
  object-fit: contain;   /* Maintain aspect ratio and fit within the container */
  scroll-snap-align: start; /* Snap to the start of each image */
}

/*Basic button styles*/
#prev-button,
#next-button {
  position: absolute;   /* Position over the images */
  top: 50%;             /* Vertically center */
  transform: translateY(-50%); /* Adjust for height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white;
  border: none;
  padding: 1px;
  cursor: pointer;
  z-index: 1002;          /* Ensure buttons are above the images */
}

#prev-button {
  left: 1px;
}

#next-button {
  right: 1px;
}

/*Style the link*/
.comment-item a {
  color: blue; /* Or your preferred link color */
  text-decoration: none; /* Remove underline */
}
/*Style on hover*/
.comment-item a:hover {
  text-decoration: underline; /* Add underline on hover */
}

.reply a {
  color: blue; /* Or your preferred link color */
  text-decoration: none; /* Remove underline */
}
/*Style on hover*/
.reply a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* Change the color of post titles on the main page */
.post-content h2 a {  /* <--- More specific selector */
  color: #b56407; /* Or your desired color (e.g., black) */
  text-decoration: none; /* Remove underline if desired */
}

.post-content h2 a:hover {
  color: #555;  /* A darker shade on hover, for example */
  text-decoration: underline;  /* Add underline on hover */
}

/* Style usernames in post detail page */
#post-details-container .post .post-content p a {
  color: rgb(236, 88, 9); /* Or your desired color for day mode */
}

/* Style usernames in comments (day mode) */
.comment-item a {
  color: rgb(226, 104, 10); /* Set to your desired color for day mode */
  text-decoration: none; /* Remove underline */
}

.comment-item a:hover {
  color: rgb(212, 124, 29); /* Lighter blue on hover for better visibility */
  text-decoration: underline; /* Keep the underline on hover */
}

/* Style usernames in replies (day mode) */
.reply a {
  color: rgb(216, 100, 11); /* Set to your desired color for day mode */
  text-decoration: none; /* Remove underline */
}

.reply a:hover {
  color: rgb(224, 106, 9); /* Lighter blue on hover for better visibility */
  text-decoration: underline; /* Keep the underline on hover */
}

/* New container for Title and Author/Date  */
.main-post-list .text-info-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-post-list .text-info-container h2 {
  /* Two-line title */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box; /* For Firefox */
  display: -ms-flexbox; /* For IE 10 */
  display: -webkit-flex; /* For Safari */
  display: flex;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2; /* Standard property for line-clamp */
  box-orient: vertical;
  max-width: 100%;
  line-height: 1.2em;
  height: 2.4em;
}

/* Restrict title line length to 27 characters (adjust if needed) */
.main-post-list .text-info-container h2 a {
  word-break: break-word;
}

/* Author/Date styling */
.main-post-list .text-info-container p {
  font-size: 0.8em;
  color: #777;
}

/* Styles for the image on the post list */
.main-post-list .post-list-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-left: 10px;
}

/* Styles for the video on the post list */
.main-post-list .post-list-video {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-left: 10px;
}

/* Main Page Post Content */
.main-post-list .post-content {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0.5px;
}

/* title file container */
.title-file-container {
  display: flex; /* Enable flexbox */
  align-items: center; /* Vertically align items */
}

/* --- Modal styles --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of everything */
}

.modal-content {
  position: relative;
  max-width: 90%; /* Reduced from 95% */
  max-height: 90%; /* Reduced from 95% */
  overflow: auto;
}

#modal-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* VERY IMPORTANT! */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001; /* Ensure it's above the image */
}

/* Style for the modal image carousel */
#modal-image-carousel {
  position: relative;   /* For positioning navigation buttons */
}

#modal-image-container {
  display: flex;         /* Arrange images in a row */
  overflow-x: auto;      /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enable scroll snapping */
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

#modal-image-container img {
  width: 100%;         /* Each image takes up the full width */
  max-height: 80vh;      /* Limit maximum height to 80% of the viewport height */
  object-fit: contain;   /* Maintain aspect ratio and fit within the container */
  scroll-snap-align: start; /* Snap to the start of each image */
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  color: white;
  opacity: 0.7;
  cursor: pointer;
}

.video-container { /* Assuming you have a container around the video */
  width: 160px; /* Fixed width */
  height: 240px; /* Fixed height */
  overflow: hidden; /* Prevent overflowing content */
}

.post-video {
  max-width: 100%; /* or whatever width you want */
  height: auto;
  border-radius: 5px; /* Optional:  If you want rounded corners */
}

.video-thumbnail-container {
  width: 100px;      /* Adjust as needed */
  height: 240px;     /* Adjust as needed */
  overflow: hidden; /* Keep the video within container! */
  position: relative; /* For absolute positioning of the play icon */
  border-radius: 5px; /* Optional: Rounded corners */
}

.video-thumbnail-container img {  /* Style the Thumbnail */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Important: Prevents distortion */
}


/* Apply to Video element when it is played */
.post-video-fullscreen {
  max-width: 80%; /* Adjust size as needed */
  max-height: 600px;
  display: block;
  margin: 10px auto; /* Centering */
}