/*
====================================================
TrendBridge UI Framework
Module : Header
Version : 1.0.0
Visual Layer Only
====================================================
*/

:root{
    --tb-primary:#F5B51D;
    --tb-dark:#0F0F10;
    --tb-text:#FFFFFF;
    --tb-border:rgba(255,255,255,.08);
    --tb-shadow:0 10px 35px rgba(0,0,0,.18);
    --tb-speed:.30s;
}

/* Header */

.ab-header{

    background:#111;

    transition:all .30s ease;

}

/* عند السكرول */

.ab-header.tb-scrolled{

    box-shadow:var(--tb-shadow);

    backdrop-filter:blur(12px);

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

}

/* Logo */

.ab-logo img{

    transition:.30s;

}

/* Navigation */

.ab-nav a,
.ab-dropdown-trigger{

    color:#fff;

    transition:.25s;

    position:relative;

}

.ab-nav a:hover,
.ab-dropdown-trigger:hover{

    color:var(--tb-primary);

}

.ab-nav a::after,
.ab-dropdown-trigger::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--tb-primary);

    transition:.25s;

}

.ab-nav a:hover::after,
.ab-dropdown-trigger:hover::after{

    width:100%;

}

/* Icons */

.ab-icon-btn{

    transition:.25s;

}

.ab-icon-btn:hover{

    transform:translateY(-2px);

}

/* Cart Badge */

.ab-cart-count{

    background:var(--tb-primary);

    color:#111;

    font-weight:700;

}

/* Category Strip */

.ab-header-category{

    transition:.30s;

}

.ab-header-category a{

    transition:.25s;

}

.ab-header-category a:hover{

    color:var(--tb-primary);

}

/* Dropdown */

.ab-dropdown-panel{

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}
/* ===========================
Header States
=========================== */

.ab-header{

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;

}

.ab-header.tb-hide{

    transform:translateY(-100%);

}

.ab-header.tb-scrolled{

    box-shadow:0 12px 35px rgba(0,0,0,.18);

}
/* ==================================================
   TrendBridge Header V1.2
================================================== */

/* Icons */

.ab-icon-btn{
    position:relative;
    overflow:hidden;
    transition:
    background .25s ease,
    transform .25s ease,
    color .25s ease;
}

.ab-icon-btn:hover{

    background:rgba(245,181,29,.12);

    color:var(--tb-primary);

    transform:translateY(-2px);

}

.ab-icon-btn:active{

    transform:scale(.94);

}

/* Navigation */

.ab-nav a,
.ab-dropdown-trigger{

    padding:8px 2px;

    letter-spacing:.2px;

}

/* Underline */

.ab-nav a::after,
.ab-dropdown-trigger::after{

    border-radius:50px;

}

/* Active Link */

.ab-nav a.tb-active{

    color:var(--tb-primary);

}

.ab-nav a.tb-active::after{

    width:100%;

}

/* Cart */

.ab-cart-count{

    animation:tbCart 2s infinite;

}

@keyframes tbCart{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

/* Dropdown */

.ab-dropdown-panel{

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

}

.ab-dropdown:hover .ab-dropdown-panel{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}
/* ==================================================
TrendBridge Header V2
================================================== */

/* Glass Effect */

.ab-header.tb-scrolled{

    background:rgba(17,17,17,.78);

    backdrop-filter:blur(18px);

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

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

    box-shadow:
    0 8px 35px rgba(0,0,0,.18);

}

/* Smooth */

.ab-header{

    will-change:transform;

}

/* Icons */

.ab-icon-btn{

    position:relative;

    isolation:isolate;

}

.ab-icon-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:12px;

    background:var(--tb-primary);

    opacity:0;

    transform:scale(.6);

    transition:.28s;

    z-index:-1;

}

.ab-icon-btn:hover::before{

    opacity:.12;

    transform:scale(1);

}

.ab-icon-btn svg{

    transition:.28s;

}

.ab-icon-btn:hover svg{

    transform:scale(1.08);

}

/* Navigation */

.ab-nav a,
.ab-dropdown-trigger{

    transition:
    color .25s,
    transform .25s;

}

.ab-nav a:hover,
.ab-dropdown-trigger:hover{

    transform:translateY(-2px);

}

/* Dropdown */

.ab-dropdown-panel{

    transform:translateY(16px) scale(.98);

    opacity:0;

    visibility:hidden;

    transition:.30s;

}

.ab-dropdown:hover .ab-dropdown-panel{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}

/* Cart */

.ab-cart-count{

    box-shadow:
    0 0 0 4px rgba(245,181,29,.15);

}
/* ==================================================
TrendBridge Header V3
================================================== */

/* Smooth Navigation */

.ab-nav a,
.ab-dropdown-trigger{

    overflow:hidden;

}

.ab-nav a::before,
.ab-dropdown-trigger::before{

    content:"";

    position:absolute;

    left:-100%;

    bottom:0;

    width:100%;

    height:2px;

    background:#F5B51D;

    transition:left .35s ease;

}

.ab-nav a:hover::before,
.ab-dropdown-trigger:hover::before,
.ab-nav a.tb-active::before{

    left:0;

}

/* Logo */

.ab-logo img{

    transition:
    transform .35s ease,
    filter .35s ease;

}

.ab-logo:hover img{

    transform:scale(1.05);

    filter:brightness(1.05);

}

/* Buttons */

.ab-icon-btn{

    border:1px solid transparent;

}

.ab-icon-btn:hover{

    border-color:rgba(245,181,29,.25);

    box-shadow:0 8px 20px rgba(245,181,29,.15);

}

/* Dropdown */

.ab-dropdown-panel{

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

}

/* Category Strip */

.ab-header-category{

    transition:.35s;

}

.ab-header-category a{

    position:relative;

}

.ab-header-category a::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:50%;

    width:0;

    height:2px;

    background:#F5B51D;

    transform:translateX(-50%);

    transition:.3s;

}

.ab-header-category a:hover::after{

    width:70%;

}
/* ==================================================
TrendBridge Header V4
================================================== */

/* Logo Glow */

.ab-logo img{
    transform-origin:center;
}

.ab-logo:hover img{
    filter:drop-shadow(0 0 12px rgba(245,181,29,.35));
}

/* Navigation */

.ab-nav a,
.ab-dropdown-trigger{

    border-radius:8px;

    transition:
    color .25s,
    background .25s,
    transform .25s;

}

.ab-nav a:hover,
.ab-dropdown-trigger:hover{

    background:rgba(245,181,29,.08);

}

/* Header Shadow */

.ab-header.tb-scrolled{

    box-shadow:
    0 10px 40px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.05);

}

/* Icon Rotate */

.ab-icon-btn svg{

    transition:
    transform .30s ease,
    opacity .30s ease;

}

.ab-icon-btn:hover svg{

    transform:rotate(8deg) scale(1.1);

}

/* Badge */

.ab-cart-count{

    transition:.30s;

}

.ab-icon-btn:hover .ab-cart-count{

    transform:scale(1.15);

}

/* Dropdown */

.ab-dropdown-panel{

    backdrop-filter:blur(18px);

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

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

}
/* ==========================
TrendBridge Search Active
========================== */

.ab-icon-btn.search-active,
.ab-icon-btn.search-active svg{
    color:#F5B51D !important;
}

.ab-icon-btn.search-active::before{
    opacity:.18 !important;
    transform:scale(1) !important;
}
/*==================================
TrendBridge Cart Icon
==================================*/

.cart-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
}

.tb-cart-icon{
    width:22px;
    height:22px;
    color:#fff;
    transition:.3s;
}

.cart-btn:hover .tb-cart-icon{
    color:#F5B51D;
}

.ab-cart-count{
    position:absolute;
    top:2px;
    right:2px;
}
/*==================================
TrendBridge Search Active
==================================*/

.search-btn{
    transition:.3s;
}

.search-btn.active-search{
    color:#F5B51D !important;
}

.search-btn.active-search svg{
    color:#F5B51D !important;
}

.search-btn:hover{
    color:#F5B51D;
}
/*==================================================
TrendBridge Wishlist
==================================================*/

/* قلب الهيدر */
.tb-wishlist-btn{
    position: relative;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#131921;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.tb-wishlist-btn:hover{
    background:#F5B51D;
    color:#111;
    transform:scale(1.08);
}

.tb-wishlist-btn.active{
    background:#F5B51D;
    color:#111;
}

.tb-wishlist-btn svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.tb-wishlist-btn.active svg{
    fill:currentColor;
}


/*==================================================
قلب بطاقة المنتج
==================================================*/

.tb-card-heart{

    position:absolute;

    top:12px;
    right:12px !important;
    left:auto !important;

    width:40px;
    height:40px;

    border:none;
    border-radius:50%;

    background:#ffffff;
    color:#8A8A8A;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:all .25s ease;

    z-index:50;

}

.tb-card-heart:hover{

    transform:scale(1.08);
    background:#F5B51D;
    color:#111;

}

.tb-card-heart.active{

    background:#F5B51D;
    color:#111;

}
/*==================================================
TrendBridge Wishlist Drawer
==================================================*/

.tb-wishlist-overlay{

position:fixed;
inset:0;
background:rgba(0,0,0,.45);

opacity:0;
visibility:hidden;

transition:.30s;

z-index:99998;

}

.tb-wishlist-overlay.active{

opacity:1;
visibility:visible;

}

.tb-wishlist-drawer{

position:fixed;

top:0;
right:-430px;

width:420px;
max-width:100%;

height:100vh;

background:#fff;

display:flex;
flex-direction:column;

transition:.35s ease;

box-shadow:-12px 0 40px rgba(0,0,0,.15);

z-index:99999;

}

.tb-wishlist-drawer.active{

right:0;

}

.tb-wishlist-header{

height:72px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 20px;

border-bottom:1px solid #eee;

background:#131921;
color:#fff;

}

.tb-wishlist-header h3{

margin:0;
font-size:20px;

}

.tb-wishlist-close{

width:38px;
height:38px;

border:none;
border-radius:50%;

background:#fff;

cursor:pointer;

font-size:22px;

}

.tb-wishlist-body{

flex:1;

overflow:auto;

padding:20px;

}

.tb-wishlist-empty{

height:100%;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

color:#666;

}

.tb-empty-icon{

font-size:60px;

margin-bottom:18px;

}

.tb-wishlist-item{

display:flex;

gap:12px;

padding:12px 0;

border-bottom:1px solid #eee;

}

.tb-wishlist-item img{

width:72px;
height:72px;

object-fit:cover;

border-radius:12px;

}

.tb-wishlist-info{

flex:1;

}

.tb-wishlist-price{

color:#F5B51D;

font-weight:bold;

margin-top:6px;

}

@media(max-width:768px){

.tb-wishlist-drawer{

width:100%;

}

}
/*==================================================
  TrendBridge Wishlist
  Original Product Cards
==================================================*/

#tb-wishlist-products {
    width: 100%;
    padding: 20px 0 40px;
}

#tb-wishlist-products .ab-pgrid {
    width: 100%;
}

#tb-wishlist-products .ab-pgrid-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

#tb-wishlist-products .tb-wishlist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* صورة المنتج */
#tb-wishlist-products .ab-pgrid-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* الصور */
#tb-wishlist-products .ab-pgrid-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* زر الإزالة */
#tb-wishlist-products .tb-wishlist-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #222;

    font-size: 20px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: 0 3px 12px rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

#tb-wishlist-products .tb-wishlist-remove:hover {
    transform: scale(1.08);
    background: #111;
    color: #fff;
}

/* القلب */
#tb-wishlist-products .tb-card-heart {
    z-index: 10;
}


/*==================================================
  Mobile
==================================================*/

@media (max-width: 768px) {

    #tb-wishlist-products .ab-pgrid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #tb-wishlist-products .ab-pgrid-info {
        padding: 12px;
    }

    #tb-wishlist-products .ab-pgrid-name {
        font-size: 14px;
        min-height: 42px;
    }

    #tb-wishlist-products .ab-pgrid-price {
        font-size: 18px;
    }

}


/*==================================================
  Small Mobile
==================================================*/

@media (max-width: 480px) {

    #tb-wishlist-products .ab-pgrid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #tb-wishlist-products .tb-wishlist-remove {
        width: 28px;
        height: 28px;
        top: 7px;
        right: 7px;
        font-size: 18px;
    }

}

/*==================================================
 * TREND BRIDGE WISHLIST GRID
 *==================================================*/

#tb-wishlist-products {
    width: 100%;
    padding: 20px 0 40px;
    box-sizing: border-box;
}

#tb-wishlist-products .tb-wishlist-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    box-sizing: border-box;
}


/*==================================================
 * WISHLIST CARD
 *==================================================*/

#tb-wishlist-products .tb-wishlist-rendered-card {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


/*==================================================
 * نفس بنية كارت Easy Order
 *==================================================*/

#tb-wishlist-products .tb-wishlist-rendered-card.ab-plist-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/*==================================================
 * PRODUCT MEDIA
 *==================================================*/

#tb-wishlist-products .tb-wishlist-rendered-card .ab-plist-media {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#tb-wishlist-products .tb-wishlist-rendered-card .ab-plist-media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/*==================================================
 * PRODUCT INFO
 *==================================================*/

#tb-wishlist-products .tb-wishlist-rendered-card .ab-plist-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/*==================================================
 * HEART
 *==================================================*/

#tb-wishlist-products .tb-wishlist-rendered-card .tb-card-heart {
    position: absolute;
    top: 12px;
    right: 12px !important;
    left: auto !important;
    z-index: 50;
}


/*==================================================
 * REMOVE BUTTON
 *==================================================*/

#tb-wishlist-products .tb-wishlist-remove {
    position: absolute;
    top: 58px;
    right: 12px;
    z-index: 51;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #222;

    font-size: 20px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: 0 3px 12px rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

#tb-wishlist-products .tb-wishlist-remove:hover {
    transform: scale(1.08);
    background: #111;
    color: #fff;
}


/*==================================================
 * MOBILE
 *==================================================*/

@media (max-width: 768px) {

    #tb-wishlist-products .tb-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

}


/*==================================================
 * SMALL MOBILE
 *==================================================*/

@media (max-width: 480px) {

    #tb-wishlist-products .tb-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #tb-wishlist-products .tb-wishlist-remove {
        width: 28px;
        height: 28px;
        top: 52px;
        right: 7px;
        font-size: 18px;
    }

}
/*==================================================
 * TREND BRIDGE WISHLIST - MOBILE PRODUCT LINK FIX
 * إصلاح تعليق فتح المنتج من المفضلة على الموبايل فقط
 *==================================================*/

@media (max-width: 768px) {

    #tb-wishlist-products
    .tb-wishlist-rendered-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #tb-wishlist-products
    .tb-wishlist-rendered-card .tb-card-heart,
    #tb-wishlist-products
    .tb-wishlist-rendered-card .tb-wishlist-remove {
        touch-action: manipulation;
    }

}
/*==================================================
  TrendBridge Wishlist
  Product Link
  ==================================================*/

#tb-wishlist-products
.tb-wishlist-product-link {
    display:block;
    width:100%;
    color:inherit;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

#tb-wishlist-products
.tb-wishlist-product-link:active {
    opacity:.96;
}


/* منع الأزرار من التأثر برابط المنتج */

#tb-wishlist-products
.tb-card-heart,
#tb-wishlist-products
.tb-wishlist-remove {
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}