.gallery-box_content-rating {
  font-family: Arial, sans-serif;
  margin-top: 10px;
}

.gallery-box_content-rating p {
  margin: 0 0 6px 0;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.stars {
  direction: rtl;
  unicode-bidi: bidi-override;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}

.stars span {
  color: lightgray;
  display: inline-block;
  transition: color 0.2s;
  margin: 0 3px;
}

.stars span:hover,
.stars span.hover,
.stars span.selected {
  color: gold;
}















  .lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
  }
  .lightbox-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    text-align: center;
  }
  .lightbox-content img {
    max-width: 100%;
    max-height: 70vh;
  }
  .lightbox-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
  }
.gallery-box {
	background: #ffffff;
	border-radius: 4px;
	margin-bottom: 20px;
}

.gallery-box_image {
	background: #eeeeee;
	cursor: pointer;
	width: 100%l
	height: 202px;
}
.gallery-box_image img {
	width: 100%;
}

.gallery-box_description {
	background: #fafafa;
	color: #3b4345;
	padding: 20px;
}
.gallery-box_description h3 {
	color: #1e90ff;
	margin-top: 10px;
}







.gallery-box {
  border: 1px solid #ccc;
  margin: 15px 0;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.gallery-box_header a img {
	cursor: pointer;
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
  border-radius: 6px 6px 0 0;
}

.gallery-box_content {
  padding: 10px 15px;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
  color: #222;
}

.description {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
  white-space: pre-wrap;
}

.author, .added-date {
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.gallery-box_content-rating p {
  margin: 10px 0 6px 0;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.stars {
  direction: rtl;
  unicode-bidi: bidi-override;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}

.stars span {
  color: lightgray;
  display: inline-block;
  transition: color 0.2s;
  margin: 0 3px;
}

.stars span:hover,
.stars span.hover,
.stars span.selected {
  color: gold;
}

.gallery-box_content-like {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #555;
}

.like-button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  transition: color 0.3s;
  color: #777;
}

.like-button.liked {
  color: #e74c3c;
}

.like-button:hover {
  color: #e74c3c;
}

.like-count {
  user-select: none;
}
.average-rating {
  font-size: 14px;
  color: #666;
  margin-top: 6px;
}













#users-galerry .pagination {
	display: block;
	margin: 0 auto;
}

#users-galerry .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #ffa500;
  border-color: #ffa500;
}

#users-galerry {
	background: #fafafa;
	padding: 30px 0;
	margin: 40px 0;
}
#users-galerry h1 {
text-align: center; color: #808080; border-bottom: #dddddd 5px solid; padding-bottom: 20px;
	margin-top: 0;
	margin-bottom: 20px;
}

.user-gallery {
	background: #ffffff;
	border: #dddddd 1px solid;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}
.user-gallery_avatar {
	width: 200px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

.user-gallery_avatar img {
	border: #dddddd 5px solid;
	border-radius: 50%;
	width: 200px;
	height: 200px;
overflow: hidden;
position: relative;
transition: transform 0.3s ease;
}
.user-gallery_avatar img:hover {
	transform: scale(1.2); /* powiększenie ze wszystkich stron */
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	z-index: 10;
}
.user-gallery_description {
	text-align: center;
	color: #3b4345;
}
.user-gallery_description h3 {
	color: #1e90ff;
	margin-top: 10px;
}
.user-gallery_description p {
	font-size: 12px;
	margin-bottom: 10px;
}
.user-gallery_description a,
.user-gallery_description a:hover {
	background: #ffa500;
	display: block;
	font-weight: 700;
	border-radius: 4px;
	color: #ffffff;
	padding: 10px 15px;
}



.wbb-box {
display: flex;
  justify-content: center;
  background: #ffffff;
  position: relative;
height: 100%;
  flex-direction: row;
}

.wbb-box_content {
width: 100%;
  overflow: hidden;
  position: relative;
}
.wbb-box_content-image {
  position: relative;
  height: 100%;
}
.wbb-box_content-image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.2);
  opacity: 0;
  transition: linear .2s;
}
.wbb-box_content-description {
background: #ffffff;
  line-height: 1.17;
  position: absolute;
  left: 0;
  width: 80%;
	padding: 0 10px 10px;
  height: auto;
  bottom: 0px;
}
.wbb-box_content-description a {
text-decoration: none;
font-weight: 700;
color: #fd7700;
}
.wbb-box_content-description h2 {
font-size: 40px;
padding: 3px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wbb-box_content-description p {
overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wbb-box_content-info {
}

.article-header h1 {
font-size: 36px;}
.article-content_image {
  font-size: 12px;
  font-weight: 700;
  color: #757575;
  border-bottom: 1px solid #d8d8d8;
	padding: 20px 0;

}
.article-content_item p {
	font-size: 24px;
}





/* ================================================= */

#register {
	width: 100%;
	padding: 30px 0;
	margin-top: 20px;
	margin-bottom: 20px;
}

#register h {
	color: #808080;
	margin-top: 0;
	margin-bottom: 20px;
}

.panel.panel-default .panel-heading:first-child {background: #5d5d5d; color:#ddd}

.mod-page {
	background: #343434;
	border-radius: 15px;
	padding: 20px;
}

.mod-page .mod-page_header {
	display: flex;
	font-weight: bold;
	font-size: 18px;
	border-radius: 3px;
	color: #ffffff;
	padding: 10px 15px;
}

.mod-page .mod-page_header.steam {
	background: #171A21;
}

.mod-page .mod-page_header.no-steam {
	background: #fd7700;
}

.mod-page_header-icon {
	width: 26px;
	height: 26px;
}
.mod-page_header-title {

}

.mod-page .mod-page_content {
	padding: 15px;
}
    .mod {
      background-color: #ffffff;
		display: flex;
      padding: 10px 15px;
      margin-bottom: 8px;
      border-radius: 8px;
      border-left: 5px solid #343434;
      border-right: 5px solid #343434;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mod-title {
      font-weight: bold;
      color: #333;
    }

    .mod a {
margin-left: auto;
margin-right: 10px;
      color: #1e90ff; margin-top: 3px;
      text-decoration: none;
    }

    .mod a:hover {
      text-decoration: underline;
    }
    .status {
      display: inline-block;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: bold;
		margin-right: 10px;
      border-radius: 5px;
      color: white;
    }

    .status.new {
      background-color: #2ecc71; /* zielony */
    }

    .status.update {
      background-color: #f39c12; /* pomarańczowy */
    }

    .status.removed {
      background-color: #e74c3c; /* czerwony */
    }

.mods {
	background: #ffffff;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 8px;
}
.mods-name {
	background: #5d5d5d;
	color: #dddddd;
	width: 80%;
	padding: 10px 15px;
}
.mods-status {
	background: #5cb85c;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
	width: 10%;
	padding: 10px 15px;
}

.mods-buy {
	width: 10%;
}

.mods-buy a {
	background: #fd7700;
	display: block;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
	width: 100%;
	padding: 10px 15px;
}

@media (max-width: 768px) {
  .mods {
    flex-direction: column;
  }

  .mods-name,
  .mods-status,
  .mods-buy {
    width: 100%;
  }
}

.mod-item {
	margin-bottom: 15px;
}

.mod-item_header {
	background: #d9d9d9;
	text-align: center;
	overflow: hidden;
	position: relative;
	height: 203px;
}

.mod-item_header img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	max-height: 100%;
	margin: auto;
}

.mod-item_content {
	background: #e6e4e3;
	font-size: 13px;
	color: #252525;
	padding: 20px;
}