/* Extracted block 1 from meme.html */
	  
	  /* CSS for meme pages only with !important */
	  @media (max-width: 768px) {
	    /* Hide login button on meme pages */
	    .meme-detail-page .auth-btn.login-btn {
	      display: none !important;
	    }
  
	    /* Position header-right on meme pages */
	    .meme-detail-page .header-right {
	      position: fixed !important;
	      right: 80px !important;
	      top: 13px !important;
	      transition: opacity 0.2s ease, visibility 0.2s ease !important;
	    }
	  }
	  
	  
	  
    /* Gallery and related memes gallery styles remain the same */
    .gallery, .related-gallery {
      column-count: 4;
      column-gap: 10px;
      padding: 10px;
    }
    @media (max-width: 768px) {
      .gallery, .related-gallery {
        column-count: 1;
      }
    }
    .meme {
      display: inline-block;
      width: 100%;
      margin-bottom: 10px;
      break-inside: avoid;
      position: relative;
      background-color: #eee;
      min-height: 150px;
      border: 2px solid #000;
      overflow: hidden;
    }
    .meme a {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .meme img,
    .meme video {
      width: 100%;
      display: block;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease-in;
    }
    .meme img.loaded,
    .meme video.loaded {
      opacity: 1;
    }
    #loader {
      text-align: center;
      padding: 20px;
    }
    /* Updated Meme Detail Styles */
    .meme-detail {
      text-align: center;
      margin: 20px auto;
      max-width: 600px;
    }
    .meme-detail img,
    .meme-detail video {
      width: 100%;
      height: auto;
      border: 2px solid #000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      display: block;
      margin: 0 auto;
      object-fit: contain;
    }
    .meme-title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 5px;
      text-align: center;
      z-index: 1;
    }
    /* Vote Section Styles */
    .vote-section {
      text-align: center;
      margin-top: 20px;
      font-family: sans-serif;
    }
    .vote-button {
      cursor: pointer;
      font-size: 24px;
      padding: 5px 10px;
      user-select: none;
    }
    .upvote-button {
      color: green;
    }
    .downvote-button {
      color: red;
    }
    .vote-count {
      font-size: 18px;
      margin: 0 10px;
    }
    /* Comments Section Styles */
    .comments-section {
	  padding: 5px;
    }
    .comment {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
    }
    .comment strong {
      color: #333;
    }
    .comment p {
      margin: 5px 0;
    }

/* Extracted block 2 from meme.html */
   /* Font Awesome CSS - Make sure to include this in your base template */
   /* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> */
  
   .topmessage-upload-success-container {
     background-color: white;
     border-radius: 8px;
     border: 2px dashed #555;
     padding: 25px;
     margin: 20px auto;
     max-width: 700px;
     text-align: center;
   }
  
   .topmessage-success-message {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
   }
  
   .topmessage-success-icon {
     color: #28a745;
     font-size: 24px;
     margin-right: 10px;
   }
  
   .topmessage-share-section {
     margin-top: 15px;
   }
  
   .topmessage-share-section h3 {
     font-size: 20px;
     margin-bottom: 15px;
     color: #333;
   }
  
   .topmessage-url-copy-container {
     display: flex;
     margin: 15px 0 20px;
     max-width: 100%;
   }
  
   #topmessage-share-url {
     flex-grow: 1;
     padding: 10px 12px;
     border: 2px solid #ddd;
     border-right: none;
     border-radius: 4px 0 0 4px;
     font-size: 14px;
     color: #555;
     background-color: #f5f5f5;
   }
  
   #topmessage-copy-url-btn {
     background-color: #4267B2;
     color: white;
     border: none;
     padding: 10px 15px;
     cursor: pointer;
     border-radius: 0 4px 4px 0;
     font-size: 14px;
     transition: background-color 0.2s;
   }
  
   #topmessage-copy-url-btn:hover {
     background-color: #365899;
   }
  
   .topmessage-social-buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     margin-top: 15px;
   }
  
   .topmessage-social-btn {
     display: flex;
     align-items: center;
     padding: 8px 15px;
     border-radius: 4px;
     color: white;
     text-decoration: none !important;
     font-size: 14px;
     transition: opacity 0.2s, transform 0.2s;
   }
  
   .topmessage-social-btn:hover {
     opacity: 0.9;
     transform: translateY(-2px);
     text-decoration: none !important;
     color: white;
   }
  
   .topmessage-social-btn i {
     margin-right: 8px;
     font-size: 16px;
   }
  
   .topmessage-facebook {
     background-color: #4267B2;
   }
  
   .topmessage-twitter {
     background-color: #1DA1F2;
   }
  
   .topmessage-reddit {
     background-color: #FF5700;
   }
  
   .topmessage-whatsapp {
     background-color: #25D366;
   }
  
   .topmessage-telegram {
     background-color: #0088cc;
   }
  
   .topmessage-linkedin {
     background-color: #0077B5;
   }
  
   .topmessage-pinterest {
     background-color: #E60023;
   }
  
   .topmessage-email {
     background-color: #747474;
   }
  
   /* Responsive adjustments */
   @media (max-width: 768px) {
     .topmessage-upload-success-container {
       margin: 20px 10px;
     }
    
     .topmessage-social-buttons {
       gap: 8px;
     }
    
     .topmessage-social-btn {
       padding: 8px 12px;
       font-size: 13px;
     }
    
     .topmessage-social-btn span {
       display: none;
     }
    
     .topmessage-social-btn i {
       margin-right: 0;
       font-size: 18px;
     }
   }

/* Extracted block 3 from meme.html */
   /* Share section styles - left aligned, no border */
   .belowmeme-share-section {
     padding: 5px 5px;
     text-align: left;
     max-width: 700px;
   }
  
   .belowmeme-share-section h3 {
     font-size: 20px;
     margin-bottom: 15px;
     color: #333;
     display: flex;
     align-items: center;
   }
  
   .belowmeme-share-section h3 i {
     margin-right: 10px;
     color: #000;
   }
  
   .belowmeme-url-copy-container {
     display: flex;
     margin: 15px 0 20px;
     max-width: 100%;
   }
  
   #belowmeme-share-url {
     flex-grow: 1;
     padding: 10px 12px;
     border: 2px solid #ddd;
     border-right: none;
     border-radius: 4px 0 0 4px;
     font-size: 14px;
     color: #555;
     background-color: #f5f5f5;
   }
  
   #belowmeme-copy-url-btn {
     background-color: #4267B2;
     color: white;
     border: none;
     padding: 10px 15px;
     cursor: pointer;
     border-radius: 0 4px 4px 0;
     font-size: 14px;
     transition: background-color 0.2s;
   }
  
   #belowmeme-copy-url-btn:hover {
     background-color: #365899;
   }
  
   .belowmeme-social-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 15px;
   }
  
   .belowmeme-social-btn {
     display: flex;
     align-items: center;
     padding: 8px 15px;
     border-radius: 4px;
     color: white;
     text-decoration: none !important;
     font-size: 14px;
     transition: opacity 0.2s, transform 0.2s;
   }
  
   .belowmeme-social-btn:hover {
     opacity: 0.9;
     transform: translateY(-2px);
     text-decoration: none !important;
     color: white;
   }
  
   .belowmeme-social-btn i {
     margin-right: 8px;
     font-size: 16px;
   }
  
   .belowmeme-facebook { background-color: #4267B2; }
   .belowmeme-twitter { background-color: #1DA1F2; }
   .belowmeme-reddit { background-color: #FF5700; }
   .belowmeme-whatsapp { background-color: #25D366; }
   .belowmeme-telegram { background-color: #0088cc; }
   .belowmeme-linkedin { background-color: #0077B5; }
   .belowmeme-pinterest { background-color: #E60023; }
   .belowmeme-email { background-color: #747474; }
  
   /* Comments section styles with icons */
   .comments-section {
     padding: 5px 5px;
     max-width: 700px;
   }
  
   .comments-section h3 {
     font-size: 20px;
     margin-bottom: 20px;
     color: #333;
     display: flex;
     align-items: center;
   }
  
   .comments-section h3 i {
     margin-right: 10px;
     color: #000;
   }
  
   .no-comments {
     color: #777;
     font-style: italic;
     display: flex;
     align-items: center;
     gap: 8px;
   }
  
   /* Comment styles with icon */
   .comment {
     display: flex;
     margin-bottom: 15px;
     padding-bottom: 15px;
     border-bottom: 1px solid #eee;
   }
  
   .comment-icon {
     margin-right: 15px;
     font-size: 24px;
     color: #4267B2;
     flex-shrink: 0;
   }
  
   .comment-content {
     flex-grow: 1;
   }
  
   .comment-content strong {
     color: #333;
     display: block;
     margin-bottom: 5px;
   }
  
   .comment-content p {
     margin: 5px 0 8px;
     color: #444;
   }
  
   .comment-content small {
     color: #888;
     font-size: 12px;
   }
  
   /* Comment form styles */
   .comment-input-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     margin-top: 20px;
   }
  
   #comment-input {
     width: 100%;
     padding: 12px 15px;
     border: 2px solid #ddd;
     border-radius: 8px;
     font-size: 14px;
     resize: vertical;
     min-height: 80px;
     margin-bottom: 10px;
     color: #333;
     transition: border-color 0.2s;
   }
  
   #comment-input:focus {
     border-color: #4267B2;
     outline: none;
   }
  
   .comment-submit-btn {
     align-self: flex-start;
     background-color: #4267B2;
     color: white;
     border: none;
     border-radius: 4px;
     padding: 8px 20px;
     font-size: 14px;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s;
     display: flex;
     align-items: center;
     gap: 8px;
   }
  
   .comment-submit-btn:hover {
     background-color: #365899;
     transform: translateY(-2px);
   }
  
   .comment-submit-btn:active {
     transform: translateY(0);
   }
  
   /* Responsive adjustments */
   @media (max-width: 768px) {
     .belowmeme-social-buttons {
       gap: 8px;
     }
    
     .belowmeme-social-btn {
       padding: 8px 12px;
       font-size: 13px;
     }
    
     .belowmeme-social-btn span {
       display: none;
     }
    
     .belowmeme-social-btn i {
       margin-right: 0;
       font-size: 18px;
     }
    
     .comment-form-container {
       flex-direction: column;
     }
    
     .comment-icon {
       margin-bottom: 10px;
     }
    
     .comment-submit-btn {
       width: 100%;
       justify-content: center;
     }
   }

/* Extracted block 4 from meme.html */
 /* Mobile Overlay Styles - Enhanced */
 @media (min-width: 769px) {
   /* We'll keep the overlay visible on desktop but with different behavior */
   #mobile-overlay {
     bottom: 50px; /* Position it a bit higher on desktop */
     padding: 10px 25px; /* Slightly larger padding */
   }
  
   .overlay-button {
     font-size: 22px; /* Slightly larger icons */
   }
  
   .overlay-button span {
     font-size: 18px; /* Slightly larger text */
   }
 }

 #mobile-overlay {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
  /* background-color: rgba(30, 30, 30, 0.9); */
  background-color: #333333;
   border-radius: 30px;
   padding: 10px 20px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
   z-index: 1000;
   display: flex;
   gap: 18px;
   transition: all 0.3s ease;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
 }

 .overlay-button {
   display: flex;
   align-items: center;
   font-size: 20px;
   cursor: pointer;
   color: #fff;
   padding: 5px;
   transition: transform 0.2s ease, color 0.2s ease;
 }

 .overlay-button:hover, .overlay-button:active {
   transform: scale(1.1);
 }

 .overlay-button span {
   margin-left: 5px;
   font-size: 16px;
 }

 #overlay-upvote {
   color: #FFFFFF;
   /* color: #A1C4FD; */
 }

 #overlay-upvote:active, #overlay-upvote.active {
   color: #4CAF50;
 }

 #overlay-downvote {
   color: #FFFFFF;
 }

 #overlay-downvote:active, #overlay-downvote.active {
   color: #F44336;
 }

 #overlay-heart {
   color: #FFFFFF;
 }

 #overlay-heart:active, #overlay-heart.active {
   color: #E91E63;
 }

 #overlay-comment, #overlay-share {
   color: #FFFFFF;
 }

 /* Share Modal Bottom Sheet Styles (improved) */
 .overlay.overlay-bottom-sheet {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2003;
   display: none;
 }

 .modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
     z-index: 2300; /* Add this line */
 }
 
 body.modal-open::after {
   content: none;
   /*position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none; 
   z-index: 2000; *//* Lower than the modal but higher than most content */
   /* So clicks go through to the modal backdrop */
 }

 .overlay-bottom-sheet .modal {
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #fff;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
   transform: translateY(100%);
   transition: transform 0.3s ease;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
   z-index: 2400;
 }

 .overlay-bottom-sheet.active .modal {
   transform: translateY(0);
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
 }

 .modal__header {
   padding: 15px;
   border-bottom: 1px solid #eee;
   position: relative;
   z-index: 2600;
 }

 .modal-header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .close-modal-btn {
   background: none;
   border: none;
   font-size: 20px;
   color: #888;
   cursor: pointer;
   padding: 5px;
 }

 .get-the-app-share-link {
   display: flex;
   align-items: center;
   color: #333;
   text-decoration: none;
   font-size: 14px;
 }

 .get-the-app-share-link i {
   margin-right: 8px;
   color: #4267B2;
 }

 .scrollable-content {
   overflow-y: auto;
   flex-grow: 1;
 }

 .menu-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .menu-list li {
   border-bottom: 1px solid #f1f1f1;
 }

 .menu-list li:last-child {
   border-bottom: none;
 }

 .copy-link-wrap {
   padding: 15px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .copy-link-wrap input {
   flex-grow: 1;
   padding: 10px 12px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
   background-color: #f5f5f5;
   min-width: 0; /* Allows the input to shrink below its content size */
 }

 .copy-link-wrap button {
   background-color: #4267B2;
   color: white;
   border: none;
   padding: 10px 15px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
   white-space: nowrap;
 }

 .divider {
   height: 8px;
   background-color: #f5f5f5;
   border: none;
 }

 .menu-list a.icon {
   display: flex;
   align-items: center;
   padding: 15px;
   color: #333;
   text-decoration: none;
   transition: background-color 0.2s;
 }

 .menu-list a.icon:hover, .menu-list a.icon:active {
   background-color: #f5f5f5;
 }

 .thumbnail {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: #f0f2f5;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
 }

 .thumbnail i {
   font-size: 18px;
 }


 /* Mobile responsive adjustments */
 @media (max-width: 480px) {
   #mobile-overlay {
     padding: 8px 16px;
     gap: 14px;
   }
  
   .overlay-button {
     font-size: 18px;
   }
  
   .overlay-button span {
     font-size: 14px;
   }
  
   .copy-link-wrap {
     flex-direction: column;
   }
  
   .copy-link-wrap button {
     align-self: stretch;
   }
 }

 /* Animation for modal appearance */
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }

 @keyframes slideUp {
   from { transform: translateY(100%); }
   to { transform: translateY(0); }
 }

 .overlay.overlay-bottom-sheet.active {
   animation: fadeIn 0.3s ease;
 }

 .overlay.overlay-bottom-sheet.active ~ .mobile-nav-arrows {
     visibility: visible !important;
     opacity: 1 !important;
     display: flex !important;
     z-index: 1000 !important; /* Keep a lower z-index */
 }

 .overlay.overlay-bottom-sheet.active .modal {
   animation: slideUp 0.3s ease;
 }

/* Extracted block 5 from meme.html */
		
/* Centered Meme Stats Section Styles */
.meme-stats-section {
  max-width: 100%;
  margin: 0px;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}

.meme-stats-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Center items horizontally */
  flex-wrap: wrap;
  gap: 25px; /* Increased gap for better spacing */
}

.stats-item {
  display: flex;
  align-items: center;
  color: #555;
}

.voting-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #555;
  transition: color 0.2s, transform 0.2s;
}


.upvote-btn:hover, .upvote-btn, .upvote-btn.active {
  color: #4CAF50;
}

.downvote-btn:hover, .downvote-btn, .downvote-btn.active {
  color: #F44336;
}

.vote-count {
  margin: 0 5px;
  font-weight: 500;
      font-size: 14px;
}

.likes-stat i {
  color: #cccccc;
  margin-right: 5px;
}

.likes-stat i.active,
.overlay-button i.active {
  color: #E91E63; /* Change this to your desired active (hearted) color */
}


.views-stat i {
  color: #3F51B5;
  margin-right: 5px;
}

.time-stat i {
  color: #FF9800;
  margin-right: 5px;
}

.share-btn {
  display: flex;
  align-items: center;
  color: #2196F3;
}

.share-btn i {
  margin-right: 5px;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .meme-stats-container {
    gap: 20px; /* Maintain good spacing on mobile */
  }
  
  .share-text {
    display: none;
  }
  
  .stats-item {
    font-size: 14px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .meme-stats-container {
    gap: 15px;
  }
}