/* ============================================
   BASE.CSS — Replacement for CodebaseCSS min-5.8
   Only the classes actually used by the project.
   Color palette from components.css (--bk-* vars)
   ============================================ */

/* ============================================
   RESET & BOX-SIZING
   ============================================ */

*,
::after,
::before {
    box-sizing: border-box;
}

:root {
    font-size: 16px;
}

html {
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
/* body font-family, color, background — see components section */


/* ============================================
   TYPOGRAPHY BASE
   ============================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: 1.75rem;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
}

a {
    color: #0284c7;
    text-decoration: none;
}

a:hover {
    color: #014162;
    text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

b, strong {
    font-weight: bolder;
}

.small, small {
    font-size: .875em;
    font-weight: inherit;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}


/* ============================================
   LISTS, IMAGES, TABLES
   ============================================ */

ol, ul {
    padding-left: 2rem;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

img, svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

th {
    font-weight: 600;
    text-align: inherit;
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}


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

label {
    display: inline-block;
}

button {
    border-radius: 0;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button, select {
    text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

[role=button] {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

[hidden] {
    display: none !important;
}

iframe {
    border: 0;
}

output {
    display: inline-block;
}

summary {
    display: list-item;
    cursor: pointer;
}


/* ============================================
   GRID SYSTEM
   ============================================ */

.container,
.container-fluid {
    --bs-gutter-x: 1.75rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

@media (max-width: 767.98px) {
    .row:not(.g-sm):not(.g-0) {
        --bs-gutter-x: .875rem;
    }
}

.col { flex: 1 0 0%; }
.col-6 { flex: 0 0 auto; width: 50%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
}

.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}


/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #2c3034;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .375rem;
    background-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn:hover {
    text-decoration: none;
}

.btn:disabled,
.btn.disabled {
    opacity: .65;
    pointer-events: none;
}

/* .btn-primary, .btn-success — see BUTTONS in components section */

.btn-lg {
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .5rem;
}

.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .25rem;
}

.btn-link {
    font-weight: 400;
    background-color: transparent;
    border-color: transparent;
}
/* .btn-link colors — see components section */

.btn-block {
    display: block;
    width: 100%;
}

/* .btn-rounded — see components section */

.btn-outline-primary {
    color: #0284c7;
    border-color: #0284c7;
    background-color: transparent;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #0284c7;
    border-color: #0284c7;
}

/* .btn-outline-secondary, .btn-outline-danger, .btn-alt-primary, .btn-alt-secondary — see components section */

.btn-alt-danger {
    color: #841717;
    background-color: #f6c9c9;
    border-color: #f6c9c9;
}
.btn-alt-danger:hover {
    color: #580f0f;
    background-color: #ee9393;
    border-color: #ee9393;
}

/* .btn-dual-secondary — see components section */

.btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    padding: .25em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;
    cursor: pointer;
}
.btn-close:hover {
    opacity: .75;
}


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

.form-label {
    margin-bottom: .375rem;
    font-weight: 500;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    appearance: none;
    background-clip: padding-box;
}
/* .form-control colors, border, radius, transition, :focus, ::placeholder — see components section */

.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: .5rem;
}

.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23905a32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
/* .form-select colors, border, radius, transition, :focus — see components section */

.form-select-lg {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: 1rem;
    border-radius: .5rem;
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}

.form-check-input {
    --bs-form-check-bg: #fff;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #d1d7e1;
    border-radius: .25em;
}

.form-check-input[type=checkbox] {
    border-radius: .25em;
}

.form-check-input[type=radio] {
    border-radius: 50%;
}

/* .form-check-input:checked colors — see components section */

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label {
    cursor: pointer;
}

.form-floating {
    position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    min-height: calc(3.5rem + 2px);
    padding: 1.625rem .75rem .625rem;
    line-height: 1.25;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgba(44, 48, 52, .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-text {
    margin-top: .375rem;
    font-size: .875em;
    color: rgba(44, 48, 52, .75);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .375rem;
    font-size: .875em;
    color: #dc2626;
}

.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback {
    display: block;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc2626;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 .25rem rgba(220, 38, 38, .25);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: #dc2626;
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #dc2626;
}

/* .form-range — completely restyled in components section */


/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group .btn {
    position: relative;
    z-index: 2;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #d8dde5;
    border-radius: .375rem;
}
/* .input-group-text color, background, font-weight — see components section */

/* Border radius adjustments for input groups */
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Inner padding for number inputs inside input-groups */
.input-group > input[type="number"].form-control {
    padding-left: 12px;
    padding-right: 12px;
}

/* Legacy names */
.input-group-prepend,
.input-group-append {
    display: flex;
}


/* ============================================
   CARDS
   ============================================ */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #2c3034;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e4e7ed;
    border-radius: .875rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.625rem;
}

.card-title {
    margin-bottom: .875rem;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-header {
    padding: .875rem 1.625rem;
    margin-bottom: 0;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e4e7ed;
}

.card-header:first-child {
    border-radius: calc(.875rem - 1px) calc(.875rem - 1px) 0 0;
}

.card-footer {
    padding: .875rem 1.625rem;
    border-top: 1px solid #e4e7ed;
}


/* ============================================
   NAVIGATION (Bootstrap)
   ============================================ */

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    font-weight: 600;
    color: #0284c7;
    background: none;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.nav-link:focus,
.nav-link:hover {
    color: #014162;
}

.nav-item {
    display: list-item;
}

.nav-pills .nav-link.active {
    color: #fff;
    background-color: #0284c7;
}


/* ============================================
   ALERTS
   ============================================ */

.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 0 solid transparent;
    border-radius: .375rem;
}

/* .alert-info, .alert-success, .alert-warning — see components section */

.alert-danger {
    color: #580f0f;
    background-color: #f8d4d4;
    border-color: #f1a8a8;
}


/* ============================================
   MODALS
   ============================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

/* .modal.show .modal-dialog transform — see components section */

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
    border-radius: .5rem;
    outline: 0;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 0;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.modal-footer > * {
    margin: .25rem;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}

.modal-lg {
    max-width: 800px;
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px;
    }
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade {
    opacity: 0;
}

/* .modal-backdrop.show — see components section */

/* Codebase modal transitions */
.modal.fade .modal-dialog.modal-dialog-popin {
    transform: scale(1.2);
}

.modal.fade .modal-dialog.modal-dialog-popout {
    transform: scale(.8);
}

.modal.show .modal-dialog.modal-dialog-popin,
.modal.show .modal-dialog.modal-dialog-popout {
    transform: scale(1);
}


/* ============================================
   TABLES (Bootstrap)
   ============================================ */

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(0, 0, 0, .02);
    --bs-table-hover-bg: rgba(0, 0, 0, .04);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: #e4e7ed;
}

.table > :not(caption) > * > * {
    padding: .75rem;
    color: #2c3034;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

.table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================
   TRANSITIONS & VISIBILITY
   ============================================ */

.fade {
    transition: opacity .15s ease-out;
}

.fade:not(.show) {
    opacity: 0;
}

.show {
    opacity: 1 !important;
}

.collapse:not(.show) {
    display: none;
}


/* ============================================
   CODEBASE: PAGE LAYOUT
   ============================================ */

#page-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
}

#page-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    z-index: 1031;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s cubic-bezier(.47, 0, .745, .715), transform .26s cubic-bezier(.47, 0, .745, .715);
    transform: translateX(100%);
}

#main-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    max-width: 100%;
}

/* Content area */
.content {
    width: 100%;
    margin: 0 auto;
    padding: .875rem .875rem 1px;
    overflow-x: visible;
}

.content.content-full {
    padding-bottom: .875rem;
}

.content .block,
.content .push,
.content p {
    margin-bottom: .875rem;
}

@media (min-width: 768px) {
    .content {
        padding: 1.75rem 1.75rem 1px;
    }
    .content.content-full {
        padding-bottom: 1.75rem;
    }
    .content .block,
    .content .push,
    .content p {
        margin-bottom: 1.75rem;
    }
}

/* Main content boxed */
#page-container.main-content-boxed > #main-container .content,
#page-container.main-content-boxed > #page-header .content,
#page-container.main-content-boxed > #page-header .content-header {
    max-width: 1260px;
}

/* Content side */
.content-side {
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 1px;
    overflow-x: hidden;
}

.content-side.content-side-full {
    padding-bottom: 1.5rem;
}

.content-side .block,
.content-side .push,
.content-side p {
    margin-bottom: 1.5rem;
}


/* ============================================
   CODEBASE: HEADER
   ============================================ */
.lk-header .sidebar-toggle-mobile {
    position: static;
    box-shadow: none;
    top: auto;
    left: auto;
    z-index: auto;
}

#page-header {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.content-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    height: 4.25rem;
}

#page-header .content-header {
    padding-left: .875rem;
    padding-right: .875rem;
}

@media (min-width: 768px) {
    #page-header .content-header {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

.content-header-section {
    display: flex;
    align-items: center;
}

.content-header-item {
    display: inline-block;
}

/* #page-container.page-header-dark — see components section */

#page-container.page-header-fixed #page-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

#page-container.page-header-fixed #main-container {
    padding-top: 4.25rem;
}

@media (min-width: 992px) {
    #page-container.page-header-modern #page-header {
        background-color: transparent;
        box-shadow: none;
    }
    #page-container.page-header-modern #page-header > .content-header {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

.overlay-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: 0;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    transform: translateY(-100%);
    will-change: opacity, transform;
    z-index: 1;
}

.overlay-header.show {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================
   CODEBASE: SIDEBAR
   ============================================ */

#sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1032;
    width: 100%;
    height: 100%;
    overflow-y: visible;
    transform: translateX(-100%) translateY(0) translateZ(0);
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}

.side-trans-enabled #sidebar {
    transition: transform .26s cubic-bezier(.47, 0, .745, .715);
}

@media (min-width: 992px) {
    #sidebar {
        width: 230px;
    }
    .sidebar-o #sidebar {
        transform: translateX(0) translateY(0) translateZ(0);
    }
    .sidebar-o {
        padding-left: 230px;
    }
}

.sidebar-content {
    height: 100%;
    overflow-y: auto;
}

#sidebar .content-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.sidebar-nav {
    overflow-y: auto;
    flex: 1;
}

@media (min-width: 992px) {
    #page-container.page-header-fixed.sidebar-o #page-header {
        left: 230px;
    }
    #page-container.page-header-modern #page-header > .content-header {
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* ============================================
   CODEBASE: NAV-MAIN (sidebar navigation)
   ============================================ */

.nav-main {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.nav-main-item {
    display: list-item;
}

.nav-main-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .0125em;
}
/* .nav-main-link color, padding, font-weight — see components section */

.nav-main-link .nav-main-link-icon {
    flex: 0 0 auto;
    display: inline-block;
    margin-right: .625rem;
    min-width: 1.25rem;
    font-size: 1rem;
    text-align: center;
    color: #8d969f;
}

.nav-main-link .nav-main-link-name {
    flex: 1 1 auto;
    display: inline-block;
    max-width: 100%;
}

.nav-main-link.active,
.nav-main-link:focus,
.nav-main-link:hover {
    text-decoration: none;
}
/* .nav-main-link active/hover colors — see components section */


/* ============================================
   CODEBASE: BLOCKS
   ============================================ */

.block {
    margin-bottom: 1.75rem;
}

.block .block,
.content-side .block {
    box-shadow: none;
}

.block-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .875rem 1.625rem;
    transition: opacity .2s ease-out;
}

.block-title {
    flex: 1 1 auto;
    min-height: 1.75rem;
    margin: 0;
    line-height: 1.75;
}

.block-content {
    transition: opacity .2s ease-out;
    width: 100%;
    margin: 0 auto;
    padding: 1.625rem 1.625rem 1px;
    overflow-x: visible;
}

.block-content.block-content-full {
    padding-bottom: 1.625rem;
}

.block-content .block,
.block-content .push,
.block-content p {
    margin-bottom: 1.625rem;
}

.block-content.block-content-sm {
    padding-top: .8125rem;
}

.block-content.block-content-sm.block-content-full {
    padding-bottom: .8125rem;
}

.block.block-rounded {
    border-radius: .75rem;
}

.block.block-rounded > .block-header,
.block.block-rounded > .nav-tabs {
    border-top-right-radius: .75rem;
    border-top-left-radius: .75rem;
}

.block.block-rounded > .block-content:first-child {
    border-top-right-radius: .75rem;
    border-top-left-radius: .75rem;
}

.block.block-rounded > .block-content:last-child {
    border-bottom-right-radius: .75rem;
    border-bottom-left-radius: .75rem;
}

.block.block-rounded > .block-header:last-child {
    border-bottom-right-radius: .75rem;
    border-bottom-left-radius: .75rem;
}

.block-options {
    flex: 0 0 auto;
    padding-left: 1.625rem;
}

.block-options .block-options-item,
.block-options .dropdown {
    display: inline-block;
}

a.block {
    display: block;
    color: #2c3034;
    font-weight: 400;
    transition: all .12s ease-out;
}

a.block:hover {
    color: #2c3034;
    opacity: .65;
}

a.block:active {
    opacity: 1;
}

a.block.block-link-shadow:hover {
    box-shadow: 0 0 2.125rem #d8dde5;
    opacity: 1;
}

a.block.block-link-shadow:active {
    box-shadow: 0 0 .75rem #e4e7ed;
}

.block.block-mode-loading {
    position: relative;
    overflow: hidden;
}

.block.block-mode-loading::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 9;
    content: " ";
    background-color: rgba(255, 255, 255, .85);
}

.block.block-mode-loading::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.5rem 0 0 -1.5rem;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    color: #454c53;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 1.125rem;
    text-align: center;
    z-index: 10;
    content: "\f021";
    animation: fa-spin 1.75s infinite linear;
    border-radius: 1.5rem;
    box-shadow: 0 0 1rem 1rem rgba(69, 76, 83, .05);
}

.block.block-mode-hidden > .block-content {
    display: none;
}


/* ============================================
   CODEBASE: CONTENT-HEADING
   ============================================ */

.content-heading {
    margin-bottom: .875rem;
    padding-top: 2rem;
    padding-bottom: .5rem;
    line-height: 1.75;
}
/* .content-heading font-size, font-weight, border-bottom — see components section */

.block-content > .content-heading:first-child,
.content > .content-heading:first-child {
    padding-top: 0 !important;
}

@media (min-width: 768px) {
    .content-heading {
        margin-bottom: 1.5rem;
        padding-top: 2.5rem;
    }
}

.text-uppercase {
    text-transform: uppercase !important;
    letter-spacing: .0625em;
}


/* ============================================
   CODEBASE: HERO
   ============================================ */

.hero-static {
    min-height: 100vh;
}


/* ============================================
   CODEBASE: LINK FX
   ============================================ */

a.link-fx {
    position: relative;
}

a.link-fx::before {
    position: absolute;
    bottom: -.25rem;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #0284c7;
    visibility: hidden;
    transform: translateY(.375rem);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: transform .12s ease-out, opacity .12s ease-out;
}

a:hover.link-fx::before {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

.link-effect {
    text-decoration: none;
}


/* ============================================
   CODEBASE: CUSTOM UTILITIES
   ============================================ */

.space-x-1 > * + * {
    margin-left: .25rem;
}

.push {
    margin-bottom: 1.75rem;
}

/* .bg-black-50 — see components section */

.bg-image {
    background-position: 0 50%;
    background-size: cover;
}

/* .text-primary-light — see components section */

.text-white-75 {
    color: rgba(255, 255, 255, .75) !important;
}

.text-dual {
    color: #454c53 !important;
}

.text-dual-primary-dark {
    color: #454c53 !important;
}

.text-body-color {
    color: #2c3034 !important;
}

.font-w700 {
    font-weight: 700 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-size-md {
    font-size: 1rem !important;
}

.font-size-xl {
    font-size: 1.25rem !important;
}

.align-parent {
    position: relative;
}


/* ============================================
   BOOTSTRAP DISPLAY UTILITIES
   ============================================ */

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

@media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
}


/* ============================================
   BOOTSTRAP FLEXBOX UTILITIES
   ============================================ */

.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }

@media (min-width: 768px) {
    .align-items-md-end { align-items: flex-end !important; }
}

.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }

@media (min-width: 992px) {
    .justify-content-lg-center { justify-content: center !important; }
}


/* ============================================
   BOOTSTRAP SPACING UTILITIES
   ============================================ */

.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.ms-auto { margin-left: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }

@media (min-width: 768px) {
    .px-md-0 { padding-right: 0 !important; padding-left: 0 !important; }
}


/* ============================================
   BOOTSTRAP TEXT UTILITIES
   ============================================ */

.text-center { text-align: center !important; }
.text-start { text-align: left !important; }

@media (min-width: 576px) {
    .text-sm-end { text-align: right !important; }
    .text-sm-start { text-align: left !important; }
}

.text-white { color: #fff !important; }
/* .text-muted, .text-success, .text-warning — see components section */
.text-decoration-none { text-decoration: none !important; }


/* ============================================
   BOOTSTRAP TYPOGRAPHY UTILITIES
   ============================================ */

.fs-1 { font-size: 2.25rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-sm { font-size: .875rem !important; }
.fw-bold { font-weight: 700 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }


/* ============================================
   BOOTSTRAP SIZING UTILITIES
   ============================================ */

.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
.w-100 { width: 100% !important; }


/* ============================================
   BOOTSTRAP BORDER UTILITIES
   ============================================ */

.border { border: 1px solid #e4e7ed !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid #e4e7ed !important; }
.border-primary { border-color: #0284c7 !important; }
.rounded { border-radius: .375rem !important; }
.rounded-pill { border-radius: 50rem !important; }


/* ============================================
   BOOTSTRAP BACKGROUND UTILITIES
   ============================================ */

.bg-transparent { background-color: transparent !important; }
.bg-primary { background-color: #0284c7 !important; }
/* .bg-body-extra-light — see components section */


/* ============================================
   BOOTSTRAP MISC UTILITIES
   ============================================ */

.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }
.gap-3 { gap: 1rem !important; }
.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative !important; }


/* ============================================
   FA-SPIN ANIMATION (used by block-mode-loading)
   ============================================ */

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spin {
    animation: fa-spin 2s infinite linear;
}


/* ============================================
   ANIMATIONS (bounceIn, etc.)
   ============================================ */

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(.9); }
    100% { transform: scale(1); }
}

.animated {
    animation-duration: .6s;
    animation-fill-mode: both;
}

.bounceIn {
    animation-name: bounceIn;
}


/* ============================================
   LEGACY BOOTSTRAP 4 MARGIN UTILITIES (mr-*)
   Used in templates, mapped to margin-right
   ============================================ */

.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-5 { margin-right: 3rem !important; }


/* ============================================
   BTN-BLOCK-OPTION (Codebase block header button)
   ============================================ */

.btn-block-option {
    display: inline-block;
    padding: .375rem .25rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
}

.btn-block-option:hover {
    text-decoration: none;
}

.btn-block-option:focus {
    outline: 0 !important;
    color: #000;
}

.btn-block-option .si {
    position: relative;
    top: 1px;
}


/* ============================================
   RESPONSIVE SIDEBAR TOGGLE (mobile)
   ============================================ */

@media (max-width: 991.98px) {
    .sidebar-o #sidebar {
        transform: translateX(0) translateY(0) translateZ(0);
    }

    .sidebar-o #page-overlay {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #page-container.sidebar-o {
        padding-left: 0;
    }
}

/* ============================================
   @PRINT
   ============================================ */

@media print {
    #main-container, #page-container {
        padding: 0 !important;
    }
    #page-header, #sidebar, #page-overlay, .block-options {
        display: none !important;
    }
    .block {
        box-shadow: none !important;
    }
}


/* ============================================
   🎨 UNIFIED COMPONENTS.CSS
   Allods Sunshine — Light Theme
   ============================================ */

:root {
    --bk-cream: #F5EBDC;
    --bk-cream-light: #FFF8F0;
    --bk-white: #FFFFFF;
    --bk-dark: #27170E;
    --bk-dark-mid: #3D1E0C;
    --bk-brown: #502314;
    --bk-brown-text: #7A4A2E;
    --bk-brown-muted: #A67C5B;
    --bk-brown-light: #C9A882;
    --bk-border: #E8D5C0;
    --bk-border-light: #F0E4D4;
    --bk-orange: #FF8732;
    --bk-orange-hover: #FF9A50;
    --bk-red: #D62300;
    --bk-yellow: #FFC72C;
    --bk-green: #4CAF50;
    --bk-shadow: 0 2px 12px rgba(80, 35, 20, 0.06);
    --bk-shadow-hover: 0 8px 30px rgba(80, 35, 20, 0.12);
    --bk-flame: linear-gradient(135deg, #FF8732 0%, #FF6B00 100%);
    --bk-flame-hover: linear-gradient(135deg, #FFA050 0%, #FF8732 100%);
}

/* ============================================
   🌙 DARK THEME (html.dark)
   ============================================ */

html.dark {
    --bk-cream: #1a1210;
    --bk-cream-light: #241c18;
    --bk-white: #2e2420;
    --bk-dark: #F5EBDC;
    --bk-dark-mid: #D4B896;
    --bk-brown: #F5EBDC;
    --bk-brown-text: #D4B896;
    --bk-brown-muted: #A67C5B;
    --bk-brown-light: #7A4A2E;
    --bk-border: #3d2e24;
    --bk-border-light: #332218;
    --bk-orange: #FF8732;
    --bk-orange-hover: #FF9A50;
    --bk-red: #FF4433;
    --bk-yellow: #FFD54F;
    --bk-green: #66BB6A;
    --bk-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --bk-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
    --bk-flame: linear-gradient(135deg, #FF8732 0%, #FF6B00 100%);
    --bk-flame-hover: linear-gradient(135deg, #FFA050 0%, #FF8732 100%);
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px #2e2420 inset !important;
    -webkit-text-fill-color: #D4B896 !important;
    caret-color: #D4B896 !important;
}

/* --- Theme toggle button --- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bk-border);
    border-radius: 50%;
    background: transparent;
    color: var(--bk-brown-muted);
    cursor: pointer;
    transition: all .25s ease;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}
.theme-toggle:hover {
    color: var(--bk-orange);
    border-color: var(--bk-orange);
    background: rgba(255, 135, 50, 0.06);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: opacity .25s, transform .25s; }
.theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: inline; }


/* ============================================
   📦 BODY
   ============================================ */

body {
    background: var(--bk-cream) !important;
    color: var(--bk-brown-text) !important;
    font-family: 'Inter', 'Ubuntu', sans-serif !important;
}


/* ============================================
   📦 PAGE CONTAINER / MAIN
   ============================================ */

#page-container {
    background: var(--bk-cream) !important;
}
.bg-body-extra-light {
    background: var(--bk-cream-light) !important;
}
.content {
    color: var(--bk-brown-text);
}
#main-container {
    transition: opacity 0.15s ease;
}
.page-loading #main-container {
    opacity: 0.4;
    pointer-events: none;
}


/* ============================================
   📱 MOBILE SIDEBAR TOGGLE
   ============================================ */

.sidebar-toggle-mobile {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1030;
    background: #1e140f;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}
.sidebar-toggle-mobile:hover,
.sidebar-toggle-mobile:active {
    background: #2e2018;
    color: #fff;
}

.btn-alt-secondary {
    color: var(--bk-brown-text) !important;
    border-color: var(--bk-border) !important;
}
.btn-alt-secondary:hover {
    color: var(--bk-orange) !important;
    border-color: var(--bk-orange) !important;
}


/* ============================================
   📂 SIDEBAR THEME — LIGHT
   ============================================ */

#sidebar {
    background: var(--bk-cream-light) !important;
    border-right: 1px solid var(--bk-border-light) !important;
    box-shadow: none !important;
}
#sidebar .sidebar-content {
    background: transparent !important;
    display: flex;
    flex-direction: column;
}

/* ── Brand header ── */
#sidebar .content-header {
    padding: 24px 20px 20px !important;
    justify-content: center;
    border-bottom: none;
}
.sidebar-brand {
    color: var(--bk-orange) !important;
    font-weight: 800;
    font-size: 1.25rem;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.sidebar-brand:hover {
    color: var(--bk-orange-hover) !important;
    text-decoration: none;
}

/* ── Close (mobile) ── */
.sidebar-close {
    background: none;
    border: none;
    color: var(--bk-brown-muted);
    font-size: 1rem;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.sidebar-close:hover {
    color: var(--bk-brown);
    background: rgba(255,135,50,0.06);
}

/* ── Navigation layout ── */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.sidebar-nav-section {
    flex: 1;
    padding: 8px 0 12px;
}
.sidebar-nav-footer {
    padding: 12px 14px 20px;
    border-top: 1px solid var(--bk-border-light);
    margin: 0;
}

/* ── Nav links ── */
.nav-main-link {
    color: var(--bk-brown-muted) !important;
    border-radius: 10px !important;
    margin: 1px 14px !important;
    padding: 10px 14px !important;
    transition: all 0.18s ease !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.01em !important;
    position: relative !important;
}
.nav-main-link:hover {
    background: rgba(255,135,50,0.06) !important;
    color: var(--bk-brown) !important;
}
/* active: router adds .active to <li>, not <a> */
.nav-main-item.active > .nav-main-link {
    background: rgba(255,135,50,0.1) !important;
    color: var(--bk-orange) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.nav-main-item.active > .nav-main-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--bk-orange);
    border-radius: 0 3px 3px 0;
}

/* ── Icons ── */
.nav-main-link-icon {
    color: var(--bk-brown-light) !important;
    transition: color 0.18s ease !important;
    font-size: 1rem !important;
}
.nav-main-link:hover .nav-main-link-icon {
    color: var(--bk-brown) !important;
}
.nav-main-item.active > .nav-main-link .nav-main-link-icon {
    color: var(--bk-orange) !important;
}

/* ── Logout link ── */
.nav-logout {
    margin: 0 !important;
    color: var(--bk-brown-light) !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
}
.nav-logout:hover {
    background: rgba(214,35,0,0.06) !important;
    color: var(--bk-red) !important;
}
.nav-logout:hover .nav-main-link-icon {
    color: var(--bk-red) !important;
}


/* ============================================
   📦 CONTENT HEADINGS
   ============================================ */

.content-heading {
    color: var(--bk-brown) !important;
    border-bottom: 2px solid var(--bk-border) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 1.15rem !important;
}
.content-heading i {
    color: var(--bk-orange) !important;
}


/* ============================================
   📦 BLOCKS / CARDS
   ============================================ */

.block {
    background: var(--bk-white) !important;
    border: 1px solid var(--bk-border-light) !important;
    border-radius: 16px !important;
    box-shadow: var(--bk-shadow) !important;
    overflow: hidden;
}
.block-rounded {
    border-radius: 16px !important;
}
.block-header-default {
    background: var(--bk-cream-light) !important;
    border-bottom: 1px solid var(--bk-border-light) !important;
}
.block-header-default::after {
    display: none;
}
.block-title {
    color: var(--bk-brown) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}
.block-content {
    color: var(--bk-brown-text) !important;
    background: var(--bk-white) !important;
}
.block-content b,
.block-content strong {
    color: var(--bk-brown) !important;
}
.block-content p {
    color: var(--bk-brown-text) !important;
}
.block-content a {
    color: var(--bk-orange) !important;
    transition: color 0.2s !important;
}
.block-content a:hover {
    color: var(--bk-red) !important;
}


/* ============================================
   📊 TABLES
   ============================================ */

table {
    border-color: var(--bk-border) !important;
    background: var(--bk-white) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
tr {
    border-color: var(--bk-border-light) !important;
}
td, th {
    border-color: var(--bk-border-light) !important;
    color: var(--bk-brown-text) !important;
    padding: 10px 14px !important;
}
th,
tr:first-child td {
    background: var(--bk-cream) !important;
    color: var(--bk-brown) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
}
tbody tr:hover td {
    background: var(--bk-cream-light) !important;
}

/* ── bk-table ── */
.bk-table {
    width: 100%;
    border-collapse: collapse;
}

/* ── Pagination ── */
.bk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 4px;
}
.bk-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--bk-border);
    border-radius: 8px;
    background: var(--bk-white);
    color: var(--bk-brown-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bk-page-btn:hover:not(:disabled):not(.dots) {
    border-color: var(--bk-orange);
    color: var(--bk-orange);
    background: rgba(255,135,50,0.04);
}
.bk-page-btn.active {
    background: var(--bk-orange) !important;
    border-color: var(--bk-orange) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255,135,50,0.25);
}
.bk-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.bk-page-btn.dots {
    border: none;
    background: none;
    cursor: default;
    padding: 0 2px;
    min-width: auto;
    color: var(--bk-brown-muted);
}
.bk-pagination-info {
    text-align: center;
    font-size: 0.8rem;
    color: var(--bk-brown-muted);
    padding: 6px 0 12px;
}


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

.form-control,
.form-select {
    background-color: var(--bk-white) !important;
    border: 2px solid var(--bk-border) !important;
    border-radius: 12px !important;
    color: var(--bk-brown) !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    font-weight: 500 !important;
}
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23905a32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,135,50,0.12) !important;
    background-color: var(--bk-white) !important;
    color: var(--bk-brown) !important;
}
.form-control::placeholder {
    color: var(--bk-brown-light) !important;
}
.form-floating > label,
.form-label {
    color: var(--bk-brown-muted) !important;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bk-orange) !important;
}
.form-check-input {
    background-color: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
}
.form-check-input:checked {
    background-color: var(--bk-orange) !important;
    border-color: var(--bk-orange) !important;
}
.form-check-label {
    color: var(--bk-brown-text) !important;
}


/* ============================================
   🔘 BUTTONS
   ============================================ */

.btn-alt-primary,
.btn-primary {
    background: var(--bk-flame) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(255,135,50,0.25) !important;
    transition: all 0.25s ease !important;
    padding: 10px 28px !important;
}
.btn-alt-primary:hover,
.btn-primary:hover {
    background: var(--bk-flame-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(255,135,50,0.35) !important;
    color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, #4CAF50, #66BB6A) !important;
    border: none !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(76,175,80,0.2) !important;
    transition: all 0.25s ease !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #66BB6A, #81C784) !important;
    transform: translateY(-2px) !important;
}
.btn-secondary {
    background: var(--bk-white) !important;
    border: 2px solid var(--bk-border) !important;
    color: var(--bk-brown-text) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover {
    border-color: var(--bk-orange) !important;
    color: var(--bk-orange) !important;
}
.btn-outline-secondary {
    border-color: var(--bk-border) !important;
    color: var(--bk-brown-muted) !important;
    border-radius: 10px !important;
}
.btn-outline-secondary:hover {
    border-color: var(--bk-orange) !important;
    color: var(--bk-orange) !important;
    background: rgba(255,135,50,0.04) !important;
}
.btn-block-option {
    color: var(--bk-brown-light) !important;
    transition: color 0.2s !important;
}
.btn-block-option:hover {
    color: var(--bk-orange) !important;
}
.btn-link {
    color: var(--bk-orange) !important;
}
.btn-link:hover {
    color: var(--bk-red) !important;
}
.btn-outline-danger {
    color: var(--bk-red) !important;
    border-color: var(--bk-red) !important;
    border-radius: 25px !important;
}
.btn-outline-danger:hover {
    background: var(--bk-red) !important;
    color: #fff !important;
}


/* ============================================
   ⚠️ ALERTS
   ============================================ */

.alert-info {
    background: rgba(255,135,50,0.06) !important;
    border: 1px solid rgba(255,135,50,0.15) !important;
    color: var(--bk-brown-text) !important;
    border-radius: 12px !important;
}
.alert-warning {
    background: rgba(255,199,44,0.08) !important;
    border: 1px solid rgba(255,199,44,0.2) !important;
    color: var(--bk-brown-text) !important;
    border-radius: 12px !important;
}
.alert-success {
    background: rgba(76,175,80,0.06) !important;
    border: 1px solid rgba(76,175,80,0.15) !important;
    color: #2E7D32 !important;
    border-radius: 12px !important;
}


/* ============================================
   💰 BALANCE WIDGET
   ============================================ */

.block-link-shadow {
    border: 1px solid var(--bk-border-light) !important;
    position: relative;
    overflow: hidden;
}
.block-link-shadow::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bk-red), var(--bk-orange), var(--bk-yellow));
}
.balance_html {
    color: var(--bk-orange) !important;
    font-weight: 800 !important;
}
.text-primary-light {
    color: var(--bk-orange) !important;
}
.nav-pills .nav-link {
    color: var(--bk-brown-text) !important;
    border-radius: 10px !important;
    transition: all 0.2s !important;
}
.nav-pills .nav-link:hover {
    background: rgba(255,135,50,0.06) !important;
    color: var(--bk-orange) !important;
}
.fs-sm.fw-semibold.text-uppercase.text-muted {
    color: var(--bk-brown-muted) !important;
}


/* ============================================
   🛒 SHOP / PRODUCT CARDS
   ============================================ */

#products .card {
    background: var(--bk-white) !important;
    border: 1px solid var(--bk-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--bk-shadow) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
/* ✅ Нет transform — карточка НЕ всплывает */
#products .card:hover {
    border-color: var(--bk-orange) !important;
    box-shadow: var(--bk-shadow-hover) !important;
}
#products .card-title {
    color: var(--bk-brown) !important;
    font-weight: 700 !important;
}
#products .card-text {
    color: var(--bk-brown-muted) !important;
    font-size: 0.9rem !important;
}
#products .h4.text-success {
    color: var(--bk-orange) !important;
    font-weight: 800 !important;
}
#products .card-footer {
    border-top: 1px solid var(--bk-border-light) !important;
    background: transparent !important;
    padding: 16px !important;
}

/* Shop cards (same style as service-card) */
.shop-card {
    background: var(--bk-white);
    border: 1px solid var(--bk-border);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.shop-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-card-icon img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}
.shop-card-title {
    color: var(--bk-brown);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    min-height: 44px;
    word-break: break-word;
}
.shop-card-desc {
    color: var(--bk-brown-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}
.shop-card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.shop-card-price {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--bk-orange);
}
.shop-card-qty {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(56,178,172,0.1);
    color: #38b2ac;
}
.shop-card-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: var(--bk-flame);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: auto;
}
.shop-card-btn:hover {
    background: var(--bk-orange);
}

/* Shop card — expandable details */
.shop-card-details {
    text-align: left;
    border-top: 1px solid var(--bk-border);
    padding-top: 12px;
    margin-top: 4px;
    margin-bottom: 12px;
}
.shop-card-details-list {
    font-size: 0.82rem;
    color: var(--bk-brown-muted);
    line-height: 1.6;
}
.shop-card-details-list > div {
    margin-bottom: 4px;
}
.shop-card-details-warn {
    color: var(--bk-orange);
}
.shop-card-details-video {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bk-border);
}
.shop-card-video-link {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bk-red);
    text-decoration: none;
    padding: 4px 14px;
    border: 1px solid var(--bk-red);
    border-radius: 20px;
}
.shop-card-video-link:hover {
    background: var(--bk-red);
    color: #fff;
}
.shop-card-toggle {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--bk-orange);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 12px;
}
.shop-card-toggle:hover {
    color: var(--bk-flame);
}

@media (max-width: 575.98px) {
    .shop-card { padding: 20px 16px; }
    .shop-card-title { min-height: 36px; font-size: 0.9rem; }
    .shop-card-desc { font-size: 0.78rem; }
    .shop-card-price { font-size: 1.1rem; }
}


/* ============================================
   🔧 SERVICE CARDS
   ============================================ */

.service-card {
    background: var(--bk-white);
    border: 1px solid var(--bk-border);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.service-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,135,50,0.08), rgba(255,199,44,0.08));
    color: var(--bk-orange);
    font-size: 1.5rem;
}
.service-card-title {
    color: var(--bk-brown);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.service-card-desc {
    color: var(--bk-brown-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}
.service-card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.service-card-price {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--bk-orange);
}
.service-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
}
.service-card-badge.repeatable {
    background: rgba(56,178,172,0.1);
    color: #38b2ac;
}
.service-card-badge.onetime {
    background: rgba(214,35,0,0.06);
    color: var(--bk-red);
}
.service-card-btn {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: var(--bk-flame);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.service-card-btn:hover {
    background: var(--bk-orange);
}


/* ============================================
   🚢 SHIP APPEARANCE — faction toggle
   ============================================ */

.skin-faction-toggle {
    display: flex;
    gap: 8px;
    border-radius: 10px;
    background: var(--bk-cream, #F5EBDC);
    padding: 4px;
}
.skin-faction-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--bk-brown-muted, #A67C5B);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.skin-faction-btn:hover:not(:disabled) {
    color: var(--bk-brown, #502314);
    background: rgba(255, 135, 50, 0.08);
}
.skin-faction-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.skin-faction-btn.active {
    background: var(--bk-orange, #ff8732);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255,135,50,0.35);
}


/* ============================================
   🪟 MODAL — shared animation
   ============================================ */

.modal {
    transition: opacity 0.3s ease;
    opacity: 0;
}
.modal.show {
    opacity: 1;
}
.modal-dialog {
    transition: transform 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.25);
    transform: translateY(-50px) scale(0.95);
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}
.modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(39, 23, 14, 0.75);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-backdrop.show {
    opacity: 1;
}
body.modal-open {
    overflow: hidden;
}
.bk-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 23, 14, 0);
    transition: background 0.35s ease;
}
.bk-modal.show {
    background: rgba(39, 23, 14, 0.6);
}


/* ============================================
   🪟 BK MODAL (merged: structure + light theme)
   ============================================ */

.bk-modal .modal-content {
    background: var(--bk-white);
    border: 1px solid var(--bk-border);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(80,35,20,0.15);
    overflow: visible;
}
.bk-modal .modal-header {
    background: var(--bk-cream-light);
    border-bottom: 1px solid var(--bk-border-light);
    border-radius: 20px 20px 0 0;
    padding: 20px 24px;
    position: relative;
}
.bk-modal .modal-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D62300, #FF8732, #FFC72C, #FF8732, #D62300);
    opacity: 0.4;
}
.bk-modal .modal-title {
    color: var(--bk-brown);
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bk-modal .btn-close-bk {
    background: none;
    border: 2px solid var(--bk-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bk-brown-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
    line-height: 1;
}
.bk-modal .btn-close-bk:hover {
    background: var(--bk-orange);
    border-color: var(--bk-orange);
    color: #fff;
    transform: rotate(90deg);
}
.bk-modal .modal-body {
    padding: 24px;
    color: var(--bk-brown-text);
}

/* Modal — inner cards: NO hover effects */
.bk-modal .modal-body .card {
    transition: none !important;
}
.bk-modal .modal-body .card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

.bk-modal .bk-balance-badge {
    background: var(--bk-cream-light);
    border: 1px solid var(--bk-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bk-modal .bk-balance-badge .bk-flame-icon {
    font-size: 1.5rem;
}
.bk-modal .bk-balance-badge .bk-balance-text {
    color: var(--bk-brown-muted);
    font-size: 0.95rem;
}
.bk-modal .bk-balance-badge .bk-balance-value {
    color: var(--bk-orange);
    font-weight: 800;
    font-size: 1.1rem;
}
.bk-modal .bk-input-label {
    color: var(--bk-brown-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}
.bk-modal .bk-input {
    background: var(--bk-white);
    border: 2px solid var(--bk-border);
    border-radius: 12px;
    color: var(--bk-brown);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 12px 16px;
    width: 100%;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bk-modal .bk-input:focus {
    outline: none;
    border-color: var(--bk-orange);
    box-shadow: 0 0 0 3px rgba(255,135,50,0.1);
}
.bk-modal .bk-input.is-invalid {
    border-color: #D62300;
}
.bk-modal .bk-input.is-invalid:focus {
    border-color: #D62300;
    box-shadow: 0 0 0 3px rgba(214, 35, 0, 0.12);
}
.bk-modal .bk-field-error {
    color: #D62300;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 5px;
    padding-left: 4px;
}

/* Settings button on main page */
.bk-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid var(--bk-border, #E8D5C0);
    border-radius: 10px;
    color: var(--bk-brown-muted, #A67C5B);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.bk-settings-btn:hover {
    color: var(--bk-orange, #E8751A);
    border-color: var(--bk-orange, #E8751A);
    background: rgba(255, 135, 50, 0.06);
}
.bk-settings-btn i {
    font-size: 0.85rem;
}

/* ============================================
   BK SELECT — Custom Dropdown
   ============================================ */
.bk-select {
    position: relative;
    width: 100%;
}

.bk-select-trigger {
    background: var(--bk-white);
    border: 2px solid var(--bk-border);
    border-radius: 12px;
    color: var(--bk-brown);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 44px 12px 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, border-radius 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-select-trigger:focus {
    outline: none;
    border-color: var(--bk-orange);
    box-shadow: 0 0 0 3px rgba(255, 135, 50, 0.1);
}

.bk-select-trigger.open {
    border-color: var(--bk-orange);
    box-shadow: 0 0 0 3px rgba(255, 135, 50, 0.1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bk-select-trigger.placeholder {
    color: var(--bk-brown-muted);
    font-weight: 500;
}

.bk-select-trigger:disabled,
.bk-select-trigger.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bk-cream-light);
}

.bk-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bk-brown-muted);
    font-size: 0.8rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
    pointer-events: none;
}

.bk-select-trigger.open .bk-select-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--bk-orange);
}

.bk-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bk-white);
    border: 2px solid var(--bk-orange);
    border-top: 1px solid var(--bk-border-light);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(80, 35, 20, 0.12);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--bk-border) transparent;
}

.bk-select-dropdown::-webkit-scrollbar {
    width: 6px;
}
.bk-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.bk-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--bk-border);
    border-radius: 3px;
}

.bk-select-option {
    padding: 10px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bk-brown);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
    display: flex;
    align-items: center;
}

.bk-select-option:hover {
    background: var(--bk-cream-light);
    padding-left: 20px;
}

.bk-select-option.active {
    background: rgba(255, 135, 50, 0.08);
    color: var(--bk-orange);
}

.bk-select-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--bk-orange);
}

.bk-select-empty {
    padding: 14px 16px;
    color: var(--bk-brown-muted);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    font-style: italic;
}

.bk-select-trigger .fa-spinner {
    margin-right: 8px;
    color: var(--bk-orange);
}

/* BK Select — Alpine x-transition animation classes */
.bk-select-enter {
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bk-select-enter-start {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
}
.bk-select-enter-end {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}
.bk-select-leave {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.bk-select-leave-start {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}
.bk-select-leave-end {
    opacity: 0;
    transform: translateY(-4px) scaleY(0.98);
}

.bk-modal .modal-footer {
    background: var(--bk-cream-light);
    border-top: 1px solid var(--bk-border-light);
    border-radius: 0 0 20px 20px;
    padding: 16px 24px 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Purchase modal — light overrides */
.bk-modal .card-header {
    background: var(--bk-cream) !important;
    border-bottom: 1px solid var(--bk-border-light) !important;
}
.bk-modal .card-header h4 {
    color: var(--bk-brown) !important;
}
.bk-modal .card-body .lead {
    color: var(--bk-brown-muted) !important;
}
.bk-modal #item-price,
.bk-modal #total-cost {
    color: var(--bk-orange) !important;
}
.bk-modal #user-balance {
    color: var(--bk-green) !important;
}
.bk-modal #buy-button {
    background: var(--bk-flame) !important;
    border-radius: 25px !important;
}
.bk-modal #buy-button.btn-danger {
    background: rgba(214,35,0,0.08) !important;
    color: var(--bk-red) !important;
}

/* Modal buy btn (from mall.php) */
.modal-buy-btn {
    background: var(--bk-flame) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* Modal info card — no hover */
.bk-modal .modal-info-card {
    border: 1px solid var(--bk-border) !important;
    border-radius: 12px !important;
    background: var(--bk-white) !important;
    box-shadow: none !important;
    transform: none !important;
}
.bk-modal .modal-info-card:hover {
    border-color: var(--bk-orange) !important;
    box-shadow: var(--bk-shadow-hover) !important;
}

/* BK MODAL light overrides — merged into main section above */

/* Slider, percent-btn, footer-btn, modal-card light overrides — merged into sections below */

/* ============================================
   🔥 BK Flame Slider
   ============================================ */

.bk-slider-wrap {
    position: relative;
    padding: 0 0 12px;
    margin: 8px 0;
}
.bk-slider-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        var(--bk-orange) 0%,
        var(--bk-orange) var(--progress, 100%),
        var(--bk-border-light) var(--progress, 100%),
        var(--bk-border-light) 100%
    );
    outline: none;
    margin: 0;
    cursor: pointer;
}
.bk-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--bk-yellow), var(--bk-orange));
    border: 3px solid var(--bk-white);
    box-shadow: 0 2px 8px rgba(255,135,50,0.35);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}
.bk-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow:
        0 2px 12px rgba(214,35,0,0.6),
        0 0 20px rgba(255,135,50,0.4);
}
.bk-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.05);
}
.bk-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--bk-yellow), var(--bk-orange));
    border: 3px solid var(--bk-white);
    box-shadow: 0 2px 8px rgba(255,135,50,0.35);
    cursor: pointer;
}
.bk-slider-wrap input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: transparent;
}
.bk-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--bk-brown-light);
    font-weight: 600;
}
.bk-slider-bubble {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    background: var(--bk-flame);
    color: #fff;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.05s;
    box-shadow: 0 3px 10px rgba(214,35,0,0.35);
}
.bk-slider-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #FF8732;
}


/* ============================================
   🔘 BK Percent Buttons
   ============================================ */

.bk-percent-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.bk-percent-btn {
    flex: 1;
    background: var(--bk-white);
    border: 2px solid var(--bk-border);
    border-radius: 10px;
    color: var(--bk-brown-text);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.bk-percent-btn:hover {
    border-color: var(--bk-orange);
    color: var(--bk-orange);
    background: rgba(255,135,50,0.04);
    transform: translateY(-1px);
}
.bk-percent-btn.bk-max {
    background: var(--bk-flame);
    border-color: transparent;
    color: #fff;
}
.bk-percent-btn.bk-max:hover {
    background: var(--bk-flame-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,135,50,0.25);
}


/* ============================================
   🔘 BK Footer Buttons
   ============================================ */

.bk-btn-cancel {
    background: var(--bk-white);
    border: 2px solid var(--bk-border);
    border-radius: 12px;
    color: var(--bk-brown-text);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 28px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bk-btn-cancel:hover {
    border-color: var(--bk-brown-muted);
    color: var(--bk-brown);
}
.bk-btn-submit {
    background: var(--bk-flame);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 12px 32px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255,135,50,0.2);
}
.bk-btn-submit:hover {
    background: var(--bk-flame-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255,135,50,0.3);
}
.bk-btn-submit:active {
    transform: translateY(0);
}
.bk-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ============================================
   💳 PAYMENT SECTION
   ============================================ */

.input-group-text {
    background: var(--bk-cream) !important;
    border-color: var(--bk-border) !important;
    color: var(--bk-orange) !important;
    font-weight: 700 !important;
}
#bonus_sum {
    background: var(--bk-cream) !important;
    color: var(--bk-orange) !important;
    font-weight: 700 !important;
    border-color: var(--bk-border) !important;
}
#slider-display {
    color: var(--bk-orange) !important;
    font-weight: 700 !important;
}
.payment-details {
    color: var(--bk-brown-light) !important;
    font-size: 0.8rem !important;
}

/* Donation page range slider */
.form-range,
input[type="range"].form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(
        to right,
        var(--bk-orange) 0%,
        var(--bk-orange) var(--progress, 0%),
        var(--bk-border-light) var(--progress, 0%),
        var(--bk-border-light) 100%
    ) !important;
    outline: none;
    border: none !important;
}
.form-range::-webkit-slider-thumb,
input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--bk-yellow), var(--bk-orange));
    border: 3px solid var(--bk-white);
    box-shadow: 0 2px 8px rgba(255,135,50,0.3);
    cursor: pointer;
}
.form-range::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--bk-yellow), var(--bk-orange));
    border: 3px solid var(--bk-white);
    box-shadow: 0 2px 8px rgba(255,135,50,0.3);
    cursor: pointer;
}

#payment-info {
    background: var(--bk-cream-light) !important;
    border: 1px solid var(--bk-border-light) !important;
    color: var(--bk-brown-text) !important;
    border-radius: 12px !important;
}


/* ============================================
   🔷 POLYGON SECTION
   ============================================ */

#polygon-status.success { background: rgba(76,175,80,0.06) !important; border: 1px solid rgba(76,175,80,0.15) !important; color: #2E7D32 !important; border-radius: 12px !important; }
#polygon-status.error   { background: rgba(214,35,0,0.06) !important; border: 1px solid rgba(214,35,0,0.15) !important; color: var(--bk-red) !important; border-radius: 12px !important; }
#polygon-status.info    { background: rgba(255,135,50,0.06) !important; border: 1px solid rgba(255,135,50,0.12) !important; color: var(--bk-brown-text) !important; border-radius: 12px !important; }
#wallet-status { border-radius: 12px !important; }


/* ============================================
   🔑 AUTH PAGES (Login / Signup / Forgot)
   ============================================ */

.bg-black-50 {
    background-color: rgba(39, 23, 14, 0.6) !important;
}

/* Hero left panel */
.auth-hero-left {
    position: relative;
    background-image: url('/lk/vendors/images/mainbg.jpg');
    background-size: cover;
    background-position: center;
}
.auth-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(39, 23, 14, 0.55);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
}
.auth-hero-title {
    color: #FF8732;
    font-size: 1.6rem;
    font-weight: 800;
}
.auth-hero-text {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    margin-top: 6px;
}

/* Right panel */
.auth-panel {
    background: var(--bk-cream-light, #FFF8F0) !important;
    padding: 40px 36px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-logo {
    margin-bottom: 28px;
}
.auth-logo span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #502314;
}
.auth-logo .logo-accent {
    color: #FF8732;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #502314;
    margin-bottom: 6px;
}
.auth-subtitle {
    font-size: 0.95rem;
    color: #A67C5B;
    margin-bottom: 28px;
}
.auth-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7A4A2E;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auth-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #502314;
    background: #FFFFFF;
    border: 2px solid #E8D5C0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
    -webkit-appearance: none;
    appearance: none;
}
.auth-input:focus {
    border-color: #FF8732;
    box-shadow: 0 0 0 3px rgba(255,135,50,0.12);
}
.auth-input::placeholder {
    color: #C9A882;
}
.auth-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #E8D5C0;
    border-radius: 4px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}
.auth-checkbox:checked {
    background: #FF8732;
    border-color: #FF8732;
}
.auth-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.auth-check-label {
    color: #7A4A2E;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #FF8732 0%, #FF6B00 100%);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(255,135,50,0.25);
}
.auth-btn:hover {
    background: linear-gradient(135deg, #FFA050 0%, #FF8732 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255,135,50,0.35);
}
.auth-btn:active {
    transform: translateY(0);
}
.auth-btn-sm {
    padding: 6px 14px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #7A4A2E;
    background: #FFFFFF;
    border: 2px solid #E8D5C0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}
.auth-btn-sm:hover {
    border-color: #FF8732;
    color: #FF8732;
}
.auth-captcha-img {
    border: 2px solid #E8D5C0;
    border-radius: 10px;
    height: 46px;
}
.auth-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.auth-links a {
    color: #A67C5B;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.auth-links a:hover {
    color: #FF8732;
}
.auth-capslock {
    text-align: center;
    color: #D62300;
    font-weight: 700;
    font-size: 0.85rem;
    background: rgba(214,35,0,0.06);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 16px;
}

/* ── Referral banner ── */
.ref-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255,135,50,0.08), rgba(255,199,44,0.08));
    border: 1px solid rgba(255,135,50,0.2);
    border-radius: 10px;
    color: #7A4A2E;
    font-size: 0.875rem;
    line-height: 1.4;
}
.ref-banner-inner .fa {
    color: #FF8732;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ref-banner-inner strong {
    color: #FF8732;
}
.auth-group {
    margin-bottom: 20px;
}

/* hero-static dark-mode overrides */
.dark-mode .hero-static .link-fx .fs-4.text-body-color,
.hero-static .link-fx .fs-4.text-body-color {
    color: var(--bk-brown) !important;
}
.dark-mode .hero-static .link-fx .fs-4:last-child,
.hero-static .link-fx .fs-4:last-child {
    color: var(--bk-orange) !important;
}
.dark-mode .hero-static .h3.fw-bold,
.dark-mode .hero-static h1.h3,
.hero-static .h3.fw-bold,
.hero-static h1.h3 {
    color: var(--bk-brown) !important;
}
.dark-mode .hero-static .h5.fw-medium.text-muted,
.dark-mode .hero-static h2.h5,
.hero-static .h5.fw-medium.text-muted,
.hero-static h2.h5 {
    color: var(--bk-brown-muted) !important;
}
.dark-mode .hero-static .form-floating > label,
.hero-static .form-floating > label {
    color: var(--bk-brown-light) !important;
}
.dark-mode .hero-static .form-floating > .form-control:focus ~ label,
.dark-mode .hero-static .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bk-orange) !important;
}
.dark-mode .hero-static .form-control,
.hero-static .form-control {
    background: var(--bk-white) !important;
    border: 2px solid var(--bk-border) !important;
    color: var(--bk-brown) !important;
    border-radius: 12px !important;
}
.dark-mode .hero-static .form-control:focus {
    border-color: var(--bk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,135,50,0.12) !important;
}
.dark-mode .hero-static .form-control::placeholder {
    color: transparent !important;
}
.dark-mode .hero-static .form-check-input {
    background-color: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
}
.dark-mode .hero-static .form-check-input:checked {
    background-color: var(--bk-orange) !important;
    border-color: var(--bk-orange) !important;
}
.dark-mode .hero-static .form-check-label {
    color: var(--bk-brown-text) !important;
}
.dark-mode .hero-static .btn-alt-primary,
.hero-static .btn-alt-primary {
    background: var(--bk-flame) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    padding: 12px 36px !important;
    box-shadow: 0 4px 15px rgba(255,135,50,0.25) !important;
}
.dark-mode .hero-static .btn-alt-primary:hover {
    background: var(--bk-flame-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(255,135,50,0.35) !important;
}
.dark-mode .hero-static .link-fx.text-muted,
.hero-static .link-fx.text-muted {
    color: var(--bk-brown-light) !important;
}
.dark-mode .hero-static .link-fx.text-muted:hover {
    color: var(--bk-orange) !important;
}
.dark-mode .hero-static #capsLockIndicator {
    color: var(--bk-red) !important;
    background: rgba(214,35,0,0.06) !important;
    border-radius: 8px !important;
}
.dark-mode .hero-static .captcha-container img {
    border-color: var(--bk-border) !important;
}
.dark-mode .hero-static .btn-outline-secondary {
    border-color: var(--bk-border) !important;
    color: var(--bk-brown-muted) !important;
}
.dark-mode .hero-static .btn-outline-secondary:hover {
    border-color: var(--bk-orange) !important;
    color: var(--bk-orange) !important;
}
.dark-mode .hero-static .form-label {
    color: var(--bk-brown-text) !important;
}
.dark-mode .hero-static .p-4 .fs-3.fw-semibold {
    color: var(--bk-orange) !important;
}
.dark-mode .hero-static .p-4 .text-white-75 {
    color: rgba(255,255,255,0.65) !important;
}
.dark-mode .bg-black-50 {
    background-color: rgba(39,23,14,0.55) !important;
}

/* Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px #FFFFFF inset !important;
    -webkit-text-fill-color: #502314 !important;
    caret-color: #502314 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* ============================================
   🔧 DARK-MODE OVERRIDES
   ============================================ */

.dark-mode .block-header-default,
.dark-mode .block-header,
#page-container .block-header-default,
#page-container .block-header {
    background: var(--bk-cream-light) !important;
    border-bottom: 1px solid var(--bk-border-light) !important;
    color: var(--bk-brown) !important;
}
.dark-mode .block-title,
#page-container .block-title {
    color: var(--bk-orange) !important;
    font-weight: 700 !important;
}
.dark-mode .block-content,
#page-container .block-content {
    background: var(--bk-white) !important;
    color: var(--bk-brown-text) !important;
}
.dark-mode .block,
#page-container .block {
    background: var(--bk-white) !important;
    border: 1px solid var(--bk-border-light) !important;
}
.dark-mode .btn-block-option,
#page-container .btn-block-option {
    color: var(--bk-brown-light) !important;
}
.dark-mode .btn-block-option:hover {
    color: var(--bk-orange) !important;
}
.dark-mode #main-container,
#page-container #main-container {
    background: var(--bk-cream) !important;
}
.dark-mode .content,
#page-container > .content {
    background: transparent !important;
}
.dark-mode .btn-alt-secondary {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.7) !important;
    border-radius: 8px !important;
}
.dark-mode .block-link-shadow,
.dark-mode .block-link-shadow .block-content {
    background: var(--bk-white) !important;
}
.dark-mode .nav-pills .nav-link {
    color: var(--bk-brown-text) !important;
}
.dark-mode .nav-pills .nav-link:hover {
    color: var(--bk-orange) !important;
    background: rgba(255,135,50,0.06) !important;
}
.dark-mode .balance_html {
    color: var(--bk-orange) !important;
}
.dark-mode .fs-sm.text-uppercase {
    color: var(--bk-brown-muted) !important;
}
.dark-mode .fa-diamond,
.dark-mode .text-primary-light {
    color: var(--bk-orange) !important;
}
.dark-mode .block-mode-hidden .block-header {
    background: var(--bk-cream-light) !important;
}
.dark-mode .block-content p {
    color: var(--bk-brown-text) !important;
}
.dark-mode .block-content b,
.dark-mode .block-content strong {
    color: var(--bk-brown) !important;
}
.dark-mode .block-content a {
    color: var(--bk-orange) !important;
}
.dark-mode table {
    background: var(--bk-white) !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode td {
    border-color: var(--bk-border-light) !important;
    color: var(--bk-brown-text) !important;
}
.dark-mode tr:first-child td {
    background: var(--bk-cream) !important;
    color: var(--bk-brown) !important;
}
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
    color: var(--bk-brown) !important;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    border-color: var(--bk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,135,50,0.12) !important;
}
.dark-mode .form-label {
    color: var(--bk-brown-muted) !important;
}
.dark-mode .form-check-label {
    color: var(--bk-brown-text) !important;
}
.dark-mode .alert-info {
    background: rgba(255,135,50,0.05) !important;
    border-color: rgba(255,135,50,0.12) !important;
    color: var(--bk-brown-text) !important;
}
.dark-mode .alert-warning {
    background: rgba(255,199,44,0.06) !important;
    border-color: rgba(255,199,44,0.15) !important;
    color: var(--bk-brown-text) !important;
}
.dark-mode .card {
    background: var(--bk-white) !important;
    color: var(--bk-brown-text) !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode .card-header {
    background: var(--bk-cream-light) !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode .card-header h4,
.dark-mode .card-header .mb-0 {
    color: var(--bk-brown) !important;
}
.dark-mode .card-body {
    color: var(--bk-brown-text) !important;
}
.dark-mode .card-footer {
    background: transparent !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode .content-heading {
    color: var(--bk-brown) !important;
    border-bottom-color: var(--bk-border) !important;
}
.dark-mode .bk-modal .modal-content {
    background: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
}
.dark-mode .bk-modal .modal-header {
    background: var(--bk-cream-light) !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode .bk-modal .modal-body {
    color: var(--bk-brown-text) !important;
}
.dark-mode .bk-modal .modal-footer {
    background: var(--bk-cream-light) !important;
    border-color: var(--bk-border-light) !important;
}
.dark-mode .input-group-text {
    background: var(--bk-cream) !important;
    border-color: var(--bk-border) !important;
    color: var(--bk-orange) !important;
}
.dark-mode .form-check-input {
    background-color: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
}
.dark-mode .form-check-input:checked {
    background-color: var(--bk-orange) !important;
    border-color: var(--bk-orange) !important;
}
.dark-mode #wallet-status {
    background: rgba(255,135,50,0.05) !important;
    border-color: rgba(255,135,50,0.12) !important;
    color: var(--bk-brown-text) !important;
}
.dark-mode #wallet-status.alert-success {
    background: rgba(76,175,80,0.06) !important;
    border-color: rgba(76,175,80,0.12) !important;
    color: #2E7D32 !important;
}
.dark-mode .border-top {
    border-color: var(--bk-border-light) !important;
}
.dark-mode .text-muted {
    color: var(--bk-brown-muted) !important;
}
.dark-mode .text-primary {
    color: var(--bk-orange) !important;
}
.dark-mode .font-weight-bold,
.dark-mode .fw-bold,
.dark-mode .fw-semibold {
    color: var(--bk-brown) !important;
}
.dark-mode #capsLockIndicator {
    color: var(--bk-red) !important;
    background: rgba(214,35,0,0.05) !important;
}
.dark-mode #products .card-title {
    color: var(--bk-brown) !important;
}
.dark-mode #products .card-text {
    color: var(--bk-brown-muted) !important;
}
.dark-mode #products .h4.fw-bold {
    color: var(--bk-orange) !important;
}
.dark-mode .quantity-display {
    color: var(--bk-brown-muted) !important;
}
.dark-mode .quantity-display span {
    color: var(--bk-orange) !important;
}
.dark-mode .border.border-primary {
    border-color: var(--bk-border) !important;
    background: var(--bk-cream-light) !important;
}
.dark-mode .font-size-md {
    color: var(--bk-brown-muted) !important;
}


/* ============================================
   🧩 MISC UTILITIES
   ============================================ */

.text-muted {
    color: var(--bk-brown-muted) !important;
}
.text-primary {
    color: var(--bk-orange) !important;
}
.text-success {
    color: var(--bk-green) !important;
}
.text-danger {
    color: var(--bk-red) !important;
}
.text-warning {
    color: #E65100 !important;
}
.border-top {
    border-color: var(--bk-border-light) !important;
}
hr {
    border-color: var(--bk-border-light) !important;
    opacity: 1 !important;
}
.details-content {
    background: var(--bk-cream-light) !important;
    border-radius: 10px !important;
    padding: 12px !important;
}
.captcha-container img {
    border-color: var(--bk-border) !important;
    border-radius: 8px !important;
}
#capsLockIndicator {
    color: var(--bk-red) !important;
    background: rgba(214,35,0,0.06) !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

[x-cloak] { display: none !important; }


/* ============================================
   🔔 NOTIFICATIONS
   ============================================ */

#notify-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: 90%;
    max-width: 500px;
    pointer-events: none;
}
.notify-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.notify-item {
    width: 100%;
    padding: 14px 22px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(80,35,20,0.12);
    pointer-events: auto;
    max-width: 100%;
    text-align: left;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.notify-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.25;
    animation: notify-timer 2.5s linear forwards;
}
@keyframes notify-timer {
    from { width: 100%; }
    to { width: 0%; }
}
.notify-icon {
    font-size: 1.3rem;
    animation: notify-icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes notify-icon-bounce {
    0% { transform: scale(0) rotate(-15deg); }
    60% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.notify-enter {
    transition: all 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.25);
}
.notify-leave {
    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.notify-enter-start {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
}
.notify-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.notify-leave-start {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.notify-leave-end {
    opacity: 0;
    transform: translateX(80px) scale(0.9);
}


/* ============================================
   ⏳ PAGE LOADING
   ============================================ */

.page-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bk-flame, #ff6b35), transparent);
    background-size: 200% 100%;
    animation: loading-slide 1s ease-in-out infinite;
    z-index: 9999;
}
@keyframes loading-slide {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ============================================
   📜 SCROLLBAR
   ============================================ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bk-cream); }
::-webkit-scrollbar-thumb { background: var(--bk-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bk-orange); }

::selection {
    background: rgba(255,135,50,0.2);
    color: var(--bk-brown);
}


/* ============================================
   🌙 DARK THEME — LK OVERRIDES
   ============================================ */

/* ── Sidebar: warm dark tones ── */
html.dark #sidebar {
    background: #16100e !important;
    border-right-color: rgba(255,255,255,0.04) !important;
}
html.dark .sidebar-toggle-mobile {
    background: #16100e;
    border-color: rgba(255,255,255,0.08);
}
html.dark .sidebar-toggle-mobile:hover,
html.dark .sidebar-toggle-mobile:active {
    background: #241c18;
}

/* ── Sidebar nav links: keep light-on-dark ── */
html.dark .nav-main-link {
    color: rgba(245,235,220,0.5) !important;
}
html.dark .nav-main-link:hover {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(245,235,220,0.85) !important;
}
html.dark .nav-main-item.active > .nav-main-link {
    background: rgba(255,135,50,0.12) !important;
    color: var(--bk-orange) !important;
}
html.dark .nav-main-link-icon {
    color: rgba(245,235,220,0.25) !important;
}
html.dark .nav-main-link:hover .nav-main-link-icon {
    color: rgba(245,235,220,0.6) !important;
}
html.dark .nav-main-item.active > .nav-main-link .nav-main-link-icon {
    color: var(--bk-orange) !important;
}

/* ── Sidebar footer border ── */
html.dark .sidebar-nav-footer {
    border-top-color: rgba(255,255,255,0.06) !important;
}
html.dark .nav-logout {
    color: rgba(245,235,220,0.35) !important;
}
html.dark .nav-logout:hover {
    background: rgba(255,80,80,0.12) !important;
    color: #ff8a80 !important;
}

/* ── Sidebar close (mobile) ── */
html.dark .sidebar-close {
    color: rgba(245,235,220,0.4);
}
html.dark .sidebar-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

/* ── Modals ── */
html.dark .bk-modal.show {
    background: rgba(10, 6, 4, 0.7);
}
html.dark .bk-modal .modal-content {
    background: var(--bk-white);
    border-color: var(--bk-border);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
html.dark .bk-modal .modal-header {
    background: var(--bk-cream-light);
    border-bottom-color: var(--bk-border-light);
}
html.dark .bk-modal .modal-footer {
    background: var(--bk-cream-light);
    border-top-color: var(--bk-border-light);
}

/* ── Select dropdown shadow ── */
html.dark .bk-select-dropdown {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ── Form select arrow for dark ── */
html.dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23A67C5B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ── Alert success text ── */
html.dark .alert-success {
    color: #66BB6A !important;
}

/* ── Toast notifications ── */
html.dark .bk-toast {
    background: var(--bk-white) !important;
    border-color: var(--bk-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* ============================================
   📌 LK HEADER (sticky, like calc/ratings)
   ============================================ */

.lk-header {
    background: rgba(255, 248, 240, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bk-border-light);
    position: sticky;
    top: 0;
    z-index: 1040;
    padding: 12px 0;
}
.lk-header-inner {
    max-width: 1358px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lk-header .brand {
    font-family: 'Ubuntu', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lk-header .brand-name { color: var(--bk-brown); font-weight: 700; font-size: 1.25rem; }
.lk-header .brand-accent { color: var(--bk-orange); font-weight: 700; font-size: 1.25rem; }
.lk-header .brand-badge {
    background: #D2691E;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 50rem;
}
.lk-header .back-link {
    color: var(--bk-brown-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: color .2s;
}
.lk-header .back-link:hover { color: var(--bk-orange); }

html.dark .lk-header {
    background: rgba(26, 18, 16, 0.92);
    border-bottom-color: var(--bk-border);
}