/* ==========================================================
   HASEEN TOOLS PREMIUM
   GLASS UI
========================================================== */

/* ---------- Glass Containers ---------- */

.wd-scroll-content,
.wd-dropdown,
.wd-nav,
.wd-header,
.wd-header-main,
.wd-side-hidden,
.wd-popup,
.wd-search-dropdown,
.widget,
.widget-area .widget,
.sidebar-widget,
.cart-widget,
.login-form-side,
.wd-offcanvas-content{

    background:rgba(22,23,26,.72);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.06);

}

/* ---------- Product Cards ---------- */

.products .product,
.wd-product,
.product-grid-item{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.07);

    border-radius:22px;

    overflow:hidden;

    transition:all .45s ease;

    position:relative;

    box-shadow:
    0 10px 40px rgba(0,0,0,.35);

}

/* Gold Border Animation */

.products .product::before,
.wd-product::before,
.product-grid-item::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        transparent,
        rgba(244,180,0,.7),
        transparent
    );

    opacity:0;

    transition:.5s;

    pointer-events:none;

}

.products .product:hover::before,
.wd-product:hover::before,
.product-grid-item:hover::before{

    opacity:1;

}

/* Hover */

.products .product:hover,
.wd-product:hover,
.product-grid-item:hover{

    transform:
    translateY(-10px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.45),

    0 0 35px rgba(244,180,0,.18);

}

/* Image Animation */

.products img,
.wd-product img{

    transition:transform .6s ease;

}

.products .product:hover img,
.wd-product:hover img{

    transform:scale(1.08);

}

/* Category Boxes */

.wd-cat,
.product-category{

    background:rgba(255,255,255,.05);

    border-radius:20px;

    transition:.4s;

}

.wd-cat:hover,
.product-category:hover{

    transform:translateY(-8px);

}

/* Inputs */

input,
textarea,
select{

    background:#18191D;

    color:#FFF;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#F4B400;

    box-shadow:

    0 0 0 4px rgba(244,180,0,.12);

}

/* Tables */

table{

    background:rgba(255,255,255,.04);

    border-radius:18px;

    overflow:hidden;

}

/* Footer */

footer{

    backdrop-filter:blur(20px);

}