/*
|--------------------------------------------------------------------------
| MEGA MOTORS GLOBAL THEME
|--------------------------------------------------------------------------
*/

:root {

    --mm-navy: #101b2d;
    --mm-navy-dark: #080f1b;
    --mm-navy-light: #1d2d45;

    --mm-gold: #B08D57;
    --mm-gold-light: #d8bd87;
    --mm-gold-dark: #80652e;

    --mm-bg: #f4f0e7;
    --mm-bg-secondary: #e7dfd0;

    --mm-surface: #ffffff;
    --mm-surface-alt: #eee8dc;

    --mm-text: #202733;
    --mm-text-secondary: #687180;

    --mm-border: #d8d0c2;

    --mm-input-bg: #ffffff;

    --mm-white: #ffffff;
    --mm-black: #000000;

    --mm-shadow:
        0 15px 40px rgba(9,17,31,.12);

    --mm-transition:
        .25s ease;
}


/*
|--------------------------------------------------------------------------
| DARK THEME
|--------------------------------------------------------------------------
*/

html.dark-theme {

    --mm-navy: #070d17;
    --mm-navy-dark: #050a12;
    --mm-navy-light: #142238;

    --mm-bg: #0b111c;
    --mm-bg-secondary: #111b2b;

    --mm-surface: #121c2b;
    --mm-surface-alt: #172337;

    --mm-text: #e8ecf1;
    --mm-text-secondary: #aab3c0;

    --mm-border: #29374a;

    --mm-input-bg: #172337;

    --mm-shadow:
        0 18px 45px rgba(0,0,0,.30);
}


/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

html {

    background:
        var(--mm-bg);

    color:
        var(--mm-text);

    transition:
        background .3s ease,
        color .3s ease;
}


body {

    background:
        var(--mm-bg);

    color:
        var(--mm-text);

    transition:
        background .3s ease,
        color .3s ease;
}


/*
|--------------------------------------------------------------------------
| COMMON ELEMENTS
|--------------------------------------------------------------------------
*/

input,
textarea,
select {

    background:
        var(--mm-input-bg);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| GLOBAL THEME BUTTON
|--------------------------------------------------------------------------
*/

.mega-theme-toggle {

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(255,255,255,.20);

    background:
        rgba(255,255,255,.04);

    color:
        var(--mm-gold-light);

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        19px;

    transition:
        var(--mm-transition);
}

.mega-theme-toggle:hover {

    background:
        var(--mm-gold);

    color:
        var(--mm-navy);

    border-color:
        var(--mm-gold);

    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.vehicle-card,
.contact-card,
.filter-box,
.admin-settings {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);

}


/*
|--------------------------------------------------------------------------
| VEHICLE CONTENT
|--------------------------------------------------------------------------
*/

.vehicle-name,
.vehicle-price,
.vehicle-description,
.vehicle-brand {

    color:
        var(--mm-text);
}

.vehicle-description {

    color:
        var(--mm-text-secondary);
}


/*
|--------------------------------------------------------------------------
| FORM ELEMENTS
|--------------------------------------------------------------------------
*/

input,
textarea,
select {

    outline:
        none;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--mm-gold);
}


/*
|--------------------------------------------------------------------------
| FILTER
|--------------------------------------------------------------------------
*/

.filter-select {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| CONTACT
|--------------------------------------------------------------------------
*/

.contact {

    background:
        var(--mm-surface);
}

.contact h2,
.contact-copy,
.contact-detail strong {

    color:
        var(--mm-text);
}

.contact-detail span {

    color:
        var(--mm-text-secondary);
}


/*
|--------------------------------------------------------------------------
| WORKSHOP
|--------------------------------------------------------------------------
*/

.workshop {

    background:
        var(--mm-bg-secondary);
}

.workshop h2,
.workshop-list li {

    color:
        var(--mm-text);
}

.workshop p {

    color:
        var(--mm-text-secondary);
}


/*
|--------------------------------------------------------------------------
| ABOUT
|--------------------------------------------------------------------------
*/

.corporate {

    background:
        var(--mm-bg);
}

.corporate h2 {

    color:
        var(--mm-text);
}

.corporate p {

    color:
        var(--mm-text-secondary);
}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.intro-strip {

    background:
        var(--mm-surface);

    border-color:
        var(--mm-border);
}

.intro-title {

    color:
        var(--mm-text);
}

.intro-description {

    color:
        var(--mm-text-secondary);
}


/*
|--------------------------------------------------------------------------
| ADMIN
|--------------------------------------------------------------------------
*/

.admin-settings {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}

.admin-settings h3,
.admin-field label {

    color:
        var(--mm-text);
}

.admin-settings p {

    color:
        var(--mm-text-secondary);
}

.admin-field input,
.admin-field textarea {

    background:
        var(--mm-bg);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| EMPTY STATES
|--------------------------------------------------------------------------
*/

.empty-state,
.no-results {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| CART
|--------------------------------------------------------------------------
*/

.cart-container,
.cart-card,
.cart-summary,
.cart-item {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| TABLES
|--------------------------------------------------------------------------
*/

table {

    color:
        var(--mm-text);
}

th,
td {

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| MODALS
|--------------------------------------------------------------------------
*/

.modal,
.modal-content {

    background:
        var(--mm-surface);

    color:
        var(--mm-text);

    border-color:
        var(--mm-border);
}


/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

body a {

    transition:
        color .2s ease;
}


/*
|--------------------------------------------------------------------------
| DARK IMAGE BACKGROUND
|--------------------------------------------------------------------------
*/

html.dark-theme .vehicle-image {

    background:
        #202b3a;
}


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

html.dark-theme {

    scrollbar-color:
        #34445a #0b111c;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px) {

    .mega-theme-toggle {

        width:
            40px;

        height:
            40px;

    }

}