/* =========================================================
 * SECTION 1 — ROOT NOTICE WRAPPER
 * Main container for top bar and shortcode output.
 * ========================================================= */
.coolmo-mrn-notice {
	width: 100%;
	background: var(--coolmo-mrn-bg, #7c2d12);
	color: var(--coolmo-mrn-text, #ffffff);
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.45;
}

/* =========================================================
 * SECTION 2 — INNER LAYOUT
 * Flexible inner row for text and button.
 * ========================================================= */
.coolmo-mrn-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
}

.coolmo-mrn-message-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}

.coolmo-mrn-message {
	font-weight: 500;
}

/* =========================================================
 * SECTION 3 — BADGE
 * Status label for the notice.
 * ========================================================= */
.coolmo-mrn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* =========================================================
 * SECTION 4 — ACTION BUTTON
 * Renewal action button.
 * ========================================================= */
.coolmo-mrn-actions {
	flex-shrink: 0;
}

.coolmo-mrn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--coolmo-mrn-button-bg, #ffffff);
	color: var(--coolmo-mrn-button-text, #111827);
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.coolmo-mrn-button:hover,
.coolmo-mrn-button:focus {
	opacity: 0.92;
	transform: translateY(-1px);
	color: var(--coolmo-mrn-button-text, #111827);
	text-decoration: none;
}

/* =========================================================
 * SECTION 5 — STATUS MODIFIERS
 * Optional visual differences by state.
 * ========================================================= */
.coolmo-mrn-status-expired {
	background: #991b1b;
}

.coolmo-mrn-status-due_soon {
	background: var(--coolmo-mrn-bg, #7c2d12);
}

/* =========================================================
 * SECTION 6 — SHORTCODE VERSION
 * Keeps shortcode block visually neat inside content areas.
 * ========================================================= */
.coolmo-mrn-shortcode {
	margin: 16px 0 20px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.coolmo-mrn-shortcode .coolmo-mrn-inner {
	max-width: none;
}

/* =========================================================
 * SECTION 7 — RESPONSIVE ADJUSTMENTS
 * Stacks content cleanly on smaller screens.
 * ========================================================= */
@media (max-width: 782px) {
	.coolmo-mrn-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.coolmo-mrn-actions {
		width: 100%;
	}

	.coolmo-mrn-button {
		width: 100%;
	}
}