/* ================================================================
   WebsNP Premium UI Enhancement – premium-ui.css
   Elevating the visual aesthetics with modern design patterns.
   ================================================================ */

:root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --gradient-glow: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

/* ── Smooth Scrolling ── */
html {
    scroll-behavior: smooth;
}

/* ── Typography Enhancements ── */
body.websnp-frontend {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}

h1, h2, h3, h4 {
    letter-spacing: -0.025em;
}

/* ── Premium Glassmorphism ── */
.ws-card, .aff-card, .legal-update-box, .whiteframe {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ws-card:hover, .aff-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

/* ── Animated Gradient Buttons ── */
.btn-websnp-primary, .btn-primary, .mtr-btn {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.btn-websnp-primary:hover, .btn-primary:hover, .mtr-btn:hover {
    background: var(--gradient-glow) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

.btn-websnp-primary:active {
    transform: translateY(0) !important;
}

/* ── Hero Sections Glow ── */
.inner-hero, .aff-hero, .hp-hero {
    position: relative;
    background-attachment: fixed !important;
}

.inner-hero::before, .aff-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: rotate 20s linear infinite;
}

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

/* ── Navigation Refinement ── */
.websnp-navbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.85) !important;
}

.websnp-navbar nav ul.sf-menu > li > a {
    position: relative;
}

.websnp-navbar nav ul.sf-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.websnp-navbar nav ul.sf-menu > li > a:hover::after,
.websnp-navbar nav ul.sf-menu > li.current > a::after {
    transform: scaleX(1);
}

/* ── Modern Badge Glow ── */
.ws-card-badge {
    background: var(--gradient-glow) !important;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* ── Responsive Spacing ── */
@media (max-width: 768px) {
    .section-pad { padding: 40px 0; }
    h1 { font-size: 32px !important; }
}

/* ── Legal Page Polish ── */
.legal-wrapper {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
}