/* General body styles */
body {
    font-family: Rubik, Arial, sans-serif;
    font-weight: 350;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
    min-width: 320px;
    -webkit-font-smoothing: subpixel-antialiased;
}

body,
input,
table {
    font-variant-numeric: tabular-nums;
}

* {
    -webkit-user-drag: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.2
}

.h1, h1 { font-size: 2.5rem; }
.h2, h2 { font-size: 2rem; }
.h3, h3 { font-size: 1.75rem; }
.h4, h4 { font-size: 1.5rem; }
.h5, h5 { font-size: 1.25rem; }
.h6, h6 { font-size: 1rem; }


.z-max {
    z-index: 9999 !important;
}

html.dev_mode header #dirty_fix,
html.dev_mode header,
html.dev_mode header .second-row,
html.dev_mode body {
    background: repeating-linear-gradient(-45deg, #fffaf5 0, #fffaf5 31px, white 31px, white 62px);
}


/* :focus {
    outline: 2px solid blue;
    outline-offset: 2px;
    box-shadow: none;
} */
:root {
    --bs-border-color: #d0d0d0;
    --bs-focus-ring-width: 2px;
    --bs-form-invalid-color: #cc0000;
    --bs-form-invalid-border-color: #cc0000;
}
.form-check-input:focus {
    border-color: #00183c;
    outline: 0;
    box-shadow: 0 0 0 2px #333;
}
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #00183c;
    outline: 0;
    box-shadow: 0 0 0 2px #333;
}
.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb),.5)
}
.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb),.5)
}





a,
a:link,
a:hover,
a:visited {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:focus,
.nav-link:focus {
    color: #333;
}
@media (hover: hover) {
    a:hover,
    .nav-link:hover {
        color: #cc0000;
    }
}
a:active,
.nav-link:active,
.nav-link.active {
    color: #cc0000;
}


.btn,
.btn-sm {
    border-radius: 8px;
    font-weight: 350;
    transition: transform 0.5s ease;
}


/* for small text contrast */
.text-black-50 {
    color: rgba(0,0,0,.44) !important;
}
a.text-black-50:hover {
    color: #cc0000 !important;

}

/* Класс для кнопок с анимацией клика */
.click-btn {
    background-color: #333;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.click-btn:hover {
    background-color: #555;
}
.click-btn:active {
    background-color: #008040 !important;
    transform: scale(0.97);
}


.btn-group-sm>.btn,
.btn-sm {
    padding: .2rem .75rem;
    font-size: 1rem;
    line-height: 1.3;
    border-radius: 8px;
}


.book-categories .btn {
    border: 1px solid;
    border-radius: 8px;
    transition: color 0.2s ease;
}
@media (hover: hover) {
    .book-categories .btn:hover {
        border: 1px solid;
        color: #cc0000;
    }
}
.book-categories .btn:active {
    border: 1px solid;
    color: #cc0000;
}



body {
    height: 100vh;
    display: flex;
    flex-direction: column !important;
}
footer {
    margin-top: auto;
}
main {
    margin-top: 1.5rem;
}
header {
    background: #fff;
    min-width: 320px;
}

/* MOBILE sticky HEADER */
@media (max-width: 767.98px) {
    header {
        position: fixed;
        top: 0;
        z-index: 1000;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        height: 4.5rem;
    }
    header .second-row {
        height: 100%;
    }
    main {
        margin-top: 6.5rem !important; /* header height + 2rem */
        flex-grow: 1 !important;
    }
}

.menu-toggle-btn {
    margin-right: -0.5rem !important;
}





.image-container-padding {
    background: #ebebeb;
    padding: 3rem 0;
    height: 100%;
    border-radius: 8px;
    position: relative;

}
.image-container-empty {
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    user-select: none;
}
.image-container {
    padding: 0 1.5rem;
}
.image-container .image-container-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
}
.square-element-row {
    margin: 0 -1.5rem !important;
    height: 600px;
}


@media (max-width: 767px) {
    .book-categories .btn-sm {
        font-size: 0.8rem;
        padding: .1rem .45rem;
        border-radius: 5px;
    }
    .image-container-padding {
        padding: 10% 0;
    }
    .image-container {
        background: #ebebeb;
    }
    .square-element-row {
        margin: 0 -1.5rem !important;
        height: 100vw;
        max-height: 600px;
        min-height: 320px;
    }
}
.item-title {
    font-weight: 500;
    line-height: 1.2;
    font-size: 1.3rem;
}


/* фикс для выезжающего меню */
#dirty_fix {
    content: "";
    display: block;
    position: absolute;
    background: #fff;
    width: 100%;
    height: 3rem;
    top: 0;
    left: 0;
    z-index: 2000;
    box-shadow: 0 -5px 5px 10px #fff;
}

header h1.logo {
    font-size: 1rem;
    min-width: 160px;
}
header h1.logo a {
    display: inline-block;
    padding: 0.35rem 0.4rem;
    margin: -0.35rem -0.4rem;
}
/* hover логотипа */
.logo a img {
    transition: filter 0.3s ease-in-out, scale 0.2s ease-in-out;
    filter: brightness(20%) saturate(0%);
}
@media (hover: hover) {
    .logo a:hover img {
        filter: brightness(100%) saturate(100%);
    }
}
.logo a:active img {
    filter: brightness(100%) saturate(100%);
    transform: scale(99%);
}

header .nav-link {
    border-radius: 8px;
    font-weight: 400;
}

header .lang_nav  {
    text-transform: uppercase;
}
header .lang_nav li:first-child {
    margin-left: calc(var(--bs-nav-link-padding-x)* -.5);
}
header .lang_nav .nav-link {
    padding-left: calc(var(--bs-nav-link-padding-x)* .5);
    padding-right: calc(var(--bs-nav-link-padding-x)* .5);
}
header .main_nav {
    margin-right: calc(var(--bs-nav-link-padding-x) * -1);
}



.search—form ::-webkit-input-placeholder {
    color: #ccc !important;
}

.search—form ::-moz-placeholder {
    color: #ccc !important;
}

.search—form ::-ms-placeholder {
    color: #ccc !important;
}

.search—form ::placeholder {
    color: #ccc !important;
}


.search—form {
    position: relative;
}

.search—form svg {
    position: absolute;
    top: 13px;
    left: 13px;
    opacity: 0.25;
}

.search—form input {
    padding-left: 45px;
    box-shadow: 0 0 1px #444;
}

.search—form .button-keys {
    position: absolute;
    right: 0.8rem;
    top: 11px;
    opacity: 0.2;
}
.search—form .button-keys kbd {
    margin-left: -5px;
}




/* collapse-indicator */
.collapsible {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.collapsible::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-top: -1px;
    margin-left: auto;
    margin-right: 0.5rem;
    transition: transform 0.2s;
    transform: rotate(90deg);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5OSIgdmlld0JveD0iLTEuNSAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjY0NiAxLjY0NmEuNS41IDAgMCAxIC43MDggMGw2IDZhLjUuNSAwIDAgMSAwIC43MDhsLTYgNmEuNS41IDAgMCAxLS43MDgtLjcwOEwxMC4yOTMgOCA0LjY0NiAyLjM1NGEuNS41IDAgMCAxIDAtLjcwOCIvPgo8L3N2Zz4=");
    background-position: center;
    background-repeat: no-repeat;
}
.collapsible.collapsed::after {
    transform: rotate(0deg);
}


/* контрол плюс-минус для корзины и каталога */
.qty-controls input {
    width: 40px;
    text-align: center;
    padding-left: 0;
    padding-right: 1px;
    /* так надо */
    border-width: 1px;
    background: none;
}

#cart_sidebar .qty-controls input {
    width: 30px;
}

.qty-controls .btn {
    border-radius: 8px;
}

.qty-controls .btn,
.qty-controls input {
    color: #333;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
    opacity: 1;
}

.qty-controls .btn:hover {
    background-color: rgba(180, 180, 180, .7);
}

#cart_sidebar .qty-controls .btn,
#cart_sidebar .qty-controls input {
    color: #fff;
    border-color: #fff;
    border-style: solid;
    border-width: 1px;
    opacity: 1;
    font-size: 12px;
}

#cart_sidebar .qty-controls input,
.qty-controls input {
    border-left: none;
    border-right: none;
}

a.remove-link {
    text-decoration: underline;
}

#cart_sidebar a.remove-link {
    color: #ccc;
}

#cart_sidebar .qty-controls .btn {
    width: 26px;
    height: 24px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px !important;
    line-height: 1;
}

#cart_sidebar {
    z-index: 10000;
    font-size: 0.85rem;
}

#cart_sidebar .cart-item .gray-square {
    border-radius: 5px;
    background-color: #666;
}
#cart_sidebar .cart-item-title a {
    color: #fff;
    display: inline-block;
}
#cart_sidebar .cart-item-title a:hover {
    text-decoration: underline;
}

#cart_sidebar .cart-item img {
    box-shadow: none;
}

#cart_sidebar .cart-item .image-padding {
    padding: 8px;
}

#cart_sidebar .cart_btn_block {
    display: flex !important;
}

#cart_has_items {
    margin-top: 0.25rem;
    margin-left: calc(var(--bs-nav-link-padding-x) * -0.7);
}

#cart_mobile_btn {
    position: relative;
}
#cart_mobile_btn .items-count {
    position: absolute;
    top: 4px;
    left: 50%;
    background: #cc0000;
    color: #fff;
    font-weight: 400;
    width: 18px;
    height: 18px;
    border-radius: 15px;
    font-size: 11px;
    line-height: 1.5;
    padding: 0;
    text-align: center;
    border: 1px solid #eee;
    margin-left: -5.7px;
}


.navbar,
#header,
header,
.gray-square,
.offcanvas,
.item-actions {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-app-region: no-drag;
}

.pointer {
    cursor: pointer;
}

main {
    margin-bottom: 5rem !important;
}

/* Footer General Styles */
footer {
    background: #ebebeb;
    color: #333;
}

footer p {
    margin-bottom: 0.8rem;
}

footer a {
    text-decoration: underline !important
}

/* Adjust font sizes and margins */
footer .font-weight-bold {
    font-size: 16px;
    margin-bottom: 10px;
}

footer address {
    font-style: normal;
}



/* авторы и название на странице книги */
.item-first-block {
    align-items: baseline;
    justify-content: space-between;
}





.product-author {
    font-weight: 350;
    line-height: 1.2;
    margin: 0 0 0.2rem;
}

.product-title {
    font-weight: 450;
    line-height: 1.2;
    margin: 0 0 0.2rem;
}

.product-title-2 {
    font-size: 0.85rem;
    line-height: 1.5;
    display: inline-block;
    margin: 0 0 0.2rem;
}

.product-title-2 a {
    color: #999 !important;
}

.product-price {
    color: #008040;
    font-weight: 400;
}


.lang-badges {
    position: absolute;
    top: 0;
    right: 10px;
    padding: 0;
    z-index: 1;
}

.lang-badge {
    color: #fff;
    font-size: 0.85rem;
    padding: 1px 0.5rem;
    display: inline-block;
    margin: 0 0 0 0.5rem;
    font-weight: 400;
    vertical-align: top;
    background: #333;
}

.lang-badge-rus {
    background: #0873D2;
}

.lang-badge-ukr {
    background: #FFbb00;
    color: #000;
}

.lang-badge-bel {
    background: #B40A0A;
}

.lang-badge-eng {
    background: #6900C6;
}

.lang-badge-lit {
    background: #0A6B39;
}

.bookest-card .lang-badge {
    font-size: 0.75rem;
}


.bookest-card .gray-square,
.cart-item .gray-square {
    background-color: #ebebeb;
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}
.bookest-card {
    opacity: 1;
    transition: opacity 0.2s ease;
}
@media (hover: hover) {
    .bookest-card:has(a:hover) {
        opacity: 0.7;
    }
    .bookest-card:has(a:hover) .gray-square {
        background-color: #f0f0f0;
    }
    .bookest-card:has(a:hover) .product-title a,
    .bookest-card:has(a:hover) .product-author a {
        color: #b00 !important;
    }
}
.bookest-card:has(a:active) {
    transform: scale(99%);
}


.gray-square::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.image-padding {
    padding: 10%;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 575.98px) {
    .image-padding {
        padding: 8%;
    }
}

.gray-square img {
    max-width: 100%;
    max-height: 100%;
}



.gray-square img,
.item-image img {
    border-radius: 3px;
    /* border: 1px solid rgba(255,255,255, 0.5); */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}





/* Yellow card background with rounded corners */
.yellow-card {
    background-color: #FFDF78;
    border-radius: 8px;
    font-family: "Playfair Diaplay", serif;
}

.yellow-card h2.yellow-card-title {
    font-size: 1.8rem;
    line-height: 1.1;
    font-weight: normal;
    color: #444;
}

.yellow-card-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* Item details page */

.item-image {
    background-color: #ebebeb;
    border-radius: 8px;
}

.item-image img {
    max-height: 600px;
}

.item-price {
    color: #008040;
    font-weight: 400;
    font-size: 1.3rem;
    white-space: nowrap;
}


.offcanvas-backdrop {
    background-color: rgba(255,255,255, 0.3);
}
.offcanvas-backdrop.fade {
    opacity: 0;
}
.offcanvas-backdrop.show {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);  /* for mobile chrome 2024 */
}
#menu.offcanvas.offcanvas-top {
    position: absolute;
    top: 0;
    bottom: auto;
    height: auto;
    border: none;
    padding-top: 5rem;
    padding-bottom: 2rem;
    transition: box-shadow 0.2s linear, transform 0.3s ease-in-out;
}
#menu.offcanvas.offcanvas-top.show {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
#menu.offcanvas.offcanvas-top .row {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}
#menu.offcanvas.offcanvas-top.show .row {
    opacity: 1;
}

.offcanvas.offcanvas-end {
    width: 450px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-left-width: 0;
}
.offcanvas-dark {
    border-left-width: 0.1px !important;  /* prevent black blured area */
    background-color: #282828 !important;
}


.add-to-cart {
    padding: 0.5rem;
    border: 1px solid #444;
}

@media (max-width: 450px) {
    .item-actions {
        flex-direction: column;
    }
}
.item-actions .plus-minus-dohuya {
    border-radius: 8px;
    border: 1px solid #444;
}
.item-actions .plus-minus-dohuya input,
.item-actions .plus-minus-dohuya button {
    text-align: center;
    flex-grow: 1;
    border: none;
    background: none;
}
.item-actions .plus-minus-dohuya .btn:disabled {
    color: #ccc;
}




@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1400px;
    }
}


.add-to-cart .spinner-border,
.btn-lg .spinner-border {
    --bs-spinner-width: 1.5rem;
    --bs-spinner-height: 1.5rem;
    --bs-spinner-border-width: 0.2rem;
    vertical-align: middle;
    margin-top: 3px;
    margin-left: -2.2rem;
    position: absolute;
}
.add-to-cart .spinner-border {
    --bs-spinner-border-width: 0.22rem;
    margin-top: 0;
}


.loading-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255, 0.5);
    z-index: 19998;
    display: none;
}
.loading-line {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: #088CE8;
    z-index: 19999;
    transition: width 1s ease;
}
.loading-line.active {
    width: 100%;
}




/* spinner inside a cart */
.htmx-indicator {
    display: none;
    opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inherit;
    opacity: 1;
}