/* Custom styles for AI-Assisted Template Store */

/* Smooth custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0b0f19;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Glassmorphism utility */
.glass-card {
    background: rgba(19, 27, 46, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Copy button toast */
.copy-badge-active {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* Interactive Device Viewport Modes for Live Preview */
.preview-desktop {
    width: 100%;
    height: calc(100vh - 64px);
    border-radius: 0;
    border: none;
}

.preview-tablet {
    width: min(768px, 94vw);
    max-width: 100%;
    height: min(900px, calc(100vh - 90px));
    margin: 12px auto;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    border: 10px solid #1e293b;
    box-sizing: border-box;
}

.preview-mobile {
    width: min(390px, 92vw);
    max-width: 100%;
    height: min(844px, calc(100vh - 90px));
    margin: 12px auto;
    border-radius: 36px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    border: 10px solid #1e293b;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .preview-tablet {
        border-width: 4px;
        border-radius: 12px;
        margin: 6px auto;
        height: calc(100vh - 76px);
    }
    .preview-mobile {
        border-width: 4px;
        border-radius: 16px;
        margin: 6px auto;
        height: calc(100vh - 76px);
    }
}