/*
|--------------------------------------------------------------------------
| ZOVALY GLOBAL BRAND THEME
|--------------------------------------------------------------------------
|
| Main brand color:
| #ff587d
|
|--------------------------------------------------------------------------
*/

:root {
    /*
    |--------------------------------------------------------------------------
    | Primary Brand Colors
    |--------------------------------------------------------------------------
    */

    --zv-primary: #ff587d;
    --zv-primary-hover: #ea466c;
    --zv-primary-dark: #d83a60;
    --zv-primary-light: #ff7897;

    --zv-primary-soft: #fff0f4;
    --zv-primary-soft-2: #fff7f9;

    /*
    |--------------------------------------------------------------------------
    | Compatibility Aliases
    |--------------------------------------------------------------------------
    */

    --primary: #ff587d;
    --primary-color: #ff587d;

    --brand: #ff587d;
    --brand-color: #ff587d;
    --brand-primary: #ff587d;

    --accent: #ff587d;
    --accent-color: #ff587d;

    --theme-color: #ff587d;
    --theme-primary: #ff587d;

    /*
    |--------------------------------------------------------------------------
    | General Colors
    |--------------------------------------------------------------------------
    */

    --zv-text: #0f172a;
    --zv-muted: #667085;
    --zv-border: #e9e9ec;
    --zv-background: #f7f7f8;
    --zv-white: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Text Selection
|--------------------------------------------------------------------------
*/

::selection {
    background: var(--zv-primary);
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Form Native Accent
|--------------------------------------------------------------------------
*/

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--zv-primary);
}

/*
|--------------------------------------------------------------------------
| Form Focus
|--------------------------------------------------------------------------
*/

.page-shell input:focus,
.page-shell textarea:focus,
.page-shell select:focus {
    border-color: var(--zv-primary);
}

/*
|--------------------------------------------------------------------------
| Primary Buttons
|--------------------------------------------------------------------------
*/

.page-shell .btn-primary,
.page-shell .primary-btn,
.page-shell .primary-button,
.page-shell .button-primary,
.page-shell .fv-primary-btn,
.page-shell .zv-primary-btn {
    background-color: var(--zv-primary);
    border-color: var(--zv-primary);
    color: #ffffff;
}

.page-shell .btn-primary:hover,
.page-shell .primary-btn:hover,
.page-shell .primary-button:hover,
.page-shell .button-primary:hover,
.page-shell .fv-primary-btn:hover,
.page-shell .zv-primary-btn:hover {
    background-color: var(--zv-primary-hover);
    border-color: var(--zv-primary-hover);
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Brand Text
|--------------------------------------------------------------------------
*/

.page-shell .text-primary,
.page-shell .text-brand,
.page-shell .brand-color,
.page-shell .theme-color {
    color: var(--zv-primary) !important;
}

/*
|--------------------------------------------------------------------------
| Brand Background
|--------------------------------------------------------------------------
*/

.page-shell .bg-primary,
.page-shell .bg-brand,
.page-shell .brand-bg,
.page-shell .theme-bg {
    background-color: var(--zv-primary) !important;
}

/*
|--------------------------------------------------------------------------
| Brand Border
|--------------------------------------------------------------------------
*/

.page-shell .border-primary,
.page-shell .border-brand {
    border-color: var(--zv-primary) !important;
}

/*
|--------------------------------------------------------------------------
| Primary Badges
|--------------------------------------------------------------------------
*/

.page-shell .badge-primary,
.page-shell .brand-badge {
    background-color: var(--zv-primary);
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Active States
|--------------------------------------------------------------------------
*/

.page-shell .is-active-brand,
.page-shell .active-primary {
    color: var(--zv-primary);
}

/*
|--------------------------------------------------------------------------
| Link Transition
|--------------------------------------------------------------------------
*/

.page-shell a {
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

/*
|--------------------------------------------------------------------------
| Desktop Scrollbar
|--------------------------------------------------------------------------
*/

@media (min-width: 992px) {
    html {
        scrollbar-color:
            var(--zv-primary)
            #eeeeee;
    }
}