/* =========================================
   1. VARIABLES & THEME LOGIC
   ========================================= */
:root {
    --body-bg: #f8f9fa;
    --text-main: #212529;
    --inner-header-bg: #ffffff;
    --inner-header-text: #212529;
    --dropdown-bg: #ffffff;
    --dropdown-text: #212529;
    --dropdown-hover: #f8f9fa;
    --card-bg: #ffffff;
    --card-border: #e9ecef;
}

[data-theme="dark"] {
    --body-bg: #121417;
    --text-main: #e9ecef;
    --inner-header-bg: #1a1d21;
    --inner-header-text: #ffffff;
    --dropdown-bg: #2c3035;
    --dropdown-text: #e9ecef;
    --dropdown-hover: #37404a;
    --card-bg: #1f2226;
    --card-border: #333;
}

body {
    background-color: var(--body-bg);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
   2. HEADER STYLES (STICKY & TRANSPARENT)
   ========================================= */

/* Top Bar Style */
.top-bar {
    background-color: #0b0d10;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
    color: #bbb;
    transition: all 0.3s;
}
.top-bar a { color: #ccc; transition: 0.2s; }
.top-bar a:hover { color: #fff; }

/* Sticky Animation */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* === STICKY CLASS (Active on Scroll) === */
.site-header.sticky {
    position: fixed;
    top: 0; left: 0; width: 100%; z-index: 1050;
    background: rgba(26, 29, 33, 0.95) !important; /* Dark Glassy */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease-out;
}
.site-header.sticky .top-bar { display: none; } /* Hide TopBar */
.site-header.sticky .navbar { padding: 10px 0; }
/* Force White Text on Sticky */
.site-header.sticky .navbar-brand,
.site-header.sticky .brand-suffix,
.site-header.sticky .nav-link,
.site-header.sticky .theme-icon { color: #ffffff !important; }
.site-header.sticky .navbar-toggler-icon { filter: invert(1); }

/* === HOMEPAGE (Initial Transparent) === */
body.home-page .site-header {
    position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent;
}
body.home-page .navbar { background: transparent !important; }
body.home-page .navbar-brand, 
body.home-page .brand-suffix,
body.home-page .nav-link,
body.home-page .theme-icon { color: #ffffff !important; }
body.home-page .navbar-toggler-icon { filter: invert(1); }

/* === INNER PAGES (Standard) === */
body.inner-page .site-header {
    background-color: var(--inner-header-bg);
    border-bottom: 1px solid var(--card-border);
    position: relative;
}
body.inner-page .navbar-brand { color: var(--inner-header-text) !important; }
body.inner-page .brand-suffix { color: var(--inner-header-text) !important; }
body.inner-page .nav-link { color: var(--inner-header-text) !important; }
body.inner-page .theme-icon { color: var(--inner-header-text) !important; }

/* Navbar General */
.navbar { padding: 15px 0; transition: padding 0.3s; }
.navbar-nav.main-menu { gap: 15px; } /* Gap between items */
.nav-link { 
    text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; padding: 10px 0 !important; position: relative; white-space: nowrap;
}
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 5px; left: 0; background-color: #0d6efd; transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid #0d6efd;
    margin-top: 10px;
}
.dropdown-item { color: var(--dropdown-text); padding: 8px 20px; font-size: 0.9rem; }
.dropdown-item:hover { background-color: var(--dropdown-hover); color: var(--dropdown-text); }

/* =========================================
   3. COMPONENTS & MOBILE
   ========================================= */
.text-orange { color: #fd7e14 !important; }
.bg-orange-light { background-color: rgba(253, 126, 20, 0.15); color: #fd7e14; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 0.75rem;}

.btn-orange { background: linear-gradient(45deg, #fd7e14, #ff9e4d); color: #fff; border: none; }
.btn-orange:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(253,126,20,0.3); }
.btn-dark-custom { background-color: #212529; color: #fff; border: none; }

/* Cards */
.pricing-card { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; transition: transform 0.3s; }
.pricing-card:hover { transform: translateY(-5px); }
.featured-plan { border: 2px solid #fd7e14; position: relative; z-index: 2; transform: scale(1.02); }

/* Mobile Slider */
@media (max-width: 991px) {
    body.home-page .site-header { background: #1a1d21; position: relative; } 
    .navbar-collapse {
        background-color: var(--inner-header-bg); padding: 20px; margin-top: 15px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    body.home-page .navbar-collapse .nav-link { color: var(--inner-header-text) !important; }
    .top-bar { display: none; }
    
    .pricing-scroll-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; gap: 15px; }
    .pricing-scroll-container .col-11 { flex: 0 0 85%; scroll-snap-align: center; }
    .pricing-scroll-container::-webkit-scrollbar { display: none; }
}
.slider-dots .dot { width: 12px; height: 12px; border: 2px solid #28a745; border-radius: 50%; cursor: pointer; background: transparent; }
.slider-dots .dot.active { background: #28a745; transform: scale(1.2); }