/*-----------------------------------------------------------------------------------
    Dark Mode CSS for Frontend
    This file contains all dark mode styles for the frontend theme
-----------------------------------------------------------------------------------*/

/* ============================================
   CSS Variables for Dark Mode
============================================ */
html.dark-mode {
    --tp-common-white: #0a0a0a;
    --tp-common-black: #ffffff;
    --tp-common-black-2: #e5e5e5;
    --tp-common-black-3: #ffffff;
    --tp-text-body: #b3b3b3;
    --tp-grey-1: #1a1a1a;
    --tp-grey-2: #252525;
    --tp-grey-3: #1f1f1f;
    --tp-border-1: #2a2a2a;
    --tp-border-2: #333333;
    --dm-bg-primary: #0a0a0a;
    --dm-bg-secondary: #111111;
    --dm-bg-tertiary: #1a1a1a;
    --dm-text-primary: #ffffff;
    --dm-text-secondary: #b3b3b3;
    --dm-text-muted: #666666;
    --dm-border-color: #2a2a2a;
}

/* ============================================
   Base & Body Styles
============================================ */
html.dark-mode body {
    background-color: #0a0a0a;
    color: #e5e5e5;
}

html.dark-mode #smooth-content {
    background-color: #0a0a0a;
}

html.dark-mode main {
    background-color: #0a0a0a;
}

/* ============================================
   Header Styles
============================================ */
html.dark-mode .tp-header-area {
    background-color: transparent;
}

html.dark-mode .tp-header-area.header-sticky {
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-header-menu nav ul li a {
    color: #ffffff;
}

html.dark-mode .tp-header-menu nav ul li a:hover {
    color: var(--tp-theme-primary);
}

html.dark-mode .tp-header-menu nav ul li .tp-submenu {
    background-color: #111111;
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html.dark-mode .tp-header-menu nav ul li .tp-submenu li a {
    color: #e5e5e5;
}

html.dark-mode .tp-header-menu nav ul li .tp-submenu li a:hover {
    color: var(--tp-theme-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

html.dark-mode .tp-header-bar button i,
html.dark-mode .tp-offcanvas-open-btn i {
    background-color: #ffffff;
}

html.dark-mode .logo-white {
    display: block !important;
}

html.dark-mode .logo-black {
    display: none !important;
}

/* ============================================
   Hero Section
============================================ */
html.dark-mode .tp-hero-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-hero-title {
    color: #ffffff;
}

html.dark-mode .tp-hero-info p {
    color: #b3b3b3;
}

html.dark-mode .tp-hero-info span a {
    color: #ffffff;
}

html.dark-mode .tp-hero-more-info {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-hero-more-info p {
    color: #b3b3b3;
}

html.dark-mode .tp-hero-avater span {
    color: #ffffff;
}

/* Quote Button in Hero - KEEP LIGHT MODE COLORS IN DARK MODE */
/* The quote button should always have the same styling regardless of mode */
html.dark-mode .tp-hero-link a,
.tp-hero-link a {
    display: inline-block;
    border-radius: 30px;
    padding: 8px 24px;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--tp-common-white, #ffffff) !important;
    background-color: var(--tp-common-black, #0a0a0a) !important;
    font-family: "Asyna", sans-serif;
    transition: all 0.3s ease;
}

html.dark-mode .tp-hero-link a:hover,
.tp-hero-link a:hover {
    background-color: var(--tp-common-red-3, #e74c3c) !important;
}

/* ============================================
   About Section
============================================ */
html.dark-mode .tp-about-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-about-text p {
    color: #e5e5e5;
}

html.dark-mode .tp-section-subtitle {
    color: #b3b3b3;
}

html.dark-mode .tp-about-avater-info p {
    color: #b3b3b3;
}

html.dark-mode .tp-about-funcact-item span {
    color: #ffffff;
}

html.dark-mode .tp-about-funcact-item p {
    color: #b3b3b3;
}

/* ============================================
   Services Section - KEEP LIGHT MODE STYLING
   (Overridden in inline styles to maintain light background with dark text)
============================================ */
/* Services section intentionally kept with light background */

/* ============================================
   Portfolio Section
============================================ */
html.dark-mode .tp-portfolio-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-portfolio-item {
    background-color: #111111;
}

html.dark-mode .tp-portfolio-title a {
    color: #ffffff;
}

html.dark-mode .tp-portfolio-category span {
    color: #b3b3b3;
}

/* ============================================
   Gallery Section
============================================ */
html.dark-mode .tp-gallery-area {
    background-color: #0a0a0a;
}

/* ============================================
   Process/Work Section - KEEP LIGHT MODE STYLING
   (Overridden in inline styles to maintain original appearance)
============================================ */
/* Process/Work section intentionally kept with light mode styling */

/* ============================================
   Testimonial Section - KEEP ORIGINAL STYLING
   (Card colors based on style class preserved via inline overrides)
============================================ */
/* Testimonial section styling maintained via inline styles */

/* ============================================
   Fun Fact Section - KEEP LIGHT MODE STYLING
   (Overridden in inline styles to maintain original appearance)
============================================ */
/* Fun fact section intentionally kept with light mode styling */

/* ============================================
   Text Slider
============================================ */
html.dark-mode .tp-text-slider-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-text-slider-item span {
    color: #ffffff;
}

html.dark-mode .tp-text-slider-item span.outline-text {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Banner Section - KEEP LIGHT MODE STYLING
   (Overridden in inline styles to maintain original appearance)
============================================ */
/* Banner section intentionally kept with light mode styling */

/* ============================================
   Footer Styles
============================================ */
html.dark-mode .tp-footer-area {
    background-color: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-footer-widget-title {
    color: #ffffff;
}

html.dark-mode .tp-footer-widget-title-sm {
    color: #ffffff;
}

html.dark-mode .tp-footer-widget-menu ul li a {
    color: #b3b3b3;
}

html.dark-mode .tp-footer-widget-menu ul li a:hover {
    color: var(--tp-theme-primary);
}

html.dark-mode .tp-footer-widget-info a {
    color: #b3b3b3;
}

html.dark-mode .tp-footer-widget-info a:hover {
    color: var(--tp-theme-primary);
}

html.dark-mode .tp-footer-widget-social a {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .tp-footer-widget-social a:hover {
    background-color: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
}

html.dark-mode .tp-copyright-area {
    background-color: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-copyright-left span {
    color: #666666;
}

html.dark-mode .tp-copyright-big-text {
    color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Offcanvas Styles
============================================ */
html.dark-mode .tp-offcanvas-wrapper {
    background-color: #0a0a0a;
}

html.dark-mode .tp-offcanvas-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-offcanvas-logo img {
    filter: brightness(0) invert(1);
}

html.dark-mode .tp-offcanvas-close-btn svg path {
    stroke: #ffffff;
}

html.dark-mode .tp-offcanvas-menu nav ul li a {
    color: #ffffff;
}

html.dark-mode .tp-offcanvas-menu nav ul li a:hover {
    color: var(--tp-theme-primary);
}

html.dark-mode .tp-offcanvas-title {
    color: #ffffff;
}

html.dark-mode .tp-offcanvas-contact ul li a {
    color: #b3b3b3;
}

html.dark-mode .tp-offcanvas-contact ul li a:hover {
    color: var(--tp-theme-primary);
}

html.dark-mode .tp-offcanvas-social ul li a {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .tp-offcanvas-social ul li a:hover {
    background-color: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
}

html.dark-mode .ss-offcanvas-account {
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .ss-offcanvas-language .form-label {
    color: #b3b3b3;
}

html.dark-mode .ss-offcanvas-language .form-select {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark-mode .ss-offcanvas-search .search-input {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark-mode .ss-offcanvas-search .search-input::placeholder {
    color: #666666;
}

html.dark-mode .body-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   Search Area
============================================ */
html.dark-mode .tp-search-area {
    background-color: rgba(10, 10, 10, 0.98);
}

html.dark-mode .tp-search-area .search-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html.dark-mode .tp-search-area .search-input::placeholder {
    color: #666666;
}

html.dark-mode .tp-search-close-btn svg path {
    stroke: #ffffff;
}

/* ============================================
   Buttons - KEEP LIGHT MODE STYLING
   (Overridden in inline styles to maintain original appearance)
============================================ */
/* Buttons intentionally kept with light mode styling */

/* ============================================
   Form Elements
============================================ */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #666666;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: var(--tp-theme-primary);
    background-color: #1a1a1a;
}

html.dark-mode .form-label {
    color: #b3b3b3;
}

/* ============================================
   Cards & Boxes
============================================ */
html.dark-mode .tp-card,
html.dark-mode .tp-box {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Section Titles
============================================ */
html.dark-mode .tp-section-title {
    color: #ffffff;
}

html.dark-mode .tp-section-title-sm {
    color: #ffffff;
}

html.dark-mode .tp-section-subtitle {
    color: #b3b3b3;
}

/* ============================================
   Preloader
============================================ */
html.dark-mode #preloader {
    background-color: #0a0a0a;
}

html.dark-mode .preloader span {
    background-color: var(--tp-theme-primary);
}

/* ============================================
   Back to Top
============================================ */
html.dark-mode .back-to-top-btn {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html.dark-mode .back-to-top-btn:hover {
    background-color: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
}

/* ============================================
   Scroll Indicator
============================================ */
html.dark-mode #scroll-indicator {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Magic Cursor
============================================ */
html.dark-mode #ball {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   Ajax Loading
============================================ */
html.dark-mode #ajax-loading {
    background-color: rgba(10, 10, 10, 0.9);
}

html.dark-mode .ajax-loading-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--tp-theme-primary);
}

/* ============================================
   Login Modal
============================================ */
html.dark-mode .tp-login-modal .modal-content {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-login-modal .modal-header {
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-login-modal .modal-title {
    color: #ffffff;
}

html.dark-mode .tp-login-modal .btn-close {
    filter: invert(1);
}

/* ============================================
   Theme Toggle Switch (Header)
============================================ */
.theme-switch-wrapper {
    margin-right: 15px;
}

.theme-switch {
    position: relative;
    width: 70px;
    height: 32px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(4, 52, 73);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    transition: background-color 0.7s ease-in-out;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    border: none;
}

.theme-switch:checked {
    background-color: rgb(0, 195, 255);
    transition: background-color 1s ease-in-out;
}

/* Toggle Circle */
.theme-switch:after {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 2px;
    top: 2px;
    transform: translateX(0px);
    animation: switchOff 0.7s forwards cubic-bezier(0.8, 0.5, 0.2, 1.4);
    box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes switchOff {
    0% {
        transform: translateX(38px);
        width: 28px;
    }
    50% {
        width: 42px;
        border-radius: 16px;
    }
    100% {
        transform: translateX(0px);
        width: 28px;
    }
}

.theme-switch:checked:after {
    animation: switchOn 0.7s forwards cubic-bezier(0.8, 0.5, 0.2, 1.4);
    box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes switchOn {
    0% {
        transform: translateX(0px);
        width: 28px;
    }
    50% {
        width: 42px;
        border-radius: 16px;
    }
    100% {
        transform: translateX(38px);
        width: 28px;
    }
}

/* Sun Element (Light Mode) */
.theme-switch:checked:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 4px;
    transform-origin: 30px 7px;
    background-color: transparent;
    box-shadow: 3px -1px 0px #fff;
    filter: blur(0px);
    animation: sunAnim 0.7s forwards ease;
}

@keyframes sunAnim {
    0% {
        transform: rotate(170deg);
        background-color: transparent;
        box-shadow: 3px -1px 0px #fff;
        filter: blur(0px);
    }
    50% {
        background-color: transparent;
        box-shadow: 3px -1px 0px #fff;
        filter: blur(0px);
    }
    90% {
        background-color: #f5daaa;
        box-shadow: 0px 0px 6px #f5deb4,
            0px 0px 12px #f5deb4,
            0px 0px 18px #f5deb4,
            inset 0px 0px 2px #efd3a3;
        filter: blur(1px);
    }
    100% {
        transform: rotate(0deg);
        background-color: #f5daaa;
        box-shadow: 0px 0px 6px #f5deb4,
            0px 0px 12px #f5deb4,
            0px 0px 18px #f5deb4,
            inset 0px 0px 2px #efd3a3;
        filter: blur(1px);
    }
}

/* Moon Element (Dark Mode) */
.theme-switch:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 4px;
    filter: blur(1px);
    background-color: #f5daaa;
    box-shadow: 0px 0px 6px #f5deb4,
        0px 0px 12px #f5deb4,
        0px 0px 18px #f5deb4,
        inset 0px 0px 2px #efd3a3;
    transform-origin: 30px 7px;
    animation: moonAnim 0.7s forwards ease;
}

@keyframes moonAnim {
    0% {
        transform: rotate(0deg);
        filter: blur(1px);
    }
    50% {
        filter: blur(1px);
    }
    90% {
        background-color: transparent;
        box-shadow: 3px -1px 0px #fff;
        filter: blur(0px);
    }
    100% {
        transform: rotate(170deg);
        background-color: transparent;
        box-shadow: 3px -1px 0px #fff;
        filter: blur(0px);
    }
}

/* ============================================
   Inner Pages - Contact, Blog, etc.
============================================ */
html.dark-mode .tp-breadcrumb-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-breadcrumb-title {
    color: #ffffff;
}

html.dark-mode .tp-breadcrumb-list span,
html.dark-mode .tp-breadcrumb-list a {
    color: #b3b3b3;
}

html.dark-mode .tp-contact-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-contact-form {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-blog-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-blog-item {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-blog-title a {
    color: #ffffff;
}

html.dark-mode .tp-blog-meta span {
    color: #b3b3b3;
}

/* ============================================
   Shop Pages
============================================ */
html.dark-mode .tp-shop-area {
    background-color: #0a0a0a;
}

html.dark-mode .tp-product-item {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .tp-product-title a {
    color: #ffffff;
}

html.dark-mode .tp-product-price {
    color: #ffffff;
}

html.dark-mode .tp-product-price del {
    color: #666666;
}

/* ============================================
   Quick View Modal
============================================ */
html.dark-mode .tp-quick-view-modal .modal-content {
    background-color: #111111;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Utility Classes for Dark Mode
============================================ */
html.dark-mode .white-bg {
    background-color: #0a0a0a !important;
}

html.dark-mode .grey-bg {
    background-color: #111111 !important;
}

html.dark-mode .black-bg {
    background-color: #1a1a1a !important;
}

html.dark-mode .text-black {
    color: #ffffff !important;
}

html.dark-mode .border-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .border-top {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   Transitions
============================================ */
html,
html body,
html .tp-header-area,
html .tp-offcanvas-wrapper,
html .tp-footer-area,
html input,
html textarea,
html select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}