/* ==========================================================================
   SK design layer for the Elementor Pro templates
   Re-theme the whole site by editing the variables in :root.
   Elementor containers/widgets carry the sk-* classes (Advanced > CSS Classes).
   ========================================================================== */

:root {
	--sk-bg: #162835;
	--sk-bg-deep: #0f212e;
	--sk-bg-footer: #071d2a;
	--sk-card: #213743;
	--sk-text: #ffffff;
	--sk-muted: #b1bad3;
	--sk-primary: #1475e1;
	--sk-primary-hover: #0f5fb8;
	--sk-accent: #ffcc00;
	--sk-pro: #3ecf8e;
	--sk-con: #ff6b6b;
	--sk-radius: 16px;
	--sk-radius-sm: 8px;
	--sk-gap: 20px;
	--sk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--sk-header-h: 76px;
}

html { scroll-behavior: smooth; }

body {
	background: var(--sk-bg);
	color: var(--sk-muted);
	font-family: var(--sk-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */
body .sk-heading .elementor-heading-title {
	font-family: var(--sk-font);
	color: var(--sk-text);
	font-weight: 600;
}
body h1.elementor-heading-title { font-size: 36px; line-height: 1.2; }
body h2.elementor-heading-title { font-size: 30px; line-height: 1.3; }
body h3.elementor-heading-title { font-size: 24px; line-height: 1.3; }
body h4.elementor-heading-title { font-size: 18px; line-height: 1.3; }

body .sk-text,
body .sk-text p,
body .sk-text li { color: var(--sk-muted); font-family: var(--sk-font); font-size: 16px; line-height: 1.6; }
body .sk-text p { margin: 0; }
body .sk-text a { color: var(--sk-primary); text-decoration: none; }
body .sk-text a:hover { text-decoration: underline; }
body .sk-small, body .sk-small p { font-size: 14px; }
body .sk-muted, body .sk-muted p { color: var(--sk-muted); opacity: .85; }

body .sk-list ul, body .sk-list ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
body .sk-list ul { list-style: disc; }
body .sk-list li::marker { color: var(--sk-primary); }

/* ---------- section rhythm ---------- */
.e-con.sk-section { background: transparent; }
.e-con.sk-section > .e-con-inner { gap: var(--sk-gap); }
.sk-section [id^="elementor-toc__heading-anchor"] { scroll-margin-top: calc(var(--sk-header-h) + 16px); }
.sk-section h2.elementor-heading-title { scroll-margin-top: calc(var(--sk-header-h) + 16px); }

/* ---------- buttons ---------- */
body .sk-btn .elementor-button {
	font-family: var(--sk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	padding: 14px 24px;
	border-radius: var(--sk-radius-sm);
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body .sk-btn--primary .elementor-button { background: var(--sk-primary); color: #fff; }
body .sk-btn--primary .elementor-button:hover { background: var(--sk-primary-hover); color: #fff; }
body .sk-btn--secondary .elementor-button { background: transparent; color: #fff; border-color: var(--sk-primary); }
body .sk-btn--secondary .elementor-button:hover { background: var(--sk-primary); color: #fff; }
body .sk-btn--link .elementor-button { background: transparent; color: var(--sk-primary); padding-left: 0; padding-right: 0; }
body .sk-btn--link .elementor-button:hover { color: #fff; }
.sk-card .sk-btn .elementor-button { width: 100%; justify-content: center; }
.sk-card .sk-btn--link .elementor-button { justify-content: flex-start; }

/* ---------- images ---------- */
.sk-img img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ---------- grids (flex fallback in Elementor, CSS grid here) ---------- */
.e-con.sk-grid {
	display: grid;
	grid-template-columns: repeat(var(--sk-cols, 3), minmax(0, 1fr));
	gap: var(--sk-gap);
	align-items: stretch;
}
.sk-grid--2 { --sk-cols: 2; }
.sk-grid--3 { --sk-cols: 3; }
.sk-grid--4 { --sk-cols: 4; }
.sk-grid--6 { --sk-cols: 6; }
.e-con.sk-grid > .e-con { width: auto; max-width: none; }

/* ---------- cards ---------- */
.e-con.sk-card {
	background: var(--sk-card);
	border-radius: var(--sk-radius);
	padding: 16px;
	min-width: 0;
}
.sk-card .sk-list { margin-top: auto; }
.sk-card > .elementor-widget:last-child { margin-top: auto; }
.sk-card--game .sk-img img { aspect-ratio: 1; object-fit: cover; }

/* ---------- two-column content blocks ---------- */
.e-con.sk-two-col > .e-con.sk-col { flex: 1 1 0; min-width: 0; width: auto; }
.sk-center { justify-content: center; }

/* ---------- hero ---------- */
.e-con.sk-hero { background: var(--sk-bg-deep); }
.sk-hero .sk-btn-row .elementor-button { min-width: 160px; justify-content: center; }

/* ---------- quick links ---------- */
.sk-quick-links .sk-btn .elementor-button { width: 100%; justify-content: center; }

/* ---------- table of contents ---------- */
.sk-toc__widget .elementor-widget-container,
.sk-toc .elementor-toc__body { background: var(--sk-card); border-radius: var(--sk-radius); padding: 16px 24px; }
.sk-toc .elementor-toc__header { display: none; }
body .sk-toc .elementor-toc__list-item-text,
body .sk-toc .elementor-toc__list-item-text a { color: #fff; font-family: var(--sk-font); font-size: 16px; }
body .sk-toc .elementor-toc__list-item-text:hover { color: var(--sk-primary); }
.sk-toc .elementor-toc__list-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }

/* ---------- data table ---------- */
.sk-table-wrap .sk-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--sk-card);
	border-radius: 12px;
	overflow: hidden;
	color: #fff;
}
.sk-table td, .sk-table th {
	padding: 16px 24px 16px 16px;
	border: 0;
	border-bottom: 1px solid var(--sk-primary);
	text-align: left;
	color: var(--sk-muted);
	font-size: 16px;
	line-height: 1.5;
}
.sk-table tr:last-child td { border-bottom: 0; }
.sk-table td:first-child { color: #fff; font-weight: 600; width: 34%; }

/* ---------- pros / cons ---------- */
.sk-checks .elementor-icon-list-items { display: grid; gap: 10px; }
body .sk-checks .elementor-icon-list-item > .elementor-icon-list-text,
body .sk-checks .elementor-icon-list-item > a { color: var(--sk-muted); font-family: var(--sk-font); font-size: 16px; font-weight: 400; line-height: 1.5; }
body .sk-checks--pro .elementor-icon-list-icon i { color: var(--sk-pro); }
body .sk-checks--con .elementor-icon-list-icon i { color: var(--sk-con); }
body .sk-checks--pro .elementor-icon-list-icon svg { fill: var(--sk-pro); }
body .sk-checks--con .elementor-icon-list-icon svg { fill: var(--sk-con); }

/* ---------- numbered steps ---------- */
body .sk-step__num .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sk-primary);
	color: #fff;
	font-family: var(--sk-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- FAQ accordion ---------- */
.sk-faq .elementor-accordion-item { border: 0; margin-bottom: 10px; }
.sk-faq .elementor-tab-title {
	background: var(--sk-card);
	border: 0;
	border-radius: 12px;
	padding: 16px 20px;
}
body .sk-faq .elementor-tab-title a,
body .sk-faq .elementor-accordion-title { color: #fff; font-family: var(--sk-font); font-size: 18px; font-weight: 600; }
body .sk-faq .elementor-tab-title.elementor-active a { color: #fff; }
body .sk-faq .elementor-accordion-icon,
body .sk-faq .elementor-accordion-icon i,
body .sk-faq .elementor-active .elementor-accordion-icon,
body .sk-faq .elementor-active .elementor-accordion-icon i { color: var(--sk-primary); }
body .sk-faq .elementor-accordion-icon svg,
body .sk-faq .elementor-active .elementor-accordion-icon svg { fill: var(--sk-primary); }
body .sk-faq .elementor-tab-content { border: 0; padding: 16px 20px 6px; color: var(--sk-muted); font-family: var(--sk-font); font-size: 16px; font-weight: 400; }

/* ---------- header ---------- */
header.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--sk-bg-deep);
	transition: box-shadow .2s ease;
}
body.admin-bar header.elementor-location-header { top: 32px; }
header.elementor-location-header.is-stuck { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.e-con.sk-header { background: var(--sk-bg-deep); min-height: var(--sk-header-h); }
body .sk-logo .elementor-heading-title,
body .sk-logo .elementor-heading-title a { color: #fff; font-family: var(--sk-font); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
body .sk-nav .elementor-nav-menu--main .elementor-item {
	color: #fff;
	font-family: var(--sk-font);
	font-size: 15px;
	font-weight: 500;
	padding: 10px 14px;
}
body .sk-nav .elementor-nav-menu--main .elementor-item:hover,
body .sk-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--sk-accent); }
body .sk-nav .elementor-nav-menu--dropdown { background: var(--sk-card); border-radius: 12px; overflow: hidden; }
body .sk-nav .elementor-nav-menu--dropdown a { color: #fff; font-family: var(--sk-font); }
body .sk-nav .elementor-nav-menu--dropdown a:hover { background: var(--sk-bg-deep); color: var(--sk-accent); }
body .sk-nav .elementor-menu-toggle { color: #fff; background: transparent; }
.sk-header__actions .sk-btn .elementor-button { padding: 10px 18px; font-size: 15px; }

/* ---------- footer ---------- */
.e-con.sk-footer { background: var(--sk-bg-footer); color: #fff; }
.e-con.sk-footer > .e-con-inner { gap: 28px; }
body .sk-footer__title .elementor-heading-title { font-size: 16px; color: #fff; }
.sk-footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk-footer__links a { color: var(--sk-muted); text-decoration: none; }
.sk-footer__links a:hover { color: #fff; }
body .sk-pay-icon .elementor-icon { color: var(--sk-muted); font-size: 28px; }
body .sk-pay-icon .elementor-icon:hover { color: #fff; }
body .sk-social .elementor-social-icon { background: var(--sk-card); }
body .sk-social .elementor-social-icon:hover { background: var(--sk-primary); }
.sk-footer__legal { max-width: 720px; }

/* floating app-download card (footer template) */
.e-con.sk-download {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: auto;
	max-width: 360px;
	background: var(--sk-card);
	border-radius: var(--sk-radius);
	padding: 12px 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.sk-download .sk-img img { width: 44px; height: 44px; border-radius: 10px; }
.sk-download .sk-img { width: 44px; flex: 0 0 44px; }
body .sk-download__title, body .sk-download__title p { color: #fff; font-weight: 600; margin: 0; white-space: nowrap; }
body.elementor-editor-active .e-con.sk-download { position: static; }

/* back to top (injected by clone.js) */
.sk-to-top {
	position: fixed;
	right: 20px;
	bottom: 96px;
	z-index: 89;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sk-primary);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.sk-to-top.is-visible { opacity: 1; pointer-events: auto; }
.sk-to-top:hover { background: var(--sk-primary-hover); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
	.e-con.sk-grid { grid-template-columns: repeat(min(var(--sk-cols, 3), 2), minmax(0, 1fr)); }
	.sk-toc .elementor-toc__list-wrapper { grid-template-columns: minmax(0, 1fr); }
	body h1.elementor-heading-title { font-size: 32px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	.e-con.sk-grid { grid-template-columns: minmax(0, 1fr); }
	.e-con.sk-two-col { gap: 24px; }
	body h1.elementor-heading-title { font-size: 28px; }
	body h2.elementor-heading-title { font-size: 24px; }
	body h3.elementor-heading-title { font-size: 20px; }
	.sk-hero .sk-btn-row .elementor-button { width: 100%; }
	.sk-hero .sk-btn-row, .sk-hero .sk-btn-row .elementor-widget { width: 100%; }
	.sk-header__actions { display: none; }
	.e-con.sk-download { left: 12px; right: 12px; bottom: 12px; max-width: none; }
	.sk-to-top { bottom: 84px; right: 12px; }
	.sk-table td:first-child { width: 42%; }
	.sk-table td, .sk-table th { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}