@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Reem+Kufi+Ink&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Reem+Kufi+Ink&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rakkas&family=Reem+Kufi+Ink&family=Reem+Kufi:wght@400..700&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');
h1, h2, h3, h4, h5, h6 {
    font-family: "Zain", sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

body {
    font-family: "Zain", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}


.nav-text {
    font-family: "Reem Kufi", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 25px !important;
}

/* Mobile Safe Area Utilities */
.safe-bottom {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem) !important;
}

.safe-bottom-margin {
    margin-bottom: max(env(safe-area-inset-bottom, 0px), 1rem) !important;
}

.fixed-with-safe-bottom {
    bottom: max(env(safe-area-inset-bottom, 0px) + 5rem, 6rem) !important;
}

/* Bottom Navigation Bar */
.bottom-nav-bar {
    background: #111010;
    border-top: 1px solid #2c2c30;
    padding: 1rem 1.5rem;
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 1rem, 1rem);
}

.bottom-nav-content {
    margin-bottom: max(env(safe-area-inset-bottom, 0px) + 6rem, 8rem);
}

/* Better mobile viewport handling */
@media (max-width: 768px) {
    .mobile-full-height {
        height: 100vh;
        height: 100dvh;
    }

    .mobile-bottom-safe {
        padding-bottom: max(env(safe-area-inset-bottom, 0px) + 2rem, 3rem) !important;
    }

    .bottom-nav-bar {
        padding: 1rem 1.5rem;
        padding-bottom: max(env(safe-area-inset-bottom, 0px) + 1rem, 2rem);
    }
}