/* Custom Form by Jomar — modern frontend styling */

.sfc-form-wrap {
	--sfc-accent: #6C5CE7;
	--sfc-accent-2: #00D2A0;
	--sfc-button: #006060;
	--sfc-button-2: #009090;
	--sfc-text: #1a1a2e;
	--sfc-muted: #7a7a8c;
	--sfc-border: #e3e3ec;
	--sfc-bg: #ffffff;
	--sfc-error: #e5484d;
	--sfc-radius: 14px;

	max-width: 560px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	position: relative;
}

.sfc-form-wrap * {
	-webkit-tap-highlight-color: transparent;
}

.sfc-form-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 600;
	color: var(--sfc-text);
	text-align: center;
}

.sfc-form {
	background: var(--sfc-bg);
	border: 1px solid var(--sfc-border);
	border-radius: var(--sfc-radius);
	padding: 32px;
	box-shadow: 0 4px 24px rgba(20, 20, 43, 0.06);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.sfc-form-wrap.sfc-submitted .sfc-form {
	opacity: 0;
	transform: scale(0.97) translateY(6px);
	pointer-events: none;
	position: absolute;
	inset: 0;
}

.sfc-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.sfc-field {
	margin-bottom: 22px;
}

.sfc-floating-group {
	position: relative;
}

.sfc-floating-group input,
.sfc-floating-group textarea,
.sfc-floating-group select {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	font-family: inherit;
	color: var(--sfc-text);
	background: #fbfbfe;
	border: 1.5px solid var(--sfc-border);
	border-radius: 10px;
	padding: 18px 14px 8px 14px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

.sfc-floating-group textarea {
	padding-top: 20px;
	resize: vertical;
	min-height: 90px;
}

/* The floating label rests directly over the placeholder text. Keep the
   placeholder invisible until the field is focused (by which point the
   label has already floated up out of the way) so the two never render
   stacked on top of each other. */
.sfc-floating-group input::placeholder,
.sfc-floating-group textarea::placeholder {
	color: transparent;
	transition: color 0.15s ease;
}

.sfc-floating-group input:focus::placeholder,
.sfc-floating-group textarea:focus::placeholder {
	color: var(--sfc-muted);
}

.sfc-select-group select {
	padding-top: 18px;
	cursor: pointer;
}

.sfc-select-group::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 24px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--sfc-muted);
	border-bottom: 2px solid var(--sfc-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.sfc-floating-group label {
	position: absolute;
	left: 15px;
	top: 17px;
	font-size: 15px;
	color: var(--sfc-muted);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.18s ease, color 0.18s ease, top 0.18s ease;
}

.sfc-floating-group input:focus,
.sfc-floating-group textarea:focus,
.sfc-floating-group select:focus {
	border-color: var(--sfc-accent);
	background: #ffffff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sfc-accent) 10%, transparent);
}

.sfc-floating-group input:focus ~ label,
.sfc-floating-group input:not(:placeholder-shown) ~ label,
.sfc-floating-group textarea:focus ~ label,
.sfc-floating-group textarea:not(:placeholder-shown) ~ label,
.sfc-select-group select:focus ~ label,
.sfc-select-group.sfc-has-value select ~ label {
	top: 6px;
	transform: scale(0.75);
	color: var(--sfc-accent);
}

.sfc-field.sfc-invalid .sfc-floating-group input,
.sfc-field.sfc-invalid .sfc-floating-group textarea,
.sfc-field.sfc-invalid .sfc-floating-group select {
	border-color: var(--sfc-error);
}

.sfc-field.sfc-invalid .sfc-floating-group label {
	color: var(--sfc-error);
}

/* Help text (tooltip-style hint under a field) */
.sfc-help-text {
	margin: 6px 2px 0;
	font-size: 12.5px;
	color: var(--sfc-muted);
	line-height: 1.4;
}

/* Radio groups */
.sfc-radio-group {
	border: none;
	margin: 0;
	padding: 0;
}

.sfc-radio-legend {
	font-size: 14px;
	color: var(--sfc-text);
	font-weight: 500;
	margin-bottom: 10px;
	padding: 0;
}

.sfc-radio-option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14.5px;
	color: var(--sfc-text);
	padding: 12px 14px;
	border: 1.5px solid var(--sfc-border);
	border-radius: 10px;
	margin-bottom: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sfc-radio-option:hover {
	border-color: color-mix(in srgb, var(--sfc-accent) 40%, white);
}

.sfc-radio-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sfc-radio-dot {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 1.5px solid var(--sfc-border);
	border-radius: 50%;
	position: relative;
	transition: border-color 0.15s ease;
}

.sfc-radio-option input:checked ~ .sfc-radio-dot {
	border-color: var(--sfc-accent);
}

.sfc-radio-option input:checked ~ .sfc-radio-dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--sfc-accent);
}

.sfc-radio-option:has(input:checked) {
	border-color: var(--sfc-accent);
	background: color-mix(in srgb, var(--sfc-accent) 5%, transparent);
}

/* Multi-select (checkbox group). Reuses the same checkbox visual as a
   single checkbox/consent field (.sfc-checkbox-label/-box/-text below),
   just wrapped in a fieldset/legend like a radio group, with each
   option given the same bordered "card" look as a radio option so the
   group reads clearly as one field. */
.sfc-checkbox-group {
	border: none;
	margin: 0;
	padding: 0;
}

.sfc-checkbox-group-legend {
	font-size: 14px;
	color: var(--sfc-text);
	font-weight: 500;
	margin-bottom: 10px;
	padding: 0;
}

.sfc-checkbox-group .sfc-checkbox-label {
	padding: 12px 14px;
	border: 1.5px solid var(--sfc-border);
	border-radius: 10px;
	margin-bottom: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sfc-checkbox-group .sfc-checkbox-label:hover {
	border-color: color-mix(in srgb, var(--sfc-accent) 40%, white);
}

.sfc-checkbox-group .sfc-checkbox-label:has(input:checked) {
	border-color: var(--sfc-accent);
	background: color-mix(in srgb, var(--sfc-accent) 5%, transparent);
}

.sfc-field.sfc-invalid .sfc-checkbox-group-legend {
	color: var(--sfc-error);
}

.sfc-field.sfc-invalid .sfc-checkbox-group .sfc-checkbox-label {
	border-color: var(--sfc-error);
}

/* Consent / terms link inside a checkbox */
.sfc-field-consent .sfc-checkbox-text a {
	color: var(--sfc-accent);
	text-decoration: underline;
}

.sfc-consent-description {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sfc-muted);
}

/* File upload */
.sfc-file-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfc-file-label {
	font-size: 13.5px;
	color: var(--sfc-muted);
}

.sfc-file-drop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1.5px dashed var(--sfc-border);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	background: #fbfbfe;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sfc-file-drop:hover {
	border-color: var(--sfc-accent);
	background: #ffffff;
}

.sfc-file-drop-text {
	font-size: 14px;
	color: var(--sfc-muted);
}

.sfc-file-drop-name {
	font-size: 13px;
	color: var(--sfc-accent);
	font-weight: 600;
	text-align: right;
	word-break: break-all;
}

.sfc-file-input {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Checkbox */
.sfc-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--sfc-text);
	padding: 6px 0;
}

.sfc-checkbox-label input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sfc-checkbox-box {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1.5px solid var(--sfc-border);
	border-radius: 6px;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sfc-checkbox-label input:checked ~ .sfc-checkbox-box {
	background: var(--sfc-accent);
	border-color: var(--sfc-accent);
}

.sfc-checkbox-label input:checked ~ .sfc-checkbox-box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* Submit button */
.sfc-submit-btn {
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 15px 24px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, var(--sfc-button), var(--sfc-button-2));
	background-size: 160% 160%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-position 0.3s ease;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sfc-button) 28%, transparent);
	touch-action: manipulation;
}

.sfc-submit-btn:hover {
	background-position: 100% 0;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--sfc-button) 34%, transparent);
}

.sfc-submit-btn:active {
	transform: translateY(0);
}

.sfc-submit-btn:disabled {
	opacity: 0.75;
	cursor: not-allowed;
	transform: none;
}

.sfc-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
}

.sfc-form-wrap.sfc-loading .sfc-btn-spinner {
	display: inline-block;
	animation: sfc-spin 0.7s linear infinite;
}

.sfc-form-wrap.sfc-loading .sfc-btn-text {
	opacity: 0.85;
}

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

.sfc-form-message {
	margin-top: 14px;
	font-size: 13.5px;
	text-align: center;
	color: var(--sfc-error);
	min-height: 1em;
}

/* Success panel */
.sfc-success-panel {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 24px;
	background: var(--sfc-bg);
	border: 1px solid var(--sfc-border);
	border-radius: var(--sfc-radius);
	box-shadow: 0 4px 24px rgba(20, 20, 43, 0.06);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.sfc-form-wrap.sfc-submitted .sfc-success-panel {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

.sfc-success-panel p {
	margin: 16px 0 0;
	color: var(--sfc-text);
	font-size: 15.5px;
	line-height: 1.5;
}

.sfc-success-icon svg {
	width: 64px;
	height: 64px;
}

.sfc-check-circle {
	stroke: var(--sfc-accent-2);
	stroke-width: 2.5;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: sfc-draw-circle 0.5s ease forwards;
}

.sfc-check-mark {
	stroke: var(--sfc-accent-2);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: sfc-draw-check 0.35s ease 0.45s forwards;
}

@keyframes sfc-draw-circle {
	to { stroke-dashoffset: 0; }
}

@keyframes sfc-draw-check {
	to { stroke-dashoffset: 0; }
}

@media (max-width: 480px) {
	.sfc-form {
		padding: 24px 18px;
	}
}