/* GLOBAL SETTINGS */

body {

    background: #111827;

    font-family: 'Nunito', sans-serif;

    margin: 0;

}



/* MAIN CONTAINER */

.mobile-container {

    max-width: 480px;

    margin: 0 auto;

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background: transparent !important;

}



/* BLURRED BACKGROUND IMAGE */

.mobile-container::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: url("canteen-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    filter: blur(4px);

    transform: scale(1.1);

    z-index: -2;

}



/* DARK OVERLAY */

.mobile-container::after {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    z-index: -1;

}



/* GLASS EFFECT CARDS */

.bg-white {

    background: rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

}



/* TRANSPARENT GLASS BUTTONS */

button.bg-primary {

    background-color: #000E89(71, 71, 209, 0.75) !important;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    box-shadow: 0 8px 22px rg#000E89ba(71, 71, 209, 0.4);

    transition: all 0.2s ease;

}



button.bg-primary:hover {

    background-color: #000E89(71, 71, 209, 0.9) !important;

    transform: translateY(-2px);

}



/* ANIMATIONS */

.fade-in {

    animation: fadeIn 0.3s ease-in-out;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(5px); }

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

}



#cart-modal {

    backdrop-filter: blur(8px);

}