/**
 * Sistem Undangan Digital - Invitation Builder styles (Sprint 3A)
 *
 * Elementor-friendly: seluruh selector di-scope .ud-builder*.
 * Mobile-first; stepper compact di layar kecil.
 */

.ud-builder {
	background: #ffffff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 16px;
	margin: 1.5em 0;
	box-sizing: border-box;
	max-width: 860px;
}

/* Header */
.ud-builder-header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
	justify-content: space-between;
}

.ud-builder-title { margin: 0; font-size: 1.2em; }
.ud-builder-subtitle { margin: 4px 0 0; color: #646970; font-size: 0.95em; }

.ud-builder-header-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.ud-save-status {
	font-size: 0.8em;
	padding: 2px 10px;
	border-radius: 12px;
	background: #f0f6fc;
	color: #043959;
	border: 1px solid #72aee6;
	white-space: nowrap;
}

.ud-save-status[data-state='saving'] { background: #fcf9e8; color: #996800; border-color: #f0d864; }
.ud-save-status[data-state='failed'] { background: #fcf0f1; color: #8a2424; border-color: #ffabaf; }

/* Progress bar */
.ud-builder-progress {
	height: 8px;
	background: #f0f0f1;
	border-radius: 6px;
	overflow: hidden;
	margin: 12px 0;
}

.ud-builder-progress-bar {
	display: block;
	height: 100%;
	background: #2271b1;
	border-radius: 6px;
	transition: width 0.3s ease;
}

/* Stepper (mobile: compact, horizontal scroll aman) */
.ud-builder-stepper {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}

.ud-builder-step {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 0.85em;
	cursor: pointer;
}

.ud-builder-step .ud-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #dcdcde;
	color: #3c434a;
	font-size: 0.8em;
	font-weight: 700;
}

.ud-builder-step.is-current {
	border-color: #2271b1;
	background: #f0f6fc;
	color: #043959;
	font-weight: 600;
}

.ud-builder-step.is-current .ud-step-num { background: #2271b1; color: #fff; }

.ud-builder-step.is-done { color: #116329; border-color: #68de7c; background: #edfaef; }
.ud-builder-step.is-done .ud-step-num { background: #68de7c; color: #fff; }

/* Content placeholder */
.ud-builder-content {
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	padding: 24px 16px;
	text-align: center;
	color: #646970;
	margin: 12px 0;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Action bar */
.ud-builder-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-builder-actions .ud-button { flex: 1 1 auto; text-align: center; }

.ud-builder .ud-button-secondary {
	background: #f0f0f1;
	color: #2271b1;
	border: 1px solid #c3c4c7;
}

.ud-builder .ud-button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Layar lebar: stepper lega */
@media (min-width: 720px) {
	.ud-builder { padding: 24px; }
	.ud-builder-step { font-size: 0.95em; }
	.ud-builder-content { min-height: 180px; }
}

/* ==========================================================================
   Sprint 3B — Form Mempelai (scoped .ud-*)
   ========================================================================== */

.ud-couple-form { text-align: left; display: block; }

.ud-form-intro { color: #646970; margin: 0 0 16px; }

.ud-form-section {
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px;
}

.ud-form-section-title { margin: 0 0 12px; font-size: 1.05em; }

.ud-form-grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: 1 kolom */
	gap: 12px;
}

.ud-form-group-full { grid-column: 1 / -1; }

.ud-form-label {
	display: block;
	font-weight: 600;
	font-size: 0.92em;
	margin-bottom: 4px;
	color: #3c434a;
}

.ud-required { color: #b32d2e; }

.ud-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	font-size: 1em;
	background: #fff;
	color: #1d2327;
	min-height: 44px; /* nyaman disentuh di mobile */
}

textarea.ud-form-control { min-height: 88px; resize: vertical; }

.ud-form-control:focus {
	outline: 2px solid #72aee6;
	border-color: #2271b1;
}

.ud-field-error {
	display: block;
	color: #b32d2e;
	font-size: 0.85em;
	margin-top: 4px;
	min-height: 0;
}

.ud-field-error:empty { display: none; }

/* Foto mempelai */
.ud-photo-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ud-photo-preview {
	width: 120px;
	height: 120px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e2e4e7;
	background: #f6f7f7;
	flex: 0 0 auto;
}

.ud-photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ud-photo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ud-photo-actions .ud-button { padding: 8px 14px; }

/* Desktop: field pendek 2 kolom, alamat full width */
@media (min-width: 720px) {
	.ud-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ud-form-section { padding: 20px; }
}