/*==================================================
DIGIFARM RESPONSIVE.CSS
==================================================*/

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

@media screen and (max-width:430px){

.mobile-app{width:100%;max-width:100%;}
.hero{height:280px;}
.hero-content{padding:18px;}
.wallet-wrapper{padding:0 16px;margin-top:-42px;}
.stats,.promo,.section{padding-left:16px;padding-right:16px;}

}

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

@media screen and (max-width:390px){

.hero{height:265px;}
.hero-content{padding:16px;}

.logo{width:60px;height:60px;padding:7px;}
.logo-area h1{font-size:18px;}
.logo-area span{font-size:10px;}

.icon-btn{
width:42px;
height:42px;
font-size:16px;
border-radius:14px;
}

.avatar{
width:56px;
height:56px;
}

.welcome-info h2{
font-size:22px;
}

.member-badge{
font-size:10px;
padding:4px 10px;
}

.wallet-card{
padding:18px;
border-radius:22px;
}

.wallet-left h2{
font-size:28px;
}

.wallet-icon{
width:54px;
height:54px;
font-size:20px;
}

.stats{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.stat-card{
padding:15px;
border-radius:18px;
}

.stat-icon{
width:46px;
height:46px;
font-size:18px;
}

.stat-card h3{
font-size:20px;
}

.promo-card{
height:170px;
border-radius:22px;
}

.promo-content{
left:18px;
top:18px;
max-width:185px;
}

.promo-content h2{
font-size:21px;
}

.promo-content p{
font-size:12px;
}

.promo-button{
padding:11px 16px;
font-size:12px;
}

.promo-animal{
width:145px;
}

.section{
padding-top:24px;
}

.section-header h2{
font-size:18px;
}

.farm-card{
min-width:240px;
}

.farm-image{
height:155px;
}

.farm-body{
padding:16px;
}

.farm-body h3{
font-size:18px;
}

.farm-profit strong{
font-size:20px;
}

.activity-item{
padding:14px;
border-radius:18px;
}

.activity-icon{
width:46px;
height:46px;
font-size:18px;
}

.activity-info h4{
font-size:14px;
}

.activity-amount{
font-size:15px;
}

.bottom-nav{
height:74px;
}

.nav-center{
width:58px;
height:58px;
font-size:22px;
}

.nav-item i{
font-size:18px;
}

.nav-item span{
font-size:10px;
}

}

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

@media screen and (max-width:360px){

.hero{
height:250px;
}

.logo-area{
gap:8px;
}

.logo-area h1{
font-size:17px;
}

.welcome{
gap:12px;
}

.avatar{
width:50px;
height:50px;
}

.welcome-info h2{
font-size:20px;
}

.wallet-wrapper{
padding:0 14px;
margin-top:-36px;
}

.wallet-card{
flex-direction:column;
align-items:flex-start;
gap:18px;
}

.wallet-action{
width:100%;
flex-direction:row;
justify-content:center;
padding:12px;
background:#F4F8F4;
border-radius:16px;
}

.stats{
grid-template-columns:1fr;
}

.stat-card{
display:flex;
align-items:center;
gap:15px;
}

.stat-icon{
margin:0;
}

.stat-card h3{
font-size:18px;
}

.promo-card{
height:155px;
}

.promo-content{
max-width:165px;
}

.promo-content h2{
font-size:18px;
}

.promo-content p{
display:none;
}

.promo-button{
padding:10px 14px;
font-size:11px;
}

.promo-animal{
width:125px;
}

.farm-card{
min-width:220px;
}

.farm-image{
height:145px;
}

.farm-profit{
flex-direction:column;
align-items:flex-start;
gap:4px;
}

.progress-text{
font-size:11px;
}

.activity-item{
gap:10px;
}

.activity-info p{
font-size:11px;
}

.bottom-nav{
padding:0 8px;
}

.nav-center{
width:54px;
height:54px;
margin-top:-28px;
font-size:20px;
}

}

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

@media screen and (min-width:768px){

body{
background:#E9F3E6;
}

.mobile-app{
max-width:430px;
margin:20px auto;
border-radius:32px;
overflow:hidden;
background:#F5F8F3;
box-shadow:0 25px 80px rgba(0,0,0,.15);
}

.bottom-nav{
max-width:430px;
left:50%;
transform:translateX(-50%);
border-radius:26px 26px 0 0;
}

}

/*==================== LANDSCAPE ====================*/

@media screen and (orientation:landscape) and (max-height:500px){

.hero{
height:220px;
}

.bottom-nav{
height:68px;
}

.nav-center{
margin-top:-24px;
}

}

/*==================== SAFE AREA ====================*/

@supports(padding:max(0px)){

.bottom-nav{
padding-bottom:max(10px,env(safe-area-inset-bottom));
}

}

/*==================== REDUCE MOTION ====================*/

@media(prefers-reduced-motion:reduce){

*{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}

}

/*==================== PRINT ====================*/

@media print{

.hero,
.bottom-nav,
.promo,
.activity-list{
display:none!important;
}

body{
background:#fff;
}

.mobile-app{
max-width:100%;
box-shadow:none;
}

}