/* Formula Background Styles */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(0.8px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.section-chem {
    background: linear-gradient(135deg, #f0f2f5 0%, #e3e6ea 100%);
    position: relative;
    overflow: hidden;
}

.chem-bg {
    background-image: url('/chemistry_bg.svg');
    opacity: 0.8;
    filter: blur(0.5px);
}

.section-math {
    background: linear-gradient(135deg, #5a6c7d 0%, #6b7d8f 100%);
    position: relative;
    overflow: hidden;
}

.math-bg {
    background-image: url('/math_bg.svg');
    opacity: 0.65;
    filter: blur(0.5px) brightness(1.3);
}

/* Global overrides to ensure background visibility */
/* === GLOBAL OVERRIDES FOR EDUCATION THEME === */
body {
    background: #ffffff !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Education Main Content BG */
.section-education {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    /* Ensure it covers significant area */
}

/* Education Main Content BG - target the pattern */
.education-bg {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('/education_bg.svg');
    background-size: 800px;
    background-repeat: repeat;
    opacity: 1.0;
    /* Full opacity - SVG controls symbol opacity internally */
    filter: blur(0px);
    /* Remove blur for clarity */
    z-index: -1 !important;
    /* Behind everything */
    pointer-events: none;
}

/* Ensure containers don't block the background */
main,
.section-education,
.container,
.container-fluid {
    background: transparent !important;
}

/* Override bg-white and bg-light AGGRESSIVELY - except for cards and admin panels */
.bg-white:not(.stylized-card):not(.vertical-post-card):not(.card):not([class*="admin"]):not([class*="prereg-form"]),
.bg-light:not(.stylized-post-card):not(.vertical-post-card):not(.card):not([class*="admin"]):not([class*="prereg-form"]) {
    background: transparent !important;
}

/* Keep card backgrounds if they exist, or transparency might break reading */
/* The stylized cards in ViewPage have their own backgrounds, so they are safe. */

/* === GLASSMORPHISM EFFECT === */
/* Light glass effect for cards */
.stylized-card,
.vertical-post-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15) !important;
}

/* Glass effect for statistics boxes and light backgrounds */
main .bg-light,
main .p-4.rounded {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

/* Ensure homepage card containers are transparent */
main .row,
main .col,
main [class*="col-"] {
    background: transparent !important;
}

/* Glass effect containers for homepage sections */
/* Unified glass effect for all sections */
main .container.py-5 {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem !important;
    margin-bottom: 2rem;
}

/* Glass effect for footer content */
.glass-footer {
    background: rgba(26, 35, 126, 0.7);
    /* Semi-transparent blue */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 4rem;
    padding-bottom: 2rem;
    position: relative;
    z-index: 2;
}