/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* Hiding scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Global Reset & Base Typography */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* Mobile Drawer Transition States */
.login-drawer {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-drawer.active {
    transform: translateY(0);
}

.login-drawer.inactive {
    transform: translateY(100%);
}

/* For desktop viewports, display the login drawer as a centered overlay modal instead of a bottom drawer */
@media (min-width: 768px) {
    .login-drawer {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) scale(0.95) !important;
        width: 100% !important;
        max-width: 440px !important;
        border-radius: 16px !important;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }
    
    .login-drawer.active {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1;
        pointer-events: auto;
    }

    .login-drawer.inactive {
        transform: translate(-50%, -50%) scale(0.95) !important;
        opacity: 0;
        pointer-events: none;
    }
}

/* Custom focus styles for inputs */
.input-focus-accent:focus {
    border-color: #69a71a;
    box-shadow: 0 0 0 1px #69a71a;
}