/* KRESTA Loan Products Section — all rules scoped to .kcs-wrap */

.kcs-wrap {
	/* Brand colours (overridden inline by the plugin: --kcs-primary / --kcs-accent) */
	--kcs-primary: #2563eb;
	--kcs-accent: #38bdf8;
	--kcs-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--kcs-ease: cubic-bezier(0.165, 0.84, 0.44, 1);

	font-family: var(--kcs-font);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	padding: 90px 20px;
	background: var(--kcs-bg);
	color: var(--kcs-heading);
	transition: background-color .45s ease, color .45s ease;
	text-align: left;
}
.kcs-wrap *, .kcs-wrap *::before, .kcs-wrap *::after { box-sizing: border-box; }

/* ---------- DARK THEME (default) ---------- */
.kcs-wrap[data-kcs-theme="dark"] {
	--kcs-bg: var(--kcs-dk-bg, #0f172a);
	--kcs-heading: #ffffff;
	--kcs-muted: #94a3b8;
	--kcs-body: #cbd5e1;
	--kcs-card-bg: var(--kcs-dk-card, rgba(30, 41, 59, 0.7));
	--kcs-card-bg-hover: var(--kcs-dk-card-hover, rgba(30, 41, 59, 0.95));
	--kcs-border: rgba(255, 255, 255, 0.08);
	--kcs-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
	--kcs-highlight: var(--kcs-accent);                      /* icons, ticks, tag text */
	--kcs-tag-bg: color-mix(in srgb, var(--kcs-accent) 12%, transparent);
	--kcs-tag-border: color-mix(in srgb, var(--kcs-accent) 28%, transparent);
	--kcs-glow: color-mix(in srgb, var(--kcs-primary) 20%, transparent);
	--kcs-overlay: linear-gradient(180deg, transparent 40%, rgba(var(--kcs-dk-ov, 15, 23, 42), 0.8) 100%);
	--kcs-badge-bg: rgba(var(--kcs-dk-ov, 15, 23, 42), 0.75);
	--kcs-btn-bg: color-mix(in srgb, var(--kcs-accent) 10%, transparent);
	--kcs-btn-border: color-mix(in srgb, var(--kcs-accent) 38%, transparent);
	--kcs-btn-text: #ffffff;
	/* Light, bright sweep colours so the heading never looks dark-blue on dark */
	--kcs-sweep-a: #7dd3fc;
	--kcs-sweep-b: #e0f2fe;
	--kcs-sweep-a: var(--kcs-dk-sa, color-mix(in srgb, var(--kcs-accent) 65%, #ffffff));
	--kcs-sweep-b: var(--kcs-dk-sb, color-mix(in srgb, var(--kcs-accent) 25%, #ffffff));
	--kcs-sweep-c: var(--kcs-dk-sc, var(--kcs-sweep-b));
	color-scheme: dark;
}

/* ---------- LIGHT THEME ---------- */
.kcs-wrap[data-kcs-theme="light"] {
	--kcs-bg: var(--kcs-lt-bg, #f4f7fb);
	--kcs-heading: #0f172a;
	--kcs-muted: #475569;
	--kcs-body: #334155;
	--kcs-card-bg: #ffffff;
	--kcs-card-bg-hover: #ffffff;
	--kcs-border: rgba(15, 23, 42, 0.09);
	--kcs-shadow: 0 20px 40px -12px color-mix(in srgb, var(--kcs-primary) 30%, transparent);
	--kcs-highlight: var(--kcs-primary);
	--kcs-tag-bg: color-mix(in srgb, var(--kcs-primary) 9%, #ffffff);
	--kcs-tag-border: color-mix(in srgb, var(--kcs-primary) 28%, transparent);
	--kcs-glow: color-mix(in srgb, var(--kcs-accent) 22%, transparent);
	--kcs-overlay: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.45) 100%);
	--kcs-badge-bg: rgba(255, 255, 255, 0.92);
	--kcs-btn-bg: color-mix(in srgb, var(--kcs-primary) 8%, #ffffff);
	--kcs-btn-border: color-mix(in srgb, var(--kcs-primary) 35%, transparent);
	--kcs-btn-text: color-mix(in srgb, var(--kcs-primary) 80%, #000000);
	--kcs-sweep-a: var(--kcs-lt-sa, var(--kcs-primary));
	--kcs-sweep-b: var(--kcs-lt-sb, color-mix(in srgb, var(--kcs-primary) 55%, var(--kcs-accent)));
	--kcs-sweep-c: var(--kcs-lt-sc, var(--kcs-sweep-b));
	color-scheme: light;
}

/* Background glow */
.kcs-wrap::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 400px; height: 400px;
	background: radial-gradient(circle, var(--kcs-glow) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.kcs-wrap .kcs-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- THEME TOGGLE ---------- */
.kcs-wrap .kcs-toggle {
	position: absolute; top: -50px; right: 0;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--kcs-card-bg); color: var(--kcs-heading);
	border: 1px solid var(--kcs-border);
	border-radius: 50px; padding: 5px 14px 5px 6px;
	font: 600 12px/1 var(--kcs-font);
	cursor: pointer; z-index: 5;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.kcs-wrap .kcs-toggle:hover { border-color: var(--kcs-highlight); box-shadow: 0 6px 18px -6px var(--kcs-glow); }
.kcs-wrap .kcs-toggle:focus-visible { outline: 2px solid var(--kcs-highlight); outline-offset: 3px; }
.kcs-toggle-track {
	position: relative; display: inline-flex; align-items: center; justify-content: space-between;
	width: 52px; height: 28px; padding: 0 7px; border-radius: 28px;
	background: color-mix(in srgb, var(--kcs-highlight) 18%, transparent);
	color: var(--kcs-muted);
}
.kcs-toggle-knob {
	position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--kcs-highlight);
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	transition: transform .35s var(--kcs-ease);
}
.kcs-wrap[data-kcs-theme="light"] .kcs-toggle-knob { transform: translateX(24px); }
.kcs-toggle-track svg { position: relative; z-index: 2; }
.kcs-wrap[data-kcs-theme="dark"] .kcs-ico-moon { color: #0f172a; }
.kcs-wrap[data-kcs-theme="light"] .kcs-ico-sun { color: #ffffff; }

/* ---------- HEADER ---------- */
.kcs-wrap .kcs-header { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.kcs-wrap .kcs-logo { display: block; width: auto; max-width: 240px; margin: 0 auto 22px; object-fit: contain; }

.kcs-wrap .kcs-tag {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--kcs-tag-bg); color: var(--kcs-highlight);
	border: 1px solid var(--kcs-tag-border);
	padding: 6px 18px; border-radius: 50px; margin-bottom: 16px;
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}

.kcs-wrap h2.kcs-heading {
	font-family: var(--kcs-font);
	font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.25;
	letter-spacing: -0.5px; margin: 0 0 16px; padding: 0;
	color: var(--kcs-heading); text-transform: none;
}
.kcs-wrap .kcs-header p { font-size: 16px; line-height: 1.6; color: var(--kcs-muted); margin: 0; }

/* ---------- GRADIENT TEXT SWEEP (hover) ----------
   Layer 1 = accent gradient, grows 0% -> 100% (left to right) on hover
   Layer 2 = normal heading colour (always full width)
   Both are clipped to the letter shapes with background-clip:text. */
.kcs-wrap .kcs-sweep {
	display: inline-block;
	color: var(--kcs-heading);
	background-image:
		linear-gradient(90deg, var(--kcs-sweep-a), var(--kcs-sweep-b), var(--kcs-sweep-c)),
		linear-gradient(var(--kcs-heading), var(--kcs-heading));
	background-repeat: no-repeat;
	background-position: 0 0, 0 0;
	background-size: 0% 100%, 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-size .6s cubic-bezier(0.65, 0, 0.35, 1), transform .35s ease;
	cursor: default;
}
.kcs-wrap .kcs-heading:hover .kcs-sweep,
.kcs-wrap .kcs-card:hover .kcs-sweep {
	background-size: 100% 100%, 100% 100%;
	transform: translateY(-2px);
}

/* ---------- GRID ---------- */
.kcs-wrap .kcs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kcs-wrap.kcs-cols-3 .kcs-grid { grid-template-columns: repeat(3, 1fr); }
.kcs-wrap.kcs-cols-2 .kcs-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .kcs-wrap .kcs-grid, .kcs-wrap.kcs-cols-3 .kcs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
	.kcs-wrap { padding: 80px 16px 60px; }
	.kcs-wrap .kcs-grid, .kcs-wrap.kcs-cols-3 .kcs-grid, .kcs-wrap.kcs-cols-2 .kcs-grid { grid-template-columns: 1fr; }
}

/* ---------- CARD ---------- */
.kcs-wrap .kcs-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--kcs-card-bg);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--kcs-border); border-radius: 20px;
	transition: transform .4s var(--kcs-ease), border-color .4s var(--kcs-ease), box-shadow .4s var(--kcs-ease), background-color .4s ease;
}
.kcs-wrap .kcs-card:hover {
	transform: translateY(-10px);
	border-color: var(--kcs-highlight);
	box-shadow: var(--kcs-shadow);
	background: var(--kcs-card-bg-hover);
}

.kcs-wrap .kcs-card-img { position: relative; width: 100%; height: 190px; overflow: hidden; background: color-mix(in srgb, var(--kcs-primary) 15%, transparent); }
.kcs-wrap .kcs-card-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; transition: transform .6s var(--kcs-ease); }
.kcs-wrap .kcs-card:hover .kcs-card-img img { transform: scale(1.1); }
.kcs-wrap .kcs-card-overlay { position: absolute; inset: 0; background: var(--kcs-overlay); }
.kcs-wrap .kcs-badge {
	position: absolute; top: 14px; left: 14px;
	background: var(--kcs-badge-bg); color: var(--kcs-highlight);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--kcs-tag-border); border-radius: 20px;
	font-size: 11px; font-weight: 700; padding: 4px 10px; text-transform: uppercase; letter-spacing: .5px;
}

.kcs-wrap .kcs-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; }
.kcs-wrap .kcs-card-title {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 18px; font-weight: 700; color: var(--kcs-heading); margin: 0 0 10px;
}
.kcs-wrap .kcs-card-title > i { color: var(--kcs-highlight); font-size: 16px; transition: transform .3s ease; }
.kcs-wrap .kcs-card:hover .kcs-card-title > i { transform: scale(1.2); }
.kcs-wrap .kcs-card-desc { font-size: 13px; line-height: 1.5; color: var(--kcs-muted); margin: 0 0 18px; flex-grow: 1; }

.kcs-wrap .kcs-features { list-style: none; margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid var(--kcs-border); }
.kcs-wrap .kcs-features li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--kcs-body); margin: 0 0 8px; padding: 0; list-style: none; }
.kcs-wrap .kcs-features li:last-child { margin-bottom: 0; }
.kcs-wrap .kcs-features li i { color: var(--kcs-highlight); font-size: 11px; }

.kcs-wrap .kcs-btn,
.kcs-wrap a.kcs-btn:link,
.kcs-wrap a.kcs-btn:visited {
	position: relative; overflow: hidden; z-index: 0;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--kcs-btn-bg);
	color: var(--kcs-btn-text) !important;          /* beats theme link colours */
	border: 1px solid var(--kcs-btn-border); border-radius: 12px;
	padding: 11px 16px; font-size: 13px; font-weight: 700; letter-spacing: .2px;
	text-decoration: none !important; box-shadow: none;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
/* gradient fill that slides in on hover */
.kcs-wrap .kcs-btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, var(--kcs-primary), color-mix(in srgb, var(--kcs-primary) 55%, var(--kcs-accent)));
	transform: translateX(-101%);
	transition: transform .45s var(--kcs-ease);
}
.kcs-wrap .kcs-btn i { color: inherit !important; transition: transform .3s ease; }

.kcs-wrap .kcs-card:hover .kcs-btn,
.kcs-wrap a.kcs-btn:hover,
.kcs-wrap a.kcs-btn:focus-visible {
	color: #ffffff !important;
	border-color: transparent;
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--kcs-primary) 70%, transparent);
	text-decoration: none !important;
}
.kcs-wrap .kcs-card:hover .kcs-btn::before,
.kcs-wrap a.kcs-btn:hover::before,
.kcs-wrap a.kcs-btn:focus-visible::before { transform: translateX(0); }
.kcs-wrap .kcs-card:hover .kcs-btn i { transform: translateX(4px); }
.kcs-wrap .kcs-btn:focus-visible { outline: 2px solid var(--kcs-highlight); outline-offset: 3px; }

/* ---------- ENTRANCE (only when JS is active) ---------- */
.kcs-wrap.kcs-js .kcs-reveal { opacity: 0; transform: translateY(24px); }
.kcs-wrap.kcs-js .kcs-reveal.kcs-in {
	opacity: 1; transform: none;
	transition: opacity .8s ease calc(var(--kcs-i, 0) * 0.12s), transform .8s var(--kcs-ease) calc(var(--kcs-i, 0) * 0.12s), border-color .4s var(--kcs-ease), box-shadow .4s var(--kcs-ease), background-color .4s ease;
}
.kcs-wrap.kcs-js .kcs-card.kcs-in:hover { transform: translateY(-10px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	.kcs-wrap *, .kcs-wrap *::before { transition-duration: .01ms !important; animation: none !important; }
	.kcs-wrap.kcs-js .kcs-reveal { opacity: 1; transform: none; }
	.kcs-wrap .kcs-card:hover, .kcs-wrap .kcs-heading:hover .kcs-sweep, .kcs-wrap .kcs-card:hover .kcs-sweep { transform: none; }
}