/* Google Font for Bengali */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;700&display=swap');

body { font-family: 'Noto Sans Bengali', sans-serif; background-color: #f4f7f6; margin: 0; padding: 0; color: #333; }
.main-container { padding-bottom: 80px; }
.header { background: linear-gradient(135deg, #00AEEF, #0072BC); color: white; padding: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; font-size: 24px; }
.user-profile { display: flex; align-items: center; margin-top: 20px; }
.user-profile img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid white; margin-right: 15px; object-fit: cover; }
.user-info h4 { margin: 0; font-weight: 700; }
.user-info p { margin: 0; font-size: 14px; }
.balance-btn { background-color: white; color: #0072BC; border: none; padding: 8px 16px; border-radius: 20px; font-weight: 500; font-size: 14px; margin-left: auto; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; text-align: center; }
.menu-item { background-color: white; padding: 15px 5px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-decoration: none; color: #333; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.2s; }
.menu-item:hover { transform: translateY(-5px); }
.menu-item img { width: 40px; height: 40px; margin-bottom: 8px; }
.menu-item span { font-size: 12px; font-weight: 500; display: block; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; display: flex; justify-content: space-around; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 10px 0; z-index: 1000; }
.nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #777; }
.nav-item i { font-size: 22px; }
.nav-item span { font-size: 11px; margin-top: 4px; }
.nav-item.active { color: #0072BC; }

/* Slider Styles */
.slider-container { padding: 0 20px 20px 20px; position: relative; }
.swiper { width: 100%; border-radius: 10px; aspect-ratio: 16 / 7; /* Controls height */ }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; /* Fills space */ }
.swiper-pagination-bullet { background-color: #ffffff; opacity: 0.7; }
.swiper-pagination-bullet-active { background-color: #007aff; opacity: 1; }


.balance-btn {
    cursor: pointer; /* Makes the mouse cursor a pointer, indicating it's clickable */
    user-select: none; /* Prevents the text from being selected when clicked */
    min-width: 120px; /* Ensures the button has a minimum width */
    text-align: center; /* Centers the text inside */
}

/* ===== NEW STYLES for Dark Offcanvas Sidebar ===== */
.offcanvas.text-bg-dark .list-group-item-action {
    transition: background-color 0.2s;
}
.offcanvas.text-bg-dark .list-group-item-action:hover,
.offcanvas.text-bg-dark .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== NEW: Style for User Sidebar Size on Mobile ===== */
.offcanvas.offcanvas-start {
    /* সাইডবারের একটি নির্দিষ্ট প্রস্থ নির্ধারণ করা হলো */
    width: 200px; 
    
    /* ঐচ্ছিক: সাইডবারের ডান পাশে একটি হালকা বর্ডার */
    border-right: 1px solid #495057;
}