/**
 * Signal Pack Global Components — Form System
 * Uses existing brand CSS variables with safe fallbacks (same pattern
 * as the other components in this plugin).
 */

.spgc-form-section-heading {
	font-weight: 800;
	font-size: 17px;
	color: var(--navy, #2C2A78);
	margin: 0 0 6px;
}
.spgc-form-section-sub {
	font-size: 13px;
	color: var(--grey-text, #55536b);
	margin: 0 0 20px;
}

.spgc-field { margin-bottom: 20px; }
.spgc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) {
	.spgc-field-row { grid-template-columns: 1fr; }
}

.spgc-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink, #17162e);
	margin-bottom: 6px;
}
.spgc-required { color: var(--red, #E31E2A); margin-left: 2px; }
.spgc-helper-text { font-size: 12px; color: var(--grey-text, #55536b); margin: 6px 0 0; }
.spgc-required-legend { font-size: 12px; color: var(--grey-text, #55536b); margin: 0 0 16px; }

.spgc-input,
.spgc-select,
.spgc-textarea {
	width: 100%;
	height: 44px;
	border: 1.5px solid var(--line, rgba(23, 22, 46, 0.10));
	border-radius: 6px;
	background: var(--paper, #ffffff);
	padding: 0 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--ink, #17162e);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spgc-textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.spgc-input:hover, .spgc-select:hover, .spgc-textarea:hover { border-color: #b9b7cc; }
.spgc-input:focus, .spgc-select:focus, .spgc-textarea:focus {
	outline: none;
	border-color: var(--navy, #2C2A78);
	box-shadow: 0 0 0 3px rgba(44, 42, 120, 0.12);
}
.spgc-input::placeholder, .spgc-textarea::placeholder { color: #a8a6b8; }
.spgc-input:disabled, .spgc-select:disabled, .spgc-textarea:disabled {
	background: #f1f1f4;
	color: #a8a6b8;
	border-color: var(--line, rgba(23, 22, 46, 0.10));
	cursor: not-allowed;
}

/* Search input with icon */
.spgc-search-field { position: relative; }
.spgc-search-field svg {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; stroke: var(--grey-text, #55536b); pointer-events: none;
}
.spgc-search-field .spgc-input { padding-left: 40px; }

/* Select chevron */
.spgc-select {
	appearance: none;
	-webkit-appearance: none;
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355536b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
	padding-right: 34px;
}
.spgc-select[multiple] { height: auto; min-height: 110px; background-image: none; padding: 10px; }

/* Checkbox / Radio */
.spgc-checkbox, .spgc-radio {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13.5px; color: var(--ink, #17162e); cursor: pointer; padding: 4px 0;
}
.spgc-checkbox input, .spgc-radio input {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
	border: 1.5px solid var(--line, rgba(23, 22, 46, 0.10)); background: #fff; position: relative; cursor: pointer;
}
.spgc-checkbox input { border-radius: 4px; }
.spgc-radio input { border-radius: 50%; }
.spgc-checkbox input:checked, .spgc-radio input:checked { border-color: var(--navy, #2C2A78); background: var(--navy, #2C2A78); }
.spgc-checkbox input:checked::after {
	content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.spgc-radio input:checked::after {
	content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.spgc-checkbox input:focus-visible, .spgc-radio input:focus-visible { outline: 2px solid var(--navy, #2C2A78); outline-offset: 2px; }

/* Toggle switch */
.spgc-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.spgc-toggle input {
	appearance: none; width: 42px; height: 24px; border-radius: 999px;
	background: var(--line, rgba(23, 22, 46, 0.10)); position: relative; transition: background 0.2s ease; flex-shrink: 0;
}
.spgc-toggle input::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 2px 8px rgba(23, 22, 46, 0.06); transition: transform 0.2s ease;
}
.spgc-toggle input:checked { background: var(--navy, #2C2A78); }
.spgc-toggle input:checked::after { transform: translateX(18px); }
.spgc-toggle input:focus-visible { outline: 2px solid var(--navy, #2C2A78); outline-offset: 2px; }

/* File upload */
.spgc-file-upload {
	border: 1.5px dashed var(--line, rgba(23, 22, 46, 0.10)); border-radius: 6px; padding: 24px; text-align: center;
	background: var(--grey-bg, #f6f6f9); transition: border-color 0.2s ease;
}
.spgc-file-upload.spgc-is-dragover { border-color: var(--navy, #2C2A78); background: var(--grey-alt, #eef0f5); }
.spgc-file-upload svg { width: 26px; height: 26px; stroke: var(--navy, #2C2A78); margin: 0 auto 10px; }
.spgc-file-upload p { font-size: 13px; color: var(--grey-text, #55536b); margin: 0; }
.spgc-file-preview-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.spgc-file-preview {
	width: 72px; height: 72px; border-radius: 6px; overflow: hidden; position: relative;
	border: 1px solid var(--line, rgba(23, 22, 46, 0.10)); background: var(--paper, #ffffff);
}
.spgc-file-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spgc-file-preview .spgc-remove {
	position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
	background: rgba(23, 22, 46, 0.7); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
	font-size: 11px; cursor: pointer;
}

/* ---------- States ---------- */
.spgc-field.spgc-has-error .spgc-input,
.spgc-field.spgc-has-error .spgc-select,
.spgc-field.spgc-has-error .spgc-textarea {
	border-color: #c8151f;
	background: #fdecec;
}
.spgc-field-error {
	display: none; font-size: 12px; color: #c8151f; margin: 6px 0 0; align-items: center; gap: 6px;
}
.spgc-field.spgc-has-error .spgc-field-error { display: flex; }
.spgc-field.spgc-has-error .spgc-field-error:empty::before { content: "This field is required."; }

.spgc-field.spgc-has-success .spgc-input { border-color: #1e8e5a; }
.spgc-field-success { font-size: 12px; color: #1e8e5a; margin: 6px 0 0; display: none; align-items: center; gap: 6px; }
.spgc-field.spgc-has-success .spgc-field-success { display: flex; }

.spgc-form-success {
	background: #e9f7ef; color: #1e8e5a; border-radius: 6px; padding: 14px 16px; font-size: 13.5px; margin-top: 16px;
}