/**
 * mailpoet-pages.css
 *
 * Styles MailPoet's subscription result pages (confirm / unsubscribe /
 * manage) as a centered card in the theme's black/white style. Loaded only
 * on those requests (includes/class-mailpoet-pages.php); scoped to
 * `body.b2b-mailpoet-page` so nothing else on the site is affected.
 *
 * The page arrives through index.php's blog-listing markup (article.index-post
 * with inline padding/border styles) or page.php's article — both are styled
 * here. `!important` is only used to beat index.php's inline styles.
 */

.b2b-mailpoet-page .wrap {
	max-width: 620px;
	padding-top: 60px !important;
	padding-bottom: 20px !important;
}

.b2b-mailpoet-page article {
	background: #fff;
	border: 1px solid #111 !important;
	padding: 36px 32px !important;
	text-align: center;
}

/* Title: same treatment as the theme's modal/card headings. */
.b2b-mailpoet-page article h1,
.b2b-mailpoet-page article h2 {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
	border-bottom: 2px solid #111;
	padding-bottom: 12px;
	margin: 0 0 18px;
}
.b2b-mailpoet-page article h2 a {
	color: #111;
	pointer-events: none; /* the title link goes nowhere useful on these pages */
}

.b2b-mailpoet-page article p,
.b2b-mailpoet-page .entry-summary,
.b2b-mailpoet-page .entry-content {
	font-size: 14.5px;
	color: #333;
	margin: 0 0 16px;
}

/* Form pages (manage subscription / unsubscribe confirm). */
.b2b-mailpoet-page article form {
	text-align: left;
	margin: 0;
}
.b2b-mailpoet-page article label,
.b2b-mailpoet-page article .mailpoet_text_label,
.b2b-mailpoet-page article .mailpoet_checkbox_label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin: 0 0 6px;
}
.b2b-mailpoet-page article input[type="text"],
.b2b-mailpoet-page article input[type="email"],
.b2b-mailpoet-page article select,
.b2b-mailpoet-page article textarea {
	width: 100%;
	border: 1px solid #111;
	padding: 11px 12px;
	font-size: 14px;
	background: #fff;
	color: #111;
	border-radius: 0;
	margin: 0 0 14px;
}
.b2b-mailpoet-page article input[type="checkbox"],
.b2b-mailpoet-page article input[type="radio"] {
	margin-right: 8px;
}

/* Buttons: match .btn (base.css). */
.b2b-mailpoet-page article input[type="submit"],
.b2b-mailpoet-page article button,
.b2b-mailpoet-page article .mailpoet_submit,
.b2b-mailpoet-page article a.button,
.b2b-mailpoet-page article a.mailpoet_button {
	display: inline-block;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	border-radius: 0;
	padding: 12px 20px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	text-decoration: none;
}
.b2b-mailpoet-page article input[type="submit"]:hover,
.b2b-mailpoet-page article button:hover,
.b2b-mailpoet-page article .mailpoet_submit:hover,
.b2b-mailpoet-page article a.button:hover,
.b2b-mailpoet-page article a.mailpoet_button:hover {
	background: #fff;
	color: #111;
}

/* Links inside the message. */
.b2b-mailpoet-page article .entry-content a:not(.btn),
.b2b-mailpoet-page article .entry-summary a:not(.btn) {
	color: #111;
	text-decoration: underline;
}

/* "Continue Shopping" button under the message (index.php / page.php). */
.b2b-mailpoet-page .mailpoet-continue {
	margin: 24px 0 0;
}
.b2b-mailpoet-page .mailpoet-continue .btn {
	color: #fff;
}
.b2b-mailpoet-page .mailpoet-continue .btn:hover {
	color: #111;
}

@media (max-width: 600px) {
	.b2b-mailpoet-page .wrap {
		padding-top: 30px !important;
	}
	.b2b-mailpoet-page article {
		padding: 26px 20px !important;
	}
}