/*
 * SmartLead Forms – Public Styles
 * Lightweight, theme-friendly, fully accessible.
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
.slf-form-wrap {
	--slf-primary:      #2563eb;
	--slf-primary-dark: #1d4ed8;
	--slf-error:        #dc2626;
	--slf-success:      #16a34a;
	--slf-border:       #d1d5db;
	--slf-bg:           #f9fafb;
	--slf-text:         #111827;
	--slf-label:        #374151;
	--slf-radius:       6px;
	--slf-shadow:       0 1px 3px rgba(0,0,0,.1);
	font-family: inherit;
	box-sizing: border-box;
}

.slf-form-wrap *,
.slf-form-wrap *::before,
.slf-form-wrap *::after {
	box-sizing: inherit;
}

/* ========================================
   Form Title & Description
   ======================================== */
.slf-form-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--slf-text);
	margin: 0 0 .5rem;
}

.slf-form-desc {
	color: #6b7280;
	margin: 0 0 1.25rem;
}

/* ========================================
   Field Layout
   ======================================== */
.slf-contact-form {
	max-width: 600px;
}

.slf-field-wrap {
	margin-bottom: 1.25rem;
}

.slf-label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--slf-label);
	margin-bottom: .375rem;
}

.slf-required {
	color: var(--slf-error);
	margin-left: 2px;
}

.slf-input {
	display: block;
	width: 100%;
	padding: .6rem .85rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--slf-text);
	background: #fff;
	border: 1.5px solid var(--slf-border);
	border-radius: var(--slf-radius);
	box-shadow: var(--slf-shadow);
	transition: border-color .15s, box-shadow .15s;
	appearance: none;
}

.slf-input:focus {
	outline: none;
	border-color: var(--slf-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

.slf-textarea {
	resize: vertical;
	min-height: 120px;
}

.slf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 1.1rem;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Captcha */
.slf-captcha-wrap .slf-input {
	max-width: 100px;
}

/* Honeypot – screen reader accessible, visually hidden */
.slf-hp-field {
	position: absolute !important;
	left: -9999px !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* ========================================
   Submit Button
   ======================================== */
.slf-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--slf-primary);
	border: none;
	border-radius: var(--slf-radius);
	cursor: pointer;
	transition: background .15s, transform .1s;
	line-height: 1;
}

.slf-btn:hover  { background: var(--slf-primary-dark); }
.slf-btn:active { transform: scale(.97); }
.slf-btn:focus  {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37,99,235,.35);
}

.slf-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

/* Loading spinner inside button */
.slf-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: slf-spin .6s linear infinite;
}

.slf-loading .slf-btn-spinner { display: inline-block; }
.slf-loading .slf-btn { pointer-events: none; opacity: .8; }

@keyframes slf-spin {
	to { transform: rotate(360deg); }
}

/* ========================================
   Status / Feedback Messages
   ======================================== */
.slf-form-status {
	margin-top: 1rem;
	padding: .85rem 1rem;
	border-radius: var(--slf-radius);
	font-size: .95rem;
	display: none;
}

.slf-form-status.slf-status-success {
	display: block;
	background: #dcfce7;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.slf-form-status.slf-status-error {
	display: block;
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ========================================
   Modal / Popup
   ======================================== */
.slf-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.slf-modal[hidden] { display: none; }

.slf-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(2px);
}

.slf-modal-content {
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
	padding: 2rem;
	max-width: 540px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	animation: slf-modal-in .2s ease-out;
}

@keyframes slf-modal-in {
	from { opacity: 0; transform: scale(.95) translateY(10px); }
	to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.slf-modal-close {
	position: absolute;
	top: .75rem;
	right: .85rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	padding: 0;
}

.slf-modal-close:hover { color: #111; }

/* Popup trigger button */
.slf-popup-trigger {
	/* inherits .slf-btn */
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 480px) {
	.slf-modal-content {
		padding: 1.25rem;
	}
}