/* Restyles WP User Frontend's default form output (the "Submit a story"
   form and any other [wpuf_form]) to match the site's card/input language
   instead of the plugin's stock blue-button, browser-default-input look.
   Field structure (li.wpuf-el > .wpuf-label + .wpuf-fields) is WPUF's own
   markup — only visual treatment is touched here, see
   inc/wpuf-form-ui.php for where this is enqueued. */

.wpuf-form {
	max-width: 760px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 8px);
	padding: 40px 44px;
	box-shadow: 0 10px 28px rgba(28, 38, 33, 0.06);
	list-style: none;
	margin-top: 28px;
}
.wpuf-form ul.wpuf-form-add,
.wpuf-form > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wpuf-form li.wpuf-el {
	list-style: none;
	padding: 0 0 22px;
	margin: 0 0 22px;
	border-bottom: 1px solid var(--line);
}
.wpuf-form li.wpuf-el:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.wpuf-form .wpuf-label { float: none; width: auto; margin-bottom: 8px; }
.wpuf-form .wpuf-label label {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}
.wpuf-form .wpuf-label .required { color: var(--apple); margin-left: 2px; }
.wpuf-form .wpuf-fields { float: none; width: auto; margin: 0; }

.wpuf-form input[type="text"],
.wpuf-form input[type="email"],
.wpuf-form input[type="password"],
.wpuf-form input[type="number"],
.wpuf-form input[type="url"],
.wpuf-form textarea,
.wpuf-form select {
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 11px 14px;
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
}
.wpuf-form select { max-width: 320px; }
.wpuf-form input:focus,
.wpuf-form textarea:focus,
.wpuf-form select:focus {
	outline: 2px solid var(--pine);
	outline-offset: 1px;
	border-color: var(--pine);
}

.wpuf-form .wpuf-help {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--mist);
	font-style: italic;
}

/* Classic editor ("Your story") — outer chrome only; the typing surface
   itself is a same-origin iframe, restyled separately via the mce_css
   filter (see inc/wpuf-form-ui.php) so its type matches Inter too. */
.wpuf-form .wp-editor-wrap {
	max-width: 620px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.wpuf-form .wp-editor-wrap .mce-toolbar-grp,
.wpuf-form .wp-editor-wrap .quicktags-toolbar {
	background: var(--paper-dim, #F3F1E8);
	border-bottom: 1px solid var(--line);
}
.wpuf-form .wp-editor-wrap iframe { background: #fff; }
.wpuf-form .wpuf-button.wpuf-insert-image {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pine);
	background: var(--paper-dim, #F3F1E8);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: none;
	text-shadow: none;
	padding: 8px 14px;
	text-decoration: none;
}
.wpuf-form .wpuf-button.wpuf-insert-image:hover { background: #fff; border-color: var(--ink-soft); }

.wpuf-form .wpuf-attachment-upload-filelist a,
.wpuf-form a.button,
.wpuf-form a[class*="upload"] {
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pine);
	text-decoration: none;
}
.wpuf-form .wpuf-attachment-upload-filelist a:hover,
.wpuf-form a.button:hover,
.wpuf-form a[class*="upload"]:hover { text-decoration: underline; }

/* WPUF's own frontend stylesheet targets .wpuf-submit-button with the same
   specificity and loads after this file, so background/border need
   !important to actually win — same reasoning as share-buttons.css. */
.wpuf-form input.wpuf-submit-button,
.wpuf-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pine) !important;
	color: #fff !important;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	padding: 12px 24px !important;
	border-radius: var(--radius) !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}
.wpuf-form input.wpuf-submit-button:hover,
.wpuf-form input[type="submit"]:hover { background: var(--pine-deep) !important; }

@media (max-width: 640px) {
	.wpuf-form { padding: 26px 22px; }
}