/*
 * Easy Contact Form by LukaCodes — Frontend CSS v1.0.0
 *
 * Dark mode strategy:
 *   Light: Card with white bg, border, shadow.
 *   Dark:  Card is TRANSPARENT — the theme's own background shows through.
 *          Input fields get a subtle semi-transparent overlay so they're
 *          distinguishable from the page background.
 *          This works with ANY dark theme, regardless of its background colour.
 */

.lecf-fw {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	/* Inherit text colour so dark themes' white text comes through */
	color: var(--txt, inherit);
}
.lecf-fw * { box-sizing: border-box; }

/* ── Card ─────────────────────────────────────────────────────── */
.lecf-card {
	background:    var(--bg, #fff);
	border:        1px solid var(--bdr, #e2e8f0);
	border-radius: 16px;
	padding:       28px 28px 24px;
	box-shadow:    var(--shd, 0 4px 20px rgba(0,0,0,.06));
	transition:    background .25s, border-color .25s, box-shadow .25s;
}
@media (max-width: 500px) { .lecf-card { padding: 18px 14px 16px; } }

/* ── Grid ─────────────────────────────────────────────────────── */
.lecf-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.lecf-field    { display: flex; flex-direction: column; gap: 5px; }
.lecf-col-full { width: 100%; }
.lecf-col-half { width: calc(50% - 7px); }
@media (max-width: 500px) { .lecf-col-half { width: 100%; } }

/* ── Labels ───────────────────────────────────────────────────── */
.lecf-field label {
	display:     block;
	font-size:   13px;
	font-weight: 600;
	color:       var(--lbl, #374151);
}
.lecf-req { color: var(--a, #f97316); margin-left: 2px; }

/* ── Shared input styles ──────────────────────────────────────── */
.lecf-field input[type="text"],
.lecf-field input[type="email"],
.lecf-field input[type="tel"],
.lecf-field input[type="url"],
.lecf-field input[type="number"],
.lecf-field input[type="datetime-local"],
.lecf-field textarea {
	display:       block;
	width:         100%;
	padding:       10px 13px;
	background:    var(--ibg, #f8fafc);
	border:        1.5px solid var(--bdr-input, var(--bdr, #e2e8f0));
	border-radius: 9px;
	font-size:     14px;
	font-family:   inherit;
	color:         var(--txt, #0f172a);
	outline:       none;
	-webkit-appearance: none;
	appearance:    none;
	transition:    border-color .2s, box-shadow .2s, background .25s;
	line-height:   1.5;
}
.lecf-field input::placeholder,
.lecf-field textarea::placeholder {
	color: var(--ph, #94a3b8);
	opacity: 1;
}
.lecf-field input:focus,
.lecf-field select:focus,
.lecf-field textarea:focus {
	border-color: var(--a, #f97316);
	box-shadow:   0 0 0 3px var(--ag, rgba(249,115,22,.2));
	background:   var(--ibgf, #fff);
}
.lecf-field textarea { line-height: 1.55; min-height: 110px; resize: vertical; }

/* Datetime dark icon */
.lecf-dark .lecf-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(.65);
}

/* ── Select: THE definitive cross-browser vertical centering fix ─
 *
 * Problem: <select> text position is controlled by the browser's
 * native rendering engine. height + line-height cause the text
 * to render at the TOP in Firefox and some Safari versions.
 *
 * Solution: Use explicit padding-top + padding-bottom (equal values)
 * with -webkit-appearance:none and appearance:none. This forces the
 * browser to use our padding for layout rather than its native
 * select height algorithm. Works in Chrome, Firefox, Safari, Edge.
 *
 * The wrapper div positions the custom arrow absolutely, completely
 * independent of the select's internal layout.
 * ──────────────────────────────────────────────────────────────── */
.lecf-select-wrap {
	position: relative;
	display:  block;
}

.lecf-field select {
	display:            block;
	width:              100%;
	/* Equal top & bottom padding = vertically centred text on all browsers */
	padding:            2px 36px 2px 13px;
	background:         var(--ibg, #f8fafc);
	border:             1.5px solid var(--bdr-input, var(--bdr, #e2e8f0));
	border-radius:      9px;
	font-size:          14px;
	font-family:        inherit;
	color:              var(--txt, #0f172a);
	cursor:             pointer;
	outline:            none;
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	/* Do NOT set height or line-height — they break vertical centering */
	transition:         border-color .2s, box-shadow .2s, background .25s, color .25s;
}

/* Custom arrow via wrapper pseudo-element */
.lecf-select-wrap::after {
	content:        '';
	position:       absolute;
	right:          13px;
	top:            50%;
	transform:      translateY(-50%) rotate(45deg);
	width:          7px;
	height:         7px;
	border-right:   2px solid var(--ph, #94a3b8);
	border-bottom:  2px solid var(--ph, #94a3b8);
	pointer-events: none;
	transition:     border-color .25s;
}
.lecf-select-wrap:focus-within::after {
	border-color: var(--a, #f97316);
}

/* Firefox: remove dotted inner focus ring */
.lecf-field select:-moz-focusring {
	color:       transparent;
	text-shadow: 0 0 0 var(--txt, #0f172a);
}
/* Firefox on dark mode */
.lecf-dark .lecf-field select:-moz-focusring {
	text-shadow: 0 0 0 #fff;
}

/* Input border in dark mode uses --bdr-input var set in form-output.php */
.lecf-dark .lecf-field select,
.lecf-dark .lecf-field input[type="text"],
.lecf-dark .lecf-field input[type="email"],
.lecf-dark .lecf-field input[type="tel"],
.lecf-dark .lecf-field input[type="url"],
.lecf-dark .lecf-field input[type="number"],
.lecf-dark .lecf-field input[type="datetime-local"],
.lecf-dark .lecf-field textarea {
	/* Text inherits from theme via color:inherit on .lecf-fw */
	color: #fff;
}
.lecf-dark .lecf-field select option {
	color: #0f172a;
	background-color: #fff;
}

.lecf-dark .lecf-field select option[disabled] {
	color: #475569;
}

/* ── Radio & Checkbox ─────────────────────────────────────────── */
.lecf-radio-group,
.lecf-check-group { display: flex; flex-direction: column; gap: 9px; }
.lecf-choice-label {
	display:     flex;
	align-items: center;
	gap:         9px;
	font-size:   14px;
	color:       var(--txt, #374151);
	cursor:      pointer;
}
.lecf-choice-label input {
	accent-color: var(--a, #f97316);
	width: 17px; height: 17px;
	cursor: pointer; flex-shrink: 0;
}

/* ── Validation ───────────────────────────────────────────────── */
.lecf-field-error { font-size: 11px; color: var(--er, #ef4444); display: none; margin-top: 2px; }
.lecf-field.has-error .lecf-select-wrap,
.lecf-field.has-error input,
.lecf-field.has-error textarea {
	border-color: var(--er, #ef4444);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--er, #ef4444) 16%, transparent);
}
.lecf-field.has-error .lecf-field-error { display: block; }

/* ── Alert ────────────────────────────────────────────────────── */
.lecf-alert {
	padding:       11px 14px; border-radius: 9px;
	font-size:     13px; font-weight: 500;
	margin-bottom: 14px; border: 1px solid transparent;
	transition:    background .25s, color .25s;
}
.lecf-alert.success { background: var(--ok-bg); color: var(--ok-t); border-color: var(--ok-b); }
.lecf-alert.error   { background: var(--er-bg); color: var(--er-t); border-color: var(--er-b); }

/* ── Submit button ────────────────────────────────────────────── */
.lecf-sub {
	display:     inline-flex; align-items: center; gap: 8px;
	padding:     11px 26px;
	background:  var(--a, #f97316); color: #fff;
	border:      none; border-radius: 9px;
	font-size:   15px; font-weight: 700; font-family: inherit;
	cursor:      pointer;
	box-shadow:  0 4px 14px color-mix(in srgb, var(--a, #f97316) 38%, transparent);
	transition:  opacity .2s, transform .15s, box-shadow .2s;
}
.lecf-sub:hover:not(:disabled) {
	opacity: .9; transform: translateY(-1px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--a, #f97316) 44%, transparent);
}
.lecf-sub:active:not(:disabled) { transform: translateY(0); }
.lecf-sub:disabled              { opacity: .6; cursor: not-allowed; }
.lecf-sub-spin {
	width: 14px; height: 14px;
	border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
	border-radius: 50%; animation: ecf-spin .6s linear infinite;
	display: none; flex-shrink: 0;
}
.lecf-sub.loading .lecf-sub-spin { display: inline-block; }
.lecf-sub.loading .lecf-sub-txt  { display: none; }
@keyframes ecf-spin { to { transform: rotate(360deg); } }

/* ── Success state ────────────────────────────────────────────── */
.lecf-done { text-align: center; padding: 36px 20px; }
.lecf-done-ico {
	width: 60px; height: 60px; background: var(--a, #f97316); border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 26px; color: #fff; margin-bottom: 14px;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--a, #f97316) 40%, transparent);
	animation: ecf-pop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ecf-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lecf-done-msg {
	font-size: 16px; font-weight: 600;
	color: var(--txt, #0f172a); margin: 0;
}