/* =========================================
 LISTĂ FILME – 3 CARDURI PE RÂND
========================================= */

.viewn_loop {
 float: left !important;
 display: block !important;

 width: 33.333% !important;
 margin: 0 !important;
 padding: 10px !important;

 box-sizing: border-box !important;
}



/* =========================================
 CARD FILM
========================================= */

.film-card {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 145%;

 overflow: hidden;
 box-sizing: border-box;

 background: #121212;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 15px;

 box-shadow:
 0 7px 20px rgba(0, 0, 0, 0.35),
 0 2px 6px rgba(0, 0, 0, 0.25);

 transition:
 transform 0.28s ease,
 box-shadow 0.28s ease,
 border-color 0.28s ease;
}

.film-card:hover {
 z-index: 10;
 transform: translateY(-6px);

 border-color: rgba(255, 145, 0, 0.75);

 box-shadow:
 0 18px 38px rgba(0, 0, 0, 0.55),
 0 0 22px rgba(255, 126, 0, 0.22);
}

/* =========================================
 POSTER
========================================= */

.film-poster-link {
 position: absolute;
 inset: 0;
 z-index: 1;

 display: block;
 width: 100%;
 height: 100%;
}

.film-poster {
 display: block;
 width: 100% !important;
 height: 100% !important;

 object-fit: cover;
 border: 0;

 transition:
 transform 0.5s ease,
 filter 0.35s ease;
}

.film-card:hover .film-poster {
 transform: scale(1.055);
 filter: brightness(0.84);
}

.film-no-image {
 display: flex;
 align-items: center;
 justify-content: center;

 width: 100%;
 height: 100%;

 color: #999;
 font-size: 14px;

 background: linear-gradient(145deg, #282828, #101010);
}

/* =========================================
 GRADIENT PESTE POSTER
========================================= */

.film-gradient {
 position: absolute;
 z-index: 2;
 right: 0;
 bottom: 0;
 left: 0;

 height: 55%;
 pointer-events: none;

 background: linear-gradient(
 to top,
 rgba(0, 0, 0, 0.98) 0%,
 rgba(0, 0, 0, 0.78) 30%,
 rgba(0, 0, 0, 0.25) 70%,
 transparent 100%
 );
}

/* Gradient discret și în partea de sus */
.film-card::before {
 position: absolute;
 z-index: 2;
 top: 0;
 right: 0;
 left: 0;

 height: 28%;
 content: "";
 pointer-events: none;

 background: linear-gradient(
 to bottom,
 rgba(0, 0, 0, 0.65),
 transparent
 );
}

/* =========================================
 VIZUALIZĂRI ȘI COMENTARII
========================================= */

.film-stats {
 position: absolute;
 z-index: 6;
 top: 11px;
 left: 11px;

 display: flex;
 gap: 6px;
}

.film-stat {
 display: flex;
 align-items: center;
 gap: 4px;

 padding: 5px 9px;

 color: #fff;
 font-size: 12px;
 font-weight: 600;
 line-height: 1;

 background: rgba(0, 0, 0, 0.68);
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 30px;

 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);

 backdrop-filter: blur(7px);
 -webkit-backdrop-filter: blur(7px);
}

.stat-icon {
 font-size: 11px;
}

/* =========================================
 BADGE NEW
========================================= */

.badge-new {
 position: absolute;
 z-index: 8;
 top: 11px;
 right: 11px;

 padding: 7px 12px;

 color: #fff;
 font-size: 11px;
 font-weight: 900;
 line-height: 1;
 letter-spacing: 1px;

 background: linear-gradient(
 135deg,
 #ffd000 0%,
 #ff8a00 38%,
 #ff3d00 72%,
 #dc143c 100%
 );

 border: 1px solid rgba(255, 255, 255, 0.38);
 border-radius: 30px;

 box-shadow:
 0 4px 14px rgba(255, 72, 0, 0.55),
 inset 0 1px 0 rgba(255, 255, 255, 0.35);

 animation: badgeNewPulse 2s infinite;
}

@keyframes badgeNewPulse {
 0%,
 100% {
 transform: scale(1);
 box-shadow:
 0 4px 14px rgba(255, 72, 0, 0.45),
 inset 0 1px 0 rgba(255, 255, 255, 0.35);
 }

 50% {
 transform: scale(1.06);
 box-shadow:
 0 5px 20px rgba(255, 126, 0, 0.75),
 inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
}

/* =========================================
 TITLU ȘI CATEGORIE
========================================= */

.film-overlay {
 position: absolute;
 z-index: 5;
 right: 16px;
 bottom: 15px;
 left: 16px;

 pointer-events: none;
}

.film-title {
 display: -webkit-box;
 overflow: hidden;

 color: #fff !important;
 font-size: 19px;
 font-weight: 800;
 line-height: 1.25;
 text-decoration: none !important;
 text-shadow: 0 2px 8px rgba(0, 0, 0, 1);

 pointer-events: auto;

 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
}

.film-title:hover {
 color: #ffae00 !important;
}

.film-meta {
 display: flex;
 align-items: center;
 gap: 7px;

 min-height: 18px;
 margin-top: 7px;

 color: #ddd;
 font-size: 12px;
 line-height: 1.3;
}

.film-year {
 color: #ffb000;
 font-weight: 700;
}

.film-category {
 overflow: hidden;

 color: #ddd !important;
 text-decoration: none !important;
 text-overflow: ellipsis;
 white-space: nowrap;

 pointer-events: auto;
}

.film-category::before {
 margin-right: 7px;
 color: #ff8a00;
 content: "•";
}

.film-category:hover {
 color: #ffae00 !important;
}

/* =========================================
 BUTON PLAY
========================================= */

.film-play {
 position: absolute;
 z-index: 7;
 top: 50%;
 left: 50%;

 display: flex;
 align-items: center;
 justify-content: center;

 width: 62px;
 height: 62px;

 color: #fff !important;
 text-decoration: none !important;

 background: linear-gradient(135deg, #ffb300, #ff5500);
 border: 2px solid rgba(255, 255, 255, 0.75);
 border-radius: 50%;

 opacity: 0;
 transform: translate(-50%, -42%) scale(0.75);

 box-shadow:
 0 8px 25px rgba(255, 87, 0, 0.50),
 inset 0 1px 1px rgba(255, 255, 255, 0.45);

 transition:
 opacity 0.28s ease,
 transform 0.28s ease;
}

.film-play span {
 margin-left: 4px;
 font-size: 23px;
}

.film-card:hover .film-play {
 opacity: 1;
 transform: translate(-50%, -50%) scale(1);
}

/* =========================================
 TABLETĂ – TOT 3 PE RÂND
========================================= */

@media screen and (max-width: 900px) {
 .viewn_loop {
 width: 33.333% !important;
 padding: 6px !important;
 }

 .film-title {
 font-size: 15px;
 }

 .film-stat {
 padding: 4px 7px;
 font-size: 10px;
 }

 .badge-new {
 padding: 6px 9px;
 font-size: 9px;
 }
}

/* =========================================
 TELEFON – 2 PE RÂND
========================================= */

@media screen and (max-width: 600px) {
 .viewn_loop {
 width: 50% !important;
 padding: 5px !important;
 }

 .viewn_loop:nth-of-type(3n + 1) {
 clear: none;
 }



 .film-card {
 border-radius: 10px;
 }

 .film-title {
 font-size: 14px;
 }

 .film-overlay {
 right: 10px;
 bottom: 10px;
 left: 10px;
 }

 .film-stats {
 top: 7px;
 left: 7px;
 gap: 3px;
 }

 .film-stat {
 padding: 4px 6px;
 }

 .badge-new {
 top: 7px;
 right: 7px;
 }

 .film-play {
 width: 48px;
 height: 48px;
 }
}

 /* ====================================
 REPARARE AFIȘARE 3 FILME PE RÂND
==================================== */

ul.viewn_loop {
 float: left !important;
 clear: none !important;

 display: block !important;

 width: 31.333% !important;
 max-width: none !important;

 margin: 1% !important;
 padding: 0 !important;

 list-style: none !important;
 box-sizing: border-box !important;
}

ul.viewn_loop li {
 float: none !important;
 clear: none !important;

 display: block !important;

 width: 100% !important;
 height: auto !important;

 margin: 0 !important;
 padding: 0 !important;

 overflow: visible !important;
 box-sizing: border-box !important;
}

/* Cardul ocupă toată coloana */

ul.viewn_loop .film-card {
 position: relative !important;

 display: block !important;
 width: 100% !important;
 max-width: none !important;

 height: 0 !important;
 padding-bottom: 145% !important;

 margin: 0 !important;
 box-sizing: border-box !important;
}

/* Badge-ul este ascuns inițial */

ul.viewn_loop .badge-new {
 display: none !important;
}

/* Scriptul adaugă această clasă postărilor noi */

ul.viewn_loop .badge-new.badge-visible {
 display: block !important;
}

/* Telefon: două filme pe rând */

@media screen and (max-width: 650px) {
 ul.viewn_loop {
 width: 48% !important;
 margin: 1% !important;
 }
}

/* Telefon foarte mic: un film pe rând */

@media screen and (max-width: 380px) {
 ul.viewn_loop {
 width: 98% !important;
 margin: 1% !important;
 }
}