.chart-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2em;
}

#bgc-chart-data {
	color: #ffffff;
	text-align: center;
	width: 100%;
	padding: 0 32px;
	border: none;
	border-radius: 16px;
	font-size: 1.1em;
	font-family: 'Cinzel', serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: linear-gradient(135deg,
		#F4E196 0%,
		#D4AF37 25%,
		#B8941F 50%,
		#D4AF37 75%,
		#F4E196 100%
	);
	background-size: 200% 200%;
	color: #1A1A1A;
	box-shadow:
		0 8px 32px rgba(212, 175, 55, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 2em;
}

.bgc-body-chart-div,
.bgc-body-chart-output {
	width: 100%;
	padding: 2em;
	border-radius: 20px;
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(25px) saturate(180%);
	backdrop-filter: blur(25px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.3),
		0 4px 20px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(212, 175, 55, 0.2);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	float: none; /* override legacy floats */
	box-sizing: border-box;
}

.bgc-body-chart-div::before,
.bgc-body-chart-output::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg,
		rgba(212, 175, 55, 0.1),
		rgba(255, 255, 255, 0.05),
		rgba(212, 175, 55, 0.08),
		rgba(255, 255, 255, 0.03)
	);
	border-radius: 22px;
	z-index: -1;
	transition: opacity 0.4s ease;
}

.bgc-body-chart-div:hover,
.bgc-body-chart-output:hover {
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 16px 50px rgba(0, 0, 0, 0.35),
		0 6px 25px rgba(212, 175, 55, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(212, 175, 55, 0.3);
	transform: translateY(-2px);
}

.bgc-body-chart-div:hover::before,
.bgc-body-chart-output:hover::before {
	opacity: 1.5;
}

.bgc-body-chart-output {
	display: block;
	font-family: 'Cinzel', serif;
}

.bgc-body-chart-div::after,
.bgc-body-chart-output::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30%;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.1) 0%,
		transparent 100%
	);
	border-radius: 20px 20px 0 0;
	pointer-events: none;
}

.bgc-chart {
	display: flex;
	justify-content: center;
	align-items: center;

}



/* (Retain earlier .bgc-desktop-view / .bgc-mobile-view definitions from legacy section; removed empty override blocks to satisfy linter) */

.bgc-design h5,
.bgc-personality h5 {
	color: #D4AF37;
	font-family: 'Cinzel Decorative', serif;
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 1em;
	text-transform: uppercase;
	text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
	letter-spacing: 1px;
}

.bgc-design ul,
.bgc-personality ul {
	list-style: none;
	padding: 0;
	margin: 0;
	color: #FFFFFF;
	font-family: 'Cinzel', serif;
}

.bgc-design li,
.bgc-personality li {
	padding: 0.5em 0;
	background: transparent;
	text-align: right; /* preserve prior intent */
	position: relative;
}

.bgc-body-chart-output h3 {
	color: #D4AF37;
	font-family: 'Cinzel Decorative', serif;
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 1.5em;
	text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.bgc-body-chart-output ul {
	list-style: none;
	padding: 0;
	margin: 0;
	color: #FFFFFF;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
	font-family: 'Cinzel', serif;
}

.bgc-body-chart-output li {
	padding: 1em;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	list-style-type: none; /* ensure reset */
	line-height: 1.4em;
	margin: 0; /* override legacy margin */
	padding-left: 0; /* remove legacy 180px indent */
	position: relative;
}

.bgc-body-chart-output ul li:nth-child(odd) {
	background: rgba(255, 255, 255, 0.05) !important;
}

.bgc-body-chart-output li:hover {
	background: rgba(212, 175, 55, 0.1);
	transform: translateY(-2px);
}

.bgc-body-chart-output li strong {
	color: #F4E196;
	text-transform: uppercase;
	margin-right: 0.5em;
	text-shadow: 0 0 10px rgba(244, 225, 150, 0.3);
	position: static; /* reset absolute positioning from legacy */
	display: inline-block;
	width: auto;
	left: auto;
	top: auto;
}

@media (max-width: 767px) {
	#bgc-form form {
		grid-template-columns: 1fr;
		padding: 1.5em;
	}

	#bgc-form .grid-row {
		flex-direction: column;
		gap: 1em;
	}

	.bgc-body-chart-div {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

	.bgc-desktop-view {
		display: none;
	}

	.bgc-mobile-view {
		display: block;
	}

	.bgc-body-chart-output ul {
		grid-template-columns: 1fr;
	}
}

#bgc-form {
	font-family: 'Cinzel', serif;
	position: relative;
}

#bgc-form .title {
	color: #D4AF37;
	font-family: 'Cinzel Decorative', serif;
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 2em;
	text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

#bgc-form .form-wrapper {
	background: transparent;
	position: relative;
}

#bgc-form .form-wrapper::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg,
		rgba(212, 175, 55, 0.15),
		rgba(255, 255, 255, 0.08),
		rgba(212, 175, 55, 0.1),
		rgba(255, 255, 255, 0.05)
	);
	border-radius: 20px;
	z-index: -1;
}

#bgc-form form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
	align-items: center;
	padding: 2em;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(0px) saturate(180%);
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(212, 175, 55, 0.1);
	position: relative;
}

#bgc-form form::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0.1) 0%,
		transparent 100%
	);
	border-radius: 18px 18px 0 0;
	pointer-events: none;
}

#bgc-form form > .input-field,
#bgc-form form > .grid-row,
#bgc-form form > .buttons {
	grid-column: span 3;
}

#bgc-form .input-field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	position: relative;
	margin: 0; /* reset legacy margin */
}

#bgc-form .grid-row {
	display: flex;
	gap: 1.5em;
}

#bgc-form .grid-6 { flex: 1; }

#bgc-form label {
	font-family: 'Cinzel', serif;
	color: #D4AF37;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 1px;
	text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
	margin-bottom: 0.5em;
}

#bgc-form input[type="text"],
#bgc-form input[type="date"],
#bgc-form input[type="time"] {
	width: 100%;
	height: 52px;
	padding: 12px 16px;
	border: none;
	border-radius: 12px;
	color: #FFFFFF;
	font-size: 1em;
	font-family: 'Cinzel', serif;
	outline: none;
	box-sizing: border-box;
	line-height: 1.4;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(15px) saturate(150%);
	backdrop-filter: blur(15px) saturate(150%);
	border: 1.5px solid rgba(212, 175, 55, 0.3);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.08);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}

#bgc-form input[type="text"]:focus,
#bgc-form input[type="date"]:focus,
#bgc-form input[type="time"]:focus {
	border-color: rgba(212, 175, 55, 0.8);
	background: rgba(255, 255, 255, 0.12);
	box-shadow:
		0 8px 32px rgba(212, 175, 55, 0.2),
		0 0 20px rgba(212, 175, 55, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(212, 175, 55, 0.2);
}

#bgc-form input[type="text"]::placeholder,
#bgc-form input[type="date"]::placeholder,
#bgc-form input[type="time"]::placeholder {
	color: rgba(255, 255, 255, 0.6);
	font-style: italic;
}

#bgc-form input[type="date"]::-webkit-calendar-picker-indicator,
#bgc-form input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(0.8);
	cursor: pointer;
}

@media (max-width: 900px) {
	#bgc-form form { grid-template-columns: 1fr 1fr; }
	#bgc-form form > .input-field,
	#bgc-form form > .grid-row,
	#bgc-form form > .buttons { grid-column: span 2; }
}

@media (max-width: 600px) {
	#bgc-form form { grid-template-columns: 1fr; }
	#bgc-form form > .input-field,
	#bgc-form form > .grid-row,
	#bgc-form form > .buttons { grid-column: span 1; }
	#bgc-form .grid-row { flex-direction: column; }
}

/* === End Modern Glassmorphism Form Styles === */
@font-face {
	font-family: 'human-design';
	src: url('../fonts/human-design.eot?b264ts');
	src: url('../fonts/human-design.eot?b264ts#iefix') format('embedded-opentype'), url('../fonts/human-design.woff2?b264ts') format('woff2'), url('../fonts/human-design.ttf?b264ts') format('truetype'), url('../fonts/human-design.woff?b264ts') format('woff'), url('../fonts/human-design.svg?b264ts#human-design') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-bgc-"],
[class*="icon-bgc-"] {
	font-family: 'human-design' !important;
	/* Removed deprecated 'speak' property */
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-bgc-left:before {
	content: "\e90d";
}

.icon-bgc-right:before {
	content: "\e90e";
}

.icon-bgc-Earth:before {
	content: "\e900";
}

.icon-bgc-Jupiter:before {
	content: "\e901";
}

.icon-bgc-Mars:before {
	content: "\e902";
}

.icon-bgc-Mercury:before {
	content: "\e903";
}

.icon-bgc-Moon:before {
	content: "\e904";
}

.icon-bgc-Neptune:before {
	content: "\e905";
}

.icon-bgc-North-Node:before {
	content: "\e906";
}

.icon-bgc-Pluto:before {
	content: "\e907";
}

.icon-bgc-Saturn:before {
	content: "\e908";
}

.icon-bgc-South-Node:before {
	content: "\e909";
}

.icon-bgc-Sun:before {
	content: "\e90a";
}

.icon-bgc-Uranus:before {
	content: "\e90b";
}

.icon-bgc-Venus:before {
	content: "\e90c";
}

/* Legacy #bgc-form basic styles removed in favor of modern glassmorphism block above */
.clear {
	clear: both;
}

#bgc-human-design-bodychart h3 {
	text-align: center;
}

.bgc-body-chart-output {
	display: none;
}

.bgc-body-chart-output ul {
	padding: 0px;
	margin: 0px;
}

.bgc-body-chart-output ul li {
	list-style-type: none;
	padding: 10px;
	line-height: 23px;
	margin: 0 0 1px 0;
	position: relative;
	padding-left: 180px;
}

.bgc-body-chart-output ul li:nth-child(odd) {
	background: #f5f5f5;
}

.bgc-body-chart-output ul li strong {
	text-transform: uppercase;
	position: absolute;
	left: 10px;
	top: 10px;
	width: 170px;
}

.bgc-body-chart-div h5 {
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	padding-bottom: 10px;
	display: flex;
	flex-direction: row;;
}

.bgc-body-chart-div {
	float: left;
	position: relative;
	z-index: 10;
}

.bgc-chart-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 2em;
}

.bgc-body-chart-output {
	width: 43%;
	float: right;
	position: relative;
	z-index: 10;
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

.bgc-personality {
	width: 104px;
	float: right;
	margin-right: 2em;
}

.bgc-design {
	width: 104px;
	float: left;
	margin-left: 2em;
}

.bgc-chart {
	width: -moz-calc(100% - 208px);
	width: -webkit-calc(100% - 208px);
	width: calc(100% - 208px);
	float: left;
	position: relative;
	font-family: 'Cinzel', serif;
  position: relative;
}

.bgc-chart svg {
	width: 350px;
	margin-top: -40px;
}

.bgc-design ul li,
.bgc-personality ul li {
	border-radius: 3px;
	padding: 5px 13px;
	position: relative;
	font-size: 15px;
	min-height: 25px;
	line-height: 25px;
	margin-bottom: 5px;
	color: #000;
	list-style: none;
	display: block;
	text-align: right;
}

.bgc-personality ul li span,
.bgc-design ul li span {
	position: absolute;
	left: 16px;
	top: 7px;
	font-size: 20px;
}

.arrows span {
	display: block;
	margin: 0 0 10px 0;
	font-size: 20px;
}

.arrows.design-arrows {
	position: absolute;
	left: 30%;
	top: 100px;
	color: #c0c0c0;
}

.arrows.personality-arrows {
	position: absolute;
	right: 30%;
	top: 100px;
	color: #B86A4F;
}

.bgc-sub-header {
	padding-bottom: 30px;
}

.bgc-design ul li {
	background: #c0c0c0;
	color: #000;
}

.bgc-personality ul li {
	background: #1A233D;
	color: #fff;
}

.bgc-no-space {
	padding: 0px;
}

.bgc-mobile-view {
	display: none;
}

.bgc-desktop-view {
	display: block;
}

[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}

[data-tooltip]:before {
	position: absolute;
	bottom: 0%;
	left: -100%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 7px;
	width: 160px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fdf5ee;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
}

[data-tooltip]:after {
	position: absolute;
	bottom: 50%;
	left: 0%;
	margin-left: -10px;
	width: 0;
	border-left: 5px solid #000;
	border-left: 5px solid hsla(0, 0%, 20%, 0.9);
	border-bottom: 5px solid transparent;
	border-top: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

.bgc-design ul li[data-tooltip]:before {
	position: absolute;
	bottom: 0%;
	left: auto;
	right: -180%;
	margin-bottom: 5px;
}

.bgc-design ul li[data-tooltip]:after {
	position: absolute;
	bottom: 50%;
	left: auto;
	right: 0%;
	margin-right: -13px;
	width: 0;
	border-right: 5px solid #000;
	border-right: 5px solid hsla(0, 0%, 20%, 0.9);
	border-left: 5px solid transparent;
	border-top: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

@media (max-width: 1310px) {
	.bgc-chart svg {
		width: 300px;
		margin-top: -80px;
	}
}

@media (max-width: 1000px) {
	.bgc-body-chart-output,
	.bgc-body-chart-div {
		width: 100%;
		float: none;
	}

	.bgc-body-chart-output {
		padding-top: 50px;
	}
}

@media (max-width: 750px) {
	.bgc-body-chart {
		width: 100%;
	}

	.bgc-hd-chart-form {
		width: 100%;
	}
}

@media (max-width:650px) {
	.bgc-body-chart-output {
		padding-top: 50px;
	}

	.bgc-chart,
	.actions {
		width: 100%;
		float: none;
	}

	.bgc-desktop-view {
		display: none;
	}

	.bgc-mobile-view {
		display: block;
		float: left;
	}

	.bgc-chart {
		padding-bottom: 50px;
	}
}

/*Default*/