/* Custom CSS extracted from index.html */

/* Marquee Animation */
.animate-marquee {
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: marquee-484403f8;
    animation-timing-function: linear
}

@keyframes marquee-484403f8 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

.animate-marquee {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform
}

/* Splide Slider Styles */
.splide .splide__track {
    overflow: visible
}

.splide .splide__slide__row {
    position: relative;
    z-index: 20
}

.splide .splide__slide__row:has(:hover) {
    z-index: 30
}

/* Slide Position Styles */
.slide[data-position="-5"] {
    rotate: -150deg;
    translate: -81% 219%;
    z-index: 10
}

.slide[data-position="-4"] {
    rotate: -120deg;
    translate: -130% 177%;
    z-index: 11
}

.slide[data-position="-3"] {
    rotate: -90deg;
    translate: -145% 123%;
    z-index: 12
}

.slide[data-position="-2"] {
    rotate: -60deg;
    translate: -130% 69%;
    z-index: 13
}

.slide[data-position="-1"] {
    rotate: -30deg;
    translate: -81% 27%;
    z-index: 14
}

.slide[data-position="0"] {
    rotate: 0deg;
    translate: 0 0;
    z-index: 15
}

.slide[data-position="1"] {
    rotate: 30deg;
    translate: 81% 27%;
    z-index: 14
}

.slide[data-position="2"] {
    rotate: 60deg;
    translate: 130% 69%;
    z-index: 13
}

.slide[data-position="3"] {
    rotate: 90deg;
    translate: 145% 123%;
    z-index: 12
}

.slide[data-position="4"] {
    rotate: 120deg;
    translate: 130% 177%;
    z-index: 11
}

.slide[data-position="5"] {
    rotate: 150deg;
    translate: 81% 219%;
    z-index: 10
}

.slide[data-position="-6"],
.slide[data-position="6"] {
    rotate: 180deg;
    translate: 0 246%;
    z-index: 9
}

/* Gradient Border Animation */
@property --mask {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg
}

.gradient-border:after {
    animation: mask-rotate-9493d8c6 var(--animationSpeed) linear infinite;
    animation-delay: var(--animation-delay);
    -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(#fff, #fff), conic-gradient(from var(--mask), transparent, #000 30%, transparent 100%);
    mask-image: linear-gradient(#fff0, #fff0), linear-gradient(#fff, #fff), conic-gradient(from var(--mask), transparent, #000 30%, transparent 100%)
}

@keyframes mask-rotate-9493d8c6 {
    to {
        --mask: 1turn
    }
}

/* Gradient Border Styles */
.gradient-border,
.gradient-border:before {
    border-radius: calc(var(--v54c331d8)*1px)
}

.gradient-border:after {
    background-image: var(--f9852534);
    background-position: 50%;
    background-size: calc(100% + var(--v07269303)*2px) calc(100% + var(--v07269303)*2px);
    border: calc(var(--v07269303)*1px) solid transparent;
    border-radius: calc(var(--v54c331d8)*1px + var(--v07269303)*1px);
    content: "";
    height: calc(100% + var(--v07269303)*2px);
    inset: calc(var(--v07269303)*-1px);
    -webkit-mask-clip: padding-box, border-box, border-box;
    mask-clip: padding-box, border-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(#fff, #fff);
    mask-image: linear-gradient(#fff0, #fff0), linear-gradient(#fff, #fff);
    opacity: 0;
    position: absolute;
    transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
    width: calc(100% + var(--v07269303)*2px);
    z-index: -10
}

.gradient-border[data-enabled=true]:after {
    opacity: 1
}

/* FAQ Accordion Transitions */
#faq [role="region"] .overflow-hidden {
    transition: height 0.3s ease, opacity 0.3s ease;
}

/* Plus/Minus icon animation */
#faq button .relative.aspect-square>div {
    transition: transform 0.3s ease;
}

#faq button .relative.aspect-square.is-open>div:first-child {
    transform: translateY(-50%) rotate(90deg) scaleX(0) !important;
}

/* Fix autofill input text color for login/register forms */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #000 !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Navbar mobile fix - ensure proper responsive behavior */
@media not all and (min-width: 64rem) {
    /* Hide desktop navigation on mobile */
    nav .max-lg\:hidden,
    nav ul.max-lg\:hidden,
    nav div.max-lg\:hidden {
        display: none !important;
    }
    
    /* Show mobile menu button */
    nav button.lg\:hidden {
        display: flex !important;
    }
}

@media (min-width: 64rem) {
    /* Hide mobile menu button on desktop */
    nav button.lg\:hidden {
        display: none !important;
    }
    
    /* Show desktop navigation */
    nav ul.max-lg\:hidden,
    nav div.max-lg\:hidden {
        display: flex !important;
    }
}

/* Ensure logo is always visible */
nav a[aria-label="Nexastream IPTV - Home"] img,
nav a[title="Nexastream - Premium IPTV Service"] img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}