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

.walk-page{
	position:relative;
	height:calc(100dvh - 170px); 
	overflow:hidden;
}

.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 */

.walk-weather{
	position:absolute;
	top:14px;
	left:14px;  
	padding:5px;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1; 
	border-radius:8px; 
	background:#fff;   
}

/* 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;
	left:50%;
	bottom:80px;
	transform:translateX(-50%);

	width:100%;

	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1;
}

.walk-start-btn{
	width:84px;
	aspect-ratio:1;

	border-radius:50%; 

	box-shadow:
		0 10px 30px rgba(0,0,0,.18);

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

	transition:.3s;
}

.walk-start-btn:active{
	transform:scale(.95);
}

.walk-play-icon{
	width:100%;
	height:100%;

	border-radius:50%;

	background:#fff;
	color:var(--primary);

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

	font-size:2rem;
	font-weight:700;

	padding-left:4px;
}

/* ACTIVE UI */

.walk-active-ui{
	display:none;
	align-items:center;
	gap:18px;
}

.walk-active-ui.show{
	display:flex;
}

.walk-side-btn{
	min-width:92px;
	height:42px;
	line-height: 42px;

	padding:0 18px;

	border-radius:999px;

	background:#fff;

	box-shadow:
		0 8px 24px rgba(0,0,0,.16);

	font-size:1rem;
	font-weight:700;
}

.walk-stop-btn{
	width:84px;
	height:84px;

	border-radius:50%;

	background:#fff;

	box-shadow:
		0 10px 30px rgba(0,0,0,.18);

	font-size:2rem;
	font-weight:800;

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

/* INFO BAR */

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

	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);
}