/* ==========================================================================
   stkrd: "die-cut sticker" look
   Tokens, shortcode UI (generator, waitlist, ads) and the classes used by
   the Elementor templates. Class names start with stk- so they never clash
   with your theme.
   ========================================================================== */

:root {
	--stk-ink: #121212;
	--stk-ink-2: #3D3D38;
	--stk-muted: #55554F;
	--stk-paper: #FFFFFF;
	--stk-mist: #F2F1EC;
	--stk-line: #D4D3CC;
	--stk-yellow: #FFD23F;
	--stk-cream: #FFF6D1;
	--stk-focus: #2B5BD7;
	--stk-radius: 14px;
	--stk-shadow: 6px 6px 0 var(--stk-ink);
	--stk-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
	--stk-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

.stk-badge {
	display: inline-block;
	font-family: var(--stk-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	padding: 6px 14px;
	border: 2px solid var(--stk-ink);
	border-radius: 999px;
	background: var(--stk-yellow);
	color: var(--stk-ink);
}
.stk-badge--tilt { transform: rotate(-2deg); }
.stk-badge--white { background: var(--stk-paper); }
.stk-badge--dark { background: var(--stk-ink); color: var(--stk-paper); }

.stk-ui .stk-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 20px;
	font-family: var(--stk-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	color: var(--stk-ink);
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease;
}
.stk-ui .stk-button:hover{ transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--stk-ink); }
.stk-ui .stk-button:active{ transform: none; box-shadow: none; }
.stk-ui .stk-button--yellow{ background: var(--stk-yellow); }
.stk-ui .stk-button--dark{ background: var(--stk-ink); color: var(--stk-paper); }

.stk-ui .stk-link{
	font: inherit;
	font-weight: 700;
	color: var(--stk-ink);
	background: none;
	border: 0;
	padding: 6px 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	cursor: pointer;
}

.stk-ui .stk-label{
	display: block;
	font-family: var(--stk-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--stk-ink);
	margin: 0 0 8px;
	padding: 0;
}

.stk-ui .stk-input{
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--stk-body);
	font-size: 16px;
	color: var(--stk-ink);
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	border-radius: 12px;
	padding: 12px 14px;
	min-height: 48px;
	box-shadow: none;
}
.stk-ui .stk-input::placeholder{ color: #8A8981; }
.stk-ui .stk-input[aria-invalid="true"]{ border-color: #B4231F; }
.stk-ui textarea.stk-input{ resize: vertical; min-height: 88px; }

.stk-ui.stk-gen :focus-visible,
.stk-ui.stk-waitlist :focus-visible,
.stk-page :focus-visible {
	outline: 3px solid var(--stk-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Generator  [stkrd_generator]
   -------------------------------------------------------------------------- */

.stk-ui.stk-gen{
	font-family: var(--stk-body);
	color: var(--stk-ink);
	background: var(--stk-paper);
	border: 2.5px solid var(--stk-ink);
	border-radius: 22px;
	box-shadow: var(--stk-shadow);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
	width: 100%;
}
.stk-ui.stk-gen *, .stk-ui.stk-gen *::before, .stk-ui.stk-gen *::after{ box-sizing: border-box; }

.stk-ui .stk-tabs, .stk-ui .stk-subtabs{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.stk-ui .stk-tabs button, .stk-ui .stk-subtabs button{
	font-family: var(--stk-body);
	font-size: 15px;
	font-weight: 500;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	border: 2px solid var(--stk-ink);
	background: var(--stk-paper);
	color: var(--stk-ink);
	cursor: pointer;
	line-height: 1;
}
.stk-ui .stk-tabs button[aria-selected="true"]{
	background: var(--stk-ink);
	color: var(--stk-paper);
	font-weight: 700;
}
.stk-ui .stk-subtabs{ gap: 0; border-bottom: 2px solid var(--stk-ink); }
.stk-ui .stk-subtabs button{
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0 14px;
	margin-bottom: -2px;
	border-bottom: 4px solid transparent;
}
.stk-ui .stk-subtabs button[aria-selected="true"]{
	font-weight: 700;
	border-bottom-color: var(--stk-yellow);
	box-shadow: inset 0 -2px 0 var(--stk-ink);
}

.stk-ui .stk-panel{ display: flex; flex-direction: column; gap: 0; }
.stk-ui .stk-panel[hidden], .stk-ui .stk-subpanel[hidden]{ display: none; }
.stk-ui .stk-panel > .stk-label ~ .stk-label{ margin-top: 14px; }
.stk-ui .stk-row2{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.stk-ui .stk-vc-intro { margin: 0 0 12px; }
.stk-ui .stk-vc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
@media (max-width: 520px) { .stk-ui .stk-vc-grid { grid-template-columns: minmax(0, 1fr); } }
.stk-ui .stk-panel .stk-vc-grid .stk-label { margin-top: 0; }
.stk-ui .stk-panel > .stk-note { margin-top: 8px; }
.stk-ui .stk-wa-cc { flex: 1 1 160px; }
.stk-ui textarea.stk-input--short { min-height: 64px; }
.stk-ui .stk-walink { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.stk-ui .stk-walink[hidden] { display: none; }
.stk-ui .stk-walink .stk-label { margin: 0; }
.stk-ui .stk-row2 > div{ flex: 1 1 200px; min-width: 0; }
.stk-ui .stk-panel .stk-row2:last-child{ margin-bottom: 0; }

.stk-ui .stk-msg{
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	background: var(--stk-cream);
	border: 2px solid var(--stk-ink);
	border-radius: 10px;
	padding: 10px 14px;
}

.stk-ui .stk-gen-body{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.stk-ui .stk-preview-wrap{
	flex: 0 1 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0 auto;
}
.stk-ui .stk-preview{
	width: 236px;
	height: 236px;
	padding: 12px;
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	border-radius: 18px;
	transform: rotate(-2deg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
}
.stk-ui .stk-preview svg, .stk-ui .stk-preview canvas{ width: 100% !important; height: 100% !important; display: block; }
.stk-ui .stk-preview.is-placeholder{ opacity: .35; }
.stk-ui .stk-downloads{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stk-ui .stk-add-logo{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	font-family: var(--stk-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--stk-ink);
	background: var(--stk-mist);
	border: 2px dashed var(--stk-ink);
	border-radius: 12px;
	cursor: pointer;
}
.stk-ui .stk-add-logo:hover{ background: var(--stk-cream); }

.stk-ui .stk-controls{
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.stk-ui .stk-subpanel{ display: flex; flex-direction: column; gap: 16px; }
.stk-ui .stk-fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }

.stk-ui .stk-swatches{ display: flex; flex-wrap: wrap; gap: 10px; }
.stk-ui .stk-swatch{ position: relative; display: inline-block; cursor: pointer; margin: 0; }
.stk-ui .stk-swatch-face{
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--stk-line);
}
.stk-ui .stk-swatch input:checked + .stk-swatch-face,
.stk-ui .stk-swatch--custom.is-active .stk-swatch-face{
	border: 3px solid var(--stk-ink);
	box-shadow: inset 0 0 0 3px var(--stk-paper);
}
.stk-ui .stk-swatch input:focus-visible + .stk-swatch-face{ outline: 3px solid var(--stk-focus); outline-offset: 2px; }
.stk-ui .stk-swatch--custom .stk-swatch-face{
	border: 2px solid var(--stk-ink);
	background: conic-gradient(#B4231F, #FFD23F, #1E6B45, #2B5BD7, #6B2FA8, #B4231F);
}
.stk-ui .stk-swatch--custom.is-active .stk-swatch-face{ background: var(--stk-custom, #121212); }
.stk-ui .stk-swatch--custom input[type="color"]{
	position: absolute;
	inset: 0;
	width: 44px;
	height: 44px;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
}
.stk-ui .stk-swatch--custom:focus-within .stk-swatch-face{ outline: 3px solid var(--stk-focus); outline-offset: 2px; }

.stk-ui .stk-hex{ display: flex; align-items: center; gap: 10px; }
.stk-ui .stk-hex .stk-label{ margin: 0; }
.stk-ui .stk-input--hex{ width: 120px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; }

.stk-ui .stk-warning{
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	background: var(--stk-cream);
	border: 2px solid var(--stk-ink);
	border-radius: 10px;
	padding: 8px 12px;
}

.stk-ui .stk-opts{ display: grid; gap: 8px; }
.stk-ui .stk-opts--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stk-ui .stk-opts--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stk-ui .stk-opt{ position: relative; display: block; margin: 0; cursor: pointer; }
.stk-ui .stk-opt-face{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	min-height: 64px;
	border: 2px solid var(--stk-line);
	border-radius: 12px;
	background: var(--stk-paper);
	font-size: 13px;
	font-weight: 500;
	color: var(--stk-ink);
	text-align: center;
}
.stk-ui .stk-opt:hover .stk-opt-face{ border-color: var(--stk-ink); }
.stk-ui .stk-opt input:checked + .stk-opt-face{
	border-color: var(--stk-ink);
	background: var(--stk-yellow);
	font-weight: 700;
}
.stk-ui .stk-opt input:focus-visible + .stk-opt-face{ outline: 3px solid var(--stk-focus); outline-offset: 2px; }

.stk-ui .stk-upload{ position: relative; display: block; cursor: pointer; margin: 0; }
.stk-ui .stk-upload-face{
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	text-align: center;
	padding: 20px 16px;
	border: 2px dashed var(--stk-ink);
	border-radius: 12px;
	background: var(--stk-mist);
	font-weight: 700;
}
.stk-ui .stk-upload-face small{ font-weight: 400; font-size: 13px; color: var(--stk-muted); }
.stk-ui .stk-upload input:focus-visible + .stk-upload-face{ outline: 3px solid var(--stk-focus); outline-offset: 2px; }
.stk-ui .stk-note{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--stk-muted); }

.stk-ui .stk-soon{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	border-top: 2px dashed #B9B8B0;
	padding-top: 18px;
	font-size: 15px;
	line-height: 1.45;
}
.stk-ui .stk-soon p{ margin: 0; flex: 1 1 240px; color: var(--stk-ink-2); }

/* --------------------------------------------------------------------------
   Tracked codes (inside the generator)
   -------------------------------------------------------------------------- */

.stk-badge--small { font-size: 12px; padding: 2px 8px; vertical-align: 2px; margin-left: 4px; }

.stk-ui .stk-track{
	border: 2px solid var(--stk-ink);
	border-radius: 16px;
	background: var(--stk-mist);
	overflow: hidden;
}
.stk-ui .stk-track-toggle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	text-align: left;
	color: var(--stk-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.stk-ui .stk-track-toggle:disabled{ cursor: not-allowed; }
.stk-ui .stk-track-toggle:disabled .stk-switch{ opacity: .4; }
.stk-ui .stk-track-text{ display: flex; flex-direction: column; gap: 4px; }
.stk-ui .stk-track-title{ font-weight: 700; font-size: 16px; }
.stk-ui .stk-track-sub{ font-size: 14px; color: var(--stk-ink-2); line-height: 1.4; }
.stk-ui .stk-switch{
	flex: none;
	width: 52px;
	height: 30px;
	border-radius: 999px;
	border: 2px solid var(--stk-ink);
	background: var(--stk-paper);
	padding: 2px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	transition: background .15s ease;
}
.stk-ui .stk-switch span{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	box-sizing: border-box;
	transition: transform .15s ease;
}
.stk-ui .stk-track-toggle[aria-pressed="true"] .stk-switch{ background: var(--stk-ink); }
.stk-ui .stk-track-toggle[aria-pressed="true"] .stk-switch span{ transform: translateX(22px); background: var(--stk-yellow); border-color: var(--stk-yellow); }

.stk-ui .stk-track-form, .stk-ui .stk-track-done{
	padding: 4px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.stk-ui .stk-track-form[hidden], .stk-ui .stk-track-done[hidden]{ display: none; }
.stk-ui .stk-track-intro { margin: 0; font-size: 14px; line-height: 1.45; color: var(--stk-ink-2); }
.stk-ui .stk-track-form .stk-label{ margin: 0; }
.stk-ui .stk-track-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.stk-ui .stk-track-row .stk-input{ flex: 1 1 220px; min-width: 0; }
.stk-ui .stk-track-row .stk-button{ min-height: 48px; }
.stk-ui .stk-check{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.stk-ui .stk-check input{ width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--stk-ink); flex: none; }
.stk-ui .stk-track-done{ padding-top: 16px; }
.stk-ui .stk-track-ok{ margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1E6B45; }
.stk-ui .stk-track-actions{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.stk-ui .stk-copy{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--stk-paper);
	border: 2px dashed #B9B8B0;
	border-radius: 12px;
	padding: 8px 8px 8px 14px;
}
.stk-ui .stk-copy code{
	flex: 1 1 160px;
	min-width: 0;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 16px;
	font-weight: 700;
	background: none;
	color: var(--stk-ink);
	padding: 0;
	word-break: break-all;
}
.stk-ui .stk-copy .stk-button{ min-height: 40px; padding: 0 14px; font-size: 14px; }

/* --------------------------------------------------------------------------
   WhatsApp link generator  [stkrd_whatsapp]
   -------------------------------------------------------------------------- */

.stk-ui .stk-wa-fields { display: flex; flex-direction: column; gap: 14px; }
.stk-ui .stk-wa-fields .stk-row2 { margin-bottom: 0; }
.stk-ui .stk-wa-fields .stk-note { margin-top: 6px; }
.stk-ui .stk-wa-result { display: flex; flex-direction: column; gap: 10px; }
.stk-ui .stk-wa-result .stk-label { margin: 0; }
.stk-ui .stk-wa-result .stk-copy code { font-size: 15px; font-weight: 500; }
.stk-ui .stk-wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.stk-ui .stk-wa-actions .stk-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.stk-ui .stk-wa-qr {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	border-top: 2px dashed #B9B8B0;
	padding-top: 20px;
}
.stk-ui .stk-wa-qr[hidden], .stk-ui .stk-wa-track[hidden] { display: none; }
.stk-ui .stk-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .stk-ui .stk-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Stats page  [stkrd_stats]
   -------------------------------------------------------------------------- */

.stk-ui.stk-stats{
	--stk-scan: #121212;
	--stk-click: #FFD23F;
	font-family: var(--stk-body);
	color: var(--stk-ink);
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
}
.stk-ui.stk-stats *, .stk-ui.stk-stats *::before, .stk-ui.stk-stats *::after{ box-sizing: border-box; }
.stk-ui.stk-stats h2{ font-family: var(--stk-display); font-size: 21px; font-weight: 700; margin: 0; color: var(--stk-ink); letter-spacing: -0.01em; }
.stk-ui .stk-stats-title{
	font-family: var(--stk-display);
	font-weight: 800;
	font-size: 40px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 12px 0 8px;
	color: var(--stk-ink);
	word-break: break-word;
}
.stk-ui .stk-stats-sub{ margin: 0; color: var(--stk-ink-2); font-size: 16px; line-height: 1.5; max-width: 720px; }
.stk-ui .stk-stats--empty{ gap: 12px; padding: 40px 0; }
.stk-ui .stk-stats--empty p{ margin: 0; color: var(--stk-ink-2); font-size: 17px; }
.stk-ui .stk-stats-alert, .stk-ui .stk-flash{
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid currentColor;
	border-radius: 10px;
	padding: 10px 14px;
}
.stk-ui .stk-stats-alert, .stk-ui .stk-flash--error{ color: #B4231F; background: #FDEDEC; }
.stk-ui .stk-flash--ok{ color: #1E6B45; background: #E8F4EC; }

.stk-ui .stk-stats-grid{ display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.stk-ui .stk-stats-qr{
	flex: 1 1 280px;
	max-width: 100%;
	background: var(--stk-paper);
	border: 2.5px solid var(--stk-ink);
	border-radius: 22px;
	box-shadow: var(--stk-shadow);
	padding: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.stk-ui .stk-copyrow{ width: 100%; display: flex; flex-direction: column; gap: 8px; }
.stk-ui .stk-copyrow .stk-label{ margin: 0; }
.stk-ui .stk-stats-main{ flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.stk-ui .stk-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stk-ui .stk-tile{
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	border-radius: 16px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.stk-ui .stk-tile--scan{ background: var(--stk-yellow); }
.stk-ui .stk-tile-label{ font-size: 14px; font-weight: 500; color: var(--stk-ink-2); display: flex; align-items: center; gap: 8px; }
.stk-ui .stk-tile--scan .stk-tile-label{ color: var(--stk-ink); }
.stk-ui .stk-tile strong{ font-family: var(--stk-display); font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.stk-ui .stk-key{ display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--stk-ink); flex: none; }
.stk-ui .stk-key--scan{ background: var(--stk-scan); }
.stk-ui .stk-key--click{ background: var(--stk-click); }

.stk-ui .stk-panel-card{
	background: var(--stk-paper);
	border: 2px solid var(--stk-ink);
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.stk-ui .stk-panel-head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.stk-ui .stk-legend{ display: flex; gap: 16px; font-size: 14px; color: var(--stk-ink-2); }
.stk-ui .stk-legend > span{ display: inline-flex; align-items: center; gap: 6px; }

.stk-ui .stk-chart{
	height: 160px;
	display: flex;
	align-items: stretch;
	gap: 3px;
	border-bottom: 2px solid var(--stk-ink);
}
.stk-ui .stk-bar{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}
.stk-ui .stk-bar span{ display: block; width: 100%; }
.stk-ui .stk-bar-scan{ background: var(--stk-scan); }
.stk-ui .stk-bar-click{ background: var(--stk-click); box-shadow: inset 0 0 0 1.5px var(--stk-ink); }
.stk-ui .stk-bar-scan[style*="height:0%"], .stk-ui .stk-bar-click[style*="height:0%"]{ box-shadow: none; }
.stk-ui .stk-bar-scan:first-child, .stk-ui .stk-bar > span:first-child{ border-radius: 3px 3px 0 0; }
.stk-ui .stk-bar:hover span{ filter: brightness(1.15); }
.stk-ui .stk-chart-axis{ display: flex; justify-content: space-between; font-size: 13px; color: var(--stk-muted); margin-top: -6px; }

.stk-ui .stk-two{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.stk-ui .stk-rank{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stk-ui .stk-rank li{ display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; }
.stk-ui .stk-rank-n{ font-weight: 700; font-variant-numeric: tabular-nums; }
.stk-ui .stk-rank-bar{ grid-column: 1 / -1; height: 6px; background: var(--stk-mist); border-radius: 99px; overflow: hidden; }
.stk-ui .stk-rank-bar span{ display: block; height: 100%; background: var(--stk-ink); border-radius: 99px; }

.stk-ui .stk-dest .stk-label{ margin: 0; }
.stk-ui .stk-dest-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.stk-ui .stk-dest-row .stk-input{ flex: 1 1 260px; min-width: 0; }
.stk-ui .stk-dest-row .stk-button{ min-height: 48px; }
.stk-ui .stk-dest a{ color: var(--stk-ink); word-break: break-all; }
.stk-ui .stk-panel-card .stk-note{ margin: 0; }
.stk-ui .stk-credit { font-size: 12px; }
.stk-ui .stk-change { font-size: 13px; font-weight: 700; }
.stk-ui .stk-change--up { color: #1E6B45; }
.stk-ui .stk-change--down { color: #B4231F; }
.stk-ui .stk-tile--scan .stk-change--up { color: var(--stk-ink); }
.stk-ui .stk-heat-wrap { overflow-x: auto; }
.stk-ui .stk-heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 520px; font-size: 11px; margin: 0; }
.stk-ui .stk-heat th { font-weight: 500; color: var(--stk-muted); text-align: left; padding: 0 4px 0 0; border: 0; background: none; white-space: nowrap; }
.stk-ui .stk-heat thead th { text-align: left; padding: 0; height: 16px; }
.stk-ui .stk-heat td { height: 18px; border-radius: 3px; padding: 0; border: 0; background: var(--stk-mist); }
.stk-ui .stk-heat td.stk-heat-1 { background: #FFF0B8; }
.stk-ui .stk-heat td.stk-heat-2 { background: #FFD23F; }
.stk-ui .stk-heat td.stk-heat-3 { background: #8A6D00; }
.stk-ui .stk-heat td.stk-heat-4 { background: var(--stk-ink); }
.stk-ui .stk-report { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.stk-ui .stk-report p { margin: 0; }
.stk-ui .stk-credit a { color: var(--stk-muted); }

/* --------------------------------------------------------------------------
   Waitlist  [stkrd_waitlist]
   -------------------------------------------------------------------------- */

.stk-ui.stk-waitlist{ font-family: var(--stk-body); width: 100%; }
.stk-ui .stk-waitlist-fields{ display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.stk-ui .stk-waitlist-field{ flex: 1 1 220px; min-width: 0; }
.stk-ui.stk-waitlist .stk-button{ min-height: 48px; flex: 0 0 auto; }
.stk-ui .stk-waitlist-note{ margin: 10px 0 0; font-size: 14px; }
.stk-ui .stk-waitlist-msg{
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid currentColor;
	border-radius: 10px;
	padding: 10px 14px;
}
.stk-ui .stk-waitlist--dark .stk-label, .stk-ui .stk-waitlist--dark .stk-waitlist-note{ color: #E6E5DF; }
.stk-ui .stk-waitlist--dark .stk-input{ border-color: var(--stk-paper); }
.stk-ui .stk-waitlist--dark .stk-button{ border-color: var(--stk-yellow); }
.stk-ui .stk-waitlist--dark .stk-waitlist-msg--ok{ color: var(--stk-yellow); }
.stk-ui .stk-waitlist--dark .stk-waitlist-msg--error{ color: #FFB4A8; }
.stk-ui .stk-waitlist--light .stk-waitlist-note{ color: var(--stk-muted); }
.stk-ui .stk-waitlist--light .stk-waitlist-msg--ok{ color: #1E6B45; }
.stk-ui .stk-waitlist--light .stk-waitlist-msg--error{ color: #B4231F; }
.stk-ui .stk-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Ads  [stkrd_ad]
   -------------------------------------------------------------------------- */

.stk-ui.stk-ad{ display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; font-family: var(--stk-body); }
.stk-ui .stk-ad-label{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--stk-muted); }
.stk-ui .stk-ad-box{ width: 100%; max-width: 970px; display: flex; justify-content: center; }
.stk-ui .stk-ad--empty .stk-ad-box{
	min-height: 90px;
	align-items: center;
	padding: 16px;
	border: 2px dashed #B9B8B0;
	border-radius: 10px;
	background: #F7F7F4;
	font-size: 14px;
	color: var(--stk-muted);
	text-align: center;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Theme-proofing
   Many themes (Hello Elementor included) style every <button> and <input>
   with their own colors. These rules keep the stkrd look in every state.
   -------------------------------------------------------------------------- */

.stk-ui button { text-transform: none; letter-spacing: normal; white-space: normal; text-shadow: none; }
.stk-ui .stk-button:is(:hover,:focus,:active) { background: var(--stk-paper); color: var(--stk-ink); border-color: var(--stk-ink); }
.stk-ui .stk-button--yellow:is(:hover,:focus,:active) { background: var(--stk-yellow); }
.stk-ui .stk-button--dark:is(:hover,:focus,:active) { background: var(--stk-ink); color: var(--stk-paper); }
.stk-ui.stk-waitlist--dark .stk-button:is(:hover,:focus,:active) { border-color: var(--stk-yellow); }
.stk-ui .stk-tabs button:is(:hover,:focus,:active) { background: var(--stk-paper); color: var(--stk-ink); border-color: var(--stk-ink); }
.stk-ui .stk-tabs button[aria-selected="true"]:is(:hover,:focus,:active) { background: var(--stk-ink); color: var(--stk-paper); }
.stk-ui .stk-subtabs button:is(:hover,:focus,:active) { background: transparent; color: var(--stk-ink); }
.stk-ui .stk-link:is(:hover,:focus,:active) { background: none; color: var(--stk-ink); border: 0; }
.stk-ui .stk-add-logo:is(:focus,:active) { background: var(--stk-mist); color: var(--stk-ink); border-color: var(--stk-ink); }
.stk-ui .stk-add-logo:hover { background: var(--stk-cream); color: var(--stk-ink); border-color: var(--stk-ink); }
.stk-ui .stk-track-toggle:is(:hover,:focus,:active) { background: transparent; color: var(--stk-ink); border: 0; }
.stk-ui .stk-input:focus { border-color: var(--stk-ink); box-shadow: none; outline: 3px solid var(--stk-focus); outline-offset: 1px; }
.stk-ui.stk-waitlist--dark .stk-input:focus { border-color: var(--stk-paper); }

/* ==========================================================================
   Elementor template classes
   Every top-level container in the templates carries .stk-page.
   Layout (direction, gap, padding, background color) stays editable in
   Elementor; borders, shadows and type live here.
   ========================================================================== */

.stk-page { font-family: var(--stk-body); color: var(--stk-ink); }
.stk-page .elementor-widget:not(:last-child) { margin-block-end: 0; }

.stk-page .e-con.stk-wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
.stk-page .e-con.stk-wrap--narrow { max-width: 820px; }

/* Flexible children: grow, wrap and never overflow */
.stk-page .e-con.stk-grow { flex: 1 1 420px; width: auto; min-width: 0; }
.stk-page .e-con.stk-grow-wide { flex: 1 1 520px; width: auto; min-width: 0; }
.stk-page .e-con.stk-fit { flex: 0 1 auto; width: auto; }

/* Type */
.stk-page .elementor-widget-heading .elementor-heading-title {
	font-family: var(--stk-display);
	color: var(--stk-ink);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0;
}
.stk-page .stk-h1 .elementor-heading-title { font-size: 68px; line-height: 1; letter-spacing: -0.03em; }
.stk-page .stk-h2 .elementor-heading-title { font-size: 44px; }
.stk-page .stk-h3 .elementor-heading-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.stk-page .stk-h4 .elementor-heading-title { font-size: 21px; font-weight: 700; letter-spacing: 0; }
.stk-page .stk-price .elementor-heading-title { font-size: 44px; }

.stk-page .elementor-widget-text-editor {
	font-family: var(--stk-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--stk-ink-2);
}
.stk-page .elementor-widget-text-editor p { margin: 0 0 0.8em; }
.stk-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.stk-page .stk-lead { font-size: 20px; max-width: 520px; }
.stk-page .stk-small { font-size: 15px; color: var(--stk-muted); }
.stk-page .stk-center, .stk-page .stk-center .elementor-heading-title { text-align: center; }
.stk-page .stk-center.stk-lead { margin-inline: auto; max-width: 640px; }

/* Check lists (Icon List widget) */
.stk-page .stk-checks .elementor-icon-list-items { display: flex; flex-direction: column; gap: 12px; }
.stk-page .stk-checks .elementor-icon-list-item { padding: 0 !important; margin: 0 !important; align-items: center; }
.stk-page .stk-checks .elementor-icon-list-text { font-family: var(--stk-body); font-size: 17px; color: var(--stk-ink); padding-inline-start: 10px; }
.stk-page .stk-checks .elementor-icon-list-icon i { color: var(--stk-ink); font-size: 16px; }
.stk-page .stk-checks .elementor-icon-list-icon svg { fill: var(--stk-ink); width: 16px; height: 16px; }
.stk-page .stk-checks--small .elementor-icon-list-text { font-size: 16px; }

/* Buttons (Button widget) */
.stk-page .stk-btn .elementor-button {
	font-family: var(--stk-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 15px 22px;
	border: 2px solid var(--stk-ink);
	border-radius: 12px;
	background: var(--stk-paper);
	color: var(--stk-ink);
	fill: var(--stk-ink);
	transition: transform .12s ease, box-shadow .12s ease;
}
.stk-page .stk-btn .elementor-button:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--stk-ink); }
.stk-page .stk-btn--yellow .elementor-button { background: var(--stk-yellow); }
.stk-page .stk-btn--dark .elementor-button { background: var(--stk-ink); color: var(--stk-paper); }
.stk-page .stk-btn--block .elementor-button { width: 100%; justify-content: center; }
.stk-page.stk-band .stk-btn--yellow .elementor-button,
.stk-page .stk-band-inner .stk-btn--yellow .elementor-button { border-color: var(--stk-yellow); }
.stk-page.stk-band .stk-btn .elementor-button:hover { box-shadow: 3px 3px 0 var(--stk-paper); }

/* Header */
.e-con.stk-page.stk-header { border-bottom: 2px solid var(--stk-ink); position: relative; z-index: 5; }
.stk-logo a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--stk-ink); }
.stk-logo-word { font-family: var(--stk-display); font-weight: 800; font-size: 26px; letter-spacing: -0.5px; line-height: 1; }
.stk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.stk-nav a { font-family: var(--stk-body); font-weight: 500; font-size: 16px; color: var(--stk-ink); text-decoration: none; padding: 10px 0; display: inline-block; }
.stk-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Sections */
.e-con.stk-page.stk-hero { border-bottom: 2px solid var(--stk-ink); }
.stk-page .e-con.stk-hero-copy { padding-top: 20px; }
.e-con.stk-page.stk-mist { border-top: 2px solid var(--stk-ink); }

/* Cards */
.stk-page .e-con.stk-card {
	border: 2.5px solid var(--stk-ink);
	border-radius: 20px;
	flex: 1 1 300px;
	width: auto;
	min-width: 0;
	position: relative;
}
.stk-page .e-con.stk-card--pop { box-shadow: var(--stk-shadow); }
.stk-page .e-con.stk-card--soon { border-style: dashed; }
.stk-page .e-con.stk-card--soon .elementor-widget-text-editor { color: var(--stk-muted); }
.stk-page .e-con.stk-usecase {
	border: 2px solid var(--stk-ink);
	border-radius: 18px;
	flex: 1 1 260px;
	width: auto;
	min-width: 0;
	transition: transform .12s ease, box-shadow .12s ease;
}
.stk-page .e-con.stk-usecase:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--stk-ink); }
.stk-page .e-con.stk-usecase .elementor-widget-text-editor { font-size: 16px; }

/* Plan cards */
.stk-page .stk-plan-list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; }
.stk-page .stk-plan-list .elementor-icon-list-text { font-family: var(--stk-body); font-size: 16px; color: var(--stk-ink); padding-inline-start: 10px; }
.stk-page .stk-plan-list .elementor-icon-list-icon i { color: var(--stk-ink); font-size: 14px; }
.stk-page .stk-plan-list .elementor-icon-list-icon svg { fill: var(--stk-ink); width: 14px; height: 14px; }
.stk-page .stk-push { margin-top: auto; }

/* Dark band */
.stk-page.stk-band .elementor-widget-heading .elementor-heading-title { color: var(--stk-paper); }
.stk-page.stk-band .elementor-widget-text-editor { color: #D9D8D2; }

/* FAQ (Toggle widget) */
.stk-page .stk-faq .elementor-toggle-item {
	border: 2px solid var(--stk-ink);
	border-radius: 16px;
	background: var(--stk-paper);
	margin-bottom: 12px;
	overflow: hidden;
}
.stk-page .stk-faq .elementor-tab-title {
	border: 0 !important;
	padding: 18px 22px;
	font-family: var(--stk-body);
	font-weight: 700;
	font-size: 18px;
	color: var(--stk-ink);
}
.stk-page .stk-faq .elementor-tab-title a { color: var(--stk-ink); }
.stk-page .stk-faq .elementor-toggle-icon i, .stk-page .stk-faq .elementor-toggle-icon svg { color: var(--stk-ink); fill: var(--stk-ink); }
.stk-page .stk-faq .elementor-tab-content {
	border: 0 !important;
	padding: 0 22px 20px;
	font-family: var(--stk-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--stk-ink-2);
}

/* Footer */
.e-con.stk-page.stk-footer { border-top: 2px solid var(--stk-ink); }
.stk-footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.stk-footer-links a { color: var(--stk-ink-2); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; display: inline-block; }

/* Small screens */
@media (max-width: 767px) {
	.stk-page .stk-h1 .elementor-heading-title { font-size: 46px; }
	.stk-page .stk-h2 .elementor-heading-title { font-size: 34px; }
	.stk-page .stk-lead { font-size: 18px; }
	.stk-gen { padding: 18px; box-shadow: 4px 4px 0 var(--stk-ink); }
	.stk-page .e-con.stk-hero-copy { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.stk-button, .stk-page .stk-btn .elementor-button, .stk-page .e-con.stk-usecase { transition: none; }
}

/* Anything the script hides stays hidden, even when a component rule sets display. */
.stk-ui [hidden], .stk-ui[hidden] { display: none !important; }

/* ---------- 0.8: UTM tags, custom endings, owner tools, abuse form ---------- */
.stk-ui .stk-utm, .stk-ui .stk-slug { border: 2px solid var(--stk-line); border-radius: 14px; padding: 12px 14px; background: var(--stk-paper); }
.stk-ui .stk-slug { border-width: 0; padding: 0; background: transparent; }
.stk-ui .stk-utm summary, .stk-ui .stk-slug summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style-position: inside; }
.stk-ui .stk-slug summary { font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.stk-ui .stk-utm[open] summary { margin-bottom: 8px; }
.stk-ui .stk-utm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; }
@media (max-width: 520px) { .stk-ui .stk-utm-grid { grid-template-columns: minmax(0, 1fr); } }
.stk-ui .stk-utm-final { margin: 10px 0 0; word-break: break-all; }
.stk-ui .stk-utm-final code { font-size: 13px; }
.stk-ui .stk-slug-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.stk-ui .stk-slug-host { font-weight: 700; white-space: nowrap; font-size: 15px; }
.stk-ui .stk-slug-row .stk-input { flex: 1 1 auto; min-width: 0; }
.stk-ui .stk-slug .stk-note { margin: 6px 0 0; }
.stk-ui .stk-others-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stk-ui .stk-others-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stk-line); }
.stk-ui .stk-others-list li:first-child { border-top: 0; }
.stk-ui .stk-others-list a { display: flex; flex-direction: column; gap: 2px; color: var(--stk-ink); text-decoration: none; min-width: 0; }
.stk-ui .stk-others-list a:is(:hover,:focus) .stk-others-slug { text-decoration: underline; }
.stk-ui .stk-others-slug { font-weight: 700; }
.stk-ui .stk-others-dest { font-size: 14px; color: var(--stk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-ui .stk-others-n { font-size: 14px; white-space: nowrap; color: var(--stk-ink-2); }
.stk-ui.stk-stats--empty .stk-find, .stk-ui.stk-abuse, .stk-ui.stk-contact { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.stk-ui.stk-abuse .stk-label, .stk-ui.stk-contact .stk-label { margin-top: 6px; }
.stk-ui.stk-contact .stk-row2 { margin-bottom: 0; }
.stk-ui.stk-contact .stk-row2 .stk-label { margin-top: 0; }
.stk-ui.stk-abuse .stk-note, .stk-ui.stk-contact .stk-note { margin: 0; }
.stk-ui.stk-contact .stk-note a { color: var(--stk-ink); font-weight: 700; }
.stk-lang-switch { font-weight: 700; text-decoration: none; }

/* Many tabs: one swipeable row on phones instead of three wrapped rows. */
@media (max-width: 600px) {
	.stk-ui.stk-gen { min-width: 0; max-width: 100%; }
	.stk-ui .stk-tabs { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: -2px; padding-inline: 2px; }
	.stk-ui .stk-tabs::-webkit-scrollbar { display: none; }
	.stk-ui .stk-tabs button { flex: none; white-space: nowrap; }
}

/* ---------- Arabic (right to left) ---------- */
[dir="rtl"] .stk-ui, .stk-ar .stk-ui { font-family: "IBM Plex Sans Arabic", var(--stk-body); }
[dir="rtl"] .stk-ui :is(h1, h2, h3, .stk-stats-title), [dir="rtl"] .stk-page :is(h1, h2, h3) { font-family: "IBM Plex Sans Arabic", var(--stk-display); letter-spacing: 0; }
[dir="rtl"] .stk-ui .stk-track-toggle { text-align: right; }
[dir="rtl"] .stk-ui .stk-track-toggle[aria-pressed="true"] .stk-switch span { transform: translateX(-22px); }
[dir="rtl"] .stk-ui .stk-badge--small { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .stk-ui .stk-heat th, [dir="rtl"] .stk-ui .stk-heat thead th { text-align: right; padding: 0 0 0 4px; }
[dir="rtl"] .stk-ui .stk-hp { left: auto !important; right: -9999px !important; }
[dir="rtl"] .stk-ui input[dir="ltr"], [dir="rtl"] .stk-ui textarea[dir="ltr"] { text-align: right; }
[dir="rtl"] .stk-ui input[dir="ltr"]:not(:placeholder-shown) { text-align: left; }
/* The chart, heatmap and QR read left to right in time and space, like in Arabic apps. */
[dir="rtl"] .stk-ui .stk-chart, [dir="rtl"] .stk-ui .stk-chart-axis, [dir="rtl"] .stk-ui .stk-heat-wrap, [dir="rtl"] .stk-ui .stk-preview { direction: ltr; }
/* Three download buttons fit on one row under the preview. */
.stk-ui .stk-downloads { gap: 8px; }
.stk-ui .stk-downloads .stk-button { padding: 0 14px; }
.stk-ui .stk-downloads .stk-button:first-child { padding: 0 18px; }
.stk-ui .stk-downloads { align-items: center; }
.stk-ui .stk-dl-label { flex-basis: 100%; text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--stk-muted); }
[dir="rtl"] .stk-ui .stk-dl-label { text-transform: none; letter-spacing: 0; }
.stk-ui .stk-downloads .stk-button, .stk-ui .stk-downloads .stk-button:first-child { padding: 0 18px; min-width: 72px; }
/* Legal and help pages */
.stk-page .stk-prose p { font-size: 17px; line-height: 1.65; margin: 0 0 12px; }
.stk-page .stk-prose a { color: var(--stk-ink); text-decoration: underline; text-underline-offset: 3px; }
.stk-page .stk-h3 + .stk-prose { margin-top: -4px; }
/* FAQ toggles keep their shape even if Elementor's own toggle styles load late. */
.stk-page .stk-faq .elementor-toggle-icon { display: inline-flex; width: 1em; margin-inline-end: 10px; }
.stk-page .stk-faq .elementor-toggle-icon svg { width: 1em; height: 1em; }
.stk-page .stk-faq .elementor-tab-title .elementor-toggle-icon-opened { display: none; }
.stk-page .stk-faq .elementor-tab-title.elementor-active .elementor-toggle-icon-closed { display: none; }
.stk-page .stk-faq .elementor-tab-title.elementor-active .elementor-toggle-icon-opened { display: inline-flex; }
.stk-page .stk-faq .elementor-tab-content:not(.elementor-active) { display: none; }
/* Forms that are cards themselves (contact, report abuse). */
.stk-ui.stk-panel-card { background: var(--stk-paper); border: 2px solid var(--stk-ink); border-radius: 18px; padding: 24px; box-sizing: border-box; }
.stk-page .e-con.stk-usecase.stk-quick { flex: 0 0 auto; min-height: 0; width: 100%; }