/* ================================================================
   PRICING-COMMON.CSS - Shared styles for VPS & Proxy pricing pages
   Extracted from inline styles to reduce duplication
   ================================================================ */

/* Hero Background - Shared style for VPS, Proxy pages */
.pricing-hero,
.vps-hero,
.proxy-hero {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8f0f7 50%, #dce8f3 100%);
    position: relative;
    overflow: hidden;
}

.dark .pricing-hero,
.dark .vps-hero,
.dark .proxy-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Sub-navigation tabs - Used in both VPS and Proxy pages */
.sub-nav-tab {
    padding: 12px 24px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}

.sub-nav-tab:hover {
    color: #1e195a;
}

.sub-nav-tab.active {
    color: #1e195a;
    border-bottom-color: #f97316;
}

.dark .sub-nav-tab:hover {
    color: white;
}

.dark .sub-nav-tab.active {
    color: white;
}

/* Server/Network Illustration Animations */
@keyframes serverPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

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

.blink-led {
    animation: blink 1.5s ease-in-out infinite;
}

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

.connection-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLine 3s ease-in-out infinite;
}

@keyframes drawLine {
    0% {
        stroke-dashoffset: 100;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -100;
    }
}

/* Scrollbar hide utility */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Reveal Animation - Used by step containers */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s cubic-bezier(0.5, 0, 0, 1) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}