/* Browser Mockup Container */
[data-cb-type="browser-mockup"] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 120px;
    position: relative;
}

[data-cb-type="browser-mockup"] .app-showcase {
    perspective: 2000px;
    position: relative;
    animation: fadeInScale 1.4s ease-out;
}

[data-cb-type="browser-mockup"] .app-container {
    position: relative;
    transform: rotateX(8deg) rotateY(-8deg);
    transition: transform 0.6s ease;
    max-width: 1100px;
    margin: 0 auto;
}

[data-cb-type="browser-mockup"] .app-showcase:hover .app-container {
    transform: rotateX(4deg) rotateY(-4deg) scale(1.02);
}

[data-cb-type="browser-mockup"] .app-window {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.15),
        0 20px 60px rgba(99, 102, 241, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-cb-type="browser-mockup"] .window-header {
    background: #f8fafc;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
}

[data-cb-type="browser-mockup"] .window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

[data-cb-type="browser-mockup"] .window-dot:nth-child(1) {
    background: #ef4444;
}

[data-cb-type="browser-mockup"] .window-dot:nth-child(2) {
    background: #f59e0b;
}

[data-cb-type="browser-mockup"] .window-dot:nth-child(3) {
    background: #10b981;
}

[data-cb-type="browser-mockup"] .app-screenshot {
    width: 100%;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-cb-type="browser-mockup"] .screenshot-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dark Mode Support */
[data-cb-skin="dark"] [data-cb-type="browser-mockup"] .app-window {
    background: #1f2937;
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 20px 60px rgba(99, 102, 241, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-cb-skin="dark"] [data-cb-type="browser-mockup"] .window-header {
    background: #111827;
    border-bottom: 1px solid #374151;
}

[data-cb-skin="dark"] [data-cb-type="browser-mockup"] .app-screenshot {
    background: #111827;
}

/* Responsive */
@media (max-width: 768px) {
    [data-cb-type="browser-mockup"] {
        padding: 40px 20px 60px;
    }

    [data-cb-type="browser-mockup"] .app-container {
        transform: rotateX(4deg) rotateY(0deg);
    }

    [data-cb-type="browser-mockup"] .app-showcase:hover .app-container {
        transform: rotateX(2deg) rotateY(0deg) scale(1.01);
    }
}