:root{
    --header-height:68px;
    --cart-bar-height:90px;
    --total-header-height:var(--header-height);
    --bg-primary:#f8fafb;
    --bg-secondary:#ffffff;
    --text-primary:#1a1d21;
    --text-secondary:#6b7280;
    --accent-coral:#ff6b6b;
    --accent-blue:#4f7df3;
    --accent-green:#10b981;
    --success-green:#22c55e;
    --primary-blue:#3b82f6;
    --accent-purple:#8b5cf6;
    --border-light:#e5e7eb;
    --shadow-soft:0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium:0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-hover:0 8px 30px rgba(0, 0, 0, 0.12);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    --border-color:#dee2e6;
    --surface:#ffffff;
    --border:#e2e8f0;
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1);
    --radius:12px;
    --text-muted:#94a3b8;
    --secondary-gray:#64748b;
    --secondary-color:#64748b;
    --surface-hover:#f1f5f9;
    --primary-light:rgba(59, 130, 246, 0.1);
    --bs-primary:#3b82f6;
    --warning-amber:#f59e0b;
    --danger-red:#ef4444;
    --background:#f8fafc;
    --bs-card-border-radius:10px;
}
body.has-cart-bar{
    --total-header-height:calc(var(--header-height) + var(--cart-bar-height));
}
body{
    font-family:"DM Sans", sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    padding:0px !important;
}
.main-container{
    float:left;
    width:100%;
    display:flex;
    min-height:calc(100vh - var(--total-header-height));
    margin-top:var(--total-header-height);
}
header{
    position:fixed;
    top:0px;
    z-index:999;
    width:100%;
}
.header{
    float:left;
    width:100%;
    border-bottom:1px solid rgb(226, 232, 240);
    box-shadow:rgb(226, 232, 240) 1px 1px 1px;
    display:flex;
    align-content:center;
    align-items:center;
    background:rgb(255, 255, 255);
    position:relative;
    & .header_logo{
        float:left;
        width:150px;
        padding:15px 20px;
        box-sizing:border-box;
        & img{
            float:left;
            width:100%;
        }
    }
    & .header_menu{
        float:left;
        width:calc(100% - 450px);
        & .navbar{
            padding:0px;
            width:100%;
        }
        & .navbar-nav{
            flex-direction:row;
            justify-content:center;
            width:100%;
            gap:8px;
        }
        & .nav-item{
            padding:0px;
        }
        & .nav-link{
            text-decoration:none;
            display:flex;
            color:var(--secondary-gray);
            padding:8px;
            border-radius:var(--radius-sm);
            align-items:center;
            font-weight:500;
            font-size:0.9rem;
            transition:0.2s;
            white-space:nowrap;
            gap:8px;
            & i{
                font-size:1.1rem;
                color:var(--text-muted);
                transition:0.2s;
            }
            &.active{
                background:var(--primary-light);
                color:var(--bs-primary);
                & i{
                    color:var(--bs-primary);
                }
            }
            &:hover:not(.active){
                background:var(--surface-hover);
                color:var(--text-primary);
                & i{
                    color:var(--secondary-gray);
                }
            }
        }
    }
    & .custom-hamburger{
        padding:5px;
        border-width:medium;
        border-style:none;
        border-color:currentcolor;
        border-image:initial;
        background:transparent;
        font-size:24px;
        color:var(--bs-primary);
        transition:0.2s;
        &:focus{
            box-shadow:none;
        }
        &:hover{
            opacity:0.8;
            transform:scale(1.1);
        }
    }
    & .custom-offcanvas{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        height:100vh;
        background:var(--bg-secondary);
        z-index:1050;
        transform:translateX(-100%);
        transition:transform .3s ease-in-out;
        box-shadow:var(--shadow-medium);
        overflow-y:auto;
        &.active{
            transform:translateX(0);
        }
        & .offcanvas-header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:1rem;
            border-bottom:1px solid var(--border-light);
        }
        & .offcanvas-body{
            padding:0;
        }
    }
    & .custom-offcanvas-backdrop{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.5);
        z-index:1049;
        opacity:0;
        visibility:hidden;
        transition:opacity .3s, visibility .3s;
        &.active{
            opacity:1;
            visibility:visible;
        }
    }
    @media (max-width:1200px){
        & .header_menu{
            width:calc(100% - 400px);
        }
    }
    @media (max-width:1420px){
        & .navbar-collapse{
            display:none !important;
        }
        & .custom-hamburger{
            display:flex !important;
        }
    }
    @media (min-width:1421px){
        & .navbar-collapse{
            display:flex !important;
        }
        & .custom-hamburger{
            display:none !important;
        }
        & .custom-offcanvas,
        & .custom-offcanvas-backdrop{
            display:none !important;
        }
    }
    @media (max-width:991px){
        & .header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0px 15px;
            height:var(--header-height);
            flex-wrap:nowrap;
        }
        & .header_logo{
            width:120px;
            padding:0px;
            order:1;
            margin:0px;
            flex:0 0 120px;
        }
        & .header_menu{
            order:2;
            width:auto;
            margin:0px;
            flex:1 1 0%;
            display:flex;
            justify-content:center;
            & .navbar{
                width:auto;
            }
        }
        & .header_account_manager{
            order:3;
            margin:0px;
            flex:0 0 120px;
            display:flex;
            justify-content:flex-end;
            width:120px !important;
            & .account_container{
                width:auto;
                border-width:medium;
                border-style:none;
                border-color:currentcolor;
                border-image:initial;
                background:transparent;
                &:hover{
                    box-shadow:none;
                }
            }
            & .account_selected_customer_info{
                display:none;
            }
            & .account_manager{
                border-width:medium;
                border-style:none;
                border-color:currentcolor;
                border-image:initial;
                width:auto;
                padding:0px;
            }
        }
    }
    & .header_account_manager{
        float:left;
        width:300px;
        & .account_container{
            float:left;
            width:calc(100% - 10px);
            display:flex;
            background:var(--bg-primary);
            border:1px solid var(--border-light);
            box-sizing:border-box;
            border-radius:var(--radius-md);
            transition:0.2s;
            align-items:center;
            &:hover{
                border-color:var(--bs-primary);
                box-shadow:var(--shadow-sm);
            }
            & .account_customer_list{
                float:left;
                width:calc(100% - 60px);
                & .account_selected_customer_info{
                    float:left;
                    width:100%;
                    padding:8px 12px;
                    box-sizing:border-box;
                    cursor:pointer;
                    & .account_selected_customer_company_name{
                        float:left;
                        width:100%;
                        display:flex;
                        align-items:center;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        white-space:nowrap;
                        font-size:0.85rem;
                        font-weight:600;
                        color:var(--text-primary);
                        & i{
                            font-size:16px;
                            color:var(--bs-primary);
                            margin-right:8px;
                        }
                        & .company_text{
                            float:left;
                            width:calc(100% - 25px);
                            text-overflow:ellipsis;
                            overflow:hidden;
                            white-space:nowrap;
                        }
                    }
                }
                & .account_search_customer{
                    float:left;
                    width:400px;
                    position:absolute;
                    background:rgb(255, 255, 255);
                    top:62px;
                    border:1px solid var(--border-light);
                    border-radius:var(--radius-md);
                    box-shadow:var(--shadow-medium);
                    right:20px;
                    display:none;
                    z-index:1001;
                    overflow:hidden;
                    &.show{
                        display:block;
                        animation:0.2s ease-out 0s 1 normal none running slideDown;
                    }
                    & input{
                        float:left;
                        width:calc(100% - 20px);
                        margin:10px;
                        box-sizing:border-box;
                        padding:10px 15px;
                        border-radius:8px;
                        border:1px solid var(--border-light);
                        font-size:0.9rem;
                        &:focus{
                            outline:none;
                            border-color:var(--bs-primary);
                        }
                    }
                    & .account_search_customer_list{
                        float:left;
                        width:100%;
                        max-height:350px;
                        overflow-y:auto;
                        border-top:1px solid var(--border-light);
                        & .account_search_customer_list_item{
                            float:left;
                            width:100%;
                            padding:12px 15px;
                            border-bottom:1px solid var(--border-light);
                            cursor:pointer;
                            transition:0.15s;
                            & .account_search_customer_list_item_name{
                                float:left;
                                font-size:0.85rem;
                                color:var(--text-primary);
                                font-weight:500;
                                & i{
                                    font-size:15px;
                                    color:var(--text-muted);
                                    margin-right:10px;
                                }
                            }
                            &:hover{
                                background:var(--primary-light);
                                & .account_search_customer_list_item_name{
                                    color:var(--bs-primary);
                                    & i{
                                        color:var(--bs-primary);
                                    }
                                }
                            }
                            &:last-child{
                                border-bottom-width:medium;
                                border-bottom-style:none;
                                border-bottom-color:currentcolor;
                            }
                        }
                    }
                }
            }
            & .account_manager{
                float:left;
                width:60px;
                border-left:1px solid var(--border-light);
                display:flex;
                align-items:center;
                justify-content:center;
                & .account_manager_info{
                    float:left;
                    width:100%;
                    padding:4px;
                    display:flex;
                    justify-content:center;
                    & a{
                        color:var(--bs-primary);
                        text-decoration:none;
                        & img{
                            width:38px;
                            height:38px;
                            border-radius:10px;
                            object-fit:cover;
                            border:2px solid rgb(255, 255, 255);
                            box-shadow:0 0 0 1px var(--border-light);
                        }
                        &::after{
                            display:none;
                        }
                    }
                }
            }
        }
    }
}
.cart-bar{
    float:left;
    width:100%;
    background:linear-gradient(135deg, rgb(26, 29, 33) 0%, rgb(45, 49, 57) 100%);
    padding:0.875rem 0px;
    box-shadow:rgba(0, 0, 0, 0.15) 0px 4px 20px;
}
.cart-bar-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
}
.cart-stat{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.5rem 1rem;
    background:rgba(255, 255, 255, 0.08);
    border-radius:var(--radius-sm);
    border:1px solid rgba(255, 255, 255, 0.1);
}
.cart-stat-icon{
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}
.cart-stat-icon.total{
    background:linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
    color:white;
}
.cart-stat-icon.bags{
    background:linear-gradient(135deg, rgb(79, 125, 243), rgb(59, 108, 231));
    color:white;
}
.cart-stat-icon.boxes{
    background:linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));
    color:white;
}
.cart-stat-info{
    display:flex;
    flex-direction:column;
}
.cart-stat-label{
    font-size:0.7rem;
    color:rgba(255, 255, 255, 0.6);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:500;
}
.cart-stat-value{
    font-family:Outfit, sans-serif;
    font-size:1.125rem;
    font-weight:700;
    color:white;
}
.cart-actions{
    display:flex;
    gap:0.75rem;
}
.cart-btn{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.625rem 1.25rem;
    border-radius:var(--radius-sm);
    font-weight:600;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    transition:0.2s;
    cursor:pointer;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    text-decoration:none;
}
.cart-btn-outline{
    background:transparent;
    border:1.5px solid rgba(255, 255, 255, 0.3);
    color:white;
}
.cart-btn-outline:hover{
    background:rgba(255, 255, 255, 0.1);
    border-color:rgba(255, 255, 255, 0.5);
    color:white;
}
.cart-btn-primary{
    background:linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
    color:white;
}
.cart-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:rgba(16, 185, 129, 0.4) 0px 4px 12px;
}
.cart-btn-danger{
    background:transparent;
    border:1.5px solid rgba(239, 68, 68, 0.5);
    color:rgb(252, 165, 165);
}
.cart-btn-danger:hover{
    background:rgba(239, 68, 68, 0.2);
    border-color:rgb(239, 68, 68);
}
.sidebar{
    width:350px;
    background:var(--bg-secondary);
    border-right:1px solid var(--border-light);
    position:sticky;
    top:var(--total-header-height);
    height:calc(100vh - var(--total-header-height));
    overflow-y:auto;
}
.sidebar-section{
    border-bottom:1px solid var(--border);
}
.sidebar-title{
    font-size:0.7rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-secondary);
    margin:0px;
    padding:13px;
    &:first-child{
        margin-top:0px;
        border-top-width:medium;
        border-top-style:none;
        border-top-color:currentcolor;
    }
}
.color-group{
    padding:10px 20px 10px 10px;
    display:flex;
    align-items:center;
    gap:0.875rem;
    cursor:pointer;
    transition:0.2s;
    border-left:3px solid transparent;
    position:relative;
}
.color-group .is_has_basket{
    position:absolute;
    top:9px;
    left:37px;
    width:20px;
    height:20px;
    background:rgb(0, 46, 83);
    z-index:1;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:500px;
    padding:10px;
    box-sizing:border-box;
    color:rgb(255, 255, 255);
    & i{
        font-size:12px;
    }
    &.active{
        display:flex;
    }
}
.color-group .is_discount{
    position:absolute;
    bottom:10px;
    left:37px;
    width:20px;
    height:20px;
    background:rgb(50 161 54);
    z-index:1;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:500px;
    padding:10px;
    box-sizing:border-box;
    color:rgb(255, 255, 255);
    & i{
        font-size:12px;
    }
    &.active{
        display:flex;
    }
}
.color-group:hover{
    background:var(--bg-primary);
}
.color-group.active{
    background:rgb(195, 225, 255);
    border-left-color:var(--accent-blue);
}
.color-group-icon{
    width:40px;
    height:40px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.color-group-icon.standard{
    background:linear-gradient(135deg, rgb(255, 107, 107), rgb(238, 90, 36));
}
.color-group-icon.mirror{
    background:linear-gradient(135deg, rgb(192, 192, 192), rgb(168, 168, 168));
    border:2px solid rgb(229, 231, 235);
}
.color-group-icon.macaron{
    background:linear-gradient(135deg, rgb(255, 182, 193), rgb(221, 160, 221));
}
.color-group-icon.metallic{
    background:linear-gradient(135deg, rgb(255, 215, 0), rgb(255, 165, 0));
}
.color-group-icon.retro{
    background:linear-gradient(135deg, rgb(222, 184, 135), rgb(188, 143, 143));
}
.color-group-icon.prints{
    background:linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246));
}
.category-expandable{
    border-bottom:1px solid var(--border-light);
}
.category-header{
    padding:0.875rem 1.5rem;
    display:flex;
    align-items:center;
    gap:0.875rem;
    cursor:pointer;
    transition:0.2s;
    border-left:3px solid transparent;
}
.category-header:hover{
    background:var(--bg-primary);
}
.category-header.expanded{
    background:linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    border-left-color:rgb(99, 102, 241);
}
.category-header .color-group-arrow{
    transition:transform 0.2s;
}
.category-header.expanded .color-group-arrow{
    transform:rotate(90deg);
    color:rgb(99, 102, 241);
}
.subcategory-list{
    max-height:0px;
    overflow:hidden;
    transition:max-height 0.3s;
    background:var(--bg-primary);
}
.subcategory-list.expanded{
    max-height:500px;
}
.subcategory-item{
    padding:0.65rem 1.5rem 0.65rem 4rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    cursor:pointer;
    transition:0.2s;
    font-size:0.85rem;
    color:var(--text-secondary);
    border-left:3px solid transparent;
}
.subcategory-item:hover{
    background:var(--bg-secondary);
    color:var(--accent-blue);
}
.subcategory-item.active{
    background:var(--bg-secondary);
    color:var(--accent-blue);
    border-left-color:var(--accent-blue);
    font-weight:600;
}
.subcategory-item i{
    font-size:0.7rem;
    width:16px;
}
.sidebar-divider{
    height:1px;
    background:var(--border-light);
    margin:1rem 1.5rem;
}
.sidebar-section-title{
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-secondary);
    padding:0.5rem 1.5rem;
    margin-top:0.5rem;
}
.color-group-text{
    flex:1 1 0%;
}
.color-group-name{
    font-weight:600;
    font-size:0.9rem;
    color:var(--text-primary);
    margin-bottom:0.125rem;
}
.color-group-count{
    font-size:0.75rem;
    color:var(--text-secondary);
}
.color-group-arrow{
    color:var(--text-secondary);
    font-size:0.75rem;
    transition:transform 0.2s;
}
.color-group.active .color-group-arrow{
    color:var(--accent-blue);
}
.content{
    flex:1 1 0%;
    padding:2rem;
    overflow-y:auto;
}
.content-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:2rem;
}
.content-title{
    font-family:Outfit, sans-serif;
    font-size:1.75rem;
    font-weight:700;
    color:var(--text-primary);
}
.content-subtitle{
    font-size:0.875rem;
    color:var(--text-secondary);
    margin-top:0.25rem;
}
.color-grid{
    display:flex;
    flex-wrap:wrap;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:15px;
}
@media (max-width:768px){
    .sidebar{
        display:none;
    }
    .cart-bar-content{
        flex-wrap:wrap;
    }
}
.color-section{
    width:100%;
    margin-top:1.5rem;
    margin-bottom:1rem;
}
.color-section:first-child{
    margin-top:0px;
}
.color-section-header{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
}
.color-section-title{
    font-family:Outfit, sans-serif;
    font-size:1.1rem;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
}
.color-section-line{
    flex:1 1 0%;
    height:2px;
    background:linear-gradient(90deg, var(--border-light) 0%, transparent 100%);
}
.color-section-count{
    font-size:0.8rem;
    color:var(--text-secondary);
    background:var(--bg-primary);
    padding:0.25rem 0.75rem;
    border-radius:20px;
    white-space:nowrap;
}
.color-section-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(201px, 1fr));
    gap:20px;
}
.color-card{
    width:100%;
    min-width:200px;
    max-width:218px;
    background:var(--bg-secondary);
    border-radius:var(--radius-sm);
    padding:1rem;
    cursor:pointer;
    transition:0.25s;
    border:1.5px solid transparent;
    box-shadow:var(--shadow-soft);
    text-align:center;
    flex-shrink:0;
    position:relative;
}
.color-card .is_has_basket{
    position:absolute;
    top:4px;
    right:5px;
    width:30px;
    height:30px;
    background:rgb(0, 46, 83);
    z-index:1;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:500px;
    padding:10px;
    box-sizing:border-box;
    color:rgb(255, 255, 255);
    &.active{
        display:flex;
    }
}
.color-card .is_discount{
    position:absolute;
    bottom:58px;
    right:5px;
    width:30px;
    height:30px;
    background:rgb(50 161 54);
    z-index:1;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:500px;
    padding:10px;
    box-sizing:border-box;
    color:rgb(255, 255, 255);
    &.active{
        display:flex;
    }
}
.color-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:var(--accent-blue);
}
.color-card.in-cart{
    border-color:var(--accent-green);
    background:linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-secondary) 100%);
}
.color-card.in-cart::after{
    content:"";
    position:absolute;
    top:8px;
    right:8px;
    width:20px;
    height:20px;
    background:var(--accent-green);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.color-swatch{
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:6px;
    margin-bottom:0.4rem;
    position:relative;
    overflow:hidden;
    box-shadow:rgba(0, 0, 0, 0.1) 0px -2px 4px inset;
}
.color-swatch::after{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:40%;
    background:linear-gradient(rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius:6px 6px 0px 0px;
}
.color-swatch .btn-zoom-image{
    position:absolute;
    bottom:6px;
    right:6px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(0, 0, 0, 0.45);
    color:#fff;
    border:none;
    cursor:pointer;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    padding:0;
    line-height:1;
    transition:background 0.2s;
}
.color-swatch .btn-zoom-image:hover{
    background:rgba(0, 0, 0, 0.7);
}
.image-lightbox-modal .modal-dialog{
    max-width:90vw;
    max-height:90vh;
}
.image-lightbox-modal .modal-content{
    background:#fff;
    border:none;
    box-shadow:none;
    border-radius:var(--radius-sm);
}
.image-lightbox-modal .modal-body{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.image-lightbox-modal .btn-close-lightbox{
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgb(165 165 165);
    border-radius:50%;
    opacity:1;
    width:40px;
    height:40px;
    padding:8px;
    transition:background 0.2s;
    top:-20px;
    right:-20px;
    position:absolute;
    color: #000000;
    border:none;
    cursor:pointer;
    z-index:10;
    font-size:23px;
}
.image-lightbox-modal .btn-close-lightbox:hover{
    background: rgb(122 122 122);
}
.image-lightbox-modal img{
    max-height:85vh;
    width:auto;
    height:auto;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
}
.modal-backdrop.lightbox-backdrop{
    z-index:1064;
}
.color-name{
    font-weight:600;
    font-size:15px;
    color:var(--text-primary);
    line-height:1.2;
    margin-bottom:0.2rem;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    line-clamp:3 -webkit-legacy;
    -webkit-box-orient:vertical;
}
.color-code{
    font-size:0.95rem;
    color:var(--text-secondary);
    font-family:Monaco, Menlo, monospace;
}
.cart-indicator{
    position:absolute;
    top:4px;
    right:4px;
    width:14px;
    height:14px;
    background:var(--accent-green);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:0.5rem;
}
.modal-backdrop.show{
    opacity:0.8;
}
.color-modal .modal-dialog{
    max-width:850px;
}
.color-modal .modal-content{
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    border-radius:var(--radius-lg);
    box-shadow:rgba(0, 0, 0, 0.2) 0px 25px 60px;
}
.modal-header-custom{
    background:linear-gradient(135deg, rgb(26, 29, 33) 0%, rgb(45, 49, 57) 100%);
    padding:1.5rem 2rem;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    position:sticky;
    top:0px;
    z-index:99;
    display:flex;
    align-items:center;
    align-content:center;
}
.modal-balloon-preview{
    position:absolute;
    right:55px;
    width:80px;
    height:90%;
    cursor:pointer;
}
.modal-balloon-preview::after{
    content:"\f002";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0);
    color:#fff;
    font-size:20px;
    border-radius:inherit;
    transition:opacity 0.2s, background 0.2s;
    pointer-events:none;
    opacity:0;
    height:77px;
}
.modal-balloon-preview:hover::after{
    opacity:1;
}
.balloon-shape{
    width:60px;
    height:75px;
    border-radius:50% / 60% 60% 40% 40%;
    position:relative;
    margin:0px auto;
    box-shadow:rgba(0, 0, 0, 0.2) -10px -10px 20px inset, rgba(255, 255, 255, 0.3) 10px 10px 20px inset;
}
.balloon-shape::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:50%;
    transform:translateX(-50%);
    width:0px;
    height:0px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:10px solid;
}
.balloon-shape::before{
    content:"";
    position:absolute;
    top:15%;
    left:25%;
    width:20%;
    height:25%;
    background:rgba(255, 255, 255, 0.4);
    border-radius:50%;
    transform:rotate(-30deg);
}
.modal-color-title{
    font-family:Outfit, sans-serif;
    font-size:1.5rem;
    font-weight:700;
    color:white;
    margin-bottom:0.25rem;
}
.modal-color-code{
    font-size:0.8rem;
    color:rgba(255, 255, 255, 0.6);
    font-family:Monaco, Menlo, monospace;
}
.modal-close-btn{
    position:absolute;
    right:15px;
    background:rgba(255, 0, 0, 0.6);
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    width:32px;
    height:32px;
    border-radius:50%;
    color:white;
    cursor:pointer;
    transition:0.2s;
}
.modal-close-btn:hover{
    background:rgba(239, 0, 0, 0.2);
}
.modal-body-custom{
}
.size-table{
    width:100%;
    border-collapse:collapse;
}
.size-table th{
    background:var(--bg-primary);
    padding:0.875rem 1rem;
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-secondary);
    text-align:left;
    border-bottom:2px solid var(--border-light);
}
.size-table th:nth-child(2), .size-table th:nth-child(4), .size-table th:nth-child(5), .size-table th:nth-child(6), .size-table th:nth-child(7), .size-table td:nth-child(2), .size-table td:nth-child(4), .size-table td:nth-child(5), .size-table td:nth-child(6), .size-table td:nth-child(7){
    text-align:center;
}
.price-display{
    font-weight:600;
    color:var(--accent-blue);
    font-size:0.9rem;
    display:block;
}
.underline-price-display{
    font-weight:600;
    color:#606060;
    font-size:0.9rem;
    text-decoration:line-through;
    display:block;
}
.line-total-display{
    font-weight:700;
    color:var(--accent-green);
    font-size:0.9rem;
    min-width:70px;
    max-width:100px;
    display:inline-block;
}
.line-total-display.has-value{
    background:linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    padding:0.25rem 0.5rem;
    border-radius:4px;
}
.modal-info-note{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-top:1rem;
    padding:0.75rem 1rem;
    background:linear-gradient(135deg, rgb(254, 243, 199), rgb(253, 230, 138));
    border-radius:var(--radius-sm);
    font-size:0.85rem;
    color:rgb(146, 64, 14);
}
.modal-info-note i{
    color:rgb(217, 119, 6);
}
.bag-ct{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgb(238, 242, 255), rgb(224, 231, 255));
    color:rgb(79, 70, 229);
    font-weight:700;
    font-size:0.8rem;
    padding:0.35rem 0.75rem;
    border-radius:20px;
    min-width:60px;
}
.size-table td{
    padding:3px;
    border-bottom:1px solid var(--border-light);
    vertical-align:middle;
    position:relative;
}
.size-table tr:hover td{
    background:var(--bg-primary);
}
.size-name{
    font-weight:600;
    color:var(--text-primary);
    font-size:13px;
}
.size-name + div{
    font-size:13px;
}
.size-sku{
    font-size:0.75rem;
    color:var(--text-secondary);
    font-family:Monaco, Menlo, monospace;
    background:var(--bg-primary);
    padding:0.25rem 0.5rem;
    border-radius:4px;
    display:inline-block;
    width:100%;
    text-align:-webkit-center;
}
.size-packing{
    font-size:0.8rem;
    color:var(--text-secondary);
}
.qty-input-group{
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.qty-input{
    width:90px;
    padding:0.5rem;
    border:2px solid var(--border-light);
    border-radius:var(--radius-sm);
    font-size:0.9rem;
    font-weight:600;
    text-align:center;
    transition:0.2s;
    &:disabled{
        background:rgb(224, 224, 224);
        cursor:no-drop;
    }
}
.qty-input:focus{
    outline:none;
    border-color:var(--accent-blue);
    box-shadow:rgba(79, 125, 243, 0.15) 0px 0px 0px 3px;
}
.qty-label{
    font-size:0.75rem;
    color:var(--text-secondary);
    font-weight:500;
}
.modal-footer-custom{
    padding:1.5rem 2rem;
    background:var(--bg-primary);
    border-top:1px solid var(--border-light);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    bottom:0px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    z-index:9;
}
.modal-total{
    display:flex;
    align-items:center;
    gap:1rem;
}
.modal-total-label{
    font-size:0.875rem;
    color:var(--text-secondary);
}
.modal-total-value{
    font-family:Outfit, sans-serif;
    font-size:1.5rem;
    font-weight:700;
    color:var(--accent-green);
}
.add-to-cart-btn{
    display:flex;
    align-items:center;
    gap:0.5rem;
    padding:0.875rem 2rem;
    background:linear-gradient(135deg, var(--accent-blue), #3b6ce7);
    color:white;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    border-radius:var(--radius-sm);
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    transition:0.2s;
}
.add-to-cart-btn:hover{
    transform:translateY(-2px);
    box-shadow:rgba(79, 125, 243, 0.4) 0px 6px 20px;
}
.add-to-cart-btn:disabled{
    background:var(--border-light);
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.input-group > .select2-container--bootstrap{
    width:auto;
    flex:1 1 auto;
}
.input-group > .select2-container--bootstrap .select2-selection--single{
    height:100%;
    line-height:inherit;
    padding:0.5rem 1rem;
}
.kalisan-swal-popup{
    border-radius:var(--radius-lg) !important;
    padding:1rem !important;
    width:24rem !important;
    box-shadow:var(--shadow-hover) !important;
    border:1px solid var(--border-light) !important;
}
.kalisan-swal-title{
    font-family:Outfit, sans-serif !important;
    font-weight:700 !important;
    color:var(--text-primary) !important;
    font-size:1.2rem !important;
    padding-top:0.5rem !important;
    margin-bottom:0.5rem !important;
}
.kalisan-swal-content{
    font-family:"DM Sans", sans-serif !important;
    color:var(--text-secondary) !important;
    font-size:0.85rem !important;
    line-height:1.4 !important;
}
.kalisan-swal-confirm{
    background:linear-gradient(135deg, var(--accent-blue), #3b6ce7) !important;
    border-radius:var(--radius-sm) !important;
    padding:0.5rem 1.5rem !important;
    font-weight:600 !important;
    font-family:"DM Sans", sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:0.5px !important;
    font-size:0.75rem !important;
    margin:5px !important;
    color:white !important;
    border-width:medium !important;
    border-style:none !important;
    border-color:currentcolor !important;
    border-image:initial !important;
}
.kalisan-swal-confirm:hover{
    transform:translateY(-1px);
    box-shadow:rgba(79, 125, 243, 0.3) 0px 4px 12px;
}
.kalisan-swal-cancel{
    background:transparent !important;
    color:var(--text-secondary) !important;
    border:1.5px solid var(--border-light) !important;
    border-radius:var(--radius-sm) !important;
    padding:0.5rem 1.5rem !important;
    font-weight:600 !important;
    font-family:"DM Sans", sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:0.5px !important;
    font-size:0.75rem !important;
    margin:5px !important;
}
.swal2-icon.swal2-success{
    border-color:var(--accent-green) !important;
    color:var(--accent-green) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"]{
    background-color:var(--accent-green) !important;
}
.swal2-icon.swal2-success .swal2-success-ring{
    border:4px solid rgba(16, 185, 129, 0.2) !important;
}
.swal2-icon.swal2-info{
    border-color:var(--accent-blue) !important;
    color:var(--accent-blue) !important;
}
.swal2-icon.swal2-warning{
    border-color:var(--warning-amber) !important;
    color:var(--warning-amber) !important;
}
.swal2-icon.swal2-error{
    border-color:var(--danger-red) !important;
    color:var(--danger-red) !important;
}
.page-header{
    background:var(--surface);
    border-radius:var(--radius);
    padding:2rem;
    margin-bottom:2rem;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
}
.page-title{
    font-size:2rem;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:0.5rem;
}
.page-subtitle{
    color:var(--text-secondary);
    font-size:1rem;
}
.documents-table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
}
.documents-table th{
    background:rgb(241, 245, 249);
    color:var(--text-primary);
    font-weight:600;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:1rem;
    border:1px solid var(--border);
    position:sticky;
    top:0px;
    z-index:10;
}
.documents-table td{
    padding:1rem;
    border:1px solid var(--border);
    font-size:0.9rem;
    vertical-align:middle;
    background:var(--surface);
}
.documents-table tbody tr:nth-child(2n) td{
    background:rgb(250, 251, 252);
}
.documents-table tbody tr:hover td{
    background:rgb(225, 236, 244);
    transition:background-color 0.2s;
}
.document-link{
    color:var(--primary-blue);
    text-decoration:none;
    font-weight:500;
    transition:color 0.2s;
}
.document-link:hover{
    color:rgb(30, 64, 175);
    text-decoration:underline;
}
.download-btn{
    background:var(--success-green);
    color:white;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    padding:0.5rem 1rem;
    border-radius:var(--radius-sm);
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    cursor:pointer;
    transition:0.2s;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.download-btn:hover{
    background:rgb(22, 163, 74);
    transform:translateY(-1px);
    box-shadow:rgba(34, 197, 94, 0.2) 0px 2px 4px;
}
.download-excel-btn{
    background:var(--success-green);
    color:white;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    padding:0.75rem 1.5rem;
    border-radius:var(--radius-sm);
    font-size:0.9rem;
    font-weight:600;
    text-transform:uppercase;
    cursor:pointer;
    transition:0.2s;
    display:flex;
    align-items:center;
    gap:0.75rem;
    float:right;
}
.download-excel-btn:hover{
    background:rgb(22, 163, 74);
    transform:translateY(-1px);
    box-shadow:rgba(34, 197, 94, 0.2) 0px 2px 4px;
}
.actions-column{
    text-align:center;
    width:120px;
}
.results-info{
    padding:1rem 2rem;
    background:rgb(248, 250, 252);
    border-bottom:1px solid var(--border);
    font-size:0.9rem;
    color:var(--text-secondary);
}
.results-count{
    font-weight:600;
    color:var(--primary-blue);
}
.content-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    margin-bottom:2rem;
}
.card-header-modern{
    padding:1.5rem 2rem;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.section-title{
    font-size:1.25rem;
    font-weight:600;
    color:var(--text-primary);
    margin:0px;
    display:flex;
    align-items:center;
    gap:0.75rem;
}
.section-icon{
    width:24px;
    height:24px;
    color:var(--text-secondary);
}
.filters-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1.5rem 2rem;
    margin-bottom:2rem;
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:60px;
}
.filter-section-title{
    font-size:1.1rem;
    font-weight:600;
    color:var(--text-primary);
    margin-bottom:1.5rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
}
.filters-row{
    display:flex;
    align-items:center;
    gap:2rem;
    flex-flow:row;
}
.filter-group{
    display:flex;
    align-items:center;
    gap:0.75rem;
    width:100%;
}
.filter-label{
    font-size:0.9rem;
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
}
.filter-select{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:0.75rem 1rem;
    font-size:0.9rem;
    color:var(--text-primary);
    min-width:160px;
    transition:0.2s;
}
.filter-select:focus{
    outline:none;
    border-color:var(--primary-blue);
    box-shadow:rgba(59, 130, 246, 0.1) 0px 0px 0px 3px;
}
.filter-operator{
    background:var(--secondary-color);
    color:white;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    border-radius:var(--radius-sm);
    padding:0.5rem 1rem;
    font-size:0.8rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.order-tabs{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-bottom:2rem;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.tab-nav{
    display:flex;
    background:rgb(248, 250, 252);
    border-bottom:1px solid var(--border);
}
.tab-item{
    flex:1 1 0%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem 1.5rem;
    cursor:pointer;
    border-right:1px solid var(--border);
    transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    background:transparent;
    color:var(--text-secondary);
    font-weight:500;
    text-decoration:none;
}
.tab-item:last-child{
    border-right-width:medium;
    border-right-style:none;
    border-right-color:currentcolor;
}
.tab-item:hover:not(.active){
    background:rgb(241, 245, 249);
    color:var(--text-primary);
    transform:translateY(-1px);
    box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 4px;
}
.tab-item.active{
    background:var(--primary-blue);
    color:white;
    font-weight:600;
    box-shadow:rgba(59, 130, 246, 0.3) 0px 2px 8px;
    transform:translateY(-2px);
    z-index:2;
    border-radius:var(--radius-sm) var(--radius-sm) 0 0;
    border-color:var(--primary-blue);
}
.tab-item.active::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0px;
    right:0px;
    height:4px;
    background:var(--primary-blue);
    box-shadow:rgba(59, 130, 246, 0.4) 0px 2px 4px;
}
.tab-icon{
    font-size:1.2rem;
    margin-right:0.75rem;
}
.tab-content{
    align-items:center;
}
.tab-content-container{
    display:flex;
    align-items:center;
}
.tab-number{
    font-size:1.5rem;
    font-weight:700;
    margin-right:0.5rem;
}
.tab-label{
    font-size:0.9rem;
    line-height:1.2;
}
.tab-processing .tab-icon{
    color:rgb(217, 119, 6);
}
.tab-shipped .tab-icon{
    color:rgb(5, 150, 105);
}
.tab-backordered .tab-icon{
    color:rgb(220, 38, 38);
}
.tab-processing.active .tab-icon{
    color:white;
}
.tab-shipped.active .tab-icon{
    color:white;
}
.tab-backordered.active .tab-icon{
    color:white;
}
.tab-item.active .tab-number{
    color:white;
    text-shadow:rgba(0, 0, 0, 0.1) 0px 1px 2px;
}
.tab-item.active .tab-label{
    color:rgba(255, 255, 255, 0.9);
    font-weight:500;
}
[data-tooltip]{
    position:relative;
    cursor:help;
}
[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:125%;
    left:50%;
    transform:translateX(-50%) scale(0.8);
    background:rgba(0, 0, 0, 0.85);
    color:white;
    padding:6px 10px;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    pointer-events:none;
}
[data-tooltip]::before{
    content:"";
    position:absolute;
    bottom:95%;
    left:50%;
    transform:translateX(-50%);
    border-width:6px;
    border-style:solid;
    border-color:rgba(0, 0, 0, 0.85) transparent transparent;
    border-image:initial;
    opacity:0;
    visibility:hidden;
    transition:0.2s;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) scale(1);
}
.get_product_list_tbody input:invalid, #cart-items-body input:invalid{
    background-color:rgb(255, 241, 242) !important;
    border-color:rgb(251, 113, 133) !important;
    color:rgb(225, 29, 72) !important;
}
.get_product_list_tbody input:invalid ~ .tooltip_text, #cart-items-body input:invalid ~ .tooltip_text{
    display:block;
}
.tooltip_content{
    position:relative;
    width:auto;
}
.tooltip_text{
    display:none;
    position:absolute;
    background:rgb(255, 112, 112);
    color:rgb(255, 255, 255);
    padding:2px 4px;
    bottom:calc(83% + 5px);
    left:50%;
    transform:translateX(-50%);
    width:136px;
    text-align:center;
    z-index:1;
    font-size:14px;
    border-radius:4px !important;
}
.tooltip_text::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-8px;
    border-width:8px;
    border-style:solid;
    border-color:rgb(255, 112, 112) transparent transparent;
}
.tooltip_text.qty_tooltip{
    left:50%;
    transform:translateX(-50%);
}
.tooltip_text.qty_tooltip::after{
    top:100%;
    left:50%;
    margin-left:-8px;
    border-color:rgb(255, 112, 112) transparent transparent;
}
.non_valid_input_content .tooltip_text{
    display:block;
}
.products-table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
}
.products-table th{
    background:rgb(241, 245, 249);
    color:var(--text-primary);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:5px;
    text-align:left;
    border:1px solid var(--border);
    position:sticky;
    top:0px;
    z-index:10;
}
.products-table th:first-child{
    border-left:1px solid var(--border);
}
.products-table th:last-child{
    border-right:1px solid var(--border);
    text-align:center;
}
.products-table td{
    padding:0.75rem;
    border:1px solid var(--border);
    font-size:0.85rem;
    vertical-align:middle;
    background:var(--surface);
}
.products-table tbody tr:nth-child(2n) td{
    background:rgb(250, 251, 252);
}
.products-table tbody tr:hover td{
    background:rgb(225, 236, 244);
    cursor:pointer;
}
.products-table tfoot tr td{
    font-weight:600;
    border-top:2px solid var(--border);
    background:rgb(241, 245, 249) !important;
}
.product-name-cell{
    font-weight:600;
    color:var(--text-primary);
}
.product-code-cell{
    color:var(--text-secondary);
    font-family:Monaco, Menlo, monospace;
    font-size:0.8rem;
}
.number-cell{
    text-align:center;
    font-weight:600;
}
.amount-cell{
    font-weight:700;
    color:var(--success-green);
    text-align:right;
}
.fixed-actions{
    position:fixed;
    bottom:30px;
    right:30px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:1000;
}
.scroll-to-top-btn, .contact-btn{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-width:medium;
    border-style:none;
    border-color:currentcolor;
    border-image:initial;
    cursor:pointer;
    transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color:white;
}
.scroll-to-top-btn{
    display:none;
    background:linear-gradient(135deg, var(--accent-blue), #3b6ce7);
    box-shadow:rgba(79, 125, 243, 0.3) 0px 4px 15px !important;
}
.contact-btn{
    background:linear-gradient(135deg, rgb(40, 167, 69), rgb(33, 136, 56));
    box-shadow:rgba(40, 167, 69, 0.3) 0px 4px 15px !important;
}
.scroll-to-top-btn:hover, .contact-btn:hover{
    transform:translateY(-5px);
}
.scroll-to-top-btn:hover{
    box-shadow:rgba(79, 125, 243, 0.4) 0px 8px 25px !important;
}
.contact-btn:hover{
    box-shadow:rgba(40, 167, 69, 0.4) 0px 8px 25px !important;
}
.scroll-to-top-btn i, .contact-btn i{
    font-size:1.2rem;
}
body.has-cart-bar .fixed-actions{
}
.whats-new-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px 6px 10px;
    background:transparent;
    border:1.5px solid rgb(176, 28, 36);
    border-radius:8px;
    cursor:pointer;
    font-size:12.5px;
    font-weight:600;
    position:relative;
    transition:0.2s;
    white-space:nowrap;
    color:rgb(176, 28, 36) !important;
    text-decoration:none !important;
}
.whats-new-btn:hover{
    transform:translateY(-1px);
    box-shadow:rgba(176, 28, 36, 0.3) 0px 3px 12px;
    background:rgb(176, 28, 36) !important;
    color:rgb(255, 255, 255) !important;
}
.new-badge{
    font-size:9px;
    background:rgb(176, 28, 36);
    color:rgb(255, 255, 255);
    padding:1px 5px;
    border-radius:4px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    transition:background 0.2s;
}
.whats-new-btn:hover .new-badge{
    background:rgba(255, 255, 255, 0.25);
}