/* =========================================
 BANNER PREMIUM – UPDATE FILMEHD
========================================= */

.site-update-banner,
.site-update-banner * {
 box-sizing: border-box;
}

.site-update-banner {
 position: relative;
 isolation: isolate;

 display: flex;
 align-items: center;
 gap: 22px;

 width: calc(100% - 30px);
 max-width: 100%;
 min-height: 190px;

 margin: 15px auto 22px;
 padding: 24px 28px;

 overflow: hidden;

 color: #fff;
 font-family: Arial, Helvetica, sans-serif;

 background:
 radial-gradient(
 circle at 15% 30%,
 rgba(255, 186, 52, 0.13),
 transparent 34%
 ),
 radial-gradient(
 circle at 90% 80%,
 rgba(255, 95, 31, 0.10),
 transparent 35%
 ),
 linear-gradient(
 135deg,
 #20221c 0%,
 #151611 48%,
 #0b0c09 100%
 );

 border: 1px solid rgba(255, 190, 61, 0.23);
 border-radius: 18px;

 box-shadow:
 0 18px 45px rgba(0, 0, 0, 0.38),
 inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Linie aurie în partea de sus */

.site-update-banner::before {
 position: absolute;
 z-index: 4;
 top: 0;
 right: 13%;
 left: 13%;

 height: 2px;
 content: "";

 background: linear-gradient(
 90deg,
 transparent,
 #ff9f19,
 #ffe079,
 #ff9f19,
 transparent
 );

 box-shadow:
 0 0 12px rgba(255, 177, 37, 0.75),
 0 0 25px rgba(255, 145, 20, 0.25);
}

/* Textură discretă */

.site-update-banner::after {
 position: absolute;
 z-index: -1;
 inset: 0;

 content: "";
 pointer-events: none;

 opacity: 0.18;

 background-image:
 linear-gradient(
 rgba(255, 255, 255, 0.025) 1px,
 transparent 1px
 ),
 linear-gradient(
 90deg,
 rgba(255, 255, 255, 0.025) 1px,
 transparent 1px
 );

 background-size: 24px 24px;
}

/* =========================================
 LUMINI DECORATIVE
========================================= */

.update-banner-glow {
 position: absolute;
 z-index: -1;

 width: 180px;
 height: 180px;

 pointer-events: none;

 background: rgba(255, 170, 26, 0.12);
 border-radius: 50%;
 filter: blur(50px);
}

.update-glow-left {
 top: -90px;
 left: -70px;
}

.update-glow-right {
 right: -80px;
 bottom: -110px;

 background: rgba(255, 83, 27, 0.10);
}

/* =========================================
 ICON PRINCIPAL
========================================= */

.update-banner-icon {
 position: relative;
 z-index: 2;

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

 flex: 0 0 82px;
 width: 82px;
 height: 82px;

 color: #171814;

 background: linear-gradient(
 145deg,
 #fff2ad 0%,
 #ffd45f 35%,
 #ffac2f 68%,
 #ff7b22 100%
 );

 border: 2px solid rgba(255, 255, 255, 0.44);
 border-radius: 24px;

 box-shadow:
 0 13px 30px rgba(255, 137, 25, 0.28),
 inset 0 1px 1px rgba(255, 255, 255, 0.65);

 transform: rotate(-4deg);

 animation: updateIconFloat 4s ease-in-out infinite;
}

.update-banner-icon::before {
 position: absolute;
 inset: -9px;

 content: "";

 border: 1px solid rgba(255, 182, 42, 0.17);
 border-radius: 29px;
}

.update-banner-icon svg {
 width: 40px;
 height: 40px;

 fill: currentColor;

 transform: rotate(4deg);
}

@keyframes updateIconFloat {
 0%,
 100% {
 transform: translateY(0) rotate(-4deg);
 }

 50% {
 transform: translateY(-5px) rotate(-2deg);
 }
}

/* =========================================
 CONȚINUT
========================================= */

.update-banner-content {
 position: relative;
 z-index: 3;

 flex: 1;
 min-width: 0;
}

.update-banner-top {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 7px;

 margin-bottom: 8px;
}

.update-eyebrow {
 color: #e8b84c;
 font-size: 10px;
 font-weight: 900;
 line-height: 1;
 letter-spacing: 1.3px;
}

.update-live-dot {
 width: 7px;
 height: 7px;

 background: #4dda7a;
 border-radius: 50%;

 box-shadow: 0 0 9px rgba(77, 218, 122, 0.80);

 animation: updateLivePulse 1.7s ease-in-out infinite;
}

@keyframes updateLivePulse {
 0%,
 100% {
 opacity: 1;
 transform: scale(1);
 }

 50% {
 opacity: 0.55;
 transform: scale(0.78);
 }
}

.update-status {
 padding: 4px 7px;

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

 background: linear-gradient(
 135deg,
 #ff7438,
 #e12643
 );

 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 20px;

 box-shadow: 0 3px 10px rgba(225, 38, 67, 0.25);
}

.update-banner-content h2 {
 margin: 0 0 9px !important;

 color: #fff !important;
 font-family: Arial, Helvetica, sans-serif !important;
 font-size: 23px !important;
 font-weight: 900 !important;
 line-height: 1.2 !important;
 letter-spacing: -0.4px;

 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.update-banner-content > p {
 max-width: 800px;
 margin: 0 !important;

 color: #a9aba4 !important;
 font-family: Arial, Helvetica, sans-serif !important;
 font-size: 13px !important;
 font-weight: 400 !important;
 line-height: 1.6 !important;
}

/* =========================================
 ACȚIUNI
========================================= */

.update-banner-actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 14px;

 margin-top: 17px;
}

/* BUTON ÎNREGISTRARE */

.update-register-button {
 position: relative;

 display: flex !important;
 align-items: center;
 gap: 10px;

 width: auto;
 min-width: 255px;
 min-height: 52px;
 padding: 7px 12px;

 overflow: hidden;

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

 background: linear-gradient(
 135deg,
 #ffec91 0%,
 #ffc74d 37%,
 #ffa028 70%,
 #ff8123 100%
 );

 border: 1px solid rgba(255, 255, 255, 0.35);
 border-radius: 11px;

 box-shadow:
 0 9px 23px rgba(255, 137, 25, 0.23),
 inset 0 1px 1px rgba(255, 255, 255, 0.58);

 transition:
 transform 0.22s ease,
 filter 0.22s ease,
 box-shadow 0.22s ease;
}

.update-register-button::before {
 position: absolute;
 top: -50%;
 left: -75%;

 width: 45%;
 height: 200%;

 content: "";

 background: linear-gradient(
 90deg,
 transparent,
 rgba(255, 255, 255, 0.42),
 transparent
 );

 transform: rotate(20deg);
 transition: left 0.6s ease;
}

.update-register-button:hover::before {
 left: 130%;
}

.update-register-button:hover {
 color: #111 !important;

 filter: brightness(1.06);

 transform: translateY(-3px);

 box-shadow:
 0 13px 30px rgba(255, 137, 25, 0.34),
 inset 0 1px 1px rgba(255, 255, 255, 0.60);
}

.update-register-icon {
 display: flex;
 align-items: center;
 justify-content: center;

 flex: 0 0 36px;
 width: 36px;
 height: 36px;

 background: rgba(255, 255, 255, 0.30);
 border: 1px solid rgba(255, 255, 255, 0.32);
 border-radius: 9px;
}

.update-register-icon svg {
 width: 21px;
 height: 21px;

 fill: #171713;
}

.update-button-text {
 position: relative;
 z-index: 2;

 flex: 1;
 min-width: 0;
}

.update-button-text strong,
.update-button-text small {
 display: block;
}

.update-button-text strong {
 color: #171713;
 font-size: 13px;
 font-weight: 900;
 line-height: 1.2;
}

.update-button-text small {
 margin-top: 3px;

 color: rgba(0, 0, 0, 0.62);
 font-size: 9px;
 line-height: 1.2;
}

.update-button-arrow {
 position: relative;
 z-index: 2;

 font-size: 21px;
 font-weight: 700;

 transition: transform 0.2s ease;
}

.update-register-button:hover .update-button-arrow {
 transform: translateX(3px);
}

/* MESAJ COMUNITATE */

.update-community-message {
 display: inline-flex;
 align-items: center;
 gap: 6px;

 color: #898b85;
 font-size: 10px;
 font-weight: 600;
}

.update-community-message b {
 color: #4dda7a;
 font-size: 11px;

 text-shadow: 0 0 8px rgba(77, 218, 122, 0.65);
}

/* =========================================
 DECORAȚIE PLAY
========================================= */

.update-banner-decoration {
 position: absolute;
 z-index: 1;
 right: 22px;
 bottom: -28px;

 color: rgba(255, 179, 38, 0.055);
 font-size: 135px;
 line-height: 1;

 pointer-events: none;

 transform: rotate(-9deg);
}

/* =========================================
 TABLETĂ
========================================= */

@media screen and (max-width: 900px) {
 .site-update-banner {
 gap: 18px;

 width: calc(100% - 20px);
 min-height: 170px;

 margin: 10px auto 18px;
 padding: 21px;
 }

 .update-banner-icon {
 flex-basis: 70px;
 width: 70px;
 height: 70px;

 border-radius: 20px;
 }

 .update-banner-icon svg {
 width: 34px;
 height: 34px;
 }

 .update-banner-content h2 {
 font-size: 20px !important;
 }

 .update-banner-content > p {
 font-size: 12px !important;
 }

 .update-banner-decoration {
 right: 10px;
 font-size: 110px;
 }
}

/* =========================================
 TELEFON
========================================= */

@media screen and (max-width: 650px) {
 .site-update-banner {
 display: block;

 width: calc(100% - 16px);
 min-height: 0;

 margin: 8px auto 16px;
 padding: 18px 15px;

 text-align: center;

 border-radius: 14px;
 }

 .update-banner-icon {
 width: 62px;
 height: 62px;
 margin: 0 auto 17px;

 border-radius: 18px;
 }

 .update-banner-icon::before {
 inset: -7px;
 border-radius: 23px;
 }

 .update-banner-icon svg {
 width: 30px;
 height: 30px;
 }

 .update-banner-top {
 justify-content: center;
 margin-bottom: 9px;
 }

 .update-eyebrow {
 font-size: 9px;
 letter-spacing: 0.9px;
 }

 .update-banner-content h2 {
 margin-bottom: 8px !important;

 font-size: 18px !important;
 line-height: 1.25 !important;
 }

 .update-banner-content > p {
 max-width: 100%;

 font-size: 11px !important;
 line-height: 1.55 !important;
 }

 .update-banner-actions {
 display: block;
 margin-top: 15px;
 }

 .update-register-button {
 width: 100%;
 min-width: 0;
 min-height: 50px;

 text-align: left;
 }

 .update-community-message {
 justify-content: center;

 width: 100%;
 margin-top: 11px;

 font-size: 9px;
 }

 .update-banner-decoration {
 right: -15px;
 bottom: -18px;

 font-size: 90px;
 }
}

/* =========================================
 TELEFON FOARTE MIC
========================================= */

@media screen and (max-width: 380px) {
 .site-update-banner {
 width: calc(100% - 10px);
 padding: 16px 12px;
 }

 .update-banner-content h2 {
 font-size: 16px !important;
 }

 .update-banner-content > p {
 font-size: 10px !important;
 }

 .update-register-button {
 padding: 6px 9px;
 }

 .update-register-icon {
 flex-basis: 32px;
 width: 32px;
 height: 32px;
 }

 .update-register-icon svg {
 width: 18px;
 height: 18px;
 }

 .update-button-text strong {
 font-size: 11px;
 }

 .update-button-text small {
 font-size: 8px;
 }
}

/* Reduce animațiile dacă utilizatorul preferă asta */

@media (prefers-reduced-motion: reduce) {
 .update-banner-icon,
 .update-live-dot {
 animation: none;
 }

 .update-register-button,
 .update-register-button::before,
 .update-button-arrow {
 transition: none;
 }
}