/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 *
 * Design system & base styles bersama untuk semua widget SPS Member.
 * File css/widget-*.css berisi bagian yang spesifik per widget.
 */

:root {
	--spsm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--spsm-primary: #2563eb;
	--spsm-primary-dark: #1d4ed8;
	--spsm-primary-soft: #eff6ff;
	--spsm-wa: #25d366;
	--spsm-wa-dark: #1eb858;
	--spsm-accent: #7c3aed;
	--spsm-accent-dark: #6d28d9;
	--spsm-text: #1f2937;
	--spsm-text-muted: #6b7280;
	--spsm-border: #e5e7eb;
	--spsm-input-bg: #ffffff;
	--spsm-radius: 12px;
	--spsm-radius-sm: 8px;
	--spsm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--spsm-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.22);
	--spsm-transition: 0.15s ease;
}

/* ---------- Wrapper umum semua widget ---------- */
.sps-member-form-submit,
.sps-member-form-send-wa,
.sps-member-form-send-wa-with-mail,
.sps-member-form--ask-id,
.sps-member-form-edit-member,
.sps-member-form-email-freelance {
	width: 100%;
	max-width: 100%;
	font-family: var(--spsm-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--spsm-text);
}

/* Reset kecil agar tidak bentrok dengan style tema (margin form, dll). */
.sps-member-form-submit form,
.sps-member-form-send-wa form,
.sps-member-form-send-wa-with-mail form,
.sps-member-form--ask-id form,
.sps-member-form-edit-member form,
.sps-member-form-email-freelance form {
	margin: 0;
	padding: 0;
}

.sps-member-form-submit *,
.sps-member-form-send-wa *,
.sps-member-form-send-wa-with-mail *,
.sps-member-form--ask-id *,
.sps-member-form-edit-member *,
.sps-member-form-email-freelance * {
	box-sizing: border-box;
}

/* ---------- Judul widget ---------- */
.sps-member-form-submit__title,
.sps-member-form-send-wa__title,
.sps-member-form-ask-id__title,
.sps-member-form-edit-member__title,
.sps-member-form-email-freelance__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--spsm-text);
}

/* ---------- Jarak antar field ---------- */
.sps-member-form-submit .the-form__field,
.sps-member-form-submit .the-form-field,
.sps-member-form-send-wa .the-form-field,
.sps-member-form-send-wa-with-mail .the-form-field,
.sps-member-form--ask-id .the-form-field,
.sps-member-form-edit-member .de-form__field,
.sps-member-form-email-freelance .the-form-field {
	margin: 0 0 14px;
}

/* ---------- Label ---------- */
.sps-member-form-submit .the-form__field label,
.sps-member-form-submit .the-form-field label,
.sps-member-form-send-wa .the-form-field label,
.sps-member-form-send-wa-with-mail .the-form-field label,
.sps-member-form--ask-id .the-form-field label,
.sps-member-form-edit-member .de-form__field label,
.sps-member-form-email-freelance .the-form-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--spsm-text-muted);
}

/* ---------- Input & select ---------- */
.sps-member-form-submit input:not([type="hidden"]),
.sps-member-form-submit select,
.sps-member-form-send-wa input,
.sps-member-form-send-wa-with-mail input,
.sps-member-form--ask-id input,
.sps-member-form-edit-member input,
.sps-member-form-email-freelance input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--spsm-text);
	background: var(--spsm-input-bg);
	border: 1.5px solid var(--spsm-border);
	border-radius: var(--spsm-radius-sm);
	transition: border-color var(--spsm-transition), box-shadow var(--spsm-transition);
}

.sps-member-form-submit input:not([type="hidden"]):focus,
.sps-member-form-submit select:focus,
.sps-member-form-send-wa input:focus,
.sps-member-form-send-wa-with-mail input:focus,
.sps-member-form--ask-id input:focus,
.sps-member-form-edit-member input:focus,
.sps-member-form-email-freelance input:focus {
	outline: none;
	border-color: var(--spsm-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.sps-member-form-submit input::placeholder,
.sps-member-form-submit select::placeholder,
.sps-member-form-send-wa input::placeholder,
.sps-member-form-send-wa-with-mail input::placeholder,
.sps-member-form--ask-id input::placeholder,
.sps-member-form-edit-member input::placeholder,
.sps-member-form-email-freelance input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.sps-member-form-submit select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.sps-member-form-submit select option {
	color: var(--spsm-text) !important;
	background: var(--spsm-input-bg) !important;
}

/* Pastikan select box sendiri punya warna teks yang jelas */
.sps-member-form-submit select {
	color: var(--spsm-text);
	background-color: var(--spsm-input-bg);
}

/* ---------- Tombol CTA ----------
   Tidak full-width: 80% lebar widget di mobile, 25% di desktop. */
.sps-member-form-submit .button,
.sps-member-form-send-wa .button,
.sps-member-form-send-wa-with-mail .button,
.sps-member-form--ask-id .button,
.sps-member-form-edit-member .button,
.sps-member-form-email-freelance .button,
#sps-btn-ask-id {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 80%;
	min-width: 170px;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: #ffffff;
	background: var(--spsm-primary);
	border: 1px solid var(--spsm-primary);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: var(--spsm-shadow-sm);
	transition: background var(--spsm-transition), border-color var(--spsm-transition), transform var(--spsm-transition), box-shadow var(--spsm-transition);
}

.sps-member-form-submit .button:hover,
.sps-member-form-send-wa .button:hover,
.sps-member-form-send-wa-with-mail .button:hover,
.sps-member-form--ask-id .button:hover,
.sps-member-form-edit-member .button:hover,
.sps-member-form-email-freelance .button:hover,
#sps-btn-ask-id:hover {
	background: var(--spsm-primary-dark);
	border-color: var(--spsm-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.sps-member-form-submit .button:active,
.sps-member-form-send-wa .button:active,
.sps-member-form-send-wa-with-mail .button:active,
.sps-member-form--ask-id .button:active,
.sps-member-form-edit-member .button:active,
.sps-member-form-email-freelance .button:active,
#sps-btn-ask-id:active {
	transform: translateY(0);
}

@media (min-width: 768px) {
	.sps-member-form-submit .button,
	.sps-member-form-send-wa .button,
	.sps-member-form-send-wa-with-mail .button,
	.sps-member-form--ask-id .button,
	.sps-member-form-edit-member .button,
	.sps-member-form-email-freelance .button,
	#sps-btn-ask-id {
		width: 25%;
		min-width: 190px;
	}
}

/* ---------- Mobile kecil: cegah zoom otomatis iOS & pastikan tidak overflow ---------- */
@media (max-width: 480px) {
	.sps-member-form-submit input:not([type="hidden"]),
	.sps-member-form-submit select,
	.sps-member-form-send-wa input,
	.sps-member-form-send-wa-with-mail input,
	.sps-member-form--ask-id input,
	.sps-member-form-edit-member input,
	.sps-member-form-email-freelance input {
		font-size: 16px;
	}

	.sps-member-form-submit .button,
	.sps-member-form-send-wa .button,
	.sps-member-form-send-wa-with-mail .button,
	.sps-member-form--ask-id .button,
	.sps-member-form-edit-member .button,
	.sps-member-form-email-freelance .button,
	#sps-btn-ask-id {
		width: 80%;
		min-width: 0;
		max-width: 100%;
	}
}

/* Ikon di dalam tombol (mis. logo WhatsApp) */
.spsm-wa-icon {
	display: inline-flex;
	flex: 0 0 auto;
}
.spsm-wa-icon svg {
	width: 16px;
	height: 16px;
}

/* Tombol bernuansa WhatsApp (widget WA) */
.sps-member-form-send-wa .button,
.sps-member-form-send-wa-with-mail .button {
	background: var(--spsm-wa);
	border-color: var(--spsm-wa);
}
.sps-member-form-send-wa .button:hover,
.sps-member-form-send-wa-with-mail .button:hover {
	background: var(--spsm-wa-dark);
	border-color: var(--spsm-wa-dark);
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* Tombol widget email-to-freelance (gradasi ungu) */
.sps-member-form-email-freelance .button {
	background: linear-gradient(135deg, var(--spsm-accent), var(--spsm-accent-dark));
	border: none;
}
.sps-member-form-email-freelance .button:hover {
	background: linear-gradient(135deg, var(--spsm-accent-dark), #5b21b6);
	box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* ---------- Penanda field wajib ---------- */
.sps-member-form-submit .field-required,
.sps-member-form-send-wa .field-required,
.sps-member-form-send-wa-with-mail .field-required,
.sps-member-form--ask-id .field-required,
.sps-member-form-edit-member .field-required,
.sps-member-form-email-freelance .field-required {
	position: relative;
}

.sps-member-form-submit .field-required::after,
.sps-member-form-send-wa .field-required::after,
.sps-member-form-send-wa-with-mail .field-required::after,
.sps-member-form--ask-id .field-required::after,
.sps-member-form-edit-member .field-required::after,
.sps-member-form-email-freelance .field-required::after {
	content: "*";
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: #ef4444;
	font-size: 16px;
	font-weight: 700;
	pointer-events: none;
}

.sps-member-form-submit .field-required .the-form__field--input,
.sps-member-form-submit .field-required .the-form-field--input,
.sps-member-form-send-wa .field-required .the-form__field--input,
.sps-member-form-send-wa .field-required .the-form-field--input,
.sps-member-form-send-wa-with-mail .field-required .the-form__field--input,
.sps-member-form-send-wa-with-mail .field-required .the-form-field--input,
.sps-member-form--ask-id .field-required .the-form__field--input,
.sps-member-form--ask-id .field-required .the-form-field--input,
.sps-member-form-edit-member .field-required .the-form__field--input,
.sps-member-form-edit-member .field-required .the-form-field--input,
.sps-member-form-email-freelance .field-required .the-form__field--input,
.sps-member-form-email-freelance .field-required .the-form-field--input {
	padding-right: 32px;
}

/* ---------- Validasi error state ---------- */
.sps-member-form-submit .field-error .the-form__field--input,
.sps-member-form-submit .field-error .the-form-field--input,
.sps-member-form-send-wa .field-error .the-form-field--input,
.sps-member-form-send-wa-with-mail .field-error .the-form__field--input,
.sps-member-form-send-wa-with-mail .field-error .the-form-field--input,
.spsm-wamail-form .field-error .the-form__field--input,
.sps-member-form--ask-id .field-error .the-form__field--input,
.sps-member-form--ask-id .field-error .the-form-field--input,
.sps-member-form-edit-member .field-error .the-form__field--input,
.sps-member-form-edit-member .field-error .the-form-field--input,
.sps-member-form-email-freelance .field-error .the-form__field--input,
.sps-member-form-email-freelance .field-error .the-form-field--input {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
	animation: spsm-shake 0.4s ease;
}

@keyframes spsm-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
	20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.sps-member-form-submit .field-error .the-form__field--input:focus,
.sps-member-form-submit .field-error .the-form-field--input:focus,
.sps-member-form-send-wa .field-error .the-form-field--input:focus,
.sps-member-form-send-wa-with-mail .field-error .the-form__field--input:focus,
.sps-member-form-send-wa-with-mail .field-error .the-form-field--input:focus,
.spsm-wamail-form .field-error .the-form__field--input:focus,
.sps-member-form--ask-id .field-error .the-form__field--input:focus,
.sps-member-form--ask-id .field-error .the-form-field--input:focus,
.sps-member-form-edit-member .field-error .the-form__field--input:focus,
.sps-member-form-edit-member .field-error .the-form-field--input:focus,
.sps-member-form-email-freelance .field-error .the-form__field--input:focus,
.sps-member-form-email-freelance .field-error .the-form-field--input:focus {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Pesan error di bawah field */
.sps-member-form-submit .field-error-message,
.sps-member-form-send-wa .field-error-message,
.sps-member-form-send-wa-with-mail .field-error-message,
.spsm-wamail-form .field-error-message,
.sps-member-form--ask-id .field-error-message,
.sps-member-form-edit-member .field-error-message,
.sps-member-form-email-freelance .field-error-message {
	margin: 4px 0 0;
	font-size: 12px;
	color: #ef4444;
	display: none;
}

.sps-member-form-submit .field-error .field-error-message,
.sps-member-form-send-wa .field-error .field-error-message,
.sps-member-form-send-wa-with-mail .field-error .field-error-message,
.spsm-wamail-form .field-error .field-error-message,
.sps-member-form--ask-id .field-error .field-error-message,
.sps-member-form-edit-member .field-error .field-error-message,
.sps-member-form-email-freelance .field-error .field-error-message {
	display: block;
}