/* 360 Auto Eye — Fluent Forms style overrides.
 *
 * Maps Fluent Forms' default output (inside .form) onto the design's input,
 * label, and button styling — which lives in assets/css/styles.css under
 * `.form input`, `.form textarea`, `.form label`, `.btn.submit`, etc.
 *
 * Loaded AFTER styles.css and responsive.css so its rules win the cascade.
 *
 * Recommended Fluent Forms field setup (replicate in the FF admin and
 * document in README.md):
 *
 *   ┌──────────────────────────────────┬──────────────────────────────────┐
 *   │ Name (Single line)               │ Phone (Phone field / Single)     │
 *   ├──────────────────────────────────┼──────────────────────────────────┤
 *   │ Email                            │ Post code (Single line)          │
 *   ├──────────────────────────────────┴──────────────────────────────────┤
 *   │ Message (Textarea — full width)                                     │
 *   ├─────────────────────────────────────────────────────────────────────┤
 *   │ [Submit button — label: "Enquire now"]                              │
 *   └─────────────────────────────────────────────────────────────────────┘
 *
 * Use a Fluent Forms Container/Columns field to put Name+Phone and
 * Email+Post code on two rows of two columns each. Message and Submit are
 * full-width below.
 */

/* ── Reset wrapper margins so the .form padding controls outer spacing ── */
.form .fluentform,
.form .fluentform .ff-el-group,
.form .fluentform .ff-t-container { margin: 0; }

.form .fluentform .ff-el-group { margin-bottom: 14px; }
.form .fluentform .ff-el-group:last-of-type { margin-bottom: 0; }

/* ── Inputs, textareas, selects ── */
.form .fluentform input[type="text"],
.form .fluentform input[type="email"],
.form .fluentform input[type="tel"],
.form .fluentform input[type="url"],
.form .fluentform input[type="number"],
.form .fluentform input[type="password"],
.form .fluentform input[type="search"],
.form .fluentform textarea,
.form .fluentform select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-primary);
	font: inherit;
	font-size: 14px;
	color: var(--ink-primary);
	line-height: 1.4;
	box-shadow: none;
}

.form .fluentform input::placeholder,
.form .fluentform textarea::placeholder { color: var(--ink-tertiary); opacity: 1; }

.form .fluentform input:focus,
.form .fluentform textarea:focus,
.form .fluentform select:focus {
	outline: none;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px rgba(67,97,255,.12);
}

.form .fluentform textarea { min-height: 96px; resize: vertical; }

/* ── Labels ── */
.form .fluentform .ff-el-input--label label,
.form .fluentform label {
	display: block;
	font-size: 12px;
	color: var(--ink-secondary);
	font-weight: 500;
	margin-bottom: 6px;
	line-height: 1.4;
}

.form .fluentform .ff-el-is-required,
.form .fluentform .ff-el-input--label label .text-danger { color: var(--status-flag); margin-left: 2px; }

/* ── Two-column row via FF's Container field ── */
.form .fluentform .ff-t-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.form .fluentform .ff-t-container .ff-t-cell { padding: 0; }
.form .fluentform .ff-t-container .ff-el-group { margin-bottom: 0; }

/* ── Submit button = .btn.submit ── */
.form .fluentform .ff-btn-submit,
.form .fluentform button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 18px;
	background: var(--ink-primary);
	color: #fff;
	border: 0;
	border-radius: var(--r-pill);
	padding: 14px 22px;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: opacity .15s;
}

.form .fluentform .ff-btn-submit:hover,
.form .fluentform button[type="submit"]:hover { opacity: .92; }

/* White arrow-circle trailing the submit label (replaces the design's
   <span class="a"><svg…/></span> child, which FF won't render). */
.form .fluentform .ff-btn-submit::after,
.form .fluentform button[type="submit"]::after {
	content: "";
	width: 24px;
	height: 24px;
	border-radius: var(--r-pill);
	flex-shrink: 0;
	background:
		#fff
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230B1220' stroke-width='1.8'><path d='M3 6h6m0 0L6.5 3.5M9 6 6.5 8.5'/></svg>")
		center / 12px 12px no-repeat;
}

/* ── Inline validation / errors ── */
.form .fluentform .error,
.form .fluentform .text-danger,
.form .fluentform .ff-el-form-check-label .text-danger {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--status-flag);
}

.form .fluentform input.error,
.form .fluentform textarea.error { border-color: var(--status-flag); }

/* ── Post-submit success message ── */
.form .fluentform .ff-message-success,
.form .ff-message-success {
	padding: 14px 16px;
	background: rgba(15,174,110,.08);
	border: 1px solid rgba(15,174,110,.3);
	border-radius: 12px;
	color: var(--status-clear);
	font-size: 14px;
}

/* ── Stack 2-col row on small phones ── */
@media (max-width: 480px) {
	.form .fluentform .ff-t-container { grid-template-columns: 1fr; }
}

/* ── Fallback notice when the plugin is inactive ── */
.form .ff-notice {
	margin: 0;
	padding: 14px 16px;
	background: var(--bg-secondary);
	border: 1px dashed var(--border);
	border-radius: 12px;
	font-size: 13px;
	color: var(--ink-secondary);
	text-align: center;
	line-height: 1.5;
}