/*!
 * KRESTA Loan Process Section  v1.0.1   (KMS Corporation)
 * Works with the WordPress plugin AND on any plain HTML site.
 * Theme  = [data-theme="light|dark"]   Preset = [data-preset="default|red|emerald|violet|amber"]
 * Change colours by overriding the --klp-* variables (see docs/user-guide.html).
 */

/* ---------- 1. LIGHT palette (default) ---------- */
.klp {
	--klp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--klp-radius: 20px;
	--klp-maxw: 1200px;
	--klp-pad: 90px;
	--klp-cols: 3;

	--klp-primary: #2563eb;
	--klp-accent: #38bdf8;
	--klp-bg1: #ffffff;
	--klp-bg2: #f8fafc;
	--klp-card: #ffffff;
	--klp-border: #e2e8f0;
	--klp-heading: #0f172a;
	--klp-text: #475569;
	--klp-cta1: #0f172a;
	--klp-cta2: #1e293b;
	--klp-hover: #0f172a;

	--klp-cta-text: #ffffff;
	--klp-cta-muted: #94a3b8;
	--klp-divider: #f1f5f9;
	--klp-shadow: rgba(15, 23, 42, 0.06);
	--klp-badge-bg: rgba(15, 23, 42, 0.85);
	--klp-badge-text: #38bdf8;
	--klp-icon-text: #ffffff;
	--klp-icon-hover-text: #ffffff;
	--klp-btn-hover-text: #0f172a;
	color-scheme: light;
}

/* ---------- 2. DARK palette ---------- */
.klp[data-theme="dark"] {
	--klp-primary: #3b82f6;
	--klp-accent: #38bdf8;
	--klp-bg1: #0b1220;
	--klp-bg2: #0f172a;
	--klp-card: #131d33;
	--klp-border: #243453;
	--klp-heading: #f1f5f9;
	--klp-text: #a5b4c9;
	--klp-cta1: #1e3a8a;
	--klp-cta2: #0f172a;
	--klp-hover: #38bdf8;

	--klp-divider: #1d2b46;
	--klp-shadow: rgba(0, 0, 0, 0.45);
	--klp-badge-bg: rgba(2, 6, 23, 0.8);
	--klp-icon-hover-text: #0b1220;
	color-scheme: dark;
}

/* ---------- 3. PRESETS (light + dark each) ---------- */
.klp[data-preset="red"]:not([data-theme="dark"]) { --klp-primary:#e11d2e; --klp-accent:#fb7185; --klp-cta1:#3b0a10; --klp-cta2:#7f1d1d; --klp-hover:#3b0a10; --klp-badge-text:#fda4af; }
.klp[data-preset="red"][data-theme="dark"]       { --klp-primary:#f43f5e; --klp-accent:#fda4af; --klp-cta1:#7f1d1d; --klp-cta2:#1c0a0d; --klp-hover:#fda4af; --klp-badge-text:#fda4af; --klp-btn-hover-text:#1c0a0d; }

.klp[data-preset="emerald"]:not([data-theme="dark"]) { --klp-primary:#059669; --klp-accent:#34d399; --klp-cta1:#052e2b; --klp-cta2:#064e3b; --klp-hover:#052e2b; --klp-badge-text:#6ee7b7; }
.klp[data-preset="emerald"][data-theme="dark"]       { --klp-primary:#10b981; --klp-accent:#6ee7b7; --klp-cta1:#065f46; --klp-cta2:#022c22; --klp-hover:#6ee7b7; --klp-badge-text:#6ee7b7; --klp-btn-hover-text:#022c22; }

.klp[data-preset="violet"]:not([data-theme="dark"]) { --klp-primary:#7c3aed; --klp-accent:#a78bfa; --klp-cta1:#2e1065; --klp-cta2:#4c1d95; --klp-hover:#2e1065; --klp-badge-text:#c4b5fd; }
.klp[data-preset="violet"][data-theme="dark"]       { --klp-primary:#8b5cf6; --klp-accent:#c4b5fd; --klp-cta1:#4c1d95; --klp-cta2:#1e1b4b; --klp-hover:#c4b5fd; --klp-badge-text:#c4b5fd; --klp-btn-hover-text:#1e1b4b; }

.klp[data-preset="amber"]:not([data-theme="dark"]) { --klp-primary:#d97706; --klp-accent:#fbbf24; --klp-cta1:#451a03; --klp-cta2:#78350f; --klp-hover:#451a03; --klp-badge-text:#fcd34d; }
.klp[data-preset="amber"][data-theme="dark"]       { --klp-primary:#f59e0b; --klp-accent:#fcd34d; --klp-cta1:#78350f; --klp-cta2:#1c1003; --klp-hover:#fcd34d; --klp-badge-text:#fcd34d; --klp-icon-hover-text:#1c1003; --klp-btn-hover-text:#1c1003; }

/* ---------- 4. Base ---------- */
.klp, .klp *, .klp *::before, .klp *::after { box-sizing: border-box; }

.klp {
	position: relative;
	width: 100%;
	padding: var(--klp-pad) 20px;
	font-family: var(--klp-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--klp-text);
	background: linear-gradient(180deg, var(--klp-bg1) 0%, var(--klp-bg2) 100%);
	text-align: left;
}
.klp .klp-container { max-width: var(--klp-maxw); margin: 0 auto; }

/* Theme-switch button */
.klp .klp-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.klp .klp-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; margin: 0;
	border-radius: 50%; cursor: pointer; line-height: 1;
	color: var(--klp-heading); background: var(--klp-card);
	border: 1px solid var(--klp-border);
	box-shadow: 0 4px 14px var(--klp-shadow);
	transition: transform .25s ease, border-color .25s ease, color .25s ease, background-color .3s ease;
}
.klp .klp-toggle:hover { transform: translateY(-2px) rotate(12deg); border-color: var(--klp-primary); color: var(--klp-primary); }
.klp .klp-toggle:focus-visible, .klp .klp-link:focus-visible, .klp .klp-btn:focus-visible { outline: 3px solid var(--klp-accent); outline-offset: 3px; }
.klp[data-theme="light"] .klp-ico-sun,
.klp[data-theme="dark"] .klp-ico-moon { display: none; }

/* Header */
.klp .klp-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.klp .klp-tag {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 18px; margin: 0 0 16px;
	border-radius: 50px; font-size: 13px; font-weight: 700; line-height: 1.4;
	text-transform: uppercase; letter-spacing: 1px;
	color: var(--klp-primary);
	background: rgba(37, 99, 235, 0.08);
	background: color-mix(in srgb, var(--klp-primary) 10%, transparent);
	border: 1px solid rgba(37, 99, 235, 0.2);
	border: 1px solid color-mix(in srgb, var(--klp-primary) 25%, transparent);
}
.klp .klp-title {
	margin: 0 0 16px; padding: 0; border: 0;
	font-family: inherit; font-size: clamp(28px, 3.5vw, 42px); font-weight: 800;
	line-height: 1.2; letter-spacing: -0.5px; text-transform: none; text-align: center;
	color: var(--klp-heading);
}
.klp .klp-intro { margin: 0; padding: 0; font-size: 16px; line-height: 1.6; color: var(--klp-text); }

/* Grid + cards */
.klp .klp-grid { display: grid; grid-template-columns: repeat(var(--klp-cols), minmax(0, 1fr)); gap: 32px; }

.klp .klp-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0;
	background: var(--klp-card);
	border: 1px solid var(--klp-border);
	border-radius: var(--klp-radius);
	box-shadow: 0 10px 30px -5px var(--klp-shadow);
	transition: transform .4s cubic-bezier(.165, .84, .44, 1), box-shadow .4s cubic-bezier(.165, .84, .44, 1), border-color .4s ease, background-color .3s ease;
}
.klp .klp-card:hover {
	transform: translateY(-12px);
	border-color: var(--klp-primary);
	box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
	box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--klp-primary) 35%, transparent);
}

.klp .klp-media { position: relative; width: 100%; height: 240px; }
.klp .klp-media-inner { width: 100%; height: 100%; overflow: hidden; background: linear-gradient(135deg, var(--klp-primary), var(--klp-accent)); }
.klp .klp-media-inner img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; transition: transform .6s cubic-bezier(.165, .84, .44, 1); }
.klp .klp-card:hover .klp-media-inner img { transform: scale(1.08); }

.klp .klp-badge {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	padding: 6px 14px; border-radius: 30px;
	font-size: 14px; font-weight: 800; line-height: 1.3;
	color: var(--klp-badge-text); background: var(--klp-badge-bg);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.klp .klp-icon {
	position: absolute; left: 24px; bottom: -24px; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 14px; font-size: 22px;
	color: var(--klp-icon-text); background: var(--klp-primary);
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--klp-primary) 40%, transparent);
	transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.klp .klp-card:hover .klp-icon { transform: scale(1.1) rotate(5deg); background: var(--klp-hover); color: var(--klp-icon-hover-text); }

.klp .klp-body { display: flex; flex-direction: column; flex-grow: 1; padding: 40px 24px 28px; }
.klp .klp-body h3 { margin: 0 0 12px; padding: 0; font-family: inherit; font-size: 21px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--klp-heading); }
.klp .klp-body p { flex-grow: 1; margin: 0 0 24px; padding: 0; font-size: 14px; line-height: 1.6; color: var(--klp-text); }
.klp .klp-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--klp-divider); }

.klp .klp-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: none; border: 0; color: var(--klp-primary); transition: color .3s ease; }
.klp .klp-link i { transition: transform .3s ease; }
.klp .klp-card:hover .klp-link { color: var(--klp-heading); }
.klp .klp-card:hover .klp-link i { transform: translateX(5px); }

/* CTA banner */
.klp .klp-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	margin-top: 60px; padding: 36px 40px;
	border-radius: var(--klp-radius); color: var(--klp-cta-text);
	background: linear-gradient(135deg, var(--klp-cta1) 0%, var(--klp-cta2) 100%);
	box-shadow: 0 20px 40px var(--klp-shadow);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.klp .klp-cta-text h4 { margin: 0 0 6px; padding: 0; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.3; text-transform: none; color: var(--klp-cta-text); }
.klp .klp-cta-text p { margin: 0; padding: 0; font-size: 14px; color: var(--klp-cta-muted); }
.klp .klp-btn {
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
	padding: 14px 28px; border-radius: 12px; border: 0;
	font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none;
	color: #ffffff; background: var(--klp-primary);
	box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--klp-primary) 45%, transparent);
	transition: all .3s ease;
}
.klp .klp-btn:hover { color: var(--klp-btn-hover-text); background: var(--klp-accent); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--klp-accent) 45%, transparent); }

/* ---------- 4b. Theme-proofing: stop website themes recolouring links/buttons ---------- */
.klp .klp-btn { color: #ffffff !important; }
.klp .klp-btn:hover { color: var(--klp-btn-hover-text) !important; }
.klp .klp-link { color: var(--klp-primary) !important; }
.klp .klp-card:hover .klp-link { color: var(--klp-heading) !important; }

/* ---------- 4c. Heading hover: gradient text-fill sweep (left -> right) + 2px lift ----------
   Works by painting the text with background-clip:text. Because the text colour comes from the
   background layers, theme heading colours can no longer turn the headings dark in dark mode.
   Variables:  --klp-f1 / --klp-f2 = sweep gradient colours (default primary -> accent). */
.klp .klp-title,
.klp .klp-body h3,
.klp .klp-cta-text h4 {
	--klp-base: var(--klp-heading);
	--klp-f1: var(--klp-primary);
	--klp-f2: var(--klp-accent);
	display: inline-block; max-width: 100%; vertical-align: top;
	color: var(--klp-base) !important;
	background-image: linear-gradient(90deg, var(--klp-f1), var(--klp-f2)), linear-gradient(var(--klp-base), var(--klp-base)) !important;
	background-repeat: no-repeat !important;
	background-position: 0 0, 0 0 !important;
	background-size: 0% 100%, 100% 100% !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	transition: background-size .7s cubic-bezier(.22, .61, .36, 1), transform .3s ease;
}
.klp .klp-cta-text h4 { --klp-base: var(--klp-cta-text); --klp-f1: var(--klp-accent); --klp-f2: var(--klp-accent); }

.klp .klp-title:hover,
.klp .klp-card:hover .klp-body h3,
.klp .klp-cta:hover .klp-cta-text h4 {
	background-size: 100% 100%, 100% 100% !important;
	transform: translateY(-2px);
}

/* ---------- 5. Responsive ---------- */
@media (max-width: 992px) {
	.klp .klp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.klp .klp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
	.klp { padding: calc(var(--klp-pad) * .7) 16px; }
	.klp .klp-grid { grid-template-columns: 1fr; gap: 28px; }
	.klp .klp-cta { flex-direction: column; text-align: center; padding: 30px 24px; }
	.klp .klp-header { margin-bottom: 44px; }
}

/* ---------- 6. Scroll-reveal (only active when JS adds .klp-js) ---------- */
@keyframes klpFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.klp.klp-js.klp-anim .klp-reveal:not(.klp-in) { opacity: 0; }
.klp.klp-js.klp-anim .klp-reveal.klp-in { animation: klpFadeUp .8s ease backwards; animation-delay: calc(var(--klp-i, 0) * .15s); }

@media (prefers-reduced-motion: reduce) {
	.klp.klp-js.klp-anim .klp-reveal:not(.klp-in) { opacity: 1; }
	.klp.klp-js.klp-anim .klp-reveal.klp-in { animation: none; }
	.klp .klp-card, .klp .klp-card *, .klp .klp-toggle, .klp .klp-title, .klp .klp-cta-text h4 { transition: none !important; }
}