/**
 * DoctorBookly — Health tools UI (calculators + symptoms/conditions)
 */

:root {
    --ht-primary: #0d9488;
    --ht-primary-deep: #0f766e;
    --ht-bg: #f0fdfa;
    --ht-card: #ffffff;
    --ht-border: #e2e8f0;
    --ht-text: #0f172a;
    --ht-muted: #64748b;
}

.calculator-page {
    background: linear-gradient(180deg, #f8fafc 0%, #ecfdf5 55%, #f1f5f9 100%) !important;
    padding-top: 12px !important;
}

.calculator-header-icon,
.calculator-header-icon.calorie-icon,
.calculator-header-icon.medication-icon {
    background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-deep)) !important;
    animation: none !important;
}

.form-group:focus-within label,
.form-group label i {
    color: var(--ht-primary-deep) !important;
}

.input-group:focus-within,
.form-select:focus {
    border-color: var(--ht-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.calculator-submit-btn,
.calculator-submit-btn.calorie-btn,
.calculator-submit-btn.medication-btn {
    background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-deep)) !important;
    min-height: 48px;
    font-size: 15px;
}

.calculator-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.28) !important;
}

.calculator-reset-btn {
    border: 1px solid var(--ht-border);
    background: #fff;
    color: var(--ht-primary-deep);
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 12px;
    min-height: 44px;
}

/* ——— Minimal breadcrumb (top only) ——— */
.health-tools-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px 0;
}

.health-tools-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 13px;
    color: var(--ht-muted);
}

.health-tools-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.health-tools-breadcrumb__sep {
    color: #cbd5e1;
    user-select: none;
}

.health-tools-breadcrumb a {
    color: var(--ht-primary-deep);
    text-decoration: none;
    font-weight: 600;
}

.health-tools-breadcrumb a:hover {
    text-decoration: underline;
}

.health-tools-breadcrumb li:last-child span {
    color: var(--ht-text);
    font-weight: 600;
}

/* Calculator page: breadcrumb inside container rhythm */
.calculator-page > .container {
    padding-top: 4px;
}

.sc-list-page .health-tools-breadcrumb {
    max-width: 1000px;
    padding-left: 16px;
    padding-right: 16px;
}

.sc-list-page .health-tools-related {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* ——— Bottom “other tools” + disclaimer panel ——— */
.health-tool-site-footer {
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.health-tools-related {
    max-width: none;
    margin: 0;
    padding: 22px 24px 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sc-list-page .health-tools-related {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.health-tools-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.health-tools-related__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ht-text);
    letter-spacing: 0;
    text-transform: none;
}

.health-tools-related__title i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    color: var(--ht-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.health-tools-related__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ht-primary-deep);
    text-decoration: none;
    white-space: nowrap;
}

.health-tools-related__view-all i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.health-tools-related__view-all:hover {
    text-decoration: underline;
}

.health-tools-related__view-all:hover i {
    transform: translateX(2px);
}

.health-tools-related__hub {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid #99f6e4;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    color: #0f766e;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.health-tools-related__hub:hover {
    border-color: #2dd4bf;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.12);
    transform: translateY(-1px);
}

.health-tools-related__hub-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.health-tools-related__hub-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.health-tools-related__hub-copy strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f766e;
}

.health-tools-related__hub-copy span {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.health-tools-related__hub-arrow {
    color: #14b8a6;
    font-size: 13px;
    flex-shrink: 0;
}

.health-tools-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.health-tools-related__section-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.health-tools-related__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid var(--ht-border);
    background: #fff;
    color: var(--ht-text);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.health-tools-related__link:hover {
    border-color: color-mix(in srgb, var(--ht-link-accent, #0d9488) 45%, #fff);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ht-link-accent, #0d9488) 12%, transparent);
    transform: translateY(-1px);
}

.health-tools-related__link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ht-link-accent, #0d9488) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--ht-link-accent, #0d9488) 22%, #e2e8f0);
    color: var(--ht-link-accent, #0d9488);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.health-tools-related__link-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.health-tools-related__link-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ht-text);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.health-tools-related__link-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.health-tools-related__more {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.health-tools-related__more a {
    color: var(--ht-primary-deep);
    text-decoration: none;
}

.health-tools-related__more a:hover {
    text-decoration: underline;
}

.health-tool-site-footer__disclaimer {
    border-top: 1px solid var(--ht-border);
    background: linear-gradient(180deg, #fffbeb 0%, #fefce8 100%);
    padding: 14px 24px 16px;
    font-size: 12px;
    line-height: 1.55;
    color: #78350f;
}

.health-tool-site-footer__disclaimer p {
    margin: 0;
}

.health-tool-site-footer__disclaimer strong {
    color: #92400e;
}

.health-tool-site-footer__disclaimer .calculator-disclaimer-box {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    gap: 10px;
    align-items: flex-start;
    display: flex;
    max-width: 100%;
}

.health-tool-site-footer__disclaimer .calculator-disclaimer-box__body {
    min-width: 0;
    flex: 1;
}

.health-tool-site-footer__disclaimer .med-disclaimer-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    max-width: 100%;
}

.health-tool-site-footer__disclaimer .calculator-disclaimer-box__lead {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #475569;
}

.health-tool-site-footer__disclaimer .health-tool-disclaimer-details--inline {
    flex: 0 0 auto;
    margin: 0;
    display: inline-block;
}

.health-tool-site-footer__disclaimer .health-tool-disclaimer-details--inline summary {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.health-tool-site-footer__disclaimer .calculator-disclaimer-box > i {
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 8px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.health-tool-site-footer__disclaimer .calculator-disclaimer-box__lead strong {
    color: #334155;
    font-weight: 700;
}

.health-tool-site-footer__disclaimer .health-tool-disclaimer-details {
    margin-top: 8px;
}

.health-tool-site-footer__disclaimer .health-tool-disclaimer-details summary {
    color: var(--ht-primary-deep);
}

/* Legacy pill classes (hub page / older embeds) */
.health-tools-related__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ht-border);
    background: #f8fafc;
    color: var(--ht-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.health-tools-related__pill span {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.health-tools-related__more {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
}

.health-tools-related__more a {
    color: var(--ht-primary-deep);
    font-weight: 600;
    text-decoration: none;
}

.health-tools-related__more a:hover {
    text-decoration: underline;
}

.health-tools-related__pill i {
    color: var(--ht-primary);
    font-size: 14px;
    flex-shrink: 0;
}

.health-tools-related__pill:hover {
    border-color: rgba(13, 148, 136, 0.45);
    background: var(--ht-bg);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
}

.health-tools-related__pill--hub {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border-color: #5eead4;
    color: #0f766e;
}

/* Info, FAQ, disclaimer — shared across calculator pages */
.calculator-info-section {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 0 20px;
}

.calculator-info-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    color: var(--ht-text);
    margin: 0 0 16px;
}

.calculator-info-section h2 i {
    color: var(--ht-primary);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.info-card {
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.info-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--ht-text);
}

.info-card h3 i {
    color: var(--ht-primary);
}

.info-card p,
.info-card ul {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ht-muted);
}

.info-card ul {
    padding-left: 18px;
}

.info-card li + li {
    margin-top: 6px;
}

.calculator-disclaimer-box {
    max-width: 1200px;
    margin: 24px auto 32px;
    padding: 20px 22px;
    display: flex;
    gap: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
}

.calculator-disclaimer-box > i {
    color: #d97706;
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.calculator-disclaimer-box h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: #92400e;
}

.calculator-disclaimer-box p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #78350f;
}

.calculator-disclaimer-box p:last-child {
    margin-bottom: 0;
}

/* Bottom page sequence: FAQ → unified footer panel */
.health-tool-bottom {
    max-width: 1200px;
    margin: 32px auto 28px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.health-tool-bottom .health-tool-faq,
.health-tool-bottom .health-tool-site-footer {
    max-width: none;
    margin: 0;
    padding: 0;
}

.health-tool-bottom .health-tools-related {
    padding: 22px 24px 20px;
}

.health-tool-bottom .health-tool-faq h2 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.calculator-disclaimer-box--compact {
    margin: 0;
    padding: 14px 16px;
    gap: 12px;
    background: #fffbeb;
}

.calculator-disclaimer-box--footer {
    background: transparent;
    border: 0;
    padding: 0;
}

.calculator-disclaimer-box--compact > i {
    font-size: 18px;
}

.calculator-disclaimer-box--compact h3 {
    font-size: 13px;
    margin-bottom: 6px;
}

.calculator-disclaimer-box--compact p {
    font-size: 13px;
    line-height: 1.5;
}

.health-tool-disclaimer-details {
    margin-top: 8px;
}

.health-tool-disclaimer-details summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ht-primary-deep);
    list-style: none;
}

.health-tool-disclaimer-details summary::-webkit-details-marker {
    display: none;
}

.health-tool-disclaimer-details ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #78350f;
}

.health-tool-disclaimer-details li + li {
    margin-top: 4px;
}

.calculator-disclaimer-box--pregnancy .health-tool-disclaimer-details ul,
.calculator-disclaimer-box--medication .health-tool-disclaimer-details ul {
    color: #78350f;
}

.health-tool-faq {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 0 20px;
}

.health-tool-faq h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    margin: 0 0 14px;
    color: var(--ht-text);
}

.health-tool-faq h2 i {
    color: var(--ht-primary);
}

.health-tool-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.health-tool-faq__item {
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: 12px;
    padding: 0 16px;
}

.health-tool-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--ht-text);
    padding: 14px 28px 14px 0;
    list-style: none;
    position: relative;
}

.health-tool-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ht-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.health-tool-faq__item[open] summary::after {
    content: '−';
}

.health-tool-faq__item summary::-webkit-details-marker {
    display: none;
}

.health-tool-faq__item p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ht-muted);
}

.calculator-results-card--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: linear-gradient(145deg, #ffffff 0%, #f0fdfa 100%);
    border: 1px dashed rgba(13, 148, 136, 0.35);
}

.calc-results-empty {
    text-align: center;
    padding: 12px 8px;
    max-width: 320px;
}

.calc-results-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.calc-results-empty h2 {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: var(--ht-text);
}

.calc-results-empty p {
    font-size: 14px;
    color: var(--ht-muted);
    margin: 0 0 12px;
    line-height: 1.5;
}

.calc-results-empty__tips {
    text-align: left;
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ht-muted);
    line-height: 1.5;
}

.calc-results-empty__tips a {
    color: var(--ht-primary-deep);
    font-weight: 600;
}

.bmr-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0 16px;
}

.bmr-result-box {
    text-align: center;
    padding: 16px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--ht-border);
}

.bmr-result-box--accent {
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border-color: #99f6e4;
}

.bmr-result-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ht-muted);
    margin-bottom: 6px;
}

.bmr-result-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--ht-primary-deep);
    line-height: 1.1;
}

.bmr-result-unit {
    display: block;
    font-size: 12px;
    color: var(--ht-muted);
    margin-top: 4px;
}

/* Imperial height, toasts, medication — unchanged essentials */
.height-imperial-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.height-imperial-row input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--ht-border);
    border-radius: 10px;
    font-size: 16px;
    background: #f8fafc;
    box-sizing: border-box;
}

.field-hint {
    font-size: 12px;
    color: var(--ht-muted);
    margin: 4px 0 0;
}

.health-tool-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    max-width: min(420px, calc(100vw - 32px));
    border-radius: 12px;
    background: var(--ht-text);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.health-tool-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.health-tool-toast--success {
    background: linear-gradient(135deg, #059669, #047857);
}

.health-tool-toast--error {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.med-notify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    font-size: 13px;
    color: #92400e;
    line-height: 1.45;
}

.med-notify-banner > i {
    color: #d97706;
    font-size: 16px;
}

.med-notify-banner button {
    margin-left: auto;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--ht-primary-deep);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    min-height: 36px;
}

.med-background-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%);
    border: 1px solid #bae6fd;
    font-size: 12px;
    color: #0f172a;
    line-height: 1.45;
}

.med-background-banner > i {
    color: #0284c7;
    font-size: 18px;
    margin-top: 2px;
}

.med-background-banner strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #0f766e;
}

.med-background-banner p {
    margin: 0;
    color: #475569;
}

.med-background-banner button {
    margin-left: auto;
    align-self: center;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: #0284c7;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    min-height: 36px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .med-background-banner button {
        width: 100%;
        margin-left: 0;
    }
}

.calculator-header {
    margin-top: 8px !important;
}

.calculator-container {
    margin-bottom: 24px !important;
}

/* Mobile */
@media (max-width: 640px) {
    .health-tools-breadcrumb {
        padding: 10px 16px 0;
        font-size: 12px;
    }

    .calculator-page {
        padding: 8px 0 24px !important;
    }

    .calculator-page > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
    }

    .calculator-header,
    .med-page-header {
        padding: 16px !important;
        margin-bottom: 14px !important;
        gap: 12px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .calculator-header h1 {
        font-size: 1.35rem !important;
    }

    .calculator-subtitle {
        font-size: 13px !important;
    }

    .calculator-form-card,
    .medication-list-card,
    .calculator-results-card {
        padding: 16px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .calculator-container {
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .health-tools-related {
        padding: 18px 16px 16px;
    }

    .health-tool-site-footer__disclaimer {
        padding: 12px 16px 14px;
    }

    .health-tools-related__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .health-tools-related__link {
        padding: 12px 14px;
        min-height: auto;
        align-items: center;
    }

    .health-tools-related__link-label {
        font-size: 14px;
        line-height: 1.4;
    }

    .health-tools-related__link-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .health-tools-related__pill {
        padding: 10px 12px;
        font-size: 12px;
        white-space: normal;
        min-height: 44px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .bmr-result-grid {
        grid-template-columns: 1fr;
    }

    .calorie-results-grid,
    .goal-boxes {
        grid-template-columns: 1fr !important;
    }

    /* Medication reminder — full-width form, FAB clearance */
    body.med-reminder-page .calculator-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.med-reminder-page .calculator-form-card,
    body.med-reminder-page .medication-list-card {
        width: 100%;
        max-width: 100%;
    }

    body.med-reminder-page .calculator-page {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.med-reminder-page .med-list-actions {
        margin-bottom: 16px;
        padding-bottom: 8px;
    }

    body.med-reminder-page .calculator-info-section {
        margin-bottom: 24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    body.med-reminder-page #scrollToTopBtn {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
    }

    body.med-reminder-page #scrollToTopBtn > div:first-child {
        width: 48px !important;
        height: 48px !important;
    }

    body.med-reminder-page #emergencyBtn {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }

    body.med-reminder-page #emergencyBtn > div:first-child {
        width: 56px !important;
        height: 56px !important;
    }

    body.med-reminder-page #emergencyBtn i {
        font-size: 22px !important;
    }
}

/* Travel / reference tool pages — shared footer spacing */
.ht-travel-footer,
.ht-hub__container--footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 32px;
}

.ht-travel-footer .health-tool-faq,
.ht-travel-footer .health-tool-site-footer,
.ht-travel-footer .health-tools-related,
.ht-travel-footer .calculator-disclaimer-box,
.ht-hub__container--footer .health-tool-faq,
.ht-hub__container--footer .health-tool-site-footer,
.ht-hub__container--footer .health-tools-related,
.ht-hub__container--footer .calculator-disclaimer-box {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.sc-list-page .health-tool-faq,
.sc-list-page .calculator-disclaimer-box {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .health-tools-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .health-tools-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ——— Motion & entrance animations ——— */
@keyframes htFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes htPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes htSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.ht-motion-reveal {
    animation: htFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--ht-motion-delay, 0ms);
}

.health-tools-related__hub.ht-motion-reveal {
    animation-delay: 0ms;
}

.health-tools-related__link:nth-child(1) { --ht-motion-delay: 40ms; }
.health-tools-related__link:nth-child(2) { --ht-motion-delay: 80ms; }
.health-tools-related__link:nth-child(3) { --ht-motion-delay: 120ms; }
.health-tools-related__link:nth-child(4) { --ht-motion-delay: 160ms; }
.health-tools-related__link:nth-child(5) { --ht-motion-delay: 200ms; }
.health-tools-related__link:nth-child(6) { --ht-motion-delay: 240ms; }

.calculator-form-card,
.calculator-info-section,
.health-tool-site-footer {
    animation: htFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.calculator-form-card { animation-delay: 0.05s; }
.calculator-info-section { animation-delay: 0.12s; }
.health-tool-site-footer { animation-delay: 0.18s; }

.age-results-card.age-results--animate {
    animation: htPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.age-results-card.age-results--animate .ht-motion-stat {
    animation: htFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.age-results-card.age-results--animate .ht-motion-stat:nth-child(1) { animation-delay: 0.08s; }
.age-results-card.age-results--animate .ht-motion-stat:nth-child(2) { animation-delay: 0.14s; }
.age-results-card.age-results--animate .ht-motion-stat:nth-child(3) { animation-delay: 0.2s; }

.age-summary {
    animation: htSlideIn 0.4s ease backwards;
    animation-delay: 0.05s;
}

/* FAB clearance on calculator pages (fix overlap) */
body:has(main.calculator-page) main.calculator-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

body:has(main.calculator-page) .calculator-info-section,
body:has(main.calculator-page) .health-tool-bottom {
    margin-bottom: 8px;
}

body:has(main.calculator-page) .health-tool-site-footer {
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
    body:has(main.calculator-page) #scrollToTopBtn {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
    }

    body:has(main.calculator-page) #scrollToTopBtn > div:first-child {
        width: 46px !important;
        height: 46px !important;
    }

    body:has(main.calculator-page) #scrollToTopBtn i {
        font-size: 18px !important;
    }

    body:has(main.calculator-page) #emergencyBtn {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }

    body:has(main.calculator-page) #emergencyBtn > div:first-child {
        width: 54px !important;
        height: 54px !important;
    }

    body:has(main.calculator-page) #emergencyBtn i {
        font-size: 22px !important;
    }

    body:has(main.calculator-page) main.calculator-page {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Symptoms, conditions & travel tool pages — FAB clearance + motion */
body:has(.sc-list-page) .sc-list-page,
body:has(.dbk-wx-page) .dbk-wx-page,
body:has(.dbk-fx-page) .dbk-fx-page,
body:has(.dbk-fl-page) .dbk-fl-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.sc-list-page .sc-card {
    animation: htFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sc-list-page .sc-card:nth-child(1) { animation-delay: 0.03s; }
.sc-list-page .sc-card:nth-child(2) { animation-delay: 0.06s; }
.sc-list-page .sc-card:nth-child(3) { animation-delay: 0.09s; }
.sc-list-page .sc-card:nth-child(4) { animation-delay: 0.12s; }
.sc-list-page .sc-card:nth-child(5) { animation-delay: 0.15s; }
.sc-list-page .sc-card:nth-child(6) { animation-delay: 0.18s; }

.sc-list-page .sc-card-intro {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    body:has(.sc-list-page) #scrollToTopBtn,
    body:has(.dbk-wx-page) #scrollToTopBtn,
    body:has(.dbk-fx-page) #scrollToTopBtn,
    body:has(.dbk-fl-page) #scrollToTopBtn {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
    }

    body:has(.sc-list-page) #scrollToTopBtn > div:first-child,
    body:has(.dbk-wx-page) #scrollToTopBtn > div:first-child,
    body:has(.dbk-fx-page) #scrollToTopBtn > div:first-child,
    body:has(.dbk-fl-page) #scrollToTopBtn > div:first-child {
        width: 46px !important;
        height: 46px !important;
    }

    body:has(.sc-list-page) #emergencyBtn,
    body:has(.dbk-wx-page) #emergencyBtn,
    body:has(.dbk-fx-page) #emergencyBtn,
    body:has(.dbk-fl-page) #emergencyBtn {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }

    body:has(.sc-list-page) #emergencyBtn > div:first-child,
    body:has(.dbk-wx-page) #emergencyBtn > div:first-child,
    body:has(.dbk-fx-page) #emergencyBtn > div:first-child,
    body:has(.dbk-fl-page) #emergencyBtn > div:first-child {
        width: 54px !important;
        height: 54px !important;
    }

    body:has(.sc-list-page) .sc-list-page,
    body:has(.dbk-wx-page) .dbk-wx-page,
    body:has(.dbk-fx-page) .dbk-fx-page,
    body:has(.dbk-fl-page) .dbk-fl-page {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .health-tool-toast,
    .health-tools-related__pill,
    .health-tools-related__hub,
    .health-tools-related__link,
    .health-tools-related__view-all i,
    .ht-motion-reveal,
    .calculator-form-card,
    .calculator-info-section,
    .health-tool-site-footer,
    .age-results-card.age-results--animate,
    .age-results-card.age-results--animate .ht-motion-stat,
    .age-summary,
    .sc-list-page .sc-card {
        animation: none !important;
        transition: none !important;
    }
}