/* ==========================================================================
   Modern App Styles — InonDigilib
   External CSS for all modern Tailwind/Alpine pages
   ========================================================================== */

/* Glass Navigation Bar */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hero Section Background */
.header-bg {
    background-color: #312e81;
    background-image:
        radial-gradient(at 100% 0%, hsla(258, 100%, 74%, 0.4) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(333, 100%, 73%, 0.4) 0px, transparent 50%);
}

/* Brand Gradient */
.gradient-brand {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Hidden Scrollbar */
.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hero Banner (BookDetails) */
.hero-banner {
    background-color: #312e81;
    background-image:
        radial-gradient(at 0% 100%, hsla(258, 100%, 74%, 0.8) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(333, 100%, 73%, 0.8) 0px, transparent 50%);
}

.book-shadow {
    box-shadow: -15px 0 30px -10px rgba(0, 0, 0, 0.3), 5px 0 20px -5px rgba(0, 0, 0, 0.1);
}

/* Tab Content Animation */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alpine.js Cloak */
[x-cloak] {
    display: none !important;
}

/* Fade-in Animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}

/* Print Styles */
@media print {

    header,
    aside,
    .h-14.bg-white {
        display: none !important;
    }

    main,
    .flex-grow.overflow-auto {
        display: block !important;
        position: static !important;
    }

    canvas {
        box-shadow: none !important;
    }
}

/* Audio Player Waveform Animation */
@keyframes wave {
    from {
        height: 15%;
    }

    to {
        height: 85%;
    }
}