:root {
--bottom-nav-bg: white; /* Light mode */
}

body.dark-mode {
--bottom-nav-bg: black; /* Dark mode */
background-color: #000000;
color: #FFD700;
}

.bottom-nav {
position: fixed;
bottom: 0; /* အမြဲအောက်ဆုံး */
left: 0;
right: 0;
background-color: var(--bottom-nav-bg, #111111);
border-top: 1px solid #FFD700;
padding: 0.75rem 0; /* အတွင်း padding ထည့်ပြီး အနားလေးများစေ */
display: flex;
justify-content: space-around;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5); /* ထပ်ပြီး အနက်ရောင်အရောင်ထည့် */
z-index: 1000; /* အခြားအရာတွေအထက်မှာပေါ်အောင် */
}

.bottom-nav a {
color: #FFD700;
text-decoration: none;
font-weight: bold;
padding: 6px 12px;
border-radius: 8px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.bottom-nav a:hover {
background-color: rgba(255, 215, 0, 0.15);
transform: translateY(-2px);
}

.bottom-nav a.active {
background-color: rgba(255, 215, 0, 0.25);
box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
text-decoration: none;
                       }