/* MovieHub Notice Bar Premium - Frontend Styles */
.mhnb-notice-bar {
    color: #fff;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 500;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    transition: all 0.3s ease;
}

.mhnb-notice-label {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    margin-right: 15px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mhnb-text-wrapper {
    overflow: hidden;
    flex-grow: 1;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.mhnb-scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: mhnbSlideText 35s linear infinite;
    font-weight: 400;
    letter-spacing: 0.3px;
}

@keyframes mhnbSlideText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.mhnb-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    margin-left: 15px;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mhnb-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Premium Themes */
.mhnb-theme-gradient_cyan {
    background: linear-gradient(90deg, #00bcd4 0%, #4fc3f7 50%, #29b6f6 100%);
}

.mhnb-theme-gradient_blue {
    background: linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%);
}

.mhnb-theme-gradient_purple {
    background: linear-gradient(90deg, #9c27b0 0%, #e91e63 50%, #f44336 100%);
}

.mhnb-theme-gradient_red {
    background: linear-gradient(90deg, #f44336 0%, #ff5722 50%, #ff9800 100%);
}

.mhnb-theme-gradient_green {
    background: linear-gradient(90deg, #4caf50 0%, #8bc34a 50%, #cddc39 100%);
}

.mhnb-theme-gradient_orange {
    background: linear-gradient(90deg, #ff9800 0%, #ff5722 50%, #e91e63 100%);
}

.mhnb-theme-gradient_pink {
    background: linear-gradient(90deg, #e91e63 0%, #9c27b0 50%, #673ab7 100%);
}

.mhnb-theme-gradient_gold {
    background: linear-gradient(90deg, #ffd700 0%, #ffb300 50%, #ff8f00 100%);
    color: #333;
}

.mhnb-theme-neon_glow {
    background: #000;
    border-top: 2px solid #00ff00;
    border-bottom: 2px solid #00ff00;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    animation: mhnbNeonPulse 2s infinite alternate;
}

.mhnb-theme-dark_elegant {
    background: linear-gradient(90deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    border-bottom: 3px solid #f39c12;
}

.mhnb-theme-movie_theme {
    background: linear-gradient(90deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
    position: relative;
}

.mhnb-theme-movie_theme::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent);
    background-repeat: repeat;
    background-size: 100px 100px;
    animation: mhnbStars 10s linear infinite;
}

.mhnb-theme-fire_gradient {
    background: linear-gradient(45deg, #ff4500, #ff6347, #ff8c00, #ffd700);
    background-size: 400% 400%;
    animation: mhnbFireFlicker 2s ease infinite alternate;
}

.mhnb-theme-rainbow {
    background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ee82ee, #98fb98);
    background-size: 400% 400%;
    animation: mhnbRainbowShift 3s ease infinite;
}

.mhnb-theme-glass_morphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.mhnb-theme-cyberpunk {
    background: linear-gradient(45deg, #0f3460, #16537e, #533a7b);
    border-top: 2px solid #ff00ff;
    border-bottom: 2px solid #00ffff;
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
}

.mhnb-theme-retro_wave {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff);
    position: relative;
    overflow: hidden;
}

.mhnb-theme-retro_wave::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: mhnbRetroSweep 3s infinite;
}

.mhnb-theme-aurora {
    background: linear-gradient(45deg, #00c9ff, #92fe9d, #ff9a9e, #fecfef);
    background-size: 400% 400%;
    animation: mhnbAuroraShift 4s ease infinite;
}

.mhnb-theme-cosmic {
    background: radial-gradient(ellipse at center, #0f0f23 0%, #000000 100%);
    position: relative;
}

.mhnb-theme-cosmic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 40px 70px, #fff, transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: mhnbCosmicTwinkle 5s linear infinite;
}

.mhnb-theme-matrix {
    background: #000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    position: relative;
    overflow: hidden;
}

.mhnb-theme-matrix::before {
    content: "01010101010101010101010101010101010101010101";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 8px;
    opacity: 0.1;
    animation: mhnbMatrixRain 2s linear infinite;
}

.mhnb-theme-holographic {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
    background-size: 400% 400%;
    animation: mhnbHolographicShift 2s ease infinite;
    position: relative;
}

.mhnb-theme-holographic::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: mhnbHolographicScan 3s infinite;
}

/* Premium Animations */
@keyframes mhnbNeonPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.6); }
}

@keyframes mhnbStars {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes m255,0,0.6); }
}

@keyframes mhnbStars {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes mhnbFireFlicker {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes mhnbRainbowShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes mhnbRetroSweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes mhnbAuroraShift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 50% 0%; }
}

@keyframes mhnbCosmicTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes mhnbMatrixRain {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes mhnbHolographicShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes mhnbHolographicScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Animation Types */
.mhnb-animation-slide_right .mhnb-scrolling-text {
    animation-direction: reverse;
}

.mhnb-animation-fade_in_out .mhnb-scrolling-text {
    animation: mhnbFadeInOut 4s ease-in-out infinite;
}

.mhnb-animation-bounce .mhnb-scrolling-text {
    animation: mhnbBounce 2s ease-in-out infinite;
}

.mhnb-animation-typewriter .mhnb-scrolling-text {
    overflow: hidden;
    border-right: 2px solid #fff;
    white-space: nowrap;
    animation: mhnbTypewriter 4s steps(40, end), mhnbBlink 0.75s step-end infinite;
}

.mhnb-animation-wave .mhnb-scrolling-text {
    animation: mhnbWave 2s ease-in-out infinite;
}

.mhnb-animation-pulse .mhnb-scrolling-text {
    animation: mhnbPulse 2s ease-in-out infinite;
}

.mhnb-animation-glow .mhnb-scrolling-text {
    animation: mhnbGlow 3s ease-in-out infinite;
}

.mhnb-animation-shake .mhnb-scrolling-text {
    animation: mhnbShake 0.5s ease-in-out infinite;
}

.mhnb-animation-zoom .mhnb-scrolling-text {
    animation: mhnbZoom 3s ease-in-out infinite;
}

.mhnb-animation-flip .mhnb-scrolling-text {
    animation: mhnbFlip 4s ease-in-out infinite;
}

.mhnb-animation-rotate .mhnb-scrolling-text {
    animation: mhnbRotate 5s linear infinite;
}

@keyframes mhnbFadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes mhnbBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes mhnbTypewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes mhnbBlink {
    from, to { border-color: transparent; }
    50% { border-color: #fff; }
}

@keyframes mhnbWave {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-5px); }
    75% { transform: translateY(5px); }
}

@keyframes mhnbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes mhnbGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.5); }
    50% { text-shadow: 0 0 20px rgba(255,255,255,1); }
}

@keyframes mhnbShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes mhnbZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes mhnbFlip {
    0%, 100% { transform: rotateY(0); }
    50% { transform: rotateY(180deg); }
}

@keyframes mhnbRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .mhnb-notice-bar {
        padding: 6px 10px;
        font-size: 14px;
    }
    
    .mhnb-notice-label {
        padding: 3px 8px;
        font-size: 12px;
        margin-right: 10px;
    }
    
    .mhnb-scrolling-text {
        animation-duration: 25s !important;
    }
}

@media (max-width: 480px) {
    .mhnb-notice-bar {
        padding: 5px 8px;
        font-size: 13px;
    }
    
    .mhnb-notice-label {
        padding: 2px 6px;
        font-size: 11px;
        margin-right: 8px;
    }
}

/* Pause on hover */
.mhnb-notice-bar:hover .mhnb-scrolling-text {
    animation-play-state: paused;
}

/* Dooplay compatibility */
.dooplay .mhnb-notice-bar {
    position: relative;
    z-index: 999;
}