/*
|--------------------------------------------------------------------------
| Flashify Trip Itinerary
|--------------------------------------------------------------------------
*/

:root{

	--flashify-primary:#0A84FF;
	--flashify-primary-hover:#006FE6;

	--flashify-bg:#ffffff;
	--flashify-card:#ffffff;

	--flashify-border:#e5e7eb;

	--flashify-text:#1f2937;
	--flashify-text-light:#6b7280;

	--flashify-radius:14px;

	--flashify-shadow:
		0 10px 30px rgba(0,0,0,.08);

}

.flashify-itinerary-wrapper{

	display:flex;

	align-items:flex-start;

	gap:40px;

	width:100%;

	margin:40px 0;

}

.flashify-itinerary-list{

	flex:1 1 55%;

	position:relative;

	min-width:0;

}

.flashify-itinerary-list::before{

	content:"";

	position:absolute;

	left:16px;

	top:0;

	bottom:0;

	width:2px;

	background:var(--flashify-border);

}

.flashify-itinerary-map{

	flex:1 1 45%;

	position:sticky;

	top:30px;

	min-height:650px;

	border-radius:var(--flashify-radius);

	border:1px solid var(--flashify-border);

	background:#f5f5f5;

	overflow:hidden;

	box-shadow:var(--flashify-shadow);

}

.flashify-itinerary-wrapper *{

	box-sizing:border-box;

}

.flashify-itinerary-wrapper img{

	display:block;

	max-width:100%;

	height:auto;

}

.flashify-itinerary-wrapper h1,
.flashify-itinerary-wrapper h2,
.flashify-itinerary-wrapper h3,
.flashify-itinerary-wrapper h4,
.flashify-itinerary-wrapper h5,
.flashify-itinerary-wrapper h6{

	margin:0;

	color:var(--flashify-text);

}

.flashify-itinerary-wrapper p{

	margin:0;

	color:var(--flashify-text-light);

	line-height:1.8;

}

.flashify-itinerary-item{

	position:relative;

	margin-bottom:28px;

	padding-left:48px;

}

.flashify-itinerary-item:last-child{

	margin-bottom:0;

}

.flashify-itinerary-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:18px;

	padding:20px 24px;

	background:var(--flashify-card);

	border:1px solid var(--flashify-border);

	border-radius:var(--flashify-radius);

	box-shadow:var(--flashify-shadow);

	cursor:pointer;

	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;

}

.flashify-itinerary-header:hover{

	border-color:var(--flashify-primary);

	transform:translateY(-2px);

}

.flashify-itinerary-dot{

	position:absolute;

	left:7px;

	top:24px;

	width:20px;

	height:20px;

	border-radius:50%;

	background:var(--flashify-primary);

	border:4px solid #ffffff;

	box-shadow:0 0 0 2px var(--flashify-primary);

	z-index:2;

}

.flashify-itinerary-place{

	flex:1;

	font-size:20px;

	font-weight:700;

	line-height:1.4;

	color:var(--flashify-text);

	margin:0;

	cursor:pointer;

	transition:color .25s ease;

}

.flashify-itinerary-place:hover{

	color:var(--flashify-primary);

}

.flashify-itinerary-toggle{

	display:flex;

	align-items:center;

	justify-content:center;

	width:42px;

	height:42px;

	padding:0;

	border:none;

	border-radius:50%;

	background:#f3f4f6;

	color:var(--flashify-text);

	cursor:pointer;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;

}

.flashify-itinerary-toggle:hover{

	background:var(--flashify-primary);

	color:#ffffff;

}

.flashify-itinerary-toggle i{

	font-size:15px;

	transition:transform .3s ease;

}

.flashify-itinerary-item.is-open
.flashify-itinerary-header{

	border-color:var(--flashify-primary);

}

.flashify-itinerary-item.is-open
.flashify-itinerary-toggle{

	background:var(--flashify-primary);

	color:#ffffff;

}

.flashify-itinerary-item.is-open
.flashify-itinerary-toggle i{

	transform:rotate(180deg);

}

.flashify-itinerary-content{

	display:none;

	margin-top:16px;

	margin-left:8px;

	padding:24px;

	background:#ffffff;

	border:1px solid var(--flashify-border);

	border-radius:var(--flashify-radius);

	box-shadow:var(--flashify-shadow);

	overflow:hidden;

}

.flashify-itinerary-image{

	margin-bottom:22px;

	border-radius:12px;

	overflow:hidden;

	background:#f5f5f5;

}

.flashify-itinerary-image img{

	width:100%;

	height:320px;

	object-fit:cover;

	transition:transform .35s ease;

}

.flashify-itinerary-image:hover img{

	transform:scale(1.04);

}

.flashify-itinerary-description{

	font-size:15px;

	line-height:1.9;

	color:var(--flashify-text-light);

}

.flashify-short-description,
.flashify-full-description{

	margin:0;

}

.flashify-full-description{

	display:none;

	white-space:pre-line;

}

.flashify-read-more{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	margin-top:18px;

	padding:10px 18px;

	border:none;

	border-radius:999px;

	background:var(--flashify-primary);

	color:#ffffff;

	font-size:14px;

	font-weight:600;

	cursor:pointer;

	transition:
		background .25s ease,
		transform .25s ease;

}

.flashify-read-more:hover{

	background:var(--flashify-primary-hover);

	transform:translateY(-2px);

}

.flashify-read-more:focus{

	outline:none;

}

.flashify-read-more.expanded{

	background:#374151;

}

.flashify-itinerary-item.is-open
.flashify-itinerary-content{

	display:block;

	animation:flashifyFadeIn .3s ease;

}

@keyframes flashifyFadeIn{

	from{

		opacity:0;

		transform:translateY(-8px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}
/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:991px){

	.flashify-itinerary-wrapper{

		flex-direction:column;

		gap:30px;

	}

	.flashify-itinerary-map{

		position:relative;

		top:auto;

		order:-1;

		width:100%;

		min-height:450px;

	}

	.flashify-itinerary-list{

		width:100%;

	}

}

@media (max-width:767px){

	.flashify-itinerary-wrapper{

		margin:30px 0;

		gap:24px;

	}

	.flashify-itinerary-list::before{

		left:12px;

	}

	.flashify-itinerary-item{

		padding-left:34px;

		margin-bottom:20px;

	}

	.flashify-itinerary-dot{

		left:3px;

		width:18px;

		height:18px;

		border-width:3px;

	}

	.flashify-itinerary-header{

		padding:16px 18px;

		gap:12px;

	}

	.flashify-itinerary-place{

		font-size:18px;

		line-height:1.4;

	}

	.flashify-itinerary-toggle{

		width:38px;

		height:38px;

		flex-shrink:0;

	}

	.flashify-itinerary-content{

		margin-top:12px;

		margin-left:0;

		padding:18px;

	}

	.flashify-itinerary-image img{

		height:220px;

	}

	.flashify-itinerary-description{

		font-size:14px;

		line-height:1.8;

	}

	.flashify-read-more{

		width:100%;

		justify-content:center;

		padding:12px 18px;

	}

	.flashify-itinerary-map{

		min-height:320px;

		border-radius:12px;

	}

}

@media (max-width:480px){

	.flashify-itinerary-header{

		padding:14px 16px;

	}

	.flashify-itinerary-place{

		font-size:16px;

	}

	.flashify-itinerary-content{

		padding:16px;

	}

	.flashify-itinerary-image img{

		height:180px;

	}

	.flashify-read-more{

		font-size:13px;

	}

}

.flashify-itinerary-toggle:focus-visible,
.flashify-read-more:focus-visible{

	outline:2px solid var(--flashify-primary);

	outline-offset:2px;

}

.flashify-itinerary-place:focus{

	outline:none;

}

.flashify-itinerary-map img{

	max-width:none;

}