/* ================================================================
   LIBGRAM PREMIUM DESIGN SYSTEM v2.0
   Consolidated & Bug-Fixed
   ================================================================
*/

:root {
    --accent: #FF0032;
    --accent-glow: rgba(255, 0, 50, 0.15);
    --slate-900: #0f172a;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 1. Base Fixes & Selection */
body {
    background-color: #ffffff;
    color: var(--slate-900);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    user-select: none;
}

/* Allow selection for specific data like Order IDs or Support Links */
input, textarea, .selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* 2. Premium Navigation (Glassmorphism) */
.glass-nav {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: all 0.4s var(--ease-premium);
}

/* 3. Mobile Menu - Smooth Circular Reveal */
#mobile-menu {
    clip-path: circle(0% at 100% 0%);
    transition: clip-path 0.8s var(--ease-premium);
    z-index: 101;
    will-change: clip-path;
}

#mobile-menu.active {
    clip-path: circle(150% at 100% 0%);
}

.nav-link-mobile {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s var(--ease-premium);
}

#mobile-menu.active .nav-link-mobile {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Elite Service Cards */
.pkg-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 2.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.6s var(--ease-premium);
    overflow: hidden;
    z-index: 1;
}

.pkg-card:hover {
    border-color: rgba(15, 23, 42, 0.2);
    transform: translateY(-5px);
}

/* The Selected State - "The Aura" */
.selected-card {
    border-color: var(--accent) !important;
    background: #ffffff;
    box-shadow: 0 40px 80px -20px var(--accent-glow) !important;
    transform: translateY(-12px) scale(1.02);
    z-index: 10;
}

.selected-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    padding: 2px; /* Border thickness */
    background: linear-gradient(135deg, var(--accent), #ff7b93);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* 5. Typography & Badges */
.text-gradient {
    background: linear-gradient(135deg, #FF0032 0%, #FF4D4D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-badge {
    width: 56px; height: 56px;
    border-radius: 18px;
    background: #f8fafc;
    color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: all 0.5s var(--ease-premium);
}

.selected-card .icon-badge {
    background: var(--accent);
    color: white;
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 15px 30px -5px var(--accent-glow);
}

/* 6. Advanced Animations */
@keyframes shine-sweep {
    0% { transform: translateX(-150%) skewX(-25deg); }
    100% { transform: translateX(250%) skewX(-25deg); }
}

.shine-hover { position: relative; overflow: hidden; }
.shine-hover::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-150%) skewX(-25deg);
    pointer-events: none;
}

.shine-hover:hover::after {
    animation: shine-sweep 0.8s var(--ease-premium);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animate-float-premium {
    animation: float 6s ease-in-out infinite;
}

/* Grid Background Pattern */
.bg-grid-premium {
    background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1.5px, transparent 1.5px);
    background-size: 40px 40px;
}