:root{
/*====================AD=================*/
--ad-primary-bg-color: #17202e;
--fb-border: #4b5563;
/*=========================BRAND COLOR=======================*/
--brand-color: #e84d67;

/*=========================BACKGROUND COLOR=======================*/
--primary-bg: #111827;
--sec-bg: #17202e;
--card-bg: #17202e;

/*=========================TEXT COLOR=======================*/

--text-heading: #FFFFFF;
--primary-text-color: #9CA3AF;
--sec-text-color: #d1d5db;
--white-color: #FFFFFF;


/*=========================MOVIE CARD RATING BOX=======================*/
--movie-card-rating-box-bg: #161920;
--movie-card-rating-box-border: #383c43;
--movie-card-rating-box-color: #FFFFFF;

/*=========================ACTIVE AND INACTIVE=======================*/
--active-bg: #e84d67;
--active-border: #e84d67;
--active-color: #FFFFFF;

--inactive-bg: #17202e;
--inactive-border: #4b5563;
--inactive-color: #9ca3af;

/*=========================SLIDER NAV BG=======================*/
--slider-nav-bg: #111827;
--slider-nav-border: #4b5563;
--slider-nav-color: #9ca3af;
}


body{
font-family: Arial, Helvetica, sans-serif;
background: var(--primary-bg);
}


/*
****GENERAL COMMON STYLE START****
*/


/*===========AD CENTER========*/

.top-ad-container {
width: 100%;
max-width: 1080px;
height: 250px;
margin:  40px auto;
background: var(--ad-primary-bg-color);
border: 1px solid var(--fb-border); 
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.3s ease;
}

.top-ad-container:hover {
border-color: #4b5563cc; 
}

.top-ad-content{
text-align: center;
}

.top-ad-content h3 {
font-size: 1.5rem;
font-weight: bold;
color: #9ca3af; 
margin-bottom: 0.5rem;
}

.top-ad-content p {
font-size: 0.875rem;
color: #6b7280; 
}

.ad-size {
margin-top: 1rem;
font-size: 0.75rem;
color: #4b5563; 
}

/*===========AD RIGHT========*/

.right-ad-container {
background: var(--ad-primary-bg-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--fb-border); /* border-gray-700 */
width: 300px;
height: 600px;
transition: border-color 0.2s ease;
margin-bottom: 32px;
}

.right-ad-container:hover {
border-color: #4b5563; /* hover:border-gray-600 */
}

.right-ad-content{
text-align: center;
}

.right-ad-title {
font-size: 1.5rem;
font-weight: bold;
color: #9ca3af; 
margin-bottom: 0.5rem;
}

.right-ad-subtitle {
font-size: 0.875rem;
color: #6b7280; 
}

/*================COMMON LEFT BUTTON=================*/
.fb-left-common-btn-wrapper{
margin-top: 24px;
text-align: center;
}

.fb-left-common-btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;  
border-radius: 8px;  
font-size: 14px; 
font-weight: 500;   
transition: all 200ms ease; 
border: 1px solid var(--brand-color);
background: var(--brand-color);
color: #FFFFFF;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05); 
cursor: pointer;
}

.fb-left-common-btn:hover {
background: #e84d67cc; 
}


/*======================FB SUB NAV===================*/
.fb-sub-nav-wrapper {
border-top: 1px solid #374151; 
}

.fb-sub-nav-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}

.fb-sub-nav{
display: flex;
align-items: center;
padding: 12px 0px;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
}

.fb-sub-nav::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}

.fb-sub-nav-links {
display: flex;
align-items: center;
gap: 24px; /* space-x-6 */
min-width: max-content;
}

/* Links */
.fb-sub-nav-links a {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
color: #9ca3af;
text-decoration: none;
transition: color 0.2s ease;
padding: 0 8px;
padding-bottom: 4px;

}

.fb-sub-nav-links a:hover {
color: #ffffff;
}

.fb-sub-nav-links a.active {
color: #e84d67;
border-bottom: 2px solid #e84d67;
}

.fb-sub-nav-links a.active:hover {
color: rgba(232, 77, 103, 0.8);
}

/*===========BREADCRUMBS===========*/

.breadcrumbs{
display: flex;
align-items: center;
gap: 8px;
padding: 16px 0px;
margin-bottom: 20px;
}

.breadcrumbs a{
color: #9CA3AF; 
transition: color 0.2s ease; 
font-size: 14px;
line-height: 20px;
font-weight: 500;
}

.breadcrumbs span{
margin-top: 2px;
}

.breadcrumbs a:hover{
color: #FFFFFF;
}


/*===========INTRO SECTION===========*/

.ott-intro-section{
margin-bottom: 32px;
}

.ott-heading{
font-size: 30px;  
font-weight: 700; 
color: var(--text-heading);  
margin-bottom: 8px; 
}

.ott-container {
font-size: 16px; 
line-height: 26px; 
color: #9CA3AF;
margin-bottom: 16px;
}

.read-more-btn{
color: #60A5FA;
font-size: 16px;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}

.read-more-btn:hover {
color: #93C5FD;
}


/*===========STREAMING TOGGLE===========*/

.streaming-toggle {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}

.toggle-btn {
padding: 14px 24px;   
border-radius: 8px;
font-size: 14px;  
font-weight: 500;
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;
border: 1px solid;
}

.toggle-btn:hover {
background: #e84d67e6;
}

.active-btn {
border: 1px solid var(--active-border);
background: var(--active-bg);
color: var(--active-color);
}

.inactive-btn {
background: var(--inactive-bg);
color: var(--inactive-color); 
border: 1px solid var(--inactive-border);  

}

.inactive-btn:hover {
background: #1f2937;
color: #ffffff; 
border-color: #6b7280;  
}

/*===========SELECT PLATFORM SLIDER===========*/
.select-platform-container h3{
margin-bottom: 12px;
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
}

.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--slider-nav-bg);
border: 1px solid var(--slider-nav-border);
color: var(--slider-nav-color);
padding: 8px;
border-radius: 8px;
cursor: pointer;
z-index: 10;
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); /* shadow-lg */
margin-top: -4px;
cursor: pointer;
}

.nav-button:hover {
background: #1f2937;
border-color: #6b7280;
color: #FFFFFF;
}

.nav-left {
left: 0;
display: grid;
place-content: center;
}

.nav-right {
right: 0;
display: grid;
place-content: center;
}

.slider-wrapper {
position: relative;
margin-bottom: 32px;
}

.slider-container{
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 40px;
}

.slider-container::-webkit-scrollbar {
display: none;
}

.slider-track {
display: flex;
gap: 12px;
padding-bottom: 8px;
min-width: max-content;
}

.slider-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;
}

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

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

/*===========MORE FILTERS===========*/

/*================FILTER BUTTON================*/
.filter-button-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px; 
}

.filter-button {
padding: 12px 24px; 
border-radius: 8px;
font-size: 14px; 
font-weight: 500; 
transition: all 200ms ease;
border: 1px solid var(--inactive-border); 
background: var(--inactive-bg); 
color: var(--inactive-color); 
cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}

.filter-button:hover {
background: #1f2937; 
color: #FFFFFF; 
border-color: #6b7280; 
}

.filter-container{
margin-bottom: 24px; 
padding: 16px;
background: var(--inactive-bg); 
border-radius: 8px;
border: 1px solid var(--inactive-border); 
display: none;
}

.filter-container.filter-container__active{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; 
}

.filter-item {
display: flex;
flex-direction: column;
position: relative;
}

.filter-label{
color: var(--white-color);
margin-bottom: 8px;
display: block;
font-size: 16px;
font-weight: 700;
}

.filter-dropdown{
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border: 1px solid #4b5563; 
border-radius: 8px;  
background: #111827; 
padding: 12px 16px;
color: #FFFFFF; 
}

.filter-select{
color: #FFFFFF; 
font-size: 16px;
text-transform: capitalize;
}

.filter-arrow{
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}

.filter-arrow.rotate{
transform: rotate(180deg);
}

.filter-options{
background: #111827; 
color: #FFFFFF; 
border: 1px solid #4b5563; 
border-radius: 8px;  
padding: 4px;
margin-top: 4px;
z-index: 10;
max-height: 200px;
overflow-y: auto;
transition: border 0.2s ease;
transition: background 0.2s;
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
-ms-overflow-style: none;  
scrollbar-width: none; 
}

.filter-options::-webkit-scrollbar {
display: none;
}

.filter-options li{
padding: 12px 16px;
list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}


.filter-options li:hover {
background: #374151;
border-radius: 5px;
}


.filter-options input[type="checkbox"] {
  appearance: none;  
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #4b5563;  
  border-radius: 4px; 
  background: transparent;
  cursor: pointer;
  position: relative;
}

.filter-options input[type="checkbox"]:checked {
  background-color: #E91A42; 
  border-color: #E91A42;
}

.filter-options input[type="checkbox"]:checked::after {
  content: "✔";
  color: white;
  font-size: 10px;
  position: absolute;
  top: -2px;
  left: 2px;
}


.filter-options label {
color: #FFFFFF;
font-size: 16px;
text-transform: capitalize;
cursor: pointer;
}


/* Show dropdown */
.filter-item.open .filter-options {
display: block;
}

.filter-select__active{
border: 1px solid var(--brand-color);
}

/*
***CARDS STYLE****
*/


/*=========MOVIE CARDS WRAPPER============*/
.movie-cards-wrapper{
margin-bottom: 32px;
}

.movie-cards-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.movie-card {
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100%;
height: 100%;
}

.movie-card_image{
position: relative;
}

.movie-card:hover {
transform: scale(1.02);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.movie-card img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}

.movie-card__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.movie-card:hover .movie-card__overlay {
background: rgba(0, 0, 0, 0.5);
}

.movie-card__play-btn {
background: var(--brand-color);
border-radius: 50%;
width: 40px;
height: 40px;
transform: scale(0);
transition: all 300ms ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
color: #FFFFFF;
}

.movie-card__play-btn svg {
width: 20px;
height: 20px;
display: block;
}

.movie-card__play-btn:hover{
background: rgba(232, 77, 103, 0.8);
}

.movie-card:hover .movie-card__play-btn {
transform: scale(1);
}

.movie-card__badge {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.8);
color: #FFFFFF;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}

.movie-card_content {
padding: 12px;
}

.movie-card_title {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.movie-card_rating,
.movie-card_genre,
.movie-card_date,
.movie-card_duration {
color: #cbd5e1;
font-size: 12px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
}

.movie-card_rating-box {
background: #161920;
border: 1px solid #383c43;
color: #FFFFFF;
padding: 4px 8px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 13px;
}

.movie-card_button {
width: 100%;
background: #111827;
border: 1px solid #4b5563;
color: #FFFFFF;
padding: 8px;
border-radius: 8px;
text-align: center;
font-size: 12px;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
margin-top: 4px;
}

.movie-card_button:hover {
background: #1f2937;
border-color: #6b7280;
}

/*==================MOVIE DETAIL CONTAINER================*/

.movie-detail-container {
margin-bottom: 32px;
background: #17202e;
border: 1px solid #374151;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
}

.movie-detail-container:hover {
border-color: #4b5563;
}

.movie-detail-inner {
display: flex;
}

.movie-detail__image {
position: relative;
width: 280px;
}

.movie-image {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 5;
}

.movie-detail__img-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}

.movie-detail__image:hover .movie-detail__img-overlay {
background: rgba(0, 0, 0, 0.5);
}

.movie-detail__play-btn {
background: var(--brand-color);
color: #FFFFFF;
padding: 12px;
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
width: 48px;
height: 48px;
}

.movie-detail__play-btn:hover{
background: rgba(232, 77, 103, 0.8);
}

.movie-detail__image:hover .movie-detail__play-btn {
transform: scale(1);
}

.movie-detail__rating {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.8);
padding: 4px 12px;
border-radius: 8px;
display: flex;
align-items: center;
color: #FFFFFF;
gap: 6px;
backdrop-filter: blur(4px);
font-size: 14px;
font-weight: bold;
}

.movie-detail__content {
flex: 1;
padding: 24px;
display: flex;
flex-direction: column;
}

.movie-detail__title {
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 12px;
}

.movie-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 16px;
}

.movie-detail__label {
color: #9ca3af;
font-size: 14px;
margin-bottom: 4px;
}

.movie-detail__value {
color: #FFFFFF;
font-weight: 500;
font-size: 16px;
}

.icon-text {
display: flex;
align-items: center;
gap: 6px;
}

.movie-description {
color: #9ca3af;
line-height: 1.6;
font-size: 16px;
margin-bottom: 16px;
flex: 1;
}

.movie-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.share-button {
background: var(--brand-color);
color: #FFFFFF;
/* padding: 12px; */
border-radius: 10px;
border: none;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s ease;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}

.share-button:hover {
background: rgba(232, 77, 103, 0.8);
transform: scale(1.05);
}

.watch-button {
background: #111827;
color: #FFFFFF;
padding: 8px 24px;
border-radius: 10px;
border: 1px solid #4b5563;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}

.watch-button:hover {
background: #1f2937;
border-color: #6b7280;
}

/*==================MOVIE TAB CONTAINER================*/
.movie-tab-container {
background: #17202e;
border: 1px solid #374151;
border-radius: 8px;
margin-bottom: 32px;
}

.movie-tab__header{
border-bottom: 1px solid #374151;

}

.movie-tab-button {
padding: 16px 24px;
font-size: 14px;
font-weight: 500;
color: #9ca3af;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}

.movie-tab-button:hover {
color: #FFFFFF;
border-color: #4b5563;
}

.movie-tab-button.active {
color: var(--brand-color);
background: rgba(232, 77, 103, 0.05);
border-color: var(--brand-color);
}

.movie-tab__content-wrapper{
padding: 24px;
}

.section-title {
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 24px;
}

/*==================MOVIE TAB CONTAINER - OVERVIEW================*/
.overview-paragraph {
color: #d1d5db;
line-height: 1.6;
margin-bottom: 16px;
}

.overview-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.details-section {
display: flex;
flex-direction: column;
gap: 8px;
}

.details-title {
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 12px;
}

.details-item {
display: flex;
justify-content: space-between;
}

.details-label {
color: #9ca3af;
font-size: 16px;
}

.details-value {
color: #FFFFFF;
font-size: 16px;
}

.details-status {
color: #34d399; /* green-400 */
font-size: 16px;
}

/*==================MOVIE TAB CONTAINER - CAST GRID================*/

.cast-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.cast-card {
background: #111827;
border-radius: 8px;
overflow: hidden;
transition: background-color 0.3s;
width: 100%;
height: 100%;
}

.cast-card:hover {
background: #1f2937;
}

/*===============only in overview page============*/
.overview-cast-card{
background-color: #17202e;
border-radius: 8px;   
overflow: hidden;
border: 1px solid #374151; 
transition: background-color 150ms ease-in-out;
width: 100%;
height: 100%;
}

.overview-cast-card:hover{
background: #1f2937;  
}

.overview-cast-card:hover .cast-image {
transform: scale(1.05);
}

.cast-image {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
transition: transform 0.3s ease;
}

.cast-card:hover .cast-image {
transform: scale(1.05);
}

.cast-info {
padding: 12px;
}

.cast-name {
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 4px;
line-height: 22px;
}

.cast-role {
font-size: 12px;
color: #9ca3af;
margin-bottom: 4px;
}

.cast-character {
font-size: 12px;
color: var(--brand-color);
}

.crew-info {
margin-top: 32px;
}

.crew-table {
background: #111827;
border: 1px solid #374151;
border-radius: 8px;
overflow: hidden;
}

.crew-table table {
width: 100%;
border-collapse: collapse;
}

.crew-table td {
padding: 16px 24px;
border-bottom: 1px solid #374151;
font-size: 16px;
line-height: 1.6;
text-transform: capitalize;
}

.crew-table tr:last-child td {
border-bottom: none;
}

.crew-table td:first-child {
color: #9ca3af;
font-weight: 500;
border-right: 1px solid #374151;
}

.crew-table td:last-child {
color: #FFFFFF;
}

/*==================MOVIE TAB CONTAINER - STORY================*/
.story-content {
display: flex;
flex-direction: column;
gap: 16px;
}

.story-content p {
color: #d1d5db;
font-size: 16px;
line-height: 1.6;
}

.highlight {
color: #FFFFFF;
}

.theme-box {
background: #111827;
border-left: 4px solid var(--brand-color);
padding: 16px;
border-radius: 8px;
margin-top: 8px;
}

.theme-title {
color: #FFFFFF;
font-weight: 600;
margin-bottom: 8px;
font-size: 16px;
}

.theme-text {
color: #d1d5db;
font-size: 14px;
margin: 0;
}

/*==================MOVIE TAB CONTAINER - OTT================*/
.ott-table-container {
background: #111827;
border: 1px solid #374151;
border-radius: 8px;
overflow: hidden;
}

.ott-table {
width: 100%;
border-collapse: collapse;
}

.ott-table tr {
border-bottom: 1px solid #374151;
}

.ott-table tr:last-child {
border-bottom: none;
}

.ott-table td {
padding: 16px 24px;
vertical-align: top;
font-size: 16px;
line-height: 24px;
}

.label {
color: #9ca3af;
font-weight: 500;
}

.value {
color: #FFFFFF;
}

/*==================MOVIE TAB CONTAINER - VIDEOS================*/

.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.video-card {
background: #111827;
border-radius: 8px;
overflow: hidden;
transition: background-color 0.3s ease;
position: relative;
width: 100%;
height: 100%;
}

.video-card:hover {
background: #1f2937;
}

.video-thumbnail {
position: relative;
}

.video-thumbnail img {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}

.video-card_overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.video-card:hover .video-card_overlay {
background: rgba(0, 0, 0, 0.5);
}

.video-card_play-btn {
background: var(--brand-color);
color: #FFFFFF;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
transform: scale(0);
transition: transform 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.video-card_play-btn:hover{
background: rgba(232, 77, 103, 0.8);
}

.video-card:hover .video-card_play-btn {
transform: scale(1);
}

.video-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.8);
color: #FFFFFF;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}

.video-info {
padding: 12px;
}

.video-title {
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}

.video-views {
color: #9ca3af;
font-size: 12px;
}

/*==================MOVIE TAB CONTAINER - REVIEW================*/
.review-summary {
background: #111827;
border: 1px solid #374151;
border-radius: 8px;
padding: 24px;
margin-bottom: 16px;
}

.summary-header h4 {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
}

.summary-header p {
color: #9ca3af;
font-size: 14px;
margin-top: 4px;
}

.summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 16px;
}

.rating-item .rating-label {
display: flex;
justify-content: space-between;
font-weight: 500;
}

.rating-label span{
color: #FFFFFF;
font-weight: 500;
font-size: 16px;
}

.rating-value {
display: flex;
align-items: center;
gap: 4px;
}

.rating-value span{
color: #FFFFFF;
font-weight: 700;
font-size: 16px;
}

.light {
color: #9ca3af;
font-size: 14px;
}

.bar-bg {
background: #374151;
border-radius: 9999px;
height: 8px;
margin: 10px 0;
}

.bar-fill {
background: #facc15;
height: 8px;
border-radius: 9999px;
}

.bar-description {
color: #9ca3af;
font-size: 14px;
}

.review-footer {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #374151;
display: flex;
justify-content: space-between;
}

.review-footer span{
font-size: 14px;
color: #9ca3af;
}

.link-btn {
color: var(--brand-color);
background: none;
border: none;
font-size: 14px;
cursor: pointer;
transition: color 300ms ease;
}

.link-btn:hover{
color: #e84d67cc;
}

.user-review {
background: #111827;
border: 1px solid #374151;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}

.user-review h4 {
color: #FFFFFF;
font-weight: 600;
}

.review-meta {
margin-top: 10px;
display: flex;
gap: 8px;
align-items: center;
}

.review-meta .white{
font-size: 14px;
color: #FFFFFF;
font-weight: 500;
}

.user-review p {
color: #d1d5db;
margin: 12px 0;
font-size: 16px;
line-height: 26px;
}

.reply-btn{
width: 100%;
color: #9ca3af;
background: none;
border: none;
cursor: pointer;
transition: color 300ms ease;
display: flex;
justify-content: flex-end;
}

.reply-btn:hover{
color: var(--brand-color);
}

.review-button {
margin-top: 24px;
}

.submit-review {
background: var(--brand-color);
color: #FFFFFF;
padding: 8px 24px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background 300ms ease;
}

.submit-review:hover{
background: #e84d67e6;
}

/*==================MOVIE TAB CONTAINER - FAN GRID================*/
.fan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.fan-photo-item {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
width: 100%;
height: 100%;
}

.fan-photo-item img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}

.fan-photo-item:hover img {
transform: scale(1.05);
}

.fan-photo__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
border-radius: 8px;
transition: background-color 0.3s ease;
}

.fan-photo-item:hover .fan-photo__overlay {
background: rgba(0, 0, 0, 0.3);
}

/*
================WHOLE OVERVIEW PAGE========================
*/

/*================TRAILOR VIDEO CONTAINER================*/
.trailer-container {
margin: 32px 0px;
}

.trailer-image-wrapper {
position: relative;
background: #17202e;
border-radius: 8px;
border: 1px solid #374151; /* approx gray-700 */
overflow: hidden;
}

.trailer-image {
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
display: block;
}

.trailer-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.trailer-overlay:hover {
background: rgba(0, 0, 0, 0.5);
}

.trailer-play-button {
background: var(--brand-color);
color: #FFFFFF;
border-radius: 9999px;
width: 70px;
height: 70px;
transform: scale(1);
transition: transform 0.3s ease, background-color 0.3s ease;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.trailer-overlay:hover .trailer-play-button {
background: rgba(232, 77, 103, 0.8);
transform: scale(1.1);
}

.trailer-time-label {
position: absolute;
bottom: 16px;
right: 16px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
color: #FFFFFF;
padding: 4px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
}

/*================HIGHLIGHT VIDEO CONTAINER================*/

.highlight-video-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}

.highlight-video-card {
background: #17202e;
border-radius: 8px;
overflow: hidden;
border: 1px solid #374151;
transition: background-color 0.3s ease;
width: 100%;
height: 100%;
}

.highlight-video-card:hover {
background: #1f2937;
}

.highlight-video-wrapper {
position: relative;
}

.highlight-video-thumbnail {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
display: block;
}

.highlight-video-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.highlight-video-card:hover .highlight-video-overlay {
background: rgba(0, 0, 0, 0.5);
}

.highlight-video-play-button {
background: var(--brand-color);
color: #FFFFFF;
border-radius: 50%;
width: 40px;
height: 40px;
border: none;
transform: scale(0);
transition: transform 0.3s ease, background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.highlight-video-play-button:hover{
background: rgba(232, 77, 103, 0.8);
}

.highlight-video-card:hover .highlight-video-play-button {
transform: scale(1);
}

/*================REVIEW MAIN CONTAINER================*/
.review-main-container{
margin-bottom: 32px;
}

/*================REVIEW MAIN CONTAINER - MAIN HEADER================*/
.review-main-header{
margin-bottom: 32px;
}

.review-main-header .review-title{
font-size: 30px; /*==font-size: 24px;===*/
font-weight: bold;
color: #FFFFFF;
margin-bottom: 8px;
}

.review-main-header .review-subtitle{
color: #9ca3af; 
}

/*================REVIEW SUBCONTAINER================*/
.review-subcontainer{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}

/*================RATING CONTAINER================*/
.rating-container {
background: #17202e;
border-radius: 8px;
padding: 24px;
border: 1px solid #374151;
margin-bottom: 40px;
}

.rating-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}

.rating-title {
color: #FFFFFF;
font-weight: 600;
font-size: 20px;
margin: 0;
}

.rating-subtitle {
color: #9ca3af;
font-size: 14px;
margin-top: 4px;
}

.rating-score {
text-align: right;
}

.score-value {
display: flex;
align-items: center;
gap: 8px;
}

.score-main {
color: #FFFFFF;
font-weight: bold;
font-size: 24px;
}

.score-outof {
color: #9ca3af;
font-size: 16px;
}

.rating-category {
margin-bottom: 16px;
}

.category-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.category-label {
color: #FFFFFF;
font-weight: 500;
font-size: 16px;
}

.rating-bar {
width: 100%;
height: 8px;
background: #374151;
border-radius: 9999px;
margin: 8px 0;
}

.bar-fill {
height: 8px;
background: #facc15;
border-radius: 9999px;
transition: width 1s ease-out;
}

.category-comment {
color: #9ca3af;
font-size: 14px;
margin: 0;
line-height: 24px;
}

/*================WRITE REVIEW CONTAINER================*/
.write-review-container {
background: #17202e;
border-radius: 8px;
border: 1px solid #374151;
}

.write-review-header{
background: #242a38;
padding: 16px;
}

.write-review-header h3 {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
margin: 0;
}

.write-review-header p {
color: #9ca3af;
font-size: 14px;
margin-top: 4px;
}

.write-review-form {
padding: 24px;
}

.write-review-form-label {
display: block;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}

.write-review-form-input,
.write-review-form-textarea {
width: 100%;
padding: 12px 16px;
background: #111827;
color: #FFFFFF;
border: 1px solid #4b5563;
border-radius: 8px;
outline: none;
font-size: 14px;
margin-bottom: 16px;
box-sizing: border-box;  
}

.write-review-form-textarea {
resize: none;
height: 120px;
}

.rating-stars {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 16px;
}

.rating-stars svg {
cursor: pointer;
transition: fill 0.3s;
}

.rating-stars svg:hover,
.rating-stars svg.active {
fill: #facc15;
}

.rating-note {
color: #9ca3af;
font-size: 14px;
margin-left: 8px;
}

.submit-button {
width: 100%;
background: var(--brand-color);
color: #FFFFFF;
font-weight: 500;
font-size: 14px;
padding: 12px 24px;
border-radius: 8px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.2s;
}

.submit-button:hover {
background: #cc435a;
}

.write-review-disclaimer {
color: #9ca3af;
font-size: 12px;
text-align: center;
margin-top: 16px;
line-height: 1.5;
}

/*================RECENT USER REVIEW CONTAINER================*/
.recent-reviews-container {
background: #17202e;
border-radius: 8px;
border: 1px solid #374151;
overflow: hidden;
/* max-width: 600px; */
}

.recent-reviews-header {
background: #242a38;
padding: 16px;
}

.recent-reviews-header h3 {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
margin: 0;
}

.recent-reviews-scroll {
max-height: 384px; /* 96 x 4 */
overflow-y: auto;
}

.review-item {
padding: 16px;
border-bottom: 1px solid rgba(107, 114, 128, 0.5); 
}

.review-item:last-child{
border-bottom: none;
}

.review-content {
display: flex;
align-items: flex-start;
gap: 12px;
}

.user-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--brand-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.user-icon svg {
color: #FFFFFF;
}

.review-body {
flex: 1;
min-width: 0;
}

.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.review-header h4 {
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
margin: 0;
}

.user-rating {
display: flex;
align-items: center;
gap: 4px;
}

.user-rating svg {
color: #facc15; /* yellow-400 */
}

.user-rating span {
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
}

.review-text {
color: #d1d5db; /* gray-300 */
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
}

.user-review-footer {
display: flex;
justify-content: space-between;
align-items: center;
}

.review-date {
color: #9ca3af;
font-size: 12px;
}


/*=========RIGHT SECTION STYLE STARTS HERE===========*/

/*=========COMMON LIST WRAPPER===========*/
.fb-right-lists-wrapper{
background: #17202e;
border-radius: 8px;
border: 1px solid #374151;
overflow: hidden;
width: 100%;
margin-bottom: 24px;
}

/*=========COMMON LIST WRAPPER - HEADING===========*/

.fb-right-lists__heading{
background: #242a38;
padding:18px 16px;
}

.fb-right-lists__heading h3{
color: #FFFFFF;
font-weight: 700;
font-size: 18px; 
}

/*=========COMMON INNER LIST CONTAINER===========*/
.fb-right-list-container{
overflow-y: auto;
}

/*=========COMMON LIST ITEM===========*/

.list-item {
position: relative;
padding: 12px;
border-bottom: 1px solid #37415180;
cursor: pointer;
transition: background-color 0.3s ease;
}

.list-item:last-child {
border-bottom: none;
}

.list-item:hover {
background: #1f2937;
}

.list-hover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(232, 77, 103, 0.05), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}

.list-item:hover .list-hover-overlay {
opacity: 1;
}

/*=========COMMON LEFT BAR WHILE HOVER===========*/
.side-bar {
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 0;
background: #e84d67;
transition: height 0.3s ease;
}

.list-item:hover .side-bar {
height: 100%;
}


/*=========COMMON RIGHT BUTTON===========*/

.fb-right-lists__button{
padding: 12px;
background: #111827;
border-top: 1px solid #374151;
display: flex;
align-items: center;
justify-content: center;
}

.fb-right-lists__button .ott-common-btn {
    width: 100%;
    color: #fff;
    padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
border: 1px solid #e84d67;
background: #e84d67;
color: #FFFFFF;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05); 
transition: background-color 0.2s ease;
text-align: center;
}

.ott-common-btn:hover {
background: #e84d67e6;
}

/*=========COMMON CUSTOM SCROLLBAR FOR ALL RIGHT BLOCKS===========*/

.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #1f2937;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #e84d67;
border-radius: 2px;
}

/*=========MOVIE LIST FROM UPCOMING MOVIES===========*/
.upcoming-list{
max-height: 384px;
}

.movie-list {
position: relative;
z-index: 10;
}

.movie-list__title {
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
line-height: 1.25;
margin-bottom: 8px;
transition: color 0.3s ease;
}

.list-item:hover .movie-list__title{
color: #e84d67;
}

.movie-list__date {
display: flex;
align-items: center;
gap: 4px;
color: #9ca3af;
font-size: 12px;
transition: color 0.3s ease;
}

.list-item:hover .movie-list__date {
color: #d1d5db;
}

/*==============CELEBS SPOTLIGHT WIDGET================*/

.celebs-list {
padding: 16px;
max-height: 320px;
}

.celebs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.celebrity-card {
background: #111827;
border: 1px solid #374151;
border-radius: 8px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
height: 100%;
}

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

.celebrity-image-container {
position: relative;
width: 100%;
/* height: 160px; */
  aspect-ratio: 3 / 4;
overflow: hidden;
}

.celebrity-image{
width: 100%;
height: 100%;
object-fit: cover;  
display: block;
transition: transform 0.3s ease;
}

.celebrity-card:hover .celebrity-image {
transform: scale(1.05);
}

.image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}

.celebrity-card:hover .image-overlay {
opacity: 1;
}

.celebrity-tag {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
color: #FFFFFF;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s ease;
}

.celebrity-card:hover .celebrity-tag {
opacity: 1;
}

.celebrity-info {
padding: 12px;
}

.celebrity-name {
color: #FFFFFF;
font-weight: 500;
font-size: 14px;
line-height: 1.25;
transition: color 0.3s ease;
}


.celebrity-card:hover .celebrity-name {
color: #e84d67;
}

.celebrity-card:hover .highlight-border {
opacity: 0.2;
}


/*=========CELEBS BRITHDAY LIST===========*/
.celebs-brithday-list{
max-height: 384px;
}

.celeb-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
}

.avatar img{
width: 48px;
height: 48px;
border-radius: 9999px;
object-fit: cover;
border: 2px solid #4b5563;
transition: border-color 0.3s ease;
}

.list-item:hover .celeb-content .avatar img {
border-color: #e84d67;
}

.celeb-details {
flex: 1;
min-width: 0;
}

.celeb-details .celeb-name {
color: white;
font-size: 14px;
font-weight: 500;
margin: 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
}

.list-item:hover .celeb-details .celeb-name {
color: #e84d67;
}

.celeb-details .celeb-dob {
color: white;
font-size: 12px;
}

/*=========TOP LISTING MOVIES===========*/

.top-listing{
padding: 16px;
max-height: 384px;
}

.top-movie-card{
background-color: #111827;
border: 1px solid #374151;
border-radius: 8px;
overflow: hidden;
/* cursor: pointer; */
transition: all 0.3s;
position: relative;
margin-bottom: 16px;

}

.top-movie-card:last-child{
margin-bottom: 0px;
}

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

.top-movie-image{
position: relative;
}

.top-movie-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.3s;
display: block;
}

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

.top-movie-card .top-movie-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
opacity: 0;
transition: opacity 0.3s;
}

.top-movie-card:hover .top-movie-overlay {
opacity: 1;
}

.top-movie-card .top-movie-play-btn-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}

.top-movie-card:hover .top-movie-play-btn-container {
opacity: 1;
}

.top-movie-play-btn {
background-color: #e84d67;
width: 32px;
height: 32px;
border-radius: 9999px;
transform: scale(0);
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.top-movie-card:hover .top-movie-play-btn {
transform: scale(1);
}

.top-movie-category {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
opacity: 0;
transition: opacity 0.3s;
}

.top-movie-card:hover .top-movie-category {
opacity: 1;
}

.top-movie-info {
padding: 12px;
}

.top-movie-title {
color: white;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
min-height: 40px;
overflow: hidden;
text-overflow: ellipsis
}

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


/*=========BOX OFFICE COLLECTION LIST===========*/
.box-office-list{
max-height: 384px;
}

.collection-item {
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 12px;
border-bottom: 1px solid rgba(107, 114, 128, 0.5);
}

.collection-item:last-child {
border-bottom: none;
}

.collection-item:hover {
background-color: #1f2937;
}

.collection-item-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(232, 77, 103, 0.05), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}

.collection-item:hover .collection-item-gradient {
opacity: 1;
}

.collection-item-inner {
position: relative;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}

.collection-item-left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
gap: 12px;
}

.box-office-rank {
width: 24px;
height: 24px;
background-color: #e84d67;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.box-office-rank span {
color: white;
font-size: 12px;
font-weight: bold;
}
.movie-info {
min-width: 0;
flex: 1;
}

.movie-info h4 {
color: white;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
}

.collection-item:hover .movie-info h4 {
color: #e84d67;
}

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

.movie-stats span {
font-size: 12px;
}

.collection-amount {
/* color: white; */
color: #d1d5db;
font-weight: bold;
}

.tag-hit {
/* color: #34d399; */
color: #d1d5db;
font-weight: 500;
}

.tag-average {
/* color: #facc15; */
color: #d1d5db;
font-weight: 500;
}

.tag-flop {
/* color: #f87171; */
color: #d1d5db;
font-weight: 500;
}

.trend {
display: flex;
align-items: center;
gap: 4px;
}

.trend svg {
width: 12px;
height: 12px;
}

.trend span {
font-size: 12px;
font-weight: 500;
}

.trend-up {
/* color: #34d399; */
color: #d1d5db;
}

.trend-down {
/* color: #f87171; */
color: #d1d5db;
}

.collection-item:hover .side-bar {
height: 100%;
}

/*=========DESCRIPTION CONTAINER===========*/

.description-container{
/* margin: 32px 0px; */
margin-bottom: 32px;
}

.description-header {
margin-bottom: 32px;
}

.description-title {
font-size: 30px; /*==font-size: 24px;===*/
font-weight: bold;
color: var(--text-heading);
margin-bottom: 8px;
}

.description-subtitle {
color: #9ca3af; 
font-size: 16px;
line-height: 1.6;
}

.description-list {
display: flex;
flex-direction: column;
gap: 16px;
}

.description-card {
background: #17202e;
border: 1px solid #374151; 
border-radius: 8px;
overflow: hidden;
}

.description-card__header {
padding: 24px;
}

.description-card__title {
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 8px;
}

.description-card__body {
padding: 0 24px 24px;
border-top: 1px solid #374151;
}

.description-card__desc {
padding-top: 16px;
color: #d1d5db; 
line-height: 1.7;
font-size: 15px;
}

/*================DISCLAIMER BOX================*/
.disclaimer-box {
background: #17202e;
border-radius: 8px;
border: 1px solid #374151;
padding: 24px;
}

.disclaimer-flex {
display: flex;
align-items: flex-start;
gap: 16px; 
}

.disclaimer-icon {
flex-shrink: 0;
}

.icon-yellow {
color: #facc15; 
}

.disclaimer-content {
flex: 1;
}

.disclaimer-title {
color: #FFFFFF;
font-weight: 600;
font-size: 18px;
margin-bottom: 12px;
}

.disclaimer-text {
color: #d1d5db;
font-size: 14px;
line-height: 1.625;
}

/*=====================MODEL OVERLAY IN FAN PHOTOS PAGE==================*/
.modal-overlay {
position: fixed;  
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5); 
display: flex;  
align-items: center;
justify-content: center; 
z-index: 50;  
padding: 16px;
}
/* model */
.modal {
background: #17202e;
border-radius: 8px;
border: 1px solid #374151;
width: 100%;
max-width: 450px;
max-height: 90vh;
overflow-y: auto;
}

/* .model-scrollbar{
scrollbar-width: thin;
scrollbar-color: #374151 transparent;
} */

.model-scrollbar::-webkit-scrollbar {
width: 6px;
}
.model-scrollbar::-webkit-scrollbar-thumb {
background-color: #374151;
border-radius: 6px;
}
.model-scrollbar::-webkit-scrollbar-track {
background: transparent;
}

/* model - Header */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
border-bottom: 1px solid #374151;
}

.modal-header h3 {
color: #ffffff;
font-weight: bold;
font-size: 18px;
}

.modal-header .model-close-btn{
color: #9ca3af;
background: none;
border: none;
cursor: pointer;
transition: color 0.3s ease;
}

.modal-header button:hover {
color: #ffffff;
}

/* Body */
.modal-body {
padding: 24px;
}

/* Notice box */
.notice-box {
background: #111827;
border: 1px solid #4b5563;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
font-size: 14px;
line-height: 20px;
color: #FFF;
}

.notice-title {
color: #facc15;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
/* Form */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
color: #ffffff;
font-weight: 500;
font-size: 14px;
margin-bottom: 8px;
}
.form-group span {
color: #f87171;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 8px 16px;
background: #111827;
color: #ffffff;
border-radius: 8px;
border: 1px solid #4b5563;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: #e84d67;
outline: none;
box-shadow: 0 0 0 2px rgba(232, 77, 103, 0.2);
}

.form-group textarea {
resize: none;
}

/* File upload */
.file-upload {
position: relative;
}

.file-upload input {
display: none;
}

.file-upload label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
background: #111827;
color: #9ca3af;
border: 1px solid #4b5563;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.3s ease;
font-size: 14px;
box-sizing: border-box;
}

.file-upload label:hover {
border-color: #6b7280;
}

.file-note {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
}

/* Footer buttons */
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
}

.model-btn {
padding: 8px 24px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s ease;
border: none;
}

.model-btn-cancel {
background: #4b5563;
color: #ffffff;
}

.model-btn-cancel:hover {
background: #374151;
}

.model-btn-upload {
background: #e84d67;
color: #ffffff;
}

.model-btn-upload:hover {
background: rgba(232, 77, 103, 0.8);
}