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

IMPORTED FONTS (From Bottom Nav)

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


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

1. FINAL OTT HEADER STYLES

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


/* Global & Base Styles */

body {

background-color: #111827;

/* bg-gray-900 */

font-weight: 700;

margin: 0;

}


#ott-header-container {

font-family: 'Inter', sans-serif;

font-weight: 700;

color: white;

}


a {

text-decoration: none;

color: inherit;

}


button {

background: none;

border: none;

padding: 0;

cursor: pointer;

box-shadow: none !important;

-webkit-tap-highlight-color: transparent;

}


/* Main Header Styles */

.main-header {

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 50;

background: 

#220323;

backdrop-filter: blur(0px);

-webkit-backdrop-filter: blur(24px);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}


/* Desktop Navigation */

.nav-desktop {

display: none;

height: 4.5rem;

padding-left: 3rem;

padding-right: 3rem;

justify-content: space-between;

align-items: center;

}


@media (min-width: 768px) {

.nav-desktop {

display: flex;

}

}


.nav-section {

display: flex;

align-items: center;

gap: 1rem;

}


.nav-section.left,

.nav-section.right {

flex: none;

}


.nav-section.center {

flex: 1;

justify-content: center;

}


.logo-img {

height: 2.5rem;

display: block;

}


.desktop-menu {

display: flex;

align-items: center;

gap: 2rem;

list-style: none;

padding: 0;

margin: 0;

color: #D1D5DB;

font-size: 0.85rem;

}


.desktop-menu a {

transition: color 0.2s;

}


.desktop-menu a:hover {

color: white;

}


.vip-btn {

display: flex;

align-items: center;

gap: 0.25rem;

font-size: 0.75rem;

padding: 0.25rem 0.75rem;

background-image: linear-gradient(to right, #EC4899, #EF4444, #F97316);

transition: opacity 0.2s;

position: relative;

overflow: hidden;

height: 32px;

}


.vip-btn:hover {

opacity: 0.9;

}


.vip-btn span {

position: relative;

z-index: 2;

}


/* PC Search Bar */

.search-pill-desktop {

display: flex;

align-items: center;

gap: 0.5rem;

background-color: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.1);

padding: 0.4rem 1rem;

border-radius: 9999px;

color: #9CA3AF;

font-size: 0.8rem;

width: 160px;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

cursor: pointer;

}


.search-pill-desktop:hover {

background-color: rgba(255, 255, 255, 0.15);

width: 180px;

color: white;

border-color: rgba(255, 255, 255, 0.3);

}


.search-pill-desktop svg {

width: 16px;

height: 16px;

stroke: currentColor;

stroke-width: 2.5;

}


.user-icon-svg {

width: 40px;

height: 40px;

cursor: pointer;

transition: transform 0.2s;

}


.user-icon-svg:hover {

transform: scale(1.05);

}


.icon-btn {

padding: 0.5rem;

border-radius: 9999px;

transition: background-color 0.2s;

}


.icon-btn:hover {

background-color: rgba(255, 255, 255, 0.1);

}


/* --- Mobile Header Styles (Menu Removed) --- */

.mobile-header-wrapper {

display: block;

}


@media (min-width: 768px) {

.mobile-header-wrapper {

display: none;

}

}


/* Single row layout for mobile */

.mobile-header-top {

width: 93%;

margin-left: auto;

margin-right: auto;

height: 4rem;

display: flex;

align-items: center;

justify-content: space-between;

/* Logo Left, Actions Right */

}


.mobile-logo-wrapper {

display: flex;

align-items: center;

}


.mobile-logo {

margin-left: 0.2rem;

height: 2rem;

display: block;

}


/* Group for Search + VIP on the RIGHT */

.mobile-actions {

margin-right: 0.3rem;

display: flex;

align-items: center;

gap: 0.5rem;

}


/* Mobile VIP Button */

.mobile-vip-btn {

display: flex;

align-items: center;

gap: 0.25rem;

padding: 0.35rem 0.75rem;

background-image: linear-gradient(to right, #EC4899, #EF4444);

font-size: 0.75rem;

border-radius: 99px;

font-weight: 700;

color: white;

}


/* Mobile Search Icon Button */

#search-btn-mobile {

display: flex;

align-items: center;

justify-content: center;

color: white;

padding: 0.25rem;

background: transparent;

border: none;

box-shadow: none;

}


#search-btn-mobile svg {

width: 24px;

height: 24px;

stroke: currentColor;

stroke-width: 2.5;

}


/* Search Overlay */

#search-overlay {

display: none;

position: fixed;

inset: 0;

background-color: rgba(0, 0, 0, 0.95);

backdrop-filter: blur(10px);

z-index: 100;

padding: 2rem 1rem;

}


@media (min-width: 768px) {

#search-overlay {

padding-top: 4rem;

}

}


#search-content {

width: 100%;

max-width: 48rem;

margin-left: auto;

margin-right: auto;

}


#search-wrapper {

position: relative;

}


#search-wrapper .search-icon-abs {

position: absolute;

left: 0.75rem;

top: 50%;

transform: translateY(-50%);

color: #9CA3AF;

}


#overlay-search-input {

width: 100%;

background-color: #111827;

border: 1px solid #4b5563;

color: white;

font-size: 1.125rem;

padding: 0.75rem 6rem 0.75rem 3rem;

border-radius: 0.475rem;

}


#overlay-search-input:focus {

outline: none;

border-color: #ffffff;

}


.search-actions-abs {

position: absolute;

right: 0.75rem;

top: 50%;

transform: translateY(-50%);

display: flex;

align-items: center;

gap: 0.5rem;

}


.search-actions-abs button {

color: #9CA3AF;

transition: color 0.2s;

}


.search-actions-abs button:hover {

color: white;

}


/* Filter Buttons */

#filter-container {

display: flex;

flex-wrap: wrap;

gap: 8px;

justify-content: center;

margin-top: 20px;

margin-bottom: 10px;

}


.filter-btn {

background-color: rgba(255, 255, 255, 0.1);

color: #d1d5db;

border: 1px solid transparent;

padding: 6px 14px;

border-radius: 9999px;

font-size: 13px;

font-weight: 500;

cursor: pointer;

transition: all 0.2s ease;

}


.filter-btn:hover {

background-color: rgba(255, 255, 255, 0.2);

}


.filter-btn.active {

background: linear-gradient(90deg, #ec4899, #ef4444);

color: white;

font-weight: 700;

}


/* --- Utility & Animation Classes --- */

.custom-rounded {

border-radius: 10px !important;

}


.hidden {

display: none;

}


@keyframes fadeIn {

from {

opacity: 0;

}


to {

opacity: 1;

}

}


@keyframes shine-sweep {

0% {

left: -100%;

top: -100%;

}


100% {

left: 100%;

top: 100%;

}

}


.animate-fade-in {

animation: fadeIn 0.4s ease-in-out forwards;

}


.vip-diagonal-shine {

position: relative;

overflow: hidden;

}


.vip-diagonal-shine::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%);

transform: rotate(45deg);

animation: shine-sweep 2s infinite linear;

pointer-events: none;

z-index: 1;

}


#search-results::-webkit-scrollbar {

width: 8px;

}


#search-results::-webkit-scrollbar-track {

background: transparent;

}


#search-results::-webkit-scrollbar-thumb {

background-color: rgba(255, 255, 255, 0.2);

border-radius: 20px;

}



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

2. ANIMATED HERO SLIDER STYLES

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


* {

box-sizing: border-box;

}


html {

overflow-x: hidden;

}


:root {

--primary-color: #e50914;

--background-color: #121212;

--text-color: #ffffff;

--text-secondary-color: #e0e0e0;

--transition-speed: 0.7s;

}


body {

margin: 0;

padding: 0;

overflow-x: hidden;

background-color: var(--background-color);

transition: background 1s ease-in-out;

}


/* PC/Desktop Styles (No Changes here) */

.hero-slider-action {

color: var(--text-color);

font-family: 'Poppins', sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: auto;

position: relative;

max-width: 100vw;

overflow: visible;

margin-top: 85px;

/* Default for PC */

}


.hero-slider-action .swiper {

width: 95%;

height: 65vh;

padding-top: calc((65vh - 65vh / 1.1) / 2);

padding-bottom: calc((65vh - 65vh / 1.1) / 2);

overflow: visible;

max-width: 100%;

}


.hero-slider-action .swiper-slide {

display: flex;

justify-content: center;

align-items: center;

border-radius: 23px;

background-size: cover;

background-position: center;

overflow: hidden;

transition: transform var(--transition-speed) ease-in-out, opacity var(--transition-speed) ease-in-out;

transform: scale(0.9);

opacity: 0.40;

width: 70%;

height: calc(65vh / 1.1);

position: relative;

max-width: 100%;

}


.hero-slider-action .swiper-slide-active {

transform: scale(1.1);

opacity: 1;

z-index: 10;

}


.hero-slider-action .slide-content {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

padding: 40px;

box-sizing: border-box;

text-align: center;

z-index: 5;

transform: scale(1.111);

transform-origin: bottom center;

transition: transform var(--transition-speed) ease-in-out;

}


.hero-slider-action .swiper-slide-active .slide-content {

transform: scale(0.909);

}


.hero-slider-action .slide-content .title-img,

.hero-slider-action .slide-content .movie-info,

.hero-slider-action .slide-content .description,

.hero-slider-action .slide-content .buttons {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.5s ease-out, transform 0.5s ease-out;

}


.hero-slider-action .swiper-slide-active .slide-content .title-img {

opacity: 1;

transform: translateY(0);

transition-delay: 0.5s;

}


.hero-slider-action .swiper-slide-active .slide-content .movie-info {

opacity: 1;

transform: translateY(0);

transition-delay: 0.7s;

}


.hero-slider-action .swiper-slide-active .slide-content .description {

opacity: 1;

transform: translateY(0);

transition-delay: 0.9s;

}


.hero-slider-action .swiper-slide-active .slide-content .buttons {

opacity: 1;

transform: translateY(0);

transition-delay: 1.1s;

}


.hero-slider-action .slide-content .title-img {

max-width: 200px;

height: auto;

margin: 0 auto 15px;

border-radius: 5px;

display: block;

}


.hero-slider-action .slide-content .movie-info {

opacity: 0.2;

display: flex;

justify-content: center;

align-items: center;

gap: 12px;

margin: 0 auto 20px;

color: var(--text-secondary-color);

font-size: 0.95rem;

font-weight: 500;

}


.hero-slider-action .slide-content .movie-info span {

background: none;

padding: 0;

border: none;

}


.hero-slider-action .slide-content .description {

font-size: 1rem;

margin: 0 auto 20px;

max-width: 600px;

color: var(--text-secondary-color);

display: none;

}


.hero-slider-action .slide-content .buttons {

display: flex;

justify-content: center;

align-items: center;

gap: 15px;

}


.hero-slider-action .slide-content .play-btn {

background: white;

color: black;

padding: 12px 35px;

border: none;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

cursor: pointer;

transition: background-color 0.3s;

display: inline-flex;

align-items: center;

gap: 10px;

font-family: 'Poppins', sans-serif;

font-size: 1.1rem;

letter-spacing: 0.5px;

}


.hero-slider-action .slide-content .play-btn:hover {

background-color: #e6e6e6;

}


.hero-slider-action .slide-content .play-btn svg {

width: 28px;

height: 28px;

fill: black;

}


.hero-slider-action .slide-content .add-btn,

.hero-slider-action .slide-content .info-btn {

background: rgba(40, 40, 40, 0.7);

backdrop-filter: blur(10px);

border: 2px solid rgba(255, 255, 255, 0.2);

color: white;

width: 45px;

height: 45px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: all 0.3s ease;

padding: 0;

}


.hero-slider-action .slide-content .add-btn:hover,

.hero-slider-action .slide-content .info-btn:hover {

background: rgba(60, 60, 60, 0.9);

transform: scale(1.05);

}


.hero-slider-action .slide-content .add-btn svg,

.hero-slider-action .slide-content .info-btn svg {

width: 22px;

height: 22px;

fill: currentColor;

}


.hero-slider-action .swiper-button-next,

.hero-slider-action .swiper-button-prev {

color: var(--text-color);

width: 30px;

height: 30px;

top: 50%;

margin-top: 0;

transform: translateY(-50%);

}


.hero-slider-action .swiper-button-next::after,

.hero-slider-action .swiper-button-prev::after {

font-size: 18px;

}


/* Mobile Styles - UPDATED HERE */

@media (max-width: 768px) {

.hero-slider-action {

/* এখানে margin-top 110px থেকে বাড়িয়ে 180px করা হয়েছে */

margin-top: 90px;

overflow: visible;

}


.hero-slider-action .swiper {

opacity: 1;

width: 100%;

height: 47vh;

padding-top: calc((25vh - 25vh / 1.1) / 2);

padding-bottom: calc((30vh - 30vh / 1.1) / 2);

}


.hero-slider-action .swiper-slide {

width: 85%;

height: calc(47vh / 1.1);

}


.hero-slider-action .slide-content {

padding: 20px;

}


.hero-slider-action .slide-content .title-img {

max-width: 100px;

}


.hero-slider-action .slide-content .movie-info {

font-size: 0.8rem;

gap: 8px;

}


.hero-slider-action .slide-content .description {

font-size: 0.9rem;

}


.hero-slider-action .slide-content .play-btn {

padding: 10px 25px;

font-size: 0.9rem;

}


.hero-slider-action .slide-content .add-btn,

.hero-slider-action .slide-content .info-btn {

width: 40px;

height: 40px;

}


.hero-slider-action .slide-content .play-btn svg,

.hero-slider-action .slide-content .add-btn svg,

.hero-slider-action .slide-content .info-btn svg {

width: 18px;

height: 18px;

}


.hero-slider-action .swiper-button-next,

.hero-slider-action .swiper-button-prev {

display: none;

}

}



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

3. MULTI-SLIDER SHOWCASE STYLES

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


/* --- General Body and Base Styles --- */

body {

background-color: #121212;

color: #e5e5e5;

font-family: 'Poppins', sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-ms-overflow-style: none;

scrollbar-width: none;

}


body::-webkit-scrollbar {

display: none;

}


/* --- Movie Slider Component --- */

.movie-slider-component {

margin-left: 5px;

margin-right: 4px;

overflow: hidden;

/* UPDATED: Reduced bottom padding to decrease gap */

padding-bottom: 8px;

}


.slider-wrapper {

width: 100%;

margin: 0 auto;

}


.slider-header-container {

padding-left: 8px;

}


@media (min-width: 768px) {

.slider-header-container {

padding-left: 28px;

}

}


.slider-header {

display: flex;

align-items: center;

justify-content: space-between;

/* UPDATED: Reduced top margin to decrease gap */

margin-top: 12px;

margin-bottom: 4px;

}


.slider-title {

font-size: 0.85rem;

font-weight: 700;

background: linear-gradient(to right, #ffffff, #b4b4b4, #ffffff);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

letter-spacing: -0.03em;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

position: relative;

/* UPDATED: Flexbox for Icon alignment */

display: flex;

align-items: center;

}


/* UPDATED: Removed the ::after pseudo-element (the line) */


/* UPDATED: Style for the Title Icon */

.slider-title-icon {

width: 20px;

height: 20px;

margin-right: 8px;

object-fit: contain;

/* Ensure the icon is visible (not affected by text-fill-color transparent) */

-webkit-text-fill-color: initial;

filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));

}


.slider-view-more {

font-size: 0.75rem;

font-weight: 500;

color: #94a3b8;

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

margin-right: 12px;

margin-top: 0;

text-decoration: none;

position: relative;

}


.slider-view-more::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 0;

height: 1px;

background: #94a3b8;

transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.slider-view-more:hover {

color: #ffffff;

}


.slider-view-more:hover::after {

width: 100%;

}


/* --- Slider Container & Tracks --- */

.slider-container-wrapper {

position: relative;

}


.slider-container {

width: 100%;

overflow-x: auto;

display: flex;

scroll-behavior: smooth;

padding-left: 0px;

-webkit-overflow-scrolling: touch;

will-change: scroll-position;

}


@media (min-width: 768px) {

.slider-container {

padding-left: 20px;

}

}


.slider-container::-webkit-scrollbar {

display: none;

}


.slider-container {

-ms-overflow-style: none;

scrollbar-width: none;

cursor: grab;

}


.slider-container:active {

cursor: grabbing;

}


.slider-track {

display: flex;

will-change: transform;

}


/* --- Movie Card Styles --- */

.movie-card {

flex-shrink: 0;

gap: 2px;

width: calc(100% / 3.12);

padding: 6px;

cursor: pointer;

opacity: 0;

transform: scale(0.95) translateY(10px);

transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-card.is-visible {

opacity: 1;

transform: scale(1) translateY(0);

}


@media (min-width: 768px) {

.movie-card {

width: calc(100% / 8);

}

}


.movie-card-inner {

position: relative;

border: 0.5px solid #fff;

border-radius: 8px;

overflow: hidden;

height: 100%;

background-color: #1e293b;

aspect-ratio: 2/ 3;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-card:hover .movie-card-inner {

transform: scale(1.05);

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}


.movie-card-premium-icon {

position: absolute;

top: 8px;

right: 8px;

width: 24px;

height: 24px;

border-radius: 0.375rem;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(to bottom right, #ec4899, #ef4444);

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

z-index: 10;

transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-card:hover .movie-card-premium-icon {

transform: scale(1.1);

}


.movie-card-premium-icon svg {

color: white;

width: 15px;

height: 15px;

}


.loader-placeholder {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

background-color: #334155;

background: linear-gradient(90deg, #334155, #475569, #334155);

background-size: 200% 100%;

animation: movie-slider-shine 1.5s infinite linear;

transition: opacity 0.3s ease-out;

}


.loader-placeholder img {

width: 32px;

height: 32px;

opacity: 0.1;

}


.movie-card-poster {

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0;

transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-card-poster.loaded {

opacity: 1;

}


.movie-card-overlay {

position: absolute;

inset: 0;

background-color: black;

opacity: 0;

transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-card-inner:hover .movie-card-overlay {

opacity: 0.5;

}


.movie-card-play-icon {

position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

transform: scale(0.8);

}


.movie-card-inner:hover .movie-card-play-icon {

opacity: 1;

transform: scale(1);

}


.movie-card-play-icon svg {

width: 64px;

height: 64px;

color: white;

filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));

}


.movie-card-info {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 12px;

background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), transparent);

display: none;

}


@media (min-width: 768px) {

.movie-card-info {

display: block;

}

}


.movie-card-title {

color: white;

font-size: 0.875rem;

font-weight: 500;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}


/* --- Slider Buttons --- */

.slider-btn {

background-color: rgba(0, 0, 0, 0.4);

backdrop-filter: blur(5px);

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

position: absolute;

top: 50%;

transform: translateY(-50%);

padding: 4px;

border-radius: 9999px;

color: white;

z-index: 20;

border: none;

cursor: pointer;

}


.slider-btn:disabled {

opacity: 0;

cursor: not-allowed;

}


.slider-btn:hover:not(:disabled) {

background-color: rgba(0, 0, 0, 0.6);

transform: translateY(-50%) scale(1.1);

}


.slider-btn.prev-btn {

left: 20px;

}


.slider-btn.next-btn {

right: 16px;

}


.slider-btn svg {

height: 24px;

width: 24px;

}


@media (max-width: 767px) {


.prev-btn,

.next-btn {

display: none;

}

}


@media (min-width: 768px) {

.slider-btn {

padding: 8px;

}


.slider-btn.prev-btn {

left: 20px;

}


.slider-btn.next-btn {

right: 16px;

}

}


/* --- Keyframe Animations --- */

@keyframes movie-slider-shine {

0% {

background-position: -200% 0;

}


100% {

background-position: 200% 0;

}

}


/* --- Movie Overlay Styles --- */

.movie-overlay {

position: fixed;

inset: 0;

z-index: 1000;

display: flex;

align-items: flex-end;

justify-content: center;

opacity: 0;

visibility: hidden;

transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

background-size: cover;

background-position: center top;

}


.movie-overlay.open {

opacity: 1;

visibility: visible;

}


.movie-overlay::before {

content: '';

position: absolute;

inset: 0;

background: rgba(10, 10, 10, 0.5);

backdrop-filter: blur(16px) saturate(120%);

-webkit-backdrop-filter: blur(16px) saturate(120%);

}


.movie-overlay::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 85%;

background: linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 50%, transparent);

z-index: 0;

}


.movie-overlay-cover-container {

display: block;

position: absolute;

top: 0;

left: 0;

right: 0;

height: 45vh;

background-size: cover;

background-position: center 20%;

z-index: 0;

box-shadow: 0 8px 40px rgba(0, 0, 0, 0.75);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-overlay-cover-container::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

right: 0;

height: 100%;

background: linear-gradient(to top, rgb(0, 0, 0) 35%, rgba(0, 0, 0, 0.5) 65%, transparent);

}


.movie-overlay-content {

position: relative;

z-index: 1;

width: 100%;

max-width: 1400px;

display: flex;

flex-direction: column;

align-items: center;

padding: 2rem 1.5rem;

opacity: 0;

transform: translateY(30px);

transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;

justify-content: flex-end;

}


.movie-overlay.open .movie-overlay-content {

opacity: 1;

transform: translateY(0);

}


.movie-overlay-poster {

display: none;

}


.movie-overlay-details {

width: 100%;

}


.movie-overlay-title {

font-size: 2.2rem;

font-weight: 700;

margin-bottom: 12px;

text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);

letter-spacing: -0.02em;

text-align: center;

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-overlay.open .movie-overlay-title {

transform: scale(1.02);

}


.movie-overlay-meta {

display: flex;

align-items: center;

gap: 16px;

font-size: 0.9rem;

color: #d1d5db;

margin-bottom: 20px;

flex-wrap: wrap;

font-weight: 500;

justify-content: center;

}


.movie-overlay-meta span {

opacity: 0.8;

}


.movie-overlay-desc {

line-height: 1.6;

color: #d1d5db;

font-size: 0.95rem;

max-width: 650px;

margin: 0 auto 24px auto;

text-align: center;

}


.movie-overlay-buttons {

display: flex;

flex-direction: column;

gap: 12px;

align-items: center;

width: 100%;

}


.btn-gradient {

padding: 15px 24px;

border-radius: 15px;

text-decoration: none;

font-weight: 600;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

border: none;

cursor: pointer;

color: white;

background-image: linear-gradient(to right, #ef4444, #d946ef);

transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

width: 100%;

max-width: 400px;

}


.btn-gradient:hover {

transform: scale(1.03);

box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2);

}


.main-button-container {

width: 100%;

display: flex;

justify-content: center;

}


.action-btn-container {

display: flex;

gap: 8px;

width: 100%;

max-width: 400px;

justify-content: center;

}


.action-btn {

background: rgba(45, 55, 72, 0.7);

color: #e2e8f0;

border-radius: 15px;

padding: 12px 8px;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

gap: 4px;

flex: 1;

cursor: pointer;

border: 1px solid rgba(255, 255, 255, 0.1);

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.action-btn:hover {

background: rgba(45, 55, 72, 0.9);

transform: translateY(-2px);

}


.action-btn .icon {

margin: 0 auto;

}


.action-btn .text {

display: block;

font-size: 0.75rem;

font-weight: 500;

}


.close-overlay {

position: fixed;

top: 24px;

right: 24px;

background: rgba(0, 0, 0, 0.3);

border: 1px solid rgba(255, 255, 255, 0.1);

color: white;

cursor: pointer;

width: 44px;

height: 44px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

z-index: 1001;

backdrop-filter: blur(8px);

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.close-overlay:hover {

transform: scale(1.1) rotate(90deg);

background: rgba(255, 255, 255, 0.1);

border-color: rgba(255, 255, 255, 0.2);

}


.close-overlay svg {

width: 24px;

height: 24px;

}


/* --- Desktop layout adjustments for Overlay --- */

@media (min-width: 768px) {

.movie-overlay-cover-container {

display: none;

}


.movie-overlay-content {

flex-direction: row;

align-items: flex-end;

justify-content: flex-start;

padding: 4rem;

}


.movie-overlay-poster {

display: block;

width: 300px;

flex-shrink: 0;

margin-right: 40px;

}


.movie-overlay-poster img {

width: 100%;

height: auto;

object-fit: cover;

border-radius: 16px;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

border: 1px solid rgba(255, 255, 255, 0.1);

transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}


.movie-overlay-poster:hover img {

transform: scale(1.02);

}


.movie-overlay-details {

flex-grow: 1;

width: auto;

text-align: left;

}


.movie-overlay-title {

font-size: 3.5rem;

text-align: left;

}


.movie-overlay-meta,

.movie-overlay-desc {

justify-content: flex-start;

text-align: left;

margin-left: 0;

margin-right: 0;

}


.movie-overlay-buttons {

flex-direction: row;

align-items: center;

width: auto;

}


.main-button-container {

width: auto;

justify-content: flex-start;

}


.btn-gradient {

flex-grow: 0;

width: auto;

max-width: none;

}


.action-btn-container {

width: auto;

gap: 16px;

}


.action-btn {

flex: 0 0 auto;

width: 52px;

height: 52px;

border-radius: 50%;

padding: 0;

}


.action-btn .text {

display: none;

}

}



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

4. GLASSY BOTTOM NAVIGATION STYLES

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


body {

font-family: 'Poppins', sans-serif;

background-color: #0f172a;

/* Dark background */

/* Adding a gradient blob below so you can test the glass blur effect */

background-image: radial-gradient(circle at 50% 100%, #3730a3 0%, #0f172a 50%);

max-height: 100vh;

color: white;

padding-bottom: 100px;

/* Space for scrolling */

}


/* --- GLASSY NAVIGATION STYLES --- */

.glass-nav {

/* The "Glass" Magic */

background: 

#220323;

/* Very see-through dark tint */

backdrop-filter: blur(16px);

/* Strong blur for the frosted look */

-webkit-backdrop-filter: blur(16px);

/* Safari support */


/* Border treatment */

border-top: 1px solid rgba(255, 255, 255, 0.08);

/* Subtle border */

}


/* --- NAV ITEM STYLES --- */

.nav-item {

color: rgba(255, 255, 255, 0.45);

/* Inactive: 45% opacity (Not full) */

transition: all 0.3s ease;

}


/* Hover Effect (for desktop/mouse users) */

.nav-item:not(.active):hover {

color: rgba(255, 255, 255, 0.75);

}


/* Active State: Pure Solid White */

.nav-item.active {

color: #FFFFFF;

transform: scale(1.05);

/* Very subtle pop */

}


/* Icon Sizing */

.icon {

width: 1.5rem;

height: 1.5rem;

margin-bottom: 0.15rem;

/* Slight spacing between icon and text */

}


/* Text Styling */

.nav-label {

font-size: 0.65rem;

font-weight: 600;

letter-spacing: 0.02em;

}