/* =========================================================================
   StatusVin — Frontend Dark Theme
   Layered on top of the existing template CSS. Activated only when the
   <html> element has the attribute  data-theme="dark".
   Nothing here affects the default (light) presentation.
   ========================================================================= */

:root[data-theme="dark"] {
    --sv-bg: #0f1420;
    --sv-bg-elev: #171d2b;
    --sv-bg-elev-2: #1f2636;
    --sv-border: #2a3346;
    --sv-border-soft: #232b3c;
    --sv-text: #e6e9ef;
    --sv-text-muted: #a7b0c0;
    --sv-text-faint: #7f8a9c;
    --sv-heading: #f4f6fa;
    --sv-link: #8b8bff;
    --sv-link-hover: #a5a5ff;
    --sv-accent: #6865ff;
    --sv-accent-soft: rgba(104, 101, 255, .18);
    --sv-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

/* Smooth cross-theme transition (kept subtle, no layout properties) */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body * {
    transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* ---- Base surfaces ---------------------------------------------------- */
:root[data-theme="dark"] body {
    background-color: var(--sv-bg) !important;
    color: var(--sv-text);
}

:root[data-theme="dark"] #smooth-content,
:root[data-theme="dark"] main.fix {
    background-color: var(--sv-bg);
}

/* Generic text colour normalisation */
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] span,
:root[data-theme="dark"] label,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
    color: var(--sv-text);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .breadcrumb__title,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .tp-section__title,
:root[data-theme="dark"] .tp-section-title {
    color: var(--sv-heading) !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .tp-feature__meta,
:root[data-theme="dark"] .breadcrumb__text p {
    color: var(--sv-text-muted) !important;
}

/* Links */
:root[data-theme="dark"] a {
    color: var(--sv-text);
}
:root[data-theme="dark"] a:hover {
    color: var(--sv-link-hover);
}

/* ---- Logo theme swap --------------------------------------------------
   Two <img> variants share the same slot; only one shows per theme.
   Light mode -> colored logo, Dark mode -> white logo (real asset). */
.sv-logo--dark { display: none; }
.sv-logo--light { display: inline-block; }
:root[data-theme="dark"] .sv-logo--light { display: none; }
:root[data-theme="dark"] .sv-logo--dark { display: inline-block; }

/* ---- Header ----------------------------------------------------------- */
:root[data-theme="dark"] .header-bottom__area,
:root[data-theme="dark"] #header-sticky,
:root[data-theme="dark"] header.tp-header-height {
    background-color: var(--sv-bg-elev) !important;
    border-bottom: 1px solid var(--sv-border-soft);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Sticky header state:
   On scroll the template adds .header-sticky and paints the bar solid white
   (background-color:#fff) with a light neumorphic shadow. That produced a
   bright strip under the header in dark mode. Override the background and
   swap the light shadow for a soft dark one. The selector matches the
   template's own specificity so it reliably wins. */
:root[data-theme="dark"] .header-bottom__area-2.header-sticky,
:root[data-theme="dark"] #header-sticky.header-sticky {
    background-color: var(--sv-bg-elev) !important;
    border-bottom: 1px solid var(--sv-border-soft) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

:root[data-theme="dark"] .header-bottom__main-menu nav > ul > li > a {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .header-bottom__main-menu nav > ul > li > a:hover {
    color: var(--sv-link-hover) !important;
}

/* Submenu / dropdown */
:root[data-theme="dark"] .header-bottom__main-menu nav ul li .submenu {
    background-color: var(--sv-bg-elev-2) !important;
    border: 1px solid var(--sv-border);
    box-shadow: var(--sv-shadow);
}
:root[data-theme="dark"] .header-bottom__main-menu nav ul li .submenu li a {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .header-bottom__main-menu nav ul li .submenu li a:hover {
    color: var(--sv-link-hover) !important;
    background-color: rgba(255, 255, 255, .04) !important;
}

/* Mobile menu bar (hamburger) — template uses a white circle
   (.header-bottom__bar { background:#fff; color:#000 }). Make it a dark,
   subtle pill with a light icon so it fits the dark header. */
:root[data-theme="dark"] .header-bottom__bar,
:root[data-theme="dark"] .tp-menu-bar {
    background-color: var(--sv-bg-elev-2) !important;
    border: 1px solid var(--sv-border) !important;
    color: var(--sv-text) !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .header-bottom__bar i,
:root[data-theme="dark"] .tp-menu-bar i {
    color: var(--sv-text) !important;
}

/* Offcanvas panel */
:root[data-theme="dark"] .tpoffcanvas {
    background-color: var(--sv-bg-elev) !important;
}
:root[data-theme="dark"] .tpoffcanvas .mobile-menu ul li a {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tpoffcanvas .mobile-menu ul li a:hover {
    color: var(--sv-link-hover) !important;
}
/* Offcanvas close button — template uses a white square
   (.tpoffcanvas__close-btn button { background:#fff; color:#000 }). */
:root[data-theme="dark"] .tpoffcanvas__close-btn button {
    background-color: var(--sv-bg-elev-2) !important;
    border: 1px solid var(--sv-border) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tpoffcanvas__close-btn button i {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tpoffcanvas__close-btn button:hover {
    background-color: var(--sv-bg-elev) !important;
    color: var(--sv-link-hover) !important;
}
/* Offcanvas nav (meanmenu) — its container has a hard-coded dark-navy
   background (#070337) and light-gray dividers (#e0e3ed). Align both with
   the theme so the whole panel is one consistent dark surface. */
:root[data-theme="dark"] .tpoffcanvas .mobile-menu .mean-nav,
:root[data-theme="dark"] .tpoffcanvas .mean-nav {
    background: transparent !important;
    margin-top: 0 !important;
}
:root[data-theme="dark"] .tpoffcanvas .mean-nav ul li a,
:root[data-theme="dark"] .tpoffcanvas .mobile-menu .mean-nav > ul > li > a {
    color: var(--sv-text) !important;
    border-top-color: var(--sv-border-soft) !important;
}
:root[data-theme="dark"] .tpoffcanvas .mean-nav ul li a:hover {
    color: var(--sv-link-hover) !important;
}
/* Submenu expand/collapse (+ / ×) toggle: transparent, just a light icon,
   no box — matches the plugin's default (transparent, borderless). */
:root[data-theme="dark"] .tpoffcanvas .mean-expand,
:root[data-theme="dark"] .tpoffcanvas .mean-nav ul li a.mean-expand {
    background: transparent !important;
    border: none !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tpoffcanvas .mean-expand i {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tpoffcanvas .mean-expand:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--sv-link-hover) !important;
}
:root[data-theme="dark"] .mean-container .mean-nav {
    background-color: var(--sv-bg-elev-2) !important;
}
:root[data-theme="dark"] .mean-container .mean-nav ul li a {
    color: var(--sv-text) !important;
    border-top: 1px solid var(--sv-border-soft);
}

/* ---- Cards / items ---------------------------------------------------- */
:root[data-theme="dark"] .home-dp-section .tp-service__item,
:root[data-theme="dark"] .home-images-section .tp-service__item,
:root[data-theme="dark"] .tp-service__item,
:root[data-theme="dark"] .tp-feature__item,
:root[data-theme="dark"] .card {
    background-color: var(--sv-bg-elev) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text);
    box-shadow: var(--sv-shadow);
}

:root[data-theme="dark"] .tp-feature__item p,
:root[data-theme="dark"] .tp-feature__title-sm {
    color: var(--sv-text) !important;
}

:root[data-theme="dark"] .tp-service__title a {
    color: var(--sv-heading) !important;
}

/* ---- Homepage service tiles (frosted card + colored gradient shape) ----
   The template stacks a translucent .tp-service-2__item over a rotated
   colored .tp-service-2__bg-shape. In dark mode we keep the SAME design
   language (glass card + tinted gradient behind it) but swap the bright
   pastels for deep, theme-appropriate gradients and lighten the content. */
:root[data-theme="dark"] .tp-service-2__item {
    background: rgba(31, 38, 54, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.35),
                inset 0px 0px 0.5px rgba(255, 255, 255, 0.12) !important;
}
:root[data-theme="dark"] .tp-service-2__item .fi-size {
    color: #e6e9ef !important;
}
:root[data-theme="dark"] .tp-service-2__title-sm,
:root[data-theme="dark"] .tp-service-2__title-sm a,
:root[data-theme="dark"] .tp-service-2__link {
    color: #f4f6fa !important;
}
:root[data-theme="dark"] .tp-service-2__link::after {
    background-color: #f4f6fa !important;
}
/* Default (blue) shape */
:root[data-theme="dark"] .tp-service-2__bg-shape {
    background: linear-gradient(41.25deg, #1b3a5c 25%, #14506a 94%) !important;
}
/* Green variant */
:root[data-theme="dark"] .tp-service-2__color-2 {
    background: linear-gradient(180deg, #2f4d1e -10%, #1f4a2c 100%) !important;
}
/* Pink/orange variant */
:root[data-theme="dark"] .tp-service-2__color-3 {
    background: linear-gradient(24.55deg, #5c2444 22%, #5c3b26 92%) !important;
}
/* Purple variant */
:root[data-theme="dark"] .tp-service-2__color-4 {
    background: linear-gradient(25.41deg, #3a2a5c 22%, #2b3560 91%) !important;
}

/* =========================================================================
   Static / legal content pages (Sitemap, Disclaimer, Terms, Privacy, Contact)
   These pages define their own inline <style> with white cards + dark text
   (.legal__*, .sitemap__*, .contact-*). Those rules out-specify the generic
   dark rules above, so we override them here with matching/higher specificity.
   ========================================================================= */
:root[data-theme="dark"] .legal__wrapper,
:root[data-theme="dark"] .sitemap__wrapper,
:root[data-theme="dark"] .page-static__wrapper {
    color: var(--sv-text) !important;
}

/* Cards */
:root[data-theme="dark"] .legal__card,
:root[data-theme="dark"] .sitemap__card,
:root[data-theme="dark"] .contact-form__box,
:root[data-theme="dark"] .contact-info__card {
    background: var(--sv-bg-elev) !important;
    border-color: var(--sv-border) !important;
    box-shadow: var(--sv-shadow) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .sitemap__card:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Headings */
:root[data-theme="dark"] .legal__card h2,
:root[data-theme="dark"] .legal__card h3,
:root[data-theme="dark"] .sitemap__card h2,
:root[data-theme="dark"] .contact-info__item h3 {
    color: var(--sv-heading) !important;
}

/* Body text / list items */
:root[data-theme="dark"] .legal__card p,
:root[data-theme="dark"] .legal__card li,
:root[data-theme="dark"] .legal__card ul,
:root[data-theme="dark"] .legal__card ol,
:root[data-theme="dark"] .contact-info__item p {
    color: var(--sv-text) !important;
}

/* Links */
:root[data-theme="dark"] .legal__card a,
:root[data-theme="dark"] .sitemap__card ul li a,
:root[data-theme="dark"] .contact-info__item a {
    color: var(--sv-link) !important;
}
:root[data-theme="dark"] .legal__card a:hover,
:root[data-theme="dark"] .sitemap__card ul li a:hover,
:root[data-theme="dark"] .contact-info__item a:hover {
    color: var(--sv-link-hover) !important;
}
:root[data-theme="dark"] .sitemap__card ul li a::before {
    color: var(--sv-text-faint) !important;
}
:root[data-theme="dark"] .sitemap__card ul li a:hover::before {
    color: var(--sv-link-hover) !important;
}
:root[data-theme="dark"] .sitemap__card h2 i {
    color: var(--sv-link) !important;
}

/* Borders / dividers inside cards */
:root[data-theme="dark"] .sitemap__card h2 {
    border-bottom-color: var(--sv-border) !important;
}
:root[data-theme="dark"] .legal__card th,
:root[data-theme="dark"] .legal__card td {
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}

/* "Last updated" pill */
:root[data-theme="dark"] .legal__updated {
    background: var(--sv-accent-soft, rgba(104, 101, 255, .18)) !important;
    color: var(--sv-link-hover) !important;
}

/* Contact form fields */
:root[data-theme="dark"] .contact-form__box label {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .contact-form__box .form-control {
    background: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .contact-form__box .form-control::placeholder {
    color: var(--sv-text-faint) !important;
}
:root[data-theme="dark"] .contact-form__box .form-control:focus {
    background: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-accent) !important;
    box-shadow: 0 0 0 3px rgba(104, 101, 255, 0.25) !important;
}
:root[data-theme="dark"] .contact-info__item .icon,
:root[data-theme="dark"] .contact-info__item [class*="icon"] {
    color: var(--sv-link) !important;
}

/* ---- Backgrounds used by template ------------------------------------- */
:root[data-theme="dark"] .grey-bg,
:root[data-theme="dark"] .grey-bg-2,
:root[data-theme="dark"] .white-bg {
    background-color: var(--sv-bg-elev) !important;
}

/* ---- Breadcrumb / hero banner ----------------------------------------
   The template hero is a section with a decorative shape image and a
   frosted lavender glow (.breadcrumb-overlay::after: soft pastel tint +
   backdrop-filter blur). On a flat dark slab that glow looks muddy, so we
   give the hero a real dark gradient and retune the glow to a subtle,
   theme-appropriate accent halo — preserving the original "frosted" feel. */
:root[data-theme="dark"] .breadcrumb__area {
    background: linear-gradient(180deg, #141a28 0%, #10151f 100%) !important;
    border-bottom: 1px solid var(--sv-border-soft);
}
:root[data-theme="dark"] .breadcrumb-overlay::after {
    background: radial-gradient(120% 140% at 50% -20%,
                rgba(104, 101, 255, 0.18) 0%,
                rgba(104, 101, 255, 0.06) 40%,
                rgba(15, 20, 32, 0) 75%) !important;
    /* Keep a light blur for depth without the washed-out heavy blur */
    backdrop-filter: blur(40px) !important;
}
/* Decorative corner shape: dim it so it reads as a subtle accent, not a
   bright pastel plate over the dark hero. */
:root[data-theme="dark"] .breadcrumb__shape-2 img {
    opacity: 0.25;
    filter: hue-rotate(200deg) brightness(0.8);
}
/* Heading + subtitle contrast (subtitle rule in template has high
   specificity via .breadcrumb-overlay, so match/exceed it here). */
:root[data-theme="dark"] .breadcrumb__title,
:root[data-theme="dark"] .breadcrumb__content .breadcrumb__title {
    color: var(--sv-heading) !important;
}
:root[data-theme="dark"] .breadcrumb__text p,
:root[data-theme="dark"] .breadcrumb-overlay .breadcrumb__text p {
    color: var(--sv-text-muted) !important;
}
:root[data-theme="dark"] .breadcrumb__text span {
    color: var(--sv-text) !important;
}

/* ---- Buttons ---------------------------------------------------------- */
:root[data-theme="dark"] .tp-btn,
:root[data-theme="dark"] .tag-btn,
:root[data-theme="dark"] .status-copy-btn {
    background-color: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tp-btn span,
:root[data-theme="dark"] .tag-btn span,
:root[data-theme="dark"] .status-copy-btn span {
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .tp-btn:hover,
:root[data-theme="dark"] .tag-btn:hover,
:root[data-theme="dark"] .status-copy-btn:hover {
    background-color: var(--sv-accent) !important;
    border-color: var(--sv-accent) !important;
}
:root[data-theme="dark"] .tp-btn:hover span,
:root[data-theme="dark"] .tag-btn:hover span,
:root[data-theme="dark"] .status-copy-btn:hover span {
    color: #fff !important;
}
/* Active tag / copied state keep their accent (defined inline in views) */

/* ---- Forms ------------------------------------------------------------ */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .nice-select {
    background-color: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] .form-control::placeholder {
    color: var(--sv-text-faint) !important;
    opacity: 1;
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] .form-control:focus {
    border-color: var(--sv-accent) !important;
    box-shadow: 0 0 0 .15rem rgba(104, 101, 255, .35) !important;
}
:root[data-theme="dark"] .nice-select .list {
    background-color: var(--sv-bg-elev-2) !important;
    border: 1px solid var(--sv-border);
}
:root[data-theme="dark"] .nice-select .option:hover,
:root[data-theme="dark"] .nice-select .option.selected {
    background-color: rgba(255, 255, 255, .06) !important;
}

/* ---- Pagination ------------------------------------------------------- */
:root[data-theme="dark"] .pagination .page-link,
:root[data-theme="dark"] .basic-pagination ul li a,
:root[data-theme="dark"] .basic-pagination ul li span {
    background-color: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}
:root[data-theme="dark"] .pagination .page-item.active .page-link,
:root[data-theme="dark"] .basic-pagination ul li .current,
:root[data-theme="dark"] .basic-pagination ul li a:hover {
    background-color: var(--sv-accent) !important;
    border-color: var(--sv-accent) !important;
    color: #fff !important;
}

/* ---- Alerts / modals -------------------------------------------------- */
:root[data-theme="dark"] .modal-content {
    background-color: var(--sv-bg-elev) !important;
    color: var(--sv-text);
    border: 1px solid var(--sv-border);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--sv-border) !important;
}
:root[data-theme="dark"] .alert {
    background-color: var(--sv-bg-elev-2) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text) !important;
}

/* ---- Footer ----------------------------------------------------------- */
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .tp-footer-style-2,
:root[data-theme="dark"] .tp-footer__area,
:root[data-theme="dark"] .tp-copyright__area {
    background-color: var(--sv-bg-elev) !important;
    border-color: var(--sv-border-soft) !important;
}
:root[data-theme="dark"] .tp-footer__content ul li a,
:root[data-theme="dark"] .footer-links ul li a,
:root[data-theme="dark"] .tp-copyright__text,
:root[data-theme="dark"] .connect-text {
    color: var(--sv-text-muted) !important;
}
:root[data-theme="dark"] .tp-footer__content ul li a:hover,
:root[data-theme="dark"] .footer-links ul li a:hover {
    color: var(--sv-link-hover) !important;
}
:root[data-theme="dark"] .tp-copyright__social a {
    color: var(--sv-text) !important;
}

/* ---- Dividers / borders ---------------------------------------------- */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .tp-footer__tp-border-bottom {
    border-color: var(--sv-border) !important;
}

/* ---- Images: keep intact, just soften pure-white plates -------------- */
:root[data-theme="dark"] img {
    /* No filter by default so photos/logos stay accurate. */
}

/* Back-to-top button */
:root[data-theme="dark"] .scroll-top {
    background-color: var(--sv-accent) !important;
    color: #fff !important;
}

/* =========================================================================
   Theme toggle button (shared markup on frontend header)
   Styled for BOTH themes so it always looks intentional.
   ========================================================================= */
.sv-theme-toggle {
    --size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    margin-left: 14px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .04);
    color: #1e293b;
    cursor: pointer;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.sv-theme-toggle:hover {
    background: rgba(104, 101, 255, .12);
    border-color: rgba(104, 101, 255, .4);
    color: #6865ff;
}
.sv-theme-toggle:active {
    transform: scale(.92);
}
.sv-theme-toggle:focus-visible {
    outline: 2px solid #6865ff;
    outline-offset: 2px;
}
.sv-theme-toggle i {
    font-size: 18px;
    pointer-events: none;
}
/* Icon swap: show moon in light mode, sun in dark mode */
.sv-theme-toggle .sv-icon-sun { display: none; }
.sv-theme-toggle .sv-icon-moon { display: inline-block; }
:root[data-theme="dark"] .sv-theme-toggle {
    border-color: var(--sv-border);
    background: var(--sv-bg-elev-2);
    color: #ffd76a;
}
:root[data-theme="dark"] .sv-theme-toggle:hover {
    background: rgba(255, 215, 106, .14);
    border-color: rgba(255, 215, 106, .45);
    color: #ffdf85;
}
:root[data-theme="dark"] .sv-theme-toggle .sv-icon-sun { display: inline-block; }
:root[data-theme="dark"] .sv-theme-toggle .sv-icon-moon { display: none; }

/* Toggle placement inside the header right cluster */
.header-bottom__right .sv-theme-toggle { margin-left: 12px; }
@media (max-width: 575px) {
    .sv-theme-toggle { --size: 36px; margin-left: 8px; }
    .sv-theme-toggle i { font-size: 16px; }
}