/*==================================================
 TrendBridge Premium Buy Box v3
==================================================*/

:root{
    --tb-primary:#F5B51D;
    --tb-primary-dark:#E3A300;
    --tb-black:#111111;
    --tb-white:#ffffff;
    --tb-gray:#6B7280;
    --tb-border:#ECECEC;
    --tb-bg:#FAFAFA;
    --tb-radius:22px;
    --tb-shadow:0 18px 45px rgba(0,0,0,.08);
}

/*=========================
 Buy Box
=========================*/

.tb-buybox,
.ab-fixed-buy{

    background:#fff;
    border:1px solid var(--tb-border);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--tb-shadow);
    transition:.35s ease;
    overflow:hidden;
    position:sticky;
    top:95px;

}

.tb-buybox:hover,
.ab-fixed-buy:hover{

    transform:translateY(-4px);
    box-shadow:0 28px 55px rgba(0,0,0,.12);

}

/*=========================
 Price
=========================*/

.tb-buybox-price{

    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;

}

.tb-buybox-price-current,
.ab-fixed-buy-price{

    font-size:38px;
    font-weight:900;
    color:var(--tb-black);
    line-height:1;

}

.tb-buybox-price-old,
.ab-fixed-buy-price-old{

    font-size:19px;
    color:#999;
    text-decoration:line-through;

}

.tb-buybox-discount{

    background:linear-gradient(135deg,#F5B51D,#FFD85D);
    color:#111;
    padding:8px 15px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;

}

/*=========================
 Quantity
=========================*/

.ab-fixed-buy-qty{

    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid #ECECEC;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    margin-bottom:18px;

}

.ab-fixed-buy-qty button,
.ab-fixed-buy-qty-btn{

    width:44px;
    height:44px;
    border:none;
    background:#fff;
    cursor:pointer;
    transition:.25s;

}

.ab-fixed-buy-qty button:hover,
.ab-fixed-buy-qty-btn:hover{

    background:#F5B51D;
    color:#111;

}

/*=========================
 Button
=========================*/

.tb-buybox-button,
.ab-fixed-buy-btn{

    width:100%;
    height:60px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#111,#2B2B2B);
    color:#fff;
    font-size:19px;
    font-weight:900;
    cursor:pointer;
    transition:.35s;
    position:relative;
    overflow:hidden;

}

.tb-buybox-button:before,
.ab-fixed-buy-btn:before{

    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transform:skewX(-20deg);
    transition:.8s;

}

.tb-buybox-button:hover,
.ab-fixed-buy-btn:hover{

    transform:translateY(-3px);
    box-shadow:0 22px 45px rgba(0,0,0,.20);

}

.tb-buybox-button:hover:before,
.ab-fixed-buy-btn:hover:before{

    left:180%;

}

/*=========================
 Trust Cards
=========================*/

.tb-buy-trust{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:20px;

}

.tb-trust-card{

    background:#FAFAFA;
    border:1px solid #ECECEC;
    border-radius:16px;
    padding:14px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    transition:.3s;

}

.tb-trust-card:hover{

    transform:translateY(-5px);
    border-color:#F5B51D;
    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

/*=========================
 Live Visitors
=========================*/

.tb-live-item{

    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    border-radius:16px;
    background:#FFF8E7;
    color:#111;
    font-weight:700;
    margin-bottom:15px;

}

.tb-live-item::before{

    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#27AE60;
    animation:tbPulse 1.4s infinite;

}

@keyframes tbPulse{

0%{
transform:scale(.7);
opacity:.5;
}

70%{
transform:scale(1.4);
opacity:1;
}

100%{
transform:scale(.7);
opacity:.5;
}

}

/*=========================
 Free Shipping
=========================*/

.tb-free-shipping{

    margin-top:15px;
    padding:15px;
    border-radius:16px;
    background:#EEF9F0;
    color:#15803D;
    font-weight:800;
    text-align:center;

}

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

@media(max-width:768px){

.tb-buybox,
.ab-fixed-buy{

    position:static;
    padding:18px;
    border-radius:18px;

}

.tb-buybox-price-current,
.ab-fixed-buy-price{

    font-size:30px;

}

.tb-buybox-button,
.ab-fixed-buy-btn{

    height:56px;
    font-size:18px;

}

.tb-buy-trust{

    grid-template-columns:1fr;

}

}
/*==================================================
 TrendBridge Premium Buy Button
==================================================*/

.checkout_btn{

width:100%!important;
height:62px!important;

display:flex!important;
align-items:center;
justify-content:center;
gap:12px;

border:none!important;
border-radius:18px!important;

background:linear-gradient(135deg,#111111,#2C2C2C)!important;

color:#fff!important;

font-size:19px!important;
font-weight:900!important;

letter-spacing:.3px;

cursor:pointer;

position:relative;
overflow:hidden;

transition:.35s ease;

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

}

/* لمعان متحرك */

.checkout_btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:55%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transform:skewX(-20deg);

transition:.8s;

}

/* Hover */

.checkout_btn:hover{

transform:translateY(-4px);

box-shadow:
0 28px 55px rgba(0,0,0,.25);

}

.checkout_btn:hover::before{

left:180%;

}

/* Click */

.checkout_btn:active{

transform:scale(.97);

}

/* أيقونة السهم */

.checkout_btn::after{

content:"➜";

font-size:20px;

margin-right:8px;

transition:.35s;

}

.checkout_btn:hover::after{

transform:translateX(-6px);

}

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

@media(max-width:768px){

.checkout_btn{

height:58px!important;

font-size:18px!important;

border-radius:16px!important;

}

}
/*==================================================
TrendBridge Trust Area
==================================================*/

.tb-trust{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

margin-top:18px;

}

.tb-trust-card{

display:flex;

align-items:center;

gap:12px;

padding:14px;

background:#fff;

border:1px solid #ECECEC;

border-radius:16px;

transition:.35s;

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

}

.tb-trust-card:hover{

transform:translateY(-4px);

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

border-color:#F5B51D;

}

.tb-trust-icon{

width:42px;
height:42px;

border-radius:12px;

background:#F5B51D;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

flex-shrink:0;

}

.tb-trust-text{

display:flex;

flex-direction:column;

}

.tb-trust-title{

font-size:15px;

font-weight:800;

color:#111;

}

.tb-trust-desc{

font-size:13px;

color:#777;

margin-top:2px;

}

@media(max-width:768px){

.tb-trust{

grid-template-columns:1fr;

gap:10px;

}

.tb-trust-card{

padding:12px;

}

}
/*=====================================
TrendBridge Social Proof
======================================*/

.tb-social-proof{

margin-top:18px;

padding:16px;

background:linear-gradient(135deg,#FFF8E8,#FFFFFF);

border:1px solid #F5E2A6;

border-radius:18px;

display:flex;

align-items:center;

gap:14px;

}

.tb-social-proof-icon{

width:48px;
height:48px;

border-radius:50%;

background:#F5B51D;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

animation:tbPulse 2s infinite;

}

.tb-social-proof strong{

display:block;

font-size:15px;

color:#111;

}

.tb-social-proof span{

display:block;

font-size:13px;

color:#666;

margin-top:3px;

}

@keyframes tbPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}
}
/*======================================
TrendBridge Premium Buy Header
======================================*/

.tb-buy-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.tb-best-seller{

display:flex;
align-items:center;
gap:8px;

padding:8px 14px;

background:linear-gradient(135deg,#111,#2D2D2D);

color:#fff;

border-radius:999px;

font-size:13px;

font-weight:800;

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

}

.tb-best-seller span{

font-size:17px;

}

.tb-rating{

display:flex;
align-items:center;
gap:8px;

font-weight:800;

color:#111;

}

.tb-rating-stars{

color:#F5B51D;

font-size:16px;

letter-spacing:1px;

}

.tb-buy-info{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:18px;

animation:tbFade .6s ease;

}

.tb-buy-info>*{

animation:tbUp .5s ease;

}

@keyframes tbFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes tbUp{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*======================================
TrendBridge Live Stats
======================================*/

.tb-buy-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

margin:18px 0;

}

.tb-buy-stat{

background:#fff;

border:1px solid #ECECEC;

border-radius:16px;

padding:14px 10px;

text-align:center;

transition:.3s;

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

}

.tb-buy-stat:hover{

transform:translateY(-4px);

border-color:#F5B51D;

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

}

.tb-buy-stat-number{

display:block;

font-size:24px;

font-weight:900;

color:#111;

margin-bottom:4px;

}

.tb-buy-stat-label{

font-size:12px;

color:#777;

font-weight:700;

}

@media(max-width:768px){

.tb-buy-stats{

grid-template-columns:1fr 1fr 1fr;

gap:8px;

}

.tb-buy-stat{

padding:12px 8px;

}

.tb-buy-stat-number{

font-size:20px;

}

}
/*======================================
TrendBridge Guarantee Strip
======================================*/

.tb-guarantee{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

margin-top:18px;

padding:16px;

border-radius:18px;

background:linear-gradient(135deg,#FFFDF7,#FFF6D9);

border:1px solid #F5E2A6;

}

.tb-guarantee-item{

flex:1;

text-align:center;

}

.tb-guarantee-icon{

font-size:26px;

display:block;

margin-bottom:8px;

}

.tb-guarantee-title{

font-size:14px;

font-weight:800;

color:#111;

}

.tb-guarantee-desc{

font-size:12px;

color:#666;

margin-top:3px;

}

@media(max-width:768px){

.tb-guarantee{

display:grid;

grid-template-columns:1fr;

gap:12px;

padding:14px;

}

}
/*======================================
TrendBridge Info Slider
======================================*/

.tb-info-slider{

position:relative;

height:52px;

overflow:hidden;

border-radius:16px;

background:#111;

color:#fff;

margin:18px 0;

}

.tb-info-item{

position:absolute;

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

font-size:14px;

font-weight:700;

opacity:0;

transform:translateY(20px);

transition:.45s;

}

.tb-info-item.active{

opacity:1;

transform:translateY(0);

}

.tb-info-item span{

font-size:18px;

color:#F5B51D;

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

.ab-pd{
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:24px;
    padding:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.ab-pd:hover{
    transform:translateY(-4px);
    box-shadow:0 25px 55px rgba(0,0,0,.10);
}

.ab-pd-name{
    font-size:34px!important;
    font-weight:900!important;
    color:#111;
    line-height:1.35;
    margin:10px 0 18px;
}

.ab-pd-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
}

.ab-pd-price-sale{
    font-size:38px!important;
    font-weight:900!important;
    color:#111;
}

.ab-pd-price-old{
    color:#8b8b8b!important;
    font-size:20px!important;
    text-decoration:line-through;
}

.ab-pd-discount-badge{
    background:linear-gradient(135deg,#F5B51D,#FFD95C);
    color:#111;
    font-weight:800;
    border-radius:999px;
    padding:8px 16px;
    box-shadow:0 8px 20px rgba(245,181,29,.25);
}

.headlessui-listbox-button{
    border-radius:16px!important;
    border:1px solid #ECECEC!important;
    transition:.3s;
}

.headlessui-listbox-button:hover{
    border-color:#F5B51D!important;
    box-shadow:0 10px 25px rgba(245,181,29,.15);
}

@media(max-width:768px){

.ab-pd{
    padding:18px;
    border-radius:18px;
}

.ab-pd-name{
    font-size:27px!important;
}

.ab-pd-price-sale{
    font-size:30px!important;
}

.ab-pd-price-old{
    font-size:17px!important;
}

.ab-pd-price-row{
    gap:8px;
}

}
/*==================================================
TrendBridge Mobile Sticky Buy Bar
==================================================*/

.tb-mobile-buybar{

position:fixed;

left:0;

right:0;

bottom:0;

z-index:99999;

display:none;

align-items:center;

justify-content:space-between;

gap:14px;

padding:12px 16px;

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

backdrop-filter:blur(18px);

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

border-top:1px solid rgba(0,0,0,.08);

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

padding-bottom:calc(12px + env(safe-area-inset-bottom));

animation:tbBuySlide .35s ease;

}

.tb-mobile-price{

display:flex;

flex-direction:column;

}

.tb-mobile-price strong{

font-size:24px;

font-weight:900;

color:#111;

line-height:1;

}

.tb-mobile-price span{

font-size:13px;

color:#666;

margin-top:4px;

}

.tb-mobile-btn{

flex:1;

height:54px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#111,#2d2d2d);

color:#fff;

font-size:17px;

font-weight:900;

cursor:pointer;

transition:.3s;

}

.tb-mobile-btn:hover{

background:linear-gradient(135deg,#F5B51D,#FFD95C);

color:#111;

}

@keyframes tbBuySlide{

from{

transform:translateY(100%);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

@media(max-width:768px){

.tb-mobile-buybar{

display:flex;

}

body{

padding-bottom:95px;

}

}
/*==================================================
TrendBridge Premium Add To Cart
==================================================*/

.add_to_cart_btn{

height:60px!important;

border:2px solid #111!important;

border-radius:18px!important;

background:#fff!important;

color:#111!important;

font-size:18px!important;

font-weight:900!important;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.06);

display:flex!important;

align-items:center;

justify-content:center;

gap:10px;

}

.add_to_cart_btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transform:skewX(-20deg);

transition:.8s;

}

.add_to_cart_btn::after{

content:"🛒";

font-size:18px;

transition:.35s;

}

.add_to_cart_btn:hover{

background:#111!important;

color:#fff!important;

transform:translateY(-3px);

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

}

.add_to_cart_btn:hover::before{

left:180%;

}

.add_to_cart_btn:hover::after{

transform:rotate(-12deg) scale(1.15);

}

.add_to_cart_btn:active{

transform:scale(.97);

}

@media(max-width:768px){

.add_to_cart_btn{

height:56px!important;

font-size:17px!important;

border-radius:16px!important;

}

}
/*==================================================
TrendBridge Reviews V4
==================================================*/

.ab-reviews{

background:#fff;

border:1px solid #ECECEC;

border-radius:24px;

padding:26px;

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

}

.ab-reviews-header{

border-bottom:1px solid #F3F4F6;

padding-bottom:20px;

margin-bottom:24px;

}

.ab-reviews-title{

font-size:30px!important;

font-weight:900!important;

color:#111;

margin-bottom:8px;

}

.ab-reviews-summary{

display:flex;

align-items:center;

justify-content:space-between;

flex-wrap:wrap;

gap:18px;

}

.ab-reviews-rating-display{

font-size:52px!important;

font-weight:900!important;

color:#111;

line-height:1;

}

.ab-reviews-count{

font-size:15px;

font-weight:700;

color:#6B7280;

}

.ab-reviews-avg-stars{

display:flex;

gap:4px;

font-size:24px;

color:#F5B51D;

}

.ab-reviews-write-btn{

height:52px;

padding:0 24px;

border:none;

border-radius:16px;

background:#111;

color:#fff;

font-weight:800;

transition:.3s;

}

.ab-reviews-write-btn:hover{

background:#F5B51D;

color:#111;

transform:translateY(-2px);

}

.ab-reviews-list{

display:grid;

gap:18px;

}

.ab-review-card{

background:#FAFAFA;

border:1px solid #ECECEC;

border-radius:18px;

padding:18px;

transition:.3s;

}

.ab-review-card:hover{

transform:translateY(-4px);

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

}

.ab-review-author{

font-weight:800;

color:#111;

margin-bottom:8px;

}

.ab-review-stars{

color:#F5B51D;

margin-bottom:10px;

}

.ab-review-text{

color:#555;

line-height:1.9;

}

@media(max-width:768px){

.ab-reviews{

padding:18px;

border-radius:18px;

}

.ab-reviews-title{

font-size:24px!important;

}

.ab-reviews-rating-display{

font-size:40px!important;

}

}
/*==================================================
TrendBridge Related Products V4
==================================================*/

.related-products,
.ab-related-products{

margin-top:50px;

}

.related-products-title,
.ab-related-title{

font-size:34px;

font-weight:900;

text-align:center;

margin-bottom:28px;

color:#111;

}

.related-products-grid,
.ab-related-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:24px;

}

.related-product-card,
.ab-related-card{

background:#fff;

border:1px solid #ECECEC;

border-radius:22px;

overflow:hidden;

transition:.35s;

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

}

.related-product-card:hover,
.ab-related-card:hover{

transform:translateY(-8px);

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

}

.related-product-card img,
.ab-related-card img{

width:100%;

aspect-ratio:1;

object-fit:cover;

transition:.4s;

}

.related-product-card:hover img,
.ab-related-card:hover img{

transform:scale(1.06);

}

.related-product-content,
.ab-related-content{

padding:18px;

}

.related-product-name,
.ab-related-name{

font-size:18px;

font-weight:800;

color:#111;

margin-bottom:10px;

line-height:1.5;

}

.related-product-price,
.ab-related-price{

font-size:24px;

font-weight:900;

margin-bottom:14px;

color:#111;

}

.related-product-btn,
.ab-related-btn{

width:100%;

height:48px;

border:none;

border-radius:14px;

background:#111;

color:#fff;

font-weight:800;

cursor:pointer;

transition:.3s;

}

.related-product-btn:hover,
.ab-related-btn:hover{

background:#F5B51D;

color:#111;

}

@media(max-width:768px){

.related-products-grid,
.ab-related-grid{

display:flex;

overflow-x:auto;

gap:16px;

padding-bottom:10px;

scroll-snap-type:x mandatory;

}

.related-product-card,
.ab-related-card{

min-width:240px;

scroll-snap-align:start;

}

}