/* Daily Muhurat Timings — reuses the theme's design tokens (var(...) with
   literal fallbacks so the plugin still looks right without the theme's
   ir-tokens.css loaded). Good/neutral/bad reuse the site's AQI severity
   scale exactly, per the brief - never a separate color system. */

.dmt-page, .dmt-widget {
    font-variant-numeric: tabular-nums;
}

.dmt-card-good  { --dmt-c: var(--aqi-good, #55A84F); }
.dmt-card-neutral { --dmt-c: var(--aqi-moderate, #FFF833); }
.dmt-card-bad   { --dmt-c: var(--aqi-severe, #8C1D16); }

.ir-pg-card.dmt-card-good,
.ir-pg-card.dmt-card-bad {
    border-left: 4px solid var(--dmt-c);
}

.dmt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dmt-c);
    vertical-align: middle;
}

.dmt-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 16px 0;
    font-size: 14px;
    color: var(--ink-2, #333);
}
.dmt-legend-item { display: flex; align-items: center; gap: 6px; }

.dmt-row-good  td { background: color-mix(in srgb, var(--aqi-good, #55A84F) 10%, transparent); }
.dmt-row-bad   td { background: color-mix(in srgb, var(--aqi-severe, #8C1D16) 8%, transparent); }

.dmt-source-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--ink-3, #555);
}

.dmt-crosslinks {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dmt-faq { margin-top: 12px; }
.dmt-faq-item { margin-bottom: 18px; }
.dmt-faq-item h3 { font-size: 16px; margin: 0 0 6px; color: var(--ink, #000); }
.dmt-faq-item p { margin: 0; color: var(--ink-2, #333); }

/* ── Widget (shortcode/block) ─────────────────────────────────── */
.dmt-widget {
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: 16px;
    max-width: 420px;
    font-variant-numeric: tabular-nums;
}
.dmt-widget-hd {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.dmt-widget-title { font-weight: 700; color: var(--brand, #FF6200); }
.dmt-widget-city { font-size: 13px; color: var(--ink-3, #555); }
.dmt-widget-rows { display: flex; flex-direction: column; gap: 8px; }
.dmt-widget-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--dmt-c, var(--border, #ddd));
    background: var(--surface-2, #f5f5f5);
    border-radius: 6px;
    font-size: 14px;
}
.dmt-widget-val { font-weight: 600; color: var(--ink, #000); white-space: nowrap; }
.dmt-widget-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--brand-text, #B84400);
    text-decoration: none;
}
.dmt-widget-more:hover { text-decoration: underline; }