/* Explain: Base styles, responsive adjustments, and global utility classes. */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

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

* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea,
label {
    touch-action: manipulation;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img,
video {
    max-width: 100%;
}

[x-cloak] {
    display: none !important;
}

@keyframes bookPageTurn {
    0% {
        opacity: 0.15;
        transform: perspective(1800px) rotateY(-7deg) translateX(26px);
        transform-origin: right center;
    }

    100% {
        opacity: 1;
        transform: perspective(1800px) rotateY(0) translateX(0);
        transform-origin: right center;
    }
}

main {
    display: block;
    animation: none !important;
    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
}

.chat-bg-pattern {
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.83v58.34h-58.34v-58.34h57.51zm-40.483 45.474c-.218.423-.343.896-.343 1.393 0 1.767 1.433 3.2 3.2 3.2s3.2-1.433 3.2-3.2c0-.497-.125-.97-.343-1.393.423-.218.896-.343 1.393-.343 1.767 0 3.2 1.433 3.2 3.2s-1.433 3.2-3.2 3.2c-.497 0-.97-.125-1.393-.343-.218.423-.343.896-.343 1.393 0 1.767-1.433 3.2-3.2 3.2s-3.2-1.433-3.2-3.2c0-.497.125-.97.343-1.393-.423.218-.896.343-1.393.343-1.767 0-3.2 1.433-3.2 3.2s1.433-3.2 3.2-3.2c.497 0 .97-.125 1.393.343.218-.423.343-.896.343-1.393 0-1.767-1.433-3.2-3.2-3.2s-3.2 1.433-3.2 3.2c0 .497.125.97.343 1.393-.423-.218-.896-.343-1.393-.343-1.767 0-3.2 1.433-3.2 3.2s1.433 3.2 3.2 3.2c.497 0 .97-.125 1.393-.343z' fill='%23d0c9c0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

@media (max-width: 768px) {
    main {
        animation-duration: 0.38s;
    }

    .blur-3xl,
    .blur-\[100px\],
    .blur-\[120px\],
    .blur-2xl {
        display: none !important;
    }

    .backdrop-blur-xl,
    .backdrop-blur-lg,
    .backdrop-blur-md {
        backdrop-filter: blur(7px) !important;
    }

    .hover\:-translate-y-1:hover,
    .hover\:-translate-y-0\.5:hover,
    .hover\:scale-105:hover,
    .hover\:scale-110:hover {
        transform: none !important;
    }

    .overflow-x-auto {
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}