.mod-header-flex {
 display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
   /* background: #1a1a1d; */
   /* padding: 25px; */
    border-radius: 20px;
       width: 100%;
    margin: 0 auto;
margin-bottom: 30px;
}

@media (max-width: 1005px) {
    .mod-author-card {
        width:100% !important;
       min-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .mod-author-card {
        width:100% !important;
       min-width: 100% !important;
    }
}

.mod-author-card {
    background: #0000005e;
    border-radius: 10px;
    padding: 20px;
    
    min-width: 270px;
    text-align: center;
    
}

.author-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #e81c5a;
  box-shadow: 0 0 10px #e81c5a;
  margin-bottom: 10px;
}

.author-name {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  display: block;
}

.author-role,
.author-status {
  font-size: 13px;
 
  margin-top: 3px;
}

.all-mods-btn {
  display: inline-block;
  margin-top: 15px;
  background: #292929;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: 0.3s;
}
.all-mods-btn:hover {
  background: #e81c5a;
  color: #fff;
}


@media (max-width: 600px) {
    .mod-info-card {
        width:100% !important;
       min-width: 100% !important;
    }
}

.mod-info-card {
    flex: 1;
    
    min-width: 290px;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    background: #0000005e;
   
}


.mod-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  color: #ccc;
  font-size: 14px;
  margin-bottom: 20px;
}


@media (max-width: 1200px) {
    .mod-buttons {
      display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    }
}

@media (max-width: 600px) {
    .mod-buttons {
      display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    }
}
.mod-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


@media (max-width: 1200px) {
    .mod-btn {
      padding: 5px !important;
      font-size:14px !important;
    }
}

.mod-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.mod-btn.red {
  background: #e81c5a;
  color: #fff;
font-weight: bold;
}

.mod-btn.green {
  background: #0f8;
  color: #000;
font-weight: bold;
cursor: help;
}

.mod-btn.pass {
  background: rgba(255, 168, 3, 0.4);
  color: #fff;
cursor: help;
}

.mod-btn.forum {
  background: linear-gradient(135deg, #e81c5a, #a80e40);
  color: #fff;
font-weight: bold;
}

.mod-btn.gray {
  background: #2e2e2e;
  color: #ccc;
}

.mod-btn:hover {
  opacity: 0.9;
}
				    
				    
				    
				    
				    .author-row {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-start;
  
  text-align: left;
}

.author-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #e81c5a;
  box-shadow: 0 0 10px #e81c5a;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.author-name {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.author-role {
  font-size: 13px;
  color: #ccc;
}

.author-status {
  font-size: 13px;
  color: #3dd598;
  font-weight: bold;
}
  .uploaded-by {
						background: linear-gradient(to right, #e81c5a2e, #e81c5a05);
						padding: 8px 12px;
						border-left: 4px solid #e81c5a;
						margin-bottom: 15px;
						font-size: 14px;
						color: #fff;
						border-radius: 5px;
                        text-align: left;
						
					    }
					    .uploaded-by a {
						color: #e81c5a;
						font-weight: bold;
						text-decoration: none;
					    }


.uploaded-info {
    background: linear-gradient(to right, #e81c5a2e, #e81c5a05);
    padding: 8px 12px;
    border-left: 4px solid #e81c5a;
    margin-bottom: 15px;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    
}
				.uploaded-info a {
						color: #e81c5a;
						font-weight: bold;
						text-decoration: none;
					    }	    
					    .mod-header-flex {
						/* background: #1e1e1e; */
						animation: fadeUp 0.5s ease-in-out;
                       /* box-shadow:0 0 10px rgba(0, 0, 0, 0.5); */
					    }
					    
					    @keyframes fadeUp {
						0% {
						    opacity: 0;
						    transform: translateY(15px);
						}
						100% {
						    opacity: 1;
						    transform: translateY(0);
						}
					    }
					    
					    .mod-author-card:hover {
						
						transition: 0.3s;
					
					    }
					    
					    .author-status {
						font-size: 13px;
						font-weight: bold;
						display: flex;
						align-items: center;
						color: #3dd598;
					    }
					    .author-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background-color: #00bb00;
  animation: pulseDot 1.5s infinite;
}

.offline-status::before {
  background-color: #ff4c4c !important;
}


@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

					    
					    .repost-link {
						background: linear-gradient(90deg, #2c2c2c, #3c3c3c);
						padding: 10px 14px;
						border-radius: 6px;
						color: #fff;
						text-decoration: none;
						font-weight: bold;
						display: flex;
						align-items: center;
						gap: 6px;
						transition: 0.3s;
					    }
					    .repost-link:hover {
						background: #e81c5a;
						color: #fff;
					    }
					    



.mod-preview {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 30px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  aspect-ratio: 16 / 9;
  background-color: #0e0e0e;
}

.mod-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 1200px) {
    .video-play-button {
        font-size: 16px !important;
            padding: 10px 19px !important;
    }
}

@media (max-width: 465px) {
    .video-play-button {
        font-size: 14px !important;
            padding: 9px 12px !important;
        
    }
}

@media (max-width: 385px) {
    .video-play-button {
        font-size: 12px !important;
            padding: 9px 12px !important;
        
    }
}

.video-play-button {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #cd0303;
  color: #fff;
  font-size: 18px;
  padding: 10px 20px;
  border: 2px solid #cd0303;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: 0.3s ease;
  font-weight: bold;
text-transform: uppercase;
    box-shadow: 0px 0px 10px rgb(0 0 0);
}

.video-play-button:hover {
  background: red;
border: 2px solid red;
  color: #fff;
box-shadow: 0px 0px 10px red;
}


.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
        background: rgb(0 0 0 / 80%);
        backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background: #000;
  padding: 10px;
  border-radius: 10px;
}

.video-modal iframe {
  width: 100%;
  height: 450px;
  border-radius: 6px;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}


 .down-btn {
 display: inline-block;
 padding: 12px 26px;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 background: linear-gradient(135deg, #e81c5a, #ff4b6e);
 border: none;
 border-radius: 8px;
 text-decoration: none;
 transition: all 0.3s ease;
 box-shadow: 0 4px 10px rgba(232, 28, 90, 0.4);
 position: relative;
 overflow: hidden;
}

.down-btn::before {
 content: "";
 position: absolute;
 top: 0;
 left: -75%;
 width: 50%;
 height: 100%;
 background: rgba(255,255,255,0.2);
 transform: skewX(-25deg);
 transition: 0.5s;
}

.down-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 16px rgba(232, 28, 90, 0.6);
}

.down-btn:hover::before {
 left: 120%;
}