/*
 * KBEAUTY7 – globales Brand-Theme
 * Child-Basis: offizielles JTL NOVAChild v5.7.0 / NOVA 1.7.1
 * Diese Datei wird nach dem NOVA-Theme geladen.
 */

:root {
    --kb7-primary: #5a5cff;
    --kb7-primary-hover: #4547de;
    --kb7-primary-focus: rgba(90, 92, 255, 0.22);
    --kb7-ink: #191b1e;
    --kb7-ink-hover: #2b2e33;
    --kb7-porcelain: #f6f2ec;
    --kb7-paper: #fffdf9;
    --kb7-coral: #ff6f78;
    --kb7-border: #ded9d1;
}

/* Grundfläche und Typografie */

body {
    background-color: var(--kb7-paper);
    color: var(--kb7-ink);
}

::selection {
    background-color: var(--kb7-primary);
    color: #fff;
}

/* Hauptaktionen */

.btn-primary,
button.btn-primary,
input.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.kb7-home .kb7-btn--primary {
    background-color: var(--kb7-primary) !important;
    border-color: var(--kb7-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.kb7-home .kb7-btn--primary:hover,
.kb7-home .kb7-btn--primary:focus {
    background-color: var(--kb7-primary-hover) !important;
    border-color: var(--kb7-primary-hover) !important;
    color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--kb7-primary-focus) !important;
}

/* Sekundäre Aktionen */

.btn-secondary,
button.btn-secondary,
input.btn-secondary,
.kb7-home .kb7-btn--light {
    background-color: var(--kb7-ink) !important;
    border-color: var(--kb7-ink) !important;
    color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.kb7-home .kb7-btn--light:hover,
.kb7-home .kb7-btn--light:focus {
    background-color: var(--kb7-ink-hover) !important;
    border-color: var(--kb7-ink-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--kb7-primary) !important;
    color: var(--kb7-primary-hover) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--kb7-primary) !important;
    border-color: var(--kb7-primary) !important;
    color: #fff !important;
}

/* Links im Inhaltsbereich */

main a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="kb7-"]) {
    color: var(--kb7-primary-hover);
}

main a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="kb7-"]):hover,
main a:not(.btn):not(.nav-link):not(.dropdown-item):not([class*="kb7-"]):focus {
    color: var(--kb7-ink);
    text-decoration: underline;
}

.productbox-title a,
.productbox-title a:hover,
.productbox-title a:focus {
    color: var(--kb7-ink) !important;
}

/* Header und Navigation */

header,
header .navbar,
#header-top-bar,
#shop-nav {
    background-color: var(--kb7-paper);
    color: var(--kb7-ink);
}

header a,
header .nav-link,
header .btn-link,
#shop-nav a,
#shop-nav .nav-link {
    color: var(--kb7-ink) !important;
}

header a:hover,
header a:focus,
header .nav-link:hover,
header .nav-link:focus,
#shop-nav a:hover,
#shop-nav a:focus {
    color: var(--kb7-primary-hover) !important;
}

header .navbar-nav > .nav-item > .nav-link::before,
.navbar-nav > .nav-item > .nav-link::before {
    border-color: var(--kb7-primary) !important;
}

/* Formulare, Auswahlfelder und Pagination */

.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--kb7-primary) !important;
    border-color: var(--kb7-primary) !important;
}

.page-link {
    color: var(--kb7-primary-hover);
}

.page-link:hover,
.page-link:focus {
    color: var(--kb7-ink);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--kb7-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--kb7-primary-focus) !important;
}

/* Badges und gezielte Akzente */

.badge-primary,
.label-primary,
.bg-primary {
    background-color: var(--kb7-primary) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--kb7-primary-hover) !important;
}

.kb7-accent,
.kb7-seven {
    color: var(--kb7-coral) !important;
}

/* Footer */

#footer,
footer {
    background-color: var(--kb7-ink);
    color: var(--kb7-porcelain);
}

#footer a,
footer a {
    color: var(--kb7-porcelain);
}

#footer a:hover,
#footer a:focus,
footer a:hover,
footer a:focus {
    color: var(--kb7-coral);
}

#footer .copyright,
footer .copyright {
    background-color: #111214;
    color: var(--kb7-porcelain);
}

/* Tastaturfokus – sichtbar und markenkonform */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--kb7-coral) !important;
    outline-offset: 2px;
}