/* Dental Advice Network -- minimal dashboard styling.
   Intentionally light-touch: match styles.css from the approved HTML
   prototype for real visual polish (spec section 17). This file only
   guarantees the shortcodes are usable/readable out of the box. */

.dan-balance-card {
	border: 1px solid #d8dfe3;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin: 1rem 0;
}

.dan-balance-card.dan-state-grace {
	border-color: #e2a03f;
	background: #fff8ec;
}

.dan-balance-card.dan-state-lapsed {
	border-color: #c94b4b;
	background: #fdf1f1;
}

.dan-account-type {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.75rem;
	opacity: 0.7;
	margin: 0 0 0.5rem;
}

.dan-balance-label {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.7rem;
	opacity: 0.6;
	margin: 0;
}

.dan-balance-count {
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.dan-confirmation-card {
	border: 1px solid #d8dfe3;
	border-radius: 8px;
	padding: 1.5rem;
	margin: 1rem 0;
}

.dan-confirmation-message {
	font-weight: 600;
	margin: 0 0 1rem;
}

.dan-confirmation-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.dan-confirmation-facts dt {
	opacity: 0.65;
}

.dan-confirmation-facts dd {
	margin: 0;
	font-weight: 600;
}

.dan-button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	background: #1d4e5f;
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
}

.dan-button:hover {
	background: #163b48;
	color: #fff !important;
}

.dan-locked-notice {
	border: 1px dashed #c3ccd1;
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
}

.dan-history-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

.dan-history-table th,
.dan-history-table td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid #e5e9eb;
}

.dan-notice {
	opacity: 0.75;
}

/* Toolbar above the certificate card, matching the approved prototype's
   "Live event" / "Recording" / "Download PDF" button row 1:1 (values read
   via getComputedStyle() off the live prototype). The two left pills are
   display-only state indicators here (see renderCertificate() docblock),
   not the prototype's manual preview-toggle links. */
.dan-certificate-toolbar {
	display: flex;
	justify-content: flex-end;
	gap: 11px;
	max-width: 880px;
	margin: 0 auto 1rem;
}

.dan-cert-pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid #b6cfdd;
	border-radius: 11px;
	padding: 11px 19px;
	background: #fff;
	color: #082b50 !important;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	cursor: default;
}

.dan-cert-pill.is-active {
	border-color: #082b50;
	background: #082b50;
	color: #fff !important;
}

.dan-cert-pill-primary,
.dan-cert-pill-primary.is-active {
	border-color: transparent;
	background: #078ec5 !important;
	color: #fff !important;
	cursor: pointer;
}

.dan-cert-pill-primary:hover {
	background: #0278a9 !important;
}

@media (max-width: 640px) {
	.dan-certificate-toolbar {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* Certificate visuals matched pixel-for-pixel against the DAN-approved
   prototype (dashboard-folder/certificate.html + styles.css): 880px card,
   12px navy border with an inset 2px blue outline, Georgia serif name/title,
   and a 3-column light-blue fact grid. Colour tokens copied from that
   prototype's :root custom properties. */
.dan-certificate {
	--dan-cert-navy: #082b50;
	--dan-cert-blue: #078ec5;
	--dan-cert-blue-dark: #0278a9;
	--dan-cert-sky: #e9f7fc;
	--dan-cert-ink: #172638;
	--dan-cert-muted: #617286;
	max-width: 880px;
	margin: 2rem auto;
	padding: 54px;
	border: 12px solid var(--dan-cert-navy);
	outline: 2px solid var(--dan-cert-blue);
	outline-offset: -21px;
	background: #fff;
	text-align: center;
	box-shadow: 0 18px 55px rgba(8, 43, 80, 0.11);
}

.dan-certificate-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--dan-cert-navy) !important;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.dan-certificate-brand-mark {
	position: relative;
	flex: none;
	width: 38px;
	height: 38px;
	border: 6px solid var(--dan-cert-navy);
	border-radius: 50%;
}

.dan-certificate-brand-mark::after {
	content: "";
	position: absolute;
	inset: 7px -10px 7px 17px;
	border-radius: 99px;
	background: var(--dan-cert-blue);
}

.dan-certificate-type {
	margin: 32px 0 7px;
	color: var(--dan-cert-blue-dark) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 14px; /* Task 213: was 0.75rem -- rem is relative to the site
	   root font-size (10px here, a 62.5% reset), not the usual 16px, so this
	   rendered at an unreadable ~7.5px. Fixed px instead. */
	font-weight: 850;
}

.dan-certificate p {
	margin: 1rem 0;
	color: var(--dan-cert-ink);
	font-size: 14px; /* Task 213: same rem-vs-10px-root issue -- was ~10px */
}

.dan-certificate-name {
	margin: 28px 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid #90a4b4;
	color: var(--dan-cert-navy) !important;
	font-family: Georgia, serif;
	font-size: 44px; /* Task 213: a bit bigger, was 38px */
	font-weight: 400;
}

.dan-certificate h2 {
	margin: 0;
	color: var(--dan-cert-navy) !important;
	font-family: Georgia, serif !important; /* Task 229: Breakdance global .breakdance h2 rule ties specificity and wins by source order without !important */
	font-size: 50px; /* Task 213: a bit bigger, was 48px */
	font-weight: 700;
	letter-spacing: -1.68px; /* Task 229: match reference mockup tracking */
}

.dan-certificate-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 34px 0;
}

.dan-certificate-fact {
	padding: 15px;
	background: var(--dan-cert-sky);
}

.dan-certificate-fact span {
	color: var(--dan-cert-ink);
	font-size: 13px; /* Task 213: rem-vs-10px-root fix, was ~10px */
}

.dan-certificate-fact strong {
	display: block;
	color: var(--dan-cert-navy) !important;
	font-size: 18px; /* Task 213: rem-vs-10px-root fix + a bit bigger, was ~10px */
	font-weight: 700;
}

.dan-certificate-cpd-note {
	color: var(--dan-cert-ink);
}

.dan-certificate-verification {
	color: var(--dan-cert-muted) !important;
	font-size: 13px; /* Task 213: rem-vs-10px-root fix, was ~10px */
}

@media (max-width: 640px) {
	.dan-certificate {
		padding: 34px 20px;
		border-width: 8px;
	}

	.dan-certificate-facts {
		grid-template-columns: 1fr;
	}

	.dan-certificate h2 {
		font-size: 34px;
	}

	.dan-certificate-name {
		font-size: 30px;
	}
}

/* Membership plans (public tier comparison, [dan_membership_plans]).
   Colour tokens matched to the DAN-approved prototype's styles.css so this
   page doesn't look like a different product from the rest of the site. */
.dan-plans-section {
	--dan-navy: #082b50;
	--dan-blue: #078ec5;
	--dan-blue-dark: #0278a9;
	--dan-muted: #617286;
	--dan-line: #dbe4eb;
	--dan-success: #16845b;
	margin: 0 auto;
	padding: 2.5rem 1rem;
	text-align: center;
}

.dan-eyebrow {
	color: var(--dan-blue) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
}

.dan-plans-heading {
	color: var(--dan-navy) !important;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 1rem;
}

.dan-plans-subhead {
	color: var(--dan-muted) !important;
	max-width: 640px;
	margin: 0 auto 0.5rem;
}

.dan-plans-note {
	color: var(--dan-muted) !important;
	font-size: 0.9rem;
	max-width: 640px;
	margin: 0 auto 2rem;
}

.dan-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
	text-align: left;
	margin: 0 0 1.5rem;
}

@media (max-width: 860px) {
	.dan-plans {
		grid-template-columns: 1fr;
	}
}

.dan-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--dan-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(8, 43, 80, 0.06);
}

.dan-plan-featured {
	border: 2px solid var(--dan-blue);
	box-shadow: 0 18px 55px rgba(8, 43, 80, 0.11);
	transform: translateY(-6px);
}

.dan-plan-badge {
	position: absolute;
	top: -13px;
	right: 20px;
	padding: 6px 11px;
	border-radius: 999px;
	color: #fff !important;
	background: var(--dan-blue) !important;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dan-plan h3 {
	color: var(--dan-navy) !important;
	margin: 0.25rem 0 0.4rem;
}

.dan-plan-description {
	color: var(--dan-muted) !important;
	margin: 0 0 0.75rem;
	min-height: 2.6em;
}

.dan-price {
	margin: 0.5rem 0 0.25rem;
	color: var(--dan-navy) !important;
	font-size: 2rem;
	font-weight: 850;
}

.dan-price small {
	color: var(--dan-muted) !important;
	font-size: 0.8rem;
	font-weight: 600;
}

.dan-plan-renewal-note {
	color: var(--dan-muted) !important;
	font-size: 0.8rem;
	margin: 0 0 1rem;
}

.dan-plan .dan-check-list {
	display: grid;
	gap: 0.65rem;
	padding: 0;
	margin: 0 0 1.5rem;
	list-style: none;
	flex-grow: 1;
}

.dan-plan .dan-check-list li {
	position: relative;
	padding-left: 1.5rem;
	color: #475a6d !important;
	font-size: 0.92rem;
}

.dan-plan .dan-check-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--dan-success) !important;
	font-weight: 900;
}

.dan-plan .dan-button {
	margin-top: auto;
	text-align: center;
	background: var(--dan-blue) !important;
	color: #fff !important;
}

.dan-plan .dan-button:hover {
	background: var(--dan-blue-dark) !important;
}

.dan-team-cta {
	color: var(--dan-muted) !important;
	margin: 0 0 2rem;
}

.dan-team-cta a {
	color: var(--dan-blue-dark) !important;
	font-weight: 700;
	text-decoration: underline;
}

.dan-changing-membership {
	text-align: left;
	max-width: 640px;
	margin: 0 auto;
	padding: 1.5rem clamp(20px, 3vw, 30px);
	border: 1px solid var(--dan-line, #dbe4eb);
	border-radius: 18px;
	background: #fff;
}

.dan-changing-membership h3 {
	color: var(--dan-navy, #082b50) !important;
	margin: 0 0 0.5rem;
}

.dan-changing-membership hr {
	border: none;
	border-top: 1px solid var(--dan-line, #dbe4eb);
	margin: 1rem 0;
}

.dan-changing-membership a {
	color: var(--dan-blue-dark, #0278a9) !important;
	font-weight: 700;
}

/* Register page order-summary card content (register.html?tier=X parity).
   Uses fallback values on any custom property, since this card is not
   guaranteed to sit inside .dan-plans-section on every page it's used on. */
.dan-order-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0.4rem 0;
	color: var(--dan-navy, #082b50);
}

.dan-order-row .dan-order-label {
	color: var(--dan-muted, #617286);
}

.dan-order-row strong {
	font-weight: 700;
}

.dan-order-row.dan-order-total strong {
	font-size: 1.15rem;
}

.dan-order-notice {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	padding: 1.05rem 1.2rem;
	border: 1px solid #b7ddec;
	border-radius: 14px;
	color: #174c64;
	background: #eaf6fb;
	margin-top: 1.25rem;
}

.dan-order-notice.dan-notice-success {
	color: #135e45;
	border-color: #b9e5d1;
	background: #e8f7f0;
}

.dan-order-notice strong {
	display: block;
	color: inherit;
}

.dan-order-notice p {
	margin: 0.2rem 0 0;
	color: inherit;
}

.dan-order-cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 1.5rem;
	padding: 0.85rem 1.2rem;
	border-radius: 8px;
	background: #1d4e5f;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
}

.dan-order-cta:hover {
	background: #163b48;
	color: #fff !important;
}

/* Printable layout must not include site chrome (spec section 17). Pair
   this with a Breakdance page template that has no header/footer for the
   certificate page, or rely on this print rule as a fallback. */
@media print {
	.dan-print-hide,
	.site-header,
	.site-footer,
	header,
	footer,
	nav {
		display: none !important;
	}

	.dan-certificate {
		border: none;
		margin: 0;
	}
}


/* Task 256: [dan_schedule_essential] -- Basic member "switch to Essential
 * at renewal" widget. Self-contained/scoped styles (not reusing .dan-button,
 * which is an older teal fallback that doesn't match the approved DAN Blue
 * design-system tokens used on the real popup mockup) so this always renders
 * true to the approved screenshot regardless of what else is on the page. */
.dan-schedule-essential-open {
	font: inherit;
	cursor: pointer;
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border-radius: 11px;
	border: 1px solid #078ec5;
	background: #fff;
	color: #078ec5;
	font-weight: 600;
	font-size: 0.85rem;
}
.dan-schedule-essential-open:hover {
	background: #e9f7fc;
}
.dan-schedule-essential-pending {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: #082b50;
	font-weight: 600;
}
.dan-schedule-essential-cancel {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	color: #617286;
	text-decoration: underline;
	font-size: 0.8rem;
}
.dan-schedule-essential-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 43, 80, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}
.dan-schedule-essential-overlay[hidden] {
	display: none;
}
.dan-schedule-essential-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 18px;
	padding: 40px 32px 32px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(8, 43, 80, 0.28);
	font-family: inherit;
}
.dan-schedule-essential-close {
	position: absolute;
	top: 16px;
	right: 18px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.3rem;
	line-height: 1;
	color: #617286;
	padding: 4px;
}
.dan-schedule-essential-eyebrow {
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	font-weight: 700;
	color: #078ec5;
}
.dan-schedule-essential-title {
	margin: 0 0 24px;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 800;
	color: #082b50;
}
.dan-schedule-essential-rows {
	text-align: left;
	margin: 0 0 20px;
}
.dan-schedule-essential-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #e9edf1;
	font-size: 0.9rem;
}
.dan-schedule-essential-row:last-child {
	border-bottom: none;
}
.dan-schedule-essential-row span {
	color: #617286;
}
.dan-schedule-essential-row strong {
	color: #172638;
	font-weight: 700;
	text-align: right;
}
.dan-schedule-essential-note {
	margin: 0 0 24px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #617286;
}
.dan-schedule-essential-actions {
	display: flex;
	gap: 12px;
}
.dan-schedule-essential-actions button {
	flex: 1;
	font: inherit;
	cursor: pointer;
	padding: 0.75rem 1rem;
	border-radius: 11px;
	font-weight: 700;
	font-size: 0.88rem;
}
.dan-schedule-essential-confirm {
	border: 1px solid #078ec5;
	background: #078ec5;
	color: #fff;
}
.dan-schedule-essential-confirm:hover {
	background: #0278a9;
	border-color: #0278a9;
}
.dan-schedule-essential-confirm:disabled {
	opacity: 0.6;
	cursor: default;
}
.dan-schedule-essential-keep {
	border: 1px solid #d7dee3;
	background: #fff;
	color: #082b50;
}
.dan-schedule-essential-keep:hover {
	background: #f4f6f8;
}
.dan-schedule-essential-error {
	margin: 16px 0 0;
	font-size: 0.82rem;
	color: #b33a45;
}
.dan-schedule-essential-error[hidden] {
	display: none;
}