/* Apply the primary font to the body */
body {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	background-color: #f8fafc;
}

/* Custom font for the hero text */
.font-freestyle {
	font-family: 'Freestyle Script', cursive;
}

/* Smooth transitions for the header elements */
#main-header, #main-header a, #main-header .logo-text, #main-header .signup-btn {
	transition: all 0.3s ease-in-out;
}

/* Scrolled state for the header */
#main-header.scrolled {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#main-header.scrolled .logo-text { font-size: 1.275rem; }
#main-header.scrolled .nav-link { font-size: 0.85rem; }
#main-header.scrolled .signup-btn {
	font-size: 0.85rem;
	padding: 0.425rem 0.85rem;
}

/* Swiper.js custom navigation button styling */
.swiper-button-next, .swiper-button-prev {
	color: #1e40af;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	width: 44px;
	height: 44px;
}
.swiper-button-next:after, .swiper-button-prev:after { font-size: 22px; }

/* Styling for the trip planner forms */
.planner-form {
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, max-height 0.5s ease-in-out;
	max-height: 0;
	opacity: 0;
	overflow: hidden; /* Important for the collapse animation */
	transform: translateY(-10px);
}
.planner-form.active {
	max-height: 500px; /* Large enough to fit content */
	opacity: 1;
	transform: translateY(0);
	overflow: visible; /* CRITICAL FIX: Allows dropdown to show outside the form container */
}

/* Chat Page Specific Styles */
#chat-view-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}
.chat-body {
	 background-color: #f0f4f9;
}
.chat-message {
	animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
.typing-indicator span {
	height: 8px;
	width: 8px;
	background-color: #5b6167;
	border-radius: 50%;
	display: inline-block;
	animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
	0%, 80%, 100% { transform: scale(0); }
	40% { transform: scale(1.0); }
}

/* Modal Styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 120;
}
.modal-content {
	background: white;
	padding: 2rem;
	border-radius: 0.5rem;
	max-width: 90%;
	width: 600px;
	max-height: 90vh;
	overflow-y: auto;
}
.loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* General Page View Styling */
.page-view {
	display: none; /* Hide all pages by default */
}
.page-view.active {
	display: block; /* Show only the active page */
}