:root {
    /* EXACT CARSELECT .SK BLUE */
    --cs-brand: #33ADFA;
    --cs-brand-hover: #36A6EA;
    --cs-brand-soft: rgba(51,173,250,.12);

    --cs-page: #080B0F;
    --cs-header: #090D11;

    --cs-surface: #0D1217;
    --cs-surface-2: #11171D;
    --cs-surface-3: #151B22;

    --cs-border: #25303A;
    --cs-border-soft: #1C242C;

    --cs-text: #F3F4F4;
    --cs-muted: #98A3AD;

    --cs-top: #E5484D;
}


/* ==========================================================
   GLOBAL GRAPHITE
   ========================================================== */

html,
body,
main {
    background-color: var(--cs-page) !important;
}

header > div:first-child {
    background: var(--cs-header) !important;
    background-image: none !important;
    border-color: var(--cs-border-soft) !important;
}

footer,
footer > div,
footer section {
    background: var(--cs-header) !important;
    background-image: none !important;
    border-color: var(--cs-border-soft) !important;
}


/* ==========================================================
   ABSOLUTELY NO BUTTON GLOW
   ========================================================== */

button,
input[type="submit"],
input[type="button"],
[role="button"] {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}


/* ==========================================================
   FORMS
   ========================================================== */

input,
select,
textarea {
    background-color: #0E141A !important;
    border-color: var(--cs-border) !important;
    color: var(--cs-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: #7F8A94 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cs-brand) !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   OLD MIAMI / CYAN / PURPLE SOURCE CLASSES
   -> EXACT CARSELECT BLUE
   ========================================================== */

[class*="text-[#33ADFA]"],
[class*="text-[#33ADFA]"],
[class*="text-[#33ADFA]"],
[class*="text-purple-"],
[class*="text-violet-"],
[class*="text-fuchsia-"],
[class*="text-indigo-"] {
    color: var(--cs-brand) !important;
}

[class*="border-[#33ADFA]"],
[class*="border-[#33ADFA]"],
[class*="border-[#33ADFA]"],
[class*="border-purple-"],
[class*="border-violet-"],
[class*="border-fuchsia-"],
[class*="border-indigo-"] {
    border-color: var(--cs-brand) !important;
}


/* ==========================================================
   HOMEPAGE HERO DOT
   ========================================================== */

#cs-hero-title-rescue .cs-miami-dot {
    color: var(--cs-brand) !important;
}


/* ==========================================================
   HERO SEARCH
   IMPORTANT:
   outer addon = transparent/dark
   actual square button = Carselect blue
   NO PURPLE, NO GLOW
   ========================================================== */

#carselect-marketplace-home .md-smart-search button,
#carselect-marketplace-home .md-smart-search button[type="submit"] {
    background: var(--cs-brand) !important;
    background-color: var(--cs-brand) !important;
    background-image: none !important;

    border-color: var(--cs-brand) !important;

    color: #fff !important;

    box-shadow: none !important;
    filter: none !important;
}

#carselect-marketplace-home .md-smart-search button:hover,
#carselect-marketplace-home .md-smart-search button[type="submit"]:hover {
    background: var(--cs-brand-hover) !important;
    background-color: var(--cs-brand-hover) !important;

    border-color: var(--cs-brand-hover) !important;
}

#carselect-marketplace-home .md-smart-search button *,
#carselect-marketplace-home .md-smart-search button[type="submit"] * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #fff !important;

    box-shadow: none !important;
}

#carselect-marketplace-home .md-smart-search button svg,
#carselect-marketplace-home .md-smart-search button svg * {
    fill: none !important;
    stroke: #fff !important;
}


/* ==========================================================
   SEMANTIC CLASSES
   ========================================================== */

.cs-final-brand-fill {
    background: var(--cs-brand) !important;
    background-color: var(--cs-brand) !important;
    background-image: none !important;

    border-color: var(--cs-brand) !important;

    color: #fff !important;

    box-shadow: none !important;
    filter: none !important;
}

.cs-final-brand-fill:hover {
    background: var(--cs-brand-hover) !important;
    background-color: var(--cs-brand-hover) !important;
}

.cs-final-brand-text {
    color: var(--cs-brand) !important;
}

.cs-final-brand-border {
    border-color: var(--cs-brand) !important;
}

.cs-final-brand-soft {
    background: var(--cs-brand-soft) !important;
    background-color: var(--cs-brand-soft) !important;
    background-image: none !important;

    border-color: rgba(51,173,250,.25) !important;

    color: var(--cs-brand) !important;
}

.cs-final-surface {
    background: var(--cs-surface) !important;
    background-color: var(--cs-surface) !important;
    background-image: none !important;

    border-color: var(--cs-border) !important;
}

.cs-final-surface-2 {
    background: var(--cs-surface-2) !important;
    background-color: var(--cs-surface-2) !important;
    background-image: none !important;

    border-color: var(--cs-border) !important;
}

.cs-final-neutral-border {
    border-color: var(--cs-border) !important;
}

.cs-final-top {
    background: var(--cs-top) !important;
    background-color: var(--cs-top) !important;
    background-image: none !important;

    border-color: var(--cs-top) !important;

    color: #fff !important;

    box-shadow: none !important;
}


/* Smart block itself stays graphite */
.cs-final-smart-panel {
    background:
        linear-gradient(
            135deg,
            #11171D 0%,
            #0D1217 100%
        ) !important;

    border-color: var(--cs-border) !important;

    box-shadow: none !important;
}


/* ==========================================================
   HOMEPAGE PANELS
   ========================================================== */

#carselect-marketplace-home {
    background: var(--cs-page) !important;
}

#carselect-marketplace-home .md-panel,
#carselect-marketplace-home .md-smart-search {
    background:
        linear-gradient(
            180deg,
            #11171D 0%,
            #0D1217 100%
        ) !important;

    border-color: var(--cs-border) !important;

    box-shadow: none !important;
}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection {
    background: rgba(51,173,250,.25);
    color: #fff;
}