/*
 * Contact form styles.
 *
 * The form itself is injected by contact-form.js after .lexx-contact-info.
 * RTL by default (Israeli market). Submit POSTs via fetch to admin-ajax.php
 * action `lexx_contact`.
 *
 * Colors flow through child-theme :root tokens (var(--lexx-*)). Drift values
 * (#b5f23d / #c8ff4a) corrected to canonical lime (#C8F000) via tokens
 * 2026-05-28.
 */

.lexx-contact-form-wrap {
	margin-top: 32px;
	direction: rtl;
	text-align: right;
}

.lexx-contact-form-wrap .lexx-form-row {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.lexx-contact-form-wrap .lexx-form-row > * {
	flex: 1;
}

.lexx-contact-form-wrap input,
.lexx-contact-form-wrap select,
.lexx-contact-form-wrap textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 13px 15px;
	color: var(--lexx-white, #fff);
	font-size: 15px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	direction: rtl;
	appearance: none;
	-webkit-appearance: none;
}

.lexx-contact-form-wrap input::placeholder,
.lexx-contact-form-wrap textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.lexx-contact-form-wrap select {
	color: rgba(255, 255, 255, 0.3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 width%3D%2712%27 height%3D%278%27 viewBox%3D%270 0 12 8%27%3E%3Cpath d%3D%27M1 1l5 5 5-5%27 stroke%3D%27%23ffffff%27 stroke-width%3D%271.5%27 fill%3D%27none%27 stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	padding-left: 36px;
	cursor: pointer;
}

.lexx-contact-form-wrap select.lexx-selected {
	color: var(--lexx-white, #fff);
}

.lexx-contact-form-wrap select option {
	background: var(--lexx-surface, #1a1a1a);
	color: var(--lexx-white, #fff);
}

.lexx-contact-form-wrap input:focus,
.lexx-contact-form-wrap select:focus,
.lexx-contact-form-wrap textarea:focus {
	border-color: var(--lexx-lime, #C8F000);
	background: rgba(255, 255, 255, 0.1);
}

.lexx-contact-form-wrap textarea {
	min-height: 130px;
	resize: vertical;
	margin-bottom: 12px;
}

.lexx-contact-form-wrap .lexx-form-field {
	margin-bottom: 12px;
}

.lexx-contact-form-wrap .lexx-form-submit {
	background: var(--lexx-lime, #C8F000);
	color: var(--lexx-lime-dark-text, #0D0D0F);
	border: none;
	border-radius: 8px;
	padding: 15px 28px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	font-family: inherit;
	width: 100%;
	letter-spacing: 0.02em;
}

.lexx-contact-form-wrap .lexx-form-submit:hover {
	background: var(--lexx-lime, #C8F000);
	filter: brightness(1.08);
}

.lexx-contact-form-wrap .lexx-form-submit:active {
	transform: scale(0.98);
}

.lexx-contact-form-wrap .lexx-form-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

.lexx-contact-form-wrap .lexx-form-msg {
	display: none;
	border-radius: 8px;
	padding: 13px 15px;
	font-size: 14px;
	text-align: center;
	margin-top: 10px;
}

.lexx-contact-form-wrap .lexx-form-msg.success {
	background: rgba(200, 240, 0, 0.1);
	border: 1px solid var(--lexx-lime, #C8F000);
	color: var(--lexx-lime, #C8F000);
}

.lexx-contact-form-wrap .lexx-form-msg.error {
	background: rgba(255, 128, 128, 0.1);
	border: 1px solid rgba(255, 128, 128, 0.4);
	color: var(--lexx-danger, #FF8080);
}

@media (max-width: 480px) {
	.lexx-contact-form-wrap .lexx-form-row {
		flex-direction: column;
		gap: 0;
	}
	.lexx-contact-form-wrap .lexx-form-row > * {
		margin-bottom: 12px;
	}
}