/**
 * Datatrac Walletshare Calculator Styles - PenAir Credit Union
 */

:root {
	--penair-pink: #9E007E;
	--penair-purple: #6d2077;
	--penair-purple-dark: #5a1a63;
	--penair-gold: #FFE55F;
	--penair-gold-light: #f5e6b8;
	--penair-black: #000000;
	--penair-gray: #4a4a4a;
	--penair-gray-light: #f5f5f5;
	--penair-gray-border: #C2D1D9;
	--penair-white: #FFFFFF;
}

.co-dataTracWidget {
	color: var(--penair-black);
}

.dt_walletshare {
	font-family: "gopher", sans-serif;
	position: relative;
	background: #DEDEDE;
	border-radius: 15px;
	padding: 17px 14px 0 38px;
	margin-bottom: 12px;
	max-width: 1216px;
}

.dt_walletshare * {
	box-sizing: border-box;
}

/* Products Navigation - Positioned to appear above form fields */
.dt_walletshare .products_nav {
	position: absolute;
	top: 1rem;
	left: 2.375rem;
	z-index: 10;
}

.dt_walletshare .prod_classes_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.dt_walletshare .market_ids {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.375rem;
}

/* Placeholder for dropdown when moved into product */
.dt_walletshare .market_dropdown_placeholder {
	margin-bottom: 1.5rem;
}

.dt_walletshare .market_dropdown_placeholder .market_ids {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
}
@media screen and (max-width: 768px) {
	.dt_walletshare .market_dropdown_placeholder .market_ids {
		flex-direction: column;
		align-items: flex-start;
	}
}
.dt_walletshare .market_ids label {
	color: var(--penair-black);
	font-weight: 500;
	font-size: 19px;
	line-height: 100%;
	margin: 0;
	white-space: nowrap;
}
@media screen and (max-width: 768px) {
	.dt_walletshare .market_ids label {
		font-size: 16px;
		padding-left: 14px;
		white-space: normal;
	}
}
.dt_walletshare .select_mkt {
	padding: 10px 22px;
	border: 1px solid #C2D1D9;
	border-radius: 90px;
	font-family: "gopher", sans-serif;
	font-weight: 500;
	font-size: 19px;
	height: 47px;
	line-height: 100%;
	width: 100%;
	min-width: 200px;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%234a4a4a" d="M6 9L1 4h10z"/></svg>') no-repeat right 1rem center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Products Wrap */
.dt_walletshare .productcontainer.template {
	display: none;
}

.dt_walletshare .productcontainer:not(.show) {
	display: none;
}

.dt_walletshare .driver-title {
	display: none;
}

/* Inner Layout */
.dt_walletshare .inner {
	display: grid;
	grid-template-columns: 0.7fr 0.05fr 1fr 1fr;
	gap: 25px;
	align-items: start;
}

@media screen and (max-width: 992px) {
	.dt_walletshare .inner {
		gap: 15px;
	}
}

.dt_walletshare .horizontal_line {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.dt_walletshare .horizontal_line span {
	background-color: #B3B3B3;
	border-radius: 10px;
	margin: 1.5rem 0;
	height: calc(100% - 40px);
	width: 5px;
}

@media screen and (max-width: 992px) {
	.dt_walletshare .horizontal_line span {
		height: 5px;
		width: 100%;
	}
}

@media (max-width: 992px) {
	.dt_walletshare .inner {
		grid-template-columns: 1fr;
	}
}

/* Form Section */
.dt_walletshare .sec_amt_type {
	padding-top: 10px;
}

@media screen and (max-width: 768px) {
	.dt_walletshare .sec_amt_type {
		padding-top: 0;
	}
}

.dt_walletshare .sec_amt_type form {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.dt_walletshare .field_amount,
.dt_walletshare .field_prod,
.dt_walletshare .field_myrate {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dt_walletshare .sec_amt_type label {
	font-weight: 500;
	font-size: 19px;
	line-height: 100%;
	color: var(--penair-black);
	margin-bottom: 10px;
	margin-top: 10px;
	padding-left: 14px;
}

@media screen and (max-width: 992px) {
	.dt_walletshare .sec_amt_type label {
		font-size: 16px;
	}
}
.dt_walletshare .field_amount {
	position: relative;
	text-transform: capitalize;
}

.dt_walletshare .field_amount .input_prefix {
	font-family: "azo-sans-uber", sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 100%;
	position: absolute;
	left: 24px;
	top: 50%;
	color: var(--penair-black);
	margin-top: 1rem;
}

.dt_walletshare .sec_amt_type input[type="number"],
.dt_walletshare .sec_amt_type select,
.dt_walletshare .select_mkt {
	padding: 10px 22px;
	border: 1px solid #C2D1D9;
	border-radius: 90px;
	font-family: "gopher", sans-serif;
	font-size: 19px;
	font-weight: 500;
	height: 47px;
	font-size: 19px;
	line-height: 100%;
	color: var(--penair-black);
	width: 100%;
	background: var(--penair-white);
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	.dt_walletshare .select_mkt {
			padding: 8px 22px;
	}
}

.dt_walletshare .field_amount input[type="number"] {
	color: #707070;
	padding-left: 47px;
}

.dt_walletshare .field_myrate .input_wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.dt_walletshare .field_myrate input[type="number"] {
	padding-right: 2rem;
}

.dt_walletshare .field_myrate .input_suffix {
	position: absolute;
	top: 15px;
	right: 19px;
	color: var(--penair-gray);
	font-weight: 600;
}

.dt_walletshare .sec_amt_type select,
.dt_walletshare .select_mkt {
	padding-right: 2.5rem;
	background: #fff url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8.5 8.5L14.4075 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat right 22px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

.dt_walletshare .error {
	color: #d32f2f;
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

.dt_walletshare .error.hide {
	display: none;
}

.dt_walletshare .field_myrate.hide {
	display: none;
}

/* Rate Bars Section */
.dt_walletshare .sec_ratebars {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 25px;
}

@media screen and (max-width: 768px) {
	.dt_walletshare .sec_ratebars {
		padding-top: 0;
	}
	.dt_walletshare .sec_ratebars .fi .bar .bar_inner,
	.dt_walletshare .sec_ratebars .fi .bar .fi_rate,
	.dt_walletshare .sec_ratebars .fi .bar .apr_apy,
	.dt_walletshare .sec_ratebars .market .bar .bar_inner,
	.dt_walletshare .sec_ratebars .market .bar .market_rate,
	.dt_walletshare .sec_ratebars .market .bar .apr_apy {
		font-size: 13px;
	}
}

.dt_walletshare .sec_ratebars .fi,
.dt_walletshare .sec_ratebars .market {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dt_walletshare .sec_ratebars .bar_wrap {
	position: relative;
	height: 49px;
	border: 1px solid #FFFFFF;
	border-radius: 5px;
	overflow: hidden;
}

.dt_walletshare .sec_ratebars .fi .bar_wrap {
	background: #9E007E1A;
}

.dt_walletshare .sec_ratebars .fi .bar {
	background: #A31D88;
	color: #fff;
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: center;
	height: 100%;
	border-radius: 0 25px 25px 0;
}

.dt_walletshare .bar .bar_inner {
	position: absolute;
	right: 15px;
	line-height: 1;
}

.dt_walletshare .sec_ratebars .apr_apy,
.dt_walletshare .sec_ratebars .market_rate,
.dt_walletshare .sec_ratebars .bar .fi_rate,
.dt_walletshare .sec_ratebars .bar .market_rate {
	font-family: "gopher", sans-serif;
}

.dt_walletshare .sec_ratebars .fi .bar .bar_inner,
.dt_walletshare .sec_ratebars .fi .bar .fi_rate,
.dt_walletshare .sec_ratebars .fi .bar .apr_apy {
	color: #A31D88;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.dt_walletshare .sec_ratebars .market .bar .bar_inner,
.dt_walletshare .sec_ratebars .market .bar .market_rate,
.dt_walletshare .sec_ratebars .market .bar .apr_apy {
	color: var(--penair-white);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.dt_walletshare .sec_ratebars .rate_asterisk {
	font-family: "gopher", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
}

.dt_walletshare .sec_ratebars .display_myrate,
.dt_walletshare .sec_ratebars .percent_sign {
	font-family: "gopher", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
}

@media screen and (max-width: 768px) {
	.dt_walletshare .sec_ratebars .fi .bar .bar_inner,
	.dt_walletshare .sec_ratebars .fi .bar .rate_fi,
	.dt_walletshare .sec_ratebars .fi .bar .apr_apy,
	.dt_walletshare .sec_ratebars .market .bar .bar_inner,
	.dt_walletshare .sec_ratebars .market .bar .rate_mkt,
	.dt_walletshare .sec_ratebars .market .bar .apr_apy {
		font-size: 13px;
	}
}

.dt_walletshare .sec_ratebars .market .bar_wrap {
	background: rgba(0,0,0,0.35);
}

.dt_walletshare .sec_ratebars .market .bar {
	background: #302723;
	color: #fff;
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: center;
	height: 100%;
	border-radius: 0 25px 25px 0;
}

.dt_walletshare .sec_ratebars .label {
	color: #000000;
	font-family: "gopher", sans-serif;
	font-size: 19px;
	line-height: 100%;
	margin-top: 15px;
}

.dt_walletshare .sec_ratebars .label .fi_shortname,
.dt_walletshare .sec_ratebars .label .str_myrate,
.dt_walletshare .sec_ratebars .label .market_name,
.dt_walletshare .sec_ratebars .label .str_average {
	display: inline-block;
	font-weight: 700;
	margin-bottom: 10px;
}

.dt_walletshare .sec_ratebars .prod_override_disclaimer_short {
	font-size: 0.75rem;
	color: #666;
}

/* Savings Section */
.dt_walletshare .sec_save_earn {
	background: var(--penair-pink);
	border: 2px solid #7C0063;
	border-radius: 8px;
	padding: 2.25rem;
	text-align: center;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 313px;
	height: 100%;
}

.dt_walletshare .subtotal_dyn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.dt_walletshare .you_ll_save {
	display: block;
	font-family: "gopher", sans-serif;
	font-weight: 700;
	font-style: Bold;
	font-size: 25px;
	line-height: 100%;
	text-align: center;
	text-transform: uppercase;
	color: var(--penair-white);
}

.dt_walletshare .toggle_details {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
	vertical-align: middle;
	margin-left: 0.25rem;
}

.dt_walletshare .toggle_details:hover {
	background: rgba(255, 255, 255, 0.5);
}

.dt_walletshare .dollar_sign {
	display: inline-block;
	font-family: "azo-sans-uber", sans-serif;
	font-weight: 400;
	font-size: 90px;
	line-height: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #FFE55F;
}

.dt_walletshare .prod_savings_earnings {
	display: inline-block;
	font-family: "azo-sans-uber", sans-serif;
	font-weight: 400;
	font-size: 90px;
	line-height: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #FFE55F;
}

.dt_walletshare .outperform_text {
	display: block;
	font-family: "gopher", sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 100%;
	text-align: center;
	color: var(--penair-white);
	margin-top: 0.5rem;
}

.dt_walletshare .neg_or_low_savings_stmt {
	display: none;
	font-size: 14px;
	line-height: 1.4;
}

.dt_walletshare .neg_or_low_savings_stmt a {
	color: var(--penair-gold);
}

.dt_walletshare .productcontainer.neg_or_low_savings .prod_savings_earnings,
.dt_walletshare .productcontainer.neg_or_low_savings .outperform_text,
.dt_walletshare .productcontainer.neg_or_low_savings .dollar_sign {
	display: none;
}

.dt_walletshare .productcontainer.neg_or_low_savings .neg_or_low_savings_stmt {
	display: block;
}

/* Messaging Section */
.dt_walletshare .sec_messaging {
	display: none;
	background: var(--penair-gold-light);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 1rem;
}

.dt_walletshare .productcontainer.show_details .sec_messaging {
	display: block;
}

.dt_walletshare .sec_messaging .content {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--penair-gray);
}

.dt_walletshare .sec_messaging hr {
	border: 0;
	border-top: 1px solid var(--penair-gray-border);
	margin: 1rem 0;
}

.dt_walletshare .sec_messaging .toggle_details.close {
	display: inline-block;
	background: var(--penair-purple);
	color: #fff;
	padding: 0.5rem 1.5rem;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
}

.dt_walletshare .sec_messaging .toggle_details.close:hover {
	background: var(--penair-purple-dark);
}

/* Footer Section */
.dt_walletshare .footer_row {
	background-color: #D0D0D0;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 12px;
	position: relative;
}

.dt_walletshare .footer_row:before {
	content: "";
	background-color: #D0D0D0;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	position: absolute;
	z-index: 0;
	left: -38px;
	top: 0;
	height: 100%;
	width: calc(100% + 52px);
}

@media screen and (max-width: 768px) {
	.dt_walletshare .footer_row {
		margin-top: 25px;
		padding-top: 20px;
		padding-bottom: 0;
	}

	.dt_walletshare .footer_row:before {
		left: -24px;
		height: calc(100% + 20px);
		width: calc(100% + 48px);
	}
}

.dt_walletshare .sec_gra_cert {
	position: relative;
	text-align: center;
	z-index: 1;
}

.dt_walletshare .gra_sec_msg {
	font-family: "gopher", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	color: var(--penair-black);
	margin: 0;
}

.dt_walletshare .gra_sec_msg a {
	color: var(--penair-purple);
	text-decoration: underline;
}

/* CTA Section */
.dt_walletshare_cta {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 38px;
	flex-wrap: wrap;
	padding: 9px 32px 30px;
}

.dt_walletshare_cta--text {
	color: var(--penair-black);
	font-family: "gopher", sans-serif;
	font-weight: 500;
	font-size: 25px;
	line-height: 100%;
	text-align: right;
	margin: 0;
}

@media screen and (max-width: 768px) {
	.dt_walletshare_cta {
		justify-content: center;
		gap: 20px;
		padding-top: 17px;
	}

	.dt_walletshare_cta--text {
		text-align: center;
	}
}

.dt_walletshare_cta--button {
	display: inline-block;
	background: var(--penair-white);
	color: var(--penair-pink);
	border: 2px solid #EED653;
	padding: 12px 30px;
	border-radius: 25px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.dt_walletshare_cta--button:hover {
	background: var(--penair-purple);
	color: #fff;
}

/* Loading Overlay */
.dt_walletshare .loading-overlay {
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
	.dt_walletshare {
		padding: 20px 24px;
	}

	.dt_walletshare .inner {
		grid-template-columns: 1fr;
	}

	.dt_walletshare .dollar_sign,
	.dt_walletshare .prod_savings_earnings {
		font-size: 70px;
	}
}

/* Updating Animation */
.dt_walletshare .subtotal_dyn.updating .prod_savings_earnings {
	animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Bar Animation */
.dt_walletshare .bar.changing {
	animation: barChange 0.3s ease-in-out;
}

@keyframes barChange {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}