/* =========================================================
   MOTOMART - COMPLETE DARK MODE
========================================================= */

html.dark-mode {
    background: #0b0f0c;
}

body.dark-mode {
    background: #0b0f0c;
    color: #edf4ef;
}


/* =========================================================
   MAIN PAGE
========================================================= */

body.dark-mode .leasing-page {
    background: #0b0f0c;
}


/* =========================================================
   TOP HEADER
========================================================= */

body.dark-mode .leasing-top {
    background: #121813;
    border-bottom-color: #263329;
    box-shadow: 0 4px 18px rgba(0,0,0,.20);
}

body.dark-mode .brand-area a {
    color: #ffffff;
}

body.dark-mode .back-home {
    color: #9ee2b0;
    background: #17251b;
    border-color: #304536;
}

body.dark-mode .back-home:hover {
    background: #1d3022;
    border-color: #3d5945;
    color: #b4edc3;
}


/* =========================================================
   HERO
========================================================= */

body.dark-mode .hero-intro .eyebrow {
    background: #172c1d;
    color: #83d99b;
    border: 1px solid #294632;
}

body.dark-mode .hero-intro h1 {
    color: #f2f7f3;
}

body.dark-mode .hero-intro h1 span {
    color: #57c979;
}

body.dark-mode .hero-intro p {
    color: #9aa79e;
}


/* =========================================================
   POSTER
========================================================= */

body.dark-mode .poster-section {
    background: #151c17;
    border-color: #2a382e;
    box-shadow:
        0 18px 45px rgba(0,0,0,.28);
}

body.dark-mode .poster {
    background: #0d110e;
}

body.dark-mode .poster img,
body.dark-mode .poster video {
    background: #080a09;
}

body.dark-mode .poster-section p {
    color: #8e9b92 !important;
}


/* =========================================================
   LEASING FORM
========================================================= */

body.dark-mode .lease-form {
    background: #151c17;
    border-color: #2a382e;

    box-shadow:
        0 20px 55px rgba(0,0,0,.30);
}

body.dark-mode .form-heading h2 {
    color: #f2f7f3;
}

body.dark-mode .form-heading p {
    color: #909d94;
}

body.dark-mode .form-icon {
    background: #19301f;
    color: #62d080;
}


/* =========================================================
   FORM LABELS
========================================================= */

body.dark-mode .form-group label {
    color: #b3beb6;
}


/* =========================================================
   INPUTS
========================================================= */

body.dark-mode .lease-form input,
body.dark-mode .lease-form select {
    background: #0e1410;
    color: #edf5ef;

    border-color: #344238;
}

body.dark-mode .lease-form input::placeholder {
    color: #68756c;
}

body.dark-mode .lease-form input:hover,
body.dark-mode .lease-form select:hover {
    border-color: #48604f;
}

body.dark-mode .lease-form input:focus,
body.dark-mode .lease-form select:focus {
    background: #111812;

    color: #ffffff;

    border-color: #55bd72;

    box-shadow:
        0 0 0 3px rgba(70,190,105,.12);
}


/* =========================================================
   SELECT DROPDOWN
========================================================= */

body.dark-mode .lease-form select {
    color-scheme: dark;
}

body.dark-mode .lease-form option {
    background: #121813;
    color: #edf5ef;
}


/* =========================================================
   TWO FIELD BOX
========================================================= */

body.dark-mode .range-box {
    background: #0f1511;
    border-color: #303d34;
}

body.dark-mode .range-top span:first-child {
    color: #9ca89f;
}

body.dark-mode #monthText {
    color: #65d080;
}


/* =========================================================
   RANGE SLIDER
========================================================= */

body.dark-mode #months {
    accent-color: #48bd69;
}


/* =========================================================
   RESULT BOX
========================================================= */

body.dark-mode .result {
    background:
        linear-gradient(
            135deg,
            #15291b,
            #19301f
        );

    border-color: #31533a;

    color: #b8cabe;
}

body.dark-mode .result strong {
    color: #edf7ef;
}

body.dark-mode .result strong[style] {
    color: #62d080 !important;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

body.dark-mode .apply-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #1d8a46
        );

    box-shadow:
        0 10px 25px rgba(0,0,0,.30);
}

body.dark-mode .apply-btn:hover {
    background:
        linear-gradient(
            135deg,
            #176235,
            #219b50
        );

    box-shadow:
        0 14px 30px rgba(0,0,0,.40);
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

body.dark-mode .lease-wa-btn {
    background: #14251a;
    color: #65d080;
    border-color: #31563b;
}

body.dark-mode .lease-wa-btn:hover {
    background: #1a3221;
    color: #83df99;
    border-color: #42704d;
}


/* =========================================================
   TRUST ITEMS
========================================================= */

body.dark-mode .trust-item {
    background: #101711;
    border-color: #29362d;
}

body.dark-mode .trust-item i {
    color: #59c978;
}

body.dark-mode .trust-item span {
    color: #89968d;
}


/* =========================================================
   BENEFITS SECTION
========================================================= */

body.dark-mode .section-heading .small {
    color: #63cf80;
}

body.dark-mode .section-heading h2 {
    color: #f0f6f1;
}

body.dark-mode .section-heading p {
    color: #929f96;
}


/* =========================================================
   BENEFIT CARDS
========================================================= */

body.dark-mode .benefit-card {
    background: #151c17;
    border-color: #2a382e;

    box-shadow:
        0 10px 28px rgba(0,0,0,.20);
}

body.dark-mode .benefit-card:hover {
    background: #18221b;
    border-color: #416149;

    box-shadow:
        0 15px 32px rgba(0,0,0,.30);
}

body.dark-mode .benefit-icon {
    background: #19301f;
    color: #61ce7d;
}

body.dark-mode .benefit-card span {
    color: #adb8b0;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

body.dark-mode .steps {
    background: #151c17;
    border-color: #2a382e;

    box-shadow:
        0 15px 35px rgba(0,0,0,.24);
}

body.dark-mode .step-number {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #14532d,
            #1c8845
        );

    box-shadow:
        0 8px 20px rgba(0,0,0,.30);
}

body.dark-mode .step h3 {
    color: #eaf2ec;
}

body.dark-mode .step p {
    color: #89968e;
}


/* =========================================================
   MOBILE CALCULATOR BUTTON
========================================================= */

body.dark-mode .mobile-calc-button {
    background:
        linear-gradient(
            135deg,
            #14532d,
            #1d8846
        );

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.45);
}


/* =========================================================
   CALCULATOR OVERLAY
========================================================= */

body.dark-mode .calculator-overlay {
    background: rgba(0,0,0,.72);
}


/* =========================================================
   CALCULATOR DRAWER
========================================================= */

body.dark-mode .calculator-drawer {
    background: #151c17;
    border-top: 1px solid #2d3b31;

    box-shadow:
        0 -20px 50px rgba(0,0,0,.50);
}

body.dark-mode .sheet-handle {
    background: #526057;
}

body.dark-mode .sheet-header button {
    background: #202a23;
    color: #c5d0c8;
}

body.dark-mode .sheet-header button:hover {
    background: #29352d;
    color: #ffffff;
}


/* =========================================================
   CALCULATOR DISPLAY
========================================================= */

body.dark-mode .calc-display {
    background: #090d0a;
    color: #f4faf5;

    border: 1px solid #263229;
}


/* =========================================================
   CALCULATOR BUTTONS
========================================================= */

body.dark-mode .calc-buttons button {
    background: #202822;
    color: #e2eae4;
}

body.dark-mode .calc-buttons button:hover {
    background: #29342c;
}

body.dark-mode .calc-buttons .op {
    background: #193321;
    color: #65d080;
}

body.dark-mode .calc-buttons .op:hover {
    background: #22442b;
}

body.dark-mode .calc-buttons .ac-btn {
    background: #1c3a24;
    color: #70d98a;
}

body.dark-mode .calc-buttons .clear-btn {
    background: #252c27;
    color: #aeb8b1;
}

body.dark-mode #calcEqual {
    background:
        linear-gradient(
            135deg,
            #14532d,
            #1d8846
        );

    color: #ffffff;
}


/* =========================================================
   FOOTER
========================================================= */

body.dark-mode .site-footer {
    background: #080c09;
    color: #dce7df;
    border-top: 1px solid #263229;
}

body.dark-mode .site-footer h2,
body.dark-mode .site-footer h3 {
    color: #eef6f0;
}

body.dark-mode .site-footer p {
    color: #87948b;
}

body.dark-mode .site-footer a {
    color: #9eaaa2;
}

body.dark-mode .site-footer a:hover {
    color: #61ce7d;
}

body.dark-mode .footer-bottom {
    background: #060906;
    border-top: 1px solid #202a23;
    color: #737e76;
}


/* =========================================================
   SCROLLBAR
========================================================= */

body.dark-mode {
    scrollbar-color: #385441 #0b0f0c;
}

body.dark-mode::-webkit-scrollbar {
    width: 9px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: #0b0f0c;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #385441;
    border-radius: 10px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #4d7057;
}


/* =========================================================
   MOBILE DARK MODE
========================================================= */

@media (max-width: 800px) {

    body.dark-mode .hero-intro h1 {
        color: #f3f8f4;
    }

    body.dark-mode .poster-section {
        box-shadow:
            0 10px 30px rgba(0,0,0,.28);
    }

    body.dark-mode .lease-form {
        box-shadow:
            0 12px 35px rgba(0,0,0,.30);
    }

    body.dark-mode .benefit-card {
        box-shadow:
            0 8px 22px rgba(0,0,0,.22);
    }

    body.dark-mode .steps {
        box-shadow:
            0 10px 28px rgba(0,0,0,.25);
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    body.dark-mode .leasing-top {
        background: #111711;
    }

    body.dark-mode .back-home {
        background: #16241a;
    }

    body.dark-mode .poster-section {
        border-color: #29362d;
    }

    body.dark-mode .lease-form {
        background: #141b16;
        border-color: #29362d;
    }

    body.dark-mode .benefit-card {
        background: #141b16;
    }

    body.dark-mode .steps {
        background: #141b16;
    }
}