:root {
    --primary-color: #0865FF !important;
    --second-color: #2E7DFF !important;
    --tree-color: #FFA700 !important;
}
@font-face {
font-family: 'Num-Medium';
src: url('../fonts/Num-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Num-Light';
src: url('../fonts/Num-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
font-family: Num-Light, sans-serif;
background-color: #f4f6f8; /* تم روشن */
}

/* نوار ابزار اصلی */
.preview-header {
position: fixed;
top: 0; left: 0; right: 0;
height: 80px;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
z-index: 1000;
transition: transform 0.3s ease-in-out;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* دکمه کشویی مخفی/ظاهر کردن نوار */
.toggle-bar-btn {
position: fixed;
top: 80px;
left: 40px;
transform: translateX(-50%);
background: #ffffff;
color: #64748b;
border: 1px solid #e2e8f0;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 5px 15px;
cursor: pointer;
z-index: 999;
transition: top 0.3s ease-in-out, background 0.3s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
z-index: 9999;
}
.toggle-bar-btn:hover {  color: var(--primary-color); }
.toggle-bar-btn svg { transition: transform 0.3s ease; }

body.bar-hidden .preview-header { transform: translateY(-100%); }
body.bar-hidden .toggle-bar-btn { top: 0; }
body.bar-hidden .toggle-bar-btn svg { transform: rotate(180deg); }
body.bar-hidden .iframe-wrapper { padding-top: 0; }

/* استایل بخش‌های داخل نوار */
.brand-section a {
color: #475569; text-decoration: none; font-size: 16px;
display: flex; align-items: center; gap: 8px; font-weight: normal;
}
.brand-section a:hover { color: #0f172a; }

.responsive-switcher {
display: flex;
background: #f9fafb;
padding: 8px 12px;
border-radius: 8px;
gap: 12px;
align-items: center;
margin-left: -200px;
}

.responsive-switcher button{
padding: 0;
position: relative;
background: transparent;
border: none;
}       

.responsive-switcher button i{
background: #fff;
color: #999;
width: 45px;
height: 45px;
cursor: pointer;
border-radius: 6px;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
border: none !important;
}
.responsive-switcher button:hover i {color: #fff; background: var(--primary-color); border-color: var(--primary-color);}

/* استایل فعال دکمه (پس زمینه سبز) */
.responsive-switcher button.active i {color: #fff; background: var(--primary-color); border-color: var(--primary-color);  }

/* تولتیپ سفارشی برای ایکن‌ها */
.responsive-switcher button::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: #334155;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-family: Num-Medium, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
pointer-events: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.responsive-switcher button::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent #334155 transparent;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
pointer-events: none;
}
.responsive-switcher button:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(8px);
}
.responsive-switcher button:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
}

.action-section { display: flex; align-items: center; gap: 10px; }

/* دکمه خرید */
.btn-buy-now {
background-color: var(--primary-color); color: #fff; text-decoration: none;
padding: 15px 20px; border-radius: 6px; font-size: 16px;
display: flex; align-items: center; gap: 6px; transition: 0.3s;
font-family: Num-Medium;
font-weight: normal;
}
.btn-buy-now:hover { background: var(--second-color); }

/* دکمه محصولات پیشنهادی */
.btn-suggested {
background-color: #f9fafb; color: #888; 
padding: 15px 20px; border-radius: 6px; font-size: 16px; cursor: pointer;
display: flex; align-items: center; gap: 5px; transition: 0.3s; 
font-family: Num-Medium;
border: none !important;
font-weight: normal;
}
.btn-suggested:hover { background: #fff4eb;
color: #ff9b00;}

/* دراپ داون (تمام عرض و افقی با افکت کشویی) */
.suggested-dropdown {
position: fixed; 
top: 80px; 
left: 0; 
right: 0;
background: #f9fafb; 
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
display: flex; /* همیشه فلکس است اما با visibility مخفی می‌شود */
justify-content: center;
flex-wrap: wrap;
gap: 20px; 
padding: 25px;
max-height: calc(100vh - 60px); 
overflow-y: auto; 
z-index: 998;

/* تنظیمات افکت انیمیشن */
visibility: hidden;
opacity: 0;
transform: translateY(-20px);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* افکت نرم */
}

.suggested-dropdown.show { 
visibility: visible;
opacity: 1;
transform: translateY(0);
}

.suggested-item { 
display: flex; 
flex-direction: column;
width: 260px; 
background: #fff;
border-radius: 8px;
overflow: hidden;
transition: 0.3s;
padding: 10px;
}
.item-img { width: 100%; height: 260px;  }
.item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}

.item-details {  display: flex; flex-direction: column; flex-grow: 1; }
.item-details h4 { margin: 10px 0; font-size: 16px; color: #444; line-height: 1.5; height:auto; overflow: hidden; font-family: Num-Medium;font-weight: normal;}
.item-details .price { font-size: 16px; color: var(--primary-color); font-weight: normal; margin-bottom: 15px; text-align: right;font-family: Num-Medium;}

.item-actions { display: flex; gap: 8px; margin-top: auto; }
.btn-sm { padding: 10px 10px; border-radius: 4px; font-size: 14px; text-decoration: none; text-align: center; flex: 1; transition: 0.2s; font-family: Num-Medium;color: #fff;}
.btn-sm.btn-buy { background: var(--primary-color);   }
.btn-sm.btn-buy:hover {    opacity: 0.8;}
.btn-sm.btn-preview {
background: #f3f6f8;
color: #8c8c8c;
}
.btn-sm.btn-preview:hover {  opacity: 0.8;}

/* محفظه آی‌فریم */
.iframe-wrapper {
height: 100vh; width: 100%; display: flex; justify-content: center;
align-items: center; padding-top: 80px; box-sizing: border-box;
transition: padding-top 0.3s ease-in-out;
}
#main-iframe {
width: 100%; height: 100%; border: none; background: #fff;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* شبیه‌ساز دستگاه‌ها */
.view-laptop #main-iframe {
width: 1024px; height: 95%; max-height: 1200px;
border: 10px solid #cbd5e1; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.view-tablet #main-iframe {
width: 768px; height: 95%; max-height: 1024px;
border: 12px solid #cbd5e1; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.view-mobile #main-iframe {
width: 375px; height: 90%; max-height: 812px;
border:8px solid #ddd; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* افکت چرخش نرم برای آیکن فلش دکمه محصولات مشابه */
.btn-suggested svg:last-child {
transition: transform 0.3s ease;
}
/* چرخیدن آیکن زمانی که دکمه کلاس open می‌گیرد */
.btn-suggested.open svg:last-child {
transform: rotate(180deg);
}		



/* ابزار زوم پیشرفته */
.zoom-controls {
display: flex; background: #f9fafb; padding: 8px 12px; border-radius: 8px; gap: 10px;
align-items: center; 
}

.zoom-controls button{
padding:0;
position: relative;
background: transparent;
border: none;
}        

.zoom-controls button i{
background: #fff;  color: #888;
width: 45px; height: 45px; cursor: pointer;
border-radius: 6px; transition: 0.3s;
display: flex; align-items: center; justify-content: center;
border: none !important;
}
.zoom-controls button:hover i { 
color: #fff; background: var(--primary-color); border-color: var(--primary-color);
}

/* تولتیپ ابزار زوم */
.zoom-controls button::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: #334155;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-family: Num-Medium, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
pointer-events: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.zoom-controls button::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(5px);
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: transparent transparent #334155 transparent;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
pointer-events: none;
}
.zoom-controls button:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(8px);
}
.zoom-controls button:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(4px);
}

.zoom-level {
font-family: Num-Medium, sans-serif; font-size: 15px; color: #334155;
min-width: 55px; text-align: center; direction: ltr;
}

/* شمارنده تصاویر */
.image-counter {
background: #fff;
color: #64748b;
height: 45px;
padding: 0 15px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family: Num-Medium, sans-serif;
font-size: 14px;
white-space: nowrap;
margin-right: 5px;
}

/* محوطه نمایش تصاویر با قابلیت درگ و اسکرول */
.main-area {
height: 100vh; width: 100%; box-sizing: border-box;
padding-top: 80px; 
overflow: auto; 
transition: padding-top 0.3s ease-in-out;
cursor: grab; 
display: flex;
justify-content: center;
align-items: flex-start;
}
.main-area:active { cursor: grabbing; }

.main-area::-webkit-scrollbar { width: 10px; height: 10px; }
.main-area::-webkit-scrollbar-track { background: #f1f1f1; }
.main-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.main-area::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ====== فقط بخش دکمه‌های پیمایش ====== */
.gallery-nav{
position: fixed;
right: 25px;
bottom: 30px;
display: flex;
flex-direction: column;
gap:10px;
z-index:9999;
}
.gallery-nav button{
padding:0;
}


.gallery-nav button i{
width:50px;
height:50px;
line-height: 50px;
border:none;
border-radius:8px;
background:#fff;
color:#444;
font-size:20px;
cursor:pointer;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
transition:0.2s;
}
.gallery-nav button i:hover{
background:var(--primary-color);
color:#fff;
}
/* کانتینر تصاویر */
.gallery-container {
width: 100%;
max-width: 1300px;
display: flex;
flex-direction: column;
transition: width 0.2s ease-out;
margin: 20px auto;
overflow: hidden;
}

.image-wrapper {
display: flex;
flex-direction: column;
width: 98%;
margin: 10px 0;
border:2px solid #f4f6f8;
}
.image-wrapper:hover{
border:2px solid #ddd;
}
.image-wrapper:last-child {
border-bottom: none;
}

.gallery-container img {
width: 100%;
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none; 
pointer-events: none;
}

/* استایل عنوان تصویر */
.image-caption {
width: 100%;
box-sizing: border-box;
padding: 15px 20px;
background-color: #fff;
color: #444;
font-family: Num-Medium, tahoma, sans-serif;
font-size: 16px;
text-align: center;
}

.no-image-msg { text-align: center; padding: 50px; color: #64748b; font-size: 18px; }

/* ====== Laptop ====== */
@media screen and (max-width:1200px){

.brand-section {
display: none !important;
}
}



@media screen and (max-width: 800px) {
.preview-header { padding: 0 10px; }

.preview-header { padding: 0 10px; }
.suggested-item { width: calc(50% - 10px); }
}
@media screen and (max-width:576px){
.responsive-switcher {
margin-left: 0 !important;
}
.suggested-item { width: 100%; }

.btn-suggested {
display: none !important;
}
.image-counter { display: none; }
}	


@media screen and (max-width:420px){
.brand-section span, .btn-buy-now span, .btn-suggested span { display: none; }

}	


/* انیمیشن چرخش آیکون دکمه تغییر وضعیت نوار */
.toggle-bar-btn i {
transition: transform 0.3s ease;
}
body.bar-hidden .toggle-bar-btn i {
transform: rotate(180deg);
}