/* ==========================================
   1. Base Mobile App Settings
   ========================================== */
body {
    /* ইউজার যাতে টেক্সট সিলেক্ট করে কপি করতে না পারে (অ্যাপের মতো ফীল দিতে) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* বাটনে ক্লিক করলে ডিফল্ট যে নীল রঙের হাইলাইট বা বক্স আসে, সেটা বন্ধ করা */
    -webkit-tap-highlight-color: transparent;
    
    /* আইফোনে স্মুথ স্ক্রোলিং এর জন্য */
    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   2. Hide Scrollbars (Clean UI)
   ========================================== */
/* Chrome, Safari এবং Opera এর জন্য স্ক্রোলবার লুকানো */
::-webkit-scrollbar {
    display: none;
}

/* IE, Edge এবং Firefox এর জন্য স্ক্রোলবার লুকানো */
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ==========================================
   3. Custom Utility Classes
   ========================================== */
/* আইফোন বা লেটেস্ট অ্যান্ড্রয়েডের নিচে যে হোম বার (Gesture bar) থাকে, 
   সেটার সাথে যেন আমাদের মেনু মিশে না যায়, তার জন্য Safe Area Padding 
*/
.pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
}

/* ==========================================
   4. Custom Animations
   ========================================== */
/* পেজ লোড হওয়ার সময় সুন্দর করে ফেড-ইন (Fade-in) হওয়ার অ্যানিমেশন */
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   5. SweetAlert2 Custom Overrides
   ========================================== */
/* টেলিগ্রামের ডার্ক/লাইট থিমের সাথে সুইট অ্যালার্টকে মানিয়ে নেওয়ার জন্য */
.swal2-container {
    z-index: 99999 !important; /* মেনুর উপরে দেখানোর জন্য */
}

.swal2-popup {
    border: 1px solid var(--tg-theme-hint-color, rgba(153, 153, 153, 0.2)) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* ইনপুট ফিল্ডের ফোকাস রিং ঠিক করা */
input:focus {
    outline: none;
}