/* Final brand consolidation overrides — maps legacy selectors to CSS variables
   This file should be loaded last so it overrides hard-coded colors in vendor/main CSS.
*/

/* Global design tokens for overrides (safe to add here) */

:root {
    --radius: 12px;
    /* global border radius for rounded everywhere */
    /* Darker theme tuning for readability */
    --bg: #0b1117;
    /* deeper blue-gray */
    --surface: #111827;
    /* card/section surface */
    --border: #1f2a37;
    /* subtle borders */
    --text: #e8f0ff;
    /* slightly cooler, brighter text */
    --muted: #a7b0bb;
    /* higher-contrast muted */
    --noise-opacity: 0.04;
    /* dial down background noise */
    --success: #22c55e;
    /* green for trust badge */
}

/* Give pricing section extra padding-top for product preview images */

.pricing-table {
    padding-top: 100px !important;
}

/* Apply generous rounding to common UI elements for a cohesive look */

button,
.btn,
.product-card,
.single-feature,
.navbar,
.navbar-brand img,
.section,
.section-title,
.accordion-button,
.pricing-table .single-table,
.preloader-icon span {
    border-radius: var(--radius) !important;
}

/* Make images slightly rounded unless explicitly square */

img {
    border-radius: calc(var(--radius) - 4px);
}

/* Ensure all sections use darker background */

.section {
    background-color: var(--bg) !important;
}

/* Primary brand uses */

.section-title h3,
.scroll-top,
.pagination .pagination-list li.active a,
.button .btn,
.preloader-icon span,
.hero-area,
.features .single-feature i,
.our-achievement,
.testimonials .tns-nav button.tns-nav-active,
.pricing-table .single-table .table-head .button .btn:hover,
.navbar-area .button .btn:hover,
.header.sticky .button .btn,
.accordion-button:not(.collapsed),
.popular-tag-widget .tags>a,
.sidebar .widget.search-widget form button,
.client-logo-section .client-logo-wrapper .client-logo img:hover,
.call-action,
.contact-form-head::before,
.faq .accordion-button:not(.collapsed),
.footer .footer-newsletter .newsletter-form .button .btn {
    background: linear-gradient(135deg, var(--brand), var(--dark)) !important;
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* Darken hero background with an overlay on top of brand gradient */

.hero-area {
    background-image: linear-gradient( to bottom right, rgba(5, 12, 18, 0.86), rgba(5, 12, 18, 0.62)), linear-gradient(135deg, var(--brand-2), var(--brand)) !important;
}

/* Secondary / darker accents */

.button .btn:hover,
.header.sticky .button .btn:hover,
.pricing-table .single-table .table-head .button .btn:active,
.footer .footer-newsletter .newsletter-form .button .btn:hover {
    background-color: var(--dark) !important;
}

/* Text color accents */

a,
a:visited,
.accent,
.section-title h3,
.blog-section .single-blog .blog-content .category,
.team .single-team .text h5,
.footer .single-footer.f-about .social li a:hover,
.footer .single-footer.f-link li a:hover,
.post-details .post-social-media ul li a:hover,
.blog-single .meta-info li a:hover,
.post-comments .comments-list li .comment-desc .desc-top .reply-link:hover,
.sidebar .widget.popular-feeds .single-popular-feed .feed-desc .cetagory:hover,
.blockquote .icon i,
.maill-success .success-content i,
.error-area .error-content h1,
.post-details .post-social-media ul li a span::before {
    color: var(--brand) !important;
}

/* Borders and small decorative accents */

.pricing-table .single-table,
.features .single-feature,
.header .navbar-collapse,
.accordion-item .accordion-button,
.blog-section .single-blog,
.post-comments .comments-list li {
    border-color: rgba(0, 143, 191, 0.12) !important;
}

/* Specific element overrides that used hard-coded brand colors */

.pricing-table .single-table .table-head .button .btn:hover {
    color: #fff !important;
}

.pricing-table .single-table .table-content .table-list li i,
blockquote .icon i,
.post-details .post-social-media ul li a span::before,
.header .navbar-nav .nav-item .sub-menu .nav-item a:hover,
.blog-single .meta-info li a:hover {
    color: var(--brand) !important;
}

/* Other background-color overrides */

.call-action {
    background-color: var(--brand) !important;
}

.contact-form-head::before {
    background-color: var(--brand) !important;
}

/* Buttons using the glow style */

.btn.glow {
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    box-shadow: 0 12px 60px rgba(0, 143, 191, 0.16) !important;
}

/* Make sure small text accents inherit the variable */

.color-brand {
    color: var(--brand) !important;
}

/* Fallback for any remaining exact color tokens used as borders or fills */

[style*="#007ab0"],
[style*="#006f9a"],
[style*="#008fbf"] {
    color: var(--brand) !important;
}

/* Accessibility and contrast fixes */

/* Navigation / tab links should be readable against dark background */

.navbar-area .navbar-nav .nav-link,
.navbar-area .navbar-nav a,
.navbar-area .navbar-nav .page-scroll,
.navbar-area .navbar-nav .nav-item>a {
    color: var(--text) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    transition: color .18s ease, text-shadow .18s ease;
}

.navbar-area .navbar-nav .nav-link:hover,
.navbar-area .navbar-nav a:hover,
.navbar-area .navbar-nav .page-scroll:hover {
    color: #ffffff !important;
    text-shadow: 0 6px 26px rgba(0, 143, 191, 0.14) !important;
}

/* Section headers / titles should contrast with sliding bars and overlays */

.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4 {
    color: var(--text) !important;
    text-shadow: 0 2px 20px rgba(0, 143, 191, 0.04) !important;
}

/* Product card: ensure features list inherits card background (transparent) and is readable */

.product-card .features {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 12px !important;
}

.product-card .features li {
    color: rgba(233, 233, 233, 0.92) !important;
    /* strong readable text */
}

.product-card .features li i {
    color: var(--brand) !important;
}

/* Small helpers for sliding panels / offcanvas headers */

.offcanvas,
.slide-out,
.sidebar-panel {
    color: var(--text) !important;
}

/* Visual emphasis for tab-like controls if they were using subtle blues that blend into bg */

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--muted) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--text) !important;
    background: linear-gradient(90deg, rgba(0, 143, 191, 0.06), rgba(0, 114, 166, 0.06)) !important;
    box-shadow: 0 6px 30px rgba(0, 143, 191, 0.06) !important;
}

/* Noise layer should be subtle and not compete with content */

.noise {
    mix-blend-mode: soft-light !important;
    opacity: var(--noise-opacity) !important;
    z-index: 0 !important;
}

/* Navbar readability on dark backgrounds */

.navbar-area {
    background: linear-gradient(to bottom, rgba(11, 17, 23, 0.85), rgba(11, 17, 23, 0.60)) !important;
    backdrop-filter: blur(6px);
}

/* Ensure hero content and badge are centered */

.hero-area .hero-content {
    text-align: center !important;
}

.hero-area .hero-content h1 {
    text-align: center !important;
}

.hero-area .hero-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* Features cards: ensure cool dark surfaces (avoid warm/brown tones) */

.features {
    background: var(--bg) !important;
}

.features .single-feature {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20) !important;
}

.features .single-feature:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}

.features .single-feature i {
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
}

/* FAQ: neutralize brand gradient in expanded state and set high-contrast colors */

.faq .accordion-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius) !important;
    margin-bottom: 12px !important;
    overflow: hidden;
}

.faq .accordion-button {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 18px 20px !important;
}

.faq .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.faq .accordion-button .title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq .accordion-button .serial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.faq .accordion-button .lni {
    color: var(--brand) !important;
}

.faq .accordion-body {
    background: transparent !important;
    color: var(--muted) !important;
    padding: 0 20px 18px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.faq .accordion-item+.accordion-item {
    border-top: none !important;
}

/* Footer: unify with dark theme */

.footer {
    background: var(--bg) !important;
    color: var(--muted) !important;
    border-top: 1px solid var(--border) !important;
}

.footer a {
    color: var(--text) !important;
    opacity: 0.9;
}

.footer a:hover {
    opacity: 1;
}

/* End of brand overrides */