.form-control-number {
    min-width: 6em;
}

.item-card {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 2px #ddd;
    margin-bottom: 10px;
}

.item-prices {
    display: flex;
    flex-direction: row;
    font-weight: 700;
    gap: 1rem;
}

.item-prices p {
    text-align: center;
    font-weight: 500;
}

.item-prices p span {
    font-weight: 700;
}

/*.item-prices p span:after{content:' zł'} */

.cart-container {
    display: flex;
    flex-direction: column;
}

.cart-row {
    display: flex;
    border-bottom: 1px solid #ccc;
    align-items: center;
}

.cart-row .cart-cell:first-child {
    max-width: 100px;
}

.cart-row .cart-cell form {
    display: flex;
    /*align-items: center;*/
    justify-content: center;
}

.cart-row .cart-cell form input {
    border-radius: 0;
}

.cart-row .cart-cell span {
    display: none;
}

.cart-row .cart-cell .alert {
    text-align: left;
}

.cart-row .cart-cell span.alert-icon,
.cart-row .cart-cell span.bg-warning,
.cart-row .cart-cell span.text-white {
    display: block;
}

.cart-row .cart-cell .alert span {
    display: block;
    font-weight: 700;
}

.cart-row .cart-cell form button#right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cart-row .cart-cell form button#left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cart-header,
.cart-footer .cart-row {
    /*background-color: #f9f9f9;*/
    font-weight: 600;
}

.cart-cell {
    flex: 1;
    padding: 10px;
    /*border-right: 1px solid #ddd;*/
    text-align: center;
}

.cart-cell img {
    /*width: 60px; */
    height: 80px;
}

.disabled-row {
    background-color: #252b3652;
}

.cart-footer .cart-cell {
    flex: 1;
    /*border-right: 1px solid #ddd;*/
    text-align: center;
}

/* SUPPORT */

.support-item .circle-item {
    background-color: #f8f9fa;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.support-item .circle-item img {
    width: 100px;
    height: 100px;
}

.support-item .circle-item img:hover {
    cursor: pointer;
}

.support-item a:hover {
    color: #248eca;
    cursor: pointer;
    fill: #248eca;
    font-weight: 700;
}

/* .svg-icon {
    transition: filter 0.3s ease;
} */

.circle-item:hover .svg-icon {
    filter: invert(31%) sepia(98%) saturate(7461%) hue-rotate(186deg) brightness(102%) contrast(106%);
}

.faq-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1em;
    margin-bottom: 2rem;
}

.faq-nav .item {
    /* background-color: #efefef; */
    /* padding: 1em; */
    font-size: 1.2rem;
}

.faq-nav .btn {
    width: 100%;
    margin: 10px 0;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    transition:
        background-color 0.3s,
        color 0.3s;
}

.faq-nav .btn.active,
.faq-nav .btn:hover {
    background-color: #007bff;
    color: #fff;
}

.card .faq-item {
    display: flex;
}

.card .faq-item .expand {
    position: absolute;
    right: 22px;
}

.full-width {
    display: block;
    width: 100%;
    text-align: left;
}

.full-width i {
    float: right;
}

.collapse .card-body>* {
    padding-left: 3rem;
}

/* EOF SUPPORT */

/* Mobile CSS */
@media (max-width: 767.98px) {
    .cart-header {
        display: none !important;
    }

    /* ukryj LP */
    .cart-row .cart-cell:first-child {
        display: none !important;
    }

    .cart-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-bottom: 2rem;
    }

    .cart-row .cart-cell span {
        display: block;
        font-weight: 700;
    }

    /* .form-control-number {
        max-width: 25%;
    } */

    .cart-row .mobile-remove {
        display: contents;
        width: 100%;
        text-align: center;
    }

    .cart-footer .cart-row {
        display: inline-flex;
        padding-bottom: 0;
        width: 100%;
    }

    .cart-footer .cart-row:last-child {
        border-bottom: 1px solid #ccc;
        margin-bottom: 2rem;
    }

    .cart-footer .cart-cell:nth-child(1),
    .cart-footer .cart-cell:nth-child(2),
    .cart-footer .cart-cell:nth-child(3),
    .cart-footer .cart-cell:nth-child(4),
    .cart-footer .cart-cell:nth-child(5),
    .cart-footer .cart-cell:nth-child(6),
    .cart-footer .cart-cell:nth-child(10) {
        display: none;
    }

    /* .input-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    } */

    .input-group form {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .input-group form .btn-icon {
        flex: 1;
    }

    .input-group form .form-control-number {
        flex: 2;
        min-width: 50px;
    }

    .input-group form .my-submit-bt {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 380px) {
    .cart-row {
        display: block;
    }

    .cart-row .mobile-remove {
        display: block;
        width: 100%;
        text-align: center;
    }

    .cart-row .mobile-remove span {
        padding-bottom: 1rem;
    }
}

.grid-table-header {
    font-weight: 600;
    border-bottom: 1px solid var(--gray-500);
}

.grid-table-header-a {
    color: var(--card-color);
}

.grid-table-header-a:hover {
    color: var(--gray-600);
}

.product-list-img {
    width: 100%;
    object-fit: contain !important;
    max-height: 50px;
}

.cart-product-img {
    width: 100%;
    object-fit: contain !important;
    max-height: 80px;
    max-width: 150px;
}

.product-list-loyality-prog {
    font-size: 11px;
    opacity: 0.5;
}

/* menu bez ikon - micdaw */
.nav-group-sub .nav-link {
    padding-left: calc(var(--nav-link-padding-x) * 2);
}

.nav-group-sub .nav-group-sub .nav-link {
    padding-left: calc(var(--nav-link-padding-x) * 3);
}

.nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
    padding-left: calc(var(--nav-link-padding-x) * 4);
}

.nav-group-sub .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
    padding-left: calc(var(--nav-link-padding-x) * 5);
}

/* add cart button */
.add-cart-button .in-cart input {
    border-color: #059669;
}

.bg-danger-no-radius {
    border-radius: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
}

/*
    tryb detalisty 
    - uwaga pewnie można to lepiej zrobić korzystajac z var, na razie wersja 1.0
    - w przyszłości, podmiana:
        --primary-rgb: var(--eltrox-color);
*/
:root .retail-mode,
[data-color-theme="retail"] {
    --eltrox-color: #ff5800;
    --eltrox-rgb: 255, 88, 0;
    --primary-rgb: 255, 88, 0;
    --eltrox-hover-bg: #ff6926;
    --link-color: #000000;
    --link-hover-color: #ff5800;
}

/* ,.retail-mode button i */
.retail-mode .nav-item i {
    color: var(--eltrox-color) !important;
}

.retail-mode .bg-primary {
    background-color: rgba(var(--eltrox-rgb), var(--bg-opacity)) !important;
}

.retail-mode .text-primary {
    color: rgba(var(--eltrox-rgb), var(--text-opacity)) !important;
}

.retail-mode a:not(.btn) {
    transition: color 0.2s ease;
}

.retail-mode .pagination {
    --pagination-active-color: white;
    --pagination-active-bg: var(--eltrox-color);
    --pagination-active-border-color: var(--eltrox-color);
}

.retail-mode .alert-primary {
    --alert-color: #252b36;
    --alert-bg: #ededed;
    --alert-border-color: #b7b7b7;
    --alert-link-color: var(--eltrox-color);
    --alert-link-hover-color: var(--eltrox-hover-bg);
}

.retail-mode .btn-primary {
    --btn-bg: var(--eltrox-color);
    --btn-border-color: var(--eltrox-color);
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--eltrox-hover-bg);
    --btn-hover-border-color: var(--eltrox-color);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: var(--eltrox-color);
    --btn-disabled-border-color: var(--eltrox-color);
}

.product-description ul {
    margin-bottom: var(--spacer-2);
}

.product-description li {
    margin-top: var(--spacer-1);
}

.product-description h3 {
    margin-top: var(--spacer-2);
}

.product-description img {
    margin-top: var(--spacer-2);
}

.product-description p {
    margin-top: var(--spacer-2);
    text-align: justify;
}

/* .retail-mode .alert-primary {
    --alert-color: #b30808;
    --alert-bg: #ffe7e7;
    --alert-border-color: #ffa886;
    --alert-link-color: #064a8f;
    --alert-link-hover-color: #06407d;
} 
.retail-mode .btn-primary {
    --btn-bg: var(--eltrox-color);
    --btn-border-color: #ffe5cf;
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--eltrox-color);
    --btn-hover-border-color: var(--eltrox-color);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: var(--eltrox-color);
    --btn-disabled-border-color: var(--eltrox-color);
}    
*/

.carousel-control-prev {
    justify-content: flex-start;
}

.carousel-control-next {
    justify-content: flex-end;
}


/*
    Naprawa modal boostrap na urządzeniach iphone:
        <div class="modal" ../> aby prawidłowo działał powinien być wywołany bezpośrednio w body
        Jeśli jest wywoływany w class="content_inner" to styl overflow:auto 
        powoduje zakrycie modala elementem <div class"modal_backdrop"../>
*/
@supports (-webkit-touch-callout: none) {
    .modal-open .content-inner {
        overflow-y: initial;
        overflow-x: initial;
    }
}

/* ====================================================
   Product List v2 Styles
   ==================================================== */

/* Smooth transition for product list column width changes */
#product-list-main-column {
    transition: all 0.3s ease-in-out;
}

#product-list-content-mobile {
    display: none;
}

.card-img-carousel-modal {
    height: 220px;
}

.img-carousel-modal {
    max-height: 220px;
    object-fit: contain !important;
}

.product-list-img {
    max-height: 150px;
    max-width: 150px;
    object-fit: contain !important;
}

#product-modal-data-stock .stocks {
    width: 60%;
    margin: 0 auto;
}

#accordion-product-description .accordion-item .accordion-body h3 {
    word-wrap: break-word;
}

/* Definicje kolorów dla stanów */
.bg-gray {
    background-color: #979795 !important;
}

.bg-red {
    background-color: #f4413a !important;
}

.bg-green {
    background-color: #49b152 !important;
}

div[id^="cross-selling-item"] h5,
div[id^="upselling-item"] h5 {
    font-size: 0.85rem;
}

div[id^="cross-selling-item"] span,
div[id^="upselling-item"] span {
    font-size: 0.65rem;
}

/* uzywane przez skrypt -> ios bs modal fix */

.ios-modal-fix .modal-backdrop {
    display: none;
}

.ios-modal-fix .modal {
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ios-margin-top {
    margin-top: 3.2rem !important;
}

/* EOF   uzywane przez skrypt -> ios bs modal fix */

.badges-container {
    min-height: 1.5rem;
}

.badges-container .badge {
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
}

.badges-container .badge.bg-success {
    box-shadow: 0 1px 3px rgba(72, 177, 82, 0.2);
}

.badges-container .badge.bg-light {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* ====================================================
   Media Queries - Product List v2
   ==================================================== */

@media (max-width: 768px) {
    #full-content {
        overflow-x: hidden;
    }

    #product-modal-data-stock .stocks {
        width: 100%;
    }

    #product-modal .page-title h5 {
        word-wrap: break-word;
        width: 90%;
    }

    /* przycisk do zamykania modala */
    #product-modal-data .btn-close {
        border: 1px solid;
        position: absolute;
        right: 3%;
        top: 2%;
        background-color: #fff;
    }

    /* obsluga ikonek na breadcrumbs */
    .toggle-icon {
        transition: transform 0.3s;
    }

    a[aria-expanded="true"] .toggle-icon {
        content: '\f078';
        transform: rotate(180deg);
    }

    a[aria-expanded="false"] .toggle-icon {
        content: '\f077';
        transform: rotate(0deg);
    }

    .card-img-carousel-modal {
        height: 160px;
    }

    .img-carousel-modal {
        max-height: 160px;
        object-fit: contain !important;
    }

    /* Kontener na obrazki dla listy */
    .product-image .image-container {
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .product-image .image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* MODAL */
    #product-modal-data .content:not(.stocks) .d-flex {
        flex-direction: column;
    }

    .sidebar-mobile-expanded {
        z-index: 99999 !important;
        margin-top: 62px !important;
    }

    .content .form-control,
    .content .form-select {
        font-size: 16px;
    }

    /* paginacja bez odstepow */
    .pagination-spaced {
        --pagination-margin-start: 5px !important;
    }

    .badges-container .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.4rem;
        line-height: 1.2;
    }
}

@media (max-width: 510px) {
    .col-3.py-2.px-2 {
        padding: 1.7rem 0.25rem !important
    }

    .d-flex.flex-column.gap-1.d-sm-none {
        margin-top: 0.5rem;
        gap: 0.25rem !important;
    }

    .d-sm-none .badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.3rem !important;
        line-height: 1.1;
    }

    .badges-container {
        margin-bottom: 0.25rem !important;
    }

    .d-flex.justify-content-center.align-items-center.h-100 {
        min-height: 80px;
    }

    .product-list-img {
        max-height: 80px !important;
        max-width: 80px !important;
    }
}

@media (max-width: 400px) {
    .badges-container .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.25rem !important;
    }

    .d-sm-none .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.25rem !important;
    }

    .product-list-img {
        max-height: 70px !important;
        max-width: 70px !important;
    }
}

/* ====================================================
   DataTables Responsive Control Column
   ==================================================== */

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 50%;
    left: 5px;
    height: 16px;
    width: 16px;
    margin-top: -8px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 16px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    line-height: 16px;
    content: '+';
    background-color: #31b131;
}