/* ============================================================================ */
/* LUGPrivee - static\css\style-core.css */
/* Author: ZioTitanok (v. 2025.08.31) */
/* ============================================================================ */

/* Accordion */
.accordion {
    border-bottom: 0 !important;
}

.accordion.accordion-background-active .accordion-header .accordion-button[aria-expanded=true] {
    background-color: var(--lug-color-primary);
    border: 0 !important;
    border-color: var(--lug-color-primary) !important;
}

.accordion.accordion-background-active .accordion-header .accordion-button[aria-expanded=false] {
    background-color: var(--lug-color-secondary);
    border: 0 !important;
    border-color: var(--lug-color-secondary) !important;
}

.accordion-body {
    line-height: 1.5rem !important;
}

.accordion-collapse {
    background-color: #e2e2e2;
}

.accordion-header .accordion-button {
    color: var(--lug-color-primary);
    border: 0 !important;
}

.accordion-header .accordion-button:after {
    color: var(--lug-color-primary);
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='%23d32f2f' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
}

.accordion-button::after {
    margin: 0px !important;
}

/* Article Overlay */
.article-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(180, 180, 180, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    font-size: 3rem;
    color: #444;
}

.privee-card:hover {
    box-shadow: 0 8px 32px 0 rgba(60,60,120,0.15);
    transform: translateY(-2px) scale(1.01);
}

/* Buttons */
a.back-to-top {
    background: var(--lug-color-primary) !important;
}

a.btn.btn-xs {
    background-color: var(--lug-color-primary);
    border-color: var(--lug-color-primary);
    color: var(--lug-color-secondary);
}

a.main-color {
    color: var(--lug-color-primary) !important;
}

a.secondary-color {
    color: var(--lug-color-secondary) !important;
}

.btn.btn-xs {
    background: var(--lug-color-primary);
    color: var(--lug-color-secondary);
    border: none;
}

.btn.btn-xs.inverted {
    background: var(--lug-color-secondary);
    color: var(--lug-color-primary);
    border: none;
}

button.btn {
    background-color: var(--lug-color-primary);
    border-color: var(--lug-color-primary);
    color: var(--lug-color-secondary);
}

.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--lug-color-primary);
    color: #fff;
    border-color: var(--lug-color-primary);
}

button.btn-delete {
    background: var(--lug-color-primary) !important;
    color: var(--lug-color-secondary) !important;
    border: none !important;
}

button.privee {
    background: var(--lug-color-primary) !important;
}

button.privee-green {
    color: #339933 !important;
}

button.privee-orange {
    color: rgb(210, 130, 0) !important;
}

button.privee-yellow {
    color: #ffcc00 !important;
}

input.btn {
    background-color: var(--lug-color-primary);
    border-color: var(--lug-color-primary);
    color: var(--lug-color-secondary);
}

/* Carousel */
.it-carousel-wrapper,
.splide__track,
.splide__list {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.it-carousel-wrapper .splide__arrows .splide__arrow {
    background: var(--lug-color-primary) !important;
    border-radius: var(--bs-border-radius) !important;
}

.it-hero-wrapper.it-overlay.it-dark .img-responsive-wrapper:after {
    background: var(--lug-color-primary) !important;
    mix-blend-mode: multiply;
}

.it-carousel-wrapper .splide__pagination button.is-active {
    background: var(--lug-color-primary) !important;
}

/* Styling per chat */
.chat-bubble {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 16px;
    margin-bottom: 8px;
    max-width: 80%;
    word-break: break-word;
    min-width: 30%; 
    max-width: 75%;
}
.chat-row {
    display: flex;
    margin-bottom: 8px;
}
.chat-timestamp {
    font-size: 10px;
    color: #888;
    display: block;
    margin-top: 2px;
}

/* Chips */
.chip {
    border: 0 !important;
}

/* Colors - Div */
div.main-color {
    background: var(--lug-color-primary) !important;
}

div.secondary-color {
    background: var(--lug-color-secondary) !important;
}

div.privee-black {
    background: black !important;
}

div.privee-green {
    background: #339933 !important;
}

div.privee-lightgrey {
    color: lightgrey !important;
}

div.privee-orange {
    color: rgb(210, 130, 0) !important;
}

div.privee-white {
    background: white !important;
    border: 1px solid lightgrey !important;
}

div.privee-order-active {
    background-color: var(--lug-color-primary) !important;
    color: var(--lug-color-secondary) !important;
}

div.privee-order-inactive {
    background-color: transparent !important;
    color: black !important;
}

div.privee-red {
    background: #ff0000 !important;
}

div.privee-yellow {
    background: #ffcc00 !important;
}

/* Colors - Icon */
i.main-color {
    color: var(--lug-color-primary) !important;
}

i.secondary-color {
    color: var(--lug-color-secondary) !important;
}

i.terziary-color {
    color: var(--lug-color-terziary) !important;
}

i.privee-black {
    color: black !important;
}

i.privee-green {
    color: #339933 !important;
}

i.privee-lightgrey {
    color: lightgrey !important;
}

i.privee-orange {
    color: rgb(210, 130, 0) !important;
}

i.privee-red {
    color: #ff0000 !important;
}

i.privee-white {
    color: white !important;
}

i.privee-yellow {
    color: #ffcc00 !important;
}

/* Colors - Label */
label.privee {
    background: var(--lug-color-primary) !important;
    border-color: var(--lug-color-primary) !important;
}

/* Colors - Span */
span.privee {
    color: var(--lug-color-secondary) !important;
}

/* Footer */
.it-footer-small-prints {
    background-color: var(--lug-color-primary);
    color: var(--lug-color-secondary);
}

/* Form Controls */
.form-control {
    border: 0 !important;
}

input.form-control[type="number"] {
    border: 0 !important;
}

input.privee-visibility {
    accent-color: var(--lug-color-primary) !important;
}

.form-check [type=radio]:checked+label::after {
    border-color: var(--lug-color-primary) !important;
    background-color: var(--lug-color-primary) !important;
}

.form-check [type=radio]:checked+label::before {
    border-color: var(--lug-color-primary) !important;
}

input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], textarea {
    padding: 0rem .5rem !important;
}

.form-check [type=checkbox]:checked+label::after {
    border-color:  var(--lug-color-primary) !important;
    background-color:  var(--lug-color-primary) !important;
}

/* Hero */
.it-hero-wrapper.it-overlay.it-dark .img-responsive-wrapper:after {
    background: var(--lug-color-primary) !important;
    mix-blend-mode: multiply;
}

@media (min-width: 992px) {
    .it-hero-wrapper .it-hero-text-wrapper {
        max-width: 100% !important;
    }
}

/* Li Items */
.list-group-item.active {
    z-index: 2;
    color: var(--lug-color-secondary) !important;
    background-color: var(--lug-color-primary) !important;
    border-color: var(--lug-color-primary) !important;
}

/* Menu / Navbar */
.custom-navbar-toggler .fa-bars,
.close-menu .fa-bars {
    color: var(--lug-color-secondary) !important;
}

.menu-wrapper,
.navbar.sticky-top,
.navbar-collapsable {
    background: var(--lug-color-primary) !important;
}

/* Toast */
.toast {
    --bs-toast-bg: rgba(255, 255, 255) !important;
}

@media (max-width: 576px) {
  .notification-toast {
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 100vw !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-bottom: 1rem !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    z-index: 1080 !important;
  }
  .notification-toast .toast {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    width: 95vw !important;
    max-width: 95vw !important;
  }
}


/* Toggles */
.lever {
    background: var(--lug-color-primary) !important;
    border-color: var(--lug-color-primary);
}

.toggles label input[type=checkbox]:checked + .lever:after {
    background-color: var(--lug-color-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border: 1px solid var(--lug-color-secondary) !important;
}

.toggles label input[type=checkbox] + .lever:after {
    background-color: var(--lug-color-secondary) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10px' height='10px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Data-entry/toggle/Light_bg/disabledOff' transform='translate(-8.000000, -11.000000)' fill='%23d32f2f'%3e%3cpath d='M14.363961,15.9497475 L17.8994949,19.4852814 L16.4852814,20.8994949 L12.9497475,17.363961 L9.41421356,20.8994949 L8,19.4852814 L11.5355339,15.9497475 L8,12.4142136 L9.41421356,11 L12.9497475,14.5355339 L16.4852814,11 L17.8994949,12.4142136 L14.363961,15.9497475 Z' id='Combined-Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    border: 1px solid var(--lug-color-primary) !important;
}

/* Typography */
h1.main-color,
h2.main-color,
h3.main-color,
h4.main-color,
h5.main-color,
h6.main-color {
    color: var(--lug-color-primary) !important;
}