/* 
   LINKARSYS V7 - ASSET DETAIL PREMIUM 
   Style "Glassmorphism" & Responsive Grid
*/

/* 1. LAYOUT & RESPONSIVENESS */
.saas-app-shell {
    padding-top: 100px;
    position: relative;
    min-height: 100vh;
    display: block !important;
    /* Override marketplace grid */
    grid-template-columns: none !important;
    max-width: 100% !important;
}

/* Related Assets Grid */
.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.detail-shell {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Content 66% | Sidebar 33% */
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 60px 24px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .detail-shell {
        grid-template-columns: 1fr;
        /* Stack on Tablet/Mobile */
        gap: 32px;
    }

    .detail-main {
        order: 2;
        /* Content below sidebar on mobile for better conversion? Or keep standard? Standard is usually Content then Sidebar, but for Sales... let's keep Content 1st, Sidebar 2nd or use Sticky Bottom. Let's stick to standard order. */
        order: 1;
    }

    .detail-sidebar {
        order: 2;
    }
}

/* 2. HERO IMMERSIVE */
.hero-detail-premium {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 40px;
    padding: 60px 40px;
    background: var(--gradient-hero);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-domain {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -2px;
    background: linear-gradient(to right, #fff, var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .hero-domain {
        font-size: 2.2rem;
    }

    .hero-detail-premium {
        padding: 40px 20px;
    }
}

/* 3. METRICS GRID */
.metrics-hub-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card-luxe {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: transform 0.2s, background 0.2s;
    backdrop-filter: blur(10px);
}

.metric-card-luxe:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
}

.m-val {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.m-lbl {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .metrics-hub-premium {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4. GLASS PANELS (Description & Content) */
.glass-panel {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    backdrop-filter: blur(12px);
}

.section-title-premium {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title-premium i {
    color: var(--accent);
}

/* 5. SIDEBAR & ORDER CARD */
.detail-sidebar {
    position: relative;
}

.sticky-order-premium {
    position: sticky;
    top: 120px;
    transition: all 0.3s ease;
}

.order-card-luxe {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
}

.price-tag {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.price-subt {
    display: block;
    color: var(--success);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.commander-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.commander-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
}

/* 6. UTILS */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 4px;
}

/* 7. RELATED ASSETS SECTION (Full Width) */
.related-assets-wrapper {
    background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);
    padding: 80px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.saas-container-centered {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header-centered {
    text-align: center;
    margin-bottom: 50px;
}

.premium-badge-lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--saas-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title-premium-lg {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -1px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Dark Mode Card Overrides */
.campaign-card-premium.dark-mode {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.campaign-card-premium.dark-mode .domain-name {
    color: #fff;
}

.campaign-card-premium.dark-mode .campaign-title {
    color: #cbd5e1;
}

.campaign-card-premium.dark-mode:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    transform: translateY(-5px);
}