/* Luxe Menu Platform Custom Stylesheet */

/* Material Symbols Outlined Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Custom horizontal and vertical scrollbars */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e4e2e2;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c4c7c7;
}

/* Custom elevation / ambient shadow styles */
.elevation-1 {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tonal-elevation {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.custom-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Input Tray Style (bottom-only border that thickens on focus) */
.input-tray, .minimalist-tray {
    border: none;
    border-bottom: 1px solid #747878;
    background: transparent;
    transition: border-bottom-width 0.2s ease, border-color 0.2s ease;
}

.input-tray:focus, .minimalist-tray:focus {
    border-bottom-width: 2px;
    border-color: #000000;
    box-shadow: none;
    outline: none;
}

/* Page transitions & custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* Body customizations */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}