/**
 * =============================================================================
 * প্রজেক্টের নাম: ClickNet BD (মাইক্রো-টাস্ক ও আর্নিং প্ল্যাটফর্ম)
 * ফাইল: assets/css/style.css
 * উদ্দেশ্য: Tailwind CSS-এর সাথে সামঞ্জস্য রেখে স্ক্রিনশট অনুযায়ী কালার গ্রেডিয়েন্ট, 
 *           প্রোফাইল ডটেড ব্যাকগ্রাউন্ড, ড্রয়ার অ্যানিমেশন ও ফ্লোটিং বটম বার স্টাইল।
 * =============================================================================
 */

/* =============================================================================
   ১. গুগল ফন্টস ইমপোর্ট (ইংরেজি ও বাংলা অক্ষরের জন্য Inter ও Hind Siliguri)
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* =============================================================================
   ২. গ্লোবাল বেসিক সেটিংস ও মোবাইল টাচ অপ্টিমাইজেশন
   ============================================================================= */
:root {
  --primary-teal-start: #00BFA5;
  --primary-teal-end: #00A86B;
  --warning-red-start: #FF5252;
  --warning-red-end: #FF7675;
  --profile-bg-start: #1A1C38;
  --profile-bg-end: #0F1026;
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #F8FAFC;
  color: #1E293B;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* =============================================================================
   ৩. স্ক্রিনশট কালার গ্রেডিয়েন্টস (Color Gradients)
   ============================================================================= */

/* টপ হেডার ও ব্র্যান্ড ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট (স্ক্রিনশট ১ অনুযায়ী টিল-গ্রিন) */
.bg-teal-gradient {
  background: linear-gradient(135deg, var(--primary-teal-start) 0%, var(--primary-teal-end) 100%);
}

/* ইনঅ্যাক্টিভ একাউন্ট সতর্কবার্তা ব্যানার (স্ক্রিনশট ১ অনুযায়ী লাল-কমলা গ্রেডিয়েন্ট) */
.bg-warning-gradient {
  background: linear-gradient(135deg, var(--warning-red-start) 0%, var(--warning-red-end) 100%);
}

/* প্রোফাইল পেজের ডার্ক নেভি ডটেড ব্যাকগ্রাউন্ড (স্ক্রিনশট ৪ অনুযায়ী) */
.bg-profile-card {
  background-color: #121530;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* টিম পেজের পার্পল-ভায়োলেট গ্রেডিয়েন্ট (স্ক্রিনশট ৫ অনুযায়ী) */
.bg-team-gradient {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #EC4899 100%);
}

/* অ্যাক্টিভেশন পেজের প্রিমিয়াম পার্পল গ্রেডিয়েন্ট বাটন */
.bg-purple-gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

/* =============================================================================
   ৪. স্ক্রলিং নোটিশ বার (Marquee Animation)
   ============================================================================= */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marqueeScroll 20s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* =============================================================================
   ৫. স্লাইডিং সাইড ড্রয়ার মেনু ও ব্যাকড্রপ অ্যানিমেশন (Sidebar Drawer)
   ============================================================================= */
.drawer-backdrop {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-panel {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   ৬. বটম ফ্লোটিং ন্যাভিগেশন বার ও সেন্ট্রাল হোম বাটন (Floating Bottom Bar)
   ============================================================================= */
.bottom-nav-dock {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

/* সেন্ট্রাল ফ্লোটিং বৃত্তাকার হোম বাটন (স্ক্রিনশটের মতো এলিভেটেড) */
.floating-home-btn {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
  transform: translateY(-24px);
  transition: all 0.2s ease-in-out;
}

.floating-home-btn:active {
  transform: translateY(-20px) scale(0.96);
}

/* =============================================================================
   ৭. কাস্টম ইউটিলিটি ক্লাস ও মসৃণ স্ক্রলবার
   ============================================================================= */
/* সূক্ষ্ম কার্ড এলিভেশন */
.card-shadow {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* স্ক্রলবার লুকানো কিন্তু স্ক্রল সক্ষম রাখা (মোবাইল ক্লিনের জন্য) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}