/* ==========================================================================
   ১. ভেরিয়েবল এবং গ্লোবাল আর্কিটেকচার (ASPX VB.NET স্পেশাল)
   ========================================================================== */
:root {
    --primary-color: #0b422a; 
    --accent-color: #e59622;  
    --text-main: #111111;
    --border-color: #ededed;
    --white: #ffffff;
    --black: #000000;
    --transition-smooth: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
}

form, #form1 {
    margin: 0 !important;
    padding: 0 !important;
}

.announcement-bar {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 400;
    max-height: 40px; 
    overflow: hidden;
    display: block !important;
    transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease, opacity 0.2s ease;
}

.announcement-bar span {
    font-weight: bold;
    color: var(--accent-color);
}




/* ==========================================================================
   ২. হেডার এবং সাধারণ নেভিগেশন (Base Layout)
   ========================================================================== */
.site-header {
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    transition: top 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* পজিশন শিফটিং স্মুথ করার জন্য */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1340px;
    margin: 0 auto;
    padding: 16px 24px;
}

.logo a {
    font-size: 30px;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    letter-spacing: -1.5px;
}

.highlight-red, .highlight-red .menu-text {
    color: #e04f37 !important; 
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.action-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--primary-color);
    cursor: pointer;
    position: relative;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
}

/* ==========================================================================
   ৩. পিওর ডেস্কটপ ভিউ এক্সক্লুসিভ স্টাইল (মিন চওড়া: ১০২৫ পিক্সেল)
   ========================================================================== */
@media screen and (min-width: 1025px) {
    .hamburger { 
        display: none !important; 
    }
    
    .nav-link i.mobile-icon,
    .mobile-arrow, 
    .mobile-only-footer,
    .mobile-bottom-nav { 
        display: none !important; 
    }
    
    .nav-menu-container {
        display: block !important;
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        list-style: none;
        gap: 8px;
    }

    .nav-item {
        position: relative;
    }

    .nav-link {
        text-decoration: none;
        color: var(--text-main);
        font-weight: 500;
        font-size: 15px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: var(--transition-smooth);
    }

    .nav-link:hover {
        color: var(--primary-color);
    }

    .desktop-arrow {
        font-size: 10px !important;
        transform: rotate(90deg); 
        color: #777;
        display: inline-block !important; 
    }

    .link-left-content {
        display: flex;
        align-items: center;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0; 
        background-color: var(--white);
        min-width: 220px;
        box-shadow: 0 12px 35px rgba(0,0,0,0.08);
        list-style: none;
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: var(--transition-smooth);
        border-radius: 6px;
        border: 1px solid #f0f0f0;
        display: block !important; 
    }

    .dropdown-menu a {
        display: block;
        padding: 10px 20px;
        color: var(--text-main);
        text-decoration: none;
        font-size: 14px;
        text-align: left;
        transition: var(--transition-smooth);
    }

    .dropdown-menu a:hover {
        background-color: #f7f9f8;
        color: var(--primary-color);
        padding-left: 24px;
    }

    .nav-item:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* ==========================================================================
   ৪. পিওর মোবাইল ভিউ এক্সক্লুসিভ স্টাইল (ম্যাক্স চওড়া: ১০২৪ পিক্সেল)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .desktop-arrow, .desktop-only { 
        display: none !important; 
    }
    
    .nav-link i.mobile-icon,
    .mobile-arrow, 
    .mobile-only-footer { 
        display: block !important; 
    }
    
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 22px;
        height: 15px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger .bar {
        width: 100%;
        height: 2px;
        background-color: var(--primary-color);
        transition: var(--transition-smooth);
    }

    .hamburger.toggle .line-1 { transform: translateY(6.5px) rotate(45deg); }
    .hamburger.toggle .line-2 { opacity: 0; width: 0; }
    .hamburger.toggle .line-3 { transform: translateY(-6.5px) rotate(-45deg); }

    /* মোবাইল মেনু কন্টেইনার (লোগো বারের ঠিক তলা ঘেঁষে বসার ফিক্সড পজিশন) */
    .nav-menu-container {
        position: fixed;
        top: 63px; /* স্বাভাবিক অবস্থায় গ্যাপ ছাড়া লক থাকবে */
        left: -100% !important; 
        width: 100% !important;
        height: calc(100vh - 63px) !important; 
        background-color: var(--white) !important;
        z-index: 999 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: left 0.4s cubic-bezier(0.1, 0.9, 0.2, 1), top 0.3s ease, height 0.3s ease, opacity 0.3s ease;
        border-top: 1px solid var(--border-color);
        display: block !important;
    }

    /* যখন জাভাস্ক্রিপ্ট মেনুটিকে একটিভ করবে তখন এটি স্ক্রিনে স্লাইড হয়ে আসবে */
    .nav-menu-container.active {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }

    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        list-style: none;
    }

    .nav-item {
        width: 100% !important;
        border-bottom: 1px solid var(--border-color) !important;
        display: block !important;
    }

    .nav-link {
        display: flex !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        padding: 18px 24px !important;
        text-decoration: none !important;
        color: var(--text-main) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        width: 100% !important;
    }

    .has-dropdown .nav-link {
        justify-content: space-between !important; 
    }

    .link-left-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .menu-text {
        display: inline-block !important;
    }

    .nav-link i.mobile-icon {
        display: inline-block !important;
        margin-right: 16px !important;
        font-size: 18px !important;
        width: 22px !important;
        text-align: left !important;
        color: #555555 !important;
        flex-shrink: 0 !important; 
    }

    .mobile-arrow {
        font-size: 14px !important;
        color: #999999 !important;
        transition: transform 0.3s ease !important;
    }

    .dropdown-menu {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background-color: #fafbfa !important;
        list-style: none !important;
        transform: none !important;
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        display: block !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    .dropdown-menu.show {
        max-height: 600px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .dropdown-menu a {
        display: block !important;
        padding: 14px 24px 14px 62px !important; 
        text-decoration: none !important;
        color: #555555 !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f2f2f2 !important;
        text-align: left !important; 
    }

    .has-dropdown.open .mobile-arrow {
        transform: rotate(90deg) !important;
    }

    .mobile-only-footer {
        display: block !important;
        padding: 35px 24px !important;
        background-color: #fcfcfc !important;
        list-style: none !important;
    }

    .mobile-login {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-decoration: none !important;
        color: var(--text-main) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-bottom: 30px !important;
    }
    
    .mobile-login i {
        margin-right: 16px !important;
font-size: 18px !important;width: 22px !important;text-align: left !important;}
    .social-wrapper {display: flex !important;justify-content: flex-start !important;gap: 24px !important;margin-bottom: 25px !important;}.social-wrapper a {color: #222222 !important;font-size: 18px !important;text-decoration: none !important;}.journey-tag {font-size: 13px !important;color: #777777 !important;font-weight: 600 !important;text-transform: uppercase !important;letter-spacing: 0.5px !important;border-top: 1px solid #e5e5e5 !important;padding-top: 20px !important;text-align: left;}/* স্মার্ট মোবাইল বটম বার */.mobile-bottom-nav {display: flex !important;position: fixed !important;bottom: -80px !important;left: 0 !important;width: 100% !important;height: 65px !important;background-color: var(--white) !important;box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.08) !important;border-top: 1px solid var(--border-color) !important;justify-content: space-around !important;align-items: center !important;z-index: 997 !important;transition: bottom 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;}.mobile-bottom-nav.visible {bottom: 0 !important;}.bottom-nav-item {display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: center !important;text-decoration: none !important;color: #666666 !important;font-size: 11px !important;font-weight: 500 !important;gap: 5px !important;width: 20% !important;height: 100% !important;}.bottom-nav-item i {font-size: 20px !important;color: #444444 !important;}.bottom-nav-item.active {color: var(--primary-color) !important;font-weight: 700 !important;}.bottom-nav-item.active i {color: var(--primary-color) !important;}.special-deal .deal-badge-icon {background-color: var(--primary-color) !important;color: var(--white) !important;width: 24px !important;height: 24px !important;display: flex !important;align-items: center !important;justify-content: center !important;border-radius: 4px !important;}.special-deal .deal-badge-icon i {font-size: 12px !important;color: var(--white) !important;}}/* ==========================================================================৫. স্যাম্পল প্রোডাক্ট গ্রিড স্টাইলিং (টেস্টিং কন্টেন্ট)========================================================================== */.main-content {max-width: 1200px;margin: 40px auto;padding: 0 20px;}.section-title {font-size: 24px;color: var(--primary-color);margin-bottom: 20px;}.product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: 20px;}.product-card {background: var(--white);border: 1px solid var(--border-color);border-radius: 8px;padding: 15px;position: relative;display: flex;flex-direction: column;}.badge {position: absolute;top: 10px;left: 10px;font-size: 10px;font-weight: bold;padding: 3px 8px;border-radius: 4px;color: var(--white);}.badge.discount { background: #e04f37; }.badge.trend { background: var(--accent-color); }.product-img {height: 150px;background: #f8f9fa;display: flex;align-items: center;justify-content: center;font-size: 40px;color: var(--primary-color);border-radius: 6px;margin-bottom: 12px;}.product-name {font-size: 14px;font-weight: 600;color: var(--text-main);margin-bottom: 8px;height: 40px;overflow: hidden;}.rating {font-size: 12px;color: #666;margin-bottom: 8px;}.rating i { color: #ffb400; }.price {font-size: 16px;font-weight: 700;color: var(--primary-color);margin-bottom: 12px;}.price span {font-size: 12px;color: #999;text-decoration: line-through;font-weight: 400;}.add-to-cart {background: transparent;border: 1px solid var(--primary-color);color: var(--primary-color);padding: 8px;border-radius: 4px;font-weight: 600;cursor: pointer;transition: var(--transition-smooth);margin-top: auto;}.add-to-cart:hover {background: var(--primary-color);color: var(--white);}

/* ==========================================================================
   কাস্টম ন্যারো (Narrow) স্ক্রোলবার স্টাইল - সব ব্রাউজারের জন্য
   ========================================================================== */

/* ১. Firefox ব্রাউজারের জন্য ফিক্স */
html {
    scrollbar-width: thin; /* স্ক্রোলবার চিকন করার জন্য */
    scrollbar-color: #0b422a #fafbfa; /* থাম্ব (ডার্ক গ্রিন) এবং ট্র্যাক (লাইট গ্রে) কালার */
}

/* ২. Chrome, Safari, Edge এবং অন্যান্য WebKit ব্রাউজারের জন্য ফিক্স */
/* সম্পূর্ণ স্ক্রোলবারের উইডথ (চওড়া) */
::-webkit-scrollbar {
    width: 6px; /* ৬ পিক্সেল চওড়া হবে (ডিফল্ট সাধারণত ১২-১৬ পিক্সেল থাকে) */
    height: 6px; /* অনুভূমিক/Horizontal স্ক্রোলবারের জন্য */
}

/* স্ক্রোলবারের পেছনের রাস্তা বা ব্যাকগ্রাউন্ড (Track) */
::-webkit-scrollbar-track {
    background: #fafbfa; /* আপনার সাইটের ব্যাকগ্রাউন্ডের সাথে ম্যাচিং লাইট কালার */
    border-radius: 10px;
}

/* স্ক্রোলবারের যে অংশটি ধরে আমরা টানি (Thumb) */
::-webkit-scrollbar-thumb {
    background: #0b422a; /* Anveshan সিগনেচার ডার্ক গ্রিন কালার */
    border-radius: 10px; /* কোণাগুলো সুন্দর গোল করার জন্য */
    border: 1px solid #fafbfa; /* থাম্বের চারপাশে হালকা প্যাডিং ইফেক্ট তৈরি করবে */
}

/* মাউস হোভার করলে থাম্বের কালার একটু ডার্ক বা চেঞ্জ হবে */
::-webkit-scrollbar-thumb:hover {
    background: #e59622; /* হোভার করলে গোল্ডেন/অরেঞ্জ কালার হবে */
}

/* ==========================================================================
   মোবাইল স্লাইডিং মেনুর ভেতরের স্ক্রোলবার একদম চিকন (Narrow) করার ফিক্স
   ========================================================================== */
@media screen and (max-width: 1024px) {
    
    /* ১. Firefox ব্রাউজারে মোবাইল মেনুর স্ক্রোলবার চিকন করার জন্য */
    .nav-menu-container {
        scrollbar-width: thin !important;
        scrollbar-color: var(--primary-color) #ffffff !important;
    }

    /* ২. Chrome, Safari, iOS এবং Android WebKit ব্রাউজারে মোবাইল মেনুর স্ক্রোলবার ফিক্স */
    /* মোবাইল স্ক্রিন ছোট হওয়ায় মেনুর ভেতরের স্ক্রোলবারটি মাত্র ৪ পিক্সেল চিকন করা হয়েছে */
    .nav-menu-container::-webkit-scrollbar {
        width: 4px !important; 
        height: 4px !important;
        display: block !important; /* স্ক্রোলবার যাতে নিশ্চিতভাবে অন থাকে */
    }

    /* স্ক্রোলবারের পেছনের ট্র্যাক বা রাস্তা */
    .nav-menu-container::-webkit-scrollbar-track {
        background: #ffffff !important; /* মেনুর ব্যাকগ্রাউন্ডের সাথে ম্যাচিং সাদা ট্র্যাক */
    }

    /* স্ক্রোলবারের ভেতরের মূল থাম্ব বা দণ্ডটি */
    .nav-menu-container::-webkit-scrollbar-thumb {
        background: var(--primary-color) !important; /* Anveshan সিগনেচার ডার্ক গ্রিন কালার */
        border-radius: 10px !important; /* কোণাগুলো সুন্দর গোল করার জন্য */
    }

    /* টাচ বা হোভার করলে থাম্বের কালার চেঞ্জ */
    .nav-menu-container::-webkit-scrollbar-thumb:hover,
    .nav-menu-container::-webkit-scrollbar-thumb:active {
        background: var(--accent-color) !important; /* গোল্ডেন/অরেঞ্জ কালার */
    }
}



/* ==========================================================================
   Anveshan Style - ডাইনামিক টেক্সট গ্লোয়িং অ্যানিমেশন (Glow/Rainbow Effect)
   ========================================================================== */

.highlight-red {
    /* মাল্টিপল রঙের একটি লিনিয়ার গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি করা হলো */
    background: linear-gradient(
        to right, 
        #e04f37, /* উজ্জ্বল লাল */
        #ffb400, /* গোল্ডেন হলুদ */
        #e59622, /* অরেঞ্জ */
        #0b422a, /* সিগনেচার ডার্ক গ্রিন */
        #e04f37  /* লুপ কমপ্লিট করার জন্য আবার লাল */
    );
    
    /* গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড সাইজ বড় করা হয়েছে যাতে অ্যানিমেশন করার মতো পর্যাপ্ত জায়গা থাকে */
    background-size: 400% auto !important;
    
    /* ব্যাকগ্রাউন্ড রঙটিকে কেটে শুধুমাত্র টেক্সটের অক্ষরের ভেতরে লক করার জন্য */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* মূল টেক্সটের ডিফল্ট রঙ ট্রান্সপারেন্ট বা স্বচ্ছ করা হলো যাতে পেছনের গ্লোয়িং গ্রেডিয়েন্টটি দেখা যায় */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* অ্যানিমেশনের নাম, সময় (৪ সেকেন্ড) এবং ইনফিনিট বা অনবরত চলার রুল */
    animation: textGlowShift 4s linear infinite !important;
    display: inline-block;
}

/* আইকনোগ্রাফি থাকলে সেটির ওপরেও যাতে একই গ্লো ইফেক্ট কাজ করে */
.highlight-red i {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* @keyframes অ্যানিমেশন লজিক যা ব্যাকগ্রাউন্ড পজিশনকে অনবরত ডানে-বামে শিফট করবে */
@keyframes textGlowShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 400% center; /* সম্পূর্ণ ৪০০% চওড়া ব্যাকগ্রাউন্ডকে স্মুথলি স্ক্রোল করাবে */
    }
}



/* ==========================================================================
   Anveshan Style - প্রোডাক্ট কার্ড ইনফিনিট আল্ট্রা-ওয়াইড শিমার (১.৫ সেকেন্ড টোটাল লুপ)
   ========================================================================== */

/* ১. মূল প্রোডাক্ট কার্ড কন্টেইনার  */
.product-cardlight {
    position: relative; 
    overflow: hidden;   
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ২. সাদা আলোর ঝলকানি (সাইজ আরও বড় এবং চওড়া করা হয়েছে) */
.product-cardlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -250%; /* আলো বড় করায় শুরুর পজিশন আরও বামে সরানো হয়েছে */
    width: 120%; /* আলোর সাইজ ৮০% থেকে বাড়িয়ে ১২০% (Ultra-Wider) করা হলো */
    height: 100%;
    
    /* আলোর চকমকি ভাব আরও গর্জিয়াস করার জন্য লিনিয়ার গ্রেডিয়েন্ট */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.55) 50%, /* মাঝখানের উজ্জ্বল সাদা অংশ */
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-25deg); 
    pointer-events: none; 
    
    /* মোট ১.৫ সেকেন্ডের লুপ (১ সেকেন্ড ট্রাভেল + ০.৫ সেকেন্ড বিরতি) */
    animation: rapidUltraShimmer 1.5s linear infinite !important;
}

/* ৩. সিএসএস কিফ্রেম অ্যানিমেশন লজিক (১ সেকেন্ড রান + ০.৫ সেকেন্ড বিরতি) */
@keyframes rapidUltraShimmer {
    0% {
        left: -250%; /* বাম দিক থেকে আলোটি শুরু হবে */
    }
    66.66% {
        /* মোট ১.৫ সেকেন্ডের ৬৬.৬৬% মানে ঠিক ১ সেকেন্ড ধরে আলোটি বাম থেকে ডানে পাস করবে */
        left: 250%; 
    }
    100% {
        /* বাকি ৩৩.৩৩% সময় (অর্থাৎ ০.৫ সেকেন্ড) আলোটি স্ক্রিনের বাইরে হোল্ড বা ওয়েট করবে */
        left: 250%; 
    }
}

/* ৪. মাউস হোভার করলে কার্ডটির হালকা এলিভেশন */
.product-cardlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}