/* ============================================
    Spis treści:
    0. Globalne
    1. User Menu
    2. Header
    3. DJ Product Card
    4. DJ Footer
    5. DJ Sinlge Product
    6. DJ Contact Accordion
    7. DJ Sorting
    8. DJ Filters
    9. DJ Cart
    10. DJ Checkout Steps
    11. DJ Checkout
============================================ */


/* =========== [0. Globalne] =========== */

.dj-price {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    * {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }
    .djc_price_old {
        color: #ff0000 !important;
        text-decoration: line-through;
        * {
            color: inherit;
        }
    }
    .djc_price_with_tax {
        display: block;
    }
}


/* =========== [1. User Menu] =========== */

.dj-user-menu {
    .uk-subnav {
        margin: 0;
    }
    a {
        flex-direction: column;
        font-size: 12px !important;
    }
}

.dj-minicart {
    position: absolute;
    top: 0;
    right: 0;
    .mod_djc2cart--icon {
        display: none;
    }
    .djc_mod_cart_items_count {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 14px;
        height: 14px;
        font-size: 8px;
        line-height: 1;
        font-weight: 300;
        text-align: center;
        color: #FFFFFF;
        background-color: #414d2b;
        border-radius: 24px;
        transform: translateY(-2px);
    }
}

@media screen and (max-width: 960px) {
    .dj-user-menu {
        position: relative;
        width: fit-content;
    }
    .dj-user-menu .uk-subnav {
        width: fit-content;
    }
}


/* =========== [2. Header] =========== */

.uk-navbar-left {
    width: 100%;
}

.uk-navbar-toggle.uk-search-icon {
    margin-left: auto;
}

@media screen and (max-width: 960px) {
    .uk-navbar-container {
        background-color: #dddedb;
    }
    .uk-navbar {
        gap: 12px;
    }
    .uk-navbar-left {
        flex-wrap: nowrap;
    }
}


/* =========== [3. DJ Product Card] =========== */

.dj-product-card {
    display: flex;
    flex-direction: column;
    >.uk-panel {
        flex: 1;
        height: 100%;
        >div {
            height: 100%;
        }
    }
    .dj-product-card-image .el-link {
        position: relative;
        display: block;
        overflow: hidden;
        &:hover {
            &::after {
                -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 130%, 0);
                transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 130%, 0);
            }
        }
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            content: '';
            -webkit-transition: -webkit-transform 0.6s;
            transition: transform 0.6s;
            -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -130%, 0);
            transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -130%, 0);
            pointer-events: none;
        }
    }
}

.dj-card-add-to-cart .djc_qty_buttons {
    display: flex;
    flex-wrap: wrap;
    span,
    input {
        flex: 1;
    }
    input {
        max-width: 100%;
        height: auto;
    }
    .djc_qty_btn {
        line-height: 32px;
        border-color: #414d2b;
    }
    .add-on {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-block: 1px solid #ddd;
    }
}

.dj-card-add-to-cart .djc_addtocart_btn,
.dj-card-add-to-cart .djc_addtoquote_btn {
    margin-top: 4px;
    min-width: 100%;
    line-height: 32px;
    font-size: 14px;
    color: #FFFFFF;
    border: 1px solid #243308;
    background-color: #243308;
    &:hover {
        color: #243308;
        border-color: #243308;
        background-color: transparent;
    }
}


/* =========== [4. DJ Footer] =========== */

.dj-footer {
    >.uk-container {
        padding: 0;
    }
    @media screen and (max-width: 960px) {
        background-image: none !important;
        background-color: #f1f3f2;
    }
}


/* =========== [4. DJ Category List] =========== */

.dj-category-list {
    .nav-link {
        border-bottom: 1px solid #d7ddda;
        &.active {
            color: #9da2a6;
        }
        &:hover {
            color: #9da2a6;
            text-decoration: none;
        }
    }
}


/* =========== [5. DJ Sinlge Product] =========== */

.djc_print_button {
    color: #fafaf5 !important;
    border: 1px solid #414d2b !important;
    background: #414d2b !important;
}

.dj-product-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    .btn {
        color: #fafaf5 !important;
        border: 1px solid #414d2b !important;
        background: #414d2b !important;
    }
}

.dj-sub-item {
    >.uk-first-column {
        max-width: 120px;
    }
    .djc_price {
        font-size: 14px !important;
        * {
            font-size: inherit !important;
        }
    }
    .djc_qty_buttons {
        flex-wrap: wrap;
    }
    .djc_qty_input {
        padding: 0;
        margin: 0;
        height: auto;
        box-sizing: border-box;
    }
    .add-on {
        padding-inline: 6px;
        height: 42px;
        align-content: center;
        border: 1px solid #ddd;
        border-left: 0px;
    }
    .djc_qty_btn {
        flex: 1;
        border: 1px solid #414d2b;
    }
    .djc_addtocart_btn {
        flex: 1;
        margin-top: 4px;
        font-size: 12px;
        line-height: 32px;
        color: #FFFFFF;
        border: 1px solid #243308;
        background-color: #243308;
    }
}


/* =========== [6. DJ Contact Accordion] =========== */

.dj-contact-acc {
    >.el-item {
        border: 1px solid #414d2b;
    }
}


/* =========== [7. DJ Sorting] =========== */

.djc_order_buttons {
    padding: 0;
    display: flex;
    gap: 16px;
    list-style: none;
    .span2 {
        font-weight: 600;
    }
    li {
        display: flex;
        gap: 8px;
    }
    .djcat_order_dir {
        width: 16px;
        object-fit: contain;
    }
}


/* =========== [8. DJ Filters] =========== */

.dj-filters {
    padding: 24px;
    margin-bottom: 32px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    .control-label {
        margin-bottom: 0;
    }
    .mod_djc2fw_buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .submit_button {
        color: #fafaf5;
        background: #414d2b;
        border: 1px solid #414d2b;
        &:hover {
            color: #414d2b;
            background-color: transparent;
        }
    }
    .reset_button {
        background-color: #f1f3f2;
        border: 1px solid #f1f3f2;
    }
    .mod_djc2filters_group_label {
        font-size: 0;
        &::after {
            content: "Cena";
            font-size: 14px;
        }
    }
}


/* =========== [9. DJ Cart] =========== */

.djc_cart_table {
    width: 100%;
    border-collapse: collapse;
}

.djc_cart_table .djc_td_price {
    font-size: 16px;
    * {
        font-size: inherit;
    }
}

.djc_cart_foot .djc_price_value,
.djc_cart_foot .djc_price_unit {
    font-size: 16px;
}

.djc_cart_table thead {
    border-bottom: 2px solid #d7ddda;
}

.djc_cart_table .djc_thead {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: #9da2a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.djc_cart_table .djc_th_price {
    text-align: right;
}

.djc_cart_table tbody tr {
    border-bottom: 1px solid #f1f3f2;
}

.djc_cart_table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
}

.djc_cart_table .djc_td_title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.djc_cart_table .djc_td_title .djc_image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.djc_cart_table .djc_td_title .djc_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.djc_cart_table .djc_td_title strong a {
    color: #243308;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.djc_cart_table .djc_td_title strong a:hover {
    color: #414d2b;
}

.djc_cart_table .djc_td_update_qty {
    white-space: nowrap;
}

.djc_cart_table .djc_qty_buttons {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7ddda;
    border-radius: 6px;
    overflow: hidden;
}

.djc_cart_table .djc_qty_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    color: #414d2b;
    background: #f1f3f2;
    border: none;
    cursor: pointer;
}

.djc_cart_table .djc_qty_input {
    width: 40px !important;
    height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #243308;
    border: none;
    border-inline: 1px solid #d7ddda;
    outline: none;
    background: #FFFFFF;
}

.djc_cart_table .djc_qty_buttons .add-on {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 32px;
    font-size: 12px;
    color: #9da2a6;
    background: #f1f3f2;
    border-left: 1px solid #d7ddda;
}

.djc_cart_table .djc_update_quantity,
.djc_cart_table .djc_remove_from_cart {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border-radius: 6px;
    border: 1px solid #d7ddda;
    text-decoration: none;
}

.djc_cart_table .djc_update_quantity {
    color: #414d2b;
    background: #f1f3f2;
}

.djc_cart_table .djc_remove_from_cart {
    color: #ff0000;
    background: #fff5f5;
    border-color: #ffdada;
}

.djc_cart_table .djc_td_price {
    text-align: right;
    white-space: nowrap;
    color: #243308;
}

.djc_cart_table .djc_td_price .djc_price_value {
    font-weight: 600;
}

.djc_cart_table .djc_td_price .djc_price_old {
    color: #ff0000;
    text-decoration: line-through;
    font-size: 12px;
}

.djc_cart_table tfoot .djc_cart_foot {
    border-top: 2px solid #d7ddda;
}

.djc_cart_table tfoot .djc_cart_foot td {
    padding: 16px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #243308;
    text-align: right;
}

.djc_cart_table tfoot .djc_ft_total_label {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.djc_cart_table tfoot .djc_cart_buttons td {
    padding: 16px 12px 0;
    text-align: right;
}

.djc_cart_table tfoot .djc_cart_buttons .btn {
    padding: 8px 20px;
    font-size: 13px;
    color: #9da2a6;
    background: #f1f3f2;
    border: 1px solid #d7ddda;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.djc_cart_actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.djc_cart_actions .djc_cart_proceed {
    display: inline-flex;
}

.djc_cart_actions .btn {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.djc_cart_actions .djc_query_btn {
    color: #414d2b;
    background: transparent;
    border: 1px solid #414d2b;
}

.djc_cart_actions .djc_checkout_btn {
    color: #fafaf5;
    background: #243308;
    border: 1px solid #243308;
}

@media screen and (max-width: 768px) {
    .djc_cart_table,
    .djc_cart_table thead,
    .djc_cart_table tbody,
    .djc_cart_table tfoot,
    .djc_cart_table tr,
    .djc_cart_table td,
    .djc_cart_table th {
        display: block;
    }
    .djc_cart_table thead {
        display: none;
    }
    .djc_cart_table tbody tr {
        padding: 16px 0;
        border-bottom: 1px solid #d7ddda;
    }
    .djc_cart_table .djc_td_title {
        flex-wrap: wrap;
    }
    .djc_cart_table .djc_td_price {
        text-align: left;
        padding: 4px 12px;
    }
    .djc_cart_table .djc_td_price_net::before {
        content: 'Netto: ';
        color: #9da2a6;
        font-weight: 400;
    }
    .djc_cart_table .djc_td_price_tax::before {
        content: 'Podatek: ';
        color: #9da2a6;
        font-weight: 400;
    }
    .djc_cart_table .djc_td_price_gross::before {
        content: 'Wartość: ';
        color: #9da2a6;
        font-weight: 400;
    }
    .djc_cart_table tfoot .djc_cart_foot td {
        text-align: left;
        padding: 8px 12px;
    }
    .djc_cart_actions {
        flex-direction: column;
    }
    .djc_cart_actions .btn {
        width: 100%;
        text-align: center;
    }
}


/* =========== [10. DJ Checkout Steps] =========== */

.djc_checkout_progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 32px auto;
    max-width: 500px;
    list-style: none;
    counter-reset: step;
}

.djc_checkout-step {
    flex: 1;
    position: relative;
    text-align: center;
    counter-increment: step;
}

.djc_checkout-step>a,
.djc_checkout-step>span {
    display: block;
    margin: 0 !important;
    padding-top: 28px;
    font-size: 14px;
    font-weight: 500;
    color: #9da2a6;
    text-decoration: none;
    position: relative;
}

.djc_checkout-step a:hover {
    color: #414d2b;
}

.djc_checkout-step::before {
    content: counter(step);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 700;
    color: #9da2a6;
    background-color: #f1f3f2;
    border: 2px solid #d7ddda;
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s ease;
}

.djc_checkout-step+.djc_checkout-step::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 2px;
    background-color: #d7ddda;
    z-index: 0;
}

.djc_checkout-step.active::before {
    color: #fafaf5;
    background-color: #414d2b;
    border-color: #414d2b;
}

.djc_checkout-step.active a,
.djc_checkout-step.active span {
    color: #243308;
    font-weight: 600;
}

.djc_checkout-step.completed::before {
    content: '✓';
    color: #fafaf5;
    background-color: #414d2b;
    border-color: #414d2b;
}

.djc_checkout-step.completed+.djc_checkout-step::after {
    background-color: #414d2b;
}