/**
 * ====================================================================
 * Pavo Admin Dashboard - Wizards Component Styles
 * Copyright © 2024 RefineThemes.com
 * Author: Saleem Raza
 * Founder: RefineThemes.com
 * License: MIT
 * ====================================================================
 */

:root {
            --neon-blue: #00f2fe;
            --neon-pink: #fe00ea;
            --cyber-dark: #0f0e17;
            --cyber-light: #fffffe;
        }
        
.cyber-wizard {
            background: rgba(15, 14, 23, 0.8);
            border: 1px solid var(--neon-blue);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
             box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 
              0 4px 6px -2px rgba(0,0,0,0.05);
        }
        
        .cyber-wizard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
            z-index: 10;
        }
        
        .cyber-title {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            background: linear-gradient(to right, var(--neon-blue), var(--neon-pink));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
        }
        
        .cyber-input {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 14px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            border: 2px solid #00f1fe7a !important;
            box-shadow: 0 0 10px rgba(74, 233, 247, 0.7);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .cyber-input:focus {
            border-color: var(--neon-blue);
            box-shadow: 0 0 0 0.25rem rgba(0, 242, 254, 0.25);
            background: rgba(0, 0, 0, 0.7);
            color: white;
        }
        .cyber-input::placeholder{
            color: var(--cyber-light);
            opacity: 0.3;
        }
        .cyber-label {
            color: var(--neon-blue);
            font-weight: 500;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }
        
        .cyber-btn {
            background: transparent;
            border: 2px solid var(--neon-blue);
            color: var(--neon-blue);
            padding: 0.75rem 2rem;
            font-family: 'Orbitron', sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;
            border-radius: 0;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .cyber-btn:hover {
            color: var(--cyber-dark);
            background: var(--neon-blue);
            box-shadow: 0 0 10px var(--neon-blue),
                        0 0 20px var(--neon-blue);
        }
        
        .cyber-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.4), transparent);
            transition: all 0.5s ease;
        }
        
        .cyber-btn:hover::before {
            left: 100%;
        }
        
        /* SmartWizard Customization */
        .sw-theme-dots .sw-toolbar {
            background: rgba(15, 14, 23, 0.9) !important;
            border-top: 1px solid rgba(0, 242, 254, 0.3) !important;
        }
        
        .sw-theme-dots .sw-step-title {
            color: var(--neon-blue) !important;
            font-family: 'Orbitron', sans-serif !important;
        }
        
        .sw-theme-dots > ul.step-anchor > li > a::before {
            background: var(--neon-blue) !important;
            box-shadow: 0 0 5px var(--neon-blue);
        }
        
        .sw-theme-dots > ul.step-anchor > li.active > a::before {
            background: var(--neon-pink) !important;
            box-shadow: 0 0 10px var(--neon-pink);
        }
        
        .sw-theme-dots > ul.step-anchor > li.done > a::before {
            background: var(--neon-pink) !important;
            box-shadow: 0 0 8px var(--neon-pink);
        }
        
        .sw-theme-dots .sw-progress-bar {
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)) !important;
            height: 2px !important;
        }
        .sw .nav-tabs{
            border-bottom: none;
        }
        /* Enhanced Jarvis Circle Meter Styles */
        .sw-theme-dots .jarvis-meter-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
            position: relative;
        }
        .sw>.tab-content>.tab-pane{
            padding:0px;
        }
        .sw-theme-dots .circle-meter {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .sw-theme-dots .meter-bg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid rgba(0, 242, 254, 0.1);
            box-shadow: 
                0 0 15px rgba(0, 242, 254, 0.3),
                inset 0 0 15px rgba(0, 242, 254, 0.2);
            position: relative;
            overflow: hidden;
        }

        .sw-theme-dots .meter-fill {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(
                var(--neon-blue) 0%,
                var(--neon-pink) 100%
            );
            clip-path: circle(50% at 50% 50%);
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            transform: rotate(-90deg);
            transform-origin: center;
        }

        .sw-theme-dots .meter-inner {
            position: absolute;
            width: 76%;
            height: 76%;
            background: rgba(15, 14, 23, 0.9);
            border-radius: 50%;
            top: 12%;
            left: 12%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--neon-blue);
            font-size: 28px;
            font-weight: bold;
            text-shadow: 0 0 10px var(--neon-blue);
            box-shadow: 
                inset 0 0 20px rgba(0, 242, 254, 0.3),
                0 0 10px rgba(0, 242, 254, 0.2);
            font-family: 'Orbitron', sans-serif;
            z-index: 2;
        }

        .sw-theme-dots .meter-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgba(0, 242, 254, 0.4);
            animation: pulse 2s ease-out infinite;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .sw-theme-dots .meter-dots {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: 3;
        }

        .sw-theme-dots .meter-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--neon-blue);
            border-radius: 50%;
            box-shadow: 0 0 5px var(--neon-blue);
            transform-origin: 75px 75px;
            transition: all 0.3s ease;
        }

        /* Active dots that light up with progress */
        .sw-theme-dots .meter-dot.active {
            background: var(--neon-pink);
            box-shadow: 0 0 10px var(--neon-pink);
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.2); opacity: 0; }
        }

        /* Create 12 dots around the circle */
        .sw-theme-dots .meter-dot:nth-child(1) { transform: rotate(0deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(2) { transform: rotate(30deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(3) { transform: rotate(60deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(4) { transform: rotate(90deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(5) { transform: rotate(120deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(6) { transform: rotate(150deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(7) { transform: rotate(180deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(8) { transform: rotate(210deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(9) { transform: rotate(240deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(10) { transform: rotate(270deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(11) { transform: rotate(300deg) translateY(-65px); }
        .sw-theme-dots .meter-dot:nth-child(12) { transform: rotate(330deg) translateY(-65px); }
        
        /* Progress milestones */
        .sw-theme-dots .progress-milestone {
            position: absolute;
            color: var(--neon-blue);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            text-shadow: 0 0 5px var(--neon-blue);
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .sw-theme-dots .progress-milestone.active {
            opacity: 1;
        }
        
        .sw-theme-dots .milestone-25 {
            top: 15%;
            left: 85%;
        }
        
        .sw-theme-dots .milestone-50 {
            top: 85%;
            left: 85%;
        }
        
        .sw-theme-dots .milestone-75 {
            top: 85%;
            left: 15%;
        }
        
        .sw-theme-dots .milestone-100 {
            top: 15%;
            left: 15%;
        }
        
        .glow-text {
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
            }
            to {
                text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 30px var(--neon-pink);
            }
        }
        
            .sw-theme-dots .nav .nav-link,
            .sw-theme-dots .nav .nav-link.active{
                top:-30px;
            }
            .sw-theme-dots > .nav .nav-link:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 16px -4px rgba(0,0,0,0.15);
            }
            .sw-theme-dots > .nav .nav-link.active{
                background-color: rgba(15, 14, 23, 0.5) !important;
                border: 2px solid #00f1fe7a !important;
                box-shadow: 0 0 10px rgba(74, 233, 247, 0.7);
                transition: transform 0.3s, box-shadow 0.3s;
                border-radius: 14px !important;
            }
            .sw-theme-dots>.nav::before{
                background-color: rgba(15, 14, 23, 0.9) !important;
                border-color: var(--neon-blue) !important;
                top:-16px;
            }
            .sw-theme-dots > .nav .nav-link.active::after{
                background-color: rgba(15, 14, 23, 0.9) !important;
                border-color: var(--neon-blue) !important;
                opacity: 0.7;
                top:-50px;
            }
            .sw-theme-dots>.nav .nav-link.done::after{
                margin-top:-8px;
                background-color: rgba(0, 242, 254, 0.8);
                border-color: #3333337a !important;
                opacity: 1;
            }
            .form-check .form-check-input{
                width:10px !important;
                height:10px !important;
                padding:10px !important;
                
            }
            .sw .toolbar>.sw-btn{
                background-color: rgba(0, 242, 254, 0.8) !important;
                color:#fff !important;
            }
            #network {
            width: 100%;
            height: auto !important;
            position: relative;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            margin-bottom: 20px;
        }
        
        .dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #4a6cf7;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(74, 108, 247, 0.7);
        }
        
        .string {
            position: absolute;
            height: 1px;
            background: linear-gradient(to right, 
                          rgba(0, 242, 254, 0.8), 
                          rgba(74, 108, 247, 0.2));
            transform-origin: left center;
            z-index: 1;
        }
        
        .pulse {
            animation: pulse 2s infinite ease-in-out;
        }
        
        @keyframes pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.2); }
        }