:root {
    --segment-primary: #4f46e5;
    --segment-primary-dark: #312e81;
    --segment-secondary: #6366f1;
    --segment-contrast: #ffffff;
    --segment-hover: rgba(79, 70, 229, 0.12);
    --segment-outline: rgba(99, 102, 241, 0.35);
    --segment-navbar-bg: #ffffff;
    --segment-navbar-text: #1f2937;
    --segment-navbar-accent: #312e81;
    --segment-body-bg: #e3e9f7;
    --segment-surface: #ffffff;
    --segment-surface-alt: #f5f7fb;
    --segment-sidebar-hover: rgba(79, 70, 229, 0.08);
    --segment-sidebar-border: rgba(79, 70, 229, 0.14);
    --segment-footer-bg: #312e81;
    --segment-footer-text: #e0e7ff;
    --segment-footer-link: #ffffff;
    --segment-focus: rgba(79, 70, 229, 0.35);
}

body.theme-lava {
    --segment-primary: #0b2a55;
    --segment-primary-dark: #061d3d;
    --segment-secondary: #00bcd4;
    --segment-hover: rgba(0, 188, 212, 0.16);
    --segment-outline: rgba(0, 188, 212, 0.28);
    --segment-navbar-bg: linear-gradient(90deg, #061d3d 0%, #0b2a55 100%);
    --segment-navbar-text: #f4fbff;
    --segment-navbar-accent: #00bcd4;
    --segment-body-bg: #e4f3ff;
    --segment-surface-alt: #f0f8ff;
    --segment-footer-bg: #061d3d;
    --segment-footer-text: #d7ecff;
    --segment-footer-link: #00bcd4;
    --segment-sidebar-hover: rgba(0, 188, 212, 0.1);
    --segment-sidebar-border: rgba(0, 188, 212, 0.24);
    --segment-focus: rgba(0, 188, 212, 0.35);
}

body.theme-barbearia {
    --segment-primary: #a32020;
    --segment-primary-dark: #1f0b0b;
    --segment-secondary: #b88a44;
    --segment-hover: rgba(184, 138, 68, 0.18);
    --segment-outline: rgba(184, 138, 68, 0.35);
    --segment-navbar-bg: linear-gradient(90deg, #0f0f0f 0%, #1f0b0b 100%);
    --segment-navbar-text: #fefefe;
    --segment-navbar-accent: #b88a44;
    --segment-body-bg: #f1e6dd;
    --segment-surface-alt: #fdf7ef;
    --segment-footer-bg: #0f0f0f;
    --segment-footer-text: #fef3dd;
    --segment-footer-link: #b88a44;
    --segment-sidebar-hover: rgba(184, 138, 68, 0.14);
    --segment-sidebar-border: rgba(163, 32, 32, 0.25);
    --segment-focus: rgba(163, 32, 32, 0.35);
}

body.theme-manicure {
    --segment-primary: #d275a8;
    --segment-primary-dark: #5f4b59;
    --segment-secondary: #c19b5f;
    --segment-hover: rgba(210, 117, 168, 0.18);
    --segment-outline: rgba(210, 117, 168, 0.35);
    --segment-navbar-bg: linear-gradient(90deg, #fff5f9 0%, #f5dce8 100%);
    --segment-navbar-text: #5f4b59;
    --segment-navbar-accent: #d275a8;
    --segment-body-bg: #f7eef4;
    --segment-surface-alt: #fff9fc;
    --segment-footer-bg: #f5dce8;
    --segment-footer-text: #5f4b59;
    --segment-footer-link: #c19b5f;
    --segment-sidebar-hover: rgba(210, 117, 168, 0.14);
    --segment-sidebar-border: rgba(210, 117, 168, 0.25);
    --segment-focus: rgba(210, 117, 168, 0.35);
}

body {
    background-color: var(--segment-body-bg);
}

.navbar,
.segment-header .layout-navbar,
header .navbar {
    background: var(--segment-navbar-bg) ;
    box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.45);
    border-bottom: 1px solid var(--segment-sidebar-border);
}

.navbar .navbar-brand,
.layout-navbar__brand {
    color: var(--segment-navbar-accent) !important;
    font-weight: 700;
}

.navbar .nav-link,
.layout-navbar__link {
    color: var(--segment-navbar-text) !important;
    transition: color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.layout-navbar__link:hover,
.layout-navbar__link:focus {
    color: var(--segment-secondary) !important;
}

.btn-comprar,
.btn-custom,
.btn.btn-custom,
button.btn-custom,
.btn-primary {
    background: var(--segment-primary) !important;
    border-color: var(--segment-primary) !important;
    color: var(--segment-contrast) !important;
    box-shadow: 0 10px 18px -12px var(--segment-outline);
}

.btn-comprar:hover,
.btn-custom:hover,
.btn.btn-custom:hover,
.btn-primary:hover {
    background: var(--segment-primary-dark) !important;
    border-color: var(--segment-primary-dark) !important;
}

.btn-comprar-light,
.btn-outline-primary,
.btn-light-custom {
    color: var(--segment-primary) !important;
    border-color: var(--segment-primary) !important;
    background-color: transparent;
}

.btn-comprar-light:hover,
.btn-outline-primary:hover,
.btn-light-custom:hover {
    background: var(--segment-primary) !important;
    color: var(--segment-contrast) !important;
}

.link-redirect-orange,
.link-redirection-simple,
.bt-simples {
    color: var(--segment-primary) !important;
}

.link-redirect-orange:hover,
.link-redirection-simple:hover,
.bt-simples:hover {
    color: var(--segment-secondary) !important;
}

footer,
.layout-footer {
    background: var(--segment-footer-bg);
    color: var(--segment-footer-text);
}

footer a,
.layout-footer__link {
    color: var(--segment-footer-link) !important;
}

#sidebar {
    background: var(--segment-surface);
    border-right: 1px solid var(--segment-sidebar-border);
}

.side-item.active {
    background: var(--segment-primary);
    box-shadow: 0 10px 24px -16px var(--segment-outline);
}

.side-item.active a {
    color: var(--segment-contrast) !important;
}

.side-item:hover:not(.active),
#logout_btn:hover {
    background-color: var(--segment-hover);
}

#open_btn {
    background: var(--segment-primary);
    color: var(--segment-contrast);
}

body .form-control:focus,
body input:focus,
body select:focus,
body textarea:focus {
    box-shadow: 0 0 0 0.2rem var(--segment-focus) !important;
    border-color: var(--segment-primary) !important;
}

.fundo-login {
    /*background: radial-gradient(circle at top, var(--segment-surface-alt), var(--segment-body-bg));*/
}

.fundo-login header .navbar {
    background: transparent !important;
    box-shadow: none;
}

.fundo-login .top-form-login {
    color: var(--segment-primary) !important;
}

.fundo-login .btn-custom {
    min-width: 180px;
    font-weight: 600;
}

.layout-whatsapp__link,
.pn-layout-whatsapp a,
.pn-layout-whatsapp .bt-simples {
    box-shadow: 0 10px 24px -14px var(--segment-outline);
}

@media (max-width: 768px) {
    .navbar,
    header .navbar {
        background: var(--segment-navbar-bg) !important;
    }
}
