/*
 * Prism Forms - Frontend form styles
 * Light theme, theme-agnostic. Uses CSS variables so form instances can
 * override the palette via inline style from the renderer.
 */

.prism-form-wrap {
	/* Defaults - overridden per-form via inline style vars */
	--pf-primary:    #2196F3;
	--pf-accent:     #5E35B1;
	--pf-bg:         #FFFFFF;
	--pf-text:       #1E293B;
	--pf-text-muted: #64748B;
	--pf-border:     #CBD5E1;
	--pf-success:    #059669;
	--pf-error:      #DC2626;
	--pf-radius:     8px;

	max-width: 640px;
	margin: 0 auto;
	padding: 28px;
	background: var(--pf-bg);
	color: var(--pf-text);
	border-radius: 12px;
	border: 1px solid var(--pf-border);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
}

.prism-form-wrap *,
.prism-form-wrap *::before,
.prism-form-wrap *::after {
	box-sizing: border-box;
}

.prism-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.prism-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prism-field-label {
	font-weight: 500;
	font-size: 14px;
	color: var(--pf-text);
}

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

.prism-form input[type="text"],
.prism-form input[type="email"],
.prism-form input[type="url"],
.prism-form input[type="tel"],
.prism-form input[type="number"],
.prism-form input[type="date"],
.prism-form input[type="time"],
.prism-form select,
.prism-form textarea {
	width: 100%;
	padding: 10px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--pf-text);
	background: #fff;
	border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius);
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.prism-form select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748B' d='M6 8 0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.prism-form textarea {
	min-height: 110px;
	resize: vertical;
	font-family: inherit;
}

.prism-form input:focus,
.prism-form select:focus,
.prism-form textarea:focus {
	outline: none;
	border-color: var(--pf-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 18%, transparent);
}

.prism-form input.pf-invalid,
.prism-form select.pf-invalid,
.prism-form textarea.pf-invalid {
	border-color: var(--pf-error);
}

.prism-field-help {
	font-size: 12px;
	color: var(--pf-text-muted);
	margin: 2px 0 0 0;
	line-height: 1.4;
}

.prism-field-error {
	font-size: 12px;
	color: var(--pf-error);
	margin: 0;
}

/* Options (radio / checkbox groups) */
.prism-field-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.prism-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--pf-border);
	border-radius: var(--pf-radius);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.prism-option:hover {
	border-color: var(--pf-primary);
	background: color-mix(in srgb, var(--pf-primary) 4%, #fff);
}

.prism-option input[type="radio"],
.prism-option input[type="checkbox"] {
	margin: 0;
	accent-color: var(--pf-primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Section breaks */
.prism-section-heading {
	font-size: 18px;
	font-weight: 600;
	margin: 16px 0 4px 0;
	padding-top: 16px;
	border-top: 1px solid var(--pf-border);
	color: var(--pf-text);
}

.prism-section-desc {
	color: var(--pf-text-muted);
	font-size: 14px;
	margin: 0 0 8px 0;
}

/* Submit button + actions */
.prism-form-actions {
	margin-top: 4px;
}

.prism-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	min-width: 140px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--pf-primary);
	border: none;
	border-radius: var(--pf-radius);
	cursor: pointer;
	transition: background 0.15s, transform 0.05s, opacity 0.2s;
	font-family: inherit;
}

.prism-form-submit:hover {
	background: color-mix(in srgb, var(--pf-primary) 90%, #000);
}

.prism-form-submit:active {
	transform: translateY(1px);
}

.prism-form-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 35%, transparent);
}

.prism-form-submit:disabled,
.prism-form-submit[aria-busy="true"] {
	opacity: 0.65;
	cursor: wait;
}

/* Loading spinner */
.prism-form-submit[aria-busy="true"]::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: prism-spin 0.7s linear infinite;
}

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

/* Messages */
.prism-form-messages {
	min-height: 0;
}

.prism-form-messages:empty {
	display: none;
}

.prism-form-messages.pf-success {
	padding: 14px 16px;
	background: #D1FAE5;
	color: #065F46;
	border-radius: var(--pf-radius);
	border-left: 4px solid var(--pf-success);
	font-size: 14px;
	line-height: 1.5;
}

.prism-form-messages.pf-error {
	padding: 14px 16px;
	background: #FEE2E2;
	color: #7F1D1D;
	border-radius: var(--pf-radius);
	border-left: 4px solid var(--pf-error);
	font-size: 14px;
	line-height: 1.5;
}

/* Admin-only error fallback */
.prism-form-error {
	padding: 12px 16px;
	background: #FEF3C7;
	color: #78350F;
	border: 1px solid #FCD34D;
	border-radius: 6px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

/* Mobile */
@media (max-width: 540px) {
	.prism-form-wrap {
		padding: 20px 16px;
		border-radius: 8px;
	}

	.prism-form-submit {
		width: 100%;
	}
}

/* Scoped Elementor widget appearance controls. */
.pf-button-outline .prism-form-wrap .prism-form-submit {
    color: var(--pf-primary); background: transparent;
    border: 2px solid var(--pf-primary);
}
.pf-button-outline .prism-form-wrap .prism-form-submit:hover {
    color: #fff; background: var(--pf-primary);
}
.pf-button-rounded .prism-form-wrap .prism-form-submit { border-radius: 999px; }
@media (min-width: 768px) {
    .pf-labels-left .prism-form-wrap .prism-field:not(.pf-field-checkbox):not(.pf-field-radio) {
        display: grid; grid-template-columns: minmax(110px, 30%) 1fr;
        align-items: start; column-gap: 12px;
    }
}