/*
 * DataLug Core form styling for the .dlf-* plugin forms. Mirrors the site's form look (the .dsgo-*
 * rules in Global Styles) so the plugin forms match: IBM Plex Sans inputs (font-family: inherit),
 * full-width controls, borders and focus ring, bold block labels, a full-width brand button, and a
 * two-column grid with full-width spanning. Loaded site-wide so the newsletter band works too.
 * Uses the theme's CSS custom properties (ink, brand, field-border, ...).
 */

.dlf-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
	margin: 0;
}
.dlf-form > * { grid-column: 1 / -1; }
.dlf-form > .dlf-field { grid-column: auto; margin: 0; }
.dlf-form > .dlf-field--span { grid-column: 1 / -1; }

.dlf-label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	margin-bottom: 7px;
}
.dlf-req { color: var(--wp--preset--color--brand); }

.dlf-input,
.dlf-select,
.dlf-textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 10px;
	padding: 12px 14px;
}
.dlf-input::placeholder,
.dlf-textarea::placeholder { color: var(--wp--preset--color--ink-3); opacity: 1; }
.dlf-input:focus,
.dlf-select:focus,
.dlf-textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(57, 67, 160, .15);
}
.dlf-textarea { min-height: 110px; resize: vertical; }
.dlf-select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237C808A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.dlf-field--checkbox .dlf-label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	margin: 0;
	cursor: pointer;
}
.dlf-checkbox { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--wp--preset--color--brand); }

.dlf-button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--brand);
	border: 0;
	border-radius: 10px;
	padding: 14px 20px;
	cursor: pointer;
	transition: background .15s;
}
.dlf-button:hover { background: var(--wp--preset--color--brand-strong); }
.dlf-button[disabled] { opacity: .7; cursor: default; }

.dlf-message { margin: 0; font-size: 14px; }
.dlf-message--ok { color: var(--wp--preset--color--success); }
.dlf-message--error { color: #9b2c2c; }

.dlf-heading { font-size: 20px; font-weight: 600; margin: 0; }

@media (max-width: 640px) {
	.dlf-form { grid-template-columns: 1fr; }
	.dlf-form > .dlf-field { grid-column: 1 / -1; }
}

/* Newsletter band: inline email + button, hidden label. */
.dlf-form--newsletter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-end;
}
.dlf-form--newsletter > * { grid-column: auto; }
.dlf-form--newsletter .dlf-field { flex: 1 1 220px; }
.dlf-form--newsletter .dlf-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.dlf-form--newsletter .dlf-button { flex: 0 0 auto; width: auto; }
.dlf-form--newsletter .dlf-message { flex: 1 0 100%; }

/*
 * Legacy control font. The newsletter band (.dl-news-*) and the referral reserve form (.dl-ref-*) are
 * styled in Global Styles, which does not set font-family on their native controls, so they fall back to
 * the browser default instead of IBM Plex Sans. Pin them to the inherited face for a consistent look.
 */
.dl-news-input,
.dl-news-btn,
.dl-ref-form input,
.dl-ref-form select,
.dl-ref-form textarea,
.dl-ref-form button,
.dl-ref-row input,
.dl-ref-row button {
	font-family: inherit;
}