/*
 * Forms from plugins, in our look: sign-in and registration (User Registration), WPForms, the Noptin pop-up.
 * They load on any page, shop or not.
 */
/*
 * The plugins print their colours as :root variables after our styles; html:root is one step more specific, so
 * these win wherever the plugin's block lands. User Registration (sign-in) and WPForms (contact, subscribe, the
 * download forms in posts): blue buttons and red markers become black.
 */
html:root {
	--ur-primary-color: var(--cc-ink);
	--ur-primary-dark: var(--cc-ink);
	--ur-primary-light: var(--cc-white);
	--ur-button-text-normal-color: var(--cc-white);
	--ur-button-text-hover-color: var(--cc-ink);
	--ur-button-background-normal-color: var(--cc-ink);
	--ur-button-background-hover-color: var(--cc-white);
	--wpforms-field-border-radius: var(--cc-radius);
	--wpforms-field-border-color: var(--cc-grey-500);
	--wpforms-field-border-color-spare: var(--cc-grey-500);
	--wpforms-field-text-color: var(--cc-ink);
	--wpforms-label-color: var(--cc-ink);
	--wpforms-label-sublabel-color: var(--cc-grey-600);
	--wpforms-label-error-color: var(--cc-ink);
	--wpforms-button-border-radius: var(--cc-radius);
	--wpforms-button-background-color: var(--cc-ink);
	--wpforms-button-border-color: var(--cc-ink);
	--wpforms-button-text-color: var(--cc-white);
	--wpforms-page-break-color: var(--cc-ink);
	--wpforms-container-border-color: var(--cc-ink);
}

/* Sign-in (User Registration): the page's old GenerateBlocks box is centred text; the form is a plain card */
.cc-entry--form .gb-container {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* User Registration draws a shadowed box around its form as well; one plain card is enough. html body outweighs
   its id-based rules. */
html body .cc-entry--form #user-registration.user-registration {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

body .cc-entry--form .ur-frontend-form,
html body .cc-entry--form #user-registration #ur-frontend-form {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--cc-space-6);
	border: var(--cc-line) solid var(--cc-grey-200);
	border-radius: var(--cc-radius);
	background: var(--cc-white);
	box-shadow: none;
}

html body .cc-entry--form .ur-frontend-form .ur-form-row .required,
body .cc-entry--form .ur-frontend-form .required,
body .cc-entry--form .ur-frontend-form abbr.required {
	color: var(--cc-ink);
	text-decoration: none;
}

body .cc-entry--form .ur-frontend-form a,
body .cc-entry--form .user-registration-LostPassword,
body .cc-entry--form .user-registration-LostPassword a,
body .cc-entry--form .user-registration-register a {
	color: var(--cc-ink);
}

body .cc-entry--form .ur-frontend-form .ur-submit-button,
body .cc-entry--form .ur-frontend-form .user-registration-Button {
	min-height: 3rem;
	border: var(--cc-line) solid var(--cc-ink);
	border-radius: var(--cc-radius);
	background: var(--cc-ink);
	color: var(--cc-white);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-card);
	font-weight: 600;
}

body .cc-entry--form .ur-frontend-form .ur-submit-button:hover,
body .cc-entry--form .ur-frontend-form .user-registration-Button:hover {
	background: var(--cc-white);
	color: var(--cc-ink);
}

.ur-frontend-form label,
.ur-frontend-form .user-registration-form-row {
	text-align: left;
}

@media (max-width: 479px) {
	body .cc-entry--form .ur-frontend-form,
	html body .cc-entry--form #user-registration #ur-frontend-form {
		padding: var(--cc-space-5) var(--cc-space-4);
	}
}

/* The sign-in form's own "Welcome" heading repeats the page's heading. Two ids outweigh the plugin's own rules. */
html body .cc-entry--form #user-registration #ur-frontend-form .user-registration-login-title {
	display: none;
}

/* Fields 44px tall like the theme's, in 16px type (phones zoom into smaller type). html body .cc-entry--form
   outweighs User Registration's own 38px rules, including its bordered and flat form styles. */
html body .cc-entry--form .ur-frontend-form .ur-form-row .ur-form-grid input:is(.input-text, [type="text"], [type="email"], [type="password"], [type="url"], [type="number"], [type="date"]),
html body .cc-entry--form .ur-frontend-form input.user-registration-Input {
	width: 100%;
	height: var(--cc-control-height);
	min-height: var(--cc-control-height);
	border: var(--cc-line) solid var(--cc-grey-500);
	border-radius: var(--cc-radius);
	color: var(--cc-ink);
	font-size: var(--cc-size-body);
}

html body .cc-entry--form .ur-frontend-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
}

/* WPForms: our fonts on its labels and button; the required star in black */
div.wpforms-container-full .wpforms-form .wpforms-field-label,
div.wpforms-container-full .wpforms-form button[type="submit"] {
	font-family: var(--cc-font-heading);
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--cc-ink);
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
	hyphens: manual;
}

/* Fields fill the reading column; WPForms's "medium" size stops them at 60% */
html body div.wpforms-container-full .wpforms-form .wpforms-field .wpforms-field-row,
html body div.wpforms-container-full .wpforms-form .wpforms-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	max-width: 100%;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background: var(--cc-white);
	color: var(--cc-ink);
}

/*
 * Noptin pop-up (the sign-up offer). Its sizes are inline styles made for computers (a 68px heading, 28px and 24px
 * lines), so on a phone the heading broke into single words; only !important can resize them. Its border is a
 * blue-grey, also inline. The pop-up's settings themselves are not changed.
 */
.noptin-popup-main-wrapper .noptin-optin-form-wrapper {
	border-color: var(--cc-ink) !important;
	border-radius: var(--cc-radius);
	font-family: var(--cc-font-body);
}

/* The first line keeps clear of the close button in the top corner */
.noptin-popup-main-wrapper .noptin-form-prefix {
	padding-inline: var(--cc-space-6);
	font-family: var(--cc-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem) !important;
	line-height: 1.3 !important;
}

.noptin-popup-main-wrapper .noptin-form-heading {
	font-family: var(--cc-font-heading);
	font-size: clamp(2.25rem, 1.4rem + 4.5vw, 3.75rem) !important;
	line-height: 1.1 !important;
}

.noptin-popup-main-wrapper .noptin-form-description {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) !important;
}

.noptin-popup-main-wrapper input {
	font-family: var(--cc-font-body);
}

.noptin-popup-main-wrapper .noptin-form-submit,
.noptin-popup-main-wrapper button[type="submit"] {
	border-radius: var(--cc-radius);
	font-family: var(--cc-font-heading);
	font-weight: 600;
}

/* Google's reCAPTCHA badge floats over the page corner (and the phone buy bar). Its required wording sits under
   the form instead (inc/forms.php); the badge is hidden only on pages that show that wording. */
body:has(.cc-recaptcha-note) .grecaptcha-badge {
	visibility: hidden;
}

/* div.wpforms-container-full in front: WPForms resets the size of everything inside its forms */
div.wpforms-container-full .cc-recaptcha-note {
	margin: var(--cc-space-3) 0 0;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-small);
	line-height: 1.5;
}

div.wpforms-container-full .cc-recaptcha-note a {
	color: inherit;
}

/* Password-protected product or page (the book bonus packs): the picture, then the words and the password row;
   side by side on computers */
.cc-password-form .cc-password-form__image {
	display: block;
	width: 100%;
	max-width: 24rem;
	height: auto;
	margin-bottom: var(--cc-space-5);
	border: var(--cc-line) solid var(--cc-grey-200);
}

@media (min-width: 900px) {
	.cc-password-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: start;
		column-gap: var(--cc-space-8);
	}

	.cc-password-form > * {
		grid-column: 2;
	}

	.cc-password-form .cc-password-form__image {
		grid-row: 1 / span 6;
		grid-column: 1;
		max-width: none;
		margin: 0;
	}
}

.cc-password-form__name {
	margin-bottom: var(--cc-space-6);
}

.cc-password-form__title {
	margin-bottom: var(--cc-space-4);
	font-size: var(--cc-size-h2);
}

.cc-password-form__form {
	margin-top: var(--cc-space-5);
	padding-top: var(--cc-space-5);
	border-top: var(--cc-line) solid var(--cc-grey-200);
}

.cc-password-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
	margin-top: var(--cc-space-2);
}

.cc-password-form__row .cc-field__input {
	flex: 1 1 14rem;
	width: auto;
}