/*============movie section title=========*/
.fb-mv-section-title{
color: #ffffff; 
font-weight: 700;
font-size: 24px; 
margin-bottom: 16px;
}

/*============divider=========*/
.fb-divider-container {
display: flex;   
align-items: center; 
margin-top: 56px;   
margin-bottom: 56px;
}

.fb-divider-line {
flex: 1;
height: 1px; 
background: linear-gradient(
to right,
transparent,
#4b5563,  
transparent
);        
}

/*============new movie grid=========*/
.fb-new-movie-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.fb-new-movie-card {
background-color: #17202e;
border: 1px solid #374151; 
border-radius: 8px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
width: 100%;
height: 100%;
}

.fb-new-movie-card:hover {
border-color: #4b5563; 
transform: scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
border: 1px solid #e84d67;
}

.fb-new-movie-card__img{
width: 100%;
aspect-ratio: 9 / 16;
transition: transform 0.3s ease;
}

.fb-new-movie-card__img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.fb-new-movie-card:hover .fb-new-movie-card__img{
transform: scale(1.05);
}

.fb-new-movie-card .fb-new-movie-card__content {
padding: 12px;
}

.fb-new-movie-card h3 {
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}

.fb-new-movie-card:hover h3 {
color: #e84d67;
}

/*============movies container=========*/

/*============movies container - toggle=========*/

.fb-mv-toggle-container {
display: flex;
gap: 4px;
background-color: #111827;
border-radius: 8px;
padding: 4px;
margin-bottom: 16px;
}

.fb-mv-toggle-button {
flex: 1;
padding: 12px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
background: transparent;
color: #9ca3af;
cursor: pointer;
border: none;
}

.fb-mv-toggle-button.active {
background-color: #e84d67;
color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.fb-mv-toggle-button:hover {
background-color: #1f2937;
color: #ffffff;
}

.fb-mv-toggle-button.active:hover{
background-color: #e84d67;
color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/*============movies container - search=========*/

.fb-mv-search {
position: relative;
margin-bottom: 16px; 
}

.fb-mv-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #9ca3af;
pointer-events: none;
}

.fb-mv-search-input {
width: 100% ;
padding-left: 40px; 
padding-right: 16px ;
padding-top: 12px ; 
padding-bottom: 12px ;

background: #111827 ;
color: #ffffff ;
border-radius: 8px ;
border: 1px solid #4b5563 ; 

outline: none ;
transition: border-color 0.3s ease, box-shadow 0.3s ease ;

font-size: 14px ;
}

.fb-mv-search-input:focus {
border-color: #e84d67 ;
box-shadow: 0 0 0 2px rgba(232, 77, 103, 0.2) ;
}

/*============movies container - filter by lang=========*/
.filter-by-movie-lang{
display: flex;
gap: 10px;
}

.mv-lang-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid var(--inactive-border);
background: var(--inactive-bg);
color: var(--inactive-color);
white-space: nowrap;
transition: all 0.2s ease;
/* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);  */
cursor: pointer;
font-size: 14px;
font-weight: 500;
}

.mv-lang-item:hover {
background: #1f2937;
border-color: #6b7280;
color: #FFFFFF;
}

.mv-lang-item.active {
background: var(--active-bg);
border-color: var(--active-border);
color: var(--active-color);
}

/*============movies container - movie card container=========*/

.fb-movie-card-container{
display: grid;
grid-template-columns: repeat(2, 1fr); 
gap: 24px;
padding: 24px 0px;
}

/*=========movies container - movie card container - card=========*/
.fb-movie-card {
background: #17202e;
border: 1px solid #374151;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
width: 100%;
height: auto;
}

.fb-movie-card:hover {
border-color: #e84d67;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.fb-movie-card-inner {
display: flex;
}

/*=====movie card poster=======*/
.fb-movie-poster {
position: relative;
width: 128px;
height: 192px;
}

.fb-movie-poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.fb-movie-card:hover .fb-movie-poster img {
transform: scale(1.05);
}

.fb-movie-badge {
position: absolute;
top: 8px;
left: 8px;
background: #e84d67;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/*====movie card details====*/
.fb-movie-details {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
}

.fb-movie-title {
font-size: 20px;
font-weight: bold;
color: #fff;
transition: color 0.3s ease;

display: -webkit-box;  
-webkit-line-clamp: 1; 
-webkit-box-orient: vertical;
overflow: hidden;   
text-overflow: ellipsis;
}

.fb-movie-card:hover .fb-movie-title {
color: #e84d67;
}

.fb-movie-rels-date,
.fb-movie-cast{
display: flex;
align-items: center;
gap: 8px;
color: #d1d5db;
font-size: 14px;
line-height: 1.4;
}

.fb-movie-cast p{
color: #d1d5db;
font-size: 14px;
line-height: 1.4;

display: -webkit-box;
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;
overflow: hidden;  
text-overflow: ellipsis;
}

.fb-movie-rating {
display: flex;
align-items: center;
gap: 8px;
}

.fb-movie-rating .fb-movie-stars {
display: flex;
gap: 3px;
}

/*===empty star===*/
.fb-movie-star.fb-movie-star-empty{
width: 14px;
height: 14px;
color: #4B5563;
fill:  transparent;
}

/*===fill star===*/
.fb-movie-star.fb-movie-star-filled{
width: 14px;
height: 14px;
color: #facc15;
fill:  #facc15;
}

/*===faded star===*/
.fb-movie-star.fb-movie-star-half{
width: 14px;
height: 14px;
color: #facc15;
fill:  #facc15;
opacity: 0.5;
}

.fb-movie-rating .fb-movie-rating-score {
color: #fff;
font-size: 14px;
font-weight: 600;
}

/*============celebs grid=========*/
.fb-mv-celebs-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 24px 0px;
}

.celebrity-image-container{
aspect-ratio: 3 / 4 !important;
height: auto !important;
}

.celebrity-card:hover {
background: #1f2937;
border-color: #4b5563;
border-color: #e84d67;
}

/*============movie common card grid - latest new, photos, review, to listing=========*/
.fb-mv-common-card-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 24px 0px;
}


.fb-mv-common-card {
background: #111827;
border-radius: 8px;
overflow: hidden;
border: 1px solid #374151;
transition: all 0.3s ease;
}

.fb-mv-common-card:hover {
background: #1f2937;
border-color: #e84d67;
}

.fb-mv-common-card-image-wrapper{
position: relative;
}

.fb-mv-common-card-image{
width: 100%;
aspect-ratio: 16 / 9;
transition: transform 0.3s ease;
}

.fb-mv-common-card-image img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.fb-mv-common-card:hover .fb-mv-common-card-image {
transform: scale(1.05);
}

.fb-mv-common-card-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}

.fb-mv-common-card:hover .fb-mv-common-card-gradient {
opacity: 1;
}

.fb-mv-common-card-content {
padding: 16px;
}

.fb-mv-common-card-title {
color: #ffffff;
font-weight: 600;
font-size: 14px;
line-height: 1.4;

display: -webkit-box;
-webkit-line-clamp: 2; /* clamp to 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

transition: color 0.3s ease;
}

.fb-mv-common-card:hover .fb-mv-common-card-title {
color: #e84d67;
}

/*===videos - single video===*/
.fb-mv-single-video-container{
padding: 24px 0px;
}

.fb-mv-single-video{
position: relative;
overflow: hidden;
border-radius: 8px;
}

.fb-mv-single-video-img{
width: 100%;
aspect-ratio: 16 / 9; 
transition: transform 0.3s ease;
z-index: 1;
}

.fb-mv-single-video-img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.fb-mv-single-video:hover .fb-mv-single-video-img{
transform: scale(1.05);
}

/* Overlay */
.fb-mv-single-video-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
z-index: 2;

}

.fb-mv-single-video:hover .fb-mv-single-video-overlay {
background-color: rgba(0,0,0,0.3);
}

/* Play button */

.fb-mv-single-video-play {
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
width: 80px;
height: 80px;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}

.fb-mv-single-video:hover .fb-mv-single-video-play {
background-color: rgba(255,255,255,0.3);
}

/*video content*/

.fb-mv-single-video-content {
position: absolute;
bottom: 16px;
left: 16px;
color: #ffffff;
z-index: 3;
}

.fb-mv-single-video-title{
font-size: 20px;
font-weight: bold;
margin-bottom: 4px;
}

.fb-mv-single-video-subtitle {
font-size: 14px;
opacity: 0.9;
}

/*===videos - video grid===*/
.fb-mv-video-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.fb-mv-video{
position: relative;
overflow: hidden;
border-radius: 8px;
}

.fb-mv-video-img{
width: 100%;
aspect-ratio: 16 / 9; 
transition: transform 0.3s ease;
z-index: 1;
}

.fb-mv-video-img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.fb-mv-video:hover .fb-mv-video-img{
transform: scale(1.05);
}

/* Overlay */
.fb-mv-video-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
z-index: 2;

}

.fb-mv-video:hover .fb-mv-video-overlay {
background-color: rgba(0,0,0,0.3);
}

/* Play button */

.fb-mv-video-play {
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
width: 40px;
height: 40px;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}

.fb-mv-video:hover .fb-mv-video-play {
background-color: rgba(255,255,255,0.3);
}

/*video content*/

.fb-mv-video-content {
position: absolute;
bottom: 16px;
left: 16px;
color: #ffffff;
z-index: 3;
}

.fb-mv-video-title{
font-size: 14px;
font-weight: bold;
margin-bottom: 4px;
}

.fb-mv-video-subtitle {
font-size: 12px;
opacity: 0.9;
}