/**
 * Title: Paddle BC Map Styles
 * Version: 1.1.5
 * Description: UI for Global Map sidebar and Itinerary specific layouts.
 * Development Notes: Updated stop title margins, leg header alignment, and enforced square leg media.
 */

.acf-map {
	width: 100%;
	height: 600px;
	background: #f7f1e8;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

/* Specificity override for theme list styles */
.post-content .navigation-google-map .google-nav-sublist li a {
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.post-content .navigation-google-map .google-nav-sublist li a:hover {
	opacity: 0.7;
	text-decoration: none !important;
}

/* Itinerary Sidebar and List Layouts */
.pbc-itinerary-list-container {
	width: 100%;
}

.pbc-itinerary-map-wrapper {
	width: 100%;
	height: 100%;
	min-height: 600px;
}

/* Hierarchy and Indentation */
.pbc-stops-container {
	padding: 40px 20px 20px 20px;
	margin-top: 30px;
	background: #f9f9f9;
	border-radius: 12px;
}


/* Rounded Thumbnails (14px) */
.pbc-round-thumb-lg {
	width: 180px;
	height: 180px;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	object-fit: cover;
}

.pbc-round-thumb-sm {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	object-fit: cover;
}

/* Click to Interact Overlay */
.pbc-map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 99;
	display: flex;
	align-items: flex-start;
	justify-content: right;
	padding: 20px;
	cursor: pointer;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pbc-map-overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pbc-map-overlay-btn {
	background: #da9038;
	color: #ffffff;
	padding: 8px 18px;
	border-radius: 20px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.is-waterway-nav ~ .acf-map .pbc-map-overlay-btn {
	background: #3498db;
}

/* Tooltip Side-by-Side Content */
.pbc-tooltip-wrap {
	display: flex;
	gap: 15px;
	align-items: center;
	max-width: 320px;
}

.pbc-tooltip-img {
	flex-shrink: 0;
	width: 80px;
}

.pbc-tooltip-img img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.pbc-tooltip-text h3 {
	margin-bottom: 4px !important;
	font-size: 16px !important;
}

.pbc-marker-listing-link {
	font-size: 12px;
	color: #da9038;
	font-weight: 700;
	text-decoration: underline;
	display: block;
	margin-top: 4px;
}

.pbc-tooltip-excerpt {
	font-size: 13px;
	line-height: 1.4;
	color: #555555;
	margin-bottom: 10px;
}

/* Custom HTML Marker Styling */
.pbc-custom-marker {
	position: absolute;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.pbc-marker-badge {
	width: 30px;
	height: 30px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.pbc-custom-marker.is-bouncing {
	animation: pbc-marker-bounce 0.5s infinite alternate;
}

@keyframes pbc-marker-bounce {
	from { transform: translate(-50%, -50%); }
	to { transform: translate(-50%, -100%); }
}

/* Cluster Marker Branding */
.gm-style .pbc-cluster-label {
	font-family: Montserrat, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

/* Shared Search UI */
.pbc-community-search-wrap {
	position: relative;
	margin: 20px 0;
	width: 100%;
	max-width: 500px;
}

.pbc-search-field {
	width: 100%;
	padding: 12px 15px;
	padding-right: 40px !important;
	border: 2px solid #454545;
	border-radius: 8px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	outline: none;
	transition: border-color 0.2s ease;
	background: rgba(255, 255, 255, 0.8) !important;
	color: #2b2b2b !important;
}

.pbc-search-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #454545;
	pointer-events: none;
	font-size: 14px;
	z-index: 5;
}

/* Neutralize color overrides for search */
.is-waterway-nav .pbc-search-icon { color: #454545; }
.is-waterway-nav .pbc-search-field { border-color: #454545; }

.pbc-search-field::placeholder { color: #888888 !important; opacity: 1; }
.pbc-search-field:-ms-input-placeholder { color: #888888 !important; }
.pbc-search-field::-ms-input-placeholder { color: #888888 !important; }

.pbc-search-field:focus {
	border-color: #454545;
	box-shadow: 0 0 0 2px rgba(69, 69, 69, 0.1);
}

.pbc-search-dropdown {
	position: absolute !important;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff !important;
	border: 1px solid #da9038;
	border-top: none;
	border-radius: 0 0 8px 8px;
	z-index: 1000;
	max-height: 250px;
	overflow-y: auto;
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}

.pbc-search-dropdown li {
	border-bottom: 1px solid #f5f5f5;
	margin: 0 !important;
}

.pbc-search-dropdown li:last-child {
	border-bottom: none;
}

.pbc-search-dropdown a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.pbc-search-dropdown a:hover {
	background: #fffbf2;
	color: #da9038;
}

/* Global Navigation Styles */
.navigation-google-map {
	background: #ffffff;
	border: 1px solid #eeeeee;
	padding: 15px;
	border-radius: 12px;
	overflow: hidden;
	max-height: 600px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #da9038 #f5f5f5;
}

/* Webkit Scrollbar Styling */
.navigation-google-map::-webkit-scrollbar {
	width: 8px;
}

.navigation-google-map::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 10px;
}

.navigation-google-map::-webkit-scrollbar-thumb {
	background-color: #da9038;
	border-radius: 10px;
	border: 2px solid #f5f5f5;
}

.navigation-google-map-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.navigation-google-map-item {
	border-bottom: 1px solid #f5f5f5;
	padding: 12px 0;
	list-style: none !important;
}

.navigation-google-map-item:last-child {
	border-bottom: none !important;
}

.navigation-google-map-header {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.region-title {
	order: 3;
	margin-left: 10px;
	flex-grow: 1;
	letter-spacing: 0.00em;
	font-weight: 600;
	font-family: Montserrat, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	text-transform: uppercase;
	font-size: 12px;
}

.region-title a {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	text-decoration: none;
	color: inherit;
}

/* Metadata Count Bubbles */
.pbc-nav-bubble-wrap {
	order: 4;
	display: flex;
	gap: 5px;
	margin-left: 10px;
}

.pbc-nav-bubble {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	color: #ffffff;
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}

.pbc-nav-bubble.is-waterway { background: #3498db; }
.pbc-nav-bubble.is-itinerary { background: #45a864; }

/* Numeric indicator "outside" layout */
.nav-item-num {
	flex-shrink: 0;
	min-width: 25px;
	font-weight: 700;
}

.nav-item-title {
	flex-grow: 1;
}

/* Waterway Labels in Info List */
.pbc-waterway-label {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	color: #3498db;
	margin-right: 5px;
}
.pbc-waterway-label::after {
  content: ": ";
}

/* Circular Count Badges */
.pbc-nav-count {
	order: 4;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #ffffff;
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 700;
	margin-left: 10px;
	flex-shrink: 0;
}

/* Navigation Sub-lists */
.google-nav-sublist {
	display: none;
	list-style: none !important;
	padding: 10px 0 0 20px !important;
	margin: 0;
}

.google-nav-sublist li {
	margin-bottom: 10px;
	list-style: none !important;
	line-height: 15px;
}

.google-nav-sublist a {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	gap: 5px;
	transition: color 0.2s ease;
}

.google-nav-sublist a:hover {
	color: #da9038;
}

/* Waterway Specific Branding (Blue) */
.is-waterway-nav .navigation-google-map-filter {
	border-color: #3498db;
}

.is-waterway-nav .navigation-google-map-filter:checked {
	background: #3498db;
}

.is-waterway-nav .google-nav-sublist a:hover {
	color: #3498db;
}

.is-waterway-nav .pbc-search-field:focus {
	border-color: #3498db;
	box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.is-waterway-nav .pbc-search-dropdown {
	border-color: #3498db;
}

.is-waterway-nav .pbc-search-dropdown a:hover {
	background: #f0f7fc;
	color: #3498db;
}

/* Toggle Icon Position and Spacing */
.pbc-icon-toggle {
	order: 2;
	margin: 0 0 0 12px !important;
	color: inherit;
}

/* Enhanced Checkbox Styling */
.navigation-google-map-filter {
	order: 1;
	appearance: none;
	width: 24px;
	height: 24px;
	border: 2px solid #da9038;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.navigation-google-map-filter:checked {
	background: #da9038;
}

.navigation-google-map-filter:checked::after {
	content: '✓';
	color: #fff;
	position: absolute;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-size: 16px; font-weight: bold;
}

.pbc-icon-toggle::before {
	content: '+';
	font-style: normal;
	font-weight: 700;
	color: inherit;
	font-size: 20px;
}

.navigation-google-map-item.is-active .pbc-icon-toggle::before {
	content: '-';
}

/* Marker Tooltip Adjustments */
.acf-map .marker h3 {
	font-size: 18px !important;
	padding: 0 25px 5px 0 !important;
	font-weight: 700;
}

.gm-style-iw-chr, .gm-ui-hover-effect {
	display: none !important;
}

.gm-style-iw h3, .gm-style-iw p { margin: 0 !important; }
.gm-style-iw h3 { font-size: 15px; }

.gm-style-iw p { 
	font-size: 13px; 
	line-height: 16px; 
	padding: 8px 0; 
}

.gm-style-iw-c { padding: 0 !important; }
.gm-style-iw-d { padding: 8px 12px 12px 12px !important; overflow: hidden !important; }
.gm-style-cc, .gmnoprint, .gm-style-mtc, .gm-bundle-control { display: none !important; }
a[href^="http://maps.google.com/maps"], a[href^="https://maps.google.com/maps"] { display: none !important; }
.gm-style { background: #f7f1e8 !important; }

/* Waterway Info List Reset */
.pbc-waterway-info-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pbc-waterway-info-list li {
	list-style: none !important;
	padding: 8px 0;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 14px;
}

/* Itinerary specific styles */
.pbc-itin-row {
	display: flex;
	gap: 30px;
	align-items: center;
	width: 100%;
	margin-top: 20px;
}

.pbc-itin-media { flex-shrink: 0; }
.pbc-itin-info { flex-grow: 1; }

.pbc-leg-header {
	margin-bottom: 40px;
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 30px;
	align-items: flex-start;
}

h2.pbc-leg-title {
	margin: 0 !important;
}

.pbc-stop-item {
	display: flex;
	gap: 20px;
	padding: 25px;
	border-radius: 12px;
	margin-bottom: 40px;
	background: #fff;
	border: 1px solid #eee;
	cursor: pointer;
	transition: all 0.3s ease;
	scroll-margin-top: 150px;
	align-items: flex-start;
	position: relative;
}

.pbc-stop-item .pbc-itin-row {
	display: block;
	margin-top: 0;
}

.pbc-stop-item .pbc-itin-media {
	float: right;
	width: 33.333%;
	margin-left: 25px;
	margin-bottom: 15px;
}

/* Tablet Override (1/4 Width) */
@media (max-width: 1024px) {
	.pbc-stop-item .pbc-itin-media {
		width: 25%;
	}
}

/* Mobile Override (Full Width) */
@media (max-width: 767px) {
	.pbc-stop-item .pbc-itin-media {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-bottom: 20px;
	}
}

.pbc-stop-item.highlight {
	border-color: #da9038;
	background: #fffcf5;
	box-shadow: 0 4px 15px rgba(218, 144, 56, 0.1);
}

.pbc-stop-header-group {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, -50%);
	z-index: 10;
	display: flex;
	align-items: center;
}

.pbc-stop-number {
	background: #da9038;
	color: #fff;
	border-radius: 20px;
	padding: 6px 15px;
	font-weight: 700;
	font-size: 18px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pbc-stop-prefix {
	text-transform: uppercase;
	font-size: 11px;
	margin-right: 5px;
	font-weight: 700;
}

.pbc-stop-badge {
	margin-left: 10px;
	color: #fff;
	border-radius: 20px;
	padding: 6px 15px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.pbc-stop-title { margin: 10px 0; font-size: 20px; }

.pbc-stop-content p {
	margin-top: 0 !important;
	font-size: 14px !important;
	line-height: 1.5;
}