/**
 * Comment rules UI (accept rules, report, closed / suspended notices, rules page).
 * Plain CSS on purpose: not part of the SCSS build. Enqueued by
 * eco_comment_rules_enqueue_styles() in inc/comment-rules.php.
 */

/* Report button, top right of each comment header */
.comment__header .comment__report {
	background: none;
	border: 0;
	color: #767676;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 15px;
	text-decoration: underline;
	top: 15px;
}

.comment__header .comment__report:hover,
.comment__header .comment__report:focus {
	color: #333;
}

.comment__header .comment__report:disabled {
	cursor: default;
	opacity: .6;
	text-decoration: none;
}

/* Note and links under the comment input */
.comments__rules-note {
	color: #767676;
	font-size: 12px;
	line-height: 1.4;
	margin: 6px 0 0;
}

/* Note right under the input: align with the input text (it reserves 80px for the avatar) */
.comments__input-container > .comments__rules-note {
	padding: 0 20px 6px 80px;
}

.comments__rules-note a,
.comments__closed a,
.comments__rules-accept a {
	color: inherit;
	text-decoration: underline;
}

/* Subscribe CTA for logged-in non-subscribers */
.comments__subscribe-cta {
	text-align: center;
}

/* Accept the rules before the first comment */
.comments__rules-accept label {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 10px;
}

.comments__rules-accept input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
}

.comments__rules-msg {
	color: #b00020;
	font-size: 12px;
	margin: 8px 0 0;
}

.comments__rules-msg:empty {
	display: none;
}

/* Closed discussion / suspended user */
.comments__closed,
.comments__suspended {
	color: #555;
	font-size: 13px;
	line-height: 1.5;
}

/* Locked panel: Premium article without access. One centred block: icon, title,
   text, solid CTA, login, rules. Mobile first. */
.comments--locked .comments__content {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 60vh;
	padding: 32px 20px;
}

.comments__locked {
	margin: 0 auto;
	max-width: 340px;
	text-align: center;
	width: 100%;
}

.comments__locked-icon {
	align-items: center;
	background: #e6f6e6;
	border-radius: 50%;
	color: #00af00;
	display: inline-flex;
	height: 60px;
	justify-content: center;
	margin-bottom: 20px;
	width: 60px;
}

.comments__locked-title {
	color: #1a231a;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 8px;
}

.comments__locked-text {
	color: #4a554a;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 24px;
}

.comments--locked .comments__locked-cta.button {
	background: #00af00;
	border: 1px solid #00af00;
	border-radius: 999px;
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	padding: 13px 20px;
	text-align: center;
	width: 100%;
}

.comments--locked .comments__locked-cta.button:hover,
.comments--locked .comments__locked-cta.button:focus {
	background: #009600;
	border-color: #009600;
	color: #fff;
}

.comments__locked-login {
	color: #4a554a;
	font-size: 14px;
	margin: 18px 0 0;
}

/* the theme's link underline (a gradient) and the login button padding made this look broken */
.comments--locked .comments__locked-login a.main-navigation__login-button {
	background: none;
	border: 0;
	box-shadow: none;
	color: #00af00;
	display: inline;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
	text-shadow: none;
}

.comments__locked-rules {
	border-top: 1px solid #e9ece9;
	font-size: 13px;
	margin: 28px 0 0;
	padding-top: 16px;
}

.comments--locked .comments__locked-rules a {
	background: none;
	box-shadow: none;
	color: #767676;
	text-decoration: underline;
}

/* Permanent rules page */
.comment-rules .page__content {
	margin: 0 auto;
	max-width: 46em;
	padding-bottom: 3em;
}

.comment-rules h2 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 2em 0 .5em;
}

.comment-rules p {
	line-height: 1.6;
}