/*
 * Complianz cookie policy / data request page overrides.
 *
 * The [cmplz-documents] shortcode (used on the Cookie Policy and Privacy
 * Statement pages) renders its own "Data Request" form with no styling of
 * its own - see the #cmplz-datarequest-form markup in
 * wp-content/plugins/complianz-gdpr-premium/documents/. Style it here (not
 * in Complianz's admin "Custom CSS" field) so it matches the rest of the
 * site and stays version-controlled with the theme.
 *
 * Button treatment matches the outlined wp-element-button style already
 * used for buttons inside .prose content (see custom.css); brand colors
 * (#005295 / #00477a) match the same source.
 */

/*
 * Selectors are scoped under #cmplz-document (rather than relying on
 * #cmplz-datarequest-form / .cmplz_datarequest alone) to keep specificity
 * high enough to win over the theme's .prose typography rules, and to match
 * Complianz's own 14px baseline font-size for body copy in that container
 * (see document.css, #cmplz-document p/li/td) instead of introducing a
 * different scale.
 */

/*
 * Complianz caps the whole document at 800px (document.css:
 * "#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode { ...
 * max-width: 800px; }"). Let the cookie policy content fill the full width
 * of the page's content column instead, like the rest of the site.
 */
#cmplz-document {
	max-width: none;
}

#cmplz-document #cmplz-datarequest-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	max-width: 640px;
	margin: 1rem 0 1.5rem;
	padding: 2rem;
	background-color: #fff;
}

#cmplz-document #cmplz-datarequest-form > div {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

#cmplz-document #cmplz-datarequest-form label {
	font-weight: 600;
	color: #0f172a;
	font-size: 14px;
}

/*
 * Border treatment matches .scf-input on the Connect page's Smartsheet form
 * (see wp-content/plugins/smartsheet-contact-form/assets/form.css).
 */
#cmplz-document #cmplz-datarequest-form input[type="text"],
#cmplz-document #cmplz-datarequest-form input[type="email"] {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 2px solid #cccccc;
	border-radius: 0;
	font-size: 14px;
	color: #0f172a;
	background-color: #fff;
	transition: border-color 0.2s ease-in-out;
}

#cmplz-document #cmplz-datarequest-form input[type="text"]:focus,
#cmplz-document #cmplz-datarequest-form input[type="email"]:focus {
	border-color: #3f78e0;
}

/* Checkbox rows: opt-out / limit-sensitive / access / deletion / portability */
#cmplz-document .cmplz_datarequest label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

#cmplz-document .cmplz_datarequest input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: #005295;
}

#cmplz-document #cmplz-datarequest-submit {
	align-self: flex-start;
	display: inline-block;
	border: 2px solid #005295;
	border-radius: 0;
	background-color: transparent;
	color: #005295;
	padding: 0.5rem 4rem;
	margin-top: 1rem;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition:
		color 0.2s ease-in-out,
		background-color 0.2s ease-in-out;
}

#cmplz-document #cmplz-datarequest-submit:hover {
	background-color: #005295;
	color: #fff;
}

#cmplz-document #cmplz-datarequest-submit:focus,
#cmplz-document #cmplz-datarequest-submit:active {
	background-color: #00477a;
	color: #fff;
}

/* Response message (success/error) shown above the form after submit */
#cmplz-document .cmplz-datarequest.cmplz-alert {
	border-radius: 0.4rem;
	font-size: 14px;
}