@import url('https://www.youtube.com/s/player/2d24ba15/www-player.css');

/* Your custom styles */
.ytp-chrome-top.ytp-show-cards-title {
  position: relative !important;
  top: 232px !important;
}

/* Youtube Shorts */
.custom_youtube_shorts_gallery {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
   max-width: 100%;
   margin: 0 auto;
   padding: 10px;
}

.custom_shorts_youtube_video {
   position: relative;
   flex-basis: calc(16.66% - 15px); /* 16.66% ensures 6 items per row */
   max-width: calc(16.66% - 15px);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s, box-shadow 0.3s;
   height: 350px;
}

.custom_shorts_youtube_video:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.custom_shorts_youtube_video img {
   width: 100%;
   height: auto;
   border-radius: 8px;
   height: 235px;
}

.custom_shorts_youtube_video p {
   text-align: center;
   font-size: 14px;
   margin-top: 5px;
   color: #333;
   font-weight: bold;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.custom_shorts_youtube_video a {
   text-decoration: none;
   color: inherit;
}

.custom_shorts_youtube_video a:hover p {
   color: #ff0000;
}

/* .custom_shorts_youtube_video iframe .ytp-chrome-top .ytp-show-cards-title{
	top: 232px !important;
}

body .ytp-chrome-top.ytp-show-cards-title {
  position: relative !important;
  top: 232px !important;
} */



/* Default Grid Layout */
.custom_youtube_shorts_gallery.grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
   gap: 20px;
}
.custom_youtube_shorts_gallery.grid .custom_shorts_youtube_video{
   max-width: calc(100% - 15px);
}


/* List Layout */
.custom_youtube_shorts_gallery.list {
   display: block;
}

.custom_youtube_shorts_gallery.list .custom_shorts_youtube_video {
   margin-bottom: 20px;
}

.custom_youtube_shorts_gallery.list .html5-video-player .ytp-chrome-top .ytp-show-cards-title{
   top: 232px !important;
}
.custom_youtube_shorts_gallery.list .ytp-shorts-mode .ytp-chrome-top{
   top: 232px !important;
   position: relative !important; 
}

/* Masonry Layout */
.custom_youtube_shorts_gallery.masonry {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.custom_youtube_shorts_gallery.masonry .custom_shorts_youtube_video {
   width: 30%;
   margin-bottom: 20px;
}

/* Video container styling */
.custom_shorts_youtube_video {
   text-align: center;
}

.custom_shorts_youtube_video iframe {
   margin: 0 auto;
}

.custom_shorts_youtube_video p {
   margin-top: 10px;
   font-size: 14px;
   color: #333;
}



body .custom_shorts_youtube_video.title-position-top p {
   position: absolute !important;
   top: 10px !important;
   left: 0 !important;
   width: 100% !important;
   text-align: center !important;
}

body .custom_shorts_youtube_video.title-position-bottom p {
   position: absolute !important;
   bottom: 10px !important;
   left: 0 !important;
   width: 100% !important;
   text-align: center !important;
}

body .custom_shorts_youtube_video.title-position-hide p {
   display: none !important;
}



body.light .custom_shorts_youtube_video {
   background-color: #fff;
   color: #000;
}

body.dark .custom_shorts_youtube_video {
   background-color: #000;
   color: #fff;
}

.theme-toggle {
   margin-bottom: 20px;
}

.theme-toggle label {
   cursor: pointer;
}