@font-face{
font-family:'';
src:url('/public/fonts/') format('woff2');
font-weight:normal;
font-style:normal;
}

body,
.assembly-row,
.selected-product,
.assembly-modal,
.assembly-modal-content,
button,
input,
select,
label,
h1,
h2,
h3,
h4,
p,
span{
font-family:'',sans-serif !important;

}

h1{
font-size:36px;
font-weight:700;
margin-bottom:25px;
}

h2{
font-size:28px;
font-weight:700;
}

h3{
font-size:22px;
font-weight:600;
}

h4{
font-size:18px;
font-weight:600;
}

p,
span,
label{
font-size:16px;
line-height:1.9;
}

.open-modal-btn{
font-size:15px;
font-weight:600;
padding:12px 24px;
}

.selected-actions button{
font-size:14px;
font-weight:600;
padding:10px 18px;
}

.option-item{
font-size:17px;
font-weight:500;
}

#total{
font-size:32px;
font-weight:700;
color:var(--text);
}

.assembly-row{
padding:22px;
border-radius:14px;
background:var(--card);
border:1px solid rgba(212,175,55,.15);
}

.selected-product{
padding:20px;
font-size:20px;
background:#161616;
border:1px solid rgba(212,175,55,.15);
}

.assembly-options{
padding:25px;
}

.assembly-modal-content{
font-size:20px;
}

#assemblySearch,
#assemblySort{
font-family:'Avang',sans-serif;
font-size:15px;
padding:12px;
border-radius:10px;
}

    body{
background:#0f0f0f;
color:var(--text);
}

main{
background:#0f0f0f;
color:var(--text);
}

.container{
color:var(--text);
}

.assembly-options{
background:var(--card);
padding:20px;
border-radius:12px;
margin:25px 0;
border:1px solid rgba(212,175,55,.15);
}

.option-item{
display:block;
margin:15px 0;
cursor:pointer;
font-size:15px;
}

.option-item input{
margin-left:8px;
accent-color:var(--gold);
}

.modal-product{
    display:grid;
grid-template-columns:120px 1fr auto;
gap:20px;
align-items:center;

background:var(--card);
padding:20px;
border-radius:18px;
margin-bottom:15px;

border:1px solid rgba(212,175,55,.12);

transition:.3s;
}

.modal-product:hover{
transform:translateY(-3px);
border-color:var(--gold);
box-shadow:
0 10px 25px rgba(212,175,55,.12);
}

.product-image{
width:120px;
height:120px;
}

.product-image img{
width:100%;
height:100%;
object-fit:contain;
border-radius:12px;
}

.product-info h4{
margin-bottom:10px;
color:var(--text);
}

.product-info p{
color:var(--gold);
font-size:18px;
font-weight:700;
}

 
 .total-box{
position:sticky;
bottom:20px;

background:var(--gold);
color:#111;

padding:20px;
border-radius:15px;

font-size:24px;
font-weight:900;

text-align:center;

margin-top:30px;
}

.selected-card{
display:grid;
grid-template-columns:100px 1fr auto;
gap:20px;
align-items:center;
}

.selected-info{
flex:1;
}

.selected-info h4{
margin:0 0 10px;
}

.selected-actions{
display:flex;
gap:10px;
}

.selected-actions button{
padding:8px 14px;
cursor:pointer;
border:none;
border-radius:6px;
}

.assembly-layout{
display:flex;
gap:20px;
}

.assembly-sidebar{
width:260px;

position:sticky;

top:20px;

height:max-content;

background:var(--card);

padding:20px;

border-radius:15px;

border:1px solid rgba(212,175,55,.15);
}

.assembly-content{
flex:1;
}

.brand-item{
margin-bottom:10px;
}

.assembly-row{
display:flex;
justify-content:space-between;
align-items:center;

background:var(--card);

padding:20px;

border-radius:15px;

margin-bottom:15px;

border:1px solid rgba(212,175,55,.1);

transition:.3s;
}

.assembly-row:hover{
border-color:var(--gold);
transform:translateY(-2px);
}

.open-modal-btn{
background:var(--gold);
color:#000;

border:none;

padding:12px 20px;

font-weight:700;

border-radius:10px;

cursor:pointer;
}

.selected-product{
background:var(--card);

border:1px solid rgba(212,175,55,.1);

border-radius:15px;

padding:20px;

margin-bottom:25px;
}


.assembly-modal{
    inset:0;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
z-index:9999;
}

.assembly-modal-content{
background:var(--card);

color:var(--text);

width:95%;
max-width:1400px;

height:85vh;

margin:30px auto;

padding:25px;

overflow:auto;

border-radius:20px;

border:1px solid rgba(212,175,55,.15);
}
.assembly-modal-content{
border:1px solid rgba(212,175,55,.15);
}

#closeModal{
cursor:pointer;
font-size:25px;
float:left;
}

.assembly-container{
max-width:1400px;
margin:40px auto;
padding:0 20px;
}

.assembly-header{
background:var(--card);
padding:30px;
border-radius:20px;
margin-bottom:30px;
border:1px solid rgba(212,175,55,.15);
}

.assembly-header h1{
margin:0 0 10px;
color:var(--gold);
}

.assembly-header p{
margin:0;
color:var(--text2);
}

.assembly-total{
position:sticky;

bottom:20px;

background:var(--gold);

color:#000;

padding:25px;

border-radius:15px;

font-size:24px;

font-weight:900;

display:flex;
justify-content:space-between;

margin-top:30px;
}

#saveAssembly{
background:#ff6700;
color:var(--text);
border:none;
padding:15px 30px;
border-radius:10px;
font-size:18px;
cursor:pointer;
margin-top:20px;
}

body{
direction:rtl;
text-align:right;
}

.assembly-container{
direction:rtl;
}

.assembly-row{
flex-direction:row;
}

.selected-card{
flex-direction:row;
}

.modal-product{
flex-direction:row;
}

.assembly-layout{
flex-direction:row;
}

.assembly-total{
direction:rtl;
}

.selected-info,
.product-info,
.assembly-header,
.assembly-sidebar,
.assembly-content{
text-align:right;
}

.selected-actions,
.product-actions{
display:flex;
justify-content:flex-start;
}

#closeModal{
float:right;
}

.option-item input{
margin-right:0;
margin-left:10px;
}

.assembly-sidebar{
border-left:none;
border-right:1px solid rgba(212,175,55,.15);
padding-left:0;
padding-right:20px;
}

.selected-card img{
width:90px;
height:90px;
object-fit:contain;
}

.modal-product,
.selected-card{
display:flex;
align-items:center;
justify-content:space-between;
direction:rtl;
}

.modal-product img,
.selected-card img{
margin-left:15px;
margin-right:0;
}

.assembly-row{
display:flex;
justify-content:space-between;
align-items:center;
}

.assembly-row h3{
margin:0;
}

.open-modal-btn{
order:-1;
}

.assembly-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
margin:50px auto 30px;
flex-wrap:wrap;
}

#saveAssembly,
#addAssemblyToCart{

position:relative;

border:none;

padding:16px 35px;

border-radius:15px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.35s ease;

overflow:hidden;

}

#saveAssembly{

background:var(--card);

color:var(--gold);

border:1px solid rgba(212,175,55,.3);

box-shadow:
0 0 20px rgba(212,175,55,.08);
}

#addAssemblyToCart{

background:var(--gold);

color:#111;

box-shadow:
0 0 25px rgba(212,175,55,.25);
}

#saveAssembly:hover{

transform:translateY(-4px);

border-color:var(--gold);

box-shadow:
0 10px 30px rgba(212,175,55,.2);
}

#addAssemblyToCart:hover{

transform:translateY(-4px);

box-shadow:
0 12px 35px rgba(212,175,55,.45);
}

#saveAssembly::before,
#addAssemblyToCart::before{

content:'';

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

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

transition:.6s;
}

#saveAssembly:hover::before,
#addAssemblyToCart:hover::before{

left:120%;
}

#saveAssembly:active,
#addAssemblyToCart:active{

transform:scale(.97);
}

.assembly-sidebar h3{
color:var(--gold);
margin-bottom:20px;
font-size:22px;
}

.brand-item{
padding:10px;
border-radius:10px;
transition:.3s;
margin-bottom:8px;
}

.brand-item:hover{
background:#222;
}

.brand-item label{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
}

.brand-item input{
accent-color:var(--gold);
transform:scale(1.2);
}

.product-actions{
display:flex;
gap:10px;
}

.product-actions button{

border:none;

padding:10px 18px;

border-radius:10px;

cursor:pointer;

font-weight:700;

transition:.3s;
}

.product-actions button:first-child{

background:#232323;

color:var(--text);
}

.product-actions button:last-child{

background:var(--gold);

color:#111;
}

.product-actions button:hover{
transform:translateY(-2px);
}


.product-popup{
display:flex;
gap:40px;
align-items:flex-start;
}

.popup-image img{

width:350px;

border-radius:20px;

border:1px solid rgba(212,175,55,.2);
}

.popup-details{
flex:1;
}

.popup-details h2{
color:var(--gold);
margin-bottom:20px;
}

.popup-price{

font-size:32px;

font-weight:900;

color:var(--text);

margin-bottom:25px;
}

.popup-meta{

display:flex;

gap:30px;

margin-bottom:25px;

color:var(--text2);
}

.popup-description{

background:#111;

padding:20px;

border-radius:15px;

margin-bottom:20px;
}

.popup-specs{

background:#111;

padding:20px;

border-radius:15px;

line-height:2;
}