/**
 * KS LP Kolom — frontend & editor styles
 * Super clean, modern, lightweight Flexbox
 */

.kslp-kolom-section {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.kslp-kolom-section.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	left: auto !important;
	right: auto !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.kslp-kolom-section:not(.alignfull) {
	margin-left: auto !important;
	margin-right: auto !important;
}

.kslp-kolom-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
}

.kslp-kolom-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.kslp-kolom-section__content {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
}

.kslp-kolom-section__content--left {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.kslp-kolom-section__content--center {
	margin-left: auto !important;
	margin-right: auto !important;
}

.kslp-kolom-section__content--right {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Row wrapper */
.kslp-kolom-row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	column-gap: var(--col-gap-desk, 24px);
	row-gap: var(--col-rowgap-desk, 24px);
	align-items: var(--col-valign, stretch);
	justify-content: var(--col-halign, flex-start);
	width: 100%;
}

/* Column Child */
.kslp-kolom-child {
	position: relative;
	box-sizing: border-box;
	--col-w: var(--col-w-desk, 50);
	width: calc(var(--col-w) * 1% - (var(--col-gap-desk, 24px) * (100 - var(--col-w)) / 100));
	flex: 0 0 calc(var(--col-w) * 1% - (var(--col-gap-desk, 24px) * (100 - var(--col-w)) / 100));
	max-width: 100%;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Vertical alignment overrides per column */
.kslp-kolom-child.valign-top {
	align-self: flex-start !important;
}

.kslp-kolom-child.valign-center {
	align-self: center !important;
}

.kslp-kolom-child.valign-bottom {
	align-self: flex-end !important;
}

.kslp-kolom-child.valign-stretch {
	align-self: stretch !important;
}

/* Horizontal content alignment per column */
.kslp-kolom-child.halign-center {
	text-align: center;
}
.kslp-kolom-child.halign-center > * {
	margin-left: auto;
	margin-right: auto;
}
.kslp-kolom-child.halign-center .kslp-image-block,
.kslp-kolom-child.halign-center .wp-block-image,
.kslp-kolom-child.halign-center .wp-block-button {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.kslp-kolom-child.halign-left {
	text-align: left;
}
.kslp-kolom-child.halign-left > * {
	margin-left: 0;
	margin-right: auto;
}

.kslp-kolom-child.halign-right {
	text-align: right;
}
.kslp-kolom-child.halign-right > * {
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
   Screen Edge Flush (Menempel di Sudut Layar Tanpa Padding)
   ========================================================================== */

/* Section level edge flush */
.kslp-kolom-section.is-flush-left,
.kslp-kolom-section.has-flush-left {
	padding-left: 0 !important;
}
.kslp-kolom-section.is-flush-left .kslp-kolom-section__content,
.kslp-kolom-section.has-flush-left .kslp-kolom-section__content {
	margin-left: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
.kslp-kolom-section.is-flush-left .kslp-kolom-row,
.kslp-kolom-section.has-flush-left .kslp-kolom-row {
	justify-content: flex-start;
}

.kslp-kolom-section.is-flush-right,
.kslp-kolom-section.has-flush-right {
	padding-right: 0 !important;
}
.kslp-kolom-section.is-flush-right .kslp-kolom-section__content,
.kslp-kolom-section.has-flush-right .kslp-kolom-section__content {
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
.kslp-kolom-section.is-flush-right .kslp-kolom-row,
.kslp-kolom-section.has-flush-right .kslp-kolom-row {
	justify-content: flex-end;
}

.kslp-kolom-section.is-flush-both,
.kslp-kolom-section.has-flush-both {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.kslp-kolom-section.is-flush-both .kslp-kolom-section__content,
.kslp-kolom-section.has-flush-both .kslp-kolom-section__content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Child Column level edge flush */
.kslp-kolom-child.is-flush-left {
	padding-left: 0 !important;
	margin-left: 0 !important;
	text-align: left;
}
.kslp-kolom-child.is-flush-left > * {
	margin-left: 0 !important;
	text-align: left;
}
.kslp-kolom-child.is-flush-left .kslp-kolom-child-content {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.kslp-kolom-child.is-flush-left .wp-block-image,
.kslp-kolom-child.is-flush-left .wp-block-image figure,
.kslp-kolom-child.is-flush-left .kslp-image-block,
.kslp-kolom-child.is-flush-left figure,
.kslp-kolom-child.is-flush-left img {
	margin-left: 0 !important;
	display: block;
}

.kslp-kolom-child.is-flush-right {
	padding-right: 0 !important;
	margin-right: 0 !important;
	text-align: right;
}
.kslp-kolom-child.is-flush-right > * {
	margin-right: 0 !important;
	margin-left: auto;
	text-align: right;
}
.kslp-kolom-child.is-flush-right .kslp-kolom-child-content {
	padding-right: 0 !important;
	margin-right: 0 !important;
	margin-left: auto;
}
.kslp-kolom-child.is-flush-right .wp-block-image,
.kslp-kolom-child.is-flush-right .wp-block-image figure,
.kslp-kolom-child.is-flush-right .kslp-image-block,
.kslp-kolom-child.is-flush-right figure,
.kslp-kolom-child.is-flush-right img {
	margin-right: 0 !important;
	margin-left: auto !important;
	text-align: right !important;
	display: block;
}

.kslp-kolom-child.is-flush-both {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.kslp-kolom-child.is-flush-both > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}
.kslp-kolom-child.is-flush-both img {
	width: 100% !important;
}

/* Corner flush (zero vertical padding) */
.kslp-kolom-child.is-flush-vertical {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.kslp-kolom-child.is-flush-vertical > *:first-child {
	margin-top: 0 !important;
}
.kslp-kolom-child.is-flush-vertical > *:last-child {
	margin-bottom: 0 !important;
}

/* Shadow presets */
.kslp-kolom-child.has-shadow-subtle {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.kslp-kolom-child.has-shadow-medium {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.kslp-kolom-child.has-shadow-strong {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.kslp-kolom-child.has-shadow-glow {
	box-shadow: 0 0 20px rgba(34, 113, 177, 0.22);
}

/* Tablet Breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.kslp-kolom-row {
		column-gap: var(--col-gap-tab, var(--col-gap-desk, 20px));
		row-gap: var(--col-rowgap-tab, var(--col-rowgap-desk, 20px));
	}

	.kslp-kolom-child {
		--col-w: var(--col-w-tab, var(--col-w-desk, 50));
		width: calc(var(--col-w) * 1% - (var(--col-gap-tab, var(--col-gap-desk, 20px)) * (100 - var(--col-w)) / 100));
		flex: 0 0 calc(var(--col-w) * 1% - (var(--col-gap-tab, var(--col-gap-desk, 20px)) * (100 - var(--col-w)) / 100));
	}
}

/* Mobile Breakpoint (<= 767px) */
@media (max-width: 767px) {
	.kslp-kolom-row {
		column-gap: var(--col-gap-mob, 16px);
		row-gap: var(--col-rowgap-mob, 16px);
	}

	.kslp-kolom-row.is-reverse-mob {
		flex-direction: column-reverse;
	}

	.kslp-kolom-child {
		--col-w: var(--col-w-mob, 100);
		width: calc(var(--col-w) * 1% - (var(--col-gap-mob, 16px) * (100 - var(--col-w)) / 100));
		flex: 0 0 calc(var(--col-w) * 1% - (var(--col-gap-mob, 16px) * (100 - var(--col-w)) / 100));
	}
}

/* ==========================================================================
   Gutenberg Editor Helpers & Layout Fixes
   ========================================================================== */

/* Force horizontal row flex in Gutenberg Editor */
.wp-block-ks-lp-blocks-kolom .kslp-kolom-row,
.kslp-kolom-row.block-editor-block-list__layout,
.kslp-kolom-row > .block-editor-inner-blocks,
.kslp-kolom-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 80px;
	column-gap: var(--col-gap-desk, 24px) !important;
	row-gap: var(--col-rowgap-desk, 24px) !important;
	align-items: var(--col-valign, stretch) !important;
	justify-content: var(--col-halign, flex-start) !important;
}

.kslp-kolom-row > .block-editor-inner-blocks {
	flex: 1 1 100% !important;
	width: 100% !important;
}

.kslp-kolom-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: 100% !important;
}

/* Child Column block in Gutenberg Editor */
.wp-block-ks-lp-blocks-kolom-child,
.wp-block[data-type="ks-lp-blocks/kolom-child"] {
	box-sizing: border-box !important;
	position: relative !important;
	min-height: 85px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Editor visual box inside each column */
.kslp-kolom-child-editor-box {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 85px;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	background: rgba(248, 250, 252, 0.45);
	transition: all 0.15s ease;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.wp-block-ks-lp-blocks-kolom-child:hover .kslp-kolom-child-editor-box {
	border-color: #94a3b8;
	background: rgba(248, 250, 252, 0.7);
}

.wp-block-ks-lp-blocks-kolom-child.is-selected .kslp-kolom-child-editor-box {
	border-color: #2271b1 !important;
	border-style: solid !important;
	box-shadow: 0 0 0 1px #2271b1 !important;
	background: rgba(255, 255, 255, 0.9) !important;
}

/* Column Header bar in editor */
.kslp-kolom-child-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 11px;
	color: #475569;
	font-weight: 600;
	user-select: none;
	gap: 6px;
}

.wp-block-ks-lp-blocks-kolom-child.is-selected .kslp-kolom-child-header {
	background: #eff6ff;
	color: #1d4ed8;
	border-bottom-color: #bfdbfe;
}

.kslp-kolom-col-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
}

.kslp-kolom-col-badge-pill {
	background: #e2e8f0;
	color: #1e293b;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
}

.wp-block-ks-lp-blocks-kolom-child.is-selected .kslp-kolom-col-badge-pill {
	background: #2563eb;
	color: #ffffff;
}

.kslp-kolom-child-header-actions {
	display: flex;
	align-items: center;
	gap: 3px;
}

.kslp-kolom-quick-width-btn {
	padding: 1px 5px !important;
	font-size: 10px !important;
	height: 20px !important;
	line-height: 18px !important;
	border-radius: 3px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #475569 !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

.kslp-kolom-quick-width-btn:hover {
	border-color: #3b82f6 !important;
	color: #1d4ed8 !important;
}

.kslp-kolom-quick-width-btn.is-active {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

.kslp-kolom-child-btn-parent {
	padding: 1px 6px !important;
	font-size: 10px !important;
	height: 20px !important;
	line-height: 18px !important;
	border-radius: 3px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #2563eb !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	gap: 2px !important;
	font-weight: 600;
	transition: all 0.15s ease;
}

.kslp-kolom-child-btn-parent:hover {
	background: #eff6ff !important;
	border-color: #2563eb !important;
}

.kslp-kolom-child-btn-delete {
	padding: 1px 5px !important;
	font-size: 12px !important;
	height: 20px !important;
	line-height: 18px !important;
	border-radius: 3px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	color: #94a3b8 !important;
	cursor: pointer;
}

.kslp-kolom-child-btn-delete:hover {
	color: #ef4444 !important;
	background: #fee2e2 !important;
	border-color: #fca5a5 !important;
}

/* Empty column placeholder */
.kslp-kolom-child-empty {
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	min-height: 70px;
}

.kslp-kolom-child-empty-text {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

.kslp-kolom-child-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 50px;
}

/* Canvas action bar at the bottom of the row */
.kslp-kolom-canvas-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kslp-kolom-canvas-actions .components-button {
	font-size: 12px !important;
	height: 28px !important;
	padding: 0 12px !important;
	border-radius: 4px !important;
	font-weight: 500 !important;
}

/* Preset Picker UI */
.kslp-kolom-preset-picker {
	padding: 32px 24px;
	text-align: center;
	background: #ffffff;
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	margin: 16px 0;
}

.kslp-kolom-preset-title {
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
}

.kslp-kolom-preset-subtitle {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 22px;
}

.kslp-kolom-preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	max-width: 680px;
	margin: 0 auto;
}

.kslp-kolom-preset-btn {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 12px 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.kslp-kolom-preset-btn:hover {
	background: #eff6ff;
	border-color: #3b82f6;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
}

.kslp-kolom-preset-icon {
	display: flex;
	gap: 3px;
	width: 100%;
	height: 32px;
	padding: 3px;
	background: #e2e8f0;
	border-radius: 4px;
	box-sizing: border-box;
}

.kslp-kolom-preset-icon-bar {
	background: #3b82f6;
	border-radius: 2px;
	height: 100%;
}

.kslp-kolom-preset-label {
	font-size: 11px;
	font-weight: 600;
	color: #334155;
}

/* ==========================================================================
   Shape Dividers Core Styles (Inlined for Gutenberg Iframe & Frontend)
   ========================================================================== */

.kslp-shape-divider {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	direction: ltr;
	box-sizing: border-box;
	z-index: 1;
}

.kslp-shape-divider svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* Top and Bottom Positioning */
.kslp-shape-divider--top {
	top: 0;
	bottom: auto;
	transform: translateY(-1px);
}

.kslp-shape-divider--bottom {
	bottom: 0;
	top: auto;
	transform: translateY(1px);
}

/* Z-Index Controls */
.kslp-shape-divider--front {
	z-index: 3 !important;
}

.kslp-shape-divider--back {
	z-index: 0 !important;
}

/* Transform Flips */
.kslp-shape-divider--flip-h svg {
	transform: scaleX(-1);
	transform-origin: center center;
}

.kslp-shape-divider--flip-v svg {
	transform: scaleY(-1);
	transform-origin: center center;
}

.kslp-shape-divider--flip-both svg {
	transform: scale(-1, -1);
	transform-origin: center center;
}

/* Width / Scale Handling for zoomed/repeated waves */
.kslp-shape-divider--scaled svg {
	width: var(--kslp-sd-scale, 100%);
	min-width: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.kslp-shape-divider--flip-h.kslp-shape-divider--scaled svg {
	transform: translateX(-50%) scaleX(-1);
}

.kslp-shape-divider--flip-v.kslp-shape-divider--scaled svg {
	transform: translateX(-50%) scaleY(-1);
}

.kslp-shape-divider--flip-both.kslp-shape-divider--scaled svg {
	transform: translateX(-50%) scale(-1, -1);
}

/* Multi-layer default opacities */
.kslp-sd-layer--1 {
	opacity: var(--kslp-sd-op1, 0.25);
}

.kslp-sd-layer--2 {
	opacity: var(--kslp-sd-op2, 0.5);
}

.kslp-sd-layer--3 {
	opacity: var(--kslp-sd-op3, 1);
}

/* ----------------------------------------------------
   ANIMATION KEYFRAMES (GPU ACCELERATED)
   ---------------------------------------------------- */

/* 1. Wave Drift / Flow (Horizontal Flow) */
@keyframes kslpSdFlow {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes kslpSdFlowRev {
	0% {
		transform: translate3d(-50%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

.kslp-shape-divider--anim-flow svg {
	width: 200% !important;
	min-width: 200% !important;
	max-width: none !important;
	animation: kslpSdFlow 10s linear infinite;
	will-change: transform;
}

.kslp-shape-divider--anim-flow-rev svg {
	width: 200% !important;
	min-width: 200% !important;
	max-width: none !important;
	animation: kslpSdFlowRev 10s linear infinite;
	will-change: transform;
}

/* Multi-layer Parallax animation for Layered Wave */
.kslp-shape-divider--anim-parallax .kslp-sd-path--layer-1 {
	animation: kslpSdPathDrift1 18s ease-in-out infinite alternate;
}

.kslp-shape-divider--anim-parallax .kslp-sd-path--layer-2 {
	animation: kslpSdPathDrift2 12s ease-in-out infinite alternate-reverse;
}

.kslp-shape-divider--anim-parallax .kslp-sd-path--layer-3 {
	animation: kslpSdPathDrift3 7s ease-in-out infinite alternate;
}

@keyframes kslpSdPathDrift1 {
	0% {
		transform: translate3d(-15px, 0, 0) scaleY(1);
	}
	50% {
		transform: translate3d(15px, -3px, 0) scaleY(1.05);
	}
	100% {
		transform: translate3d(-10px, 2px, 0) scaleY(0.96);
	}
}

@keyframes kslpSdPathDrift2 {
	0% {
		transform: translate3d(12px, 0, 0) scaleY(1);
	}
	50% {
		transform: translate3d(-14px, 3px, 0) scaleY(0.95);
	}
	100% {
		transform: translate3d(8px, -2px, 0) scaleY(1.04);
	}
}

@keyframes kslpSdPathDrift3 {
	0% {
		transform: translate3d(-8px, 0, 0) scaleY(1);
	}
	50% {
		transform: translate3d(10px, -2px, 0) scaleY(1.03);
	}
	100% {
		transform: translate3d(-6px, 1px, 0) scaleY(0.97);
	}
}

/* 2. Wave Pulse / Surge (Vertical Breathing) */
@keyframes kslpSdPulse {
	0%, 100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(1.15);
	}
}

.kslp-shape-divider--anim-pulse svg {
	animation: kslpSdPulse 6s ease-in-out infinite;
	transform-origin: bottom center;
	will-change: transform;
}

.kslp-shape-divider--top.kslp-shape-divider--anim-pulse svg {
	transform-origin: top center;
}

/* 3. Organic Wobble */
@keyframes kslpSdWobble {
	0%, 100% {
		transform: translateY(0) scaleY(1) skewX(0deg);
	}
	25% {
		transform: translateY(-2px) scaleY(1.08) skewX(0.5deg);
	}
	75% {
		transform: translateY(2px) scaleY(0.94) skewX(-0.5deg);
	}
}

.kslp-shape-divider--anim-wobble svg {
	animation: kslpSdWobble 8s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform;
}

/* Speed Modifiers */
.kslp-shape-divider--speed-fast svg,
.kslp-shape-divider--speed-fast .kslp-sd-path--layer-1,
.kslp-shape-divider--speed-fast .kslp-sd-path--layer-2,
.kslp-shape-divider--speed-fast .kslp-sd-path--layer-3 {
	animation-duration: 4s !important;
}

.kslp-shape-divider--speed-normal svg,
.kslp-shape-divider--speed-normal .kslp-sd-path--layer-1,
.kslp-shape-divider--speed-normal .kslp-sd-path--layer-2,
.kslp-shape-divider--speed-normal .kslp-sd-path--layer-3 {
	animation-duration: 8s !important;
}

.kslp-shape-divider--speed-slow svg,
.kslp-shape-divider--speed-slow .kslp-sd-path--layer-1,
.kslp-shape-divider--speed-slow .kslp-sd-path--layer-2,
.kslp-shape-divider--speed-slow .kslp-sd-path--layer-3 {
	animation-duration: 15s !important;
}