/**
 * HOTHEAL shared components
 * =========================
 *
 * The second layer of shared CSS, after hotheal-chrome.css. It holds rules
 * that are BYTE-IDENTICAL across the templates that render provider data,
 * extracted 2026-09-09 as the follow-up pass to the chrome consolidation.
 *
 * The important ones are the status-badge modifiers and the online-only
 * pill: their MARKUP is generated by shared functions in
 * hotheal-helpers.php, but their STYLING was still copied into 3-4
 * templates. A shared renderer with duplicated styles is exactly the split
 * that lets pages drift apart, which is what produced the four-copy
 * hotheal_is_open() bug in the first place.
 *
 * Loaded by hotheal_components_styles(), after the chrome stylesheet and
 * before the template's own <style>, so page CSS still wins.
 *
 * WHAT DOES NOT BELONG HERE: any rule that differs between templates. Those
 * stay in their own page. Verified as varying and deliberately left alone:
 * .hh-badge (base), .hh-hero-title, .hh-hero-subtitle, .hh-hero-inner,
 * .hh-hero-content, .hh-hero-image img, .hh-hero-tagline, .hh-service-chip,
 * .hh-provider-action--call.
 *
 * Same comment caution as hotheal-chrome.css: never write an asterisk
 * followed by a slash inside these comments.
 */


/* Status badge modifiers - emitted by hotheal_status_badge() in hotheal-helpers.php.
   The renderer was already shared; these colours were still duplicated in 3-4
   templates. The .hh-badge BASE rule stays per-page (the card lists use 11px/10px
   padding, provider detail uses 12px/12px) - safe, because the base sets only
   layout and these set only background+color, so there is no cascade conflict. */
.hh-badge--closed { background: var(--closed-bg); color: var(--closed-text); }
.hh-badge--open { background: var(--open-bg); color: var(--open-text); }
.hh-badge--partial { background: #FEF3C7; color: #92400E; }
.hh-badge--partial .hh-badge-dot { background: #F59E0B; }
.hh-badge--unknown { background: #F1F5F9; color: #475569; }
.hh-badge--unknown .hh-badge-dot { background: #94A3B8; }
.hh-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Online-only pill - emitted by hotheal_online_pill(). */
.hh-online-pill svg { flex-shrink: 0; }

/* Provider detail rows + action buttons (shared by the card templates). */
.hh-provider-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; border: none; background: none; font-family: var(--font); }
.hh-provider-action--dir { color: var(--text-secondary); }
.hh-provider-action--dir:hover { background: var(--border-light); }
.hh-provider-action:first-child { border-right: 1px solid var(--border-light); }
.hh-provider-actions { display: flex; border-top: 1px solid var(--border-light); }
.hh-provider-detail { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.45; }
.hh-provider-detail svg { flex-shrink: 0; margin-top: 2px; color: var(--text-tertiary); }

/* Hero overlay. */
.hh-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.08) 0%, transparent 60%); pointer-events: none; }

/* Shared RTL rules for provider cards. */
[dir="rtl"] .hh-chips { direction: rtl; }
[dir="rtl"] .hh-online-pill { flex-direction: row-reverse; }
[dir="rtl"] .hh-pcard-actions { flex-direction: row-reverse; }
[dir="rtl"] .hh-pcard-info { flex-direction: row-reverse; text-align: right; }