/* ================================================================
   DARK MODE FOR ACADIA TEMPLATE
   Supports:
   1. OS dark mode
   2. Manual toggle with data-theme="dark"
================================================================ */

/* ------------------------------------------------
   ROOT VARIABLES
------------------------------------------------ */

:root[data-theme="dark"] {

    --tp-common-white: #1a1d27;
    --tp-common-black: #e8eaf0;
    --tp-common-black-1: #dde1ea;

    --tp-grey-1: #1e2130;
    --tp-grey-2: #9fa3b0;
    --tp-grey-3: #b0b4be;
    --tp-grey-4: #252838;
    --tp-grey-5: #9496a1;
    --tp-grey-6: #a0a4b0;

    --tp-red-1: #e0314f;
    --tp-red-2: #e63557;
    --tp-red-3: #d92c3a;

    --tp-blue-1: #1a1d2e;

    --tp-heading-primary: #e8eaf2;
    --tp-heading-2: #c8d4e8;
    --tp-heading-3: #c2cedf;
    --tp-heading-4: #e0e2ec;

    --tp-text-body: #9fa3b0;

    --tp-theme-primary: #d4143d;
    --tp-theme-secondary: #4a9aff;

    --tp-border-primary: #2e3144;
    --tp-border-2: #2a2d3e;
}


/* ------------------------------------------------
   AUTO DARK MODE (OS)
------------------------------------------------ */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) {

        --tp-common-white: #1a1d27;
        --tp-common-black: #e8eaf0;
        --tp-common-black-1: #dde1ea;

        --tp-grey-1: #1e2130;
        --tp-grey-2: #9fa3b0;
        --tp-grey-3: #b0b4be;
        --tp-grey-4: #252838;
        --tp-grey-5: #9496a1;
        --tp-grey-6: #a0a4b0;

        --tp-blue-1: #1a1d2e;

        --tp-heading-primary: #e8eaf2;
        --tp-heading-2: #c8d4e8;
        --tp-heading-3: #c2cedf;
        --tp-heading-4: #e0e2ec;

        --tp-text-body: #9fa3b0;

        --tp-theme-primary: #d4143d;
        --tp-theme-secondary: #4a9aff;

        --tp-border-primary: #2e3144;
        --tp-border-2: #2a2d3e;

    }

}


/* ------------------------------------------------
   GLOBAL DARK STYLE
------------------------------------------------ */

:root[data-theme="dark"] body
@media (prefers-color-scheme: dark) {
    body {

        background-color:#12141f !important;
    }



}




/* ------------------------------------------------
   HEADER
------------------------------------------------ */

[data-theme="dark"] .tp-header-area,
[data-theme="dark"] .tp-header-2-area,
[data-theme="dark"] .tp-header-3-area,
[data-theme="dark"] .tp-header-4-area {

    background:#12141f;
    border-bottom:1px solid #2e3144;

}

[data-theme="dark"] .tp-header-sticky {

    background:#12141f !important;
    box-shadow:0 2px 10px rgba(0,0,0,0.5);

}


/* ------------------------------------------------
   MENU
------------------------------------------------ */

[data-theme="dark"] .tp-main-menu nav ul li a {

    color:#c8cad4;

}

[data-theme="dark"] .tp-main-menu nav ul li a:hover {

    color:var(--tp-theme-primary);

}

[data-theme="dark"] .tp-submenu {

    background:#1e2130;
    box-shadow:0 8px 30px rgba(0,0,0,0.5);

}

[data-theme="dark"] .tp-submenu li a {

    color:#b0b4be;
    border-bottom:1px solid #2e3144;

}

[data-theme="dark"] .tp-submenu li a:hover {

    background:#252838;
    color:var(--tp-theme-primary);

}


/* ------------------------------------------------
   CARDS / BOXES
------------------------------------------------ */

[data-theme="dark"] .tp-course-item,
[data-theme="dark"] .tp-blog-item,
[data-theme="dark"] .tp-event-item,
[data-theme="dark"] .tp-product-item {

    background:#1e2130;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);

}


/* ------------------------------------------------
   TEXT
------------------------------------------------ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {

    color:#e0e2ec;

}

[data-theme="dark"] p {

    color:#9fa3b0;

}


/* ------------------------------------------------
   FORMS
------------------------------------------------ */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {

    background:#1e2130;
    border:1px solid #454657;
    color: #dcdfe4;

}

[data-theme="dark"] input::placeholder {

    color:#6b6f80;

}

[data-theme="dark"] input:focus {

    border-color:var(--tp-theme-secondary);

}


/* ------------------------------------------------
   MODAL
------------------------------------------------ */

[data-theme="dark"] .modal-content {

    background:#1e2130;
    border:1px solid #2e3144;

}

[data-theme="dark"] .tp-filter-mt-2{
    background-color:#12141f !important;
}

[data-theme="dark"] .tp-course-filter-bg {
    background-image: url("/assets/img/dashboard/bg/dashboard-bg-shape-1-dark.png") !important;
    background-color: #1e2130 !important ;
}

[data-theme="dark"] .tp-footer-inner{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .accordion{
    background-color: #1e2130 !important;
    --bs-accordion-bg: #1e2130 !important;
}

[data-theme="dark"] .tp-filter-dropdown-wrapper{

    background: linear-gradient(180deg, #1e2130 0%, #1e2130 100%) !important;

}



[data-theme="dark"] .tp-faq-area{
    background-color: #12141f !important;
}

[data-theme="dark"] .tp-cart-area{
    background-color: #12141f !important;
}

[data-theme="dark"] .tp-blog-details-p{
    background-color: #12141f !important;
}

[data-theme="dark"] a{
    color: #e0e2ec !important;
}

[data-theme="dark"] span{
    color: #e0e2ec !important;
}

[data-theme="dark"] p{
    color: #e0e2ec !important;
}

[data-theme="dark"] h1 h2 h3 h4 h5 h6{
    color: #e0e2ec !important;
}

[data-theme="dark"] .tpd-input label{
    color: #e0e2ec !important;
}

[data-theme="dark"] .table  {
    background-color: #12141f !important;
    --bs-table-bg: #1e2130 !important;
}

[data-theme="dark"] .modal-body  {
    background-color: #1e2130 !important;

}

[data-theme="dark"] .tpd-continue-learning-main  {
    background-color: #1e2130 !important;

}


[data-theme="dark"] td div  {
    color: #e0e2ec !important;

}

[data-theme="dark"] .tp-footer-copyright  {
    color: #e0e2ec !important;

}

[data-theme="dark"] button  {
    color: #e0e2ec !important;

}

[data-theme="dark"] .tp-course-details-2-area{
    background-color: #12141f !important;
}

[data-theme="dark"] .tpd-main{
    background-color: #12141f !important;
}

[data-theme="dark"] .tp-dashboard-banner-shape img{
    background-color: #12141f !important;
}

[data-theme="dark"] .tp-cart-list thead {

    background-color: #1e2130 !important;
}

[data-theme="dark"] .tp-fact-item::before {

    background-color: #1e2130 !important;
}

[data-theme="dark"] .swal2-popup.swal2-toast {

    background-color: #353753 !important;
}

[data-theme="dark"] .tp-header-user-box {

    background-color: #1e2130 !important;
}

[data-theme="dark"] .accordion-item{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .tp-breadcrumb__bg{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .tp-instructor-become-tab .nav .nav-link.active{
    color: #fbfbfb !important;
}
[data-theme="dark"] .tp-filter-widget-checkbox ul li label{
    color: #fbfbfb !important;
}

[data-theme="dark"] .tp-course-details-2-widget-search button{
    color: #fbfbfb !important;
}


[data-theme="dark"] .tp-blog-stories-tag-wrap a{
    background-color: #1e2130 !important;
}

[data-theme="dark"] #loading{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .accordion-header{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .tpd-continue-learning-about-btn {

    background-color: #1e2130 !important;
}

[data-theme="dark"] .tp-blog-stories-area{
    background-color: #12141f !important;
}

[data-theme="dark"] .tp-footer-5-bottom{
    background-color: #12141f !important;
}

[data-theme="dark"] .back-to-top-btn{
    background-color: #1e2130 !important;
}

[data-theme="dark"] .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable){
    background-color: #454657 !important;
}

[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable{
    background-color: #454657 !important;
}

[data-theme="dark"] .ck-content code{
    color: #fbfbfb !important;
}

[data-theme="dark"] .ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset, .ck.ck-reset_all {

    background-color: #1e2130 !important;
    flex-grow:0 !important;
}


/* ------------------------------------------------
   FOOTER
------------------------------------------------ */

[data-theme="dark"] .tp-footer-area {

    background:#0e1018;

}


[data-theme="dark"] .tpd-continue-learning-popup-main span.crose {

    background:#0e1018;
    color:#e0e2ec;

}

[data-theme="dark"] .tp-footer-widget-title {

    color:#e0e2ec;

}

[data-theme="dark"] .tp-footer-widget-link a {

    color:#9fa3b0;

}

[data-theme="dark"] .tp-footer-widget-link a:hover {

    color:var(--tp-theme-primary);

}







/* ------------------------------------------------
   SCROLLBAR
------------------------------------------------ */

::-webkit-scrollbar {

    width:6px;

}

::-webkit-scrollbar-track {

    background:#12141f;

}

::-webkit-scrollbar-thumb {

    background:#2e3144;
    border-radius:3px;

}

::-webkit-scrollbar-thumb:hover {

    background:var(--tp-theme-primary);

}


/* ===============================================================
   BULB TOGGLE BUTTON
================================================================ */

.tp-theme-toggle {

    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    cursor:pointer;
    position:relative;

}

.tp-theme-toggle svg {

    width:22px;
    height:22px;

}

.bulb-glass {

    transition:fill .4s;

}

[data-theme="light"] .bulb-glass {

    fill:#ffd740;

}

[data-theme="dark"] .bulb-glass {

    fill:#3a3d52;

}

.bulb-filament {

    stroke-width:1.5;
    transition:opacity .4s;

}

[data-theme="light"] .bulb-filament {

    stroke:#fff8dc;
    opacity:1;

}

[data-theme="dark"] .bulb-filament {

    stroke:#555870;
    opacity:.6;

}

.tp-theme-toggle::before {

    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    transition:.4s;

}




[data-theme="light"] .tp-theme-toggle::before {

    background:radial-gradient(circle, rgba(255,220,60,.25) 0%, transparent 70%);
    opacity:1;

}