@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

@import "nx/nx.css";
@import "nx/nx_buttons.css";
@import "nx/nx_privacy_1.css";

:root {
	/*Colors*/
	--primary: var(--p-primary-500);

	--p-primary-50:  #e9eff7;
	--p-primary-100: #ccd8ea;
	--p-primary-200: #9eb8d7;
	--p-primary-300: #7098c4;
	--p-primary-400: #4c7cb0;
	--p-primary-500: #2B509C;
	--p-primary-600: #264689;
	--p-primary-700: #213c76;
	--p-primary-800: #19335E;
	--p-primary-900: #17284f;
	--p-primary-950: #111d39;

	--container-max-width: 1330px;

	--accent: #33BDB2;
	--accent-bg: #D5F1F0;
	--cta: #F0E149;
	--cta-hover: #96A827;

	--body-text-font: 'Nunito', sans-serif;
	--body-text-color: var(--text-medium);
	--body-text-size: 16px;

	--bg-dark: var(--p-primary-800);
	--bg-medium: var(--p-primary-50);
	--bg-light: #F7F7F7;

	--border-light: #E6E6E6;

	--text-dark: var(--p-primary-800);
	--text-medium: #8d8d8d;
	--text-light: #DDD;
	--link-color: var(--accent);

	--text-header-font: 'Nunito', sans-serif;
	--text-header-size: clamp(24px, 4vw, 40px);
	--text-header-weight: 700;
	--text-header-color: var(--text-dark);

	--text-subheader-size: clamp(19px, 2vw, 24px);
	--text-subheader-weight: 300;
	--text-subheader-font: var(--body-text-font);
	--text-subheader-color: var(--body-text-color);

	--page-header-border-radius: 60px;
	--header-bg: var(--body-bg);
	--header-padding-y: 25px;
	--header-mobile-padding-y: 10px;
	--header-fixed-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	--header-color: var(--text-header-color);
	--header-main-links-xl-gap: 40px;
	--header-main-nav-text-size: 16px;
	--header-main-nav-hover-color: var(--text-header-color);
	--header-main-nav-underline-color: var(--text-header-color);
	--header-active-color: var(--text-header-color);
	--header-logo-height: 60px;
	--header-mobile-color: var(--text-header-color);
	--header-mobile-size: 16px;
	--header-mobile-weight: 700;
	--header-mobile-hover-color: var(--text-inverse);
	--header-mobile-hover-bg-color: var(--cta);
	--header-toggle-bg: var(--bg-dark);
	--header-toggle-bg-hover: var(--primary);
	--header-login-dropdown-margin-right: 120px;
	--top-header-text-size: 14px;
	--top-header-hover: var(--primary);

	--footer-bg: var(--bg-dark);
	--footer-text-color: var(--text-inverse);
	--footer-text-size: 16px;
	--footer-dso-logo-height: 65px;
	--footer-text-hover: var(--accent);
	--footer-nav-border-top-color: white;

	--home-plan-card-image-height: 57px;

	--page-header-max-height: 375px;

	--find-your-dentist-form-height: 74px;
	--find-your-dentist-form-border-radius: 13px;
	--find-your-dentist-form-max-width: 500px;
	--find-your-dentist-form-btn-border-radius: 10px;
	--find-your-dentist-form-y-padding: 10px;
	--find-your-dentist-form-x-padding: 10px;
	--find-your-dentist-form-btn-text-size: 16px;
	--find-your-dentist-form-text-size: 16px;
	--find-your-dentist-form-btn-bg: var(--cta);
	--find-your-dentist-form-btn-text-color: var(--text-header-color);
	--find-your-dentist-form-btn-hover-bg: var(--cta-hover);

	--p-carousel-indicator-active-background: var(--accent);

	--savings-summary-bg: var(--accent-bg);
	--savings-table-section-bg: var(--accent-bg);
	--savings-summary-note-size: 16px;
	--savings-summary-note-weight: 500;

	--custom-table-border-color: transparent;
	--custom-table-border-radius: 0;
	--custom-table-header-bg: var(--accent);
	--custom-table-header-size: clamp(15px, 2vw, 18px);
	--custom-table-body-border-color: #CECECE;
	--custom-table-body-bg: var(--accent-bg);
	--custom-table-row-full-bg: var(--bg-dark);
	--custom-table-row-full-text-align: left;
	--custom-table-row-full-weight: 700;
	--custom-table-row-full-size: clamp(16px, 2vw, 20px);
	--custom-table-body-color: var(--text-header-color);
	--custom-table-body-size: clamp(16px, 2vw, 20px);
	--custom-table-body-last-col-weight: 700;


	--find-wrapper-bg: var(--bg-dark);
	--find-steps-title-size: clamp(25px, 4vw, 40px);
	--find-form-search-btn-office-label-display: none;
	--find-form-border-color: var(--bg-dark);
	--find-steps-border-top-radius: 100px;
	--find-steps-border-top-mobile-radius: 40px;
	--find-steps-icon-size: 100px;
	--find-steps-active-icon-color: var(--accent-bg);
	--find-steps-inactive-icon-color: var(--accent-bg);
	--find-steps-completed-icon-color: var(--accent-bg);
	--find-steps-subtitle-size: clamp(19px, 2vw, 24px);
	--find-steps-subtitle-weight: 400;
	--find-steps-completed-bg: transparent;
	--find-steps-complete-check-bg: var(--accent-bg);
	--find-steps-number-size: 40px;
	--find-steps-number-mobile-size: 32px;
	--find-steps-number-text-color: #444;
	--find-steps-number-text-weight: 700;
	--find-steps-number-text-size: clamp(17px, 2vw, 20px);
	--find-steps-text-size: clamp(15px, 2vw, 20px);
	--find-steps-weight: 700;
	--find-form-label-color: var(--text-dark);
	--find-content-border-radius: 50px;
	--find-content-border-color: transparent;
	--find-content-border-mobile-radius: 10px;
	--find-content-bg: var(--bg-light);
	--find-office-select-btn-height: 42px;
	--find-office-select-btn-border-radius: 10px;
	--find-office-select-btn-font-size: 18px;
	--find-office-details-title-size: 20px;
	--find-office-details-title-weight: 700;
	--find-office-details-title-font:var(--text-header-font);
	--find-office-details-title-color: var(--text-header-color);
	--find-office-details-content-size: 16px;
	--find-office-details-content-color: var(--text-dark);
	--find-results-title-size: 20px;
	--find-office-details-phone-weight: 600;
	--find-office-details-phone-color: var(--text-header-color);
	--find-results-title-weight: 600;
	--find-results-title-color: var(--text-dark);
	--find-map-border-color: var(--bg-dark);
	--find-map-border-width: 1px;

	--faq-entry-border-color: transparent;
	--faq-entry-bg: var(--accent-bg);
	--faq-entry-title-color: var(--text-header-color);
	--faq-entry-title-size: clamp(17px, 2vw, 20px);
	--faq-open-icon-bg: var(--accent);
	--faq-close-icon-bg: var(--accent);
	--faq-entry-title-weight: 700;
	--faq-answer-size: 18px;
	--faq-answer-weight: 500;
	--faq-contact-bg: var(--bg-dark);
	--faq-image-bg: transparent;
	--faq-contact-info-title-color: var(--text-inverse);
	--faq-contact-info-title-size: clamp(22px, 4vw, 40px);
	--faq-contact-info-text-color: var(--text-inverse);
	--faq-contact-info-text-size: clamp(16px, 2vw, 21px);
	--faq-contact-margin-top: clamp(60px, 8vw, 160px);
	--faq-contact-info-btn-width: clamp(180px, 20vw, 300px);
	--faq-padding-bottom: clamp(20px, 4vw, 80px);
	--faq-link-color: var(--text-header-color);

	--support-page-bg: var(--body-bg);
	--support-wrapper-border-width: 0;
	--support-info-bg: var(--bg-dark);
	--support-info-title-size: clamp(20px, 2vw, 24px);
	--support-info-text-size: 14px;
	--support-form-label-font: var(--text-header-font);
	--support-form-label-weight: 400;
	--support-form-label-color: var(--text-header-color);
	--support-form-label-size: 12px;

	--signup-label-color: var(--text-header-color);
	--signup-content-bg: var(--bg-light);
	--join-now-title-text-align: center;
	--join-now-title-justify: center;
	--signup-summary-title-size: 18px;
	--signup-summary-title-weight: 700;
	--signup-summary-title-font: var(--body-text-font);
	--signup-summary-body-entry-size: 17px;
	--signup-summary-body-entry-color: var(--text-medium);
	--signup-summary-disclaimer-entry-size: 14px;
	--signup-summary-total-row-size: 14px;
	--signup-summary-totals-border-color: var(--bg-dark);
	--signup-summary-link-color: #33B2E2;
	--signup-summary-annual-cost-bg: #E9EFFF;
	--signup-summary-due-now-bg: var(--bg-dark);
	--signup-summary-due-now-color: var(--text-inverse);

	--login-form-subtitle-display: block;
	--login-form-subtitle-size: 14px;
	--login-form-label-size: 14px;
	--login-form-label-color: var(--text-header-color);
	--login-forgot-link-color: var(--accent);

	--button-border-radius: 999px;
	--button-padding-x: 25px;
}

@layer components {
	/* CTA Button */
	.faq-contact-btn,
	.home-questions-faq-btn,
	.find-your-dentist-form-btn,
	.find-select-office-btn,
	.find-form-search-btn,
	.home-savings-btn,
	.home-how-btn,
	.home-plans-btn,
	.home-perks-btn,
	.header-join-now-btn,
	.header-logout-btn,
	.savings-summary-btn,
	.checkout-success-btn,
	.login-btn,
	.submit-reset-btn,
	.login-forgot-submit-btn {
		color: var(--text-header-color);
		background-color: var(--cta);
		border-color: var(--cta);

		&:hover:not(:disabled) {
			background-color: var(--cta-hover);
			border-color: var(--cta-hover);
		}
	}

	/* Dark Button */
	.support-send-btn {
		color: var(--text-inverse);
		background-color: var(--bg-dark);
		border-color: var(--bg-dark);
	}

	/* Outlined Dark */
	.add-dependent-btn,
	.find-form-clear-btn,
	.find-clear-filters-btn,
	.scheduleButton,
	.login-go-back-btn {
		color: var(--text-header-color);
		background-color: transparent;
		border-width: 1px;
		border-color: var(--bg-dark);

		&:hover:not(:disabled) {
			background-color: var(--bg-dark);
			color: var(--text-inverse);
		}
	}

	/** White Outlined */
	.faq-contact-additional-btn,
	.home-questions-contact-btn,
	.support-faq-link {
		color: var(--text-inverse);
		background-color: transparent;
		border-color: white;

		&:hover:not(:disabled) {
			background-color: white;
			color: var(--text-header-color);
		}
	}

	.start-btn {
		background-color: #F0E14A;
		color: var(--text-header-color);
		font-size: 18px;
		border-radius: 10px;
		height: 61px;
	}

	.support-link {
		border-radius: 8px;
		border-color: var(--border-light);
		background-color: var(--body-bg);
		height: 32px !important;
		font-size: 12px !important;
		font-weight: 700;
		color: var(--text-dark);

		&:hover {
			color: #004a43;
		}
	}
}

.home {
	--custom-table-margin-top: 32px;

	--header-position: fixed;
	--header-bg: transparent;
	--header-fixed-bg: var(--bg-dark);
	--header-open-bg: var(--bg-dark);
	--header-mobile-nav-bg: var(--bg-dark);
	--header-mobile-color: var(--text-inverse);
	--header-fixed-color: var(--text-inverse);
	--header-main-nav-fixed-hover-color: var(--text-inverse);
	--header-hover-color: var(--text-inverse);
	--header-main-nav-hover-color: var(--text-inverse);
	--header-main-nav-underline-color: var(--text-inverse);
	--header-active-color: var(--text-inverse);
	--header-color: var(--text-inverse);
	--header-logo-alt-display: block;
	--header-logo-display: none;
	--header-logo-alt-fixed-display: block;
	--header-logo-fixed-display: none;
	--header-logo-open-display: none;
	--header-logo-alt-open-display: block;

	--custom-table-border-color: transparent;
	--custom-table-body-bg: transparent;
	--custom-table-header-bg: transparent;
	--custom-table-header-font: var(--body-text-font);
	--custom-table-header-size: clamp(15px, 2vw, 18px);
	--custom-table-body-border-width: 1px;
	--custom-table-body-border-color: var(--text-inverse);
	--custom-table-body-color: var(--text-inverse);
	--custom-table-body-size: clamp(16px, 2vw, 20px);
	--custom-table-body-last-col-weight: 700;
	--savings-summary-note-color: var(--text-inverse);
}

.support .main-content .support,
.savings-summary .main-content .savings-summary {
	background-color: var(--accent-bg);
	max-width: var(--container-max-width);
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 80px;
	width: 100%;
	border-radius: 50px;

	@media (min-width: 992px) {
		padding-left: 64px;
		padding-right: 64px;
	}
}