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

html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#f4f7fb;
color:#0f172a;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
height:82px;
background:rgba(255,255,255,.96);
backdrop-filter:blur(16px);
border-bottom:1px solid #e2e8f0;
z-index:99999;
}

.header_container{
max-width:1750px;
margin:auto;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
}

.logo{
font-size:25px;
font-weight:900;
letter-spacing:-1px;
color:#ff7a00;
text-decoration:none;
display:flex;
align-items:center;
}

.logo span{
color:#0f172a;
}

.header_right{
display:flex;
align-items:center;
gap:12px;
}

.header_btn{
height:50px;
padding:0 22px;
border:none;
border-radius:14px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:.3s;
}

.search_open_btn{
background:#f8fafc;
border:2px solid #e2e8f0;
color:#0f172a;
}

.search_open_btn:hover{
border-color:#ff7a00;
background:#fff7ed;
color:#ff7a00;
}

.login_btn{
background:#eef2f7;
color:#0f172a;
}

.add_btn{
background:#ff7a00;
color:#fff;
box-shadow:0 12px 30px rgba(255,122,0,.25);
}

/* MOBILE HEADER */

.mobile_header{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:72px;
background:rgba(255,255,255,.98);
backdrop-filter:blur(18px);
border-bottom:1px solid #e2e8f0;
z-index:999999;
padding:0 14px;
align-items:center;
justify-content:space-between;
}

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

.mobile_icon_btn{
width:44px;
height:44px;
border-radius:14px;
background:#f1f5f9;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
cursor:pointer;
}

/* MAIN */

.detail_page{
max-width:1750px;
margin:auto;
padding:115px 24px 40px;
width:100%;
overflow:hidden;
}

/* TOP AREA */

.detail_top{
display:flex;
align-items:flex-start;
gap:26px;
width:100%;
}

/* LEFT */

.gallery_area{
flex:1 1 auto;
min-width:0;
overflow:hidden;
position:relative;
top:8px;
}

/* BIG IMAGE */

.main_image{
width:100%;
height:720px;
background:#fff;
border-radius:34px;
overflow:hidden;
border:1px solid #e2e8f0;
position:relative;
line-height:0;
}

.main_image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

/* BADGE */

.image_badge{
position:absolute;
top:20px;
left:20px;
padding:12px 18px;
border-radius:50px;
background:#ff7a00;
color:#fff;
font-size:13px;
font-weight:800;
z-index:5;
}

/* THUMB SLIDER */

.thumb_slider{
display:flex;
gap:12px;
overflow-x:auto;
overflow-y:hidden;
width:100%;
padding-bottom:6px;
margin-top:18px;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}

.thumb_slider::-webkit-scrollbar{
height:6px;
}

.thumb_slider::-webkit-scrollbar-thumb{
background:#dbe3ec;
border-radius:50px;
}

.thumb{
width:145px;
min-width:145px;
max-width:145px;
height:100px;
border-radius:18px;
overflow:hidden;
cursor:pointer;
border:3px solid transparent;
transition:.25s;
background:#fff;
flex:0 0 auto;
}

.thumb.active{
border-color:#ff7a00;
}

.thumb img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

/* RIGHT */

.detail_sidebar{
flex:0 0 470px;
width:470px;
min-width:470px;
max-width:470px;

background:#fff;
border-radius:34px;
padding:30px;
border:1px solid #e2e8f0;

position:relative;
top:6px;

align-self:flex-start;
}

/* TITLE */

.detail_title{
font-size:34px;
font-weight:900;
line-height:1.3;
margin-bottom:14px;
}

/* LOCATION */

.location{
font-size:15px;
font-weight:700;
color:#64748b;
margin-bottom:24px;
}

/* PRICE */

.price{
font-size:48px;
font-weight:900;
color:#ff7a00;
margin-bottom:28px;
}

/* FEATURES */

.feature_grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:28px;
}

.feature_box{
padding:18px;
border-radius:18px;
background:#f8fafc;
}

.feature_box span{
display:block;
font-size:12px;
font-weight:700;
color:#64748b;
margin-bottom:7px;
}

.feature_box strong{
font-size:16px;
font-weight:900;
}

/* SELLER */

.seller_box{
display:flex;
align-items:center;
gap:14px;
padding:18px;
border-radius:22px;
background:#f8fafc;
margin-bottom:24px;
}

.seller_box img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
}

.seller_box strong{
display:block;
font-size:16px;
margin-bottom:4px;
}

.seller_box span{
font-size:13px;
color:#64748b;
}

/* ACTIONS */

.action_buttons{
display:flex;
flex-direction:column;
gap:14px;
}

.action_btn{
width:100%;
height:58px;
border:none;
border-radius:18px;
font-size:15px;
font-weight:900;
cursor:pointer;
transition:.25s;
}

.call_btn{
background:#ff7a00;
color:#fff;
box-shadow:0 18px 40px rgba(255,122,0,.25);
}

.message_btn{
background:#eef2f7;
color:#0f172a;
}

/* DESCRIPTION */

.description_box{
margin-top:28px;
background:#fff;
border-radius:34px;
padding:34px;
border:1px solid #e2e8f0;
}

.description_title{
font-size:28px;
font-weight:900;
margin-bottom:22px;
}

.description_text{
font-size:16px;
line-height:1.9;
color:#475569;
}

/* FOOTER */

.footer_bottom_only{
padding:30px 20px;
text-align:center;
font-size:13px;
font-weight:600;
color:#64748b;
border-top:1px solid #e2e8f0;
background:#fff;
margin-top:40px;
}

/* MOBILE NAV */

.mobile_nav{
display:none;
position:fixed;
bottom:0;
left:0;
width:100%;
height:74px;
background:rgba(255,255,255,.98);
backdrop-filter:blur(18px);
border-top:1px solid #e2e8f0;
z-index:999999;
justify-content:space-around;
align-items:center;
}

.mobile_item{
display:flex;
flex-direction:column;
align-items:center;
font-size:11px;
font-weight:700;
color:#475569;
gap:4px;
cursor:pointer;
}

/* POPUPS */

.popup_overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(15,23,42,.65);
backdrop-filter:blur(5px);
z-index:9999999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:.3s;
padding:20px;
}

.popup_overlay.active{
opacity:1;
visibility:visible;
}

.popup_box{
width:100%;
max-width:620px;
background:#fff;
border-radius:30px;
padding:28px;
transform:translateY(50px);
transition:.35s;
}

.popup_overlay.active .popup_box{
transform:translateY(0);
}

.popup_top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
}

.popup_top h3{
font-size:28px;
font-weight:900;
}

.popup_close{
width:46px;
height:46px;
border-radius:14px;
background:#f1f5f9;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
}

.popup_content{
display:flex;
flex-direction:column;
gap:18px;
}

.popup_btn{
width:100%;
height:60px;
border:none;
border-radius:18px;
background:#ff7a00;
color:#fff;
font-size:15px;
font-weight:900;
cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

.header{
display:none;
}

.mobile_header{
display:flex;
}

.detail_page{
padding:82px 10px 100px;
}

.detail_top{
flex-direction:column;
gap:16px;
}

.gallery_area{
width:100%;
top:0;
}

.main_image{
height:260px;
border-radius:20px;
}

.thumb_slider{
gap:8px;
padding-bottom:4px;
scroll-snap-type:x mandatory;
}

.thumb{
width:82px;
min-width:82px;
max-width:82px;
height:62px;
border-radius:12px;
scroll-snap-align:start;
}

.detail_sidebar{
flex:none;
width:100%;
min-width:100%;
max-width:100%;

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

position:relative;
top:0;

margin-top:0;
}

.detail_title{
font-size:22px;
line-height:1.4;
}

.location{
font-size:13px;
margin-bottom:18px;
}

.price{
font-size:32px;
}

.feature_grid{
grid-template-columns:1fr;
gap:10px;
}

.feature_box{
padding:14px;
border-radius:14px;
}

.seller_box{
padding:14px;
border-radius:16px;
}

.seller_box img{
width:48px;
height:48px;
}

.action_btn{
height:52px;
font-size:13px;
border-radius:14px;
}

.description_box{
padding:18px;
border-radius:20px;
}

.description_title{
font-size:20px;
}

.description_text{
font-size:13px;
line-height:1.8;
}

.mobile_nav{
display:flex;
}

.footer_bottom_only{
padding-bottom:95px;
font-size:11px;
}

.popup_overlay{
align-items:flex-end;
padding:0;
}

.popup_box{
border-radius:28px 28px 0 0;
max-width:100%;
}

}