/* Project Signup & Test Votes – front-end styles.
   Everything is scoped to .shps-wrap so it never touches the rest of the theme. */

.shps-wrap {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 30px;
}
.shps-align-center { margin-left: auto; margin-right: auto; }
.shps-align-left   { margin-left: 0;    margin-right: auto; }
.shps-result.shps-align-center { text-align: center; }

.shps-title   { margin-bottom: .4em; }
.shps-project { margin: 0 0 1em; opacity: .8; }
.shps-intro,
.shps-text    { margin-bottom: 1.2em; }

.shps-field { margin-bottom: 1.1em; }
.shps-field label { display: block; font-weight: 600; margin-bottom: .3em; }
.shps-field input,
.shps-field textarea { width: 100%; margin-bottom: 0; box-sizing: border-box; }
.shps-req { color: #c0392b; }
.shps-readonly { background: #f3f3f3; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Buttons row                                                          */
/* Form DOM order is: Back, Submit.                                     */
/*  - Alignment "center": Back at one edge, Submit at the other.        */
/*  - Alignment "left":   both buttons together on the left.            */
/*  - Position "left" (.shps-pos-submit-left): Submit comes first.      */
/* Result: single button, .shps-pos-left | -center | -right             */
/* ------------------------------------------------------------------ */
.shps-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.4em;
}
.shps-actions .button { margin: 0; }
.shps-actions.shps-pos-submit-left .shps-btn-submit { order: -1; }

.shps-align-left .shps-actions { justify-content: flex-start; }

.shps-result .shps-actions.shps-pos-left   { justify-content: flex-start; }
.shps-result .shps-actions.shps-pos-center { justify-content: center; }
.shps-result .shps-actions.shps-pos-right  { justify-content: flex-end; }

/* Button icons (icon font <i> or built-in <svg>) */
.shps-actions .button i,
.shps-actions .button svg { vertical-align: middle; }
.shps-actions .button svg { width: 1em; height: 1em; }
.shps-actions .button span + i,
.shps-actions .button span + svg { margin-left: .35em; }
.shps-actions .button i + span,
.shps-actions .button svg + span { margin-left: .35em; }

/* ------------------------------------------------------------------ */
/* Form + project image (two columns)                                   */
/* ------------------------------------------------------------------ */
.shps-split {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
.shps-split.shps-img-left .shps-col-image { order: -1; }
.shps-col-form  { flex: 1 1 0; min-width: 0; }
.shps-col-image { min-width: 0; }
.shps-img { display: block; width: 100%; height: auto; }

/* "Fill column height": image stretches to the height of the form */
.shps-split.shps-img-cover { align-items: stretch; }
.shps-img-cover .shps-col-image { position: relative; min-height: 220px; }
.shps-img-cover .shps-img {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shps-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	height: 100%;
	box-sizing: border-box;
	padding: 1em;
	text-align: center;
	font-size: .9em;
	color: #646970;
	background: #f0f0f1;
	border: 2px dashed #c3c4c7;
}

/* Phones / small tablets (Flatsome breakpoint): stack the columns */
@media (max-width: 849px) {
	.shps-split { flex-direction: column; gap: 20px; }
	.shps-split .shps-col-image { flex: none !important; max-width: 100% !important; width: 100%; }
	.shps-split.shps-img-mobile-above .shps-col-image { order: -1; }
	.shps-split.shps-img-mobile-below .shps-col-image { order: 1; }
	.shps-split.shps-img-mobile-hide  .shps-col-image { display: none; }
	.shps-img-cover .shps-col-image { min-height: 0; }
	.shps-img-cover .shps-img { position: static; height: auto; }
}

/* ------------------------------------------------------------------ */
/* Notices                                                              */
/* ------------------------------------------------------------------ */
.shps-notice {
	padding: .7em 1em;
	margin-bottom: 1.2em;
	border-left: 4px solid #999;
	background: #f7f7f7;
	font-size: .95em;
}
.shps-notice-error { border-color: #c0392b; background: #fdf0ee; }
.shps-notice-info  { border-color: #2d7ff9; background: #eef5ff; }

/* Honeypot – invisible to people, visible to bots */
.shps-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}