/* Custom CSS extracted from index.html */

/* ===== BitCast brand theme tokens =====
   Central palette for the dark-purple surfaces + orange accent used across
   the site. Consume with var(--token, fallback) so components stay safe even
   if this (deferred) sheet hasn't applied yet. */
:root {
    --bc-orange: #ffa900;
    --bc-orange-strong: #ff7a18;
    --bc-orange-grad: linear-gradient(135deg, #ffa900 0%, #ff7a18 100%);
    --bc-on-accent: #1a1430;
    --bc-surface: #181430;
    --bc-surface-2: #261f47;
    --bc-card-grad: linear-gradient(150deg, rgba(38, 31, 71, 0.92) 0%, rgba(24, 20, 48, 0.96) 100%);
    --bc-card-grad-selected: linear-gradient(150deg, rgba(58, 42, 24, 0.55) 0%, rgba(28, 22, 50, 0.96) 60%);
    --bc-card-border: rgba(255, 255, 255, 0.09);
    --bc-text: #f4f3fb;
    --bc-text-muted: rgba(244, 243, 251, 0.58);
    /* Form surfaces (checkout, etc.) */
    --bc-panel: linear-gradient(160deg, rgba(34, 28, 64, 0.60) 0%, rgba(17, 18, 42, 0.74) 100%);
    --bc-panel-border: rgba(255, 255, 255, 0.10);
    --bc-field-bg: rgba(255, 255, 255, 0.055);
    --bc-field-border: rgba(255, 255, 255, 0.14);
    --bc-field-focus: rgba(255, 169, 0, 0.7);
    --bc-label: rgba(244, 243, 251, 0.82);
}

/* 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;
}

/* Attention pulse for primary "BUY NOW" CTAs (orange glow). */
@keyframes bcBuyPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(255, 138, 0, 0.45); }
    50%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 24px 5px rgba(255, 138, 0, 0.6); }
}
.bc-buy-pulse {
    animation: bcBuyPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .bc-buy-pulse { animation: none !important; }
}

/* Primary hero/guide CTAs follow the active brand accent for rebranded
   instances (bg-btn-1 carries the legacy compiled orange). Scoped off the
   build-time data-brand so the original nexastream CTAs are left exactly as-is. */
html:not([data-brand="nexastream"]) .bg-btn-1 { background: var(--bc-orange-grad) !important; }
html:not([data-brand="nexastream"]) .bg-btn-1.text-primary { color: var(--bc-on-accent) !important; }