/* ==========================================================================
   DARK MODE CSS - POSPro Landing Page
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES - DARK THEME VALUES
   ========================================================================== */
/* ===== Follow pospro-dashboard (8).html — Dark Palette ===== */
html[data-theme="dark"] {
    --dm-bg-primary: #0D1119;
    --dm-bg-secondary: #10151F;
    --dm-bg-tertiary: #151B27;
    --dm-bg-elevated: #151B27;
    --dm-surface: #151B27;
    --dm-surface-hover: #1B222F;
    --dm-surface-active: #232B3A;
    --dm-text-primary: #ECEFF6;
    --dm-text-secondary: #8B93A6;
    --dm-text-muted: #5B6478;
    --dm-border: #232B3A;
    --dm-border-light: #1B222F;
    --dm-input-bg: #10151F;
    --dm-input-border: #232B3A;
    --dm-dropdown-bg: #151B27;
    --dm-dropdown-hover: #1B222F;
    --dm-shadow: 0 16px 36px rgba(0,0,0,.45);
    --dm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --clr-primary: #C52127;
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
html[data-theme="dark"] body {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--dm-text-primary);
}

html[data-theme="dark"] p {
    color: var(--dm-text-secondary);
}

html[data-theme="dark"] a {
    color: var(--dm-text-primary);
}

html[data-theme="dark"] a:hover {
    color: var(--clr-primary);
}

html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .section-title p {
    color: var(--dm-text-primary);
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
html[data-theme="dark"] .header-section {
    background: var(--dm-surface) !important;
    border-bottom-color: var(--dm-border) !important;
}

html[data-theme="dark"] .header-section.home-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

html[data-theme="dark"] .header-section.scrolled,
html[data-theme="dark"] .header-section.home-header.scrolled {
    background: var(--dm-surface) !important;
    border-bottom-color: var(--dm-border) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .header-section a {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .header-logo-text {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section .dropdown-content {
    background: var(--dm-dropdown-bg);
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .header-section .dropdown-content a {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .header-section .dropdown-content a:hover {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .header-section .dropdown-menu {
    background: var(--dm-dropdown-bg) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .header-section .dropdown-item {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section .dropdown-item:hover {
    background: var(--dm-dropdown-hover) !important;
}

html[data-theme="dark"] .language-btn {
    background: var(--dm-input-bg) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .mobile-menu {
    background: var(--dm-surface) !important;
}

html[data-theme="dark"] .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .header-section .accordion-button {
    color: var(--dm-text-primary) !important;
    background: transparent !important;
}

html[data-theme="dark"] .header-section .accordion-body {
    background: transparent !important;
}

html[data-theme="dark"] .header-section .accordion-body a {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .header-section .accordion-body li:hover {
    background: var(--dm-surface-hover);
}

/* ==========================================================================
   4. THEME TOGGLE BUTTON
   ========================================================================== */
.theme-toggle-web {
    display: flex;
    align-items: center;
    padding-right: 8px;
}

.theme-toggle-web button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid #d0d5dd;
    border-radius: 50%;
    background: var(--clr-white);
    color: var(--clr-dark);
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.theme-toggle-web button:hover {
    background: #f9fafb;
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-toggle-web button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-toggle-web .theme-icon-dark { color: var(--clr-dark); }
.theme-toggle-web .theme-icon-light { color: #f59e0b; }

html[data-theme="dark"] .theme-toggle-web button {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .theme-toggle-web button:hover {
    background: var(--dm-surface-hover);
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .theme-toggle-web .theme-icon-dark { color: #818cf8; }

/* ==========================================================================
   5. SERVICE / FEATURE SECTION
   ========================================================================== */
html[data-theme="dark"] .service-section .service-card {
    background-color: var(--dm-surface) !important;
}

html[data-theme="dark"] .service-section .service-card h6,
html[data-theme="dark"] .service-section .service-card p {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .service-section .image {
    background-color: var(--dm-bg-elevated) !important;
}

/* ==========================================================================
   6. PACKAGE / PRICING SECTION
   ========================================================================== */
html[data-theme="dark"] .package-section {
    background: linear-gradient(to right, rgba(255,137,0,0.06), rgba(13,154,255,0.06));
}

html[data-theme="dark"] .package-section .package {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .package-section .package .month {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .package-section .package .package-content p {
    color: var(--dm-text-secondary);
}

/* ==========================================================================
   7. TESTIMONIALS / CUSTOMER SECTION
   ========================================================================== */
html[data-theme="dark"] .customer-section .customer-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm);
}

html[data-theme="dark"] .customer-section .customer-card:hover {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .customer-section .customer-card .quote-icon {
    color: #fbbf24 !important;
    opacity: 0.18 !important;
}

html[data-theme="dark"] .customer-section .customer-card img {
    border-color: var(--clr-primary) !important;
    background: var(--dm-surface) !important;
}

html[data-theme="dark"] .customer-section .customer-card .customer-footer {
    border-top-color: var(--dm-border) !important;
}

html[data-theme="dark"] .customer-section .customer-card p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .customer-section .customer-card h4,
html[data-theme="dark"] .customer-section .customer-card h5 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .customer-section .customer-card small {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .testi-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow-sm);
}

html[data-theme="dark"] .testi-card p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .testi-who b {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .testi-who span {
    color: var(--dm-text-secondary) !important;
}

/* ==========================================================================
   8. BLOG SECTION
   ========================================================================== */
html[data-theme="dark"] .blog-shadow {
    box-shadow: var(--dm-shadow-sm);
}

html[data-theme="dark"] .blogs-section .tags-btn {
    color: var(--dm-text-primary) !important;
    background-color: var(--dm-bg-elevated) !important;
}

html[data-theme="dark"] .blogs-section .home-blog-card,
html[data-theme="dark"] .blogs-section .blog-card-content {
    background-color: var(--dm-surface);
}

html[data-theme="dark"] .blogs-section .blog-details-content p {
    color: var(--dm-text-secondary);
}

html[data-theme="dark"] .blogs-section .blog-details-content p span {
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .blogs-section .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .blogs-section .pagination .page-link {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .blogs-section .pagination .page-link:focus {
    background-color: var(--clr-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   9. FAQ SECTION
   ========================================================================== */
html[data-theme="dark"] .faqs-section .accordion-item {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none;
}

html[data-theme="dark"] .faqs-section .accordion-button {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .faqs-section .accordion-button:not(.collapsed) {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .faqs-section .accordion-body p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .faqs-section .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   10. CONTACT & LOCATION SECTIONS
   ========================================================================== */
html[data-theme="dark"] .contact-section .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .location-section {
    background: linear-gradient(to right, rgba(255,137,0,0.06), rgba(13,154,255,0.06));
}

html[data-theme="dark"] .location-section .lang-item {
    background: var(--dm-surface) !important;
    box-shadow: var(--dm-shadow-sm);
}

html[data-theme="dark"] .location-section .lang-item h6 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .coming-soon {
    background: var(--dm-bg-elevated) !important;
}

/* ==========================================================================
   11. ABOUT PAGE & GENERIC CONTENT
   ========================================================================== */
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .payroll-section {
    background-color: transparent;
}

html[data-theme="dark"] .payroll-section ul li {
    color: var(--dm-text-secondary);
}

/* ==========================================================================
   12. MODALS
   ========================================================================== */
html[data-theme="dark"] .modal-content {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .modal-content .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .modal-content .custom-label {
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .have-account,
html[data-theme="dark"] .have-account a {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .success-modal-body h4,
html[data-theme="dark"] .create-account-body h4,
html[data-theme="dark"] .verify-modal-body h4,
html[data-theme="dark"] .setup-account-body h4 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .success-modal-body p,
html[data-theme="dark"] .create-account-body p,
html[data-theme="dark"] .verify-modal-body p,
html[data-theme="dark"] .setup-account-body p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .social-login .login-social {
    background-color: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .pin-input {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* ==========================================================================
   13. SIDEBAR / PLAN PAGE
   ========================================================================== */
html[data-theme="dark"] .slick-slider-section {
    background-color: transparent;
}

html[data-theme="dark"] .pricing-plan-section .card,
html[data-theme="dark"] .pricing-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .pricing-plan-section .card:hover,
html[data-theme="dark"] .pricing-card:hover {
    background-color: var(--dm-surface) !important;
    border-color: var(--clr-primary) !important;
}

/* ==========================================================================
   14. FORM ELEMENTS
   ========================================================================== */
html[data-theme="dark"] .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--clr-primary) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--dm-text-primary) !important;
}

/* ==========================================================================
   15. WATCH DEMO VIDEO SECTION
   ========================================================================== */
html[data-theme="dark"] .video-section,
html[data-theme="dark"] .watch-demo-section {
    background-color: var(--dm-bg-secondary);
}

/* ==========================================================================
   16. SIDEBAR PLAN CARDS
   ========================================================================== */
html[data-theme="dark"] .sidebar-plan-card,
html[data-theme="dark"] .plan-details-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

/* ==========================================================================
   17. BREADCRUMB / PAGE TITLE
   ========================================================================== */
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

html[data-theme="dark"] .page-title-banner p {
    color: var(--dm-text-secondary);
}

/* ==========================================================================
   18. GENERIC OVERRIDES
   ========================================================================== */
html[data-theme="dark"] .bg-white {
    background-color: var(--dm-surface) !important;
}

html[data-theme="dark"] .bg-light {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .border {
    border-color: var(--dm-border) !important;
}

/* ==========================================================================
   19. HERO / HOME BANNER
   ========================================================================== */
html[data-theme="dark"] .home-banner-section .banner-content h1 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .home-banner-section .banner-content p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .home-banner-section .banner-content .banner-checkMark span {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .home-banner-section .banner-content .hero-note {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .home-banner-section .banner-content .avatar-stack span {
    border-color: var(--dm-bg-primary) !important;
}

html[data-theme="dark"] .hero-btn-outline {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .hero-btn-outline:hover {
    border-color: var(--clr-primary) !important;
    background: rgba(197, 33, 39, 0.12) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .cta-banner {
    background: linear-gradient(125deg, rgba(197, 33, 39, 0.18), #171530 55%, rgba(20, 184, 166, 0.12)) !important;
    border-color: rgba(197, 33, 39, 0.22) !important;
}

html[data-theme="dark"] .cta-banner::before {
    background: rgba(197, 33, 39, 0.3) !important;
}

html[data-theme="dark"] .cta-banner h2 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .cta-banner p {
    color: var(--dm-text-secondary) !important;
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
html[data-theme="dark"] .footer-section p,
html[data-theme="dark"] .footer-section li,
html[data-theme="dark"] .footer-section li a {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .footer-section .foot-brand .foot-brand-logo .header-logo-text {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .footer-section .foot-col h4 {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .footer-section .foot-col a:hover {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .footer-section .social-row a {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .footer-section .social-row a:hover {
    border-color: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .footer-section .foot-bottom {
    border-top-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .custom-clr-dark {
    color: var(--dm-text-primary) !important;
}

/* ==========================================================================
   21. NAVBAR (home-header / language / mobile toggler / offcanvas)
   ========================================================================== */
html[data-theme="dark"] .navbar-toggler i {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .btn-close-commmon i {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .home-offcanvas-header {
    background-color: var(--dm-surface) !important;
}

html[data-theme="dark"] .home-page-language-change .dropdown-menu .language-li .dropdown-item {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section .get-app-btn,
html[data-theme="dark"] .header-section .get-app-btn:hover {
    color: var(--clr-white) !important;
}

html[data-theme="dark"] .header-section.home-header .btn-login {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .header-section.home-header .btn-login:hover {
    background: var(--dm-surface-hover) !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .login-btn {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .login-btn:hover {
    background: var(--dm-surface-hover) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .btn-trial-mobile {
    background: linear-gradient(120deg, var(--clr-primary), color-mix(in srgb, var(--clr-primary) 72%, #000000)) !important;
    border: none !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .header-section.home-header .login-text-link {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .login-text-link:hover {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .footer-section {
    border-top-color: var(--dm-border) !important;
}

html[data-theme="dark"] .logo-strip {
    background-color: var(--dm-bg-primary) !important;
    border-top-color: var(--dm-border) !important;
    border-bottom-color: var(--dm-border) !important;
}

html[data-theme="dark"] .logo-strip p,
html[data-theme="dark"] .logo-strip .marquee span {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .modules-section {
    background-color: var(--dm-bg-primary) !important;
}

html[data-theme="dark"] .module-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .module-card:hover {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .module-icon {
    background: rgba(197, 33, 39, 0.12) !important;
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .module-card h3 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .module-card p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .section-eyebrow {
    background: rgba(197, 33, 39, 0.14) !important;
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .faq-section {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .faq-item {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .faq-item[open] {
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .faq-item summary {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .faq-item p {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .faq-item summary::after {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .home-banner-section {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .hero-blob.b1 {
    background: rgba(255, 122, 77, 0.3) !important;
}

html[data-theme="dark"] .hero-blob.b2 {
    background: rgba(255, 122, 77, 0.3) !important;
}

html[data-theme="dark"] .footer-blob.b1 {
    background: rgba(255, 122, 77, 0.3) !important;
}

html[data-theme="dark"] .footer-blob.b2 {
    background: rgba(255, 122, 77, 0.3) !important;
}

html[data-theme="dark"] .banner-bg {
    background: var(--dm-bg-secondary) !important;
}

/* ==========================================================================
   24. HOW IT WORKS SECTION - DARK
   ========================================================================== */
html[data-theme="dark"] .how-it-works-section {
    background-color: var(--dm-bg-secondary) !important;
}

html[data-theme="dark"] .step-card h3 {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .step-card p,
html[data-theme="dark"] .stat span {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .stats-band {
    background: rgba(255, 122, 77, 0.1);
    border-color: rgba(255, 122, 77, 0.2);
}

html[data-theme="dark"] .stat b {
    color: var(--clr-primary);
}

/* ==========================================================================
   22. FLOATING CAPSULE NAV (home-header) - DARK
   ========================================================================== */
html[data-theme="dark"] .header-section.home-header,
html[data-theme="dark"] .header-section.home-header.scrolled {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

/* Navbar perfect — follow dashboard dark #151B27 */
html[data-theme="dark"] .header-section.home-header .nav-capsule {
    background: rgba(21, 27, 39, 0.82);
    border: 1px solid var(--dm-border);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .header-section.home-header.scrolled .nav-capsule {
    background: rgba(21, 27, 39, 0.96);
    border-color: var(--dm-border);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.65);
}

html[data-theme="dark"] .header-section.home-header .nav-links > a,
html[data-theme="dark"] .header-section.home-header .nav-drop-toggle {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .header-section.home-header .nav-links > a:hover,
html[data-theme="dark"] .header-section.home-header .nav-links > a.active,
html[data-theme="dark"] .header-section.home-header .nav-drop-toggle:hover {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .nav-drop-content {
    background: var(--dm-dropdown-bg);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .header-section.home-header .nav-drop-content a {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .header-section.home-header .nav-drop-content a:hover {
    background: var(--dm-surface-hover);
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .lang-btn {
    background: var(--dm-input-bg);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .header-section.home-header .lang-btn:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

html[data-theme="dark"] .header-section.home-header .lang-menu {
    background: var(--dm-dropdown-bg);
    border-color: var(--dm-border);
    box-shadow: var(--dm-shadow);
}

html[data-theme="dark"] .header-section.home-header .lang-menu .lang-opt {
    color: var(--dm-text-secondary) !important;
}

html[data-theme="dark"] .header-section.home-header .lang-menu .lang-opt:hover {
    background: var(--dm-surface-hover) !important;
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .lang-menu .language-check {
    color: var(--clr-primary);
}

html[data-theme="dark"] .header-section.home-header .burger {
    background: var(--dm-input-bg);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .header-section.home-header .burger:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

/* ==========================================================================
   23. FLOATING CAPSULE NAV - MOBILE MENU (home-header) - DARK
   ========================================================================== */
html[data-theme="dark"] .header-section.home-header .mobile-menu {
    background: rgba(21, 27, 39, 0.96);
    border-color: var(--dm-border);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .offcanvas-header {
    border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .btn-close {
    background: var(--dm-input-bg);
    border-color: var(--dm-border);
    filter: none !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .btn-close i {
    color: var(--dm-text-primary);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .btn-close:hover {
    border-color: var(--clr-primary);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .btn-close:hover i {
    color: var(--clr-primary);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-flush .accordion-item {
    background: transparent;
    border: none;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-flush .accordion-item a {
    color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-flush .accordion-item a.accordion-button:hover,
html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-flush .accordion-item a.accordion-button.active {
    background: var(--dm-surface-hover) !important;
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-button:not(.without-sub-menu)::after {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-body li:hover {
    background: var(--dm-surface-hover);
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-body li .arrow {
    color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-body li:hover a,
html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-body li:hover .arrow {
    color: var(--clr-primary) !important;
}

html[data-theme="dark"] .header-section.home-header .mobile-menu .accordion-body li a.active {
    color: var(--clr-primary) !important;
}

/* ==========================================================================
   25. AUTOFILL FIX - SIGNUP / MODAL / ALL WEB INPUTS
   Chrome autofill forces white bg, override for dark mode
   ========================================================================== */
html[data-theme="dark"] .form-control:-webkit-autofill,
html[data-theme="dark"] .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .form-control:-webkit-autofill:focus,
html[data-theme="dark"] .form-control:-webkit-autofill:active,
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill:active,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important;
    -webkit-text-fill-color: var(--dm-text-primary) !important;
    caret-color: var(--dm-text-primary) !important;
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-input-border) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html[data-theme="dark"] .form-control:autofill,
html[data-theme="dark"] input:autofill,
html[data-theme="dark"] textarea:autofill,
html[data-theme="dark"] select:autofill {
    box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important;
    -webkit-text-fill-color: var(--dm-text-primary) !important;
    caret-color: var(--dm-text-primary) !important;
}

html[data-theme="dark"] .modal-content .form-control:-webkit-autofill,
html[data-theme="dark"] .modal-content .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .modal-content .form-control:-webkit-autofill:focus,
html[data-theme="dark"] .create-account-body .form-control:-webkit-autofill,
html[data-theme="dark"] .create-account-body input:-webkit-autofill,
html[data-theme="dark"] .create-account-body input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important;
    -webkit-text-fill-color: var(--dm-text-primary) !important;
    caret-color: var(--dm-text-primary) !important;
}