/* ============================================
   DevStore — গ্লাসমর্ফিজম ক্লাস
   ============================================ */

/* স্ট্যান্ডার্ড গ্লাস ইফেক্ট — কার্ড, সার্চ বার, মোডাল */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* হেভি গ্লাস ইফেক্ট — হেডার, নেভবার, ড্রয়ার */
.glass-heavy {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

/* লাইট গ্লাস ইফেক্ট — টুলটিপ, টোস্ট */
.glass-light {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* গ্লাস কার্ড কম্পোনেন্ট */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* ওভারলে — ড্রয়ার ও মোডালের পেছনে */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* গ্র্যাডিয়েন্ট ব্যাকগ্রাউন্ড */
.bg-gradient {
    background: linear-gradient(135deg, #F8F9FA, #E8ECF1);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ডার্ক গ্লাস (ফুটার ইত্যাদি) */
.glass-dark {
    background: rgba(31, 31, 31, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}