/* =========================================
WALK PAGE
========================================= */

.walk-page{
	position:relative;
	height:calc(100dvh - 170px - env(safe-area-inset-bottom) - env(safe-area-inset-top));  
	overflow:hidden;
}
.walk-history-page{
	position:relative;
	min-height:70dvh;
	overflow:hidden;
	padding-top: 30px;
}

.walk-page .topbar{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:50;
	background:#fff;
}

/* MAP */

.walk-map{
	position:relative;
	width:100%;
	height:100%; 
}

.walk-map-image{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:grayscale(.08);
}

/* BADGE */

.walk-record-badge{
	position:absolute;
	top:14px;
	left:50%;
	transform:translateX(-50%);
	z-index:1;

	height:36px;
	padding:0 18px;
	border-radius:999px;

	background:#0d6b5d;
	color:#fff;

	font-size:.82rem;
	font-weight:700;

	display:flex;
	align-items:center;
	justify-content:center;

	white-space:nowrap;

	box-shadow:0 8px 20px rgba(13,107,93,.24);
	
	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		opacity .35s ease,
		transform .35s cubic-bezier(.22,1,.36,1),
		visibility .35s ease;
}

.walk-record-badge.show{
	opacity:1;
	visibility:visible;
	pointer-events:auto;

	transform:translateX(-50%) translateY(0);
}
 

/* WEATHER */


.left-top-badge{
	position:absolute;
	top:14px;
	left:14px;  
	display:flex;
	align-items:center;  
	z-index:1; 
}
.walk-weather{  
	display:flex;
	align-items:center;
	justify-content:center;   
} 
.walk-weather img{
	width: 40px;
	padding:5px;
	margin-right: 8px; 
	border-radius:8px; 
	background:#fff;   
    box-shadow:0 0 10px rgba(0,0,0,.08);
}

.gps-badge{  
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
	height: 40px;
    background:#fff;
    border-radius:999px;
    box-shadow:0 0 10px rgba(0,0,0,.08);
}

.gps-text{ 
    font-weight:600; 
    color:#444;  
	font-size: 14px;
}

.gps-signal{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:13px;
	margin-top: -2px;
}

.gps-signal i{
    display:block;
    width:3px;
    background:#b9e63d;
    border-radius:2px 2px 0 0;
}

.gps-signal i:nth-child(1){height:50%;}
.gps-signal i:nth-child(2){height:70%;}
.gps-signal i:nth-child(3){height:100%;} 

/* USER */

.walk-user-marker{
	position:absolute;
	left:50%;
	top:58%;
	transform:translate(-50%,-50%);

	width:24px;
	height:24px;

	border-radius:50%;

	background:#2f7cff;
	z-index:1;

	border:4px solid #fff;

	box-shadow:
		0 0 0 8px rgba(47,124,255,.15),
		0 10px 20px rgba(0,0,0,.15);
}

/* ACTION */

.walk-action{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events: none;
} 
  

.walk-active-ui{ 
	gap:10px;
	position:absolute;
	left:50%;
	bottom:80px;
	transform:translateX(-50%); 
	width:100%;
	pointer-events: auto;
	display:flex;
	align-items:center;
	justify-content:center;  
	padding:0 12px;
}

.walk-active-ui button{ 
	padding:20px 24px ;  
	background: #fff; 
	box-shadow:0 10px 30px rgba(0,0,0,.18); 
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;  
	gap:12px;
	pointer-events: auto;
	border-radius:8px; 
	font-size: 18px;
	line-height: 1;
	width: 100%; 
}

.walk-active-ui button:before{ 
	width: 20px;
	aspect-ratio:1; 
	font-size: 20px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center; 
}
.walk-active-ui .walk-start-btn{
	background: var(--primary);
	color: #fff;
}
.walk-active-ui .walk-stop-btn{   
} 
.walk-active-ui .walk-start-btn:before{
	content:'▶';  
}
.walk-active-ui .walk-stop-btn:before{
	content:'❚❚';  
	color: var(--primary);
}
.walk-active-ui .walk-end-btn:before{
	content:'■';   
	color: var(--primary);
}
  

.walk-side-btn{ 
	position:absolute; 
	right:10px;
	top:50%; 
	display:flex;
	flex-direction:column;
	gap:10px;

}
.walk-side-btn button{
	border-radius:12px;
	width: 50px;
	aspect-ratio:1;
	background-color: var(--primary); 
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events: auto;
}
.walk-side-btn button img{
	width: 24px;
	filter: brightness(0) invert(1);  
}
  

/* INFO BAR */

.walk-info-bar{
	position:absolute;
	z-index:1;
	left:12px;
	right:12px;
	bottom:20px;

	height:45px;

	border-radius:6px;

	background:rgb(83 83 83 / 80%); 
	backdrop-filter:blur(2px);

	display:flex;
	align-items:center;
	justify-content:center;

	color:#111;

	box-shadow:
		0 10px 30px rgba(0,0,0,.18);
		
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.walk-info-bar.show{
	opacity:1;
	visibility:visible;
	pointer-events:auto;

	transform:translateY(0);
}

.walk-info-item{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
}

.walk-info-item strong{
	font-size:.9rem;
	font-weight:600;
	color:#fff;
}

.walk-info-divider{
	width:1px;
	height:18px;
	background:rgba(255,255,255,.18);
}