/* =========================================================================
   Age Calculator - scoped styles
   All selectors are prefixed with .dob-age-calculator- to avoid clashing
   with theme / plugin CSS (spec 10.4). No bare element selectors used.
   ========================================================================= */

.dob-age-calculator-wrap {
	--dob-ac-bg: #ffffff;
	--dob-ac-surface: var(--acbd-sage-2);
	--dob-ac-border: var(--acbd-line);
	--dob-ac-text: var(--acbd-text);
	--dob-ac-text-muted: var(--acbd-muted);
	--dob-ac-accent: var(--acbd-ink);
	--dob-ac-accent-dark: #0f2f2b;
	--dob-ac-accent-contrast: #ffffff;
	--dob-ac-error: #b3261e;
	--dob-ac-error-bg: #fdecea;
	--dob-ac-radius: 18px;
	--dob-ac-focus-ring: 0 0 0 3px rgba(47, 111, 94, 0.35);

	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dob-ac-text);
	box-sizing: border-box;
}
.dob-age-calculator-wrap *,
.dob-age-calculator-wrap *::before,
.dob-age-calculator-wrap *::after {
	box-sizing: inherit;
}

.dob-age-calculator-heading {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0 0 0.4rem;
	font-weight: 700;
}
.dob-age-calculator-subtext {
	margin: 0 0 1.5rem;
	color: var(--dob-ac-text-muted);
	font-size: 1rem;
}

.dob-age-calculator-card {
	background: var(--dob-ac-bg);
	border: 1px solid var(--dob-ac-border);
	border-radius: var(--dob-ac-radius);
	padding: 1.5rem;
}

.dob-age-calculator-fieldgroup {
	margin-bottom: 1.25rem;
}
.dob-age-calculator-label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}
.dob-age-calculator-date-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 0.6rem;
}
.dob-age-calculator-select,
.dob-age-calculator-date-input {
	width: 100%;
	padding: 0.65rem 0.6rem;
	font-size: 1rem;
	border: 1px solid var(--dob-ac-border);
	border-radius: 8px;
	background: var(--dob-ac-surface);
	color: var(--dob-ac-text);
	line-height: 1.3;
}
.dob-age-calculator-select:focus,
.dob-age-calculator-date-input:focus,
.dob-age-calculator-btn:focus-visible,
.dob-age-calculator-btn-secondary:focus-visible {
	outline: none;
	box-shadow: var(--dob-ac-focus-ring);
	border-color: var(--dob-ac-accent);
}
.dob-age-calculator-select[aria-invalid="true"],
.dob-age-calculator-date-input[aria-invalid="true"] {
	border-color: var(--dob-ac-error);
	background: var(--dob-ac-error-bg);
}

.dob-age-calculator-privacy-note {
	font-size: 0.8rem;
	color: var(--dob-ac-text-muted);
	margin: 0.55rem 0 1.25rem;
}

.dob-age-calculator-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.dob-age-calculator-btn {
	flex: 1 1 auto;
	min-width: 140px;
	background: var(--dob-ac-accent);
	color: var(--dob-ac-accent-contrast);
	border: none;
	border-radius: 8px;
	padding: 0.8rem 1.2rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.dob-age-calculator-btn:hover { background: var(--dob-ac-accent-dark); }
.dob-age-calculator-btn:disabled { background: #a9b3ad; cursor: not-allowed; }

.dob-age-calculator-btn-secondary {
	flex: 1 1 auto;
	min-width: 120px;
	background: transparent;
	color: var(--dob-ac-text);
	border: 1px solid var(--dob-ac-border);
	border-radius: 8px;
	padding: 0.8rem 1.2rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.dob-age-calculator-btn-secondary:hover { background: var(--dob-ac-surface); }

.dob-age-calculator-error {
	display: none;
	align-items: flex-start;
	gap: 0.5rem;
	background: var(--dob-ac-error-bg);
	color: var(--dob-ac-error);
	border: 1px solid var(--dob-ac-error);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	margin: 1rem 0 0;
}
.dob-age-calculator-error.is-visible { display: flex; }

.dob-age-calculator-results {
	display: none;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--dob-ac-border);
}
.dob-age-calculator-results.is-visible { display: block; }

.dob-age-calculator-headline {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.dob-age-calculator-primary-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.dob-age-calculator-primary-card {
	background: var(--dob-ac-surface);
	border: 1px solid var(--dob-ac-border);
	border-radius: 10px;
	padding: 0.9rem 0.5rem;
	text-align: center;
}
.dob-age-calculator-primary-card-value {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--dob-ac-accent-dark);
}
.dob-age-calculator-primary-card-label {
	display: block;
	font-size: 0.8rem;
	color: var(--dob-ac-text-muted);
	margin-top: 0.2rem;
}

.dob-age-calculator-secondary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}
.dob-age-calculator-secondary-item {
	background: var(--dob-ac-bg);
	border: 1px solid var(--dob-ac-border);
	border-radius: 8px;
	padding: 0.65rem 0.75rem;
	font-size: 0.85rem;
	color: var(--dob-ac-text-muted);
}
.dob-age-calculator-secondary-item strong {
	display: block;
	font-size: 1rem;
	color: var(--dob-ac-text);
}

.dob-age-calculator-birthday-box {
	background: var(--dob-ac-surface);
	border: 1px solid var(--dob-ac-border);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	font-size: 0.95rem;
}
.dob-age-calculator-birthday-box strong { color: var(--dob-ac-accent-dark); }

.dob-age-calculator-toc {
	margin-top: 2rem;
	padding: 1.1rem 1.3rem;
	background: var(--dob-ac-surface);
	border: 1px solid var(--dob-ac-border);
	border-radius: 10px;
}
.dob-age-calculator-toc-title {
	margin: 0 0 0.6rem;
	font-weight: 700;
	font-size: 0.95rem;
}
.dob-age-calculator-toc-list {
	margin: 0;
	padding: 0 0 0 1.1rem;
	columns: 2;
	column-gap: 1.5rem;
	font-size: 0.9rem;
}
.dob-age-calculator-toc-list li { break-inside: avoid; margin-bottom: 0.4rem; }
.dob-age-calculator-toc-list a {
	color: var(--dob-ac-accent-dark);
	text-decoration: none;
}
.dob-age-calculator-toc-list a:hover,
.dob-age-calculator-toc-list a:focus-visible { text-decoration: underline; }

@media (max-width: 560px) {
	.dob-age-calculator-toc-list { columns: 1; }
}

.dob-age-calculator-content {
	margin-top: 2.5rem;
	color: var(--dob-ac-text);
	line-height: 1.6;
}
.dob-age-calculator-content section {
	scroll-margin-top: 1.5rem;
	margin-bottom: 2rem;
}
.dob-age-calculator-content h2 {
	font-size: 1.3rem;
	margin: 0 0 0.75rem;
}
.dob-age-calculator-content p,
.dob-age-calculator-content ul,
.dob-age-calculator-content ol {
	margin: 0 0 0.9rem;
}
.dob-age-calculator-content ul,
.dob-age-calculator-content ol {
	padding-left: 1.3rem;
}
.dob-age-calculator-content li { margin-bottom: 0.4rem; }
.dob-age-calculator-steps li { padding-left: 0.2rem; }
.dob-age-calculator-faq-item {
	border-bottom: 1px solid var(--dob-ac-border);
	padding: 0.9rem 0;
}
.dob-age-calculator-faq-question {
	font-weight: 600;
	margin: 0 0 0.4rem;
}
.dob-age-calculator-faq-answer { margin: 0; color: var(--dob-ac-text-muted); }

@media (max-width: 560px) {
	.dob-age-calculator-date-row { grid-template-columns: 1fr; }
	.dob-age-calculator-primary-cards { gap: 0.5rem; }
	.dob-age-calculator-primary-card-value { font-size: 1.3rem; }
	.dob-age-calculator-secondary-grid { grid-template-columns: 1fr; }
	.dob-age-calculator-actions { flex-direction: column; }
	.dob-age-calculator-btn,
	.dob-age-calculator-btn-secondary { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.dob-age-calculator-btn { transition: none; }
}

/* Premium theme integration */
.age-calculator-section{background:var(--acbd-paper);padding:5rem 0 4.5rem;scroll-margin-top:94px}
.age-calculator-section .calculator-intro{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:0 auto 1.4rem;max-width:900px}
.age-calculator-section .calculator-intro h2{font-family:Georgia,"Times New Roman",serif;color:var(--acbd-ink);font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;margin:.35rem 0 0}
.age-calculator-section .calculator-intro p{max-width:430px;margin:0;color:var(--acbd-muted);font-size:.94rem}
.dob-age-calculator-wrap{max-width:900px;padding:0;font-family:inherit}
.dob-age-calculator-card{border-radius:24px;padding:2rem;box-shadow:var(--shadow-md);border-color:var(--acbd-line)}
.dob-age-calculator-label{color:var(--acbd-ink)}
.dob-age-calculator-select,.dob-age-calculator-date-input{min-height:50px;background:#fff;border-radius:11px}
.dob-age-calculator-btn,.dob-age-calculator-btn-secondary{min-height:50px;border-radius:999px;font-weight:800}
.dob-age-calculator-btn{box-shadow:0 10px 22px rgba(24,60,55,.13)}
.dob-age-calculator-results{scroll-margin-top:90px}
.dob-age-calculator-primary-card{padding:1.15rem .65rem;border-radius:14px}
.dob-age-calculator-primary-card-value{font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:600}
.dob-age-calculator-secondary-item{padding:.8rem .9rem;background:#fff;border-radius:10px}
.dob-age-calculator-birthday-box{background:var(--acbd-cream);border-radius:14px}
.age-home-seo{width:min(calc(100% - 40px),900px);margin:0 auto;padding:0 0 2rem}
.age-home-seo .dob-age-calculator-toc{margin:0 0 4rem;padding:1.35rem 1.5rem;background:var(--acbd-sage-2);border-color:var(--acbd-line);border-radius:16px}
.age-home-seo .dob-age-calculator-toc-title{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acbd-blush-dark)}
.age-home-seo .dob-age-calculator-toc-list{font-size:.9rem;line-height:1.5}
.age-home-seo .dob-age-calculator-content{margin-top:0;font-family:inherit;color:var(--acbd-text);line-height:1.75}
.age-home-seo .dob-age-calculator-content section{margin-bottom:0;padding:3.3rem 0;border-top:1px solid var(--acbd-line);scroll-margin-top:90px}
.age-home-seo .dob-age-calculator-content section:first-child{border-top:0;padding-top:0}
.age-home-seo .dob-age-calculator-content h2{font-family:Georgia,"Times New Roman",serif;color:var(--acbd-ink);font-size:clamp(2rem,4vw,2.7rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin:0 0 1rem}
.age-home-seo .dob-age-calculator-content p,.age-home-seo .dob-age-calculator-content li{font-size:1rem}
.age-home-seo .dob-age-calculator-content ul,.age-home-seo .dob-age-calculator-content ol{padding-left:1.25rem}
.age-home-seo .dob-age-calculator-faq-item{padding:1rem 0;border-color:var(--acbd-line)}
.age-home-seo .dob-age-calculator-faq-question{font-family:Georgia,"Times New Roman",serif;color:var(--acbd-ink);font-size:1.12rem}
.age-home-seo .dob-age-calculator-faq-answer{color:var(--acbd-muted)}
@media(max-width:820px){
 .age-calculator-section{padding:3rem 0 3.2rem}.age-calculator-section .container{width:min(calc(100% - 24px),900px)}
 .age-calculator-section .calculator-intro{align-items:flex-start;flex-direction:column;gap:.65rem;margin-bottom:1.1rem}
 .dob-age-calculator-card{padding:1.35rem;border-radius:18px}.age-home-seo{width:min(calc(100% - 32px),900px)}
 .age-home-seo .dob-age-calculator-toc{margin-bottom:2.5rem}.age-home-seo .dob-age-calculator-content section{padding:2.5rem 0}
}
@media(max-width:560px){
 .age-calculator-section .container{width:min(calc(100% - 16px),900px)}.dob-age-calculator-card{padding:1.05rem}
 .dob-age-calculator-primary-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.dob-age-calculator-primary-card{padding:.8rem .25rem}.dob-age-calculator-primary-card-value{font-size:1.45rem}
 .age-home-seo{width:min(calc(100% - 24px),900px)}.age-home-seo .dob-age-calculator-toc{padding:1.05rem 1.15rem}.age-home-seo .dob-age-calculator-content h2{font-size:clamp(1.7rem,8vw,2.1rem)}
}


/* v2.1.0 — calculator mobile UX refinement */
.dob-age-calculator-select,.dob-age-calculator-date-input{appearance:auto;min-width:0}
.dob-age-calculator-btn,.dob-age-calculator-btn-secondary{touch-action:manipulation}
.dob-age-calculator-primary-card,.dob-age-calculator-secondary-item{min-width:0}

@media(max-width:820px){
  .age-calculator-section{padding:2.6rem 0 2.8rem}
  .age-calculator-section .calculator-intro h2{font-size:clamp(1.85rem,7vw,2.35rem)}
  .dob-age-calculator-card{box-shadow:0 12px 34px rgba(28,62,55,.1)}
  .dob-age-calculator-label{font-size:.9rem}
  .dob-age-calculator-privacy-note{line-height:1.45;margin-top:.5rem}
  .dob-age-calculator-select,.dob-age-calculator-date-input{min-height:52px;font-size:16px;padding:.65rem .62rem}
  .dob-age-calculator-btn,.dob-age-calculator-btn-secondary{min-height:52px;font-size:.95rem}
  .dob-age-calculator-headline{font-size:1.04rem;line-height:1.45}
}

@media(max-width:560px){
  .age-calculator-section .container{width:min(calc(100% - 20px),900px)}
  .age-calculator-section .calculator-intro{margin-left:2px;margin-right:2px}.age-calculator-section .calculator-intro p{font-size:.9rem;line-height:1.55}
  .dob-age-calculator-card{padding:1rem;border-radius:16px}
  /* Keep DOB entry compact on phones instead of forcing three full-width rows. */
  .dob-age-calculator-date-row{grid-template-columns:.82fr 1.32fr 1fr;gap:.42rem}
  .dob-age-calculator-select{padding-left:.45rem;padding-right:.35rem}
  .dob-age-calculator-fieldgroup{margin-bottom:1.05rem}
  .dob-age-calculator-actions{gap:.55rem}.dob-age-calculator-btn,.dob-age-calculator-btn-secondary{min-width:100%}
  .dob-age-calculator-primary-cards{gap:.42rem;margin-bottom:1rem}.dob-age-calculator-primary-card{padding:.8rem .25rem;border-radius:11px}.dob-age-calculator-primary-card-value{font-size:1.38rem}.dob-age-calculator-primary-card-label{font-size:.72rem}
  /* Totals work better as a compact dashboard than a long five-row list. */
  .dob-age-calculator-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-bottom:1rem}.dob-age-calculator-secondary-item{padding:.68rem .65rem;font-size:.76rem;line-height:1.35}.dob-age-calculator-secondary-item strong{font-size:.92rem;overflow-wrap:anywhere}.dob-age-calculator-secondary-item:last-child{grid-column:1/-1}
  .dob-age-calculator-birthday-box{padding:.85rem .9rem;font-size:.88rem;line-height:1.55}
  .dob-age-calculator-results{margin-top:1.35rem;padding-top:1.15rem}
}

@media(max-width:350px){
  .dob-age-calculator-date-row{grid-template-columns:.85fr 1.15fr}.dob-age-calculator-date-row .dob-age-calculator-select:nth-child(3){grid-column:1/-1}
  .dob-age-calculator-primary-card-value{font-size:1.28rem}
}