@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../assets/fonts/montserrat-latin-var.woff2") format("woff2");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../assets/fonts/montserrat-latin-ext-var.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../assets/fonts/hanken-grotesk-latin-ext-var.woff2") format("woff2");
}
@font-face {
    font-family: "Satoshi";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../assets/fonts/satoshi-var.woff2") format("woff2");
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body.toplevel_page_ezy-ai-dashboard #wpcontent {
    padding-left: 0 !important;
}
body.toplevel_page_ezy-ai-dashboard #wpbody-content {
    padding-bottom: 0;
}
body.toplevel_page_ezy-ai-dashboard .wrap.ezy-ai-wrap {
    margin: 0;
    padding: 0;
    max-width: none;
}
@media screen and (max-width: 782px) {
    body.toplevel_page_ezy-ai-dashboard #wpbody {
        padding-top: 0;
    }
    body.toplevel_page_ezy-ai-dashboard #wpbody-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.ezy-ai-app {
    position: relative;
    color: #e5e7eb;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: calc(100vh - 32px);
    padding: clamp(14px, 2.5vw, 32px);
    margin: 0 auto;
    overflow-x: hidden;
    z-index: 0;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
}

.ezy-ai-app .glass-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.ezy-ai-app .glass-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.ezy-ai-app .glass-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.ezy-ai-app .glass-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ezy-ai-app::before {
    content: "";
    position: fixed;
    top: 32px;
    left: 160px;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: #000 url("../assets/backgrounds/main-background.webp") top center / cover no-repeat;
    pointer-events: none;
}

.ezy-ai-app::after {
    content: "";
    position: fixed;
    top: 32px;
    left: 160px;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 25%),
        linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%),
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

@media (max-width: 960px) {
    .ezy-ai-app::before,
    .ezy-ai-app::after {
        left: 36px;
    }
}

@media (max-width: 782px) {
    .ezy-ai-app::before,
    .ezy-ai-app::after {
        left: 0;
        top: 46px;
    }
    .ezy-ai-app::before {
        background-image: url("../assets/backgrounds/main-background-portrait.webp");
    }
}

body.folded .ezy-ai-app::before,
body.folded .ezy-ai-app::after {
    left: 36px;
}

.ezy-ai-app *,
.ezy-ai-app *::before,
.ezy-ai-app *::after {
    box-sizing: border-box;
}

.ezy-ai-app h1,
.ezy-ai-app h2,
.ezy-ai-app h3,
.ezy-ai-app h4,
.ezy-ai-app p,
.ezy-ai-app ul,
.ezy-ai-app ol,
.ezy-ai-app li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ezy-ai-app button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.ezy-ai-app a {
    color: inherit;
    text-decoration: none;
}