:root {
    --lutra-red: #E63946;
    --lutra-red-hover: #b62b34;
    --lutra-blue: #325C97;
    --lutra-dark-blue: #1D3557;
    --lutra-mocha: #8d99ae;
    --lutra-telegram: #0088cc;
    --lutra-violet: #673AB7;
    --lutra-on-btn: #fff;
}

.lutra-btn-outline {
    color: var(--lutra-red);
    border-color: var(--lutra-red);
}

.lutra-btn-outline:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-red);
    border-color: var(--lutra-red);
}

.lutra-btn {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-red);
    border-color: var(--lutra-red);
}

.lutra-btn:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-red-hover);
    border-color: var(--lutra-red);
}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-red);
    border-color: var(--lutra-red);
}

.blue-lutra-btn-outline {
    color: var(--lutra-blue);
    border-color: var(--lutra-blue);
}

.blue-lutra-btn-outline:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-blue);
    border-color: var(--lutra-blue);
}

.blue-lutra-btn {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-blue);
    border-color: var(--lutra-blue);
}

.dark-blue-lutra-btn-outline {
    color: var(--lutra-dark-blue);
    border-color: var(--lutra-dark-blue);
}

.dark-blue-lutra-btn-outline:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-dark-blue);
    border-color: var(--lutra-dark-blue);
}

.dark-blue-lutra-btn {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-dark-blue);
    border-color: var(--lutra-dark-blue);
}

.mocha-lutra-btn-outline {
    color: var(--lutra-mocha);
    border-color: var(--lutra-mocha);
}

.mocha-lutra-btn-outline:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-mocha);
    border-color: var(--lutra-mocha);
}

.mocha-lutra-btn {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-mocha);
    border-color: var(--lutra-mocha);
}


.mybtn-outline-telegram {
    color: var(--lutra-telegram);
    border-color: var(--lutra-telegram);
}

.mybtn-outline-telegram:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-telegram);
    border-color: var(--lutra-telegram);
}

.mybtn-primary {
    background-color: var(--lutra-red);
    border-color: var(--lutra-red);
    color: var(--lutra-on-btn);
}

.mybtn-primary:hover {
    background-color: var(--lutra-red-hover);
    border-color: var(--lutra-red-hover);
    color: var(--lutra-on-btn);
}


/* The heart of the matter */
.testimonial-group > .row {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.fade2 {
    opacity: 1;
}

.fade2:hover {
    opacity: 0.9;
}

.text-lutra {
    color: var(--lutra-red);
}

.text-dark-blue {
    color: var(--lutra-dark-blue);
}

.bg-dark-blue-lutra {
    background-color: var(--lutra-dark-blue);
}

.violet-badge {
    background-color: var(--lutra-violet);
    color: var(--lutra-on-btn);
}

.violet-badge:hover {
    color: var(--lutra-on-btn);
    background-color: var(--lutra-violet);
}


.heart.liked {
    fill: var(--lutra-red);
    position: relative;
    transition: fill 100ms ease-in-out;
    width: 20px;
}

.text-like.text-liked {
    color: var(--lutra-red);
    transition: color 100ms ease-in-out;

}

.text-like {
    color: grey;
    transition: color 100ms ease-in-out;
}

.heart {
    fill: grey;
    position: relative;
    transition: fill 100ms ease-in-out;
    width: 20px;
}


.sticky-top-panel {
    position: sticky;
    top: 4.5em;
    bottom: 10em;
}

.end-25 {
    right: 25% !important;
}


.rainbow-palette {
    min-height: 2rem;
    min-width: 4rem;
    margin-right: 3px;
    margin-left: 3px;
    outline: var(--lutra-mocha) solid 1px;
    background: linear-gradient(
            90deg,
            rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 10%,
            rgba(208, 222, 33, 1) 20%,
            rgba(79, 220, 74, 1) 30%,
            rgba(63, 218, 216, 1) 40%,
            rgba(47, 201, 226, 1) 50%,
            rgba(28, 127, 238, 1) 60%,
            rgba(95, 21, 242, 1) 70%,
            rgba(186, 12, 248, 1) 80%,
            rgba(251, 7, 217, 1) 90%,
            rgba(255, 0, 0, 1) 100%
    );
}

.color-palette {
    min-height: 2rem;
    min-width: 4rem;
    outline: var(--lutra-mocha) solid 1px;
    margin-left: 3px;
    margin-right: 3px;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --lutra-red: #F25D69;
    --lutra-red-hover: #d94a55;
    --lutra-blue: #5a8acc;
    --lutra-dark-blue: #4a7ab5;
    --lutra-mocha: #a8b2c1;
    --lutra-telegram: #34a6e8;
    --lutra-violet: #9575cd;
    --lutra-on-btn: #fff;
}
[data-theme="dark"] .lutra-btn-outline,
[data-theme="dark"] .blue-lutra-btn-outline,
[data-theme="dark"] .dark-blue-lutra-btn-outline,
[data-theme="dark"] .mocha-lutra-btn-outline,
[data-theme="dark"] .mybtn-outline-telegram {
    border-color: var(--border);
}
[data-theme="dark"] .lutra-btn-outline:hover,
[data-theme="dark"] .blue-lutra-btn-outline:hover,
[data-theme="dark"] .dark-blue-lutra-btn-outline:hover,
[data-theme="dark"] .mocha-lutra-btn-outline:hover,
[data-theme="dark"] .mybtn-outline-telegram:hover {
    border-color: transparent;
}
[data-theme="dark"] .bg-dark-blue-lutra { background-color: var(--lutra-dark-blue); }


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.heart:hover {
    cursor: pointer;
}