* {
    margin: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* container under header */
.container {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

/* upper picture */
.Header {
  text-align: center;
  background-size: cover;
  background-position: center;
  height: 200px;
  background: url('static/IMG/blue-car.png') center/cover no-repeat ;
}

/* ====== search, filtrs, sort buttons, login ====== */

.header {
  text-align: center;
}

.js-videos {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

/* upper line – search + login */
.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 10px 10px;
}

/* search box */
.search-container {
  width: 100%;
  margin-top: 8px;
}

.search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
}

/* login button */
.login-btn {
  font-size: 14px;
  padding: 6px 10px;
  align-self: flex-end;
  margin-right: 0;
  margin-top: 4px;
}

/* second line – filtr buttons + sort */

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
}

.filter-btn {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 5px;
  border: none;
  background-color: #f3f3f5;
  cursor: pointer;
}

.filter-btn:hover {
  background-color: rgba(59, 53, 56, 1);
  color: white;
}

/* sort (select + rows) */
.sort-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  margin-right: 0;
  transition: none;
}

.sort-items {
  padding: 4px 6px;
  border-radius: 5px;
  border: none;
  background-color: #f3f3f5;
}

.sort-order-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.sort-order-btn img {
  width: 18px;
  height: 18px;
}

/* ====== card videos – layout ass Youtebe window ====== */

.video-card-info {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border-radius: 10px;
}

.video-card-info:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
}

/* left side – video */
.video-thumbnail {
  flex: 0 0 40%;
}

.video-thumbnail .video {
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px; 
  display: block;
}

/* right side – text */
.video-content {
  flex: 1;
  padding: 8px;
}

.video-card-info h3 {
  margin: 0 0 4px;
  font-size: 14px;
  text-align: left;
}

.video-description {
  margin: 0 0 6px;
  font-size: 12px;
  text-align: left;
}

/* ====== TAGS ====== */

.video-category,
.video-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 4px;
  gap: 4px;
}

.video-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f3f3f5;
}

/* ====== META  information (views, author, rating) ====== */

.video-meta {
  margin-top: 4px;
  padding: 0;
  display: block;
}

.upload-date,
.views {
  display: inline-block;
  font-size: 10px;
  color: black;
  margin-right: 6px;
}

.author {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-align: left;
  color: black;
}

.average-rating {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
}

/* ====== star RATING ====== */

.rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
  margin-top: 4px;
}

.rating-input input {
  display: none;
}

.rating-input label {
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

/* star color */
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: #f5b301;
}