/* ================================
RESET
================================ */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:semi;
background:#fff;
direction:rtl;
}

img{
max-width:100%;
display:block;
}

/* ================================
LAYOUT
================================ */

.apartment{

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

margin:40px auto;

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

align-items:start;

}

/* ================================
MAIN SLIDER
================================ */

.all-picture{

position:relative;

width:100%;

aspect-ratio:1/1;

overflow:hidden;

border-radius:10px;

background:#000;

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

display:flex;

align-items:center;

justify-content:center;

}

/* اسلایدها */

.slide{

display:none;

width:100%;

height:100%;

object-fit:cover;

}

/* اسلاید فعال */

.slide.active{

display:block;

}

/* indicators */

.indicators{

position:absolute;

bottom:12px;

left:0;

right:0;

display:flex;

justify-content:center;

gap:6px;

}

.indicators span{

width:8px;

height:8px;

border-radius:50%;

background:#fff;

opacity:.5;

cursor:pointer;

}

.indicators span.active{

opacity:1;

background:#DD4501;

}

/* ================================
THUMBNAILS CONTAINER
================================ */

.thumbnails-container{

display:flex;

flex-direction:column;

gap:12px;

}

/* ================================
ACCORDION GROUP
================================ */

.thumb-group{

border:1px solid #ccc;

border-radius:6px;

overflow:hidden;

}

.thumb-title{

background:#001216;

color:#fff;

padding:12px;

cursor:pointer;

font-weight:bold;

}

.thumb-list{

background:#f9f9f9;

padding:10px;

display:grid;

grid-template-columns:repeat(auto-fill,minmax(65px,1fr));

gap:8px;

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.thumb-group.active .thumb-list{

max-height:600px;

}

.thumb{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

border-radius:4px;

cursor:pointer;

transition:.2s;

}

.thumb:hover{

transform:scale(1.05);

}

.more_picture{

grid-column:1/-1;

text-align:center;

color:#DD4501;

font-weight:bold;

text-decoration:none;

padding:6px;

}
.gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-prev {
    left: 12px;
}

.gallery-next {
    right: 12px;
}

.product_lable_all{ font-size: 18px;
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
    gap: 5px;
    width: 95%;
    max-width: 1200px;
    margin: 02px auto;
	text-align: center;
    padding: 2px;
}
.product_lable_all a{ 
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px,10fr));
    width: 100%;
    max-width: 1200px;
    margin: 00px auto;
	text-align: center;
    background:#DD4103;
    padding: 1px;
    border-radius: 10px;
    box-shadow: 1px 1px 4px 0px #001216;
    transition: 0.3s ease;
	font-family: semi;
	text-decoration-style: none;
	text-decoration: none;
	color : #ffffff;
    text-shadow: #001216 1px 1px;
	
	
}

.product_lable_all a:hover{
	background: #001216;
}

/* ================================
BUY BOX
================================ */

.customer-offer{

width:95%;

max-width:1400px;

margin:auto;

}

.selling{

background:#BFB9B8;

padding:25px;

border-radius:20px;

box-shadow:0 0 5px #001216;

display:flex;

flex-direction:column;

gap:20px;

}

/* ================================
COLOR SELECT
================================ */

.color-selection{

display:flex;

flex-direction:column;

gap:10px;

}

.color-grid{

display:flex;

gap:8px;

flex-wrap:wrap;

}

.color-grid input{

display:none;

}

.color-grid label{

width:32px;

height:28px;

border-radius:50%;

cursor:pointer;

border:2px solid #fff;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

color:#fff;

}

.color-grid input:checked + label{

outline:2px solid #001216;

}

/* ================================
AREA + LENGTH CALCULATOR
================================ */

.quantity-selection{

display:flex;

flex-direction:column;

gap:20px;

}

.quantity-selection input{

width:100%;

padding:8px;

border-radius:5px;

border:1px solid #ccc;

}

.buy-btn-m2,
.buy-btn-length{

margin-top:8px;

padding:8px;

background:#DD4105;

border:none;

color:#fff;

cursor:pointer;

border-radius:5px;

}

/* ================================
QUANTITY BOX
================================ */

.product-quantity-section{

display:flex;

flex-direction:column;

gap:10px;

}

#qty{

padding:10px;

border-radius:6px;

border:1px solid #aaa;

}

.factor-display{

background:#001216;

color:#fff;

padding:12px;

border-radius:8px;

display:flex;

flex-direction:column;

gap:5px;

text-align:center;

box-shadow:0 0 5px #DD4501;

}

/* ================================
BUY BUTTON
================================ */
input{margin: 2px 0px 2px 0px;}
.buy-btn{

background:#DD4501;

border:none;

padding:14px;

border-radius:6px;

cursor:pointer;

font-size:16px;

transition:.2s;
margin: 5px 0px 0px 0px;
font-family: semi;
}

.buy-btn:hover{

box-shadow:0 0 6px #001216;

color:#fff;

}

/* ================================
PRODUCT DETAILS
================================ */

.product-detail{

width:95%;

max-width:1200px;

margin:50px auto;

}

/* ================================
TABS
================================ */

.tabs-container{

display:flex;

background:#DD4105;

border-radius:8px;

overflow:hidden;

}

.tab-button{

flex:1;

text-align:center;

padding:12px;

cursor:pointer;

}

.tab-button.active{

background:#001216;

color:#fff;

font-weight:bold;

}

.tab-content{

display:none;

padding:20px;

background:#DD4501;

border-radius:8px;

margin-top:15px;

}

.tab-content.active{

display:block;

}

/* ================================
SPEC TABLE
================================ */

.spec-container{

background:#fff;

box-shadow:0 0 5px #001216;

border-radius:6px;

overflow:hidden;

}

.spec-row{

display:flex;

border-bottom:1px solid #ddd;

}

.spec-title{

width:30%;

padding:10px;

background:antiquewhite;

font-weight:bold;

}

.spec-intro_1{

flex:1;

padding:10px;

text-align:center;

}

/* ================================
TABLET
================================ */

@media (max-width:1000px){

.apartment{

grid-template-columns:1fr;

}
.product_lable_all { 
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 95%;
        max-width: 1200px;
        margin: 5px auto; /* ایجاد فاصله مناسب از بالا و پایین */
        padding: 0;
        justify-content: center; /* تراز کردن دکمه‌ها دقیقاً در وسط صفحه */
    }
	
.product_lable_all a { 
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1; /* اجازه می‌دهد در صورت وجود چند دکمه، فضا را تقسیم کنند */
        min-width: 50px; /* حداقل عرض برای هر دکمه */
        max-width: 100%; /* جلوگیری از بیرون زدن دکمه تکی */
        margin: 0;
        text-align: center;
        background: #DD4103;
        padding: 4px 5px; /* پدینگ مناسب برای لمس راحت در موبایل */
        border-radius: 10px;
        transition: 0.3s ease;
        font-family: semi;
        text-decoration: none;
        color: #ffffff;
        font-size: 1.8vw; /* اصلاح اندازه فونت برای خوانایی بهتر */
        box-shadow: 1px 1px 4px 0px #001216;
    }

}

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

@media (max-width:700px){

.thumb-list{

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

}
.gallery-btn {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

.gallery-prev {
        left: 8px;
    }

.gallery-next {
        right: 8px;
    }


.selling{

padding:18px;

}

.tabs-container{

flex-direction:column;

}

}

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

@media (max-width:480px){

.thumb-list{

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

}

.buy-btn{

width:100%;

}

.spec-row{

flex-direction:column;

}

.spec-title{

width:100%;

text-align:center;

}

}

/* ================================
ZOOM MODAL STYLES (اضافه کنید به انتهای فایل)
================================ */

.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99998;
    display: none;
}



.zoom-overlay.zoom-show {
    display: block;
}

.zoom-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    overflow: hidden;
    cursor: grab;
}

.zoom-wrapper.grabbing {
    cursor: grabbing;
}

.zoomed-view {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    pointer-events: none; /* برای اینکه درگ روی کانتینر انجام شود نه خود عکس */
}

/* دکمه بستن */
.zoom-btn-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100001;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}

/* دکمه‌های قبلی/بعدی در مودال */
.zoom-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100001;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
}

.zoom-btn.prev { left: 20px; }
.zoom-btn.next { right: 20px; }

.zoom-btn:hover { background: rgba(255, 255, 255, 0.4); }