/* FillKite Core: fonts, design tokens and base styles shared by every widget.
   Tokens match the static design (Fillkite Website/assets/css/style.css); the Elementor kit holds the same values. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("../fonts/PlusJakartaSans-variable.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Poppins-700.woff2") format("woff2"); }

:root {
	--fkc-primary: #2F80ED;
	--fkc-primary-strong: #1F6FD6;
	--fkc-primary-dark: #185BB3;
	--fkc-primary-ink: #1758AD;
	--fkc-primary-soft: #EAF2FE;
	--fkc-accent: #FF6B57;
	--fkc-accent-strong: #C93A28;
	--fkc-accent-ink: #A8301F;
	--fkc-accent-soft: #FFEDEA;
	--fkc-text: #1B2A41;
	--fkc-muted: #5B6B82;
	--fkc-on-dark-muted: #C5D0DE;
	--fkc-border: #E3E8EF;
	--fkc-border-strong: #CBD3DE;
	--fkc-fill: #EEF1F5;
	--fkc-bg: #FFFFFF;
	--fkc-bg-soft: #F6F8FB;
	--fkc-success-ink: #17683F;
	--fkc-success-soft: #E6F6EE;

	--fkc-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fkc-font-mark: "Poppins", var(--fkc-font);
	--fkc-container: 1200px;
	--fkc-gutter: 24px;

	--fkc-radius-sm: 8px;
	--fkc-radius-md: 12px;
	--fkc-radius-lg: 16px;
	--fkc-shadow-sm: 0 1px 2px rgba(27, 42, 65, .06), 0 1px 3px rgba(27, 42, 65, .06);
	--fkc-shadow-md: 0 6px 16px -4px rgba(27, 42, 65, .10), 0 2px 4px rgba(27, 42, 65, .04);
	--fkc-shadow-lg: 0 28px 56px -16px rgba(27, 42, 65, .22), 0 8px 20px -8px rgba(27, 42, 65, .10);
	--fkc-ease-out: cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 767px) { :root { --fkc-gutter: 16px; } }

body { -webkit-font-smoothing: antialiased; }
/* Base links and headings, not in the Elementor kit: `body a` (0,0,2) beats Hello's reset but loses to any widget class. */
body a { color: var(--fkc-primary-strong); text-underline-offset: 3px; }
body a:where(:hover) { color: var(--fkc-primary-dark); }
body :is(h1, h2, h3, h4, h5, h6) { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; color: var(--fkc-text); }
body :is(h3, h4, h5, h6) { font-weight: 700; }

.fkc-container { width: min(100% - 2 * var(--fkc-gutter), var(--fkc-container)); margin-inline: auto; }

:where(.fkc-header, .fkc-footer, .fkc-popup) :focus-visible,
.elementor [class*="fkc-"] :focus-visible,
.elementor a:focus-visible, .elementor button:focus-visible {
	outline: 3px solid var(--fkc-primary-strong);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Buttons used by Core widgets */
.fkc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--fkc-radius-sm);
	background: var(--fkc-primary-strong);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--fkc-ease-out);
}
.fkc-btn:hover { background: var(--fkc-primary-dark); color: #fff; transform: translateY(-1px); }
.fkc-btn--sm { min-height: 40px; padding: 8px 16px; font-size: .875rem; }
.fkc-btn--secondary { background: var(--fkc-bg); color: var(--fkc-text); border-color: var(--fkc-border-strong); box-shadow: var(--fkc-shadow-sm); }
.fkc-btn--secondary:hover { background: var(--fkc-bg); color: var(--fkc-text); border-color: var(--fkc-primary); }
.fkc-btn--accent { background: var(--fkc-accent); color: var(--fkc-text); }
.fkc-btn--accent:hover { background: #FF8474; color: var(--fkc-text); }
.fkc-btn--block { width: 100%; }
.fkc-btn svg { width: 18px; height: 18px; flex: none; }

/* Badges, chips, check lists and "more" links shared by several widgets */
.fkc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.fkc-badge--pro { background: var(--fkc-primary-soft); color: var(--fkc-primary-ink); }
.fkc-badge--soon { background: var(--fkc-accent-soft); color: var(--fkc-accent-ink); }
.fkc-badge--accent { background: var(--fkc-accent); color: var(--fkc-text); }

.fkc-chip { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--fkc-radius-sm); font-weight: 700; line-height: 1.5; }
.fkc-chip--field { background: var(--fkc-primary-soft); border-color: #CFE0FB; color: var(--fkc-primary-ink); }
.fkc-chip--op { background: var(--fkc-fill); border-color: var(--fkc-border); color: var(--fkc-text); }
.fkc-chip--value { background: var(--fkc-bg); border-color: var(--fkc-border-strong); color: var(--fkc-text); font-variant-numeric: tabular-nums; }
.fkc-chip--action { background: var(--fkc-accent-soft); border-color: #FFD2CB; color: var(--fkc-accent-ink); }
.fkc-chip--sm { padding: 1px 6px; border-radius: 5px; font-size: 10.5px; line-height: 1.6; }

.fkc-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fkc-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.fkc-checks li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--fkc-primary-soft) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231758AD%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 12 4 4 8-8%27/%3E%3C/svg%3E") center / 14px no-repeat; }

.fkc-more { margin-top: 32px; text-align: center; }
.fkc-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.fkc-link-arrow svg { width: 18px; height: 18px; transition: transform .2s var(--fkc-ease-out); }
.fkc-link-arrow:hover svg { transform: translateX(3px); }
[dir="rtl"] .fkc-link-arrow svg, [dir="rtl"] .fkc-btn svg { transform: scaleX(-1); }

/* App window chrome (builder and inbox mockups) */
.fkc-window-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fkc-border); background: var(--fkc-bg-soft); }
.fkc-window-bar__dots { display: flex; gap: 6px; }
.fkc-window-bar__dots span { width: 10px; height: 10px; border-radius: 50%; background: #D5DCE5; }

/* Section backgrounds picked in Elementor: Advanced → CSS Classes */
.fkc-bg-hero { background: radial-gradient(640px 420px at 88% 18%, rgba(47, 128, 237, .20), transparent 70%), radial-gradient(520px 380px at 72% 88%, rgba(255, 107, 87, .16), transparent 70%), radial-gradient(560px 360px at 0% 0%, rgba(47, 128, 237, .08), transparent 70%), var(--fkc-bg); }
.fkc-bg-page { background: radial-gradient(560px 320px at 85% 0%, rgba(47, 128, 237, .14), transparent 70%), radial-gradient(420px 260px at 10% 100%, rgba(255, 107, 87, .10), transparent 70%), var(--fkc-bg-soft); }

/* Card widgets fill their grid cell */
:is(.elementor-widget-fkc-card, .elementor-widget-fkc-plans) > .elementor-widget-container { height: 100%; }

/* The FillKite mark + wordmark */
.fkc-logo { display: inline-flex; align-items: center; gap: 6px; color: var(--fkc-text); font-family: var(--fkc-font-mark); font-size: 1.22rem; font-weight: 700; letter-spacing: .083em; text-decoration: none; }
.fkc-logo:hover { color: var(--fkc-text); }
.fkc-logo__mark { width: 30px; height: 32px; flex: none; }
.fkc-logo__end { color: var(--fkc-primary-strong); }

.fkc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link printed before the header */
.fkc-skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100000; padding: 12px 16px; border-radius: var(--fkc-radius-sm); background: var(--fkc-text); color: #fff; font-weight: 700; }
.fkc-skip-link:focus { left: 16px; color: #fff; }

/* Elementor entrance animations stop when the visitor asks for less motion */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; }
	.elementor .animated { animation: none !important; }
	.fkc-btn, .fkc-btn:hover { transition: none; transform: none; }
}