@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap");

.btn--base,.hero__subtitle::before,.hero__subtitle::after,.video-btn .icon::before, .video-btn .icon::after,.video-btn .icon,.video-btn .icon::before, .video-btn .icon::after,.about-thumb .about-img-content,.service-card::after,.section-subtitle.border-left::before,.testimonial-slide-area .content-slider .slick-arrow,.blog-card .post-time,.cta-wrapper,.footer-widget__title::before,.bg--base,.form-check-input:checked,.d-widget.curve--shape::before,.quick-link-card .icon::before,.header .main-menu li .sub-menu li a::before,.pagination .page-item.active .page-link,.pagination .page-item .page-link:hover,.sidebar-menu__header::before{
    background-color: #8b5cf6 !important
}

.service-card__icon,.header .main-menu li a:hover, .header .main-menu li a:focus,.text--base,.footer-link-list li a:hover,.blog-title a:hover,.s-post__title a:hover,.page-breadcrumb li:first-child::before,.account-form .form-group a,.font-size--14px a,.user-account-check .form-check-input:checked ~ label i,.quick-link-card .icon,.quick-link-card:hover,.fw-bold,.inline-menu-list li a:hover,.header .main-menu li.menu_has_children:hover > a::before,.trans-serach-open-btn,.custom-select-search-box .search-box-btn,.sidebar-menu__item.active .sidebar-menu__link,.sidebar-menu__link:hover,.header-user-menu li a:hover{
    color: #8b5cf6 !important
}

.header-user-menu li a:hover{
    background-color: #8b5cf60d !important
}

.pagination .page-item .page-link:hover,.sidebar-menu__item.active .sidebar-menu__link{
    border-color:#8b5cf6 !important
}

.sidebar-menu__item.active .sidebar-menu__link{
    border-color:#8b5cf6 !important
}

.d-widget{
    border-left: 4px solid #8b5cf6 !important
}

.user-account-check .form-check-input:checked ~ label,.form-check-input:checked{
    border-color: #8b5cf6 !important
}

.footer-contact-card .icon{
    background-color: #8b5cf68c !important
}
.footer-contact-card .icon::after{
    background-color: #8b5cf640 !important
}

.service-card{
    border: 2px solid #8b5cf673 !important
}

.service-card:hover{
    box-shadow: 0 5px 15px 1px #8b5cf640 !important
}

.quick-link-card:hover .icon {
    color: #fff !important;
    border-color: #8b5cf6;
}

.accordion-button:not(.collapsed){
    background-color:#8b5cf61A !important
}

.caption-list-two{
    background-color:#8b5cf61A !important
}

.accordion-button:focus{
    border-color: #8b5cf61A !important
}

.main-menu li.active > a{
    color: #8b5cf6;
}

.preloader .animated-preloader, .preloader .animated-preloader::before{
    background: #8b5cf6;
}

.subscription-form{
    border: 3px solid #8b5cf6;
}

/* Tajammal Technovates Global Font Override */
body, h1, h2, h3, h4, h5, h6, a, p, li, span, button, input, select, textarea, label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

body {
    background-color: #07070f !important;
}

/* Refined Component Overrides */
.custom--table thead th {
    background-color: #07070f !important;
    letter-spacing: 0.5px;
}

.header {
    background-color: #07070f !important;
    border-bottom: 1px solid #8b5cf626;
}

.header.menu-fixed .header__bottom {
    background-color: #07070f !important;
}

.d-sidebar {
    background-color: #07070f !important;
    border-right: 1px solid #8b5cf61A;
}

.footer {
    background-color: #07070f !important;
}

.footer__bottom {
    background-color: #050508 !important;
}

/* Smooth border-radius upgrade */
.custom--table, .form--control, .select {
    border-radius: 10px !important;
}

.btn {
    border-radius: 999px !important;
}

/* ===== Technovates Glassmorphism Surfaces ===== */
.custom--card, .d-widget, .account-wrapper, .service-card, .choose-card, .blog-card, .bank-card, .deposit-card, .security-single, .add-money-card {
    background-color: rgba(15, 15, 25, 0.65) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(14px);
}

/* Refined d-widget left border glow */
.d-widget {
    border-left: 4px solid #8b5cf6 !important;
    box-shadow: 0 2px 16px rgba(139, 92, 246, 0.10) !important;
}

/* Gradient CTA buttons — pill shape + glow, matches Technovates hero buttons */
.btn--base, .btn-primary, .btn.btn--base {
    background: linear-gradient(90deg, #8b5cf6 0%, #4f46e5 100%) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.30) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn--base:hover, .btn-primary:hover, .btn.btn--base:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 26px rgba(139, 92, 246, 0.40) !important;
}

/* Sidebar active item pill style */
.sidebar-menu__item.active .sidebar-menu__link {
    background-color: rgba(139, 92, 246, 0.14) !important;
    border-radius: 10px !important;
}

.sidebar-menu__link {
    border-radius: 10px !important;
}
.sidebar-menu__link:hover {
    background-color: rgba(139, 92, 246, 0.08) !important;
}

/* Scrollbar to match Technovates */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f0f17; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }

/* ===== Full dark-mode pass: body text + headings + explicit white sections ===== */
body {
    color: #c7c7d1 !important;
}
h1, h2, h3, h4, h5, h6 {
    color: #f1f1f6 !important;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    color: #f1f1f6 !important;
}
p, li, span, label, td, th {
    color: inherit;
}
.text--secondary, .text-muted, .text-secondary {
    color: #9a9ab8 !important;
}

/* Sections that were explicitly white (e.g. About page) go dark to match body */
section.bg-white {
    background-color: #07070f !important;
}

/* Frontend cards / boxes that still assume light backgrounds */
.section--bg, .box-shadow, .contact-form-wrapper, .custom--table {
    background-color: rgba(20, 16, 31, 0.65) !important;
    color: #c7c7d1 !important;
}

/* Form fields sitewide (frontend contact form etc.) */
.form--control, .form-control, select.form--control, textarea.form--control {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: #e5e5f0 !important;
}
.form--control::placeholder, .form-control::placeholder {
    color: #8a8aa5 !important;
}

/* Same input-group sizing fix as merchant side: .form--control (double dash) is
   not covered by Bootstrap's .input-group auto-grow rule, so amount fields next
   to a currency symbol were collapsing to a tiny default width. */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: stretch !important;
}
.input-group .form--control,
.input-group input.form--control,
.input-group > .form--control {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative;
}
.input-group .input-group-text,
.input-group > .input-group-text {
    flex: 0 0 auto !important;
    white-space: nowrap;
}

/* Fancy custom "select box" widget used on filter bars (Transactions etc.) -
   it's a styled div wrapping a real <select>, not covered by .form--control. */
.custom-select-box-two {
    background-color: rgba(20, 16, 31, 0.65) !important;
    border: 1px solid rgba(139, 92, 246, 0.28) !important;
}
.custom-select-box-two label {
    color: #9a9ab8 !important;
}
.custom-select-box-two select {
    color: #f1f1f6 !important;
    background-color: transparent !important;
}
.custom-select-box-two select option {
    background-color: #14101f !important;
    color: #f1f1f6 !important;
}

/* Accordion-based transaction lists (mirrors merchant side) */
.table--acordion .accordion-body {
    background: rgba(20, 16, 31, 0.65) !important;
    color: #c7c7d1 !important;
}
.table--acordion .accordion-body .text--muted, .table--acordion .accordion-body h4 {
    color: #9a9ab8 !important;
}

/* Footer already dark via $secondColor; make sure footer text stays legible */
.footer, .footer * {
    color: #c7c7d1;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: #f1f1f6 !important;
}