/* LeadRat Form — Public Front-end Styles
 * All rules are scoped to .leadrat-form-wrapper to avoid conflicts.
 * CSS custom properties (--lrf-*) are injected inline by PHP and fall
 * back to sensible defaults so the form is usable without any override.
 */

/* -------------------------------------------------------------------------
 * Wrapper / reset
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper {
	--lrf-primary-color:   #0073aa;
	--lrf-bg-color:        transparent;
	--lrf-font-family:     inherit;
	--lrf-font-size:       inherit;
	--lrf-label-font-size: inherit;
	--lrf-button-radius:   4px;

	font-family: var(--lrf-font-family);
	font-size:   var(--lrf-font-size);
	background:  var(--lrf-bg-color);
	box-sizing:  border-box;
	padding:     20px;
	border-radius: 6px;
}

.leadrat-form-wrapper *,
.leadrat-form-wrapper *::before,
.leadrat-form-wrapper *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Field rows
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-field-row {
	margin-bottom: 18px;
}

.leadrat-form-wrapper .lrf-label {
	display:       block;
	margin-bottom: 5px;
	font-size:     var(--lrf-label-font-size);
	font-weight:   600;
	color:         inherit;
}

.leadrat-form-wrapper .lrf-required {
	color:       #dc3232;
	margin-left: 3px;
}

/* -------------------------------------------------------------------------
 * Inputs, selects, textarea
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-input {
	display:        block;
	width:          100%;
	padding:        9px 12px;
	font-family:    inherit;
	font-size:      var(--lrf-font-size);
	color:          inherit;
	background:     #fff;
	border:         1px solid #bbb;
	border-radius:  3px;
	transition:     border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance:     none;
}

.leadrat-form-wrapper .lrf-input:focus {
	outline:      none;
	border-color: var(--lrf-primary-color);
	box-shadow:   0 0 0 2px color-mix(in srgb, var(--lrf-primary-color) 25%, transparent);
}

.leadrat-form-wrapper .lrf-input.lrf-input-error {
	border-color: #dc3232;
}

.leadrat-form-wrapper select.lrf-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 12px center;
	padding-right:       32px;
	cursor:              pointer;
}

.leadrat-form-wrapper textarea.lrf-input {
	resize: vertical;
	min-height: 90px;
}

/* -------------------------------------------------------------------------
 * Checkbox groups (array_enum)
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-checkbox-group {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px 16px;
}

.leadrat-form-wrapper .lrf-checkbox-group label {
	display:     inline-flex;
	align-items: center;
	gap:         5px;
	cursor:      pointer;
	font-weight: normal;
}

/* -------------------------------------------------------------------------
 * Inline error text
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-error {
	display:    block;
	margin-top: 4px;
	color:      #dc3232;
	font-size:  0.875em;
}

/* -------------------------------------------------------------------------
 * Submit row
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-submit-row {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.leadrat-form-wrapper .lrf-submit-btn {
	display:          inline-block;
	padding:          10px 24px;
	font-family:      inherit;
	font-size:        var(--lrf-font-size);
	font-weight:      600;
	color:            #fff;
	background:       var(--lrf-primary-color);
	border:           none;
	border-radius:    var(--lrf-button-radius);
	cursor:           pointer;
	transition:       background 0.15s, opacity 0.15s;
	-webkit-appearance: none;
	appearance:       none;
}

.leadrat-form-wrapper .lrf-submit-btn:hover:not(:disabled) {
	opacity: 0.88;
}

.leadrat-form-wrapper .lrf-submit-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

/* -------------------------------------------------------------------------
 * Spinner
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-form-spinner[hidden] {
	display: none !important;
}

.leadrat-form-wrapper .lrf-form-spinner {
	display:       inline-block;
	width:         20px;
	height:        20px;
	border:        3px solid color-mix(in srgb, var(--lrf-primary-color) 30%, transparent);
	border-top:    3px solid var(--lrf-primary-color);
	border-radius: 50%;
	animation:     lrf-spin 0.7s linear infinite;
}

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

/* -------------------------------------------------------------------------
 * Status message
 * ---------------------------------------------------------------------- */

.leadrat-form-wrapper .lrf-form-message {
	padding:       12px 16px;
	border-radius: 4px;
	margin-top:    16px;
	border-left:   4px solid transparent;
}

.leadrat-form-wrapper .lrf-form-message-success {
	background:   #edfaef;
	border-color: #46b450;
	color:        #1d6021;
}

.leadrat-form-wrapper .lrf-form-message-error {
	background:   #fff5f5;
	border-color: #dc3232;
	color:        #8a1a1a;
}

/* -------------------------------------------------------------------------
 * Admin notice (shown only to admins when not yet configured)
 * ---------------------------------------------------------------------- */

.leadrat-form-notice {
	padding:     10px 14px;
	background:  #fff8e1;
	border-left: 4px solid #ffb900;
	color:       #5c4000;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.leadrat-form-wrapper {
		padding: 14px;
	}
}

/* -------------------------------------------------------------------------
 * Popup trigger button
 * ---------------------------------------------------------------------- */

.leadrat-form-popup {
	padding: 0;
	background: transparent;
}

.lrf-popup-trigger {
	display:        inline-block;
	padding:        12px 24px;
	font-family:    inherit;
	font-size:      inherit;
	font-weight:    600;
	color:          #fff;
	background:     var(--lrf-primary-color, #0073aa);
	border:         none;
	border-radius:  var(--lrf-button-radius, 4px);
	cursor:         pointer;
	transition:     background 0.15s, opacity 0.15s;
}

.lrf-popup-trigger:hover {
	opacity: 0.88;
}

@media (max-width: 480px) {
	.lrf-popup-trigger {
		display: block;
		width:   100%;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Modal dialog
 * ---------------------------------------------------------------------- */

.lrf-modal {
	border:           none;
	border-radius:    8px;
	padding:          0;
	max-width:        500px;
	width:            90vw;
	max-height:       90vh;
	background:       #fff;
	box-shadow:       0 4px 24px rgba(0, 0, 0, 0.15);
	overflow:         visible;
	opacity:          0;
	transform:        scale(0.95);
	transition:       opacity 0.2s ease-out, transform 0.2s ease-out;
}

.lrf-modal[open] {
	opacity:   1;
	transform: scale(1);
}

.lrf-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
	opacity:    0;
	transition: opacity 0.2s ease-out;
}

.lrf-modal[open]::backdrop {
	opacity: 1;
}

.lrf-modal-header {
	display:         flex;
	justify-content: flex-end;
	padding:         12px 16px 0;
}

.lrf-modal-close {
	background:    none;
	border:        none;
	font-size:     24px;
	line-height:   1;
	width:         32px;
	height:        32px;
	padding:       0;
	cursor:        pointer;
	color:         #666;
	border-radius: 4px;
	transition:    background 0.15s, color 0.15s;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.lrf-modal-close:hover {
	background: #f0f0f0;
	color:      #333;
}

.lrf-modal-body {
	padding:    0 24px 24px;
	overflow-y: auto;
	max-height: calc(90vh - 56px);
}

/* Reset wrapper padding inside modal */
.lrf-modal .leadrat-form {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Modal responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.lrf-modal {
		width:     90vw;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.lrf-modal {
		width:      95vw;
		max-height: 95vh;
		border-radius: 6px;
	}

	.lrf-modal-body {
		padding:    0 16px 16px;
		max-height: calc(95vh - 48px);
	}
}