/* =========================================================================
   VuePod — ugc.css
   "Show us your tank." submission page (page-ugc-submit.php). Loads only on the
   ugc-submit page. Tokens from vuepod.css.
   ========================================================================= */

.vp-ugc__inner { max-width: 760px; margin-inline: auto; }
.vp-ugc__head { text-align: center; margin-bottom: clamp( 28px, 4vw, 44px ); }
.vp-ugc__head .vp-eyebrow { justify-content: center; }
.vp-ugc__head .vp-lede { margin: 14px auto 0; max-width: 54ch; }

.vp-ugc__card {
	background: var( --vp-surface );
	border: 1px solid var( --vp-border-soft );
	border-radius: var( --vp-radius );
	box-shadow: var( --vp-shadow );
	padding: clamp( 22px, 4vw, 40px );
}

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

.vp-ugc__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.vp-ugc__field { display: flex; flex-direction: column; gap: 7px; }
.vp-ugc__field--full { grid-column: 1 / -1; }
.vp-ugc__field span {
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 0.88rem; color: var( --vp-text-dim );
}
.vp-ugc__field span em { font-style: normal; color: var( --vp-text-mut ); font-weight: 500; }

.vp-ugc__field input,
.vp-ugc__field select {
	width: 100%;
	background: rgba( 255, 255, 255, 0.05 );
	color: var( --vp-text );
	border: 1px solid var( --vp-border );
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var( --vp-font-body );
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vp-ugc__field select { appearance: none; cursor: pointer; }
.vp-ugc__field input::placeholder { color: var( --vp-text-mut ); }
.vp-ugc__field input:focus,
.vp-ugc__field select:focus {
	outline: none;
	border-color: var( --vp-sky );
	box-shadow: 0 0 0 3px rgba( 125, 211, 252, 0.18 );
}
.vp-ugc__field input[type="file"] {
	padding: 10px 14px; color: var( --vp-text-dim );
	font-family: var( --vp-font-display ); font-size: 0.9rem;
}
.vp-ugc__field input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 8px 14px;
	background: var( --vp-surface-2 ); color: var( --vp-text );
	border: 1px solid var( --vp-border ); border-radius: 999px;
	font-family: var( --vp-font-display ); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}

.vp-ugc__consent {
	display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 24px;
	color: var( --vp-text-dim ); font-size: 0.95rem; line-height: 1.5;
}
.vp-ugc__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var( --vp-sky ); flex: none; }

.vp-ugc__form .vp-btn { width: 100%; }
.vp-ugc__fineprint { color: var( --vp-text-mut ); font-size: 0.85rem; text-align: center; margin: 16px 0 0; }

/* Alerts */
.vp-ugc__alert {
	border-radius: var( --vp-radius ); padding: clamp( 22px, 4vw, 36px ); text-align: center;
}
.vp-ugc__alert--ok {
	background: linear-gradient( 180deg, rgba( 56, 189, 248, 0.10 ), rgba( 255, 255, 255, 0.02 ) );
	border: 1px solid rgba( 125, 211, 252, 0.25 );
}
.vp-ugc__alert--ok h2 { font-family: var( --vp-font-display ); color: #fff; font-size: clamp( 1.4rem, 3vw, 1.9rem ); margin: 0 0 10px; }
.vp-ugc__alert--ok p { color: var( --vp-text-dim ); margin: 0 0 18px; }
.vp-ugc__alert--err {
	background: rgba( 252, 165, 165, 0.08 );
	border: 1px solid rgba( 252, 165, 165, 0.3 );
	color: #fecaca; margin-bottom: 22px; font-size: 0.96rem;
}

@media ( max-width: 560px ) {
	.vp-ugc__grid { grid-template-columns: 1fr; }
}