/**
 * SavannaLux "Start Your Journey" Form — Frontend Styles
 * Developed by SavannaLux Adventures.
 *
 * Color palette sampled to match the provided design:
 *   Card background : #FBF8F1 (warm cream)
 *   Gold accent      : #C8862B / #D4A33A
 *   Heading text     : #1F2D20 (deep charcoal-green/black)
 *   Body/placeholder : #8A8478 (warm grey)
 *   Field border     : #E5DFD1
 */

.sljf-form-card {
	--sljf-cream: #FBF8F1;
	--sljf-gold: #C8862B;
	--sljf-gold-light: #D9A646;
	--sljf-dark: #211C14;
	--sljf-grey: #8B8576;
	--sljf-border: #E7E1D2;

	background: var(--sljf-cream);
	border-radius: 18px;
	padding: 40px 36px 36px;
	max-width: 420px;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45);
	font-family: inherit;
	text-align: center;
}

/* ── Icon circle ───────────────────────────────────────────────────────── */

.sljf-icon-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1.5px solid var(--sljf-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	color: var(--sljf-gold);
}

/* ── Heading + divider ─────────────────────────────────────────────────── */

.sljf-form-heading {
	margin: 0 0 8px;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--sljf-dark);
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.01em;
}

.sljf-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 16px;
	width: 90px;
}

.sljf-divider span {
	height: 1px;
	flex: 1;
	background: var(--sljf-gold);
	opacity: 0.6;
}

.sljf-divider i {
	width: 6px;
	height: 6px;
	background: var(--sljf-gold);
	transform: rotate(45deg);
	display: inline-block;
	flex-shrink: 0;
}

.sljf-form-subheading {
	margin: 0 0 26px;
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--sljf-grey);
}

/* ── Form layout ───────────────────────────────────────────────────────── */

.sljf-journey-form {
	text-align: left;
}

.sljf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sljf-row {
	margin-bottom: 14px;
}

.sljf-row-2 {
	display: flex;
	gap: 12px;
}

.sljf-row-2 .sljf-field {
	flex: 1;
	min-width: 0;
}

/* ── Field wrapper ─────────────────────────────────────────────────────── */

.sljf-field {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--sljf-border);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sljf-field:focus-within {
	border-color: var(--sljf-gold);
	box-shadow: 0 0 0 3px rgba(200,134,43,0.12);
}

.sljf-field-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	flex-shrink: 0;
	color: var(--sljf-gold);
}

.sljf-field input,
.sljf-field textarea {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 13px 14px 13px 0;
	font-size: 0.92em;
	color: var(--sljf-dark);
	font-family: inherit;
}

.sljf-field input::placeholder,
.sljf-field textarea::placeholder {
	color: #A8A294;
}

.sljf-field-textarea {
	align-items: flex-start;
}

.sljf-field-icon-top {
	margin-top: 13px;
}

.sljf-field textarea {
	padding-top: 12px;
	resize: vertical;
	min-height: 70px;
	line-height: 1.5;
}

/* ── Submit button ─────────────────────────────────────────────────────── */

.sljf-submit-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, var(--sljf-gold-light) 0%, var(--sljf-gold) 100%);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 15px 20px;
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	margin-top: 8px;
	transition: filter 0.15s ease, transform 0.1s ease;
}

.sljf-submit-btn:hover {
	filter: brightness(1.06);
}

.sljf-submit-btn:active {
	transform: translateY(1px);
}

.sljf-submit-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.sljf-btn-icon-left,
.sljf-btn-icon-right {
	display: flex;
	align-items: center;
}

.sljf-form-message {
	margin: 12px 0 0;
	font-size: 0.85em;
	text-align: center;
	min-height: 1.2em;
}

.sljf-form-message.is-success {
	color: #3E7D4C;
}

.sljf-form-message.is-error {
	color: #C0392B;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.sljf-form-card {
		padding: 30px 22px 26px;
		border-radius: 14px;
	}

	.sljf-row-2 {
		flex-direction: column;
	}
}