/**
 * The Custom Papers — form runtime stylesheet.
 *
 * Almost everything is done with Tailwind utility classes inline. This
 * file holds only the few rules we can't (or shouldn't) inline:
 *   - a stable border style for select arrows in WebKit so the rounded-lg
 *     look matches the rest of the form,
 *   - focus + disabled state polish for the submit button beyond what
 *     Tailwind gives us out of the box,
 *   - print-friendly defaults so admins printing rejected submissions
 *     don't see the gradient header bar from the email template.
 *
 * Keep this file SMALL. New visual tweaks should be Tailwind classes in
 * class-renderer.php, not new selectors here.
 */

/* Force consistent appearance on iOS / older webkit so selects + inputs
   match the rest of the theme. Tailwind's `appearance-none` would also
   work but ships at a different layer than our rules — be explicit. */
.tcp-form select,
.tcp-form input[type="date"],
.tcp-form input[type="datetime-local"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23334155' viewBox='0 0 24 24' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	padding-right: 2.25rem;
}

/* Hide the native focus ring on the styled file drop-zone label —
   the visible state lives on the parent label via Tailwind's `hover:`. */
.tcp-form input[data-tcp-file-input]:focus + span,
.tcp-form input[data-tcp-file-input]:focus {
	outline: none;
}

/* Visually mark the file drop-zone when the file input has focus
   (keyboard nav). */
.tcp-form input[data-tcp-file-input]:focus-visible + .js-tcp-file-name,
.tcp-form input[data-tcp-file-input]:focus + .js-tcp-file-name {
	color: #1F3A68;
}

/* Spinner injected into the submit label while a request is in flight.
   The JS layer just swaps the label text — no animation, but we leave
   room for adding one later without touching every form. */
.js-tcp-submit:disabled {
	cursor: progress;
}

/* Section headers (numbered group titles) — first one is flush with
   the top of the form; every subsequent one gets a divider above. */
.tcp-form .tcp-section {
	margin-top: 1.75rem;
	border-top: 1px solid #e2e8f0;
	padding-top: 1.75rem;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #e2e8f0;
	border-radius: 0;
	padding-bottom: 0;
}
.tcp-form .tcp-section:first-of-type {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

/* Print-friendly form: drop colors when printing rejected submissions
   from the admin Resend modal. */
@media print {
	.tcp-form {
		color: #000;
		background: transparent !important;
	}
	.tcp-form .js-tcp-submit { display: none; }
}