/*
 * Fosia Affiliates — shared tokens and components (front + admin).
 *
 * Fosia design system v2 values (fosia-divi-child/assets/css/fosia-design.css):
 * blue #1959ff, ink #0b1020, hairlines #e4e8f0, 6/10/16 px radii, blue-tinted
 * shadows, Inter. When the Fosia theme is active its variables win (--fosia-*),
 * so a colour changed in Divi's Variable Manager follows here too.
 *
 * Everything is scoped under .fa (front) and .fa-admin (wp-admin): nothing
 * leaks into the theme, and theme rules for button/input/table are overridden
 * inside our roots only. Logical properties (RTL), visible focus, reduced motion.
 */

/* Inter 4 variable, latin subset, SIL OFL 1.1 (assets/fonts/OFL.txt). Used only
   when the theme does not already provide Inter. */
@font-face {
	font-family: "Fosia Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fa,
.fa-admin {
	--fa-blue: var(--fosia-blue, #1959ff);
	--fa-blue-700: var(--fosia-blue-700, #0f44d6);
	--fa-blue-800: var(--fosia-blue-800, #0b33a3);
	--fa-blue-50: var(--fosia-blue-50, #eef3ff);
	--fa-blue-100: var(--fosia-blue-100, #dce6ff);
	--fa-ink: var(--fosia-ink, #0b1020);
	--fa-text: var(--fosia-text, #374056);
	--fa-muted: var(--fosia-muted, #5b6478);
	--fa-subtle: var(--fosia-subtle, #687185);
	--fa-line: var(--fosia-border, #e4e8f0);
	--fa-line-strong: var(--fosia-border-strong, #cfd6e3);
	--fa-surface: #ffffff;
	--fa-sunken: var(--fosia-bg-subtle, #f6f8fc);
	--fa-tint: var(--fosia-bg-tint, #f0f4ff);
	--fa-ok: #047857;
	--fa-ok-fill: #0e9f6e;
	--fa-ok-bg: #e7f7f0;
	--fa-warn: #92400e;
	--fa-warn-fill: #d97706;
	--fa-warn-bg: #fef3e2;
	--fa-bad: #b91c1c;
	--fa-bad-fill: #dc2626;
	--fa-bad-bg: #fdecec;
	--fa-info: #1e3a8a;
	--fa-neutral: #4b5563;
	--fa-neutral-bg: #eef0f4;
	--fa-radius-sm: 6px;
	--fa-radius: 10px;
	--fa-radius-lg: 16px;
	--fa-shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06);
	--fa-shadow: 0 6px 16px -4px rgba(11, 16, 32, 0.10), 0 2px 4px rgba(11, 16, 32, 0.04);
	--fa-shadow-lg: 0 24px 48px -12px rgba(10, 31, 102, 0.18), 0 8px 16px -8px rgba(11, 16, 32, 0.08);
	--fa-ring: 0 0 0 3px rgba(25, 89, 255, 0.28);
	--fa-font: "Inter", "Fosia Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fa-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--fa-ease: cubic-bezier(0.16, 1, 0.3, 1);
	font-family: var(--fa-font);
	color: var(--fa-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: start;
}

.fa *,
.fa *::before,
.fa *::after,
.fa-admin *,
.fa-admin *::before,
.fa-admin *::after { box-sizing: border-box; }

.fa ::selection,
.fa-admin ::selection { background: var(--fa-blue-100); color: var(--fa-ink); }

.fa :focus-visible,
.fa-admin :focus-visible { outline: 2px solid var(--fa-blue); outline-offset: 2px; box-shadow: none; }

.fa .fa-icon,
.fa-admin .fa-icon { flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .fa .fa-icon--flip,
[dir="rtl"] .fa-admin .fa-icon--flip { transform: scaleX(-1); }
.fa .fa-icon--back,
.fa-admin .fa-icon--back { transform: scaleX(-1); }
[dir="rtl"] .fa .fa-icon--back,
[dir="rtl"] .fa-admin .fa-icon--back { transform: none; }

.fa .fa-num,
.fa-admin .fa-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa .fa-strong,
.fa-admin .fa-strong { font-weight: 600; color: var(--fa-ink); }
.fa .fa-sub,
.fa-admin .fa-sub { display: block; font-size: 12px; line-height: 1.45; color: var(--fa-subtle); margin-block-start: 2px; font-weight: 400; }
.fa .fa-muted,
.fa-admin .fa-muted { color: var(--fa-muted); }
.fa .fa-neg,
.fa-admin .fa-neg { color: var(--fa-bad); }
.fa .fa-bad-text,
.fa-admin .fa-bad-text { color: var(--fa-bad); }
.fa .fa-warn-text,
.fa-admin .fa-warn-text { color: var(--fa-warn); }
.fa .fa-sr,
.fa-admin .fa-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fa code,
.fa-admin code {
	font-family: var(--fa-mono); font-size: 0.86em; background: var(--fa-sunken); color: var(--fa-ink);
	padding: 1px 6px; border-radius: 5px; border: 0;
}

/* --------------------------------------------------------------- buttons */
.fa .fa-btn,
.fa-admin .fa-btn {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-block-size: 40px; padding: 0 16px; margin: 0;
	font: 600 14px/1 var(--fa-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
	color: var(--fa-ink); background: var(--fa-surface);
	border: 1px solid var(--fa-line-strong); border-radius: var(--fa-radius);
	box-shadow: var(--fa-shadow-sm); cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--fa-ease);
}
.fa .fa-btn:hover,
.fa-admin .fa-btn:hover { border-color: var(--fa-ink); color: var(--fa-ink); background: var(--fa-surface); }
.fa .fa-btn:active,
.fa-admin .fa-btn:active { transform: translateY(1px); }
.fa .fa-btn[disabled],
.fa-admin .fa-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.fa .fa-btn--primary,
.fa-admin .fa-btn--primary { color: #fff; background: var(--fa-blue); border-color: var(--fa-blue); box-shadow: 0 1px 2px rgba(15, 68, 214, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.fa .fa-btn--primary:hover,
.fa-admin .fa-btn--primary:hover { color: #fff; background: var(--fa-blue-700); border-color: var(--fa-blue-700); }
.fa .fa-btn--ghost,
.fa-admin .fa-btn--ghost { box-shadow: none; }
.fa .fa-btn--quiet,
.fa-admin .fa-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--fa-blue-700); padding-inline: 10px; }
.fa .fa-btn--quiet:hover,
.fa-admin .fa-btn--quiet:hover { background: var(--fa-blue-50); border-color: transparent; color: var(--fa-blue-800); }
.fa .fa-btn--lg { min-block-size: 48px; padding: 0 22px; font-size: 15px; }
.fa .fa-btn--sm,
.fa-admin .fa-btn--sm { min-block-size: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.fa .fa-btn.is-done,
.fa-admin .fa-btn.is-done { background: var(--fa-ok-fill); border-color: var(--fa-ok-fill); color: #fff; }

/* ----------------------------------------------------------------- pills */
.fa .fa-pill,
.fa-admin .fa-pill {
	display: inline-flex; align-items: center; gap: 6px; block-size: 22px; padding: 0 9px;
	border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
	background: var(--fa-neutral-bg); color: var(--fa-neutral);
}
.fa .fa-pill__dot,
.fa-admin .fa-pill__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.fa .fa-pill--ok,
.fa-admin .fa-pill--ok { background: var(--fa-ok-bg); color: var(--fa-ok); }
.fa .fa-pill--warn,
.fa-admin .fa-pill--warn { background: var(--fa-warn-bg); color: var(--fa-warn); }
.fa .fa-pill--bad,
.fa-admin .fa-pill--bad { background: var(--fa-bad-bg); color: var(--fa-bad); }
.fa .fa-pill--info,
.fa-admin .fa-pill--info { background: var(--fa-blue-50); color: var(--fa-blue-800); }

/* -------------------------------------------------------- segmented nav */
.fa .fa-seg,
.fa-admin .fa-seg {
	display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--fa-radius);
	background: var(--fa-sunken); border: 1px solid var(--fa-line);
}
.fa .fa-seg__item,
.fa-admin .fa-seg__item {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px;
	font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--fa-muted); text-decoration: none; white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease;
}
.fa .fa-seg__item:hover,
.fa-admin .fa-seg__item:hover { color: var(--fa-ink); }
.fa .fa-seg__item.is-current,
.fa-admin .fa-seg__item.is-current { background: var(--fa-surface); color: var(--fa-ink); font-weight: 600; box-shadow: var(--fa-shadow-sm), 0 0 0 1px var(--fa-line); }
.fa .fa-count,
.fa-admin .fa-count { font-size: 11px; font-weight: 600; color: var(--fa-subtle); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- table */
.fa .fa-table-wrap,
.fa-admin .fa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fa .fa-table,
.fa-admin .fa-table {
	inline-size: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; border: 0;
	font-size: 14px; line-height: 1.45; background: transparent;
}
.fa .fa-table th,
.fa .fa-table td,
.fa-admin .fa-table th,
.fa-admin .fa-table td {
	padding: 11px 12px; text-align: start; vertical-align: top; border: 0; border-block-end: 1px solid var(--fa-line); background: transparent;
}
.fa .fa-table thead th,
.fa .fa-table thead td,
.fa-admin .fa-table thead th,
.fa-admin .fa-table thead td {
	font-size: 12px; font-weight: 600; color: var(--fa-subtle); letter-spacing: 0.01em; text-transform: none;
	padding-block: 9px; border-block-end-color: var(--fa-line-strong); white-space: nowrap;
}
.fa .fa-table th.fa-num,
.fa .fa-table td.fa-num,
.fa-admin .fa-table th.fa-num,
.fa-admin .fa-table td.fa-num { text-align: end; }
.fa .fa-table tbody tr:last-child td,
.fa-admin .fa-table tbody tr:last-child td { border-block-end: 0; }
.fa .fa-table tbody tr:hover td,
.fa-admin .fa-table tbody tr:hover td { background: var(--fa-sunken); }

/* ----------------------------------------------------------------- chart */
.fa .fa-chart,
.fa-admin .fa-chart { margin: 0; min-inline-size: 0; }
.fa .fa-chart__head,
.fa-admin .fa-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.fa .fa-chart__title,
.fa-admin .fa-chart__title { font-size: 13px; font-weight: 600; color: var(--fa-text); }
.fa .fa-chart__total,
.fa-admin .fa-chart__total { font-size: 13px; font-weight: 600; color: var(--fa-ink); font-variant-numeric: tabular-nums; }
.fa .fa-chart__plot,
.fa-admin .fa-chart__plot { position: relative; padding-inline-end: 34px; }
.fa .fa-chart svg,
.fa-admin .fa-chart svg { display: block; inline-size: 100%; block-size: 112px; overflow: visible; }
.fa .fa-chart__grid,
.fa-admin .fa-chart__grid { stroke: var(--fa-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fa .fa-chart__base,
.fa-admin .fa-chart__base { stroke: var(--fa-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fa .fa-chart__bar,
.fa-admin .fa-chart__bar { fill: var(--fa-blue); transition: fill 120ms ease; }
.fa .fa-chart__hit,
.fa-admin .fa-chart__hit { fill: transparent; }
.fa .fa-chart__col:hover .fa-chart__hit,
.fa .fa-chart__col.is-active .fa-chart__hit,
.fa-admin .fa-chart__col:hover .fa-chart__hit,
.fa-admin .fa-chart__col.is-active .fa-chart__hit { fill: rgba(25, 89, 255, 0.06); }
.fa .fa-chart__col:hover .fa-chart__bar,
.fa .fa-chart__col.is-active .fa-chart__bar,
.fa-admin .fa-chart__col:hover .fa-chart__bar,
.fa-admin .fa-chart__col.is-active .fa-chart__bar { fill: var(--fa-blue-800); }
.fa .fa-chart__ymax,
.fa-admin .fa-chart__ymax { position: absolute; inset-inline-end: 0; inset-block-start: 6px; font-size: 11px; color: var(--fa-subtle); font-variant-numeric: tabular-nums; }
.fa .fa-chart__x,
.fa-admin .fa-chart__x { display: flex; justify-content: space-between; margin-block-start: 6px; padding-inline-end: 0; font-size: 11px; color: var(--fa-subtle); }
.fa .fa-chart__tip,
.fa-admin .fa-chart__tip {
	position: absolute; inset-block-start: -8px; z-index: 3; transform: translate(-50%, -100%);
	padding: 6px 9px; border-radius: 8px; background: var(--fa-ink); color: #fff; font-size: 12px; font-weight: 500;
	white-space: nowrap; pointer-events: none; box-shadow: var(--fa-shadow);
}
.fa .fa-chart__table,
.fa-admin .fa-chart__table { margin-block-start: 8px; font-size: 12px; }
.fa .fa-chart__table summary,
.fa-admin .fa-chart__table summary { cursor: pointer; color: var(--fa-subtle); inline-size: max-content; }
.fa .fa-chart__table table,
.fa-admin .fa-chart__table table { margin-block-start: 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fa .fa-chart__table th,
.fa .fa-chart__table td,
.fa-admin .fa-chart__table th,
.fa-admin .fa-chart__table td { padding: 3px 12px 3px 0; text-align: start; border: 0; font-size: 12px; }

/* ----------------------------------------------------------------- misc */
.fa .fa-empty,
.fa-admin .fa-empty { color: var(--fa-muted); margin: 0; padding: 18px 0; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.fa *,
	.fa-admin * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
